@scalar/components 0.20.11 → 0.21.0

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxInput.vue.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Input component\n *\n * A wrapper around the HTML input element for either checkboxes or radio buttons.\n *\n * @example\n *  <ScalarCheckboxInput v-model=\"model\" type=\"checkbox\">\n *    Option Label\n *  </ScalarCheckboxInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarCheckbox from './ScalarCheckbox.vue'\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    type?: ScalarCheckboxType\n    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */\n    indeterminate?: boolean\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <ScalarCheckbox\n      class=\"shrink-0\"\n      :indeterminate=\"props.indeterminate && props.type === 'checkbox'\"\n      :selected=\"model\"\n      :type=\"props.type\" />\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      class=\"sr-only\"\n      :type=\"props.type\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue.script.js

@@ -0,0 +1,55 @@
+import ScalarCheckbox_default from "./ScalarCheckbox.vue.js";
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, vModelDynamic, withCtx, withDirectives } from "vue";
+//#region src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex-1 text-left min-w-0 truncate" };
+var _hoisted_2 = ["type"];
+var ScalarCheckboxInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCheckboxInput",
+	props: /* @__PURE__ */ mergeModels({
+		type: { default: "checkbox" },
+		indeterminate: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "label" }, unref(stylingAttrsCx)("cursor-pointer gap-2 hover:bg-b-2", { "text-c-1": model.value })), {
+				default: withCtx(() => [
+					createVNode(ScalarCheckbox_default, {
+						class: "shrink-0",
+						indeterminate: props.indeterminate && props.type === "checkbox",
+						selected: model.value,
+						type: props.type
+					}, null, 8, [
+						"indeterminate",
+						"selected",
+						"type"
+					]),
+					createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]),
+					withDirectives(createElementVNode("input", mergeProps({
+						ref: "inputEl",
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+						class: "sr-only",
+						type: props.type
+					}, unref(otherAttrs)), null, 16, _hoisted_2), [[vModelDynamic, model.value]])
+				]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCheckboxInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCheckboxInput.vue.script.js.map

package/dist/components/ScalarCheckboxInput/ScalarCheckboxInput.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Input component\n *\n * A wrapper around the HTML input element for either checkboxes or radio buttons.\n *\n * @example\n *  <ScalarCheckboxInput v-model=\"model\" type=\"checkbox\">\n *    Option Label\n *  </ScalarCheckboxInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarCheckbox from './ScalarCheckbox.vue'\nimport type { ScalarCheckboxType } from './types'\n\nconst props = withDefaults(\n  defineProps<{\n    type?: ScalarCheckboxType\n    /** When true and the control is unchecked, the native checkbox is indeterminate (partial selection). */\n    indeterminate?: boolean\n  }>(),\n  {\n    type: 'checkbox',\n    indeterminate: false,\n  },\n)\n\nconst model = defineModel<boolean>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', { 'text-c-1': model })\n    \">\n    <ScalarCheckbox\n      class=\"shrink-0\"\n      :indeterminate=\"props.indeterminate && props.type === 'checkbox'\"\n      :selected=\"model\"\n      :type=\"props.type\" />\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <input\n      ref=\"inputEl\"\n      v-model=\"model\"\n      class=\"sr-only\"\n      :type=\"props.type\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAYd,MAAM,QAAQ,SAAoB,SAAA,aAAC;EAGnC,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,YAiBkB,MAAA,wBAAA,EAjBlB,WAiBkB,EAhBhB,IAAG,SAAO,EACK,MAAA,eAAc,CAAA,qCAAA,EAAA,YAAoD,MAAA,OAAK,CAAA,CAAA,EAAA;2BAO/D;KAJvB,YAIuB,wBAAA;MAHrB,OAAM;MACL,eAAe,MAAM,iBAAiB,MAAM,SAAI;MAChD,UAAU,MAAA;MACV,MAAM,MAAM;;;;;;KACf,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;oBACvD,mBAKwB,SALxB,WAKwB;MAJtB,KAAI;yEACU,QAAA;MACd,OAAM;MACL,MAAM,MAAM;QACL,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,WAAA,EAAA,CAAA,CAAA,eAHT,MAAA,MAAK,CAAA,CAAA"}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.js

@@ -0,0 +1,7 @@
+import ScalarCheckboxRadioGroup_vue_vue_type_script_setup_true_lang_default from "./ScalarCheckboxRadioGroup.vue.script.js";
+//#region src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue
+var ScalarCheckboxRadioGroup_default = ScalarCheckboxRadioGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarCheckboxRadioGroup_default as default };
+
+//# sourceMappingURL=ScalarCheckboxRadioGroup.vue.js.map

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxRadioGroup.vue.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Radio Group component\n *\n * A group of radio inputs allowing for single selection.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption>()\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.value === option.value\"\n      :name\n      type=\"radio\"\n      :value=\"option.value\"\n      @update:modelValue=\"(checked) => (model = checked ? option : undefined)\">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.script.js

@@ -0,0 +1,42 @@
+import ScalarFormInputGroup_default from "../ScalarForm/ScalarFormInputGroup.vue.js";
+import ScalarCheckboxInput_default from "./ScalarCheckboxInput.vue.js";
+import { Fragment, createBlock, createElementBlock, createTextVNode, defineComponent, mergeModels, openBlock, renderList, toDisplayString, unref, useId, useModel, withCtx } from "vue";
+var ScalarCheckboxRadioGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarCheckboxRadioGroup",
+	props: /* @__PURE__ */ mergeModels({ options: { default: () => [] } }, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const name = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInputGroup_default), null, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+					return openBlock(), createBlock(ScalarCheckboxInput_default, {
+						key: option.value,
+						modelValue: model.value?.value === option.value,
+						name: unref(name),
+						type: "radio",
+						value: option.value,
+						"onUpdate:modelValue": (checked) => model.value = checked ? option : void 0
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1)]),
+						_: 2
+					}, 1032, [
+						"modelValue",
+						"name",
+						"value",
+						"onUpdate:modelValue"
+					]);
+				}), 128))]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { ScalarCheckboxRadioGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCheckboxRadioGroup.vue.script.js.map

package/dist/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCheckboxRadioGroup.vue.script.js","names":[],"sources":["../../../src/components/ScalarCheckboxInput/ScalarCheckboxRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Checkbox Radio Group component\n *\n * A group of radio inputs allowing for single selection.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarCheckboxInput from './ScalarCheckboxInput.vue'\nimport type { ScalarCheckboxOption } from './types'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption>()\n\nconst name = useId()\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarCheckboxInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.value === option.value\"\n      :name\n      type=\"radio\"\n      :value=\"option.value\"\n      @update:modelValue=\"(checked) => (model = checked ? option : undefined)\">\n      {{ option.label }}\n    </ScalarCheckboxInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAiC,SAAA,aAAC;EAEhD,MAAM,OAAO,OAAM;;uBAGjB,YAWuB,MAAA,6BAAA,EAAA,MAAA;2BATM,EAAA,UAAA,KAAA,EAD3B,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;yBADf,YASsB,6BAAA;MAPnB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,UAAU,OAAO;MACpC,MAAA,MAAA,KAAI;MACL,MAAK;MACJ,OAAO,OAAO;MACd,wBAAoB,YAAa,MAAA,QAAQ,UAAU,SAAS,KAAA;;6BAC3C,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/ScalarCheckboxInput/index.d.ts

@@ -1,6 +1,6 @@
-export { default as ScalarCheckbox } from './ScalarCheckbox.vue';
-export { default as ScalarCheckboxGroup } from './ScalarCheckboxGroup.vue';
-export { default as ScalarCheckboxInput } from './ScalarCheckboxInput.vue';
-export { default as ScalarCheckboxRadioGroup } from './ScalarCheckboxRadioGroup.vue';
+export { default as ScalarCheckbox } from './ScalarCheckbox.vue.js';
+export { default as ScalarCheckboxGroup } from './ScalarCheckboxGroup.vue.js';
+export { default as ScalarCheckboxInput } from './ScalarCheckboxInput.vue.js';
+export { default as ScalarCheckboxRadioGroup } from './ScalarCheckboxRadioGroup.vue.js';
 export type { ScalarCheckboxOption, ScalarCheckboxType } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue.js

@@ -0,0 +1,8 @@
+import ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default from "./ScalarCodeBlock.vue.script.js";
+/* empty css                              */
+//#region src/components/ScalarCodeBlock/ScalarCodeBlock.vue
+var ScalarCodeBlock_default = ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarCodeBlock_default as default };
+
+//# sourceMappingURL=ScalarCodeBlock.vue.js.map

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCodeBlock.vue.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <div\n      tabindex=\"0\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 min-h-0 min-w-0 flex-1\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"copy && isContentValid\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-[calc(10px+0.5lh)] -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :showLang=\"!isOneLine\"\n      :lang=\"lang\"\n      :aria-controls=\"id\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue.script.js

@@ -0,0 +1,82 @@
+import ScalarCopyBackdrop_default from "../ScalarCopy/ScalarCopyBackdrop.vue.js";
+import ScalarCodeBlockCopy_default from "./ScalarCodeBlockCopy.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, unref, useId, withCtx } from "vue";
+import { standardLanguages, syntaxHighlight } from "@scalar/code-highlight";
+import { prettyPrintJson } from "@scalar/helpers/json/pretty-print-json";
+//#region src/components/ScalarCodeBlock/ScalarCodeBlock.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	tabindex: "0",
+	class: "custom-scroll overflow-x-auto p-2 -outline-offset-2 min-h-0 min-w-0 flex-1"
+};
+var _hoisted_2 = ["id", "innerHTML"];
+/**
+* Uses highlight.js for syntax highlighting
+*
+* Requires at least one of content or prettyPrintedContent
+*/
+var ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCodeBlock",
+	props: {
+		content: {},
+		prettyPrintedContent: {},
+		lang: { default: "plaintext" },
+		lineNumbers: {
+			type: Boolean,
+			default: false
+		},
+		hideCredentials: {},
+		copy: {
+			type: [String, Boolean],
+			default: "hover"
+		}
+	},
+	setup(__props) {
+		/** Base id for the code block */
+		const id = useId();
+		/** Formatted the content into an indented json string */
+		const prettyContent = computed(() => __props.prettyPrintedContent || prettyPrintJson(__props.content ?? ""));
+		const highlightedCode = computed(() => {
+			return syntaxHighlight(prettyContent.value, {
+				lang: __props.lang.trim(),
+				languages: standardLanguages,
+				lineNumbers: __props.lineNumbers,
+				maskCredentials: __props.hideCredentials
+			}).slice(5, -6);
+		});
+		/** Determine if the content is a single line */
+		const isOneLine = computed(() => !prettyContent.value.includes("\n"));
+		const isContentValid = computed(() => {
+			return prettyContent.value !== null && prettyContent.value !== "null" && prettyContent.value !== "404 Not Found";
+		});
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-code-block group/code-block flex flex-col", "relative bg-b-1 min-h-0 min-w-0 focus-visible:outline"))), [createElementVNode("div", _hoisted_1, [createElementVNode("pre", {
+				id: unref(id),
+				class: "m-0 bg-transparent text-nowrap whitespace-pre w-fit",
+				innerHTML: highlightedCode.value
+			}, null, 8, _hoisted_2)]), __props.copy && isContentValid.value ? (openBlock(), createBlock(unref(ScalarCodeBlockCopy_default), {
+				key: 0,
+				class: normalizeClass(["scalar-code-copy absolute", [isOneLine.value ? "top-[calc(10px+0.5lh)] -translate-y-1/2 m-0 right-1" : "top-2.5 right-2.5", { "opacity-100": __props.copy === "always" }]]),
+				content: prettyContent.value,
+				showLang: !isOneLine.value,
+				lang: __props.lang,
+				"aria-controls": unref(id)
+			}, {
+				backdrop: withCtx(() => [createVNode(ScalarCopyBackdrop_default, { class: normalizeClass(["scalar-code-copy-backdrop", [isOneLine.value ? "-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3" : "-right-1.5 -top-1"]]) }, null, 8, ["class"])]),
+				_: 1
+			}, 8, [
+				"class",
+				"content",
+				"showLang",
+				"lang",
+				"aria-controls"
+			])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarCodeBlock_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCodeBlock.vue.script.js.map

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCodeBlock.vue.script.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport ScalarCopyBackdrop from '@/components/ScalarCopy/ScalarCopyBackdrop.vue'\nimport { standardLanguages, syntaxHighlight } from '@scalar/code-highlight'\nimport { prettyPrintJson } from '@scalar/helpers/json/pretty-print-json'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed, useId } from 'vue'\n\nimport { ScalarCodeBlockCopy } from '../ScalarCodeBlock'\nimport type { StandardLanguageKey } from './types'\n\ntype BaseProps = {\n  content?: string | object\n  prettyPrintedContent?: string\n  lang?: StandardLanguageKey | string\n  lineNumbers?: boolean\n  hideCredentials?: string | string[]\n  copy?: 'always' | 'hover' | false\n}\n\n/**\n * Uses highlight.js for syntax highlighting\n *\n * Requires at least one of content or prettyPrintedContent\n */\nconst {\n  lang = 'plaintext',\n  lineNumbers = false,\n  copy = 'hover',\n  content,\n  prettyPrintedContent,\n  hideCredentials,\n} = defineProps<\n  BaseProps &\n    (\n      | {\n          /** Raw unformatted object or string content */\n          content: string | object\n        }\n      | {\n          /**\n           * Pre-pretty printed content string for better performance\n           *\n           * Avoids unnecessary costly re-serialization of large content\n           */\n          prettyPrintedContent: string\n        }\n    )\n>()\n\n/** Base id for the code block */\nconst id = useId()\n\n/** Formatted the content into an indented json string */\nconst prettyContent = computed(\n  () => prettyPrintedContent || prettyPrintJson(content ?? ''),\n)\n\nconst highlightedCode = computed(() => {\n  const html = syntaxHighlight(prettyContent.value, {\n    lang: lang.trim(),\n    languages: standardLanguages,\n    lineNumbers: lineNumbers,\n    maskCredentials: hideCredentials,\n  })\n\n  // Need to remove the wrapping <pre> element so we can use v-html without another wrapper\n  return html.slice(5, -6)\n})\n\n/** Determine if the content is a single line */\nconst isOneLine = computed(() => !prettyContent.value.includes('\\n'))\n\nconst isContentValid = computed(() => {\n  return (\n    prettyContent.value !== null &&\n    prettyContent.value !== 'null' &&\n    prettyContent.value !== '404 Not Found'\n  )\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0 focus-visible:outline',\n      )\n    \">\n    <div\n      tabindex=\"0\"\n      class=\"custom-scroll overflow-x-auto p-2 -outline-offset-2 min-h-0 min-w-0 flex-1\">\n      <pre\n        :id=\"id\"\n        class=\"m-0 bg-transparent text-nowrap whitespace-pre w-fit\"\n        v-html=\"highlightedCode\" />\n    </div>\n    <ScalarCodeBlockCopy\n      v-if=\"copy && isContentValid\"\n      class=\"scalar-code-copy absolute\"\n      :class=\"[\n        isOneLine\n          ? 'top-[calc(10px+0.5lh)] -translate-y-1/2 m-0 right-1'\n          : 'top-2.5 right-2.5',\n        { 'opacity-100': copy === 'always' },\n      ]\"\n      :content=\"prettyContent\"\n      :showLang=\"!isOneLine\"\n      :lang=\"lang\"\n      :aria-controls=\"id\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop\"\n          :class=\"[\n            isOneLine\n              ? '-inset-y-0.75 -right-1 group-hocus-within/code-block:-left-0.5 left-3'\n              : '-right-1.5 -top-1',\n          ]\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n<style>\n@reference '../../style.css';\n@import '@scalar/code-highlight/css/code.css';\n\n/** Make the copy button label backdrop match the background */\n.scalar-code-block.bg-b-1 .scalar-code-copy-backdrop {\n  @apply bg-b-1;\n}\n.scalar-code-block.bg-b-2 .scalar-code-copy-backdrop {\n  @apply bg-b-2;\n}\n/** Make the copy button one shade darker than the background */\n.scalar-code-block.bg-b-2 .scalar-code-copy {\n  @apply bg-b-3;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDA,MAAM,KAAK,OAAM;;EAGjB,MAAM,gBAAgB,eACd,QAAA,wBAAwB,gBAAgB,QAAA,WAAW,GAAG,CAC9D;EAEA,MAAM,kBAAkB,eAAe;AASrC,UARa,gBAAgB,cAAc,OAAO;IAChD,MAAM,QAAA,KAAK,MAAM;IACjB,WAAW;IACX,aAAa,QAAA;IACb,iBAAiB,QAAA;IAClB,CAAA,CAGW,MAAM,GAAG,GAAE;IACxB;;EAGD,MAAM,YAAY,eAAe,CAAC,cAAc,MAAM,SAAS,KAAK,CAAA;EAEpE,MAAM,iBAAiB,eAAe;AACpC,UACE,cAAc,UAAU,QACxB,cAAc,UAAU,UACxB,cAAc,UAAU;IAE3B;EAGD,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAsCM,OAAA,eAAA,mBArCW,MAAA,GAAE,CAAA,oDAAA,wDAAA,CAAA,CAAA,EAAA,CAMjB,mBAOM,OAPN,YAOM,CAJJ,mBAG6B,OAAA;IAF1B,IAAI,MAAA,GAAE;IACP,OAAM;IACN,WAAQ,gBAAA;8BAGJ,QAAA,QAAQ,eAAA,SAAA,WAAA,EADhB,YAsBsB,MAAA,4BAAA,EAAA;;IApBpB,OAAK,eAAA,CAAC,6BAA2B,CACf,UAAA,QAAA,wDAAA,qBAAA,EAAA,eAAsI,QAAA,SAAI,UAAA,CAAA,CAAA,CAAA;IAM3J,SAAS,cAAA;IACT,UAAQ,CAAG,UAAA;IACX,MAAM,QAAA;IACN,iBAAe,MAAA,GAAE;;IACP,UAAQ,cAOV,CANP,YAMO,4BAAA,EALL,OAAK,eAAA,CAAC,6BAA2B,CACX,UAAA,QAAA,0EAAA,oBAAA,CAAA,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.js

@@ -0,0 +1,7 @@
+import ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default from "./ScalarCodeBlockCopy.vue.script.js";
+//#region src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue
+var ScalarCodeBlockCopy_default = ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarCodeBlockCopy_default as default };
+
+//# sourceMappingURL=ScalarCodeBlockCopy.vue.js.map

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCodeBlockCopy.vue.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarCopy } from '@/components/ScalarCopy'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { LANGUAGE_LABELS } from './constants'\nimport type { StandardLanguageKey } from './types'\n\nconst { content } = defineProps<{\n  /** Whether to show the language label */\n  showLang?: boolean\n  /** Content to copy to clipboard */\n  content: string | object\n  /** Language of the code block */\n  lang?: StandardLanguageKey | string\n}>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\n/** Handles the copy button click */\nconst contentToCopy = computed<string>(() => {\n  return typeof content === 'string'\n    ? content\n    : JSON.stringify(content, null, 2)\n})\n\n/** Type guard to check if the language is a standard language */\nconst isStandardLanguage = (lang: string): lang is StandardLanguageKey =>\n  lang in LANGUAGE_LABELS\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <ScalarCopy\n    :content=\"contentToCopy\"\n    showLabel\n    v-model:copied=\"copied\"\n    placement=\"left\"\n    v-bind=\"{\n      ...cx(\n        copied\n          ? 'opacity-100'\n          : 'opacity-0 group-hocus-within/code-block:opacity-100',\n      ),\n    }\">\n    <template\n      v-if=\"lang\"\n      #copy>\n      <span class=\"hidden group-hocus-within/code-block:inline\">\n        <span\n          v-if=\"showLang\"\n          class=\"group-hocus/copy-button:sr-only\"\n          :class=\"{ capitalize: !isStandardLanguage(lang) }\">\n          {{ isStandardLanguage(lang) ? LANGUAGE_LABELS[lang] : lang }}\n        </span>\n        <span\n          :class=\"{\n            'group-hocus/copy-button:not-sr-only sr-only': showLang,\n          }\"\n          >Copy</span\n        >\n      </span>\n    </template>\n    <template #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopy>\n</template>\n"],"mappings":""}

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.script.js

@@ -0,0 +1,55 @@
+import ScalarCopy_default from "../ScalarCopy/ScalarCopy.vue.js";
+import { LANGUAGE_LABELS } from "./constants.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+//#region src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "hidden group-hocus-within/code-block:inline" };
+var ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarCodeBlockCopy",
+	props: /* @__PURE__ */ mergeModels({
+		showLang: { type: Boolean },
+		content: {},
+		lang: {}
+	}, {
+		"copied": {
+			type: Boolean,
+			default: false
+		},
+		"copiedModifiers": {}
+	}),
+	emits: ["update:copied"],
+	setup(__props) {
+		const copied = useModel(__props, "copied");
+		/** Handles the copy button click */
+		const contentToCopy = computed(() => {
+			return typeof __props.content === "string" ? __props.content : JSON.stringify(__props.content, null, 2);
+		});
+		/** Type guard to check if the language is a standard language */
+		const isStandardLanguage = (lang) => lang in LANGUAGE_LABELS;
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarCopy_default), mergeProps({
+				content: contentToCopy.value,
+				showLabel: "",
+				copied: copied.value,
+				"onUpdate:copied": _cache[0] || (_cache[0] = ($event) => copied.value = $event),
+				placement: "left"
+			}, { ...unref(cx)(copied.value ? "opacity-100" : "opacity-0 group-hocus-within/code-block:opacity-100") }), createSlots({
+				backdrop: withCtx(() => [renderSlot(_ctx.$slots, "backdrop")]),
+				_: 2
+			}, [__props.lang ? {
+				name: "copy",
+				fn: withCtx(() => [createElementVNode("span", _hoisted_1, [__props.showLang ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["group-hocus/copy-button:sr-only", { capitalize: !isStandardLanguage(__props.lang) }])
+				}, toDisplayString(isStandardLanguage(__props.lang) ? unref(LANGUAGE_LABELS)[__props.lang] : __props.lang), 3)) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass({ "group-hocus/copy-button:not-sr-only sr-only": __props.showLang }) }, "Copy", 2)])]),
+				key: "0"
+			} : void 0]), 1040, ["content", "copied"]);
+		};
+	}
+});
+//#endregion
+export { ScalarCodeBlockCopy_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarCodeBlockCopy.vue.script.js.map

package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarCodeBlockCopy.vue.script.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarCopy } from '@/components/ScalarCopy'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nimport { LANGUAGE_LABELS } from './constants'\nimport type { StandardLanguageKey } from './types'\n\nconst { content } = defineProps<{\n  /** Whether to show the language label */\n  showLang?: boolean\n  /** Content to copy to clipboard */\n  content: string | object\n  /** Language of the code block */\n  lang?: StandardLanguageKey | string\n}>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\n/** Handles the copy button click */\nconst contentToCopy = computed<string>(() => {\n  return typeof content === 'string'\n    ? content\n    : JSON.stringify(content, null, 2)\n})\n\n/** Type guard to check if the language is a standard language */\nconst isStandardLanguage = (lang: string): lang is StandardLanguageKey =>\n  lang in LANGUAGE_LABELS\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <ScalarCopy\n    :content=\"contentToCopy\"\n    showLabel\n    v-model:copied=\"copied\"\n    placement=\"left\"\n    v-bind=\"{\n      ...cx(\n        copied\n          ? 'opacity-100'\n          : 'opacity-0 group-hocus-within/code-block:opacity-100',\n      ),\n    }\">\n    <template\n      v-if=\"lang\"\n      #copy>\n      <span class=\"hidden group-hocus-within/code-block:inline\">\n        <span\n          v-if=\"showLang\"\n          class=\"group-hocus/copy-button:sr-only\"\n          :class=\"{ capitalize: !isStandardLanguage(lang) }\">\n          {{ isStandardLanguage(lang) ? LANGUAGE_LABELS[lang] : lang }}\n        </span>\n        <span\n          :class=\"{\n            'group-hocus/copy-button:not-sr-only sr-only': showLang,\n          }\"\n          >Copy</span\n        >\n      </span>\n    </template>\n    <template #backdrop>\n      <slot name=\"backdrop\" />\n    </template>\n  </ScalarCopy>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,SAAS,SAAoB,SAAC,SAA4B;;EAGhE,MAAM,gBAAgB,eAAuB;AAC3C,UAAO,OAAO,QAAA,YAAY,WACtB,QAAA,UACA,KAAK,UAAU,QAAA,SAAS,MAAM,EAAC;IACpC;;EAGD,MAAM,sBAAsB,SAC1B,QAAQ;EAGV,MAAM,EAAE,OAAO,WAAU;;uBAIvB,YAiCa,MAAA,mBAAA,EAjCb,WAiCa;IAhCV,SAAS,cAAA;IACV,WAAA;IACQ,QAAQ,OAAA;oEAAM,QAAA;IACtB,WAAU;WACS,MAAA,GAAE,CAAU,OAAA,QAAA,gBAAA,sDAAA,EAAA,CAAA,EAAA,YAAA;IAyBpB,UAAQ,cACO,CAAxB,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA;;OAlBlB,QAAA,OAAA;UACL;sBAcM,CAbP,mBAaO,QAbP,YAaO,CAXG,QAAA,YAAA,WAAA,EADR,mBAKO,QAAA;;KAHL,OAAK,eAAA,CAAC,mCAAiC,EAAA,YAAA,CAChB,mBAAmB,QAAA,KAAI,EAAA,CAAA,CAAA;uBAC3C,mBAAmB,QAAA,KAAI,GAAI,MAAA,gBAAe,CAAC,QAAA,QAAQ,QAAA,KAAI,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAE5D,mBAKC,QAAA,EAJE,OAAK,eAAA,EAAA,+CAA+D,QAAA,UAAA,CAAA,EAAA,EAGpE,QAAI,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/ScalarCodeBlock/constants.js

@@ -0,0 +1,57 @@
+//#region src/components/ScalarCodeBlock/constants.ts
+/** Labels for the standard languages */
+var LANGUAGE_LABELS = {
+	bash: "Bash",
+	c: "C",
+	clojure: "Clojure",
+	cpp: "C++",
+	csharp: "C#",
+	css: "CSS",
+	curl: "cURL",
+	dart: "Dart",
+	diff: "Diff",
+	docker: "Docker",
+	dockerfile: "Dockerfile",
+	elixir: "Elixir",
+	fsharp: "F#",
+	go: "Go",
+	graphql: "GraphQL",
+	haskell: "Haskell",
+	html: "HTML",
+	http: "HTTP",
+	ini: "INI",
+	java: "Java",
+	javascript: "JavaScript",
+	json: "JSON",
+	kotlin: "Kotlin",
+	less: "Less",
+	lua: "Lua",
+	makefile: "Makefile",
+	markdown: "Markdown",
+	matlab: "MATLAB",
+	nginx: "Nginx",
+	objectivec: "Objective-C",
+	ocaml: "OCaml",
+	perl: "Perl",
+	php: "PHP",
+	plaintext: "Plain Text",
+	powershell: "PowerShell",
+	properties: "Properties",
+	python: "Python",
+	r: "R",
+	ruby: "Ruby",
+	rust: "Rust",
+	scala: "Scala",
+	scss: "SCSS",
+	shell: "Shell",
+	sql: "SQL",
+	swift: "Swift",
+	toml: "TOML",
+	typescript: "TypeScript",
+	xml: "XML",
+	yaml: "YAML"
+};
+//#endregion
+export { LANGUAGE_LABELS };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/ScalarCodeBlock/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"sourcesContent":["import type { StandardLanguageKey } from './types'\n\n/** Labels for the standard languages */\nexport const LANGUAGE_LABELS = {\n  bash: 'Bash',\n  c: 'C',\n  clojure: 'Clojure',\n  cpp: 'C++',\n  csharp: 'C#',\n  css: 'CSS',\n  curl: 'cURL',\n  dart: 'Dart',\n  diff: 'Diff',\n  docker: 'Docker',\n  dockerfile: 'Dockerfile',\n  elixir: 'Elixir',\n  fsharp: 'F#',\n  go: 'Go',\n  graphql: 'GraphQL',\n  haskell: 'Haskell',\n  html: 'HTML',\n  http: 'HTTP',\n  ini: 'INI',\n  java: 'Java',\n  javascript: 'JavaScript',\n  json: 'JSON',\n  kotlin: 'Kotlin',\n  less: 'Less',\n  lua: 'Lua',\n  makefile: 'Makefile',\n  markdown: 'Markdown',\n  matlab: 'MATLAB',\n  nginx: 'Nginx',\n  objectivec: 'Objective-C',\n  ocaml: 'OCaml',\n  perl: 'Perl',\n  php: 'PHP',\n  plaintext: 'Plain Text',\n  powershell: 'PowerShell',\n  properties: 'Properties',\n  python: 'Python',\n  r: 'R',\n  ruby: 'Ruby',\n  rust: 'Rust',\n  scala: 'Scala',\n  scss: 'SCSS',\n  shell: 'Shell',\n  sql: 'SQL',\n  swift: 'Swift',\n  toml: 'TOML',\n  typescript: 'TypeScript',\n  xml: 'XML',\n  yaml: 'YAML',\n} as const satisfies Record<StandardLanguageKey, string>\n"],"mappings":";;AAGA,IAAa,kBAAkB;CAC7B,MAAM;CACN,GAAG;CACH,SAAS;CACT,KAAK;CACL,QAAQ;CACR,KAAK;CACL,MAAM;CACN,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,IAAI;CACJ,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,KAAK;CACL,UAAU;CACV,UAAU;CACV,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,GAAG;CACH,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,MAAM;CACN,YAAY;CACZ,KAAK;CACL,MAAM;CACP"}

package/dist/components/ScalarCodeBlock/index.d.ts

@@ -1,3 +1,3 @@
-export { default as ScalarCodeBlock } from './ScalarCodeBlock.vue';
-export { default as ScalarCodeBlockCopy } from './ScalarCodeBlockCopy.vue';
+export { default as ScalarCodeBlock } from './ScalarCodeBlock.vue.js';
+export { default as ScalarCodeBlockCopy } from './ScalarCodeBlockCopy.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.js

@@ -0,0 +1,7 @@
+import ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggle.vue.script.js";
+//#region src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue
+var ScalarColorModeToggle_default = ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarColorModeToggle_default as default };
+
+//# sourceMappingURL=ScalarColorModeToggle.vue.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggle.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { computed } from 'vue'\n\nimport ScalarColorModeToggleButton from './ScalarColorModeToggleButton.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle component\n *\n * A toggle that toggles between light and dark mode\n * using the {@link useColorMode} hook.\n *\n * @example\n *   <ScalarColorModeToggle />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { variant = 'switch' } = defineProps<{\n  /**\n   * The style of the toggle.\n   * @default 'switch'\n   */\n  variant?: 'switch' | 'icon'\n}>()\n\nconst { isDarkMode, toggleColorMode, darkLightMode } = useColorMode()\n\nconst ariaLabel = computed<string>(() =>\n  isDarkMode.value ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <ScalarColorModeToggleButton\n    v-if=\"variant === 'switch'\"\n    v-model=\"isDarkMode\"\n    :aria-label=\"ariaLabel\" />\n  <ScalarColorModeToggleIcon\n    v-else\n    :aria-label=\"ariaLabel\"\n    :mode=\"darkLightMode\"\n    @click=\"toggleColorMode\" />\n</template>\n"],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.script.js

@@ -0,0 +1,33 @@
+import ScalarColorModeToggleIcon_default from "./ScalarColorModeToggleIcon.vue.js";
+import ScalarColorModeToggleButton_default from "./ScalarColorModeToggleButton.vue.js";
+import { computed, createBlock, defineComponent, isRef, openBlock, unref } from "vue";
+import { useColorMode } from "@scalar/use-hooks/useColorMode";
+var ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarColorModeToggle",
+	props: { variant: { default: "switch" } },
+	setup(__props) {
+		const { isDarkMode, toggleColorMode, darkLightMode } = useColorMode();
+		const ariaLabel = computed(() => isDarkMode.value ? "Set light mode" : "Set dark mode");
+		return (_ctx, _cache) => {
+			return __props.variant === "switch" ? (openBlock(), createBlock(ScalarColorModeToggleButton_default, {
+				key: 0,
+				modelValue: unref(isDarkMode),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(isDarkMode) ? isDarkMode.value = $event : null),
+				"aria-label": ariaLabel.value
+			}, null, 8, ["modelValue", "aria-label"])) : (openBlock(), createBlock(ScalarColorModeToggleIcon_default, {
+				key: 1,
+				"aria-label": ariaLabel.value,
+				mode: unref(darkLightMode),
+				onClick: unref(toggleColorMode)
+			}, null, 8, [
+				"aria-label",
+				"mode",
+				"onClick"
+			]));
+		};
+	}
+});
+//#endregion
+export { ScalarColorModeToggle_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarColorModeToggle.vue.script.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggle.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggle.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggle.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\nimport { computed } from 'vue'\n\nimport ScalarColorModeToggleButton from './ScalarColorModeToggleButton.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle component\n *\n * A toggle that toggles between light and dark mode\n * using the {@link useColorMode} hook.\n *\n * @example\n *   <ScalarColorModeToggle />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { variant = 'switch' } = defineProps<{\n  /**\n   * The style of the toggle.\n   * @default 'switch'\n   */\n  variant?: 'switch' | 'icon'\n}>()\n\nconst { isDarkMode, toggleColorMode, darkLightMode } = useColorMode()\n\nconst ariaLabel = computed<string>(() =>\n  isDarkMode.value ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <ScalarColorModeToggleButton\n    v-if=\"variant === 'switch'\"\n    v-model=\"isDarkMode\"\n    :aria-label=\"ariaLabel\" />\n  <ScalarColorModeToggleIcon\n    v-else\n    :aria-label=\"ariaLabel\"\n    :mode=\"darkLightMode\"\n    @click=\"toggleColorMode\" />\n</template>\n"],"mappings":";;;;;;;;EA2BA,MAAM,EAAE,YAAY,iBAAiB,kBAAkB,cAAa;EAEpE,MAAM,YAAY,eAChB,WAAW,QAAQ,mBAAmB,gBACxC;;UAIU,QAAA,YAAO,YAAA,WAAA,EADf,YAG4B,qCAAA;;gBADjB,MAAA,WAAU;gGAAA,QAAA,SAAA;IAClB,cAAY,UAAA;8DACf,YAI6B,mCAAA;;IAF1B,cAAY,UAAA;IACZ,MAAM,MAAA,cAAa;IACnB,SAAO,MAAA,gBAAe"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.js

@@ -0,0 +1,7 @@
+import ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggleButton.vue.script.js";
+//#region src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue
+var ScalarColorModeToggleButton_default = ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ScalarColorModeToggleButton_default as default };
+
+//# sourceMappingURL=ScalarColorModeToggleButton.vue.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggleButton.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] brightness-lifted -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js

@@ -0,0 +1,32 @@
+import ScalarColorModeToggleIcon_default from "./ScalarColorModeToggleIcon.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, unref, useModel } from "vue";
+//#region src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-pressed"];
+var ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarColorModeToggleButton",
+	props: {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const { cx } = useBindCx();
+		/** Whether the toggle is in dark mode */
+		const model = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", mergeProps({
+				"aria-pressed": model.value,
+				type: "button"
+			}, unref(cx)("group/toggle flex h-6 w-[38px] brightness-lifted -mx-px items-center py-1.5 -my-1.5 relative outline-none"), { onClick: _cache[0] || (_cache[0] = ($event) => model.value = !model.value) }), [_cache[1] || (_cache[1] = createElementVNode("div", { class: "h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1" }, null, -1)), createElementVNode("div", { class: normalizeClass(["size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out", { "translate-x-[14px]": model.value }]) }, [createVNode(ScalarColorModeToggleIcon_default, {
+				is: "div",
+				mode: model.value ? "dark" : "light"
+			}, null, 8, ["mode"])], 2)], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ScalarColorModeToggleButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarColorModeToggleButton.vue.script.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggleButton.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleButton.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\nimport ScalarColorModeToggleIcon from './ScalarColorModeToggleIcon.vue'\n\n/**\n * Scalar Color Mode Toggle Button component\n *\n * A dumb button that toggles between a sun and moon icon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleButton v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\n/** Whether the toggle is in dark mode */\nconst model = defineModel<boolean>()\n</script>\n<template>\n  <button\n    :aria-pressed=\"model\"\n    type=\"button\"\n    v-bind=\"\n      cx(\n        'group/toggle flex h-6 w-[38px] brightness-lifted -mx-px items-center py-1.5 -my-1.5 relative outline-none',\n      )\n    \"\n    @click=\"model = !model\">\n    <!-- Background -->\n    <div\n      class=\"h-3 w-full bg-border mx-px rounded-xl group-focus-visible/toggle:outline -outline-offset-1\" />\n    <!-- Slider -->\n    <div\n      class=\"size-[23px] left-border absolute border rounded-full flex items-center justify-center bg-b-1 group-focus-visible/toggle:outline -outline-offset-1 transition-transform duration-300 ease-in-out\"\n      :class=\"{ 'translate-x-[14px]': model }\">\n      <!-- Icon -->\n      <ScalarColorModeToggleIcon\n        is=\"div\"\n        :mode=\"model ? 'dark' : 'light'\" />\n    </div>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAsBA,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,QAAQ,SAAoB,SAAA,aAAC;;uBAGjC,mBAqBS,UArBT,WAqBS;IApBN,gBAAc,MAAA;IACf,MAAK;MACU,MAAA,GAAE,CAAA,4GAAA,EAAA,EAKhB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK,CAAI,MAAA,QAAA,CAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAEjB,mBACuG,OAAA,EAArG,OAAM,8FAA4F,EAAA,MAAA,GAAA,GAEpG,mBAOM,OAAA,EANJ,OAAK,eAAA,CAAC,mMAAiM,EAAA,sBACvK,MAAA,OAAK,CAAA,CAAA,EAAA,EAAA,CAErC,YAEqC,mCAAA;IADnC,IAAG;IACF,MAAM,MAAA,QAAK,SAAA"}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default from "./ScalarColorModeToggleIcon.vue.script.js";
+/* empty css                                        */
+//#region src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue
+var ScalarColorModeToggleIcon_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-60be8692"]]);
+//#endregion
+export { ScalarColorModeToggleIcon_default as default };
+
+//# sourceMappingURL=ScalarColorModeToggleIcon.vue.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggleIcon.vue.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\n\n/**\n * Scalar Color Mode Toggle Icon component\n *\n * An icon that toggles between a sun and moon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleIcon v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { is = 'button', mode = 'light' } = defineProps<{\n  /** The element or component this component should render as. */\n  is?: string | Component\n  /** Whether the toggle is a sun or moon icon */\n  mode?: 'light' | 'dark'\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst ariaLabel = computed<string>(() =>\n  mode === 'dark' ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <!-- Icon -->\n  <component\n    :is=\"is\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`toggle-icon-${mode}`\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx('size-3 flex items-center justify-center text-c-1')\">\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-ellipse\">\n      <span class=\"toggle-icon-moon-mask\" />\n    </span>\n  </component>\n</template>\n<style scoped>\n.toggle-icon-ellipse {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px currentColor;\n  overflow: hidden;\n  position: relative;\n  background: var(--scalar-background-1);\n  display: inline-block;\n  transition:\n    width 0.3s ease-in-out,\n    height 0.3s ease-in-out;\n}\n.toggle-icon-moon-mask {\n  width: 100%;\n  height: 100%;\n  border: 1px solid currentColor;\n  display: block;\n  left: 2.5px;\n  bottom: 2.5px;\n  position: absolute;\n  border-radius: 50%;\n  background: var(--scalar-background-1);\n  transition: transform 0.3s ease-in-out;\n  transform: translate3d(4px, -4px, 0);\n}\n.toggle-icon-sun-ray {\n  width: 12px;\n  height: 1px;\n  border-radius: 8px;\n  background: currentColor;\n  position: absolute;\n  transition: transform 0.3s ease-in-out;\n}\n.toggle-icon-sun-ray:nth-of-type(2) {\n  transform: rotate(90deg);\n}\n.toggle-icon-sun-ray:nth-of-type(3) {\n  transform: rotate(45deg);\n}\n.toggle-icon-sun-ray:nth-of-type(4) {\n  transform: rotate(-45deg);\n}\n.toggle-icon-dark .toggle-icon-ellipse {\n  width: 10px;\n  height: 10px;\n  mask-image: radial-gradient(\n    circle at bottom left,\n    pink 10px,\n    transparent 12px\n  );\n}\n.toggle-icon-dark .toggle-icon-sun-ray {\n  transform: scale(0);\n}\n.toggle-icon-dark .toggle-icon-moon-mask {\n  transform: translate3d(0, 0, 0);\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.script.js

@@ -0,0 +1,38 @@
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { computed, createBlock, createElementVNode, defineComponent, mergeProps, openBlock, resolveDynamicComponent, unref, withCtx } from "vue";
+var ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarColorModeToggleIcon",
+	props: {
+		is: { default: "button" },
+		mode: { default: "light" }
+	},
+	setup(__props) {
+		const { cx } = useBindCx();
+		const ariaLabel = computed(() => __props.mode === "dark" ? "Set light mode" : "Set dark mode");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps({
+				"aria-label": ariaLabel.value,
+				class: `toggle-icon-${__props.mode}`,
+				type: __props.is === "button" ? "button" : void 0
+			}, unref(cx)("size-3 flex items-center justify-center text-c-1")), {
+				default: withCtx(() => [..._cache[0] || (_cache[0] = [
+					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
+					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
+					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
+					createElementVNode("span", { class: "toggle-icon-sun-ray" }, null, -1),
+					createElementVNode("span", { class: "toggle-icon-ellipse" }, [createElementVNode("span", { class: "toggle-icon-moon-mask" })], -1)
+				])]),
+				_: 1
+			}, 16, [
+				"aria-label",
+				"class",
+				"type"
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarColorModeToggleIcon_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarColorModeToggleIcon.vue.script.js.map

package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarColorModeToggleIcon.vue.script.js","names":[],"sources":["../../../src/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { type Component, computed } from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type ScalarColorModeToggle from './ScalarColorModeToggle.vue'\n\n/**\n * Scalar Color Mode Toggle Icon component\n *\n * An icon that toggles between a sun and moon.\n *\n * If you need a toggle that is aware of and sets color mode,\n * you want {@link ScalarColorModeToggle} instead.\n *\n * @example\n *   <ScalarColorModeToggleIcon v-model=\"isDarkMode\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nconst { is = 'button', mode = 'light' } = defineProps<{\n  /** The element or component this component should render as. */\n  is?: string | Component\n  /** Whether the toggle is a sun or moon icon */\n  mode?: 'light' | 'dark'\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n\nconst ariaLabel = computed<string>(() =>\n  mode === 'dark' ? 'Set light mode' : 'Set dark mode',\n)\n</script>\n<template>\n  <!-- Icon -->\n  <component\n    :is=\"is\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`toggle-icon-${mode}`\"\n    :type=\"is === 'button' ? 'button' : undefined\"\n    v-bind=\"cx('size-3 flex items-center justify-center text-c-1')\">\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-sun-ray\" />\n    <span class=\"toggle-icon-ellipse\">\n      <span class=\"toggle-icon-moon-mask\" />\n    </span>\n  </component>\n</template>\n<style scoped>\n.toggle-icon-ellipse {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px currentColor;\n  overflow: hidden;\n  position: relative;\n  background: var(--scalar-background-1);\n  display: inline-block;\n  transition:\n    width 0.3s ease-in-out,\n    height 0.3s ease-in-out;\n}\n.toggle-icon-moon-mask {\n  width: 100%;\n  height: 100%;\n  border: 1px solid currentColor;\n  display: block;\n  left: 2.5px;\n  bottom: 2.5px;\n  position: absolute;\n  border-radius: 50%;\n  background: var(--scalar-background-1);\n  transition: transform 0.3s ease-in-out;\n  transform: translate3d(4px, -4px, 0);\n}\n.toggle-icon-sun-ray {\n  width: 12px;\n  height: 1px;\n  border-radius: 8px;\n  background: currentColor;\n  position: absolute;\n  transition: transform 0.3s ease-in-out;\n}\n.toggle-icon-sun-ray:nth-of-type(2) {\n  transform: rotate(90deg);\n}\n.toggle-icon-sun-ray:nth-of-type(3) {\n  transform: rotate(45deg);\n}\n.toggle-icon-sun-ray:nth-of-type(4) {\n  transform: rotate(-45deg);\n}\n.toggle-icon-dark .toggle-icon-ellipse {\n  width: 10px;\n  height: 10px;\n  mask-image: radial-gradient(\n    circle at bottom left,\n    pink 10px,\n    transparent 12px\n  );\n}\n.toggle-icon-dark .toggle-icon-sun-ray {\n  transform: scale(0);\n}\n.toggle-icon-dark .toggle-icon-moon-mask {\n  transform: translate3d(0, 0, 0);\n}\n</style>\n"],"mappings":";;;;;;;;;;EA6BA,MAAM,EAAE,OAAO,WAAU;EAEzB,MAAM,YAAY,eAChB,QAAA,SAAS,SAAS,mBAAmB,gBACvC;;uBAIE,YAaY,wBAZL,QAAA,GAAE,EADT,WAaY;IAXT,cAAY,UAAA;IACZ,OAAK,eAAiB,QAAA;IACtB,MAAM,QAAA,OAAE,WAAA,WAA2B,KAAA;MAC5B,MAAA,GAAE,CAAA,mDAAA,CAAA,EAAA;2BAC0B,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;KAApC,mBAAoC,QAAA,EAA9B,OAAM,uBAAqB,EAAA,MAAA,GAAA;KACjC,mBAAoC,QAAA,EAA9B,OAAM,uBAAqB,EAAA,MAAA,GAAA;KACjC,mBAAoC,QAAA,EAA9B,OAAM,uBAAqB,EAAA,MAAA,GAAA;KACjC,mBAAoC,QAAA,EAA9B,OAAM,uBAAqB,EAAA,MAAA,GAAA;KACjC,mBAEO,QAAA,EAFD,OAAM,uBAAqB,EAAA,CAC/B,mBAAsC,QAAA,EAAhC,OAAM,yBAAuB,CAAA,CAAA,EAAA,GAAA"}