@scalar/components 0.20.11 → 0.21.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextArea.vue.script.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n *   <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n  input: model,\n  styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the textarea has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug',\n      )\n    \"\n    @click=\"textarea?.focus()\">\n    <textarea\n      ref=\"textarea\"\n      v-model=\"model\"\n      v-bind=\"otherAttrs\"\n      class=\"w-full resize-none border-none bg-transparent text-sm focus-within:outline-none\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,QAAQ,SAAmB,SAAA,aAAgB;EAEjD,MAAM,EAAE,aAAa,oBAAoB;GACvC,OAAO;GACP,WAAW;GACZ,CAAA;EAGD,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB;AAEd,OAAI,eAAe,WAAW,MAAO,UAAS,OAAO,OAAM;IAC5D;;uBAGC,YAakB,MAAA,wBAAA,EAblB,WAakB,EAZhB,IAAG,OAAK,EACO,MAAA,eAAc,CAAA,kFAAA,EAAA,EAK5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAQ,EAAE,OAAK,GAAA,CAAA,EAAA;2BAKqE,CAAA,eAJ5F,mBAI4F,YAJ5F,WAI4F;cAHtF;KAAJ,KAAI;wEACU,QAAA;OACN,MAAA,WAAU,EAAA,EAClB,OAAM,mFAAiF,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,YAF9E,MAAA,MAAK,CAAA,CAAA,CAAA,CAAA"}

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

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

package/dist/components/ScalarTextInput/ScalarTextInput.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextInput.vue.js","names":[],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'cursor-text text-c-1',\n        readonly ? '' : 'focus-within:bg-b-1',\n      )\n    \"\n    @click=\"handleClick\">\n    <div class=\"flex items-center flex-1 relative\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"select-none whitespace-nowrap text-transparent\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,71 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useModel, vModelDynamic, withCtx, withDirectives } from "vue";
+//#region src/components/ScalarTextInput/ScalarTextInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-center flex-1 relative" };
+var _hoisted_2 = {
+	key: 0,
+	class: "select-none whitespace-nowrap text-transparent"
+};
+var _hoisted_3 = ["aria-readonly", "readonly"];
+var _hoisted_4 = {
+	key: 1,
+	class: "absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "text-c-2"
+};
+var _hoisted_6 = { class: "text-transparent" };
+var _hoisted_7 = {
+	key: 1,
+	class: "text-c-2"
+};
+var ScalarTextInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarTextInput",
+	props: /* @__PURE__ */ mergeModels({ readonly: { type: Boolean } }, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["click"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const input = ref();
+		const { stylingAttrsCx, otherAttrs } = useBindCx();
+		onMounted(() => {
+			if ("autofocus" in otherAttrs.value) input.value?.focus();
+		});
+		function handleClick(event) {
+			emit("click", event);
+			if (__props.readonly) input.value?.select();
+			else input.value?.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("cursor-text text-c-1", __props.readonly ? "" : "focus-within:bg-b-1"), { onClick: handleClick }), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true),
+					withDirectives(createElementVNode("input", mergeProps({
+						ref_key: "input",
+						ref: input,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+						"aria-readonly": __props.readonly || void 0,
+						class: "z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none",
+						readonly: __props.readonly
+					}, unref(otherAttrs)), null, 16, _hoisted_3), [[vModelDynamic, model.value]]),
+					_ctx.$slots.prefix || _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_4, [
+						_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_6, toDisplayString(model.value || _ctx.$attrs.placeholder), 1),
+						_ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)
+					])) : createCommentVNode("", true)
+				]), renderSlot(_ctx.$slots, "aside")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarTextInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTextInput.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextInput.vue.script.js","names":["$slots","$attrs"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input component\n *\n * A wrapper around the HTML input element with a focusable container.\n *\n * @example\n *   <ScalarTextInput v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst { readonly } = defineProps<{\n  readonly?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input is clicked */\n  (e: 'click', event: MouseEvent): void\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n}>()\n\nconst model = defineModel<string>()\n\nconst input = ref<HTMLInputElement>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n  // Force autofocus if the input has the autofocus attribute\n  if ('autofocus' in otherAttrs.value) input.value?.focus()\n})\n\nfunction handleClick(event: MouseEvent) {\n  // Re-emit the click event to any consumers\n  emit('click', event)\n\n  if (readonly) {\n    input.value?.select() // If readonly, select the input on click\n  } else {\n    input.value?.focus() // If not readonly, focus the input on click\n  }\n}\n</script>\n<template>\n  <ScalarFormInput\n    is=\"div\"\n    v-bind=\"\n      stylingAttrsCx(\n        'cursor-text text-c-1',\n        readonly ? '' : 'focus-within:bg-b-1',\n      )\n    \"\n    @click=\"handleClick\">\n    <div class=\"flex items-center flex-1 relative\">\n      <div\n        v-if=\"$slots.prefix\"\n        class=\"select-none whitespace-nowrap text-transparent\">\n        <slot name=\"prefix\" />\n      </div>\n      <input\n        ref=\"input\"\n        v-model=\"model\"\n        :aria-readonly=\"readonly || undefined\"\n        class=\"z-1 min-w-0 flex-1 rounded-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\"\n        :readonly\n        v-bind=\"otherAttrs\" />\n      <div\n        v-if=\"$slots.prefix || $slots.suffix\"\n        class=\"absolute flex items-center inset-0 select-none overflow-hidden whitespace-nowrap\">\n        <span\n          v-if=\"$slots.prefix\"\n          class=\"text-c-2\">\n          <slot name=\"prefix\" />\n        </span>\n        <span class=\"text-transparent\">{{ model || $attrs.placeholder }}</span>\n        <span\n          v-if=\"$slots.suffix\"\n          class=\"text-c-2\">\n          <slot name=\"suffix\" />\n        </span>\n      </div>\n    </div>\n    <slot name=\"aside\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBA,MAAM,OAAO;EAcb,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,QAAQ,KAAsB;EAGpC,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB;AAEd,OAAI,eAAe,WAAW,MAAO,OAAM,OAAO,OAAM;IACzD;EAED,SAAS,YAAY,OAAmB;AAEtC,QAAK,SAAS,MAAK;AAEnB,OAAI,QAAA,SACF,OAAM,OAAO,QAAQ;OAErB,OAAM,OAAO,OAAO;;;uBAKtB,YAuCkB,MAAA,wBAAA,EAvClB,WAuCkB,EAtChB,IAAG,OAAK,EACO,MAAA,eAAc,CAAA,wBAA0C,QAAA,WAAQ,KAAA,sBAAA,EAAA,EAM9E,SAAO,aAAW,CAAA,EAAA;2BA6Bb,CA5BN,mBA4BM,OA5BN,YA4BM;KA1BIA,KAAAA,OAAO,UAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;oBAExB,mBAMwB,SANxB,WAMwB;eALlB;MAAJ,KAAI;yEACU,QAAA;MACb,iBAAe,QAAA,YAAY,KAAA;MAC5B,OAAM;MACL,UAAA,QAAA;QACO,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,WAAA,EAAA,CAAA,CAAA,eAJT,MAAA,MAAK,CAAA,CAAA;KAMRA,KAAAA,OAAO,UAAUA,KAAAA,OAAO,UAAA,WAAA,EADhC,mBAcM,OAdN,YAcM;MAVIA,KAAAA,OAAO,UAAA,WAAA,EADf,mBAIO,QAJP,YAIO,CADL,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;MAExB,mBAAuE,QAAvE,YAAuE,gBAArC,MAAA,SAASC,KAAAA,OAAO,YAAW,EAAA,EAAA;MAErDD,KAAAA,OAAO,UAAA,WAAA,EADf,mBAIO,QAJP,YAIO,CADL,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;;QAI5B,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.js

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

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextInputCopy.vue.js","names":[],"sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input Copy component\n *\n * A wrapper around the ScalarTextInput component that provides a\n * copy button and allows copying of the input content to the clipboard.\n *\n * @example\n *   <ScalarTextInputCopy v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport { ScalarCopyBackdrop, ScalarCopyButton } from '../ScalarCopy'\nimport ScalarTextInput from './ScalarTextInput.vue'\n\nconst { duration = 1500, immediate } = defineProps<{\n  /** The placement of the copy button */\n  duration?: number\n  /** Whether the input is writable */\n  editable?: boolean\n  /** Whether to copy the model value immediately on mount */\n  immediate?: boolean\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n  /* Override the label for the copy button */\n  copy?: () => unknown\n  /* Override the label for the copy button when the content has been copied */\n  copied?: () => unknown\n}>()\n\nonMounted(() => {\n  // Copy the model value immediately on mount if immediate is true\n  if (immediate && model.value) copy(model.value)\n})\n\nconst model = defineModel<string>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarTextInput\n    v-model=\"model\"\n    :readonly=\"!editable\"\n    @click=\"model && copy(model)\">\n    <template #aside>\n      <ScalarCopyButton\n        class=\"z-1\"\n        :copied=\"copied || clipboardCopied\"\n        placement=\"left\"\n        @click.stop=\"model && copy(model)\">\n        <template\n          v-if=\"$slots.copy\"\n          #copy>\n          <slot name=\"copy\" />\n        </template>\n        <template\n          v-if=\"$slots.copied\"\n          #copied>\n          <slot name=\"copied\" />\n        </template>\n        <template #backdrop>\n          <ScalarCopyBackdrop class=\"bg-b-1.5\" />\n        </template>\n      </ScalarCopyButton>\n    </template>\n  </ScalarTextInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.script.js

@@ -0,0 +1,66 @@
+import ScalarCopyBackdrop_default from "../ScalarCopy/ScalarCopyBackdrop.vue.js";
+import ScalarCopyButton_default from "../ScalarCopy/ScalarCopyButton.vue.js";
+import ScalarTextInput_default from "./ScalarTextInput.vue.js";
+import { createBlock, createSlots, createVNode, defineComponent, mergeModels, onMounted, openBlock, renderSlot, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { useClipboard } from "@vueuse/core";
+var ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarTextInputCopy",
+	props: /* @__PURE__ */ mergeModels({
+		duration: { default: 1500 },
+		editable: { type: Boolean },
+		immediate: { type: Boolean }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"copied": {
+			type: Boolean,
+			default: false
+		},
+		"copiedModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:copied"],
+	setup(__props) {
+		onMounted(() => {
+			if (__props.immediate && model.value) copy(model.value);
+		});
+		const model = useModel(__props, "modelValue");
+		const copied = useModel(__props, "copied");
+		const { copy, copied: clipboardCopied } = useClipboard({
+			legacy: true,
+			copiedDuring: __props.duration
+		});
+		/** Watch the clipboard copied state and emit it to the consuming component */
+		watch(clipboardCopied, (v) => copied.value = v);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScalarTextInput_default, {
+				modelValue: model.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
+				readonly: !__props.editable,
+				onClick: _cache[2] || (_cache[2] = ($event) => model.value && unref(copy)(model.value))
+			}, {
+				aside: withCtx(() => [createVNode(unref(ScalarCopyButton_default), {
+					class: "z-1",
+					copied: copied.value || unref(clipboardCopied),
+					placement: "left",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => model.value && unref(copy)(model.value), ["stop"]))
+				}, createSlots({
+					backdrop: withCtx(() => [createVNode(unref(ScalarCopyBackdrop_default), { class: "bg-b-1.5" })]),
+					_: 2
+				}, [_ctx.$slots.copy ? {
+					name: "copy",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "copy")]),
+					key: "0"
+				} : void 0, _ctx.$slots.copied ? {
+					name: "copied",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "copied")]),
+					key: "1"
+				} : void 0]), 1032, ["copied"])]),
+				_: 3
+			}, 8, ["modelValue", "readonly"]);
+		};
+	}
+});
+//#endregion
+export { ScalarTextInputCopy_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTextInputCopy.vue.script.js.map

package/dist/components/ScalarTextInput/ScalarTextInputCopy.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTextInputCopy.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTextInput/ScalarTextInputCopy.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Input Copy component\n *\n * A wrapper around the ScalarTextInput component that provides a\n * copy button and allows copying of the input content to the clipboard.\n *\n * @example\n *   <ScalarTextInputCopy v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useClipboard } from '@vueuse/core'\nimport { onMounted, watch } from 'vue'\n\nimport { ScalarCopyBackdrop, ScalarCopyButton } from '../ScalarCopy'\nimport ScalarTextInput from './ScalarTextInput.vue'\n\nconst { duration = 1500, immediate } = defineProps<{\n  /** The placement of the copy button */\n  duration?: number\n  /** Whether the input is writable */\n  editable?: boolean\n  /** Whether to copy the model value immediately on mount */\n  immediate?: boolean\n}>()\n\ndefineSlots<{\n  /* Text content to display before the input text */\n  prefix?: () => unknown\n  /*Text content to display after the input text */\n  suffix?: () => unknown\n  /* Text content to display to the right of the input */\n  aside?: () => unknown\n  /* Override the label for the copy button */\n  copy?: () => unknown\n  /* Override the label for the copy button when the content has been copied */\n  copied?: () => unknown\n}>()\n\nonMounted(() => {\n  // Copy the model value immediately on mount if immediate is true\n  if (immediate && model.value) copy(model.value)\n})\n\nconst model = defineModel<string>()\n\nconst copied = defineModel<boolean>('copied', { default: false })\n\nconst { copy, copied: clipboardCopied } = useClipboard({\n  legacy: true,\n  copiedDuring: duration,\n})\n\n/** Watch the clipboard copied state and emit it to the consuming component */\nwatch(clipboardCopied, (v) => (copied.value = v))\n</script>\n<template>\n  <ScalarTextInput\n    v-model=\"model\"\n    :readonly=\"!editable\"\n    @click=\"model && copy(model)\">\n    <template #aside>\n      <ScalarCopyButton\n        class=\"z-1\"\n        :copied=\"copied || clipboardCopied\"\n        placement=\"left\"\n        @click.stop=\"model && copy(model)\">\n        <template\n          v-if=\"$slots.copy\"\n          #copy>\n          <slot name=\"copy\" />\n        </template>\n        <template\n          v-if=\"$slots.copied\"\n          #copied>\n          <slot name=\"copied\" />\n        </template>\n        <template #backdrop>\n          <ScalarCopyBackdrop class=\"bg-b-1.5\" />\n        </template>\n      </ScalarCopyButton>\n    </template>\n  </ScalarTextInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyCA,kBAAgB;AAEd,OAAI,QAAA,aAAa,MAAM,MAAO,MAAK,MAAM,MAAK;IAC/C;EAED,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,SAAS,SAAoB,SAAC,SAA4B;EAEhE,MAAM,EAAE,MAAM,QAAQ,oBAAoB,aAAa;GACrD,QAAQ;GACR,cAAc,QAAA;GACf,CAAA;;AAGD,QAAM,kBAAkB,MAAO,OAAO,QAAQ,EAAE;;uBAG9C,YAyBkB,yBAAA;gBAxBP,MAAA;uEAAK,QAAA;IACb,UAAQ,CAAG,QAAA;IACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAS,MAAA,KAAI,CAAC,MAAA,MAAK;;IAChB,OAAK,cAmBK,CAlBnB,YAkBmB,MAAA,yBAAA,EAAA;KAjBjB,OAAM;KACL,QAAQ,OAAA,SAAU,MAAA,gBAAe;KAClC,WAAU;KACT,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,SAAS,MAAA,KAAI,CAAC,MAAA,MAAK,EAAA,CAAA,OAAA,CAAA;;KAWrB,UAAQ,cACsB,CAAvC,YAAuC,MAAA,2BAAA,EAAA,EAAnB,OAAM,YAAU,CAAA,CAAA,CAAA;;QAV9BA,KAAAA,OAAO,OAAA;WACZ;uBACmB,CAApB,WAAoB,KAAA,QAAA,OAAA,CAAA,CAAA;;gBAGdA,KAAAA,OAAO,SAAA;WACZ;uBACqB,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA"}

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

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

package/dist/components/ScalarThemeSwatches/ScalarThemeSwatches.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarThemeSwatches.vue.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/ScalarThemeSwatches.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Theme Swatches component\n *\n * Displays the light and dark mode swatches for a given theme CSS string\n *\n * @example\n * <ScalarThemeSwatches :css=\"theme\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { THEME_CSS_VARS, useThemeSwatches } from './useThemeSwatches'\n\nconst { css } = defineProps<{\n  css: string\n}>()\n\nconst { colors } = useThemeSwatches(() => css)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    :style=\"{\n      '--bg-light': colors.light['--scalar-background-1'],\n      '--bg-dark': colors.dark['--scalar-background-1'],\n    }\"\n    v-bind=\"\n      cx(\n        'flex *:size-3 overflow-hidden rounded',\n        'bg-(--bg-light) dark:bg-(--bg-dark)',\n      )\n    \">\n    <div\n      v-for=\"v in THEME_CSS_VARS\"\n      :key=\"v\"\n      class=\"bg-(--bg-light) dark:bg-(--bg-dark)\"\n      :style=\"{ '--bg-light': colors.light[v], '--bg-dark': colors.dark[v] }\" />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,31 @@
+import { THEME_CSS_VARS, useThemeSwatches } from "./useThemeSwatches.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { Fragment, createElementBlock, defineComponent, mergeProps, normalizeStyle, openBlock, renderList, unref } from "vue";
+var ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarThemeSwatches",
+	props: { css: {} },
+	setup(__props) {
+		const { colors } = useThemeSwatches(() => __props.css);
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ style: {
+				"--bg-light": unref(colors).light["--scalar-background-1"],
+				"--bg-dark": unref(colors).dark["--scalar-background-1"]
+			} }, unref(cx)("flex *:size-3 overflow-hidden rounded", "bg-(--bg-light) dark:bg-(--bg-dark)")), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(THEME_CSS_VARS), (v) => {
+				return openBlock(), createElementBlock("div", {
+					key: v,
+					class: "bg-(--bg-light) dark:bg-(--bg-dark)",
+					style: normalizeStyle({
+						"--bg-light": unref(colors).light[v],
+						"--bg-dark": unref(colors).dark[v]
+					})
+				}, null, 4);
+			}), 128))], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarThemeSwatches_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarThemeSwatches.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarThemeSwatches.vue.script.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/ScalarThemeSwatches.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Theme Swatches component\n *\n * Displays the light and dark mode swatches for a given theme CSS string\n *\n * @example\n * <ScalarThemeSwatches :css=\"theme\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { THEME_CSS_VARS, useThemeSwatches } from './useThemeSwatches'\n\nconst { css } = defineProps<{\n  css: string\n}>()\n\nconst { colors } = useThemeSwatches(() => css)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    :style=\"{\n      '--bg-light': colors.light['--scalar-background-1'],\n      '--bg-dark': colors.dark['--scalar-background-1'],\n    }\"\n    v-bind=\"\n      cx(\n        'flex *:size-3 overflow-hidden rounded',\n        'bg-(--bg-light) dark:bg-(--bg-dark)',\n      )\n    \">\n    <div\n      v-for=\"v in THEME_CSS_VARS\"\n      :key=\"v\"\n      class=\"bg-(--bg-light) dark:bg-(--bg-dark)\"\n      :style=\"{ '--bg-light': colors.light[v], '--bg-dark': colors.dark[v] }\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EAoBA,MAAM,EAAE,WAAW,uBAAuB,QAAA,IAAG;EAG7C,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAgBM,OAhBN,WAgBM,EAfH,OAAK;kBAAwB,MAAA,OAAM,CAAC,MAAK;iBAA8C,MAAA,OAAM,CAAC,KAAI;QAIpF,MAAA,GAAE,CAAA,yCAAA,sCAAA,CAAA,EAAA,EAAA,UAAA,KAAA,EAMjB,mBAI4E,UAAA,MAAA,WAH9D,MAAA,eAAc,GAAnB,MAAC;wBADV,mBAI4E,OAAA;KAFzE,KAAK;KACN,OAAM;KACL,OAAK,eAAA;MAAA,cAAkB,MAAA,OAAM,CAAC,MAAM;MAAC,aAAgB,MAAA,OAAM,CAAC,KAAK;MAAC,CAAA"}

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

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

package/dist/components/ScalarThemeSwatches/useThemeSwatches.js

@@ -0,0 +1,44 @@
+import { computed, toValue } from "vue";
+//#region src/components/ScalarThemeSwatches/useThemeSwatches.ts
+/** Theme CSS variables */
+var THEME_CSS_VARS = [
+	"--scalar-color-1",
+	"--scalar-color-2",
+	"--scalar-color-3",
+	"--scalar-background-1",
+	"--scalar-background-2",
+	"--scalar-background-3",
+	"--scalar-color-accent"
+];
+/**
+* Parses a given css string for a css variable regexp
+*/
+function getVars(cssVarPattern, css) {
+	const matches = [...css.matchAll(new RegExp(`(${cssVarPattern}): ([^;]+);`, "gm"))];
+	if (matches.length === 0) return {};
+	return Object.fromEntries(matches.map((match) => [match[1], match[2]]));
+}
+/**
+* Parses a given css string for the variables we want
+*/
+function parseRules(css) {
+	if (!css) return {};
+	return {
+		...getVars("--scalar-color-[1-3]", css),
+		...getVars("--scalar-background-[1-3]", css),
+		...getVars("--scalar-color-accent", css)
+	};
+}
+/**
+* Returns the light and dark colors for a given css string
+*/
+function useThemeSwatches(css) {
+	return { colors: computed(() => ({
+		light: parseRules(toValue(css).match(/\.light-mode[^{]*{[^}]*}/m)?.[0]),
+		dark: parseRules(toValue(css).match(/\.dark-mode[^{]*{[^}]*}/m)?.[0])
+	})) };
+}
+//#endregion
+export { THEME_CSS_VARS, useThemeSwatches };
+
+//# sourceMappingURL=useThemeSwatches.js.map

package/dist/components/ScalarThemeSwatches/useThemeSwatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeSwatches.js","names":[],"sources":["../../../src/components/ScalarThemeSwatches/useThemeSwatches.ts"],"sourcesContent":["import { type MaybeRefOrGetter, computed, toValue } from 'vue'\n\n/** Numbers 1 to 3 */\ntype OneToThree = 1 | 2 | 3\n\n/**\n * CSS variable names that can be extracted from theme CSS\n */\ntype ThemeCssVar = `--scalar-color-${OneToThree}` | `--scalar-background-${OneToThree}` | '--scalar-color-accent'\n\n/**\n * Theme colors for light and dark modes\n */\ntype ThemeColors = {\n  light: ThemeCssVars\n  dark: ThemeCssVars\n}\n\n/**\n * Record of theme CSS variables to their values (partial)\n */\ntype ThemeCssVars = Partial<Record<ThemeCssVar, string>>\n\n/** Theme CSS variables */\nexport const THEME_CSS_VARS = [\n  '--scalar-color-1',\n  '--scalar-color-2',\n  '--scalar-color-3',\n  '--scalar-background-1',\n  '--scalar-background-2',\n  '--scalar-background-3',\n  '--scalar-color-accent',\n] as const satisfies ThemeCssVar[]\n\n/**\n * Parses a given css string for a css variable regexp\n */\nfunction getVars(cssVarPattern: string, css: string): Partial<Record<ThemeCssVar, string>> {\n  const matches = [...css.matchAll(new RegExp(`(${cssVarPattern}): ([^;]+);`, 'gm'))]\n  if (matches.length === 0) {\n    return {}\n  }\n  return Object.fromEntries(matches.map((match) => [match[1], match[2]]))\n}\n\n/**\n * Parses a given css string for the variables we want\n */\nfunction parseRules(css?: string): ThemeCssVars {\n  if (!css) {\n    return {}\n  }\n  return {\n    ...getVars('--scalar-color-[1-3]', css),\n    ...getVars('--scalar-background-[1-3]', css),\n    ...getVars('--scalar-color-accent', css),\n  } as ThemeCssVars\n}\n\n/**\n * Returns the light and dark colors for a given css string\n */\nexport function useThemeSwatches(css: MaybeRefOrGetter<string>) {\n  return {\n    colors: computed<ThemeColors>(() => ({\n      light: parseRules(toValue(css).match(/\\.light-mode[^{]*{[^}]*}/m)?.[0]),\n      dark: parseRules(toValue(css).match(/\\.dark-mode[^{]*{[^}]*}/m)?.[0]),\n    })),\n  }\n}\n"],"mappings":";;;AAwBA,IAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;AAKD,SAAS,QAAQ,eAAuB,KAAmD;CACzF,MAAM,UAAU,CAAC,GAAG,IAAI,SAAS,IAAI,OAAO,IAAI,cAAc,cAAc,KAAK,CAAC,CAAC;AACnF,KAAI,QAAQ,WAAW,EACrB,QAAO,EAAE;AAEX,QAAO,OAAO,YAAY,QAAQ,KAAK,UAAU,CAAC,MAAM,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;AAMzE,SAAS,WAAW,KAA4B;AAC9C,KAAI,CAAC,IACH,QAAO,EAAE;AAEX,QAAO;EACL,GAAG,QAAQ,wBAAwB,IAAI;EACvC,GAAG,QAAQ,6BAA6B,IAAI;EAC5C,GAAG,QAAQ,yBAAyB,IAAI;EACzC;;;;;AAMH,SAAgB,iBAAiB,KAA+B;AAC9D,QAAO,EACL,QAAQ,gBAA6B;EACnC,OAAO,WAAW,QAAQ,IAAI,CAAC,MAAM,4BAA4B,GAAG,GAAG;EACvE,MAAM,WAAW,QAAQ,IAAI,CAAC,MAAM,2BAA2B,GAAG,GAAG;EACtE,EAAE,EACJ"}

package/dist/components/ScalarToggle/ScalarToggle.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggle.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    checked: { true: 'bg-c-accent' },\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n</script>\n<template>\n  <button\n    :aria-checked=\"model\"\n    :aria-disabled=\"disabled\"\n    :class=\"cx(variants({ checked: model, disabled }))\"\n    role=\"switch\"\n    type=\"button\"\n    @click=\"toggle\">\n    <div\n      class=\"absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300\"\n      :class=\"{ 'translate-x-2.5': model }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,54 @@
+import { cva, cx } from "@scalar/use-hooks/useBindCx";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, toDisplayString, unref, useModel } from "vue";
+//#region src/components/ScalarToggle/ScalarToggle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-checked", "aria-disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "sr-only"
+};
+var ScalarToggle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarToggle",
+	props: /* @__PURE__ */ mergeModels({
+		disabled: { type: Boolean },
+		label: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		function toggle() {
+			if (props.disabled) return;
+			model.value = !model.value;
+		}
+		const variants = cva({
+			base: "relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300",
+			variants: {
+				checked: { true: "bg-c-accent" },
+				disabled: { true: "cursor-not-allowed opacity-40" }
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				"aria-checked": model.value,
+				"aria-disabled": __props.disabled,
+				class: normalizeClass(unref(cx)(unref(variants)({
+					checked: model.value,
+					disabled: __props.disabled
+				}))),
+				role: "switch",
+				type: "button",
+				onClick: toggle
+			}, [createElementVNode("div", { class: normalizeClass(["absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300", { "translate-x-2.5": model.value }]) }, null, 2), __props.label ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ScalarToggle_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarToggle.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggle.vue.script.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\n\nconst props = defineProps<{\n  disabled?: boolean\n  label?: string\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nfunction toggle() {\n  if (props.disabled) {\n    return\n  }\n  model.value = !model.value\n}\n\nconst variants = cva({\n  base: 'relative h-3.5 min-w-6 w-6 cursor-pointer rounded-full bg-b-3 transition-colors duration-300',\n  variants: {\n    checked: { true: 'bg-c-accent' },\n    disabled: { true: 'cursor-not-allowed opacity-40' },\n  },\n})\n</script>\n<template>\n  <button\n    :aria-checked=\"model\"\n    :aria-disabled=\"disabled\"\n    :class=\"cx(variants({ checked: model, disabled }))\"\n    role=\"switch\"\n    type=\"button\"\n    @click=\"toggle\">\n    <div\n      class=\"absolute left-px top-px flex h-3 w-3 items-center justify-center rounded-full bg-b-1 text-c-accent transition-transform duration-300\"\n      :class=\"{ 'translate-x-2.5': model }\" />\n    <span\n      v-if=\"label\"\n      class=\"sr-only\">\n      {{ label }}\n    </span>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAGA,MAAM,QAAQ;EAKd,MAAM,QAAQ,SAAoB,SAAA,aAAmB;EAErD,SAAS,SAAS;AAChB,OAAI,MAAM,SACR;AAEF,SAAM,QAAQ,CAAC,MAAM;;EAGvB,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,SAAS,EAAE,MAAM,eAAe;IAChC,UAAU,EAAE,MAAM,iCAAiC;IACpD;GACF,CAAA;;uBAGC,mBAeS,UAAA;IAdN,gBAAc,MAAA;IACd,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,SAAY,MAAA;KAAK,UAAE,QAAA;KAAQ,CAAA,CAAA,CAAA;IAC9C,MAAK;IACL,MAAK;IACJ,SAAO;OACR,mBAE0C,OAAA,EADxC,OAAK,eAAA,CAAC,wIAAsI,EAAA,mBAC/G,MAAA,OAAK,CAAA,CAAA,EAAA,EAAA,MAAA,EAAA,EAE5B,QAAA,SAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.js

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

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleGroup.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Group component\n *\n * A group of toggle inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarToggleInput from './ScalarToggleInput.vue'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: [] })\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => value === option.value)\"\n      @update:modelValue=\"\n        (checked) =>\n          (model = checked\n            ? [...model, option]\n            : model.filter(({ value }) => value !== option.value))\n      \">\n      {{ option.label }}\n    </ScalarToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.script.js

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

package/dist/components/ScalarToggle/ScalarToggleGroup.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleGroup.vue.script.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggleGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Group component\n *\n * A group of toggle inputs allowing for multiple selections.\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport type { ScalarCheckboxOption } from '../ScalarCheckboxInput'\nimport { ScalarFormInputGroup } from '../ScalarForm'\nimport ScalarToggleInput from './ScalarToggleInput.vue'\n\nconst { options = [] } = defineProps<{\n  options?: ScalarCheckboxOption[]\n}>()\n\nconst model = defineModel<ScalarCheckboxOption[]>({ default: [] })\n</script>\n<template>\n  <ScalarFormInputGroup>\n    <ScalarToggleInput\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :modelValue=\"model?.some(({ value }) => value === option.value)\"\n      @update:modelValue=\"\n        (checked) =>\n          (model = checked\n            ? [...model, option]\n            : model.filter(({ value }) => value !== option.value))\n      \">\n      {{ option.label }}\n    </ScalarToggleInput>\n  </ScalarFormInputGroup>\n</template>\n"],"mappings":";;;;;;;;;;;EAiBA,MAAM,QAAQ,SAAmC,SAAA,aAAgB;;uBAG/D,YAauB,MAAA,6BAAA,EAAA,MAAA;2BAXM,EAAA,UAAA,KAAA,EAD3B,mBAWoB,UAAA,MAAA,WAVD,QAAA,UAAV,WAAM;yBADf,YAWoB,2BAAA;MATjB,KAAK,OAAO;MACZ,YAAY,MAAA,OAAO,MAAI,EAAI,YAAY,UAAU,OAAO,MAAK;MAC7D,wBAA6B,YAAuB,MAAA,QAAQ,UAAA,CAAA,GAA0B,MAAA,OAAO,OAAM,GAAgB,MAAA,MAAM,QAAM,EAAI,YAAY,UAAU,OAAO,MAAK;;6BAMpJ,CAAA,gBAAA,gBAAf,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/ScalarToggle/ScalarToggleInput.vue.js

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

package/dist/components/ScalarToggle/ScalarToggleInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleInput.vue.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Input component\n *\n * A create a toggle input component for use in forms.\n *\n * @example\n *  <ScalarToggleInput v-model=\"model\" type=\"checkbox\">\n *    Label\n *  </ScalarToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarToggle from './ScalarToggle.vue'\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    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <ScalarToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":""}

package/dist/components/ScalarToggle/ScalarToggleInput.vue.script.js

@@ -0,0 +1,33 @@
+import ScalarFormInput_default from "../ScalarForm/ScalarFormInput.vue.js";
+import ScalarToggle_default from "./ScalarToggle.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+//#region src/components/ScalarToggle/ScalarToggleInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex-1 text-left min-w-0 truncate" };
+var ScalarToggleInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarToggleInput",
+	props: {
+		"modelValue": { type: Boolean },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__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(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createVNode(ScalarToggle_default, mergeProps({
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					class: "shrink-0"
+				}, unref(otherAttrs)), null, 16, ["modelValue"])]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { ScalarToggleInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarToggleInput.vue.script.js.map

package/dist/components/ScalarToggle/ScalarToggleInput.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarToggleInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Toggle Input component\n *\n * A create a toggle input component for use in forms.\n *\n * @example\n *  <ScalarToggleInput v-model=\"model\" type=\"checkbox\">\n *    Label\n *  </ScalarToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarToggle from './ScalarToggle.vue'\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    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <ScalarToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAoB,SAAA,aAAC;EAGnC,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,YAUkB,MAAA,wBAAA,EAVlB,WAUkB,EAThB,IAAG,SAAO,EACK,MAAA,eAAc,CAAA,qCAAA,EAAA,YAAoD,MAAA,OAAK,CAAA,CAAA,EAAA;2BAGzB,CAA7D,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,EACvD,YAGwB,sBAHxB,WAGwB;iBAFb,MAAA;wEAAK,QAAA;KACd,OAAM;OACE,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA"}

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

@@ -1,4 +1,4 @@
-export { default as ScalarToggle } from './ScalarToggle.vue';
-export { default as ScalarToggleGroup } from './ScalarToggleGroup.vue';
-export { default as ScalarToggleInput } from './ScalarToggleInput.vue';
+export { default as ScalarToggle } from './ScalarToggle.vue.js';
+export { default as ScalarToggleGroup } from './ScalarToggleGroup.vue.js';
+export { default as ScalarToggleInput } from './ScalarToggleInput.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.js

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

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHotkeyTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, h, ref, render } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border-tooltip *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.script.js

@@ -0,0 +1,51 @@
+import ScalarHotkey_default from "../ScalarHotkey/ScalarHotkey.vue.js";
+import { useTooltip } from "./useTooltip.js";
+import { computed, createElementBlock, defineComponent, h, normalizeClass, openBlock, ref, render, renderSlot } from "vue";
+var ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarHotkeyTooltip",
+	props: {
+		content: { default: "" },
+		hotkey: {},
+		modifier: {},
+		delay: { default: () => 300 },
+		placement: { default: "top" },
+		offset: { default: () => 4 }
+	},
+	setup(__props) {
+		const wrapperRef = ref(null);
+		useTooltip({
+			content: computed(() => {
+				if (!document) return "";
+				const el = document.createElement("div");
+				const hotKeyClass = "-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border-tooltip *:rounded *:px-1 *:flex *:items-center *:justify-center";
+				if (__props.content) render(h("div", { class: "flex items-center gap-2" }, [__props.content, h(ScalarHotkey_default, {
+					class: hotKeyClass,
+					hotkey: __props.hotkey,
+					modifier: __props.modifier
+				})]), el);
+				else render(h(ScalarHotkey_default, {
+					class: hotKeyClass,
+					hotkey: __props.hotkey,
+					modifier: __props.modifier
+				}), el);
+				return el.innerHTML;
+			}),
+			contentTarget: "innerHTML",
+			delay: computed(() => __props.delay),
+			placement: computed(() => __props.placement),
+			offset: computed(() => __props.offset),
+			targetRef: computed(() => wrapperRef.value?.children?.[0] || wrapperRef.value || void 0)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass({ contents: !!_ctx.$slots.default })
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarHotkeyTooltip.vue.script.js.map

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHotkeyTooltip.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, h, ref, render } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border-tooltip *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAwCA,MAAM,aAAsC,IAAI,KAAI;AA4CpD,aAAW;GACT,SAxCsB,eAAuB;AAC7C,QAAI,CAAC,SAAU,QAAO;IAGtB,MAAM,KAAK,SAAS,cAAc,MAAK;IAEvC,MAAM,cACJ;AAEF,QAAI,QAAA,QAEF,QACE,EAAE,OAAO,EAAE,OAAO,2BAA2B,EAAE,CAC7C,QAAA,SACA,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,CACH,CAAC,EACF,GACF;QAEA,QACE,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,EACF,GACF;AAMF,WAHa,GAAG;KAIjB;GAIC,eAAe;GACf,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}