@scalar/use-hooks 0.3.7 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @scalar/use-hooks
 
+## 0.4.1
+
+### Patch Changes
+
+- [#8466](https://github.com/scalar/scalar/pull/8466): chore: new build pipeline
+
+## 0.4.0
+
+### Minor Changes
+
+- [#8322](https://github.com/scalar/scalar/pull/8322): chore: bump required node version to >=22 (LTS)
+
+### Patch Changes
+
+#### Updated Dependencies
+
+- **@scalar/use-toasts@0.10.0**
+  - [#8322](https://github.com/scalar/scalar/pull/8322): chore: bump required node version to >=22 (LTS)
+
 ## 0.3.7
 
 ### Patch Changes

package/dist/useBindCx/cva.js

@@ -1,22 +1,30 @@
-import { defineConfig } from "cva";
-import { extendTailwindMerge } from "tailwind-merge";
+import { defineConfig } from 'cva';
+import { extendTailwindMerge } from 'tailwind-merge';
+/**
+ * Tailwind Merge Config
+ *
+ * By default tailwind merge only knows about the default tailwind classes
+ * this is because it does not load in the tailwind config at runtime (perf reasons)
+ * we must specify any custom classes if they are getting overwritten
+ *
+ * https://github.com/dcastil/tailwind-merge/blob/v3.4.0/docs/configuration.md#class-groups
+ */
 const tw = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": ["text-3xs", "text-xxs"],
-      "font-weight": ["font-sidebar", "font-sidebar-active"]
-    }
-  }
+    extend: {
+        classGroups: {
+            'font-size': ['text-3xs', 'text-xxs'],
+            'font-weight': ['font-sidebar', 'font-sidebar-active'],
+        },
+    },
 });
+/**
+ * CVA Config
+ *
+ * https://beta.cva.style/api-reference/#defineconfig
+ */
 const { cva, cx, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => tw(className)
-  }
+    hooks: {
+        onComplete: (className) => tw(className),
+    },
 });
-export {
-  compose,
-  cva,
-  cx,
-  tw
-};
-//# sourceMappingURL=cva.js.map
+export { cva, cx, compose, tw };

package/dist/useBindCx/index.js

@@ -1,10 +1,2 @@
-import { compose, cva, cx, tw } from "./cva.js";
-import { useBindCx } from "./useBindCx.js";
-export {
-  compose,
-  cva,
-  cx,
-  tw,
-  useBindCx
-};
-//# sourceMappingURL=index.js.map
+export { compose, cva, cx, tw } from './cva.js';
+export { useBindCx } from './useBindCx.js';

package/dist/useBindCx/useBindCx.js

@@ -1,92 +1,115 @@
-import { computed, useAttrs } from "vue";
-import { cx } from "./cva.js";
-function useBindCx() {
-  const attrs = useAttrs();
-  const destructured = computed(() => {
-    const { class: className, style, ...rest } = attrs;
-    return { class: className || "", style, rest };
-  });
-  function bindCx(...args) {
+import { computed, useAttrs } from 'vue';
+import { cx } from './cva.js';
+/**
+ * Provides a wrapper around the `cx` function that merges the
+ * component's class attribute with the provided classes and binds the
+ * remaining attributes
+ *
+ * @see https://beta.cva.style/api-reference#cx
+ *
+ * @example
+ * <script setup>
+ * import { useBindCx, cva } from '@scalar/components'
+ *
+ * defineProps<{ active?: boolean }>()
+ *
+ * // Important: disable inheritance of attributes
+ * defineOptions({ inheritAttrs: false })
+ *
+ * const { cx } = useBindCx()
+ *
+ * const variants = cva({
+ *   base: 'border rounded p-2 bg-b-1',
+ *   variants: { active: { true: 'bg-b-2' } },
+ * })
+ * </script>
+ * <template>
+ *   <div v-bind="cx(variants({ active }))">MockComponent</div>
+ * </template>
+ */
+export function useBindCx() {
+    const attrs = useAttrs();
+    const destructured = computed(() => {
+        const { class: className, style, ...rest } = attrs;
+        return { class: className || '', style: style, rest };
+    });
+    function bindCx(...args) {
+        return {
+            class: cx(...args, destructured.value.class),
+            style: destructured.value.style,
+            ...destructured.value.rest,
+        };
+    }
+    function bindClassAndStyle(...args) {
+        return { class: cx(...args, destructured.value.class), style: destructured.value.style };
+    }
     return {
-      class: cx(...args, destructured.value.class),
-      style: destructured.value.style,
-      ...destructured.value.rest
+        /**
+         * Provides a wrapper around the `cx` function that merges the
+         * component's class attribute with the provided classes and binds the
+         * remaining attributes
+         *
+         * @example
+         * ```html
+         * <script setup>
+         * ...
+         * const { cx } = useBindCx()
+         * </script>
+         * <template>
+         *   <div v-bind="cx(...)">...</div>
+         * </template>
+         * ```
+         */
+        cx: bindCx,
+        /**
+         * Provides a wrapper around the `cx` function that merges the
+         * component's class attribute with the provided classes and binds the
+         * style attribute  but **does not** bind any other attributes.
+         *
+         * Typically used in conjunction with `otherAttrs` to apply the stylistic
+         * attributes to a styled wrapper element, but apply the remaining
+         * attributes to an internal semantic element like an `<input>`.
+         *
+         * @example
+         * ```html
+         * <script setup>
+         * ...
+         * const { stylingAttrsCx, otherAttrs } = useBindCx()
+         * </script>
+         * <template>
+         *   <!-- Bind the class and style attributes to a wrapper element -->
+         *   <div v-bind="stylingAttrsCx(...)">
+         *     ...
+         *     <!-- Bind the other attributes to a semantic internal element -->
+         *     <input v-bind="otherAttrs" />
+         *   </div>
+         * </template>
+         * ```
+         */
+        stylingAttrsCx: bindClassAndStyle,
+        /**
+         * The remaining attributes that **are not** the class or style attributes
+         * of the component.
+         *
+         * Typically used in conjunction with `stylingAttrsCx` to apply the stylistic
+         * attributes to a styled wrapper element, but apply the remaining
+         * attributes to an internal semantic element like an `<input>`.
+         *
+         * @example
+         * ```html
+         * <script setup>
+         * ...
+         * const { stylingAttrsCx, otherAttrs } = useBindCx()
+         * </script>
+         * <template>
+         *   <!-- Bind the class and style attributes to a wrapper element -->
+         *   <div v-bind="stylingAttrsCx(...)">
+         *     ...
+         *     <!-- Bind the other attributes to a semantic internal element -->
+         *     <input v-bind="otherAttrs" />
+         *   </div>
+         * </template>
+         */
+        otherAttrs: computed(() => destructured.value.rest),
     };
-  }
-  function bindClassAndStyle(...args) {
-    return { class: cx(...args, destructured.value.class), style: destructured.value.style };
-  }
-  return {
-    /**
-     * Provides a wrapper around the `cx` function that merges the
-     * component's class attribute with the provided classes and binds the
-     * remaining attributes
-     *
-     * @example
-     * ```html
-     * <script setup>
-     * ...
-     * const { cx } = useBindCx()
-     * <\/script>
-     * <template>
-     *   <div v-bind="cx(...)">...</div>
-     * </template>
-     * ```
-     */
-    cx: bindCx,
-    /**
-     * Provides a wrapper around the `cx` function that merges the
-     * component's class attribute with the provided classes and binds the
-     * style attribute  but **does not** bind any other attributes.
-     *
-     * Typically used in conjunction with `otherAttrs` to apply the stylistic
-     * attributes to a styled wrapper element, but apply the remaining
-     * attributes to an internal semantic element like an `<input>`.
-     *
-     * @example
-     * ```html
-     * <script setup>
-     * ...
-     * const { stylingAttrsCx, otherAttrs } = useBindCx()
-     * <\/script>
-     * <template>
-     *   <!-- Bind the class and style attributes to a wrapper element -->
-     *   <div v-bind="stylingAttrsCx(...)">
-     *     ...
-     *     <!-- Bind the other attributes to a semantic internal element -->
-     *     <input v-bind="otherAttrs" />
-     *   </div>
-     * </template>
-     * ```
-     */
-    stylingAttrsCx: bindClassAndStyle,
-    /**
-     * The remaining attributes that **are not** the class or style attributes
-     * of the component.
-     *
-     * Typically used in conjunction with `stylingAttrsCx` to apply the stylistic
-     * attributes to a styled wrapper element, but apply the remaining
-     * attributes to an internal semantic element like an `<input>`.
-     *
-     * @example
-     * ```html
-     * <script setup>
-     * ...
-     * const { stylingAttrsCx, otherAttrs } = useBindCx()
-     * <\/script>
-     * <template>
-     *   <!-- Bind the class and style attributes to a wrapper element -->
-     *   <div v-bind="stylingAttrsCx(...)">
-     *     ...
-     *     <!-- Bind the other attributes to a semantic internal element -->
-     *     <input v-bind="otherAttrs" />
-     *   </div>
-     * </template>
-     */
-    otherAttrs: computed(() => destructured.value.rest)
-  };
 }
-export {
-  useBindCx
-};
-//# sourceMappingURL=useBindCx.js.map

package/dist/useBreakpoints/constants.js

@@ -1,18 +1,19 @@
-const screens = {
-  /** Mobile */
-  xs: "(min-width: 400px)",
-  /** Large Mobile */
-  sm: "(min-width: 600px)",
-  /** Tablet */
-  md: "(min-width: 800px)",
-  /** Desktop */
-  lg: "(min-width: 1000px)",
-  /** Ultrawide and larger */
-  xl: "(min-width: 1200px)",
-  /** Custom breakpoint for zoomed in screens (should trigger at about 200% zoom) */
-  zoomed: "(max-width: 720px) and (max-height: 480px)"
+/**
+ * Breakpoints for useBreakpoints hook
+ *
+ * Should match the tailwind breakpoints in \@scalar/themes
+ */
+export const screens = {
+    /** Mobile */
+    xs: '(min-width: 400px)',
+    /** Large Mobile */
+    sm: '(min-width: 600px)',
+    /** Tablet */
+    md: '(min-width: 800px)',
+    /** Desktop */
+    lg: '(min-width: 1000px)',
+    /** Ultrawide and larger */
+    xl: '(min-width: 1200px)',
+    /** Custom breakpoint for zoomed in screens (should trigger at about 200% zoom) */
+    zoomed: '(max-width: 720px) and (max-height: 480px)',
 };
-export {
-  screens
-};
-//# sourceMappingURL=constants.js.map

package/dist/useBreakpoints/index.js

@@ -1,7 +1,2 @@
-import { screens } from "./constants.js";
-import { useBreakpoints } from "./useBreakpoints.js";
-export {
-  screens,
-  useBreakpoints
-};
-//# sourceMappingURL=index.js.map
+export { screens } from './constants.js';
+export { useBreakpoints } from './useBreakpoints.js';

package/dist/useBreakpoints/useBreakpoints.js

@@ -1,30 +1,28 @@
-import { useMediaQuery } from "@vueuse/core";
-import { computed, unref } from "vue";
-import { screens } from "./constants.js";
-function useBreakpoints() {
-  const mediaQueries = {
-    xs: useMediaQuery(screens.xs),
-    sm: useMediaQuery(screens.sm),
-    md: useMediaQuery(screens.md),
-    lg: useMediaQuery(screens.lg),
-    xl: useMediaQuery(screens.xl),
-    zoomed: useMediaQuery(screens.zoomed)
-  };
-  const breakpoints = computed(
-    () => Object.fromEntries(
-      Object.entries(mediaQueries).map(([breakpoint, queryRef]) => [breakpoint, unref(queryRef)])
-    )
-  );
-  return {
-    /** The screen sizes defined in the preset */
-    screens,
-    /** Reactive media queries for each of the screen sizes */
-    mediaQueries,
-    /** The breakpoints as reactive media queries */
-    breakpoints
-  };
+import { useMediaQuery } from '@vueuse/core';
+import { computed, unref } from 'vue';
+import { screens } from './constants.js';
+/**
+ * Exposes Tailwind CSS breakpoints as reactive media queries
+ *
+ * **Warning:** This hook is not a replacement for Tailwind CSS breakpoints. Using breakpoints in Javascript can cause issues with Server Side Rendering (SSR) and the Tailwind CSS breakpoints should be used when possible.
+ */
+export function useBreakpoints() {
+    const mediaQueries = {
+        xs: useMediaQuery(screens.xs),
+        sm: useMediaQuery(screens.sm),
+        md: useMediaQuery(screens.md),
+        lg: useMediaQuery(screens.lg),
+        xl: useMediaQuery(screens.xl),
+        zoomed: useMediaQuery(screens.zoomed),
+    };
+    // We make the breakpoints a computed object so that we can use them in templates as `breakpoints.x` instead of `breakpoints.x.value`
+    const breakpoints = computed(() => Object.fromEntries(Object.entries(mediaQueries).map(([breakpoint, queryRef]) => [breakpoint, unref(queryRef)])));
+    return {
+        /** The screen sizes defined in the preset */
+        screens,
+        /** Reactive media queries for each of the screen sizes */
+        mediaQueries,
+        /** The breakpoints as reactive media queries */
+        breakpoints,
+    };
 }
-export {
-  useBreakpoints
-};
-//# sourceMappingURL=useBreakpoints.js.map

package/dist/useClipboard/index.js

@@ -1,5 +1 @@
-import { useClipboard } from "./useClipboard.js";
-export {
-  useClipboard
-};
-//# sourceMappingURL=index.js.map
+export { useClipboard } from './useClipboard.js';

package/dist/useClipboard/types.js

@@ -1 +1 @@
-//# sourceMappingURL=types.js.map
+export {};

package/dist/useClipboard/useClipboard.js

@@ -1,30 +1,31 @@
-import { useToasts } from "@scalar/use-toasts";
+import { useToasts } from '@scalar/use-toasts';
+/** Safely serialize a value to a string */
 const serializeValue = (value) => {
-  if (value === void 0) {
-    return "undefined";
-  }
-  if (typeof value === "string") {
-    return value;
-  }
-  return JSON.stringify(value);
+    if (value === undefined) {
+        return 'undefined';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    return JSON.stringify(value);
 };
-function useClipboard(opts = {}) {
-  const { notify = (m) => toast(m, "info") } = opts;
-  const { toast } = useToasts();
-  async function copyToClipboard(value) {
-    try {
-      const serialized = serializeValue(value);
-      await navigator.clipboard.writeText(serialized);
-      notify("Copied to the clipboard");
-    } catch (e) {
-      const error = e;
-      console.error(error.message);
-      notify("Failed to copy to clipboard");
+/**
+ * A hook for interacting with the clipboard
+ */
+export function useClipboard(opts = {}) {
+    const { notify = (m) => toast(m, 'info') } = opts;
+    const { toast } = useToasts();
+    async function copyToClipboard(value) {
+        try {
+            const serialized = serializeValue(value);
+            await navigator.clipboard.writeText(serialized);
+            notify('Copied to the clipboard');
+        }
+        catch (e) {
+            const error = e;
+            console.error(error.message);
+            notify('Failed to copy to clipboard');
+        }
     }
-  }
-  return { copyToClipboard };
+    return { copyToClipboard };
 }
-export {
-  useClipboard
-};
-//# sourceMappingURL=useClipboard.js.map

package/dist/useColorMode/index.js

@@ -1,5 +1 @@
-import { useColorMode } from "./useColorMode.js";
-export {
-  useColorMode
-};
-//# sourceMappingURL=index.js.map
+export { useColorMode } from './useColorMode.js';

package/dist/useColorMode/useColorMode.js

@@ -1,88 +1,97 @@
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
-import { z } from "zod";
-const colorMode = ref("dark");
-const colorModeSchema = z.enum(["dark", "light", "system"]).optional().catch(void 0);
-function useColorMode(opts = {}) {
-  const { initialColorMode = "system", overrideColorMode } = opts;
-  function toggleColorMode() {
-    colorMode.value = darkLightMode.value === "dark" ? "light" : "dark";
-    if (typeof window === "undefined") {
-      return;
-    }
-    window?.localStorage?.setItem("colorMode", colorMode.value);
-  }
-  function setColorMode(value) {
-    colorMode.value = value;
-    if (typeof window === "undefined") {
-      return;
-    }
-    window?.localStorage?.setItem("colorMode", colorMode.value);
-  }
-  function getSystemModePreference() {
-    if (typeof window === "undefined") {
-      return "light";
-    }
-    if (typeof window?.matchMedia !== "function") {
-      return "dark";
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { z } from 'zod';
+const colorMode = ref('dark');
+const colorModeSchema = z.enum(['dark', 'light', 'system']).optional().catch(undefined);
+/**
+ * A composable hook that provides color mode (dark/light) functionality.
+ */
+export function useColorMode(opts = {}) {
+    const { initialColorMode = 'system', overrideColorMode } = opts;
+    /** Toggles the color mode between light and dark. */
+    function toggleColorMode() {
+        // Update state
+        colorMode.value = darkLightMode.value === 'dark' ? 'light' : 'dark';
+        // Store in local storage
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window?.localStorage?.setItem('colorMode', colorMode.value);
     }
-    return window?.matchMedia("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
-  }
-  const darkLightMode = computed({
-    get: () => colorMode.value === "system" ? getSystemModePreference() : colorMode.value,
-    set: setColorMode
-  });
-  const isDarkMode = computed({
-    get: () => darkLightMode.value === "dark",
-    set: (value) => setColorMode(value ? "dark" : "light")
-  });
-  function applyColorMode(mode) {
-    if (typeof document === "undefined" || typeof window === "undefined") {
-      return;
+    /** Sets the color mode to the specified value. */
+    function setColorMode(value) {
+        colorMode.value = value;
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window?.localStorage?.setItem('colorMode', colorMode.value);
     }
-    const classMode = overrideColorMode ?? (mode === "system" ? getSystemModePreference() : mode);
-    if (classMode === "dark") {
-      document.body.classList.add("dark-mode");
-      document.body.classList.remove("light-mode");
-    } else {
-      document.body.classList.add("light-mode");
-      document.body.classList.remove("dark-mode");
+    /** Gets the system mode preference. */
+    function getSystemModePreference() {
+        if (typeof window === 'undefined') {
+            return 'light';
+        }
+        if (typeof window?.matchMedia !== 'function') {
+            return 'dark';
+        }
+        return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light';
     }
-  }
-  const savedColorMode = colorModeSchema.parse(
-    typeof window !== "undefined" ? window?.localStorage?.getItem("colorMode") : "system"
-  );
-  colorMode.value = overrideColorMode ?? savedColorMode ?? initialColorMode;
-  watch(colorMode, applyColorMode, { immediate: true });
-  const handleChange = () => colorMode.value === "system" && applyColorMode("system");
-  const mediaQuery = ref(null);
-  onMounted(() => {
-    if (typeof window !== "undefined" && typeof window?.matchMedia === "function") {
-      mediaQuery.value = window.matchMedia("(prefers-color-scheme: dark)");
-      mediaQuery.value?.addEventListener("change", handleChange);
+    /** Writable computed ref for dark/light mode with system preference applied */
+    const darkLightMode = computed({
+        get: () => (colorMode.value === 'system' ? getSystemModePreference() : colorMode.value),
+        set: setColorMode,
+    });
+    /** Writable computed ref for whether the current color mode is dark */
+    const isDarkMode = computed({
+        get: () => darkLightMode.value === 'dark',
+        set: (value) => setColorMode(value ? 'dark' : 'light'),
+    });
+    /** Applies the appropriate color mode class to the body. */
+    function applyColorMode(mode) {
+        if (typeof document === 'undefined' || typeof window === 'undefined') {
+            return;
+        }
+        const classMode = overrideColorMode ?? (mode === 'system' ? getSystemModePreference() : mode);
+        if (classMode === 'dark') {
+            document.body.classList.add('dark-mode');
+            document.body.classList.remove('light-mode');
+        }
+        else {
+            document.body.classList.add('light-mode');
+            document.body.classList.remove('dark-mode');
+        }
     }
-  });
-  onUnmounted(() => {
-    mediaQuery.value?.removeEventListener("change", handleChange);
-  });
-  return {
-    /** The current color mode (writable). */
-    colorMode: computed({
-      get: () => colorMode.value,
-      set: setColorMode
-    }),
-    /** The computed dark/light mode (writable). */
-    darkLightMode,
-    /** Whether the current color mode is dark (writable). */
-    isDarkMode,
-    /** Toggles the color mode between light and dark. */
-    toggleColorMode,
-    /** Sets the color mode to the specified value. */
-    setColorMode,
-    /** Gets the system mode preference. */
-    getSystemModePreference
-  };
+    // Priority of initial values is: forceDarkModeState -> LocalStorage -> App Config -> initial / Fallback
+    const savedColorMode = colorModeSchema.parse(typeof window !== 'undefined' ? window?.localStorage?.getItem('colorMode') : 'system');
+    colorMode.value = overrideColorMode ?? savedColorMode ?? initialColorMode;
+    // Watch for colorMode changes and update the body class
+    watch(colorMode, applyColorMode, { immediate: true });
+    const handleChange = () => colorMode.value === 'system' && applyColorMode('system');
+    const mediaQuery = ref(null);
+    // Listen to system preference changes
+    onMounted(() => {
+        if (typeof window !== 'undefined' && typeof window?.matchMedia === 'function') {
+            mediaQuery.value = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.value?.addEventListener('change', handleChange);
+        }
+    });
+    onUnmounted(() => {
+        mediaQuery.value?.removeEventListener('change', handleChange);
+    });
+    return {
+        /** The current color mode (writable). */
+        colorMode: computed({
+            get: () => colorMode.value,
+            set: setColorMode,
+        }),
+        /** The computed dark/light mode (writable). */
+        darkLightMode,
+        /** Whether the current color mode is dark (writable). */
+        isDarkMode,
+        /** Toggles the color mode between light and dark. */
+        toggleColorMode,
+        /** Sets the color mode to the specified value. */
+        setColorMode,
+        /** Gets the system mode preference. */
+        getSystemModePreference,
+    };
 }
-export {
-  useColorMode
-};
-//# sourceMappingURL=useColorMode.js.map

package/package.json

@@ -10,9 +10,9 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/use-hooks"
   },
-  "version": "0.3.7",
+  "version": "0.4.1",
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "type": "module",
   "exports": {
@@ -47,20 +47,15 @@
     "tailwind-merge": "3.4.0",
     "vue": "^3.5.26",
     "zod": "^4.3.5",
-    "@scalar/use-toasts": "0.9.1"
+    "@scalar/use-toasts": "0.10.1"
   },
   "devDependencies": {
     "@vue/test-utils": "2.4.6",
-    "jsdom": "27.4.0",
-    "vite": "^7.3.1",
-    "@scalar/build-tooling": "0.4.1"
+    "jsdom": "27.4.0"
   },
   "scripts": {
-    "build": "scalar-build-esbuild",
-    "lint:check": "scalar-lint-check",
-    "lint:fix": "scalar-lint-fix",
+    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "test": "vitest",
-    "types:build": "scalar-types-build-vue",
-    "types:check": "scalar-types-check-vue"
+    "types:check": "vue-tsc --noEmit"
   }
 }

package/dist/useBindCx/cva.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useBindCx/cva.ts"],
-  "sourcesContent": ["import { defineConfig } from 'cva'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n/**\n * Tailwind Merge Config\n *\n * By default tailwind merge only knows about the default tailwind classes\n * this is because it does not load in the tailwind config at runtime (perf reasons)\n * we must specify any custom classes if they are getting overwritten\n *\n * https://github.com/dcastil/tailwind-merge/blob/v3.4.0/docs/configuration.md#class-groups\n */\nconst tw = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': ['text-3xs', 'text-xxs'],\n      'font-weight': ['font-sidebar', 'font-sidebar-active'],\n    },\n  },\n})\n\n/**\n * CVA Config\n *\n * https://beta.cva.style/api-reference/#defineconfig\n */\nconst { cva, cx, compose } = defineConfig({\n  hooks: {\n    onComplete: (className) => tw(className),\n  },\n})\n\nexport { cva, cx, compose, tw }\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AAWpC,MAAM,KAAK,oBAAoB;AAAA,EAC7B,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,YAAY,UAAU;AAAA,MACpC,eAAe,CAAC,gBAAgB,qBAAqB;AAAA,IACvD;AAAA,EACF;AACF,CAAC;AAOD,MAAM,EAAE,KAAK,IAAI,QAAQ,IAAI,aAAa;AAAA,EACxC,OAAO;AAAA,IACL,YAAY,CAAC,cAAc,GAAG,SAAS;AAAA,EACzC;AACF,CAAC;",
-  "names": []
-}

package/dist/useBindCx/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useBindCx/index.ts"],
-  "sourcesContent": ["export { compose, cva, cx, tw } from './cva'\nexport { useBindCx } from './useBindCx'\n"],
-  "mappings": "AAAA,SAAS,SAAS,KAAK,IAAI,UAAU;AACrC,SAAS,iBAAiB;",
-  "names": []
-}

package/dist/useBindCx/useBindCx.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useBindCx/useBindCx.ts"],
-  "sourcesContent": ["import type { CXOptions } from 'cva'\nimport { type StyleValue, computed, useAttrs } from 'vue'\n\nimport { cx } from './cva'\n\n/** Utility type for class names */\ntype ClassValue = CXOptions[number]\n\n/**\n * Provides a wrapper around the `cx` function that merges the\n * component's class attribute with the provided classes and binds the\n * remaining attributes\n *\n * @see https://beta.cva.style/api-reference#cx\n *\n * @example\n * <script setup>\n * import { useBindCx, cva } from '@scalar/components'\n *\n * defineProps<{ active?: boolean }>()\n *\n * // Important: disable inheritance of attributes\n * defineOptions({ inheritAttrs: false })\n *\n * const { cx } = useBindCx()\n *\n * const variants = cva({\n *   base: 'border rounded p-2 bg-b-1',\n *   variants: { active: { true: 'bg-b-2' } },\n * })\n * </script>\n * <template>\n *   <div v-bind=\"cx(variants({ active }))\">MockComponent</div>\n * </template>\n */\nexport function useBindCx() {\n  const attrs = useAttrs()\n\n  const destructured = computed<{\n    class: ClassValue\n    style: StyleValue\n    rest: { [key: string]: unknown }\n  }>(() => {\n    const { class: className, style, ...rest } = attrs\n    return { class: className || '', style: style as StyleValue, rest }\n  })\n\n  function bindCx(...args: CXOptions): {\n    /** The merged class attribute */\n    class: string\n    /** The remaining attributes */\n    [key: string]: any\n  } {\n    return {\n      class: cx(...args, destructured.value.class),\n      style: destructured.value.style,\n      ...destructured.value.rest,\n    }\n  }\n\n  function bindClassAndStyle(...args: CXOptions): {\n    /** The merged class attribute */\n    class: string\n    style: StyleValue\n  } {\n    return { class: cx(...args, destructured.value.class), style: destructured.value.style }\n  }\n\n  return {\n    /**\n     * Provides a wrapper around the `cx` function that merges the\n     * component's class attribute with the provided classes and binds the\n     * remaining attributes\n     *\n     * @example\n     * ```html\n     * <script setup>\n     * ...\n     * const { cx } = useBindCx()\n     * </script>\n     * <template>\n     *   <div v-bind=\"cx(...)\">...</div>\n     * </template>\n     * ```\n     */\n    cx: bindCx,\n    /**\n     * Provides a wrapper around the `cx` function that merges the\n     * component's class attribute with the provided classes and binds the\n     * style attribute  but **does not** bind any other attributes.\n     *\n     * Typically used in conjunction with `otherAttrs` to apply the stylistic\n     * attributes to a styled wrapper element, but apply the remaining\n     * attributes to an internal semantic element like an `<input>`.\n     *\n     * @example\n     * ```html\n     * <script setup>\n     * ...\n     * const { stylingAttrsCx, otherAttrs } = useBindCx()\n     * </script>\n     * <template>\n     *   <!-- Bind the class and style attributes to a wrapper element -->\n     *   <div v-bind=\"stylingAttrsCx(...)\">\n     *     ...\n     *     <!-- Bind the other attributes to a semantic internal element -->\n     *     <input v-bind=\"otherAttrs\" />\n     *   </div>\n     * </template>\n     * ```\n     */\n    stylingAttrsCx: bindClassAndStyle,\n    /**\n     * The remaining attributes that **are not** the class or style attributes\n     * of the component.\n     *\n     * Typically used in conjunction with `stylingAttrsCx` to apply the stylistic\n     * attributes to a styled wrapper element, but apply the remaining\n     * attributes to an internal semantic element like an `<input>`.\n     *\n     * @example\n     * ```html\n     * <script setup>\n     * ...\n     * const { stylingAttrsCx, otherAttrs } = useBindCx()\n     * </script>\n     * <template>\n     *   <!-- Bind the class and style attributes to a wrapper element -->\n     *   <div v-bind=\"stylingAttrsCx(...)\">\n     *     ...\n     *     <!-- Bind the other attributes to a semantic internal element -->\n     *     <input v-bind=\"otherAttrs\" />\n     *   </div>\n     * </template>\n     */\n    otherAttrs: computed(() => destructured.value.rest),\n  }\n}\n"],
-  "mappings": "AACA,SAA0B,UAAU,gBAAgB;AAEpD,SAAS,UAAU;AAgCZ,SAAS,YAAY;AAC1B,QAAM,QAAQ,SAAS;AAEvB,QAAM,eAAe,SAIlB,MAAM;AACP,UAAM,EAAE,OAAO,WAAW,OAAO,GAAG,KAAK,IAAI;AAC7C,WAAO,EAAE,OAAO,aAAa,IAAI,OAA4B,KAAK;AAAA,EACpE,CAAC;AAED,WAAS,UAAU,MAKjB;AACA,WAAO;AAAA,MACL,OAAO,GAAG,GAAG,MAAM,aAAa,MAAM,KAAK;AAAA,MAC3C,OAAO,aAAa,MAAM;AAAA,MAC1B,GAAG,aAAa,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,WAAS,qBAAqB,MAI5B;AACA,WAAO,EAAE,OAAO,GAAG,GAAG,MAAM,aAAa,MAAM,KAAK,GAAG,OAAO,aAAa,MAAM,MAAM;AAAA,EACzF;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBL,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0BJ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBhB,YAAY,SAAS,MAAM,aAAa,MAAM,IAAI;AAAA,EACpD;AACF;",
-  "names": []
-}

package/dist/useBreakpoints/constants.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useBreakpoints/constants.ts"],
-  "sourcesContent": ["/**\n * Breakpoints for useBreakpoints hook\n *\n * Should match the tailwind breakpoints in \\@scalar/themes\n */\nexport const screens = {\n  /** Mobile */\n  xs: '(min-width: 400px)',\n  /** Large Mobile */\n  sm: '(min-width: 600px)',\n  /** Tablet */\n  md: '(min-width: 800px)',\n  /** Desktop */\n  lg: '(min-width: 1000px)',\n  /** Ultrawide and larger */\n  xl: '(min-width: 1200px)',\n  /** Custom breakpoint for zoomed in screens (should trigger at about 200% zoom) */\n  zoomed: '(max-width: 720px) and (max-height: 480px)',\n}\n"],
-  "mappings": "AAKO,MAAM,UAAU;AAAA;AAAA,EAErB,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,QAAQ;AACV;",
-  "names": []
-}

package/dist/useBreakpoints/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useBreakpoints/index.ts"],
-  "sourcesContent": ["export { screens } from './constants'\nexport { useBreakpoints } from './useBreakpoints'\n"],
-  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,sBAAsB;",
-  "names": []
-}

package/dist/useBreakpoints/useBreakpoints.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useBreakpoints/useBreakpoints.ts"],
-  "sourcesContent": ["import { useMediaQuery } from '@vueuse/core'\nimport { type Ref, computed, unref } from 'vue'\n\nimport { screens } from './constants'\n\ntype Screen = keyof typeof screens\n\n/**\n * Exposes Tailwind CSS breakpoints as reactive media queries\n *\n * **Warning:** This hook is not a replacement for Tailwind CSS breakpoints. Using breakpoints in Javascript can cause issues with Server Side Rendering (SSR) and the Tailwind CSS breakpoints should be used when possible.\n */\nexport function useBreakpoints() {\n  const mediaQueries: Record<Screen, Ref<boolean>> = {\n    xs: useMediaQuery(screens.xs),\n    sm: useMediaQuery(screens.sm),\n    md: useMediaQuery(screens.md),\n    lg: useMediaQuery(screens.lg),\n    xl: useMediaQuery(screens.xl),\n    zoomed: useMediaQuery(screens.zoomed),\n  }\n\n  // We make the breakpoints a computed object so that we can use them in templates as `breakpoints.x` instead of `breakpoints.x.value`\n  const breakpoints = computed(\n    () =>\n      Object.fromEntries(\n        Object.entries(mediaQueries).map(([breakpoint, queryRef]) => [breakpoint, unref(queryRef)]),\n      ) as Record<Screen, boolean>,\n  )\n\n  return {\n    /** The screen sizes defined in the preset */\n    screens,\n    /** Reactive media queries for each of the screen sizes */\n    mediaQueries,\n    /** The breakpoints as reactive media queries */\n    breakpoints,\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAC9B,SAAmB,UAAU,aAAa;AAE1C,SAAS,eAAe;AASjB,SAAS,iBAAiB;AAC/B,QAAM,eAA6C;AAAA,IACjD,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,IAAI,cAAc,QAAQ,EAAE;AAAA,IAC5B,QAAQ,cAAc,QAAQ,MAAM;AAAA,EACtC;AAGA,QAAM,cAAc;AAAA,IAClB,MACE,OAAO;AAAA,MACL,OAAO,QAAQ,YAAY,EAAE,IAAI,CAAC,CAAC,YAAY,QAAQ,MAAM,CAAC,YAAY,MAAM,QAAQ,CAAC,CAAC;AAAA,IAC5F;AAAA,EACJ;AAEA,SAAO;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AACF;",
-  "names": []
-}

package/dist/useClipboard/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useClipboard/index.ts"],
-  "sourcesContent": ["export { useClipboard } from './useClipboard'\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;",
-  "names": []
-}

package/dist/useClipboard/types.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/useClipboard/useClipboard.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useClipboard/useClipboard.ts"],
-  "sourcesContent": ["import { useToasts } from '@scalar/use-toasts'\n\nimport type { UseClipboardOptions } from './types'\n\n/** Safely serialize a value to a string */\nconst serializeValue = (value: unknown) => {\n  if (value === undefined) {\n    return 'undefined'\n  }\n  if (typeof value === 'string') {\n    return value\n  }\n  return JSON.stringify(value)\n}\n\n/**\n * A hook for interacting with the clipboard\n */\nexport function useClipboard(opts: UseClipboardOptions = {}) {\n  const { notify = (m) => toast(m, 'info') } = opts\n  const { toast } = useToasts()\n\n  async function copyToClipboard(value: unknown) {\n    try {\n      const serialized = serializeValue(value)\n      await navigator.clipboard.writeText(serialized)\n      notify('Copied to the clipboard')\n    } catch (e) {\n      const error = e as Error\n      console.error(error.message)\n      notify('Failed to copy to clipboard')\n    }\n  }\n\n  return { copyToClipboard }\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAK1B,MAAM,iBAAiB,CAAC,UAAmB;AACzC,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AACA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO,KAAK,UAAU,KAAK;AAC7B;AAKO,SAAS,aAAa,OAA4B,CAAC,GAAG;AAC3D,QAAM,EAAE,SAAS,CAAC,MAAM,MAAM,GAAG,MAAM,EAAE,IAAI;AAC7C,QAAM,EAAE,MAAM,IAAI,UAAU;AAE5B,iBAAe,gBAAgB,OAAgB;AAC7C,QAAI;AACF,YAAM,aAAa,eAAe,KAAK;AACvC,YAAM,UAAU,UAAU,UAAU,UAAU;AAC9C,aAAO,yBAAyB;AAAA,IAClC,SAAS,GAAG;AACV,YAAM,QAAQ;AACd,cAAQ,MAAM,MAAM,OAAO;AAC3B,aAAO,6BAA6B;AAAA,IACtC;AAAA,EACF;AAEA,SAAO,EAAE,gBAAgB;AAC3B;",
-  "names": []
-}

package/dist/useColorMode/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useColorMode/index.ts"],
-  "sourcesContent": ["export { useColorMode } from './useColorMode'\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;",
-  "names": []
-}

package/dist/useColorMode/useColorMode.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/useColorMode/useColorMode.ts"],
-  "sourcesContent": ["import { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { z } from 'zod'\n\nconst colorMode = ref<ColorMode>('dark')\n\nconst colorModeSchema = z.enum(['dark', 'light', 'system']).optional().catch(undefined)\n\n/** Possible color modes */\ntype ColorMode = 'light' | 'dark' | 'system'\n\n/** Specific dark/light mode */\ntype DarkLightMode = 'light' | 'dark'\n\n/**\n * A composable hook that provides color mode (dark/light) functionality.\n */\nexport function useColorMode(\n  opts: {\n    /** The initial color mode to use */\n    initialColorMode?: ColorMode\n    /** Override the color mode */\n    overrideColorMode?: ColorMode\n  } = {},\n) {\n  const { initialColorMode = 'system', overrideColorMode } = opts\n\n  /** Toggles the color mode between light and dark. */\n  function toggleColorMode() {\n    // Update state\n    colorMode.value = darkLightMode.value === 'dark' ? 'light' : 'dark'\n\n    // Store in local storage\n    if (typeof window === 'undefined') {\n      return\n    }\n    window?.localStorage?.setItem('colorMode', colorMode.value)\n  }\n\n  /** Sets the color mode to the specified value. */\n  function setColorMode(value: ColorMode) {\n    colorMode.value = value\n    if (typeof window === 'undefined') {\n      return\n    }\n    window?.localStorage?.setItem('colorMode', colorMode.value)\n  }\n\n  /** Gets the system mode preference. */\n  function getSystemModePreference(): DarkLightMode {\n    if (typeof window === 'undefined') {\n      return 'light'\n    }\n    if (typeof window?.matchMedia !== 'function') {\n      return 'dark'\n    }\n\n    return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'\n  }\n\n  /** Writable computed ref for dark/light mode with system preference applied */\n  const darkLightMode = computed<DarkLightMode>({\n    get: () => (colorMode.value === 'system' ? getSystemModePreference() : colorMode.value),\n    set: setColorMode,\n  })\n\n  /** Writable computed ref for whether the current color mode is dark */\n  const isDarkMode = computed<boolean>({\n    get: () => darkLightMode.value === 'dark',\n    set: (value) => setColorMode(value ? 'dark' : 'light'),\n  })\n\n  /** Applies the appropriate color mode class to the body. */\n  function applyColorMode(mode: ColorMode): void {\n    if (typeof document === 'undefined' || typeof window === 'undefined') {\n      return\n    }\n\n    const classMode = overrideColorMode ?? (mode === 'system' ? getSystemModePreference() : mode)\n\n    if (classMode === 'dark') {\n      document.body.classList.add('dark-mode')\n      document.body.classList.remove('light-mode')\n    } else {\n      document.body.classList.add('light-mode')\n      document.body.classList.remove('dark-mode')\n    }\n  }\n\n  // Priority of initial values is: forceDarkModeState -> LocalStorage -> App Config -> initial / Fallback\n  const savedColorMode = colorModeSchema.parse(\n    typeof window !== 'undefined' ? window?.localStorage?.getItem('colorMode') : 'system',\n  )\n  colorMode.value = overrideColorMode ?? savedColorMode ?? initialColorMode\n\n  // Watch for colorMode changes and update the body class\n  watch(colorMode, applyColorMode, { immediate: true })\n\n  const handleChange = () => colorMode.value === 'system' && applyColorMode('system')\n\n  const mediaQuery = ref<MediaQueryList | null>(null)\n  // Listen to system preference changes\n  onMounted(() => {\n    if (typeof window !== 'undefined' && typeof window?.matchMedia === 'function') {\n      mediaQuery.value = window.matchMedia('(prefers-color-scheme: dark)')\n      mediaQuery.value?.addEventListener('change', handleChange)\n    }\n  })\n\n  onUnmounted(() => {\n    mediaQuery.value?.removeEventListener('change', handleChange)\n  })\n\n  return {\n    /** The current color mode (writable). */\n    colorMode: computed({\n      get: () => colorMode.value,\n      set: setColorMode,\n    }),\n    /** The computed dark/light mode (writable). */\n    darkLightMode,\n    /** Whether the current color mode is dark (writable). */\n    isDarkMode,\n    /** Toggles the color mode between light and dark. */\n    toggleColorMode,\n    /** Sets the color mode to the specified value. */\n    setColorMode,\n    /** Gets the system mode preference. */\n    getSystemModePreference,\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,UAAU,WAAW,aAAa,KAAK,aAAa;AAC7D,SAAS,SAAS;AAElB,MAAM,YAAY,IAAe,MAAM;AAEvC,MAAM,kBAAkB,EAAE,KAAK,CAAC,QAAQ,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,MAAS;AAW/E,SAAS,aACd,OAKI,CAAC,GACL;AACA,QAAM,EAAE,mBAAmB,UAAU,kBAAkB,IAAI;AAG3D,WAAS,kBAAkB;AAEzB,cAAU,QAAQ,cAAc,UAAU,SAAS,UAAU;AAG7D,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,aAAa,OAAkB;AACtC,cAAU,QAAQ;AAClB,QAAI,OAAO,WAAW,aAAa;AACjC;AAAA,IACF;AACA,YAAQ,cAAc,QAAQ,aAAa,UAAU,KAAK;AAAA,EAC5D;AAGA,WAAS,0BAAyC;AAChD,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,QAAI,OAAO,QAAQ,eAAe,YAAY;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO,QAAQ,WAAW,8BAA8B,GAAG,UAAU,SAAS;AAAA,EAChF;AAGA,QAAM,gBAAgB,SAAwB;AAAA,IAC5C,KAAK,MAAO,UAAU,UAAU,WAAW,wBAAwB,IAAI,UAAU;AAAA,IACjF,KAAK;AAAA,EACP,CAAC;AAGD,QAAM,aAAa,SAAkB;AAAA,IACnC,KAAK,MAAM,cAAc,UAAU;AAAA,IACnC,KAAK,CAAC,UAAU,aAAa,QAAQ,SAAS,OAAO;AAAA,EACvD,CAAC;AAGD,WAAS,eAAe,MAAuB;AAC7C,QAAI,OAAO,aAAa,eAAe,OAAO,WAAW,aAAa;AACpE;AAAA,IACF;AAEA,UAAM,YAAY,sBAAsB,SAAS,WAAW,wBAAwB,IAAI;AAExF,QAAI,cAAc,QAAQ;AACxB,eAAS,KAAK,UAAU,IAAI,WAAW;AACvC,eAAS,KAAK,UAAU,OAAO,YAAY;AAAA,IAC7C,OAAO;AACL,eAAS,KAAK,UAAU,IAAI,YAAY;AACxC,eAAS,KAAK,UAAU,OAAO,WAAW;AAAA,IAC5C;AAAA,EACF;AAGA,QAAM,iBAAiB,gBAAgB;AAAA,IACrC,OAAO,WAAW,cAAc,QAAQ,cAAc,QAAQ,WAAW,IAAI;AAAA,EAC/E;AACA,YAAU,QAAQ,qBAAqB,kBAAkB;AAGzD,QAAM,WAAW,gBAAgB,EAAE,WAAW,KAAK,CAAC;AAEpD,QAAM,eAAe,MAAM,UAAU,UAAU,YAAY,eAAe,QAAQ;AAElF,QAAM,aAAa,IAA2B,IAAI;AAElD,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,OAAO,QAAQ,eAAe,YAAY;AAC7E,iBAAW,QAAQ,OAAO,WAAW,8BAA8B;AACnE,iBAAW,OAAO,iBAAiB,UAAU,YAAY;AAAA,IAC3D;AAAA,EACF,CAAC;AAED,cAAY,MAAM;AAChB,eAAW,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAC9D,CAAC;AAED,SAAO;AAAA;AAAA,IAEL,WAAW,SAAS;AAAA,MAClB,KAAK,MAAM,UAAU;AAAA,MACrB,KAAK;AAAA,IACP,CAAC;AAAA;AAAA,IAED;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AACF;",
-  "names": []
-}