intlayer-editor 7.0.8 → 7.0.9-canary.2

package/client/dist/assets/{index-BLpSOJjm.js → index-B_fQHAk5.js}

@@ -13552,6 +13552,11 @@ var defaultValues_exports = /* @__PURE__ */ __export$1({
   Log: () => log_exports,
   Routing: () => routing_exports
 });
+const camelCaseToSentence = (value) => {
+  if (!value) return "";
+  const withSpaces = value.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2");
+  return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1).toLowerCase();
+};
 const createCookieEntry = (options) => {
   const { name, path, expires, domain, secure, sameSite, httpOnly } = options ?? {};
   return {
@@ -14907,42 +14912,7 @@ const setLocaleInStorage = (locale, isCookieEnabled) => setLocaleInStorage$1(loc
   ...localeStorageOptions,
   isCookieEnabled
 });
-const byteToHex = [];
-for (let i2 = 0; i2 < 256; ++i2) {
-  byteToHex.push((i2 + 256).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset2 = 0) {
-  return (byteToHex[arr[offset2 + 0]] + byteToHex[arr[offset2 + 1]] + byteToHex[arr[offset2 + 2]] + byteToHex[arr[offset2 + 3]] + "-" + byteToHex[arr[offset2 + 4]] + byteToHex[arr[offset2 + 5]] + "-" + byteToHex[arr[offset2 + 6]] + byteToHex[arr[offset2 + 7]] + "-" + byteToHex[arr[offset2 + 8]] + byteToHex[arr[offset2 + 9]] + "-" + byteToHex[arr[offset2 + 10]] + byteToHex[arr[offset2 + 11]] + byteToHex[arr[offset2 + 12]] + byteToHex[arr[offset2 + 13]] + byteToHex[arr[offset2 + 14]] + byteToHex[arr[offset2 + 15]]).toLowerCase();
-}
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-  if (!getRandomValues) {
-    if (typeof crypto === "undefined" || !crypto.getRandomValues) {
-      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    }
-    getRandomValues = crypto.getRandomValues.bind(crypto);
-  }
-  return getRandomValues(rnds8);
-}
-const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = { randomUUID };
-function _v4(options, buf, offset2) {
-  options = options || {};
-  const rnds = options.random ?? options.rng?.() ?? rng();
-  if (rnds.length < 16) {
-    throw new Error("Random bytes length must be >= 16");
-  }
-  rnds[6] = rnds[6] & 15 | 64;
-  rnds[8] = rnds[8] & 63 | 128;
-  return unsafeStringify(rnds);
-}
-function v4(options, buf, offset2) {
-  if (native.randomUUID && true && !options) {
-    return native.randomUUID();
-  }
-  return _v4(options);
-}
+const randomUUID = () => Math.random().toString(36).slice(2);
 const { editor } = configuration ?? {};
 const CommunicatorContext = reactExports.createContext({
   postMessage: () => null,
@@ -14954,7 +14924,7 @@ const CommunicatorContext = reactExports.createContext({
   senderId: ""
 });
 const CommunicatorProvider = ({ children, allowedOrigins, postMessage }) => {
-  const senderIdRef = reactExports.useRef(v4());
+  const senderIdRef = reactExports.useRef(randomUUID());
   const value = reactExports.useMemo(() => ({
     postMessage,
     allowedOrigins,
@@ -20830,7 +20800,144 @@ const getDefaultConfig = () => {
   };
 };
 const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
-const cn$1 = (...inputs) => twMerge(clsx(inputs));
+const cn$2 = (...inputs) => twMerge(clsx(inputs));
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx$1 = clsx;
+const cva = (base, config2) => (props) => {
+  var _config_compoundVariants;
+  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx$1(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config2;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key2, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key2] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key2, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key2]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key2] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx$1(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+const containerVariants$1 = cva("flex flex-col text-text backdrop-blur", {
+  variants: {
+    roundedSize: {
+      none: "rounded-none",
+      sm: "rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md",
+      md: "rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg",
+      lg: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+      xl: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
+      "2xl": "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+      "3xl": "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
+      full: "rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full"
+    },
+    transparency: {
+      none: "bg-card",
+      sm: "bg-card/95",
+      md: "bg-card/70",
+      lg: "bg-card/40",
+      xl: "bg-card/20",
+      full: ""
+    },
+    padding: {
+      none: "p-0",
+      sm: "px-2 py-4",
+      md: "px-4 py-6",
+      lg: "px-6 py-8",
+      xl: "px-8 py-10",
+      "2xl": "px-10 py-12"
+    },
+    separator: {
+      without: "",
+      x: "divide-x divide-dashed divide-text/20",
+      y: "divide-y divide-dashed divide-text/20",
+      both: "divide-x divide-y divide-dashed divide-text/20"
+    },
+    border: {
+      none: "",
+      with: "border-[1.5px]"
+    },
+    borderColor: {
+      primary: "border-primary",
+      secondary: "border-secondary",
+      neutral: "border-neutral",
+      text: "border-text",
+      error: "border-error",
+      warning: "border-warning",
+      success: "border-success"
+    },
+    background: {
+      none: "bg-inherit",
+      hoverable: "bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur",
+      with: ""
+    },
+    gap: {
+      none: "gap-0",
+      sm: "gap-1",
+      md: "gap-3",
+      lg: "gap-5",
+      xl: "gap-8",
+      "2xl": "gap-10"
+    }
+  },
+  defaultVariants: {
+    roundedSize: "md",
+    border: "none",
+    borderColor: "text",
+    transparency: "md",
+    padding: "none",
+    separator: "without",
+    gap: "none"
+  }
+});
+let ContainerRoundedSize = /* @__PURE__ */ (function(ContainerRoundedSize$1) {
+  ContainerRoundedSize$1["NONE"] = "none";
+  ContainerRoundedSize$1["SM"] = "sm";
+  ContainerRoundedSize$1["MD"] = "md";
+  ContainerRoundedSize$1["LG"] = "lg";
+  ContainerRoundedSize$1["XL"] = "xl";
+  ContainerRoundedSize$1["TWO_XL"] = "2xl";
+  ContainerRoundedSize$1["THREE_XL"] = "3xl";
+  ContainerRoundedSize$1["FULL"] = "full";
+  return ContainerRoundedSize$1;
+})({});
+const Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+  className: cn$2(containerVariants$1({
+    roundedSize,
+    transparency,
+    padding,
+    separator,
+    border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
+    background,
+    borderColor,
+    gap,
+    className
+  })),
+  ...props,
+  children
+});
 const Spinner = ({ className, strokeWidth = 4 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "44",
@@ -20839,7 +20946,7 @@ const Spinner = ({ className, strokeWidth = 4 }) => /* @__PURE__ */ jsxRuntimeEx
   stroke: "currentColor",
   role: "img",
   "aria-label": "Spinner",
-  className: cn$1("size-full", className),
+  className: cn$2("size-full", className),
   children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -20896,59 +21003,19 @@ const Spinner = ({ className, strokeWidth = 4 }) => /* @__PURE__ */ jsxRuntimeEx
 const Loader = ({ children, isLoading = true, keepChildren = false, className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading && keepChildren ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
   className: "relative size-full",
   children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-    className: cn$1("absolute top-0 left-0 flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center", className),
+    className: cn$2("absolute top-0 left-0 flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center", className),
     role: "status",
     "aria-label": "Animated icon, meaning that the website is processing",
     ...props,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, { className: "size-10 max-h-full max-w-full" })
   }), children]
 }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1("flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center", className),
+  className: cn$2("flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center", className),
   role: "status",
   "aria-label": "Animated icon, meaning that the website is processing",
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, { className: "size-10 max-h-full max-w-full" })
 }) : children ?? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) });
-const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx$1 = clsx;
-const cva = (base, config2) => (props) => {
-  var _config_compoundVariants;
-  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx$1(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config2;
-  const getVariantClassNames = Object.keys(variants).map((variant) => {
-    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-    if (variantProp === null) return null;
-    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-    return variants[variant][variantKey];
-  });
-  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-    let [key2, value] = param;
-    if (value === void 0) {
-      return acc;
-    }
-    acc[key2] = value;
-    return acc;
-  }, {});
-  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-    return Object.entries(compoundVariantOptions).every((param2) => {
-      let [key2, value] = param2;
-      return Array.isArray(value) ? value.includes({
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key2]) : {
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key2] === value;
-    }) ? [
-      ...acc,
-      cvClass,
-      cvClassName
-    ] : acc;
-  }, []);
-  return cx$1(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-};
 let ButtonSize = /* @__PURE__ */ (function(ButtonSize$1) {
   ButtonSize$1["SM"] = "sm";
   ButtonSize$1["MD"] = "md";
@@ -20960,28 +21027,17 @@ let ButtonSize = /* @__PURE__ */ (function(ButtonSize$1) {
   ButtonSize$1["ICON_XL"] = "icon-xl";
   return ButtonSize$1;
 })({});
-let ButtonIconPosition = /* @__PURE__ */ (function(ButtonIconPosition$1) {
-  ButtonIconPosition$1["LEFT"] = "left";
-  ButtonIconPosition$1["RIGHT"] = "right";
-  return ButtonIconPosition$1;
-})({});
-const buttonIconVariants = cva("", {
-  variants: {
-    size: {
-      [`${ButtonSize.SM}`]: "-translate-y-1/2 absolute top-1/2 size-3",
-      [`${ButtonSize.MD}`]: "-translate-y-1/2 absolute top-1/2 size-4",
-      [`${ButtonSize.LG}`]: "-translate-y-1/2 absolute top-1/2 size-5",
-      [`${ButtonSize.XL}`]: "-translate-y-1/2 absolute top-1/2 size-6",
-      [`${ButtonSize.ICON_SM}`]: "size-3",
-      [`${ButtonSize.ICON_MD}`]: "size-4",
-      [`${ButtonSize.ICON_LG}`]: "size-5",
-      [`${ButtonSize.ICON_XL}`]: "size-6"
-    },
-    position: {
-      [`${ButtonIconPosition.LEFT}`]: "left-3",
-      [`${ButtonIconPosition.RIGHT}`]: "right-3"
-    }
-  },
+const buttonIconVariants = cva("flex-none shrink-0", {
+  variants: { size: {
+    [`${ButtonSize.SM}`]: "size-3",
+    [`${ButtonSize.MD}`]: "size-4",
+    [`${ButtonSize.LG}`]: "size-5",
+    [`${ButtonSize.XL}`]: "size-6",
+    [`${ButtonSize.ICON_SM}`]: "size-3",
+    [`${ButtonSize.ICON_MD}`]: "size-4",
+    [`${ButtonSize.ICON_LG}`]: "size-4",
+    [`${ButtonSize.ICON_XL}`]: "size-5"
+  } },
   defaultVariants: { size: ButtonSize.MD }
 });
 let ButtonVariant = /* @__PURE__ */ (function(ButtonVariant$1) {
@@ -21017,7 +21073,7 @@ let ButtonTextAlign = /* @__PURE__ */ (function(ButtonTextAlign$1) {
   ButtonTextAlign$1["RIGHT"] = "right";
   return ButtonTextAlign$1;
 })({});
-const buttonVariants = cva("relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", {
+const buttonVariants = cva("relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", {
   variants: {
     size: {
       [`${ButtonSize.SM}`]: "min-h-7 px-3 text-xs max-md:py-1",
@@ -21030,68 +21086,88 @@ const buttonVariants = cva("relative cursor-pointer truncate whitespace-nowrap f
       [`${ButtonSize.ICON_XL}`]: "p-3"
     },
     color: {
-      [`${ButtonColor.PRIMARY}`]: "text-primary *:text-text-light focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50",
-      [`${ButtonColor.SECONDARY}`]: "text-secondary *:text-text-light focus:ring-secondary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-secondary-500/50",
-      [`${ButtonColor.DESTRUCTIVE}`]: "text-destructive *:text-text-light focus:ring-destructive-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-destructive-500/50",
-      [`${ButtonColor.NEUTRAL}`]: "text-neutral *:text-text-light focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
-      [`${ButtonColor.CARD}`]: "text-card *:text-text-light focus:ring-card-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-card-500/50",
-      [`${ButtonColor.LIGHT}`]: "text-white *:text-text-light focus:ring-white/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-white/50",
-      [`${ButtonColor.DARK}`]: "text-neutral-800 *:text-text-light focus:ring-neutral-800/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-800/50",
-      [`${ButtonColor.TEXT}`]: "text-text *:text-text-opposite focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
-      [`${ButtonColor.CURRENT}`]: "text-current *:text-text-light focus:ring-current/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-current/50",
-      [`${ButtonColor.TEXT_INVERSE}`]: "text-text-opposite *:text-text focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
-      [`${ButtonColor.ERROR}`]: "text-error *:text-text-light focus:ring-error/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-error/50",
-      [`${ButtonColor.SUCCESS}`]: "text-success *:text-text-light focus:ring-success/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-success/50",
-      [`${ButtonColor.CUSTOM}`]: "focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50"
+      [`${ButtonColor.PRIMARY}`]: "hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light",
+      [`${ButtonColor.SECONDARY}`]: "hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light",
+      [`${ButtonColor.DESTRUCTIVE}`]: "hover-destructive-500/20 text-destructive ring-destructive-500/20 *:text-text-light",
+      [`${ButtonColor.NEUTRAL}`]: "hover-neutral-500/20 text-neutral ring-neutral-500/20 *:text-text-light",
+      [`${ButtonColor.CARD}`]: "hover-card-500/20 text-card ring-card-500/20 *:text-text-light",
+      [`${ButtonColor.LIGHT}`]: "hover-white-500/20 text-white ring-white/20 *:text-text-light",
+      [`${ButtonColor.DARK}`]: "hover-neutral-500/20 text-neutral-800 ring-neutral-800/50 *:text-text-light",
+      [`${ButtonColor.TEXT}`]: "hover-neutral-500/20 text-text ring-neutral-500/20 *:text-text-opposite",
+      [`${ButtonColor.CURRENT}`]: "hover-current-500/20 text-current ring-current/20 *:text-text-light",
+      [`${ButtonColor.TEXT_INVERSE}`]: "hover-neutral-500/20 text-text-opposite ring-neutral-500/20 *:text-text",
+      [`${ButtonColor.ERROR}`]: "hover-error-500/20 text-error ring-error/20 *:text-text-light",
+      [`${ButtonColor.SUCCESS}`]: "hover-success-500/20 text-success ring-success/20 *:text-text-light",
+      [`${ButtonColor.CUSTOM}`]: ""
+    },
+    roundedSize: {
+      [`${ContainerRoundedSize.NONE}`]: "rounded-none",
+      [`${ContainerRoundedSize.SM}`]: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+      [`${ContainerRoundedSize.MD}`]: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
+      [`${ContainerRoundedSize.LG}`]: "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+      [`${ContainerRoundedSize.XL}`]: "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl"
     },
     variant: {
-      [`${ButtonVariant.DEFAULT}`]: "rounded-lg bg-current hover:bg-current/90",
+      [`${ButtonVariant.DEFAULT}`]: [
+        "bg-current",
+        "hover:bg-current/90",
+        "hover:ring-6",
+        "aria-selected:ring-6"
+      ],
+      [`${ButtonVariant.OUTLINE}`]: [
+        "rounded-2xl border-[1.5px] border-current bg-current/0 *:text-current!",
+        "hover:bg-current/10",
+        "hover:ring-6",
+        "aria-selected:ring-6"
+      ],
       [`${ButtonVariant.NONE}`]: "border-none bg-current/0 text-inherit hover:bg-current/0",
-      [`${ButtonVariant.OUTLINE}`]: "*:!text-current rounded-lg border-[1.5px] border-current bg-current/0 hover:bg-current/30",
-      [`${ButtonVariant.LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
-      [`${ButtonVariant.INVISIBLE_LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
-      [`${ButtonVariant.HOVERABLE}`]: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
-      [`${ButtonVariant.FADE}`]: "*:!text-current rounded-lg border-none bg-current/10 transition hover:bg-current/20 aria-[current]:bg-current/5",
+      [`${ButtonVariant.LINK}`]: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent hover:underline",
+      [`${ButtonVariant.INVISIBLE_LINK}`]: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent",
+      [`${ButtonVariant.HOVERABLE}`]: "rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/10 aria-[current]:bg-current/5",
+      [`${ButtonVariant.FADE}`]: "rounded-lg border-none bg-current/10 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5",
       [`${ButtonVariant.INPUT}`]: [
-        "*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-input-text text-sm shadow-none outline-0 transition-all",
-        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-        "aria-[invalid=true]:border-error",
-        "disabled:opacity-50"
+        "text-text",
+        "w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl",
+        "transition-shadow duration-100 md:text-sm",
+        "ring-0",
+        "disabled:opacity-50",
+        "text-text",
+        "bg-neutral-50 dark:bg-neutral-950",
+        "hover:bg-neutral-100/90 dark:hover:bg-neutral-900/90",
+        "ring-neutral-100 dark:ring-neutral-700",
+        "hover:ring-3",
+        "aria-selected:ring-4",
+        "focus-visible:ring-2",
+        "disabled:ring-0",
+        "focus-visible:outline-none",
+        "[box-shadow:none] focus:[box-shadow:none]",
+        "aria-invalid:border-error"
       ]
     },
     textAlign: {
-      [`${ButtonTextAlign.LEFT}`]: "text-left",
-      [`${ButtonTextAlign.CENTER}`]: "text-center",
-      [`${ButtonTextAlign.RIGHT}`]: "text-right"
+      [`${ButtonTextAlign.LEFT}`]: "justify-start text-left",
+      [`${ButtonTextAlign.CENTER}`]: "justify-center text-center",
+      [`${ButtonTextAlign.RIGHT}`]: "justify-end text-right"
     },
     isFullWidth: {
       true: "w-full",
       false: ""
-    },
-    hasIconLeft: {
-      true: "px-12",
-      false: ""
-    },
-    hasIconRight: {
-      true: "pr-8",
-      false: ""
     }
   },
   defaultVariants: {
-    variant: ButtonVariant.DEFAULT,
-    size: ButtonSize.MD,
-    color: ButtonColor.CUSTOM,
-    textAlign: ButtonTextAlign.CENTER,
-    isFullWidth: false,
-    hasIconRight: false,
-    hasIconLeft: false
+    variant: `${ButtonVariant.DEFAULT}`,
+    size: `${ButtonSize.MD}`,
+    color: `${ButtonColor.CUSTOM}`,
+    roundedSize: `${ContainerRoundedSize.MD}`,
+    textAlign: `${ButtonTextAlign.CENTER}`,
+    isFullWidth: false
   }
 });
-const Button = ({ variant, size: size2, color: color2, children, Icon: Icon2, IconRight, iconClassName, isLoading = false, isActive = false, isSelected = false, isFullWidth = false, textAlign, disabled, label, className, type = "button", "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-pressed": ariaPressed, ...props }) => {
-  const isLink = variant === ButtonVariant.LINK || variant === ButtonVariant.INVISIBLE_LINK;
+const Button = ({ variant, size: size2, color: color2, children, Icon: Icon2, IconRight, iconClassName, isLoading = false, isActive = false, isSelected = false, isFullWidth = false, roundedSize, textAlign, disabled, label, className, type = "button", "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-pressed": ariaPressed, ...props }) => {
+  const isLink = variant === `${ButtonVariant.LINK}` || variant === `${ButtonVariant.INVISIBLE_LINK}`;
   const isIconOnly = !children && (Icon2 || IconRight);
   const accessibilityProps = {
-    "aria-label": isIconOnly ? label : void 0,
+    "aria-label": isIconOnly ? label ?? void 0 : void 0,
     "aria-labelledby": !isIconOnly ? void 0 : void 0,
     "aria-describedby": ariaDescribedBy,
     "aria-expanded": ariaExpanded,
@@ -21102,6 +21178,7 @@ const Button = ({ variant, size: size2, color: color2, children, Icon: Icon2, Ic
     "aria-disabled": disabled || isLoading,
     "aria-selected": isSelected
   };
+  const isSquareButton = size2 === ButtonSize.ICON_SM || size2 === ButtonSize.ICON_MD || size2 === ButtonSize.ICON_LG || size2 === ButtonSize.ICON_XL;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("button", {
     disabled: isLoading || disabled,
     role: isLink ? "link" : "button",
@@ -21111,9 +21188,8 @@ const Button = ({ variant, size: size2, color: color2, children, Icon: Icon2, Ic
       size: size2,
       color: color2,
       isFullWidth,
+      roundedSize,
       textAlign: textAlign ?? (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),
-      hasIconLeft: Boolean(typeof children !== "undefined" && (typeof Icon2 !== "undefined" || isLoading)),
-      hasIconRight: Boolean(typeof children !== "undefined" && typeof IconRight !== "undefined"),
       className
     }),
     ...accessibilityProps,
@@ -21122,22 +21198,26 @@ const Button = ({ variant, size: size2, color: color2, children, Icon: Icon2, Ic
       Icon2 && !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, {
         className: buttonIconVariants({
           size: size2,
-          className: iconClassName,
-          position: ButtonIconPosition.LEFT
+          className: cn$2(!isSquareButton && "mr-3", iconClassName)
         }),
         "aria-hidden": "true"
       }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {
-        className: buttonIconVariants({
-          size: size2,
-          className: iconClassName,
-          position: ButtonIconPosition.LEFT
-        }),
-        isLoading,
-        "aria-hidden": "true",
-        "data-testid": "loader"
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: cn$2("flex w-0 items-center justify-center transition-[width] duration-300", isLoading && size2 === ButtonSize.SM && "w-3", isLoading && size2 === ButtonSize.MD && "w-4", isLoading && size2 === ButtonSize.LG && "w-5", isLoading && size2 === ButtonSize.XL && "w-6"),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {
+          className: buttonIconVariants({
+            size: size2,
+            className: cn$2(!isSquareButton && "mr-3", iconClassName)
+          }),
+          isLoading,
+          "aria-hidden": "true",
+          "data-testid": "loader"
+        })
+      }),
+      children && /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+        className: "flex-1 truncate whitespace-nowrap",
+        children
       }),
-      children && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children }),
       !children && isIconOnly && /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
         className: "sr-only",
         children: label
@@ -21145,8 +21225,7 @@ const Button = ({ variant, size: size2, color: color2, children, Icon: Icon2, Ic
       IconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {
         className: buttonIconVariants({
           size: size2,
-          className: iconClassName,
-          position: ButtonIconPosition.RIGHT
+          className: cn$2(!isSquareButton && "ml-3", iconClassName)
         }),
         "aria-hidden": "true"
       })
@@ -21157,11 +21236,11 @@ const MaxHeightSmoother = ({ children, isHidden: isHidden2, className = "", isOv
   "aria-hidden": isFocusable ? isHidden2 : void 0,
   tabIndex: isFocusable ? 0 : void 0,
   role: isFocusable ? "button" : "none",
-  className: cn$1("group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out", typeof isHidden2 !== "undefined" && !isHidden2 && "grid-rows-[1fr] overflow-x-auto", isOverable && "hover:grid-rows-[1fr] hover:overflow-x-auto", isFocusable && "focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto", className),
+  className: cn$2("group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out", typeof isHidden2 !== "undefined" && !isHidden2 && "grid-rows-[1fr] overflow-x-auto", isOverable && "hover:grid-rows-[1fr] hover:overflow-x-auto", isFocusable && "focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto", className),
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
     style: { minHeight: `${minHeight}px` },
-    className: cn$1(isOverable && "group-hover/height-smoother:visible", isFocusable && "group-focus/height-smoother:visible", className),
+    className: cn$2(isOverable && "group-hover/height-smoother:visible", isFocusable && "group-focus/height-smoother:visible", className),
     children
   })
 });
@@ -21240,56 +21319,56 @@ const createLucideIcon = (iconName, iconNode) => {
   Component.displayName = toPascalCase(iconName);
   return Component;
 };
-const __iconNode$p = [
+const __iconNode$q = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$p);
-const __iconNode$o = [
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$q);
+const __iconNode$p = [
   ["path", { d: "m18 9-6-6-6 6", key: "kcunyi" }],
   ["path", { d: "M12 3v14", key: "7cf3v8" }],
   ["path", { d: "M5 21h14", key: "11awu3" }]
 ];
-const ArrowUpFromLine = createLucideIcon("arrow-up-from-line", __iconNode$o);
-const __iconNode$n = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$n);
-const __iconNode$m = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$m);
-const __iconNode$l = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$l);
-const __iconNode$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$k);
-const __iconNode$j = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$j);
-const __iconNode$i = [
+const ArrowUpFromLine = createLucideIcon("arrow-up-from-line", __iconNode$p);
+const __iconNode$o = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$o);
+const __iconNode$n = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$n);
+const __iconNode$m = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$m);
+const __iconNode$l = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$l);
+const __iconNode$k = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$k);
+const __iconNode$j = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$i);
-const __iconNode$h = [
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$j);
+const __iconNode$i = [
   ["path", { d: "m12 15 2 2 4-4", key: "2c609p" }],
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const CopyCheck = createLucideIcon("copy-check", __iconNode$h);
-const __iconNode$g = [
+const CopyCheck = createLucideIcon("copy-check", __iconNode$i);
+const __iconNode$h = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$g);
-const __iconNode$f = [
+const Copy = createLucideIcon("copy", __iconNode$h);
+const __iconNode$g = [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
 ];
-const Download = createLucideIcon("download", __iconNode$f);
-const __iconNode$e = [
+const Download = createLucideIcon("download", __iconNode$g);
+const __iconNode$f = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$e);
-const __iconNode$d = [
+const ExternalLink = createLucideIcon("external-link", __iconNode$f);
+const __iconNode$e = [
   [
     "path",
     {
@@ -21307,8 +21386,8 @@ const __iconNode$d = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-const EyeOff = createLucideIcon("eye-off", __iconNode$d);
-const __iconNode$c = [
+const EyeOff = createLucideIcon("eye-off", __iconNode$e);
+const __iconNode$d = [
   [
     "path",
     {
@@ -21318,13 +21397,15 @@ const __iconNode$c = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$c);
-const __iconNode$b = [
+const Eye = createLucideIcon("eye", __iconNode$d);
+const __iconNode$c = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", key: "13o1zl" }],
   ["path", { d: "M2 12h20", key: "9i4pu4" }]
 ];
-const Globe = createLucideIcon("globe", __iconNode$b);
+const Globe = createLucideIcon("globe", __iconNode$c);
+const __iconNode$b = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$b);
 const __iconNode$a = [
   ["path", { d: "M11 19H5v-6", key: "8awifj" }],
   ["path", { d: "M13 5h6v6", key: "7voy1q" }],
@@ -21437,9 +21518,9 @@ const Accordion = ({ children, header, isOpen, defaultIsOpen = false, onToggle,
       onKeyDown: handleKeyDown,
       disabled,
       isFullWidth: true,
-      className: cn$1("flex items-center justify-between gap-2", headerClassName),
+      className: cn$2("flex items-center justify-between gap-2", headerClassName),
       IconRight: ChevronDown,
-      iconClassName: cn$1("transform transition-transform duration-500 ease-in-out", isExpandedState ? "rotate-0" : "-rotate-180"),
+      iconClassName: cn$2("transform transition-transform duration-500 ease-in-out", isExpandedState ? "rotate-0" : "-rotate-180"),
       "aria-expanded": isExpandedState,
       "aria-controls": generatedContentId,
       "aria-label": ariaLabel,
@@ -21528,7 +21609,7 @@ const Badge = ({ className, variant = BadgeVariant.DEFAULT, color: color2 = Badg
     onDismiss?.();
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Component, {
-    className: cn$1(badgeVariants({
+    className: cn$2(badgeVariants({
       variant,
       color: color2,
       size: size2
@@ -21637,7 +21718,7 @@ const Link = (props) => {
     rel,
     target,
     "aria-current": isActive ? "page" : void 0,
-    className: cn$1(linkVariants({
+    className: cn$2(linkVariants({
       variant,
       color: color2,
       underlined,
@@ -21712,7 +21793,7 @@ const ButtonLink = ({ children: text, onClick, color: color2, position, classNam
 };
 const Span = ({ children, position, className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
   itemProp: "item",
-  className: cn$1("inline-flex items-center", "font-medium text-neutral-700", "transition-colors duration-200", className),
+  className: cn$2("inline-flex items-center", "font-medium text-neutral-700", "transition-colors duration-200", className),
   children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
     itemProp: "name",
     ...props,
@@ -21731,7 +21812,7 @@ const Breadcrumb = ({ links, className, color: color2 = LinkColor.TEXT, locale,
   return /* @__PURE__ */ jsxRuntimeExports.jsx("nav", {
     "aria-label": ariaLabel,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx("ol", {
-      className: cn$1(breadcrumbVariants({
+      className: cn$2(breadcrumbVariants({
         size: size2,
         spacing
       }), className),
@@ -21763,7 +21844,7 @@ const Breadcrumb = ({ links, className, color: color2 = LinkColor.TEXT, locale,
         let section = /* @__PURE__ */ jsxRuntimeExports.jsx(Span, {
           position: index2 + 1,
           "aria-current": ariaCurrent,
-          className: cn$1("transition-colors duration-200", isActive && "text-neutral-900"),
+          className: cn$2("transition-colors duration-200", isActive && "text-neutral-900"),
           children: text
         }, text);
         if (isLink) section = /* @__PURE__ */ jsxRuntimeExports.jsx(LinkLink, {
@@ -21772,7 +21853,7 @@ const Breadcrumb = ({ links, className, color: color2 = LinkColor.TEXT, locale,
           position: index2 + 1,
           locale,
           "aria-current": ariaCurrent,
-          className: cn$1(isActive && "cursor-default text-neutral-900"),
+          className: cn$2(isActive && "cursor-default text-neutral-900"),
           children: text
         }, text);
         else if (isButton) section = /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonLink, {
@@ -21780,7 +21861,7 @@ const Breadcrumb = ({ links, className, color: color2 = LinkColor.TEXT, locale,
           color: color2,
           position: index2 + 1,
           "aria-current": ariaCurrent,
-          className: cn$1(isActive && "cursor-default text-neutral-900"),
+          className: cn$2(isActive && "cursor-default text-neutral-900"),
           children: text
         }, text);
         const listElement = /* @__PURE__ */ reactExports.createElement("li", {
@@ -24066,19 +24147,19 @@ function B({ asChild: r2, children: o2 }, n2) {
 }
 var Te = { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" };
 const CommandRoot = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(_e, {
-  className: cn$1("flex size-full flex-col overflow-hidden rounded-md", className),
+  className: cn$2("flex size-full flex-col overflow-hidden rounded-md", className),
   ...props
 });
 const CommandInput = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
   className: "flex w-full items-center",
   "cmdk-input-wrapper": "",
   children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsxRuntimeExports.jsx(_e.Input, {
-    className: cn$1("flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+    className: cn$2("flex w-full rounded-md bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
     ...props
   })]
 });
 const CommandList = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(_e.List, {
-  className: cn$1("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+  className: cn$2("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
   ...props
 });
 const CommandEmpty = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(_e.Empty, {
@@ -24086,7 +24167,7 @@ const CommandEmpty = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(_e.Empty,
   ...props
 });
 const CommandItem = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(_e.Item, {
-  className: cn$1("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
+  className: cn$2("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
   ...props
 });
 const Command = {
@@ -24096,91 +24177,6 @@ const Command = {
   Empty: CommandEmpty,
   Item: CommandItem
 };
-const containerVariants$1 = cva("flex flex-col text-text backdrop-blur", {
-  variants: {
-    roundedSize: {
-      none: "rounded-none",
-      sm: "rounded-sm",
-      md: "rounded-md",
-      lg: "rounded-lg",
-      xl: "rounded-xl",
-      "2xl": "rounded-2xl",
-      "3xl": "rounded-3xl",
-      full: "rounded-full"
-    },
-    transparency: {
-      none: "bg-card",
-      sm: "bg-card/95",
-      md: "bg-card/70",
-      lg: "bg-card/40",
-      xl: "bg-card/20",
-      full: ""
-    },
-    padding: {
-      none: "p-0",
-      sm: "p-1",
-      md: "p-2",
-      lg: "p-3",
-      xl: "p-4"
-    },
-    separator: {
-      without: "",
-      x: "divide-x divide-dashed divide-text/20",
-      y: "divide-y divide-dashed divide-text/20",
-      both: "divide-x divide-y divide-dashed divide-text/20"
-    },
-    border: {
-      none: "",
-      with: "border-[1.5px]"
-    },
-    borderColor: {
-      primary: "border-primary",
-      secondary: "border-secondary",
-      neutral: "border-neutral",
-      text: "border-text",
-      error: "border-error",
-      warning: "border-warning",
-      success: "border-success"
-    },
-    background: {
-      none: "bg-inherit",
-      hoverable: "!bg-opacity-5 hover:!bg-opacity-10 focus:!bg-opacity-10 aria-selected:!bg-opacity-15 backdrop-blur-0 hover:backdrop-blur focus:backdrop-blur aria-selected:backdrop-blur",
-      with: ""
-    },
-    gap: {
-      none: "gap-0",
-      sm: "gap-1",
-      md: "gap-3",
-      lg: "gap-5",
-      xl: "gap-8",
-      "2xl": "gap-10"
-    }
-  },
-  defaultVariants: {
-    roundedSize: "md",
-    border: "none",
-    borderColor: "text",
-    transparency: "md",
-    padding: "none",
-    separator: "without",
-    gap: "none"
-  }
-});
-const Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1(containerVariants$1({
-    roundedSize,
-    transparency,
-    padding,
-    separator,
-    border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
-    background,
-    borderColor,
-    gap,
-    className
-  })),
-  ...props,
-  children
-});
 const CopyButton = ({ content: content2, ...props }) => {
   const [copied, setCopied] = reactExports.useState(false);
   const [error, setError] = reactExports.useState(false);
@@ -24225,27 +24221,27 @@ const CopyButton = ({ content: content2, ...props }) => {
 const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
 const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
 const StyledH1 = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h1", {
-  className: cn$1("mt-5 font-bold text-2xl", className),
+  className: cn$2("font-bold text-2xl", className),
   ...props
 });
 const StyledH2 = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h2", {
-  className: cn$1("mt-16 mb-2 font-bold text-2xl", styledHeading, className),
+  className: cn$2("mb-2 font-bold text-2xl", styledHeading, className),
   ...props
 });
 const StyledH3 = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h3", {
-  className: cn$1("mt-5 mb-2 font-bold text-xl", styledHeading, className),
+  className: cn$2("mb-2 font-bold text-xl", styledHeading, className),
   ...props
 });
 const StyledH4 = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h4", {
-  className: cn$1("mt-3 font-bold text-lg", styledHeading, className),
+  className: cn$2("font-bold text-lg", styledHeading, className),
   ...props
 });
 const StyledH5 = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h5", {
-  className: cn$1("mt-3 font-bold text-base", styledHeading, className),
+  className: cn$2("font-bold text-base", styledHeading, className),
   ...props
 });
 const StyledH6 = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h6", {
-  className: cn$1("mt-3 ml-3 font-bold text-base", styledHeading, className),
+  className: cn$2("ml-3 font-bold text-base", styledHeading, className),
   ...props
 });
 const getId = (children) => String(children).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").toLowerCase();
@@ -24282,7 +24278,7 @@ const HeadingWrapper = ({ H: H7, children, className, isClickable, ...props }) =
     id: id2,
     onClick: isClickable ? onClick : void 0,
     "aria-label": isClickable ? `Click to scroll to section ${id2} and copy the link to the clipboard` : void 0,
-    className: cn$1(isClickable && styledAfter, className),
+    className: cn$2(isClickable && styledAfter, className),
     ...props,
     children
   });
@@ -24421,7 +24417,7 @@ function requireWithSelector_production() {
     return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
   }
   var objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React2.useRef, useEffect = React2.useEffect, useMemo = React2.useMemo, useDebugValue2 = React2.useDebugValue;
-  withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+  withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
     var instRef = useRef2(null);
     if (null === instRef.current) {
       var inst = { hasValue: false, value: null };
@@ -24433,7 +24429,7 @@ function requireWithSelector_production() {
           if (!hasMemo) {
             hasMemo = true;
             memoizedSnapshot = nextSnapshot;
-            nextSnapshot = selector(nextSnapshot);
+            nextSnapshot = selector2(nextSnapshot);
             if (void 0 !== isEqual && inst.hasValue) {
               var currentSelection = inst.value;
               if (isEqual(currentSelection, nextSnapshot))
@@ -24443,7 +24439,7 @@ function requireWithSelector_production() {
           }
           currentSelection = memoizedSelection;
           if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
-          var nextSelection = selector(nextSnapshot);
+          var nextSelection = selector2(nextSnapshot);
           if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
             return memoizedSnapshot = nextSnapshot, currentSelection;
           memoizedSnapshot = nextSnapshot;
@@ -24459,7 +24455,7 @@ function requireWithSelector_production() {
           }
         ];
       },
-      [getSnapshot, getServerSnapshot, selector, isEqual]
+      [getSnapshot, getServerSnapshot, selector2, isEqual]
     );
     var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
     useEffect(
@@ -24490,7 +24486,7 @@ const { useDebugValue } = We;
 const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
 let didWarnAboutEqualityFn = false;
 const identity = (arg) => arg;
-function useStore(api, selector = identity, equalityFn) {
+function useStore(api, selector2 = identity, equalityFn) {
   if ((__vite_import_meta_env__ ? "production" : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
     console.warn(
       "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
@@ -24501,7 +24497,7 @@ function useStore(api, selector = identity, equalityFn) {
     api.subscribe,
     api.getState,
     api.getServerState || api.getInitialState,
-    selector,
+    selector2,
     equalityFn
   );
   useDebugValue(slice);
@@ -24514,7 +24510,7 @@ const createImpl = (createState2) => {
     );
   }
   const api = typeof createState2 === "function" ? createStore(createState2) : createState2;
-  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
+  const useBoundStore = (selector2, equalityFn) => useStore(api, selector2, equalityFn);
   Object.assign(useBoundStore, api);
   return useBoundStore;
 };
@@ -24590,10 +24586,10 @@ function shallow(objA, objB) {
   return true;
 }
 const { useRef } = We;
-function useShallow(selector) {
+function useShallow(selector2) {
   const prev = useRef();
   return (state) => {
-    const next = selector(state);
+    const next = selector2(state);
     return shallow(prev.current, next) ? prev.current : prev.current = next;
   };
 }
@@ -31787,7 +31783,7 @@ let ModalSize = /* @__PURE__ */ (function(ModalSize$1) {
   ModalSize$1["UNSET"] = "unset";
   return ModalSize$1;
 })({});
-const modalVariants = cva("cursor-default justify-center overflow-auto py-3 shadow-sm", {
+const modalVariants = cva("cursor-default justify-center overflow-auto p-3 shadow-sm", {
   variants: { size: {
     sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
     md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
@@ -31804,6 +31800,15 @@ const Modal = ({ children, isOpen, container, disableScroll = true, onClose, has
     key: "modal",
     disableScroll: isOpen && disableScroll
   });
+  reactExports.useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && isOpen && onClose) onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
   if (!containerElement) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   const hasTitle = typeof title === "string";
   return reactDomExports.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, {
@@ -31832,58 +31837,63 @@ const Modal = ({ children, isOpen, container, disableScroll = true, onClose, has
       onClose?.();
     },
     "aria-hidden": !isOpen,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      className: "flex justify-center p-4",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MotionModal, {
-        onClick: (e) => e.stopPropagation(),
-        initial: { scale: isOpen ? 0.5 : 1 },
-        animate: { scale: isOpen ? 1 : 0.5 },
-        transition: { duration: 0.3 },
-        className: modalVariants({
-          size: size2,
-          className
-        }),
-        role: "dialog",
-        "aria-modal": true,
-        roundedSize: "2xl",
-        ...props,
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: cn$1("cursor-default px-4", hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`),
-          children: [hasTitle && /* @__PURE__ */ jsxRuntimeExports.jsx(H3, {
-            className: "ml-4 flex items-center justify-center font-bold text-lg",
-            children: title
-          }), hasCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
-            variant: ButtonVariant.HOVERABLE,
-            color: ButtonColor.TEXT,
-            label: "Close modal",
-            className: "ml-auto",
-            onClick: (e) => {
-              e.stopPropagation();
-              onClose?.();
-            },
-            Icon: X$1,
-            size: ButtonSize.ICON_MD
-          })]
-        }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          className: "flex flex-1 flex-col items-center overflow-auto",
-          children
+    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(MotionModal, {
+      onClick: (e) => e.stopPropagation(),
+      initial: { scale: isOpen ? 0.5 : 1 },
+      animate: { scale: isOpen ? 1 : 0.5 },
+      transition: { duration: 0.3 },
+      className: modalVariants({
+        size: size2,
+        className
+      }),
+      role: "dialog",
+      "aria-modal": true,
+      roundedSize: "2xl",
+      ...props,
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        className: cn$2("cursor-default", hasCloseButton && hasTitle ? `flex items-start` : hasCloseButton ? `flex justify-end` : hasTitle ? `items-center` : `hidden`),
+        children: [hasTitle && /* @__PURE__ */ jsxRuntimeExports.jsx(H3, {
+          className: "mt-2 mb-4 ml-4 flex items-center justify-center font-bold text-lg",
+          children: title
+        }), hasCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
+          variant: ButtonVariant.HOVERABLE,
+          color: ButtonColor.TEXT,
+          label: "Close modal",
+          className: "ml-auto",
+          onClick: (e) => {
+            e.stopPropagation();
+            onClose?.();
+          },
+          Icon: X$1,
+          size: ButtonSize.ICON_MD
         })]
-      })
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: "flex flex-1 flex-col items-center",
+        children
+      })]
     })
   }), containerElement);
 };
-const checkboxVariants = cva("", {
+const checkboxVariants = cva([
+  "appearance-none",
+  "pointer relative border-2",
+  "focus:outline-0",
+  "checked:border-current checked:bg-current checked:hover:bg-current/80",
+  "ring-current/20 ring-offset-current",
+  "hover:bg-current/20",
+  "disabled:opacity-50",
+  "ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6",
+  "checked:before:absolute checked:before:inset-0 checked:before:content-['✓']",
+  "checked:before:flex checked:before:items-center checked:before:justify-center",
+  "checked:before:text-text-opposite/80",
+  "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl"
+].join(" "), {
   variants: {
-    variant: { default: [
-      "pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all",
-      "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-      "checked:border-checkbox-checked-border checked:bg-checkbox-checked",
-      "disabled:opacity-50"
-    ] },
+    variant: { default: "" },
     size: {
-      sm: "size-4",
-      md: "size-5",
-      lg: "size-6"
+      sm: "size-4 rounded-md",
+      md: "size-5 rounded-lg",
+      lg: "size-6 rounded-xl"
     },
     color: {
       primary: "accent-primary",
@@ -31911,20 +31921,19 @@ const checkboxVariants = cva("", {
 });
 const Input$1 = ({ validationStyleEnabled = false, label, size: size2, color: color2, name, variant, className, labelClassName, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("input", {
   type: "checkbox",
-  className: checkboxVariants({
+  className: cn$2(checkboxVariants({
     variant,
     size: size2,
     color: color2,
-    validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
-    className
-  }),
+    validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
+  }), className),
   ...props
 });
 const Checkbox = (props) => {
   const { label, name, id: id2 } = props;
   return label ? /* @__PURE__ */ jsxRuntimeExports.jsxs("label", {
     htmlFor: id2 ?? name,
-    className: cn$1("flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm", props.labelClassName),
+    className: cn$2("flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm", props.labelClassName),
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Input$1, {
       id: id2 ?? name,
       ...props
@@ -31934,20 +31943,32 @@ const Checkbox = (props) => {
     ...props
   });
 };
-const inputVariants = cva("", {
+const cn$1 = (...classes) => classes.filter(Boolean).join(" ");
+const inputVariants = cva([
+  "w-full select-text resize-none text-base shadow-none outline-none",
+  "transition-shadow duration-100 md:text-sm",
+  "ring-0",
+  "disabled:opacity-50",
+  "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl"
+].join(" "), {
   variants: {
     variant: {
       default: [
-        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-base text-input-text shadow-none outline-0 transition-all md:text-sm",
-        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-        "aria-[invalid=true]:border-error",
-        "disabled:opacity-50"
-      ],
-      invisible: ["w-full border-none bg-inherit text-inherit outline-hidden ring-0"]
+        "text-text",
+        "bg-neutral-50 dark:bg-neutral-950",
+        "ring-neutral-100 dark:ring-neutral-700",
+        "ring-offset-neutral-100 dark:ring-offset-neutral-700",
+        "focus-visible:outline-none",
+        "disabled:ring-0",
+        "focus-visible:ring-3",
+        "[box-shadow:none] focus:[box-shadow:none]",
+        "aria-invalid:border-error"
+      ].join(" "),
+      invisible: ["border-none bg-inherit text-inherit outline-none ring-0"].join(" ")
     },
     size: {
-      md: "px-2 py-3 md:py-1",
-      lg: "p-4 md:py-2"
+      md: "px-2 py-3 md:py-2",
+      lg: "p-4"
     },
     validationStyleEnabled: {
       disabled: "",
@@ -31966,12 +31987,11 @@ let InputVariant = /* @__PURE__ */ (function(InputVariant$1) {
   return InputVariant$1;
 })({});
 const Input = ({ validationStyleEnabled = false, variant, size: size2, className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("input", {
-  className: inputVariants({
+  className: cn$1(inputVariants({
     variant,
     size: size2,
-    validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
-    className
-  }),
+    validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
+  }), className),
   ...props
 });
 const InputPassword = (props) => {
@@ -31994,18 +32014,477 @@ const InputPassword = (props) => {
       onClick: handlePasswordReveal,
       "aria-label": isPasswordRevealed ? "Hide password" : "Show password",
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIconComponent, {
-        className: "mr-2 inline-block text-neutral",
+        className: "mr-2 inline-block cursor-pointer text-neutral",
         size: 20
       })
     })]
   });
 };
+const syncTimeouts = (cb) => {
+  return [
+    setTimeout(cb, 0),
+    setTimeout(cb, 10),
+    setTimeout(cb, 50)
+  ];
+};
+const safeInsertRule = (sheet, rule) => {
+  try {
+    sheet.insertRule(rule);
+  } catch {
+    console.error("input-otp could not insert CSS rule:", rule);
+  }
+};
+const NOSCRIPT_CSS_FALLBACK = `
+[data-input-otp] {
+  --nojs-bg: white !important;
+  --nojs-fg: black !important;
+
+  background-color: var(--nojs-bg) !important;
+  color: var(--nojs-fg) !important;
+  caret-color: var(--nojs-fg) !important;
+  letter-spacing: .25em !important;
+  text-align: center !important;
+  border: 1px solid var(--nojs-fg) !important;
+  border-radius: 4px !important;
+  width: 100% !important;
+}
+@media (prefers-color-scheme: dark) {
+  [data-input-otp] {
+    --nojs-bg: black !important;
+    --nojs-fg: white !important;
+  }
+}`;
+const PWM_BADGE_MARGIN_RIGHT = 18;
+const PWM_BADGE_SPACE_WIDTH_PX = 40;
+const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
+const PASSWORD_MANAGERS_SELECTORS = [
+  "[data-lastpass-icon-root]",
+  "com-1password-button",
+  "[data-dashlanecreated]",
+  '[style$="2147483647 !important;"]'
+].join(",");
+const usePasswordManagerBadge = ({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused }) => {
+  const [hasPWMBadge, setHasPWMBadge] = reactExports.useState(false);
+  const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = reactExports.useState(false);
+  const [done, setDone] = reactExports.useState(false);
+  const willPushPWMBadge = pushPasswordManagerStrategy === "none" ? false : (pushPasswordManagerStrategy === "increase-width" || pushPasswordManagerStrategy === "experimental-no-flickering") && hasPWMBadge && hasPWMBadgeSpace;
+  const trackPWMBadge = () => {
+    const container = containerRef.current;
+    const input = inputRef.current;
+    if (!container || !input || done || pushPasswordManagerStrategy === "none") return;
+    const elementToCompare = container;
+    const rightCornerX = elementToCompare.getBoundingClientRect().left + elementToCompare.offsetWidth;
+    const centereredY = elementToCompare.getBoundingClientRect().top + elementToCompare.offsetHeight / 2;
+    const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
+    const y = centereredY;
+    if (document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS).length === 0) {
+      if (document.elementFromPoint(x, y) === container) return;
+    }
+    setHasPWMBadge(true);
+    setDone(true);
+  };
+  reactExports.useEffect(() => {
+    const container = containerRef.current;
+    if (!container || pushPasswordManagerStrategy === "none") return;
+    const checkHasSpace = () => {
+      setHasPWMBadgeSpace(window.innerWidth - container.getBoundingClientRect().right >= PWM_BADGE_SPACE_WIDTH_PX);
+    };
+    checkHasSpace();
+    const interval = setInterval(checkHasSpace, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [containerRef, pushPasswordManagerStrategy]);
+  reactExports.useEffect(() => {
+    const _isFocused = isFocused || document.activeElement === inputRef.current;
+    if (pushPasswordManagerStrategy === "none" || !_isFocused) return;
+    const t1 = setTimeout(trackPWMBadge, 0);
+    const t2 = setTimeout(trackPWMBadge, 2e3);
+    const t3 = setTimeout(trackPWMBadge, 5e3);
+    const t4 = setTimeout(() => {
+      setDone(true);
+    }, 6e3);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+      clearTimeout(t4);
+    };
+  }, [
+    inputRef,
+    isFocused,
+    pushPasswordManagerStrategy
+  ]);
+  return {
+    hasPWMBadge,
+    willPushPWMBadge,
+    PWM_BADGE_SPACE_WIDTH
+  };
+};
+const usePrevious$1 = (value) => {
+  const ref = reactExports.useRef(void 0);
+  reactExports.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+const OTPInputContext = reactExports.createContext({});
+const OTPInput = ({ value: uncheckedValue, onChange: uncheckedOnChange, maxLength, pattern, placeholder, inputMode = "numeric", onComplete, onActiveSlotChange, pushPasswordManagerStrategy = "increase-width", pasteTransformer, containerClassName, noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK, render, children, ...props }) => {
+  const [internalValue, setInternalValue] = reactExports.useState(typeof props.defaultValue === "string" ? props.defaultValue : "");
+  const value = uncheckedValue ?? internalValue;
+  const previousValue = usePrevious$1(value);
+  const onChange = (newValue) => {
+    uncheckedOnChange?.(newValue);
+    setInternalValue(newValue);
+  };
+  const regexp = pattern !== void 0 ? typeof pattern === "string" ? new RegExp(pattern) : pattern : null;
+  const inputRef = reactExports.useRef(null);
+  const containerRef = reactExports.useRef(null);
+  const initialLoadRef = reactExports.useRef({
+    value,
+    onChange,
+    isIOS: typeof window !== "undefined" && window?.CSS?.supports?.("-webkit-touch-callout", "none")
+  });
+  const inputMetadataRef = reactExports.useRef({ prev: [
+    inputRef.current?.selectionStart ?? null,
+    inputRef.current?.selectionEnd ?? null,
+    inputRef.current?.selectionDirection ?? "none"
+  ] });
+  reactExports.useEffect(() => {
+    const input = inputRef.current;
+    const container = containerRef.current;
+    if (!input || !container) return;
+    if (initialLoadRef.current.value !== input.value) initialLoadRef.current.onChange(input.value);
+    inputMetadataRef.current.prev = [
+      input.selectionStart,
+      input.selectionEnd,
+      input.selectionDirection ?? "none"
+    ];
+    const onDocumentSelectionChange = () => {
+      if (document.activeElement !== input) {
+        setMirrorSelectionStart(null);
+        setMirrorSelectionEnd(null);
+        setActualCaretPosition(null);
+        return;
+      }
+      const selectionStart = input.selectionStart;
+      const selectionEnd = input.selectionEnd;
+      const selectionDirection = input.selectionDirection;
+      const maxLength$1 = input.maxLength;
+      const value$1 = input.value;
+      const previousSelection = inputMetadataRef.current.prev;
+      let calculatedStart = -1;
+      let calculatedEnd = -1;
+      let calculatedDirection = selectionDirection ?? "none";
+      if (value$1.length !== 0 && selectionStart !== null && selectionEnd !== null) {
+        const isSingleCaret = selectionStart === selectionEnd;
+        const isInsertMode = selectionStart === value$1.length && value$1.length < maxLength$1;
+        if (isSingleCaret && !isInsertMode) {
+          const caretPosition = selectionStart;
+          if (caretPosition === 0) {
+            calculatedStart = 0;
+            calculatedEnd = 1;
+            calculatedDirection = "forward";
+          } else if (caretPosition === maxLength$1) {
+            calculatedStart = caretPosition - 1;
+            calculatedEnd = caretPosition;
+            calculatedDirection = "backward";
+          } else if (maxLength$1 > 1 && value$1.length > 1) {
+            let offset2 = 0;
+            if (previousSelection[0] !== null && previousSelection[1] !== null) {
+              calculatedDirection = caretPosition < previousSelection[1] ? "backward" : "forward";
+              const wasPreviouslyInserting = previousSelection[0] === previousSelection[1] && previousSelection[0] < maxLength$1;
+              if (calculatedDirection === "backward" && !wasPreviouslyInserting) offset2 = -1;
+            }
+            calculatedStart = offset2 + caretPosition;
+            calculatedEnd = offset2 + caretPosition + 1;
+          }
+        }
+        if (calculatedStart !== -1 && calculatedEnd !== -1 && calculatedStart !== calculatedEnd) inputRef.current?.setSelectionRange(calculatedStart, calculatedEnd, calculatedDirection);
+      }
+      const finalSelectionStart = calculatedStart !== -1 ? calculatedStart : selectionStart;
+      const finalSelectionEnd = calculatedEnd !== -1 ? calculatedEnd : selectionEnd;
+      const finalDirection = calculatedDirection;
+      if (selectionStart !== null && selectionEnd !== null) if (selectionStart === selectionEnd) setActualCaretPosition(selectionStart);
+      else setActualCaretPosition(finalSelectionStart);
+      else setActualCaretPosition(null);
+      setMirrorSelectionStart(finalSelectionStart);
+      setMirrorSelectionEnd(finalSelectionEnd);
+      inputMetadataRef.current.prev = [
+        finalSelectionStart,
+        finalSelectionEnd,
+        finalDirection
+      ];
+    };
+    document.addEventListener("selectionchange", onDocumentSelectionChange, { capture: true });
+    onDocumentSelectionChange();
+    if (document.activeElement === input) setIsFocused(true);
+    if (!document.getElementById("input-otp-style")) {
+      const styleEl = document.createElement("style");
+      styleEl.id = "input-otp-style";
+      document.head.appendChild(styleEl);
+      if (styleEl.sheet) {
+        const autofillStyles = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+        safeInsertRule(styleEl.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }");
+        safeInsertRule(styleEl.sheet, `[data-input-otp]:autofill { ${autofillStyles} }`);
+        safeInsertRule(styleEl.sheet, `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`);
+        safeInsertRule(styleEl.sheet, `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`);
+        safeInsertRule(styleEl.sheet, `[data-input-otp] + * { pointer-events: all !important; }`);
+      }
+    }
+    const updateRootHeight = () => {
+      if (container) container.style.setProperty("--root-height", `${input.clientHeight}px`);
+    };
+    updateRootHeight();
+    const resizeObserver = new ResizeObserver(updateRootHeight);
+    resizeObserver.observe(input);
+    return () => {
+      document.removeEventListener("selectionchange", onDocumentSelectionChange, { capture: true });
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const [isHoveringInput, setIsHoveringInput] = reactExports.useState(false);
+  const [isFocused, setIsFocused] = reactExports.useState(false);
+  const [mirrorSelectionStart, setMirrorSelectionStart] = reactExports.useState(null);
+  const [mirrorSelectionEnd, setMirrorSelectionEnd] = reactExports.useState(null);
+  const [actualCaretPosition, setActualCaretPosition] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    syncTimeouts(() => {
+      inputRef.current?.dispatchEvent(new Event("input"));
+      const s2 = inputRef.current?.selectionStart ?? null;
+      const e = inputRef.current?.selectionEnd ?? null;
+      const dir = inputRef.current?.selectionDirection ?? "none";
+      if (s2 !== null && e !== null) {
+        setMirrorSelectionStart(s2);
+        setMirrorSelectionEnd(e);
+        setActualCaretPosition(s2);
+        inputMetadataRef.current.prev = [
+          s2,
+          e,
+          dir
+        ];
+      }
+    });
+  }, [value, isFocused]);
+  reactExports.useEffect(() => {
+    if (previousValue === void 0) return;
+    if (value !== previousValue && previousValue.length < maxLength && value.length === maxLength) onComplete?.(value);
+  }, [
+    maxLength,
+    onComplete,
+    previousValue,
+    value
+  ]);
+  const previousActiveSlot = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    const activeSlotIndex = isFocused && actualCaretPosition !== null ? actualCaretPosition : null;
+    if (activeSlotIndex !== previousActiveSlot.current) {
+      previousActiveSlot.current = activeSlotIndex;
+      onActiveSlotChange?.(activeSlotIndex);
+    }
+  }, [
+    isFocused,
+    actualCaretPosition,
+    onActiveSlotChange
+  ]);
+  const pwmb = usePasswordManagerBadge({
+    containerRef,
+    inputRef,
+    pushPasswordManagerStrategy,
+    isFocused
+  });
+  const _changeListener = (e) => {
+    const newValue = e.currentTarget.value.slice(0, maxLength);
+    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
+      e.preventDefault();
+      return;
+    }
+    if (typeof previousValue === "string" && newValue.length < previousValue.length) document.dispatchEvent(new Event("selectionchange"));
+    onChange(newValue);
+  };
+  const _focusListener = () => {
+    if (inputRef.current) {
+      const start = Math.min(inputRef.current.value.length, maxLength - 1);
+      const end = inputRef.current.value.length;
+      inputRef.current?.setSelectionRange(start, end);
+      setMirrorSelectionStart(start);
+      setMirrorSelectionEnd(end);
+    }
+    setIsFocused(true);
+  };
+  const _pasteListener = (e) => {
+    const input = inputRef.current;
+    if (!pasteTransformer && (!initialLoadRef.current.isIOS || !e.clipboardData || !input)) return;
+    const _content = e.clipboardData.getData("text/plain");
+    const content2 = pasteTransformer ? pasteTransformer(_content) : _content;
+    e.preventDefault();
+    const start = inputRef.current?.selectionStart;
+    const end = inputRef.current?.selectionEnd;
+    const newValue = (start !== end ? value.slice(0, start ?? 0) + content2 + value.slice(end ?? 0) : value.slice(0, start ?? 0) + content2 + value.slice(start ?? 0)).slice(0, maxLength);
+    if (newValue.length > 0 && regexp && !regexp.test(newValue)) return;
+    if (input) {
+      input.value = newValue;
+      onChange(newValue);
+      const _start = Math.min(newValue.length, maxLength - 1);
+      const _end = newValue.length;
+      input.setSelectionRange(_start, _end);
+      setMirrorSelectionStart(_start);
+      setMirrorSelectionEnd(_end);
+    }
+  };
+  const dynamicInputStyle = {
+    width: pwmb.willPushPWMBadge ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})` : "100%",
+    clipPath: pwmb.willPushPWMBadge ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0,
+    fontSize: "var(--root-height)"
+  };
+  const renderedInput = /* @__PURE__ */ jsxRuntimeExports.jsx("input", {
+    autoComplete: props.autoComplete || "one-time-code",
+    ...props,
+    "data-input-otp": true,
+    "data-input-otp-placeholder-shown": value.length === 0 || void 0,
+    "data-input-otp-mss": mirrorSelectionStart,
+    "data-input-otp-mse": mirrorSelectionEnd,
+    inputMode,
+    pattern: regexp?.source,
+    "aria-placeholder": placeholder,
+    className: "-z-10 pointer-events-auto absolute inset-0 flex h-full border-0 border-transparent bg-transparent text-center font-mono text-transparent tabular-nums leading-none tracking-[-.5em] caret-transparent opacity-100 shadow-none outline-none",
+    style: dynamicInputStyle,
+    maxLength,
+    value,
+    ref: inputRef,
+    onPaste: (e) => {
+      _pasteListener(e);
+      props.onPaste?.(e);
+    },
+    onChange: _changeListener,
+    onMouseOver: (e) => {
+      setIsHoveringInput(true);
+      props.onMouseOver?.(e);
+    },
+    onMouseLeave: (e) => {
+      setIsHoveringInput(false);
+      props.onMouseLeave?.(e);
+    },
+    onKeyDown: (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") requestAnimationFrame(() => {
+        const input = inputRef.current;
+        if (input && document.activeElement === input) {
+          const s2 = input.selectionStart;
+          const end = input.selectionEnd;
+          if (s2 !== null && end !== null) setActualCaretPosition(s2);
+        }
+      });
+      props.onKeyDown?.(e);
+    },
+    onFocus: (e) => {
+      _focusListener();
+      props.onFocus?.(e);
+    },
+    onBlur: (e) => {
+      setIsFocused(false);
+      props.onBlur?.(e);
+    }
+  });
+  const setSelection = (index2) => {
+    const input = inputRef.current;
+    if (!input || props.disabled) return;
+    const clampedIndex = Math.max(0, Math.min(index2, maxLength - 1));
+    if (document.activeElement !== input) input.focus();
+    const hasChar = value[clampedIndex] !== void 0;
+    const start = clampedIndex;
+    const end = hasChar ? clampedIndex + 1 : clampedIndex;
+    input.setSelectionRange(start, end);
+    setMirrorSelectionStart(start);
+    setMirrorSelectionEnd(end);
+    setIsFocused(true);
+  };
+  const contextValue = {
+    slots: Array.from({ length: maxLength }).map((_2, slotIdx) => {
+      const isActive = isFocused && mirrorSelectionStart !== null && mirrorSelectionEnd !== null && (mirrorSelectionStart === mirrorSelectionEnd && slotIdx === mirrorSelectionStart || slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd);
+      const char = value[slotIdx] !== void 0 ? value[slotIdx] : null;
+      return {
+        char,
+        placeholderChar: value[0] !== void 0 ? null : placeholder?.[slotIdx] ?? null,
+        isActive,
+        hasFakeCaret: isActive && char === null
+      };
+    }),
+    isFocused,
+    isHovering: !props.disabled && isHoveringInput,
+    setSelection
+  };
+  const renderedChildren = render !== void 0 ? render(contextValue) : /* @__PURE__ */ jsxRuntimeExports.jsx(OTPInputContext.Provider, {
+    value: contextValue,
+    children
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [noScriptCSSFallback !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: noScriptCSSFallback }) }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+    ref: containerRef,
+    className: cn$2("relative", props.disabled ? "cursor-default" : "cursor-text", containerClassName),
+    children: [renderedChildren, /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      className: "absolute inset-0",
+      children: renderedInput
+    })]
+  })] });
+};
+const InputOTP = ({ className, render, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(OTPInput, {
+  containerClassName: "relative flex items-center gap-2 has-disabled:opacity-50",
+  className: cn$2("disabled:cursor-not-allowed", className),
+  render,
+  ...props
+});
+const InputOTPGroup = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+  className: cn$2("z-10 flex items-center gap-3", className),
+  ...props
+});
+const InputOTPSlot = ({ index: index2, className, onClick, onKeyDown, ...props }) => {
+  const inputOTPContext = reactExports.useContext(OTPInputContext);
+  const { char, isActive } = inputOTPContext?.slots[index2] ?? {};
+  const { setSelection } = inputOTPContext ?? {};
+  const handleClick = (e) => {
+    setSelection?.(index2);
+    onClick?.(e);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setSelection?.(index2);
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
+    "aria-active": isActive,
+    variant: "input",
+    color: "custom",
+    tabIndex: -1,
+    className: cn$2("relative z-10 px-2!", isActive && "ring-4!", className),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    label: null,
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+      className: "relative z-10 flex h-6 w-4 items-center justify-center",
+      children: char
+    })
+  });
+};
+const InputOTPSeparator = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+  "aria-hidden": true,
+  className: "z-0 table h-0.5 w-3 rounded-full bg-border text-neutral",
+  ...props,
+  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, {})
+});
+const InputIndicator = ({ ref, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+  "data-indicator": true,
+  className: "absolute top-0 z-0 h-8 h-full w-auto rounded-xl bg-neutral-100 ring-4 ring-neutral-100 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none dark:bg-neutral-700 dark:ring-neutral-700",
+  ref,
+  ...props
+});
 const SearchInput = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
   className: "relative flex items-center gap-1",
   children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-2 size-4" }), /* @__PURE__ */ jsxRuntimeExports.jsx(Input, {
     ...props,
     type: "search",
-    className: cn$1("pl-8", className)
+    className: cn$2("pl-8", className)
   })]
 });
 const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children, isDisabled, ...props }) => {
@@ -32046,7 +32525,7 @@ const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children,
     ref: editableFieldRef,
     ...props,
     children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: cn$1("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
+      className: cn$2("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
       children: [
         children,
         /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
@@ -32079,7 +32558,7 @@ const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children,
         })
       ]
     }, String(isEditing)), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: cn$1("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
+      className: cn$2("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
         className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6",
         children: result
@@ -33949,12 +34428,12 @@ const useFormField = () => {
   };
 };
 const InformationTag = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("i", {
-  className: cn$1("text-neutral-400 text-xs", className),
+  className: cn$2("text-neutral-400 text-xs", className),
   ...props,
   children: ["ⓘ ", children]
 });
 const Label$1 = ({ htmlFor, required: required2 = false, disabled = false, className, children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("label", {
-  className: cn$1("select-none font-medium text-sm leading-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", disabled && "cursor-not-allowed text-muted-foreground opacity-70", className),
+  className: cn$2("select-none font-medium text-sm leading-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", disabled && "cursor-not-allowed text-muted-foreground opacity-70", className),
   htmlFor,
   ...props,
   children: [children, required2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
@@ -33965,7 +34444,7 @@ const Label$1 = ({ htmlFor, required: required2 = false, disabled = false, class
   })]
 });
 const TextArea = ({ className, variant, validationStyleEnabled = false, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("textarea", {
-  className: cn$1("resize-none", inputVariants({
+  className: cn$2("resize-none", inputVariants({
     variant,
     validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
     className
@@ -34005,7 +34484,7 @@ const AutoSizedTextArea = ({ className, autoSize = true, onChange, maxRows = 999
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TextArea, {
     ref: setRef2,
     onChange: handleChange,
-    className: cn$1("overflow-y-auto", autoSize ? "resize-none" : "", className),
+    className: cn$2("overflow-y-auto", autoSize ? "resize-none" : "", className),
     ...props
   });
 };
@@ -38551,89 +39030,743 @@ function createAuthClient(options) {
   );
   return proxy;
 }
+function bufferToBase64URLString(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let str = "";
+  for (const charCode of bytes) {
+    str += String.fromCharCode(charCode);
+  }
+  const base64String = btoa(str);
+  return base64String.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+function base64URLStringToBuffer(base64URLString) {
+  const base642 = base64URLString.replace(/-/g, "+").replace(/_/g, "/");
+  const padLength = (4 - base642.length % 4) % 4;
+  const padded = base642.padEnd(base642.length + padLength, "=");
+  const binary = atob(padded);
+  const buffer = new ArrayBuffer(binary.length);
+  const bytes = new Uint8Array(buffer);
+  for (let i2 = 0; i2 < binary.length; i2++) {
+    bytes[i2] = binary.charCodeAt(i2);
+  }
+  return buffer;
+}
+function browserSupportsWebAuthn() {
+  return _browserSupportsWebAuthnInternals.stubThis(globalThis?.PublicKeyCredential !== void 0 && typeof globalThis.PublicKeyCredential === "function");
+}
+const _browserSupportsWebAuthnInternals = {
+  stubThis: (value) => value
+};
+function toPublicKeyCredentialDescriptor(descriptor) {
+  const { id: id2 } = descriptor;
+  return {
+    ...descriptor,
+    id: base64URLStringToBuffer(id2),
+    /**
+     * `descriptor.transports` is an array of our `AuthenticatorTransportFuture` that includes newer
+     * transports that TypeScript's DOM lib is ignorant of. Convince TS that our list of transports
+     * are fine to pass to WebAuthn since browsers will recognize the new value.
+     */
+    transports: descriptor.transports
+  };
+}
+function isValidDomain(hostname2) {
+  return (
+    // Consider localhost valid as well since it's okay wrt Secure Contexts
+    hostname2 === "localhost" || /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/i.test(hostname2)
+  );
+}
+class WebAuthnError extends Error {
+  constructor({ message, code, cause, name }) {
+    super(message, { cause });
+    Object.defineProperty(this, "code", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    this.name = name ?? cause.name;
+    this.code = code;
+  }
+}
+function identifyRegistrationError({ error, options }) {
+  const { publicKey } = options;
+  if (!publicKey) {
+    throw Error("options was missing required publicKey property");
+  }
+  if (error.name === "AbortError") {
+    if (options.signal instanceof AbortSignal) {
+      return new WebAuthnError({
+        message: "Registration ceremony was sent an abort signal",
+        code: "ERROR_CEREMONY_ABORTED",
+        cause: error
+      });
+    }
+  } else if (error.name === "ConstraintError") {
+    if (publicKey.authenticatorSelection?.requireResidentKey === true) {
+      return new WebAuthnError({
+        message: "Discoverable credentials were required but no available authenticator supported it",
+        code: "ERROR_AUTHENTICATOR_MISSING_DISCOVERABLE_CREDENTIAL_SUPPORT",
+        cause: error
+      });
+    } else if (
+      // @ts-ignore: `mediation` doesn't yet exist on CredentialCreationOptions but it's possible as of Sept 2024
+      options.mediation === "conditional" && publicKey.authenticatorSelection?.userVerification === "required"
+    ) {
+      return new WebAuthnError({
+        message: "User verification was required during automatic registration but it could not be performed",
+        code: "ERROR_AUTO_REGISTER_USER_VERIFICATION_FAILURE",
+        cause: error
+      });
+    } else if (publicKey.authenticatorSelection?.userVerification === "required") {
+      return new WebAuthnError({
+        message: "User verification was required but no available authenticator supported it",
+        code: "ERROR_AUTHENTICATOR_MISSING_USER_VERIFICATION_SUPPORT",
+        cause: error
+      });
+    }
+  } else if (error.name === "InvalidStateError") {
+    return new WebAuthnError({
+      message: "The authenticator was previously registered",
+      code: "ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED",
+      cause: error
+    });
+  } else if (error.name === "NotAllowedError") {
+    return new WebAuthnError({
+      message: error.message,
+      code: "ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY",
+      cause: error
+    });
+  } else if (error.name === "NotSupportedError") {
+    const validPubKeyCredParams = publicKey.pubKeyCredParams.filter((param) => param.type === "public-key");
+    if (validPubKeyCredParams.length === 0) {
+      return new WebAuthnError({
+        message: 'No entry in pubKeyCredParams was of type "public-key"',
+        code: "ERROR_MALFORMED_PUBKEYCREDPARAMS",
+        cause: error
+      });
+    }
+    return new WebAuthnError({
+      message: "No available authenticator supported any of the specified pubKeyCredParams algorithms",
+      code: "ERROR_AUTHENTICATOR_NO_SUPPORTED_PUBKEYCREDPARAMS_ALG",
+      cause: error
+    });
+  } else if (error.name === "SecurityError") {
+    const effectiveDomain = globalThis.location.hostname;
+    if (!isValidDomain(effectiveDomain)) {
+      return new WebAuthnError({
+        message: `${globalThis.location.hostname} is an invalid domain`,
+        code: "ERROR_INVALID_DOMAIN",
+        cause: error
+      });
+    } else if (publicKey.rp.id !== effectiveDomain) {
+      return new WebAuthnError({
+        message: `The RP ID "${publicKey.rp.id}" is invalid for this domain`,
+        code: "ERROR_INVALID_RP_ID",
+        cause: error
+      });
+    }
+  } else if (error.name === "TypeError") {
+    if (publicKey.user.id.byteLength < 1 || publicKey.user.id.byteLength > 64) {
+      return new WebAuthnError({
+        message: "User ID was not between 1 and 64 characters",
+        code: "ERROR_INVALID_USER_ID_LENGTH",
+        cause: error
+      });
+    }
+  } else if (error.name === "UnknownError") {
+    return new WebAuthnError({
+      message: "The authenticator was unable to process the specified options, or could not create a new credential",
+      code: "ERROR_AUTHENTICATOR_GENERAL_ERROR",
+      cause: error
+    });
+  }
+  return error;
+}
+class BaseWebAuthnAbortService {
+  constructor() {
+    Object.defineProperty(this, "controller", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+  }
+  createNewAbortSignal() {
+    if (this.controller) {
+      const abortError = new Error("Cancelling existing WebAuthn API call for new one");
+      abortError.name = "AbortError";
+      this.controller.abort(abortError);
+    }
+    const newController = new AbortController();
+    this.controller = newController;
+    return newController.signal;
+  }
+  cancelCeremony() {
+    if (this.controller) {
+      const abortError = new Error("Manually cancelling existing WebAuthn API call");
+      abortError.name = "AbortError";
+      this.controller.abort(abortError);
+      this.controller = void 0;
+    }
+  }
+}
+const WebAuthnAbortService = new BaseWebAuthnAbortService();
+const attachments = ["cross-platform", "platform"];
+function toAuthenticatorAttachment(attachment) {
+  if (!attachment) {
+    return;
+  }
+  if (attachments.indexOf(attachment) < 0) {
+    return;
+  }
+  return attachment;
+}
+async function startRegistration(options) {
+  if (!options.optionsJSON && options.challenge) {
+    console.warn("startRegistration() was not called correctly. It will try to continue with the provided options, but this call should be refactored to use the expected call structure instead. See https://simplewebauthn.dev/docs/packages/browser#typeerror-cannot-read-properties-of-undefined-reading-challenge for more information.");
+    options = { optionsJSON: options };
+  }
+  const { optionsJSON, useAutoRegister = false } = options;
+  if (!browserSupportsWebAuthn()) {
+    throw new Error("WebAuthn is not supported in this browser");
+  }
+  const publicKey = {
+    ...optionsJSON,
+    challenge: base64URLStringToBuffer(optionsJSON.challenge),
+    user: {
+      ...optionsJSON.user,
+      id: base64URLStringToBuffer(optionsJSON.user.id)
+    },
+    excludeCredentials: optionsJSON.excludeCredentials?.map(toPublicKeyCredentialDescriptor)
+  };
+  const createOptions = {};
+  if (useAutoRegister) {
+    createOptions.mediation = "conditional";
+  }
+  createOptions.publicKey = publicKey;
+  createOptions.signal = WebAuthnAbortService.createNewAbortSignal();
+  let credential;
+  try {
+    credential = await navigator.credentials.create(createOptions);
+  } catch (err) {
+    throw identifyRegistrationError({ error: err, options: createOptions });
+  }
+  if (!credential) {
+    throw new Error("Registration was not completed");
+  }
+  const { id: id2, rawId, response, type } = credential;
+  let transports = void 0;
+  if (typeof response.getTransports === "function") {
+    transports = response.getTransports();
+  }
+  let responsePublicKeyAlgorithm = void 0;
+  if (typeof response.getPublicKeyAlgorithm === "function") {
+    try {
+      responsePublicKeyAlgorithm = response.getPublicKeyAlgorithm();
+    } catch (error) {
+      warnOnBrokenImplementation("getPublicKeyAlgorithm()", error);
+    }
+  }
+  let responsePublicKey = void 0;
+  if (typeof response.getPublicKey === "function") {
+    try {
+      const _publicKey = response.getPublicKey();
+      if (_publicKey !== null) {
+        responsePublicKey = bufferToBase64URLString(_publicKey);
+      }
+    } catch (error) {
+      warnOnBrokenImplementation("getPublicKey()", error);
+    }
+  }
+  let responseAuthenticatorData;
+  if (typeof response.getAuthenticatorData === "function") {
+    try {
+      responseAuthenticatorData = bufferToBase64URLString(response.getAuthenticatorData());
+    } catch (error) {
+      warnOnBrokenImplementation("getAuthenticatorData()", error);
+    }
+  }
+  return {
+    id: id2,
+    rawId: bufferToBase64URLString(rawId),
+    response: {
+      attestationObject: bufferToBase64URLString(response.attestationObject),
+      clientDataJSON: bufferToBase64URLString(response.clientDataJSON),
+      transports,
+      publicKeyAlgorithm: responsePublicKeyAlgorithm,
+      publicKey: responsePublicKey,
+      authenticatorData: responseAuthenticatorData
+    },
+    type,
+    clientExtensionResults: credential.getClientExtensionResults(),
+    authenticatorAttachment: toAuthenticatorAttachment(credential.authenticatorAttachment)
+  };
+}
+function warnOnBrokenImplementation(methodName, cause) {
+  console.warn(`The browser extension that intercepted this WebAuthn API call incorrectly implemented ${methodName}. You should report this error to them.
+`, cause);
+}
+function browserSupportsWebAuthnAutofill() {
+  if (!browserSupportsWebAuthn()) {
+    return _browserSupportsWebAuthnAutofillInternals.stubThis(new Promise((resolve) => resolve(false)));
+  }
+  const globalPublicKeyCredential = globalThis.PublicKeyCredential;
+  if (globalPublicKeyCredential?.isConditionalMediationAvailable === void 0) {
+    return _browserSupportsWebAuthnAutofillInternals.stubThis(new Promise((resolve) => resolve(false)));
+  }
+  return _browserSupportsWebAuthnAutofillInternals.stubThis(globalPublicKeyCredential.isConditionalMediationAvailable());
+}
+const _browserSupportsWebAuthnAutofillInternals = {
+  stubThis: (value) => value
+};
+function identifyAuthenticationError({ error, options }) {
+  const { publicKey } = options;
+  if (!publicKey) {
+    throw Error("options was missing required publicKey property");
+  }
+  if (error.name === "AbortError") {
+    if (options.signal instanceof AbortSignal) {
+      return new WebAuthnError({
+        message: "Authentication ceremony was sent an abort signal",
+        code: "ERROR_CEREMONY_ABORTED",
+        cause: error
+      });
+    }
+  } else if (error.name === "NotAllowedError") {
+    return new WebAuthnError({
+      message: error.message,
+      code: "ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY",
+      cause: error
+    });
+  } else if (error.name === "SecurityError") {
+    const effectiveDomain = globalThis.location.hostname;
+    if (!isValidDomain(effectiveDomain)) {
+      return new WebAuthnError({
+        message: `${globalThis.location.hostname} is an invalid domain`,
+        code: "ERROR_INVALID_DOMAIN",
+        cause: error
+      });
+    } else if (publicKey.rpId !== effectiveDomain) {
+      return new WebAuthnError({
+        message: `The RP ID "${publicKey.rpId}" is invalid for this domain`,
+        code: "ERROR_INVALID_RP_ID",
+        cause: error
+      });
+    }
+  } else if (error.name === "UnknownError") {
+    return new WebAuthnError({
+      message: "The authenticator was unable to process the specified options, or could not create a new assertion signature",
+      code: "ERROR_AUTHENTICATOR_GENERAL_ERROR",
+      cause: error
+    });
+  }
+  return error;
+}
+async function startAuthentication(options) {
+  if (!options.optionsJSON && options.challenge) {
+    console.warn("startAuthentication() was not called correctly. It will try to continue with the provided options, but this call should be refactored to use the expected call structure instead. See https://simplewebauthn.dev/docs/packages/browser#typeerror-cannot-read-properties-of-undefined-reading-challenge for more information.");
+    options = { optionsJSON: options };
+  }
+  const { optionsJSON, useBrowserAutofill = false, verifyBrowserAutofillInput = true } = options;
+  if (!browserSupportsWebAuthn()) {
+    throw new Error("WebAuthn is not supported in this browser");
+  }
+  let allowCredentials;
+  if (optionsJSON.allowCredentials?.length !== 0) {
+    allowCredentials = optionsJSON.allowCredentials?.map(toPublicKeyCredentialDescriptor);
+  }
+  const publicKey = {
+    ...optionsJSON,
+    challenge: base64URLStringToBuffer(optionsJSON.challenge),
+    allowCredentials
+  };
+  const getOptions = {};
+  if (useBrowserAutofill) {
+    if (!await browserSupportsWebAuthnAutofill()) {
+      throw Error("Browser does not support WebAuthn autofill");
+    }
+    const eligibleInputs = document.querySelectorAll("input[autocomplete$='webauthn']");
+    if (eligibleInputs.length < 1 && verifyBrowserAutofillInput) {
+      throw Error('No <input> with "webauthn" as the only or last value in its `autocomplete` attribute was detected');
+    }
+    getOptions.mediation = "conditional";
+    publicKey.allowCredentials = [];
+  }
+  getOptions.publicKey = publicKey;
+  getOptions.signal = WebAuthnAbortService.createNewAbortSignal();
+  let credential;
+  try {
+    credential = await navigator.credentials.get(getOptions);
+  } catch (err) {
+    throw identifyAuthenticationError({ error: err, options: getOptions });
+  }
+  if (!credential) {
+    throw new Error("Authentication was not completed");
+  }
+  const { id: id2, rawId, response, type } = credential;
+  let userHandle = void 0;
+  if (response.userHandle) {
+    userHandle = bufferToBase64URLString(response.userHandle);
+  }
+  return {
+    id: id2,
+    rawId: bufferToBase64URLString(rawId),
+    response: {
+      authenticatorData: bufferToBase64URLString(response.authenticatorData),
+      clientDataJSON: bufferToBase64URLString(response.clientDataJSON),
+      signature: bufferToBase64URLString(response.signature),
+      userHandle
+    },
+    type,
+    clientExtensionResults: credential.getClientExtensionResults(),
+    authenticatorAttachment: toAuthenticatorAttachment(credential.authenticatorAttachment)
+  };
+}
+const twoFactorClient = (options) => {
+  return {
+    id: "two-factor",
+    $InferServerPlugin: {},
+    atomListeners: [
+      {
+        matcher: (path) => path.startsWith("/two-factor/"),
+        signal: "$sessionSignal"
+      }
+    ],
+    pathMethods: {
+      "/two-factor/disable": "POST",
+      "/two-factor/enable": "POST",
+      "/two-factor/send-otp": "POST",
+      "/two-factor/generate-backup-codes": "POST"
+    },
+    fetchPlugins: [
+      {
+        id: "two-factor",
+        name: "two-factor",
+        hooks: {
+          async onSuccess(context) {
+            if (context.data?.twoFactorRedirect) {
+              if (options?.onTwoFactorRedirect) {
+                await options.onTwoFactorRedirect();
+              }
+            }
+          }
+        }
+      }
+    ]
+  };
+};
+const getPasskeyActions = ($fetch, {
+  $listPasskeys,
+  $store
+}) => {
+  const signInPasskey = async (opts, options) => {
+    const response = await $fetch(
+      "/passkey/generate-authenticate-options",
+      {
+        method: "POST",
+        throw: false
+      }
+    );
+    if (!response.data) {
+      return response;
+    }
+    try {
+      const res = await startAuthentication({
+        optionsJSON: response.data,
+        useBrowserAutofill: opts?.autoFill
+      });
+      const verified = await $fetch("/passkey/verify-authentication", {
+        body: {
+          response: res
+        },
+        ...opts?.fetchOptions,
+        ...options,
+        method: "POST",
+        throw: false
+      });
+      $listPasskeys.set(Math.random());
+      $store.notify("$sessionSignal");
+      return verified;
+    } catch (e) {
+      return {
+        data: null,
+        error: {
+          code: "AUTH_CANCELLED",
+          message: "auth cancelled",
+          status: 400,
+          statusText: "BAD_REQUEST"
+        }
+      };
+    }
+  };
+  const registerPasskey = async (opts, fetchOpts) => {
+    const options = await $fetch(
+      "/passkey/generate-register-options",
+      {
+        method: "GET",
+        query: {
+          ...opts?.authenticatorAttachment && {
+            authenticatorAttachment: opts.authenticatorAttachment
+          },
+          ...opts?.name && {
+            name: opts.name
+          }
+        },
+        throw: false
+      }
+    );
+    if (!options.data) {
+      return options;
+    }
+    try {
+      const res = await startRegistration({
+        optionsJSON: options.data,
+        useAutoRegister: opts?.useAutoRegister
+      });
+      const verified = await $fetch("/passkey/verify-registration", {
+        ...opts?.fetchOptions,
+        ...fetchOpts,
+        body: {
+          response: res,
+          name: opts?.name
+        },
+        method: "POST",
+        throw: false
+      });
+      if (!verified.data) {
+        return verified;
+      }
+      $listPasskeys.set(Math.random());
+    } catch (e) {
+      if (e instanceof WebAuthnError) {
+        if (e.code === "ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED") {
+          return {
+            data: null,
+            error: {
+              code: e.code,
+              message: "previously registered",
+              status: 400,
+              statusText: "BAD_REQUEST"
+            }
+          };
+        }
+        if (e.code === "ERROR_CEREMONY_ABORTED") {
+          return {
+            data: null,
+            error: {
+              code: e.code,
+              message: "registration cancelled",
+              status: 400,
+              statusText: "BAD_REQUEST"
+            }
+          };
+        }
+        return {
+          data: null,
+          error: {
+            code: e.code,
+            message: e.message,
+            status: 400,
+            statusText: "BAD_REQUEST"
+          }
+        };
+      }
+      return {
+        data: null,
+        error: {
+          code: "UNKNOWN_ERROR",
+          message: e instanceof Error ? e.message : "unknown error",
+          status: 500,
+          statusText: "INTERNAL_SERVER_ERROR"
+        }
+      };
+    }
+  };
+  return {
+    signIn: {
+      /**
+       * Sign in with a registered passkey
+       */
+      passkey: signInPasskey
+    },
+    passkey: {
+      /**
+       * Add a passkey to the user account
+       */
+      addPasskey: registerPasskey
+    },
+    /**
+     * Inferred Internal Types
+     */
+    $Infer: {}
+  };
+};
+const passkeyClient = () => {
+  const $listPasskeys = atom();
+  return {
+    id: "passkey",
+    $InferServerPlugin: {},
+    getActions: ($fetch, $store) => getPasskeyActions($fetch, {
+      $listPasskeys,
+      $store
+    }),
+    getAtoms($fetch) {
+      const listPasskeys = useAuthQuery(
+        $listPasskeys,
+        "/passkey/list-user-passkeys",
+        $fetch,
+        {
+          method: "GET"
+        }
+      );
+      return {
+        listPasskeys,
+        $listPasskeys
+      };
+    },
+    pathMethods: {
+      "/passkey/register": "POST",
+      "/passkey/authenticate": "POST"
+    },
+    atomListeners: [
+      {
+        matcher(path) {
+          return path === "/passkey/verify-registration" || path === "/passkey/delete-passkey" || path === "/passkey/update-passkey" || path === "/sign-out";
+        },
+        signal: "$listPasskeys"
+      },
+      {
+        matcher: (path) => path === "/passkey/verify-authentication",
+        signal: "$sessionSignal"
+      }
+    ]
+  };
+};
+const magicLinkClient = () => {
+  return {
+    id: "magic-link",
+    $InferServerPlugin: {}
+  };
+};
+const getAuthClient = (backendURL) => createAuthClient({
+  baseURL: backendURL,
+  withCredentials: true,
+  plugins: [
+    twoFactorClient({ onTwoFactorRedirect: () => {
+      const redirectUrl = new URLSearchParams(window.location.search).get("redirect_url");
+      const twoFaUrl = redirectUrl ? `/auth/2fa?redirect_url=${encodeURIComponent(redirectUrl)}` : "/auth/2fa";
+      window.location.href = twoFaUrl;
+    } }),
+    passkeyClient(),
+    magicLinkClient()
+  ]
+});
 const getAuthAPI = (intlayerConfig) => {
   const backendURL = intlayerConfig?.editor?.backendURL ?? configuration?.editor?.backendURL;
   if (!backendURL) throw new Error("Backend URL is not defined in the Intlayer configuration.");
-  const getAuthClient = () => {
-    return createAuthClient({
-      baseURL: backendURL,
-      withCredentials: true
-    });
-  };
+  const client2 = getAuthClient(backendURL);
   const signInEmail = async (...args) => {
-    return getAuthClient().signIn.email(...args);
+    return client2.signIn.email(...args);
   };
   const signInSocial = async (...args) => {
-    return getAuthClient().signIn.social(...args);
+    return client2.signIn.social(...args);
   };
   const signUpEmail = async (...args) => {
-    return getAuthClient().signUp.email(...args);
+    return client2.signUp.email(...args);
   };
   const signOut = async (...args) => {
-    return getAuthClient().signOut(...args);
+    return client2.signOut(...args);
   };
   const changePasswordSession = async (...args) => {
-    return getAuthClient().changePassword(...args);
+    return client2.changePassword(...args);
   };
   const requestPasswordResetSession = async (...args) => {
-    return getAuthClient().requestPasswordReset(...args);
+    return client2.requestPasswordReset(...args);
   };
   const resetPassword = async (...args) => {
-    return getAuthClient().resetPassword(...args);
+    return client2.resetPassword(...args);
   };
   const verifyEmailSession = async (...args) => {
-    return getAuthClient().verifyEmail(...args);
+    return client2.verifyEmail(...args);
   };
   const getSession = async (...args) => {
-    return getAuthClient().getSession(...args);
+    return client2.getSession(...args);
   };
   const forgetPassword = async (...args) => {
-    return getAuthClient().forgetPassword(...args);
+    return client2.forgetPassword(...args);
   };
   const sendVerificationEmail = async (...args) => {
-    return getAuthClient().sendVerificationEmail(...args);
+    return client2.sendVerificationEmail(...args);
   };
   const changeEmail = async (...args) => {
-    return getAuthClient().changeEmail(...args);
+    return client2.changeEmail(...args);
   };
   const deleteUser = async (...args) => {
-    return getAuthClient().deleteUser(...args);
+    return client2.deleteUser(...args);
   };
   const revokeSession = async (...args) => {
-    return getAuthClient().revokeSession(...args);
+    return client2.revokeSession(...args);
   };
   const revokeSessions = async (...args) => {
-    return getAuthClient().revokeSessions(...args);
+    return client2.revokeSessions(...args);
   };
   const revokeOtherSessions = async (...args) => {
-    return getAuthClient().revokeOtherSessions(...args);
+    return client2.revokeOtherSessions(...args);
   };
   const linkSocial = async (...args) => {
-    return getAuthClient().linkSocial(...args);
+    return client2.linkSocial(...args);
   };
   const listAccounts = async (...args) => {
-    return getAuthClient().listAccounts(...args);
+    return client2.listAccounts(...args);
   };
   const unlinkAccount = async (...args) => {
-    return getAuthClient().unlinkAccount(...args);
+    return client2.unlinkAccount(...args);
   };
   const refreshToken = async (...args) => {
-    return getAuthClient().refreshToken(...args);
+    return client2.refreshToken(...args);
   };
   const getAccessToken = async (...args) => {
-    return getAuthClient().getAccessToken(...args);
+    return client2.getAccessToken(...args);
   };
   const accountInfo = async (...args) => {
-    return getAuthClient().accountInfo(...args);
+    return client2.accountInfo(...args);
   };
   const updateUser = async (...args) => {
-    return getAuthClient().updateUser(...args);
+    return client2.updateUser(...args);
   };
   const listSessions = async (...args) => {
-    return getAuthClient().listSessions(...args);
+    return client2.listSessions(...args);
+  };
+  const enableTwoFactor = async (...args) => {
+    return client2.twoFactor.enable(...args);
+  };
+  const disableTwoFactor = async (...args) => {
+    return client2.twoFactor.disable(...args);
+  };
+  const verifyTotp = async (...args) => {
+    return client2.twoFactor.verifyTotp(...args);
+  };
+  const verifyBackupCode = async (...args) => {
+    return client2.twoFactor.verifyBackupCode(...args);
+  };
+  const addPasskey = async (...args) => {
+    return client2.passkey.addPasskey(...args);
+  };
+  const signInPasskey = async (...args) => {
+    return client2.signIn.passkey(...args);
+  };
+  const deletePasskey = async (...args) => {
+    return client2.passkey.deletePasskey(...args);
+  };
+  const listPasskeys = async () => {
+    return client2.$fetch("/passkey/list-user-passkeys", { method: "GET" });
+  };
+  const signInMagicLink = async (...args) => {
+    return client2.signIn.magicLink(...args);
   };
   return {
-    getAuthClient,
+    getAuthClient: () => client2,
     signInEmail,
     signUpEmail,
     signOut,
@@ -38657,10 +39790,19 @@ const getAuthAPI = (intlayerConfig) => {
     getAccessToken,
     accountInfo,
     updateUser,
-    listSessions
-  };
-};
-const useSession = (sessionProp, intlayerConfiguration) => {
+    listSessions,
+    enableTwoFactor,
+    disableTwoFactor,
+    verifyTotp,
+    verifyBackupCode,
+    addPasskey,
+    signInPasskey,
+    deletePasskey,
+    listPasskeys,
+    signInMagicLink
+  };
+};
+function useSession(sessionProp, intlayerConfiguration) {
   const configuration$1 = useConfiguration();
   const config2 = intlayerConfiguration ?? configuration$1 ?? configuration;
   const queryClient = useQueryClient();
@@ -38677,7 +39819,9 @@ const useSession = (sessionProp, intlayerConfiguration) => {
     enabled: !sessionProp
   });
   const session = data ?? (isFetched ? null : void 0);
-  const setSession = (nextSession) => queryClient.setQueryData(["session"], nextSession);
+  const setSession = (nextSession) => {
+    queryClient.setQueryData(["session"], nextSession);
+  };
   const fetchSession = async () => {
     return (await refetch()).data;
   };
@@ -38687,7 +39831,7 @@ const useSession = (sessionProp, intlayerConfiguration) => {
     revalidateSession: fetchSession,
     setSession
   };
-};
+}
 const useAuth = ({ session: sessionProp, intlayerConfiguration } = {}) => {
   const { session, fetchSession, revalidateSession, setSession } = useSession(sessionProp, intlayerConfiguration);
   const { oAuth2AccessToken } = useOAuth2(intlayerConfiguration);
@@ -39117,7 +40261,7 @@ const MultiSelectRoot = ({ values: valuesProp, defaultValues, onValueChange, loo
     ]),
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(CommandRoot, {
       onKeyDown: handleKeyDown,
-      className: cn$1("flex w-full flex-col gap-2 overflow-visible bg-transparent", className),
+      className: cn$2("flex w-full flex-col gap-2 overflow-visible bg-transparent", className),
       dir,
       ...props,
       children
@@ -39131,12 +40275,12 @@ const MultiSelectTrigger = ({ className, getBadgeValue = (value$1) => value$1, v
     e.stopPropagation();
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-    className: cn$1("flex w-full flex-col gap-3 rounded-lg p-1 py-2", "flex w-full items-center justify-between whitespace-nowrap border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", "w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text text-sm shadow-none outline-0 transition-all", "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]", "aria-[invalid=true]:border-error", validationStyleEnabled && "valid:border-success invalid:border-error", className),
+    className: cn$2("flex w-full flex-col gap-3", "cursor-pointer select-text text-base shadow-none outline-none md:text-sm", "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl", "px-2 py-3 md:py-2", "bg-neutral-50 dark:bg-neutral-950", "text-text", "ring-0", "focus-within:outline-none", "focus-within:ring-3", "focus-within:ring-neutral-200", "dark:focus-within:ring-neutral-500", "focus-within:ring-offset-white", "dark:focus-within:ring-offset-neutral-500", "[box-shadow:none]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-error", validationStyleEnabled && "valid:border-success invalid:border-error", className),
     ...props,
     children: [value.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
       className: "flex w-full flex-wrap gap-1",
       children: value.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, {
-        className: cn$1("flex items-center gap-1 rounded-xl px-1", activeIndex === index2 && "ring-2 ring-muted-foreground"),
+        className: cn$2("flex items-center gap-1 rounded-xl px-1", activeIndex === index2 && "ring-2 ring-muted-foreground"),
         color: BadgeColor.TEXT,
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
           className: "text-xs",
@@ -39171,7 +40315,7 @@ const MultiSelectInput = ({ className, ...props }) => {
     onBlur: () => setOpen(false),
     onFocus: () => setOpen(true),
     onClick: () => setActiveIndex(-1),
-    className: cn$1("ml-2 flex-1 cursor-pointer outline-hidden", className, activeIndex !== -1 && "caret-transparent")
+    className: cn$2("ml-2 flex-1 cursor-pointer outline-hidden", className, activeIndex !== -1 && "caret-transparent")
   });
 };
 const MultiSelectContent = ({ children }) => {
@@ -39182,7 +40326,7 @@ const MultiSelectContent = ({ children }) => {
   });
 };
 const MultiSelectList = ({ className, children }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Command.List, {
-  className: cn$1("absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border border-muted bg-input-background p-2 shadow-md transition-colors", className),
+  className: cn$2("absolute top-0 z-10 flex w-full flex-col gap-2", "rounded-xl p-2 shadow-md", "bg-white dark:bg-neutral-950", "text-text", "border border-neutral-200 dark:border-neutral-800", "transition-colors", className),
   children: [children, /* @__PURE__ */ jsxRuntimeExports.jsx(Command.Empty, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
     className: "text-muted-foreground",
     children: "No results found"
@@ -39201,7 +40345,7 @@ const MultiSelectItem = ({ className, value, children, ...props }) => {
       onValueChange(value);
       setInputValue("");
     },
-    className: cn$1("flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors", "hover:bg-neutral/10", className, isIncluded && "opacity-50", props.disabled && "cursor-not-allowed opacity-50"),
+    className: cn$2("flex cursor-pointer justify-between", "rounded-lg px-2 py-1", "transition-colors", "hover:bg-neutral/10", isIncluded && "opacity-50", props.disabled && "cursor-not-allowed opacity-50", className),
     onMouseDown: mousePreventDefault,
     children: [children, isIncluded && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4" })]
   });
@@ -40177,9 +41321,9 @@ function isTableElement(element) {
 }
 const topLayerSelectors = [":popover-open", ":modal"];
 function isTopLayer(element) {
-  return topLayerSelectors.some((selector) => {
+  return topLayerSelectors.some((selector2) => {
     try {
-      return element.matches(selector);
+      return element.matches(selector2);
     } catch (_e2) {
       return false;
     }
@@ -42655,7 +43799,7 @@ const SelectRoot = Root2$1;
 const SelectGroup = Group;
 const SelectValue = Value;
 const SelectTrigger = ({ validationStyleEnabled = false, className, children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Trigger$1, {
-  className: cn$1("flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", "w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text text-sm shadow-none outline-0 transition-all", "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]", "aria-[invalid=true]:border-error", validationStyleEnabled && "valid:border-success invalid:border-error", className),
+  className: cn$2("flex w-full cursor-pointer items-center justify-between whitespace-nowrap", "select-text text-base shadow-none outline-none md:text-sm", "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl", "px-2 py-3 md:py-2", "bg-neutral-50 dark:bg-neutral-950", "text-text", "ring-0", "focus-visible:outline-none", "focus-visible:ring-3", "focus-visible:ring-neutral-200", "dark:focus-visible:ring-neutral-500", "focus-visible:ring-offset-white", "dark:focus-visible:ring-offset-neutral-500", "[box-shadow:none] focus:[box-shadow:none]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-error", "[&>span]:line-clamp-1", validationStyleEnabled && "valid:border-success invalid:border-error", className),
   ...props,
   children: [children, /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {
     asChild: true,
@@ -42663,34 +43807,34 @@ const SelectTrigger = ({ validationStyleEnabled = false, className, children, ..
   })]
 });
 const SelectScrollUpButton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollUpButton, {
-  className: cn$1("flex cursor-default items-center justify-center py-1", className),
+  className: cn$2("flex cursor-default items-center justify-center py-1", className),
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, {})
 });
 const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollDownButton, {
-  className: cn$1("flex cursor-default items-center justify-center py-1", className),
+  className: cn$2("flex cursor-default items-center justify-center py-1", className),
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, {})
 });
 const SelectContent = ({ className, children, position = SelectContentPosition.POPPER, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Content2, {
-  className: cn$1("w-full select-text resize-none rounded-xl border-2 bg-input-background p-1 text-input-text text-sm shadow-none outline-0 transition-all", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1", className),
+  className: cn$2("relative z-50 max-h-96 min-w-32 overflow-hidden", "rounded-xl shadow-md", "bg-white dark:bg-neutral-950", "text-text", "border border-neutral-200 dark:border-neutral-800", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1", className),
   position,
   ...props,
   children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SelectScrollUpButton, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Viewport$1, {
-      className: cn$1("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+      className: cn$2("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),
       children
     }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SelectScrollDownButton, {})
   ]
 }) });
 const SelectLabel = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Label, {
-  className: cn$1("px-1 py-0.5 font-semibold text-sm", className),
+  className: cn$2("px-1 py-0.5 font-semibold text-sm", className),
   ...props
 });
 const SelectItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Item, {
-  className: cn$1("relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+  className: cn$2("relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-disabled:pointer-events-none data-disabled:opacity-50", className),
   ...props,
   children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
     className: "absolute right-2 flex size-3.5 items-center justify-center",
@@ -42698,7 +43842,7 @@ const SelectItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxRun
   }), /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children })]
 });
 const SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, {
-  className: cn$1("-mx-1 my-1 h-px bg-red-300", className),
+  className: cn$2("-mx-1 my-1 h-px", "bg-neutral-200 dark:bg-neutral-800", className),
   ...props
 });
 const Select = SelectRoot;
@@ -42712,14 +43856,17 @@ Select.Label = SelectLabel;
 Select.Item = SelectItem;
 Select.Separator = SelectSeparator;
 const selectorDefault = (option) => option?.getAttribute("aria-selected") === "true";
-const useItemSelector = (optionsRefs, selector = selectorDefault, isHoverable = false) => {
+const useItemSelector = (optionsRefs, { selector: selector2 = selectorDefault, isHoverable = false } = {
+  selector: selectorDefault,
+  isHoverable: false
+}) => {
   const [choiceIndicatorPosition, setChoiceIndicatorPosition] = reactExports.useState(null);
   const [hoveredItem, setHoveredItem] = reactExports.useState(null);
   const itemsLength = optionsRefs.current.length;
   const calculatePosition = () => {
     let targetElement = null;
     if (hoveredItem) targetElement = hoveredItem;
-    else targetElement = optionsRefs.current.find(selector) ?? null;
+    else targetElement = optionsRefs.current.find(selector2) ?? null;
     if (!targetElement) {
       setChoiceIndicatorPosition((prev) => ({
         left: 0,
@@ -42766,7 +43913,7 @@ const useItemSelector = (optionsRefs, selector = selectorDefault, isHoverable =
       resizeObserver.observe(element);
       resizeObservers.push(resizeObserver);
     };
-    const selectedItem = optionsRefs.current.find(selector) ?? null;
+    const selectedItem = optionsRefs.current.find(selector2) ?? null;
     if (selectedItem) observeSize(selectedItem);
     if (hoveredItem) observeSize(hoveredItem);
     const handleMouseEnter = (event) => {
@@ -42795,7 +43942,7 @@ const useItemSelector = (optionsRefs, selector = selectorDefault, isHoverable =
     };
   }, [
     optionsRefs,
-    selector,
+    selector2,
     hoveredItem,
     itemsLength
   ]);
@@ -42821,17 +43968,17 @@ let SwitchSelectorColor = /* @__PURE__ */ (function(SwitchSelectorColor$1) {
   SwitchSelectorColor$1["TEXT"] = "text";
   return SwitchSelectorColor$1;
 })({});
-const switchSelectorVariant = cva("flex w-fit flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]", {
+const switchSelectorVariant = cva("flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]", {
   variants: { color: {
-    [SwitchSelectorColor.PRIMARY]: "border-primary text-primary",
-    [SwitchSelectorColor.SECONDARY]: "border-secondary text-secondary",
-    [SwitchSelectorColor.DESTRUCTIVE]: "border-destructive bg-destructive text-destructive",
-    [SwitchSelectorColor.NEUTRAL]: "border-neutral text-neutral",
-    [SwitchSelectorColor.LIGHT]: "border-white text-white",
-    [SwitchSelectorColor.DARK]: "border-neutral-800 text-neutral-800",
-    [SwitchSelectorColor.TEXT]: "border-text text-text"
+    [`${SwitchSelectorColor.PRIMARY}`]: "border-primary text-primary",
+    [`${SwitchSelectorColor.SECONDARY}`]: "border-secondary text-secondary",
+    [`${SwitchSelectorColor.DESTRUCTIVE}`]: "border-destructive bg-destructive text-destructive",
+    [`${SwitchSelectorColor.NEUTRAL}`]: "border-neutral text-neutral",
+    [`${SwitchSelectorColor.LIGHT}`]: "border-white text-white",
+    [`${SwitchSelectorColor.DARK}`]: "border-neutral-800 text-neutral-800",
+    [`${SwitchSelectorColor.TEXT}`]: "border-text text-text"
   } },
-  defaultVariants: { color: SwitchSelectorColor.PRIMARY }
+  defaultVariants: { color: `${SwitchSelectorColor.PRIMARY}` }
 });
 let SwitchSelectorSize = /* @__PURE__ */ (function(SwitchSelectorSize$1) {
   SwitchSelectorSize$1["SM"] = "sm";
@@ -42839,28 +43986,31 @@ let SwitchSelectorSize = /* @__PURE__ */ (function(SwitchSelectorSize$1) {
   SwitchSelectorSize$1["LG"] = "lg";
   return SwitchSelectorSize$1;
 })({});
-const choiceVariant = cva("z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none", {
+const choiceVariant = cva("z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none", {
   variants: { size: {
-    [SwitchSelectorSize.SM]: "px-2 py-1 text-xs",
-    [SwitchSelectorSize.MD]: "p-2 text-sm",
-    [SwitchSelectorSize.LG]: "p-4 text-base"
+    [`${SwitchSelectorSize.SM}`]: "px-2 py-1 text-xs",
+    [`${SwitchSelectorSize.MD}`]: "p-2 text-sm",
+    [`${SwitchSelectorSize.LG}`]: "p-4 text-base"
   } },
-  defaultVariants: { size: SwitchSelectorSize.MD }
+  defaultVariants: { size: `${SwitchSelectorSize.MD}` }
 });
 const indicatorVariant$1 = cva("absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
-  [SwitchSelectorColor.PRIMARY]: "bg-primary aria-selected:text-text",
-  [SwitchSelectorColor.SECONDARY]: "bg-secondary aria-selected:text-text",
-  [SwitchSelectorColor.DESTRUCTIVE]: "bg-destructive aria-selected:text-text",
-  [SwitchSelectorColor.NEUTRAL]: "bg-neutral aria-selected:text-white",
-  [SwitchSelectorColor.LIGHT]: "bg-white aria-selected:text-black",
-  [SwitchSelectorColor.DARK]: "bg-neutral-800 aria-selected:text-white",
-  [SwitchSelectorColor.TEXT]: "bg-text aria-selected:text-text-opposite"
+  [`${SwitchSelectorColor.PRIMARY}`]: "bg-primary data-[indicator=true]:text-text",
+  [`${SwitchSelectorColor.SECONDARY}`]: "bg-secondary data-[indicator=true]:text-text",
+  [`${SwitchSelectorColor.DESTRUCTIVE}`]: "bg-destructive data-[indicator=true]:text-text",
+  [`${SwitchSelectorColor.NEUTRAL}`]: "bg-neutral data-[indicator=true]:text-white",
+  [`${SwitchSelectorColor.LIGHT}`]: "bg-white data-[indicator=true]:text-black",
+  [`${SwitchSelectorColor.DARK}`]: "bg-neutral-800 data-[indicator=true]:text-white",
+  [`${SwitchSelectorColor.TEXT}`]: "bg-text data-[indicator=true]:text-text-opposite"
 } } });
-const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color: color2 = SwitchSelectorColor.PRIMARY, size: size2 = SwitchSelectorSize.MD, className }) => {
+const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color: color2 = SwitchSelectorColor.PRIMARY, size: size2 = SwitchSelectorSize.MD, className, hoverable = true }) => {
   const [valueState, setValue] = reactExports.useState(value ?? defaultValue ?? choices[0].value);
+  const [hoveredIndex, setHoveredIndex] = reactExports.useState(null);
   const optionsRefs = reactExports.useRef([]);
   const indicatorRef = reactExports.useRef(null);
-  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);
+  const { choiceIndicatorPosition } = useItemSelector(optionsRefs, { isHoverable: hoverable });
+  const selectedIndex = choices.findIndex((choice) => choice.value === valueState);
+  const indicatorIndex = hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;
   const handleChange = (newValue) => {
     setValue(newValue);
     onChange?.(newValue);
@@ -42880,21 +44030,26 @@ const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChang
       children: [choices.map((choice, index2) => {
         const { content: content2, value: value$1, ...buttonProps } = choice;
         const isKeyOfKey = typeof value$1 === "string" || typeof value$1 === "number";
-        const isSelected = value$1 === valueState;
+        const isSelected = index2 === selectedIndex;
+        const isIndicatorOwner = index2 === indicatorIndex;
         return /* @__PURE__ */ reactExports.createElement("button", {
           ...buttonProps,
-          className: cn$1(choiceVariant({ size: size2 })),
+          className: cn$2(choiceVariant({ size: size2 })),
           key: isKeyOfKey ? value$1 : index2,
           role: "tab",
           onClick: () => handleChange(value$1),
-          "aria-selected": isSelected,
+          "aria-selected": isSelected ? "true" : void 0,
+          "data-indicator": isIndicatorOwner ? "true" : void 0,
           disabled: isSelected,
+          tabIndex: isSelected ? 0 : -1,
           ref: (el) => {
             optionsRefs.current[index2] = el;
-          }
+          },
+          onMouseEnter: () => setHoveredIndex(index2),
+          onMouseLeave: () => setHoveredIndex(null)
         }, content2);
       }), choiceIndicatorPosition && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-        className: cn$1(indicatorVariant$1({ color: color2 })),
+        className: cn$2(indicatorVariant$1({ color: color2 })),
         style: choiceIndicatorPosition,
         ref: indicatorRef
       })]
@@ -45406,7 +46561,7 @@ const Form$1 = ({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSucce
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormProvider, {
     ...props,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", {
-      className: cn$1("flex size-full flex-col gap-y-6", className),
+      className: cn$2("flex size-full flex-col gap-y-6", className),
       onSubmit: props.handleSubmit(onSubmit),
       autoComplete: autoComplete ? "on" : "off",
       noValidate: true,
@@ -45431,7 +46586,7 @@ const useForm = (schema, props) => {
 const FormLabel = ({ className, ...props }) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, {
-    className: cn$1("mb-2", error && "text-error", className),
+    className: cn$2("mb-2", error && "text-error", className),
     htmlFor: formItemId,
     ...props
   });
@@ -45450,8 +46605,7 @@ const FormLabelLayout = ({ children, isRequired, info, htmlFor, className }) =>
   }), info && /* @__PURE__ */ jsxRuntimeExports.jsx(InformationTag, { content: info })]
 });
 const FormItemLayout = ({ label, description, isRequired, info, children, showErrorMessage = true, htmlFor }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Form.Item, {
-  id: htmlFor,
-  className: "flex w-full flex-col gap-2 p-2",
+  className: "flex w-full flex-col gap-2 px-1 py-2",
   children: [
     (description || label) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
       className: "flex flex-col gap-1 p-1 leading-none",
@@ -45540,6 +46694,111 @@ const InputPasswordElement = ({ autoComplete, ...props }) => /* @__PURE__ */ jsx
   maxLength: 255,
   ...props
 });
+const selector = (option) => option?.getAttribute("aria-active") === "true";
+const OTPFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
+  const { error } = useFormField();
+  const optionsRefs = reactExports.useRef([]);
+  const indicatorRef = reactExports.useRef(null);
+  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, {
+    selector,
+    isHoverable: true
+  });
+  reactExports.useEffect(() => {
+    calculatePosition();
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemLayout, {
+    htmlFor: name,
+    label,
+    description,
+    isRequired,
+    info,
+    showErrorMessage,
+    "aria-invalid": !!error,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTP, {
+      onChange: field.onChange,
+      defaultValue: field.value,
+      maxLength,
+      pattern: "^[0-9]+$",
+      onActiveSlotChange: calculatePosition,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(InputOTPGroup, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTPSlot, {
+            index: 0,
+            ref: (el) => {
+              optionsRefs.current[0] = el;
+            }
+          }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTPSlot, {
+            index: 1,
+            ref: (el) => {
+              optionsRefs.current[1] = el;
+            }
+          }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTPSlot, {
+            index: 2,
+            ref: (el) => {
+              optionsRefs.current[2] = el;
+            }
+          })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTPSeparator, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(InputOTPGroup, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTPSlot, {
+            index: 3,
+            ref: (el) => {
+              optionsRefs.current[3] = el;
+            }
+          }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTPSlot, {
+            index: 4,
+            ref: (el) => {
+              optionsRefs.current[4] = el;
+            }
+          }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(InputOTPSlot, {
+            index: 5,
+            ref: (el) => {
+              optionsRefs.current[5] = el;
+            }
+          })
+        ] }),
+        choiceIndicatorPosition && /* @__PURE__ */ jsxRuntimeExports.jsx(InputIndicator, {
+          style: choiceIndicatorPosition,
+          ref: indicatorRef
+        })
+      ] })
+    })
+  });
+};
+const OTPElement = ({ name, description, label, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Field, {
+    control,
+    name,
+    render: ({ field }) => /* @__PURE__ */ jsxRuntimeExports.jsx(OTPFieldContent, {
+      field,
+      name,
+      label,
+      description,
+      isRequired,
+      info,
+      showErrorMessage,
+      slots,
+      maxLength,
+      ...props,
+      children
+    })
+  });
+};
+const SearchInputElement = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormElement, {
+  id: props.name,
+  "data-testid": props.name,
+  Element: SearchInput,
+  "aria-labelledby": props.label ? `${props.name}-label` : void 0,
+  "aria-label": props.label ? void 0 : props.name,
+  ...props
+});
 const TextAreaElement = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormElement, {
   Element: TextArea,
   id: props.name,
@@ -45567,29 +46826,58 @@ const CheckboxElement = ({ autoComplete, ...props }) => /* @__PURE__ */ jsxRunti
   maxLength: 255,
   ...props
 });
+const MultiSelectFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+  const { error } = useFormField();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemLayout, {
+    htmlFor: name,
+    label,
+    description,
+    isRequired,
+    info,
+    showErrorMessage,
+    "aria-invalid": !!error,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelect, {
+      onValueChange: field.onChange,
+      values: field.value,
+      ...props,
+      children
+    })
+  });
+};
 const MultiSelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
   const { control } = useFormContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Field, {
     control,
     name,
-    render: ({ field }) => {
-      const { error } = useFormField();
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemLayout, {
-        htmlFor: name,
-        label,
-        description,
-        isRequired,
-        info,
-        showErrorMessage,
-        "aria-invalid": !!error,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelect, {
-          onValueChange: field.onChange,
-          values: field.value,
-          ...props,
-          children
-        })
-      });
-    }
+    render: ({ field }) => /* @__PURE__ */ jsxRuntimeExports.jsx(MultiSelectFieldContent, {
+      field,
+      name,
+      label,
+      description,
+      isRequired,
+      info,
+      showErrorMessage,
+      ...props,
+      children
+    })
+  });
+};
+const SelectFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+  const { error } = useFormField();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemLayout, {
+    htmlFor: name,
+    label,
+    description,
+    isRequired,
+    info,
+    showErrorMessage,
+    "aria-invalid": !!error,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select, {
+      onValueChange: field.onChange,
+      defaultValue: field.value,
+      ...props,
+      children
+    })
   });
 };
 const SelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
@@ -45597,24 +46885,34 @@ const SelectElement = ({ name, description, label, isRequired, info, showErrorMe
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Field, {
     control,
     name,
-    render: ({ field }) => {
-      const { error } = useFormField();
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemLayout, {
-        htmlFor: name,
-        label,
-        description,
-        isRequired,
-        info,
-        showErrorMessage,
-        "aria-invalid": !!error,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select, {
-          onValueChange: field.onChange,
-          defaultValue: field.value,
-          ...props,
-          children
-        })
-      });
-    }
+    render: ({ field }) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldContent, {
+      field,
+      name,
+      label,
+      description,
+      isRequired,
+      info,
+      showErrorMessage,
+      ...props,
+      children
+    })
+  });
+};
+const SwitchSelectorFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+  const { error } = useFormField();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemLayout, {
+    htmlFor: name,
+    label,
+    description,
+    isRequired,
+    info,
+    showErrorMessage,
+    "aria-invalid": !!error,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchSelector, {
+      ...field,
+      ...props,
+      children
+    })
   });
 };
 const SwitchSelectorElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
@@ -45622,23 +46920,17 @@ const SwitchSelectorElement = ({ name, description, label, isRequired, info, sho
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Field, {
     control,
     name,
-    render: ({ field }) => {
-      const { error } = useFormField();
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(FormItemLayout, {
-        htmlFor: name,
-        label,
-        description,
-        isRequired,
-        info,
-        showErrorMessage,
-        "aria-invalid": !!error,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchSelector, {
-          ...field,
-          ...props,
-          children
-        })
-      });
-    }
+    render: ({ field }) => /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchSelectorFieldContent, {
+      field,
+      name,
+      label,
+      description,
+      isRequired,
+      info,
+      showErrorMessage,
+      ...props,
+      children
+    })
   });
 };
 const FormControl = (props) => {
@@ -45689,6 +46981,8 @@ Form.MultiSelect = MultiSelectElement;
 Form.EditableFieldInput = EditableFieldInputElement;
 Form.EditableFieldTextArea = EditableFieldTextAreaElement;
 Form.SwitchSelector = SwitchSelectorElement;
+Form.OTP = OTPElement;
+Form.SearchInput = SearchInputElement;
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {
   const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = reactExports.useState(false);
   const { setLocaleDictionary } = useDictionariesRecordActions();
@@ -45728,7 +47022,7 @@ const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) =
   };
   const handleDeleteDictionary = () => {
     if (!dictionary.id) return;
-    deleteDictionary({ dictionaryId: dictionary.id.toString() }, { onSuccess: (res) => {
+    deleteDictionary({ dictionaryId: dictionary.id }, { onSuccess: (res) => {
       if (res) onDelete?.();
     } });
   };
@@ -45764,7 +47058,7 @@ const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) =
       })]
     })
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs("form", {
-    className: cn$1("flex justify-end gap-2 max-md:flex-col", className),
+    className: cn$2("flex justify-end gap-2 max-md:flex-col", className),
     ...props,
     children: [
       mode.includes("remote") && isDistantDictionary && onDelete && isAuthenticated && /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Button, {
@@ -45822,7 +47116,7 @@ const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) =
   })] });
 };
 const ItemLayout = ({ level, title, description, children, rightParam, isSelected, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1("rounded-md p-2 transition", "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent", level === 2 && "hover:bg-card/30", level >= 3 && "", isSelected === true && "bg-card/40"),
+  className: cn$2("rounded-md p-2 transition", "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent", level === 2 && "hover:bg-card/30", level >= 3 && "", isSelected === true && "bg-card/40"),
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, {
     isOpen: isSelected,
@@ -45832,7 +47126,7 @@ const ItemLayout = ({ level, title, description, children, rightParam, isSelecte
       children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
         className: "flex w-full items-center justify-between",
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-          className: cn$1(level === 0 && "text-2xl", level === 1 && "text-xl", level === 2 && "text-lg", level >= 3 && "text-base"),
+          className: cn$2(level === 0 && "text-lg", level === 1 && "text-md", level === 2 && "text-md", level >= 3 && "text-base"),
           children: title
         }), rightParam && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
           className: "flex w-auto items-center justify-between p-3",
@@ -45843,7 +47137,10 @@ const ItemLayout = ({ level, title, description, children, rightParam, isSelecte
         children: description
       })]
     }),
-    children
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      className: "size-full px-2",
+      children
+    })
   })
 });
 const ArrayWrapper = (props) => {
@@ -45926,7 +47223,7 @@ const StringWrapper = ({ keyPath, section, editedContent, editedContentValue: ed
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
     role: "button",
     tabIndex: 0,
-    className: cn$1("w-full rounded-md p-2 text-left transition", "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent", level === 2 && "hover:bg-card/30", level >= 3 && ""),
+    className: cn$2("w-full rounded-md p-2 text-left transition", "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent", level === 2 && "hover:bg-card/30", level >= 3 && ""),
     onClick: (e) => {
       e.stopPropagation();
       onFocusKeyPath(keyPath);
@@ -46005,7 +47302,7 @@ const NestedObjectWrapper = reactExports.memo((props) => {
     const isSelected = isSameKeyPath(newKeyPath, focusedKeyPath);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemLayout, {
       level: keyPath.length,
-      title: key2,
+      title: camelCaseToSentence(key2),
       description: "",
       isSelected,
       onClick: (e) => {
@@ -46686,14 +47983,14 @@ function superRefine(fn) {
   return _superRefine(fn);
 }
 const DropDown = ({ children, className, identifier, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1(`group/dropdown relative flex`, className),
+  className: cn$2(`group/dropdown relative flex`, className),
   "aria-label": `DropDown ${identifier}`,
   id: `dropdown-container-${identifier}`,
   ...props,
   children
 });
 const Trigger = ({ children, identifier, className, label, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
-  className: cn$1("w-full cursor-pointer", className),
+  className: cn$2("w-full cursor-pointer", className),
   label: label ?? `Open panel ${identifier}`,
   "aria-haspopup": "true",
   "aria-controls": `dropdown-panel-${identifier}`,
@@ -46711,14 +48008,14 @@ let DropDownAlign = /* @__PURE__ */ (function(DropDownAlign$1) {
   return DropDownAlign$1;
 })({});
 const Panel = ({ children, isHidden: isHidden2 = void 0, isOverable = false, isFocusable = false, align = DropDownAlign.START, identifier, className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1("absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full", align === DropDownAlign.START && "left-0", align === DropDownAlign.END && "right-0", className),
+  className: cn$2("absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full", align === DropDownAlign.START && "left-0", align === DropDownAlign.END && "right-0", className),
   "aria-hidden": isHidden2,
   role: "region",
   "aria-labelledby": `dropdown-trigger-${identifier}`,
   id: `dropdown-panel-${identifier}`,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx(MaxHeightSmoother, {
     isHidden: isHidden2,
-    className: cn$1("overflow-x-visible", isHidden2 === false && "invisible", isHidden2 === true && "visible", isOverable && "group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]", isFocusable && "group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]"),
+    className: cn$2("overflow-x-visible", isHidden2 === false && "invisible", isHidden2 === true && "visible", isOverable && "group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]", isFocusable && "group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]"),
     ...props,
     children
   })
@@ -48270,7 +49567,7 @@ const ExpandCollapse = ({ isRollable = true, minHeight = DEFAULT_MIN_HEIGHT, chi
   }, []);
   if (!isRollable) return children;
   if (!isTooBig) return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-    className: cn$1("grid w-full", className),
+    className: cn$2("grid w-full", className),
     ref: codeContainerRef,
     children
   });
@@ -48279,11 +49576,11 @@ const ExpandCollapse = ({ isRollable = true, minHeight = DEFAULT_MIN_HEIGHT, chi
     minHeight,
     className: "w-full overflow-x-auto overflow-y-hidden",
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      className: cn$1("grid w-full", className),
+      className: cn$2("grid w-full", className),
       ref: codeContainerRef,
       children
     }), /* @__PURE__ */ jsxRuntimeExports.jsx("button", {
-      className: cn$1("absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400", isCollapsed ? "w-full" : "w-32"),
+      className: cn$2("absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400", isCollapsed ? "w-full" : "w-32"),
       type: "button",
       onClick: () => setIsCollapsed((prev) => !prev),
       children: expandCollapseContent(isCollapsed)
@@ -48354,9 +49651,9 @@ const CodeDefault = ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div
     }, `line-${index2}-${line.slice(0, 10)}`)) })
   })
 });
-const CodeBlockShiki = reactExports.lazy(() => __vitePreload(() => import("./CodeBlockShiki-BD9incJt.js"), true ? [] : void 0).then((mod) => ({ default: mod.CodeBlockShiki })));
+const CodeBlockShiki = reactExports.lazy(() => __vitePreload(() => import("./CodeBlockShiki-DcO6QqUs.js"), true ? [] : void 0).then((mod) => ({ default: mod.CodeBlockShiki })));
 const CodeBlock = ({ className, onChange, isEditable, children, lang, isDarkMode, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1("flex w-full min-w-0 max-w-full overflow-x-auto", className),
+  className: cn$2("flex w-full min-w-0 max-w-full overflow-x-auto", className),
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, {
     fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(CodeDefault, { children }),
@@ -48378,7 +49675,7 @@ let PopoverYAlign = /* @__PURE__ */ (function(PopoverYAlign$1) {
   return PopoverYAlign$1;
 })({});
 const PopoverStatic = ({ children, className, identifier, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1("group/popover relative flex cursor-pointer", className),
+  className: cn$2("group/popover relative flex cursor-pointer", className),
   id: `unrollable-panel-button-${identifier}`,
   "aria-haspopup": true,
   ...props,
@@ -48391,7 +49688,7 @@ const Detail = reactExports.forwardRef(({ children, isHidden: isHidden2 = void 0
   "aria-hidden": isHidden2,
   "aria-labelledby": `unrollable-panel-button-${identifier}`,
   id: `unrollable-panel-${identifier}`,
-  className: cn$1("absolute z-[1000] min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "end" && "right-0", yAlign === "bellow" && "top-[calc(100%+1rem)]", yAlign === "above" && "bottom-[calc(100%+1rem)]", displayArrow && 'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[""]', displayArrow && xAlign === "start" && "before:left-2", displayArrow && xAlign === "end" && "before:right-2", displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent", displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent", "overflow-x-visible opacity-0 transition-all duration-400 ease-in-out", isHidden2 !== false ? "invisible" : "visible opacity-100 delay-800", isOverable && "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800", isFocusable && "group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800", className),
+  className: cn$2("absolute z-[1000] min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "end" && "right-0", yAlign === "bellow" && "top-[calc(100%+1rem)]", yAlign === "above" && "bottom-[calc(100%+1rem)]", displayArrow && 'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[""]', displayArrow && xAlign === "start" && "before:left-2", displayArrow && xAlign === "end" && "before:right-2", displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent", displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent", "overflow-x-visible opacity-0 transition-all duration-400 ease-in-out", isHidden2 !== false ? "invisible" : "visible opacity-100 delay-800", isOverable && "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800", isFocusable && "group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800", className),
   ...props,
   children
 }));
@@ -48537,7 +49834,10 @@ const CodeFormatSelector = () => {
       setCodeFormat(value);
       setContentDeclarationFormat(value);
     },
-    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Code Format" }) }), /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, {
+      className: "py-1",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Code Format" })
+    }), /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, {
         value: "typescript",
         children: "TypeScript"
@@ -48558,7 +49858,10 @@ const ContentDeclarationFormatSelector = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, {
     value: contentDeclarationFormat,
     onValueChange: setContentDeclarationFormat,
-    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Dictionary Format" }) }), /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, {
+      className: "py-1",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Dictionary Format" })
+    }), /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, {
         value: "typescript",
         children: "TypeScript"
@@ -48598,7 +49901,10 @@ const PackageManagerSelector = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, {
     value: packageManager,
     onValueChange: setPackageManager,
-    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Package Manager" }) }), /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, {
+      className: "py-1",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Package Manager" })
+    }), /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, {
         value: "npm",
         children: "npm"
@@ -48627,7 +49933,7 @@ const Code = ({ children, language, isDarkMode, showHeader = true, showLineNumbe
     codeFormat,
     contentDeclarationFormat,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, {
-      className: cn$1("relative min-w-0 max-w-full text-sm leading-6", showLineNumbers && "with-line-number ml-0", className),
+      className: cn$2("relative min-w-0 max-w-full text-sm leading-6", showLineNumbers && "with-line-number ml-0", className),
       transparency: "lg",
       ...props,
       children: [showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
@@ -48646,7 +49952,7 @@ const Code = ({ children, language, isDarkMode, showHeader = true, showLineNumbe
       }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
         className: "sticky top-46 z-20",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          className: cn$1("absolute right-2 bottom-0 flex h-7 items-center", hadSelectInHeader && "h-11"),
+          className: cn$2("absolute right-2 bottom-0 flex h-7 items-center", hadSelectInHeader && "h-11"),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyCode, { code })
         })
       })] }), /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandCollapse, {
@@ -48696,12 +50002,12 @@ const indicatorVariant = cva("absolute top-0 z-[-1] h-full w-auto rounded-lg tra
 const TabSelector = ({ tabs, selectedChoice, onTabClick, color: color2 = TabSelectorColor.PRIMARY, hoverable = false, className }) => {
   const optionsRefs = reactExports.useRef([]);
   const indicatorRef = reactExports.useRef(null);
-  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, void 0, hoverable);
+  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, { isHoverable: hoverable });
   reactExports.useEffect(() => {
     calculatePosition();
   }, [selectedChoice, tabs]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-    className: cn$1(tabSelectorVariant({ color: color2 }), className),
+    className: cn$2(tabSelectorVariant({ color: color2 }), className),
     "aria-orientation": "horizontal",
     "aria-multiselectable": "false",
     role: "tablist",
@@ -48723,7 +50029,7 @@ const TabSelector = ({ tabs, selectedChoice, onTabClick, color: color2 = TabSele
         }
       });
     }), choiceIndicatorPosition && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      className: cn$1(indicatorVariant({ color: color2 })),
+      className: cn$2(indicatorVariant({ color: color2 })),
       style: choiceIndicatorPosition,
       ref: indicatorRef
     }, `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`)]
@@ -48912,7 +50218,7 @@ const TabComponent = ({ defaultTab, group, variant, children, className, ...prop
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, {
     value: contextValue,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: cn$1(tabContainerVariant({ variant }), className),
+      className: cn$2(tabContainerVariant({ variant }), className),
       ...props,
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
         className: "sticky top-36 z-10 flex gap-3 bg-background/70 p-3 backdrop-blur",
@@ -48922,7 +50228,7 @@ const TabComponent = ({ defaultTab, group, variant, children, className, ...prop
             const { label, value, disabled } = child.props;
             const isActive = currentTabValue === value;
             return /* @__PURE__ */ jsxRuntimeExports.jsx("button", {
-              className: cn$1("cursor-pointer rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none", !isActive && "text-neutral/70"),
+              className: cn$2("cursor-pointer rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none", !isActive && "text-neutral/70"),
               "data-active": isActive,
               disabled,
               onClick: () => !disabled && handleSetActiveTab(value),
@@ -48942,7 +50248,7 @@ const TabComponent = ({ defaultTab, group, variant, children, className, ...prop
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
           role: "tablist",
           "aria-orientation": "horizontal",
-          className: cn$1("grid w-full min-w-0", isDragging2 ? "transition-none" : "transition-transform duration-300 ease-in-out"),
+          className: cn$2("grid w-full min-w-0", isDragging2 ? "transition-none" : "transition-transform duration-300 ease-in-out"),
           style: {
             gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,
             transform: `translateX(-${activeTabIndex * 100 - (isDragging2 ? dragDeltaPct : 0)}%)`
@@ -48957,7 +50263,7 @@ const TabComponent = ({ defaultTab, group, variant, children, className, ...prop
               "aria-hidden": !isActive,
               tabIndex: isActive ? 0 : -1,
               "data-active": isActive,
-              className: cn$1("w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out", !isActive && "pointer-events-none opacity-0"),
+              className: cn$2("w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out", !isActive && "pointer-events-none opacity-0"),
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
                 className: "flex w-full min-w-0 flex-col items-stretch gap-6",
                 children: children$1
@@ -48994,7 +50300,7 @@ const Table = ({ className, isRollable = false, displayModal, ...props }) => {
         isRollable,
         className: "max-w-full overflow-x-auto",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("table", {
-          className: cn$1("min-w-full max-w-full table-auto overflow-x-auto bg-background text-left", className),
+          className: cn$2("min-w-full max-w-full table-auto overflow-x-auto bg-background text-left", className),
           ...props
         })
       }),
@@ -49006,7 +50312,7 @@ const Table = ({ className, isRollable = false, displayModal, ...props }) => {
         children: isModalOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
           className: "grid",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("table", {
-            className: cn$1("min-w-full max-w-full table-auto text-left", className),
+            className: cn$2("min-w-full max-w-full table-auto text-left", className),
             ...props
           })
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})
@@ -50404,22 +51710,27 @@ const MarkdownRenderer = ({ children, isDarkMode, locale, options }) => {
         }),
         h2: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H2, {
           isClickable: true,
+          className: "mt-16",
           ...props
         }),
         h3: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H3, {
           isClickable: true,
+          className: "mt-5",
           ...props
         }),
         h4: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H4, {
           isClickable: true,
+          className: "mt-3",
           ...props
         }),
         h5: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H5, {
           isClickable: true,
+          className: "mt-3",
           ...props
         }),
         h6: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H6, {
           isClickable: true,
+          className: "mt-3",
           ...props
         }),
         code: (props) => !props.className ? /* @__PURE__ */ jsxRuntimeExports.jsx("strong", {
@@ -50433,21 +51744,21 @@ const MarkdownRenderer = ({ children, isDarkMode, locale, options }) => {
           showHeader: Boolean(props.fileName)
         }),
         blockquote: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("blockquote", {
-          className: cn$1("mt-5 gap-3 border-card border-l-4 pl-5 text-neutral", className),
+          className: cn$2("mt-5 gap-3 border-card border-l-4 pl-5 text-neutral", className),
           ...props
         }),
         ul: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", {
-          className: cn$1("mt-5 flex list-disc flex-col gap-3 pl-5", className),
+          className: cn$2("mt-5 flex list-disc flex-col gap-3 pl-5", className),
           ...props
         }),
         ol: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("ol", {
-          className: cn$1("mt-5 flex list-decimal flex-col gap-3 pl-5", className),
+          className: cn$2("mt-5 flex list-decimal flex-col gap-3 pl-5", className),
           ...props
         }),
         img: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("img", {
           ...props,
           loading: "lazy",
-          className: cn$1("max-h-[80vh] max-w-full rounded-md", className),
+          className: cn$2("max-h-[80vh] max-w-full rounded-md", className),
           src: `${props.src}?raw=true`
         }),
         a: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Link, {
@@ -50463,30 +51774,30 @@ const MarkdownRenderer = ({ children, isDarkMode, locale, options }) => {
           ...props
         }),
         th: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("th", {
-          className: cn$1("border-neutral border-b bg-neutral/10 p-4", className),
+          className: cn$2("border-neutral border-b bg-neutral/10 p-4", className),
           ...props
         }),
         tr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
-          className: cn$1("hover:/10 hover:bg-neutral/10", className),
+          className: cn$2("hover:/10 hover:bg-neutral/10", className),
           ...props
         }),
         td: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("td", {
-          className: cn$1("border-neutral-500/50 border-b p-4", className),
+          className: cn$2("border-neutral-500/50 border-b p-4", className),
           ...props
         }),
         hr: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("hr", {
-          className: cn$1("mx-6 mt-16 text-neutral", className),
+          className: cn$2("mx-6 mt-16 text-neutral", className),
           ...props
         }),
         Tabs: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { ...props }),
         Tab: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { ...props }),
         TabItem: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tab.Item, { ...props }),
         Columns: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          className: cn$1("flex gap-4 max-md:flex-col", className),
+          className: cn$2("flex gap-4 max-md:flex-col", className),
           ...props
         }),
         Column: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          className: cn$1("flex-1", className),
+          className: cn$2("flex-1", className),
           ...props
         }),
         ...overrides
@@ -50822,16 +52133,25 @@ const TranslationTextEditor = ({ section, keyPath, dictionary, renderSection })
       className: "flex w-full flex-col gap-2",
       children: localesList.map((translationKey) => /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [/* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
         className: "mt-2 w-full p-2 text-xs",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: getLocaleName(translationKey, locale) })
-      }), /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TextEditorContainer, {
-        section: content2[translationKey] ?? getEmptyNode(content2[defaultLocale]),
-        keyPath: [...keyPath, {
-          type: NodeType.Translation,
-          key: translationKey
-        }],
-        dictionary,
-        renderSection
-      }) }) })] }, translationKey))
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", {
+          className: "w-full",
+          children: getLocaleName(translationKey, locale)
+        })
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
+        className: "flex",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", {
+          className: "w-full",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(TextEditorContainer, {
+            section: content2[translationKey] ?? getEmptyNode(content2[defaultLocale]),
+            keyPath: [...keyPath, {
+              type: NodeType.Translation,
+              key: translationKey
+            }],
+            dictionary,
+            renderSection
+          })
+        })
+      })] }, translationKey))
     })
   });
 };
@@ -50919,7 +52239,10 @@ const ConditionTextEditor = ({ section, keyPath, dictionary, renderSection }) =>
         "fallback"
       ].map((condKey) => /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [/* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
         className: "mt-2 block w-full p-2 text-xs",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: String(condKey) })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", {
+          className: "w-full",
+          children: String(condKey)
+        })
       }, condKey), /* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
         className: "block w-full",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(TextEditorContainer, {
@@ -50947,7 +52270,10 @@ const GenderTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
         "fallback"
       ].map((condKey) => /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [/* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
         className: "mt-2 block w-full p-2 text-xs",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: String(condKey) })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", {
+          className: "w-full",
+          children: String(condKey)
+        })
       }, condKey), /* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
         className: "block w-full",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(TextEditorContainer, {
@@ -50973,7 +52299,7 @@ const ArrayTextEditor = ({ section, keyPath, dictionary, renderSection }) => {
       children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", {
         className: "flex w-full flex-col gap-2",
         children: section.map((subSection, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("tr", {
-          className: "mt-2 flex w-full justify-between gap-2 p-2",
+          className: "mt-2 flex w-full items-center justify-between gap-2 p-2",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
             className: "text-xs",
             children: String(index2)
@@ -51038,7 +52364,10 @@ const ObjectTextEditor = ({ section, keyPath, dictionary, renderSection }) => /*
       const subSection = typedSection[key2] ?? getEmptyNode(typedSection[firstKey]);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [/* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
         className: "mt-2 p-2 text-xs",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: String(key2) })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", {
+          className: "w-full",
+          children: String(key2)
+        })
       }, JSON.stringify(subSection)), /* @__PURE__ */ jsxRuntimeExports.jsx("tr", {
         className: "block w-full",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(TextEditor, {
@@ -51120,7 +52449,7 @@ const NestedTextEditor = ({ keyPath, dictionary, renderSection, section, ...prop
   const content2 = section[NodeType.Nested];
   const childrenKeyPath = [...keyPath, { type: NodeType.Nested }];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-    className: "w-full p-2",
+    className: "flex w-full flex-col gap-4 p-2",
     children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { children: "Dictionary key" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ContentEditorInput, {
@@ -51276,7 +52605,7 @@ const getIsEditableSection = (section) => {
 const KeyPathBreadcrumb = ({ keyPath, dictionaryKey, onClickKeyPath, locale }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, {
     links: [{
-      text: dictionaryKey,
+      text: camelCaseToSentence(dictionaryKey),
       onClick: () => onClickKeyPath([])
     }, ...keyPath.map((el, index2) => ({
       onClick: () => onClickKeyPath(keyPath.slice(0, index2 + 1)),
@@ -51286,9 +52615,6 @@ const KeyPathBreadcrumb = ({ keyPath, dictionaryKey, onClickKeyPath, locale }) =
     elementType: "location"
   });
 };
-const camelCaseToSentence = (content2) => {
-  return String(content2).replace(/([A-Z])/g, " $1").toLowerCase().trim();
-};
 const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
   const { locales } = configuration.internationalization;
   const section = getContentNodeByKeyPath(sectionProp, keyPath, useEditorLocale());
@@ -51829,8 +53155,8 @@ function validateChanges(initial, changes) {
   })) errorHandler$1("changeField");
   return changes;
 }
-function validateSelector(selector) {
-  if (!isFunction(selector)) errorHandler$1("selectorType");
+function validateSelector(selector2) {
+  if (!isFunction(selector2)) errorHandler$1("selectorType");
 }
 function validateHandler(handler) {
   if (!(isFunction(handler) || isObject$1(handler))) errorHandler$1("handlerType");
@@ -51876,11 +53202,11 @@ function create(initial) {
   var validate = curry$1(validators$1.changes)(initial);
   var getChanges = curry$1(extractChanges)(state);
   function getState2() {
-    var selector = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(state2) {
+    var selector2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(state2) {
       return state2;
     };
-    validators$1.selector(selector);
-    return selector(state.current);
+    validators$1.selector(selector2);
+    return selector2(state.current);
   }
   function setState2(causedChanges) {
     compose$1(didUpdate, update, validate, getChanges)(causedChanges);
@@ -52298,11 +53624,11 @@ const MonacoCode = ({ children, language, isDarkMode, showLineNumbers, showCopyB
   };
   const isShowLineNumbers = showLineNumbers ?? children.split("\n").length > 1;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-    className: cn$1("relative h-full w-full text-sm", showLineNumbers && "ml-0"),
+    className: cn$2("relative h-full w-full text-sm", showLineNumbers && "ml-0"),
     children: [showCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
       className: "sticky top-5 z-10",
       children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-        className: cn$1("absolute right-2 bottom-0 flex h-7 items-center"),
+        className: cn$2("absolute right-2 bottom-0 flex h-7 items-center"),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { content: children })
       })
     }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
@@ -52714,13 +54040,13 @@ const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode,
   });
 };
 const MaxWidthSmoother = ({ children, isHidden: isHidden2, minWidth = 0, align = "left", className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-  className: cn$1("relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out", isHidden2 ? "" : "grid-cols-[1fr]", className),
+  className: cn$2("relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out", isHidden2 ? "" : "grid-cols-[1fr]", className),
   "aria-hidden": isHidden2,
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
     style: { minWidth: `${minWidth}px` },
     tabIndex: isHidden2 !== false ? void 0 : -1,
-    className: cn$1(align === "right" && "ml-auto"),
+    className: cn$2(align === "right" && "ml-auto"),
     children
   })
 });
@@ -52748,6 +54074,18 @@ const checkIsMobileUserAgent = () => {
   if (typeof userAgent === "undefined") return;
   return /android|bb\d+|meego|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(?:hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(?:ob|in)i|palm(?: os)?|phone|p(?:ixi|re)\/|plucker|pocket|psp|series(?:4|6)0|symbian|treo|up\.(?:browser|link)|vodafone|wap|windows ce|windows phone|xda|xiino|zte-/i.test(userAgent);
 };
+const checkIsIOS = () => {
+  if (typeof window === "undefined") return;
+  const userAgent = window.navigator?.userAgent;
+  if (typeof userAgent === "undefined") return;
+  return /iP(?:hone|ad|od)/.test(userAgent);
+};
+const checkIsMac = () => {
+  if (typeof window === "undefined") return;
+  const userAgent = window.navigator?.userAgent;
+  if (typeof userAgent === "undefined") return;
+  return /Macintosh|MacIntel|Mac OS X/.test(userAgent);
+};
 const checkIsMobileScreen = (breakpoint) => {
   if (typeof window === "undefined") return;
   return (window?.innerWidth ?? 0) <= breakpoint;
@@ -52759,7 +54097,9 @@ const calculateIsMobile = (breakpoint = "md") => {
   return {
     isMobileScreen,
     isMobileUserAgent,
-    isMobile: isMobileScreen ?? isMobileUserAgent
+    isMobile: isMobileScreen ?? isMobileUserAgent,
+    isIOS: checkIsIOS(),
+    isMac: checkIsMac()
   };
 };
 const useDevice = (breakpoint = "md") => {
@@ -53658,7 +54998,7 @@ const ToastPrimitives = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
 }, Symbol.toStringTag, { value: "Module" }));
 const ToastProvider = ToastPrimitives;
 const ToastViewport = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Viewport, {
-  className: cn$1("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]", className),
+  className: cn$2("fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]", className),
   ...props
 });
 const toastVariants = cva("group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none", {
@@ -53671,22 +55011,22 @@ const toastVariants = cva("group data-[state=closed]:fade-out-80 data-[state=clo
 });
 const Toast = ({ className, variant, ...props }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2, {
-    className: cn$1(toastVariants({ variant }), className),
+    className: cn$2(toastVariants({ variant }), className),
     ...props
   });
 };
 const ToastClose = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Close, {
-  className: cn$1("absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50", className),
+  className: cn$2("absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50", className),
   "toast-close": "",
   ...props,
   children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "size-5" })
 });
 const ToastTitle = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Title, {
-  className: cn$1("font-semibold text-sm [&+div]:text-xs", className),
+  className: cn$2("font-semibold text-sm [&+div]:text-xs", className),
   ...props
 });
 const ToastDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Description, {
-  className: cn$1("text-sm opacity-90", className),
+  className: cn$2("text-sm opacity-90", className),
   ...props
 });
 const TOAST_LIMIT = 1;