@scalar/api-client 3.8.2 → 3.8.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @scalar/api-client
 
+## 3.8.3
+
+### Patch Changes
+
+- [#9145](https://github.com/scalar/scalar/pull/9145): fix(api-client): ignore `encoding.contentType` on `application/x-www-form-urlencoded` request bodies
+
+  Per OAS 3.1.x Encoding Object, `contentType` SHALL be ignored when the request body media type is not a multipart. After the recent change that lifted the multipart gate on `encoding.style`/`explode`/`allowReserved`, the `encoding` map started being passed for urlencoded bodies too. As a side effect, a urlencoded encoding entry that only set `contentType` would JSON-stringify object values into a single part instead of keeping the spec-default dotted-key flattening. Suppress `contentType` for non-multipart bodies so the flattening branch is restored.
+
+- [#9145](https://github.com/scalar/scalar/pull/9145): fix(api-client): encode nested object properties in multipart/form-data as a single JSON part instead of flattening them with dotted keys
+- [#9145](https://github.com/scalar/scalar/pull/9145): fix(api-client): serialize `multipart/form-data` and `application/x-www-form-urlencoded` parts with form / spaceDelimited / pipeDelimited / deepObject styles per RFC6570 when `encoding.style` / `explode` / `allowReserved` is set, matching how query parameters are already serialized. Replaces the dotted-key flattening previously emitted for `style: form, explode: true`.
+- [#9145](https://github.com/scalar/scalar/pull/9145): fix(api-client): JSON-stringify nested object/array values under `style: form` instead of emitting `[object Object]` in `multipart/form-data` and `application/x-www-form-urlencoded` bodies. RFC 6570 form-style serialization only addresses one level of nesting and OpenAPI 3.1 leaves deeper structures undefined; readable JSON is more useful than `String(value)` garble. The documented escape hatch for cleaner output remains `style: deepObject` with `explode: true`.
+- [#9155](https://github.com/scalar/scalar/pull/9155): feat(api-client): expand nested object properties of multipart form-data schemas into individual editable rows (e.g. `props.name`, `props.description`); the wire still sends one `application/json` multipart part per top-level object property — both for the initial schema-derived example and for edited form rows
+- [#9248](https://github.com/scalar/scalar/pull/9248): feat: open the API client on the selected operation when launching from API Reference. The modal "Open API Client" link now includes `operation_path` and `operation_method` query params; scalar-app reads them after import and navigates to that request. Also fixes address bar blur replay when focus moves programmatically on first navigation into a draft operation.
+- [#9259](https://github.com/scalar/scalar/pull/9259): fix(api-client): harden response body preview against XSS and referrer leakage
+
+  The response body preview now validates `src` against an allow-list of safe
+  protocols (`blob:`, `http:`, `https:`, and `data:` URIs limited to known media
+  types) before rendering, replaces the `<object>` fallback with a fully
+  sandboxed `<iframe>` (`sandbox=""`), and sets `referrerpolicy="no-referrer"`
+  on all media elements so untrusted response URLs cannot execute script in the
+  app origin or leak the user's location to third-party hosts.
+
 ## 3.8.2
 
 ### Patch Changes

package/dist/components/HttpMethod/HttpMethod.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.d.ts","sourceRoot":"","sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"names":[],"mappings":"AAuGA,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AAgIJ,QAAA,MAAM,YAAY;;;;;cAnIH,OAAO;gBAEL,OAAO;6EAqItB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"HttpMethod.vue.d.ts","sourceRoot":"","sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"names":[],"mappings":"AAyGA,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AAgIJ,QAAA,MAAM,YAAY;;;;;cAnIH,OAAO;gBAEL,OAAO;6EAqItB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/HttpMethod/HttpMethod.vue.js

@@ -2,7 +2,7 @@ import HttpMethod_vue_vue_type_script_setup_true_lang_default from "./HttpMethod
 /* empty css                         */
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 //#region src/components/HttpMethod/HttpMethod.vue
-var HttpMethod_default = /* @__PURE__ */ _plugin_vue_export_helper_default(HttpMethod_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7a19f363"]]);
+var HttpMethod_default = /* @__PURE__ */ _plugin_vue_export_helper_default(HttpMethod_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-86e2b3ea"]]);
 //#endregion
 export { HttpMethod_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":""}

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

@@ -1,7 +1,8 @@
 import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
-import { ScalarListbox, cva, cx } from "@scalar/components";
+import { ScalarListbox } from "@scalar/components/listbox";
 import { REQUEST_METHODS, getHttpMethodInfo } from "@scalar/helpers/http/http-info";
 import { objectEntries } from "@scalar/helpers/object/object-entries";
+import { cva, cx } from "@scalar/use-hooks/useBindCx";
 //#region src/components/HttpMethod/HttpMethod.vue?vue&type=script&setup=true&lang.ts
 var HttpMethod_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "HttpMethod",

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

@@ -1 +1 @@
-{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarListbox } from '@scalar/components'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,SAAS,eAAe,kBAAkB,MAAM,OAAO,CAAA;EAC7D,MAAM,gBAAgB,cAAc,gBAAgB,CAAC,KAAK,CAAC,SAAS;GAClE;GACA,OAAO,GAAG,aAAa;GACvB,OAAO,kBAAkB,GAAG,CAAC;GAC9B,EAAC;EACF,MAAM,iBAAiB,SAAS;GAC9B,WAAW,cAAc,MAAM,EAAE,SAAS,OAAO,MAAM,OAAO;GAC9D,MAAM,QAAQ,KAAK,MAAM,KAAK,UAAU,IAAI,GAAG;GAChD,CAAA;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,UAAU;KACR,MAAM;KACN,OAAO;KACR;IACD,YAAY;KACV,MAAM;KACN,OAAO;KACR;IACF;GACF,CAAA;EAED,MAAM,YAAY,eAAe,OAAO,MAAM,MAAK;;UAKzC,QAAA,cAAA,WAAA,EADR,YAegB,MAAA,cAAA,EAAA;;gBAbL,eAAA;gFAAc,QAAA;IACvB,OAAM;IACL,SAAS,MAAA,cAAa;;2BAUjB,CATN,mBASM,OAAA,EARJ,OAAK,eAAA,CAAC,UAAQ,EAAA,uBAAA,CACoB,QAAA,YAAU,CAAA,CAAA,EAAA,EAAA,CAC5C,mBAKS,UAAA;KAJP,OAAK,eAAA,CAAC,mBACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;MAAA,UAAG,QAAA;MAAQ,YAAE,QAAA;MAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;KAChE,MAAK;QACL,mBAA4B,QAAA,MAAA,gBAAnB,UAAA,MAAS,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;qDAKxB,mBAMM,OAAA;;IAJJ,OAAK,eAAA,CAAC,oCACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,UAAG,QAAA;KAAQ,YAAE,QAAA;KAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;IAChE,MAAK;sBACF,OAAA,MAAO,MAAK,EAAA,EAAA"}
+{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../src/components/HttpMethod/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport {\n  getHttpMethodInfo,\n  REQUEST_METHODS,\n} from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { objectEntries } from '@scalar/helpers/object/object-entries'\nimport { cva, cx } from '@scalar/use-hooks/useBindCx'\nimport { computed } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    isSquare?: boolean\n    method: string\n    isEditable?: boolean\n  }>(),\n  { isSquare: false, isDisable: false, isEditable: false },\n)\n\nconst emit = defineEmits<{\n  (e: 'change', value: HttpMethod): void\n}>()\n\nconst method = computed(() => getHttpMethodInfo(props.method))\nconst methodOptions = objectEntries(REQUEST_METHODS).map(([id]) => ({\n  id,\n  label: id.toUpperCase(),\n  color: getHttpMethodInfo(id).colorClass,\n}))\nconst selectedMethod = computed({\n  get: () => methodOptions.find(({ id }) => id === props.method),\n  set: (opt) => opt?.id && emit('change', opt.id),\n})\n\nconst variants = cva({\n  base: 'text-center font-code text-3xs justify-center items-center flex',\n  variants: {\n    isSquare: {\n      true: 'px-2.5 whitespace-nowrap font-bold border-r h-fit m-auto',\n      false: 'rounded-full',\n    },\n    isEditable: {\n      true: 'http-bg-gradient rounded-md border',\n      false: 'cursor-auto',\n    },\n  },\n})\n\nconst httpLabel = computed(() => method.value.short)\n</script>\n<template>\n  <!-- Dropdown select -->\n  <ScalarListbox\n    v-if=\"isEditable\"\n    v-model=\"selectedMethod\"\n    class=\"font-code scalar-client mt-1 text-sm\"\n    :options=\"methodOptions\">\n    <div\n      class=\"h-full\"\n      :class=\"{ 'pointer-events-none': !isEditable }\">\n      <button\n        class=\"relative h-full\"\n        :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n        type=\"button\">\n        <span>{{ httpLabel }}</span>\n      </button>\n    </div>\n  </ScalarListbox>\n  <!-- Display only -->\n  <div\n    v-else\n    class=\"relative gap-1 whitespace-nowrap\"\n    :class=\"cx(variants({ isSquare, isEditable }), method.colorClass)\"\n    type=\"button\">\n    {{ method.short }}\n  </div>\n</template>\n<style scoped>\n.http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.035));\n}\n.http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.75));\n}\n.dark-mode .http-bg-gradient {\n  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.15));\n}\n.dark-mode .http-bg-gradient:hover {\n  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.035));\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,SAAS,eAAe,kBAAkB,MAAM,OAAO,CAAA;EAC7D,MAAM,gBAAgB,cAAc,gBAAgB,CAAC,KAAK,CAAC,SAAS;GAClE;GACA,OAAO,GAAG,aAAa;GACvB,OAAO,kBAAkB,GAAG,CAAC;GAC9B,EAAC;EACF,MAAM,iBAAiB,SAAS;GAC9B,WAAW,cAAc,MAAM,EAAE,SAAS,OAAO,MAAM,OAAO;GAC9D,MAAM,QAAQ,KAAK,MAAM,KAAK,UAAU,IAAI,GAAG;GAChD,CAAA;EAED,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU;IACR,UAAU;KACR,MAAM;KACN,OAAO;KACR;IACD,YAAY;KACV,MAAM;KACN,OAAO;KACR;IACF;GACF,CAAA;EAED,MAAM,YAAY,eAAe,OAAO,MAAM,MAAK;;UAKzC,QAAA,cAAA,WAAA,EADR,YAegB,MAAA,cAAA,EAAA;;gBAbL,eAAA;gFAAc,QAAA;IACvB,OAAM;IACL,SAAS,MAAA,cAAa;;2BAUjB,CATN,mBASM,OAAA,EARJ,OAAK,eAAA,CAAC,UAAQ,EAAA,uBAAA,CACoB,QAAA,YAAU,CAAA,CAAA,EAAA,EAAA,CAC5C,mBAKS,UAAA;KAJP,OAAK,eAAA,CAAC,mBACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;MAAA,UAAG,QAAA;MAAQ,YAAE,QAAA;MAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;KAChE,MAAK;QACL,mBAA4B,QAAA,MAAA,gBAAnB,UAAA,MAAS,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;;qDAKxB,mBAMM,OAAA;;IAJJ,OAAK,eAAA,CAAC,oCACE,MAAA,GAAE,CAAC,MAAA,SAAQ,CAAA;KAAA,UAAG,QAAA;KAAQ,YAAE,QAAA;KAAU,CAAA,EAAK,OAAA,MAAO,WAAU,CAAA,CAAA;IAChE,MAAK;sBACF,OAAA,MAAO,MAAK,EAAA,EAAA"}

package/dist/components/SectionFilter.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import SectionFilter_vue_vue_type_script_setup_true_lang_default from "./SectionFilter.vue.script.js";
 /* empty css                            */
 //#region src/components/SectionFilter.vue
-var SectionFilter_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f97cc68c"]]);
+var SectionFilter_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-07ff8fc3"]]);
 //#endregion
 export { SectionFilter_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import SectionFilterButton_default from "./SectionFilterButton.vue.js";
 import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, openBlock, ref, renderList, toDisplayString, unref, useModel, withCtx, withKeys } from "vue";
-import { ScalarIcon } from "@scalar/components";
+import { ScalarIcon } from "@scalar/components/icon";
 //#region src/components/SectionFilter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex" };
 var _hoisted_2 = { class: "filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center" };

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

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ,SAAc,SAAA,aAAC;EAE7B,MAAM,UAAU,KAAoB;;EAGpC,MAAM,mBAAmB,cAA+B;GACtD,MAAM,SAAS,cAAc,SAAS,KAAK;GAC3C,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,MAAM,GAAG;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;AAC7C,SAAM,QAAQ,QAAA,QAAQ;AAGtB,kBAAe;AACb,QAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,+BACD;AACD,SAAI,eACF,gBAAe,OAAM;;KAG1B;;;uBAID,mBA2BM,OAAA;aA1BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,OAAA,EAAA,CAAA,OAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA;OAC/B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAlBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACJ,CAAA,gBAAA,gBAAT,OAAM,EAAA,EAAA,CAAA,CAAA;;;;;;;cAEX,mBAOM,OAPN,YAOM,CALJ,mBAAsE,QAAtE,YAAsE,gBAAf,MAAA,MAAK,EAAA,EAAA,EAC5D,YAGkB,MAAA,WAAA,EAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}
+{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ,SAAc,SAAA,aAAC;EAE7B,MAAM,UAAU,KAAoB;;EAGpC,MAAM,mBAAmB,cAA+B;GACtD,MAAM,SAAS,cAAc,SAAS,KAAK;GAC3C,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,MAAM,GAAG;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;AAC7C,SAAM,QAAQ,QAAA,QAAQ;AAGtB,kBAAe;AACb,QAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,+BACD;AACD,SAAI,eACF,gBAAe,OAAM;;KAG1B;;;uBAID,mBA2BM,OAAA;aA1BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,OAAA,EAAA,CAAA,OAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA;OAC/B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAlBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACJ,CAAA,gBAAA,gBAAT,OAAM,EAAA,EAAA,CAAA,CAAA;;;;;;;cAEX,mBAOM,OAPN,YAOM,CALJ,mBAAsE,QAAtE,YAAsE,gBAAf,MAAA,MAAK,EAAA,EAAA,EAC5D,YAGkB,MAAA,WAAA,EAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}

package/dist/components/Server/ServerVariablesSelect.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesSelect.vue.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\">\n          Selected:\n        </span>\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        weight=\"bold\"\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ServerVariablesSelect.vue.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\">\n          Selected:\n        </span>\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        weight=\"bold\"\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":""}

package/dist/components/Server/ServerVariablesSelect.vue.script.js

@@ -1,5 +1,6 @@
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
-import { ScalarButton, ScalarListbox } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
+import { ScalarListbox } from "@scalar/components/listbox";
 import { ScalarIconCaretDown } from "@scalar/icons";
 //#region src/components/Server/ServerVariablesSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {

package/dist/components/Server/ServerVariablesSelect.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerVariablesSelect.vue.script.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\">\n          Selected:\n        </span>\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        weight=\"bold\"\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,UAAU,eACd,MAAM,KAAK,KAAK,OAAO;GAAE,IAAI;GAAG,OAAO;GAAG,EAAE,CAC9C;EAEA,MAAM,WAAW,SAA0C;GACzD,WAAW,QAAQ,MAAM,MAAM,QAAQ,IAAI,OAAO,MAAM,MAAM;GAC9D,MAAM,QAA8B,KAAK,UAAU,KAAK,MAAM,GAAG;GAClE,CAAA;;uBAGC,YAmBgB,MAAA,cAAA,EAAA;gBAlBL,SAAA;0EAAQ,QAAA;IAChB,SAAS,QAAA;;2BAgBK,CAff,YAee,MAAA,aAAA,EAAA;KAdZ,iBAAe,QAAA;KAChB,OAAM;KACN,SAAQ;;4BAQD,CAPP,mBAOO,QAAA,EAPA,OAAK,eAAA,EAAA,YAAgB,QAAA,OAAK,CAAA,EAAA,EAAA,CAEvB,QAAA,SAAA,WAAA,EADR,mBAIO,QAJP,YAEkB,cAElB,IAAA,mBAAA,IAAA,KAAA,EAAA,gBAAO,MACP,gBAAG,QAAA,SAAK,eAAA,EAAA,EAAA,CAAA,EAAA,EAAA,EAEV,YAEmG,MAAA,oBAAA,EAAA;MADjG,QAAO;MACP,OAAM"}
+{"version":3,"file":"ServerVariablesSelect.vue.script.js","names":[],"sources":["../../../src/components/Server/ServerVariablesSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  enum: string[]\n  value: string\n  controls: string | undefined\n}>()\n\nconst emit = defineEmits<{\n  (e: 'change', v: string): void\n}>()\n\nconst options = computed<ScalarListboxOption[]>(() =>\n  props.enum.map((s) => ({ id: s, label: s })),\n)\n\nconst selected = computed<ScalarListboxOption | undefined>({\n  get: () => options.value.find((opt) => opt.id === props.value),\n  set: (opt?: ScalarListboxOption) => emit('change', opt?.id ?? ''),\n})\n</script>\n<template>\n  <ScalarListbox\n    v-model=\"selected\"\n    :options=\"options\">\n    <ScalarButton\n      :aria-controls=\"controls\"\n      class=\"group/button h-8 gap-1.5 p-1.5 text-base font-normal\"\n      variant=\"ghost\">\n      <span :class=\"{ 'text-c-1': value }\">\n        <span\n          v-if=\"value\"\n          class=\"sr-only\">\n          Selected:\n        </span>\n        {{ value || 'Select value' }}\n      </span>\n      <ScalarIconCaretDown\n        weight=\"bold\"\n        class=\"mt-0.25 size-3 transition-transform duration-100 group-aria-expanded/button:rotate-180\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,UAAU,eACd,MAAM,KAAK,KAAK,OAAO;GAAE,IAAI;GAAG,OAAO;GAAG,EAAE,CAC9C;EAEA,MAAM,WAAW,SAA0C;GACzD,WAAW,QAAQ,MAAM,MAAM,QAAQ,IAAI,OAAO,MAAM,MAAM;GAC9D,MAAM,QAA8B,KAAK,UAAU,KAAK,MAAM,GAAG;GAClE,CAAA;;uBAGC,YAmBgB,MAAA,cAAA,EAAA;gBAlBL,SAAA;0EAAQ,QAAA;IAChB,SAAS,QAAA;;2BAgBK,CAff,YAee,MAAA,aAAA,EAAA;KAdZ,iBAAe,QAAA;KAChB,OAAM;KACN,SAAQ;;4BAQD,CAPP,mBAOO,QAAA,EAPA,OAAK,eAAA,EAAA,YAAgB,QAAA,OAAK,CAAA,EAAA,EAAA,CAEvB,QAAA,SAAA,WAAA,EADR,mBAIO,QAJP,YAEkB,cAElB,IAAA,mBAAA,IAAA,KAAA,EAAA,gBAAO,MACP,gBAAG,QAAA,SAAK,eAAA,EAAA,EAAA,CAAA,EAAA,EAAA,EAEV,YAEmG,MAAA,oBAAA,EAAA;MADjG,QAAO;MACP,OAAM"}

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarListElementForm.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SidebarListElementForm.vue.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.script.js

@@ -1,5 +1,5 @@
 import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
-import { ScalarButton } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
 //#region src/components/Sidebar/Actions/SidebarListElementForm.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex justify-between gap-10" };
 var SidebarListElementForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({

package/dist/components/Sidebar/Actions/SidebarListElementForm.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarListElementForm.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;EAQA,MAAM,OAAO;;uBAMX,mBAoBO,QAAA;IAnBL,OAAM;IACL,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,KAAI,SAAA,EAAA,CAAA,UAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,UAAA,EACR,mBAeM,OAfN,YAeM,CAdJ,YAMe,MAAA,aAAA,EAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;;2BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF0B,YAE1B,GAAA,CAAA,EAAA,CAAA;;OACA,YAMe,MAAA,aAAA,EAAA;IALb,eAAY;IACZ,MAAK;IACL,MAAK;IACJ,SAAS,QAAA,SAAM,WAAA;;2BACK,CAAA,gBAAA,gBAAlB,QAAA,SAAK,OAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"SidebarListElementForm.vue.script.js","names":[],"sources":["../../../../src/components/Sidebar/Actions/SidebarListElementForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\n\ndefineProps<{\n  danger?: boolean\n  label?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'cancel'): void\n  (e: 'submit'): void\n}>()\n</script>\n<template>\n  <form\n    class=\"flex flex-col gap-4 text-base\"\n    @submit.prevent=\"emit('submit')\">\n    <slot />\n    <div class=\"flex justify-between gap-10\">\n      <ScalarButton\n        size=\"sm\"\n        type=\"button\"\n        variant=\"outlined\"\n        @click=\"emit('cancel')\">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        data-testid=\"sidebar-list-element-form-submit-button\"\n        size=\"sm\"\n        type=\"submit\"\n        :variant=\"danger ? 'danger' : 'solid'\">\n        {{ label ?? 'Save' }}\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;EAQA,MAAM,OAAO;;uBAMX,mBAoBO,QAAA;IAnBL,OAAM;IACL,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,KAAI,SAAA,EAAA,CAAA,UAAA,CAAA;OACrB,WAAQ,KAAA,QAAA,UAAA,EACR,mBAeM,OAfN,YAeM,CAdJ,YAMe,MAAA,aAAA,EAAA;IALb,MAAK;IACL,MAAK;IACL,SAAQ;IACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;;2BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF0B,YAE1B,GAAA,CAAA,EAAA,CAAA;;OACA,YAMe,MAAA,aAAA,EAAA;IALb,eAAY;IACZ,MAAK;IACL,MAAK;IACJ,SAAS,QAAA,SAAM,WAAA;;2BACK,CAAA,gBAAA,gBAAlB,QAAA,SAAK,OAAA,EAAA,EAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ViewLayout.vue.js","names":[],"sources":["../../../src/components/ViewLayout/ViewLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col min-h-0 flex-1 *:border-t first:*:border-t-0 md:*:border-t-0 xl:overflow-hidden md:flex-row leading-5',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ViewLayout.vue.js","names":[],"sources":["../../../src/components/ViewLayout/ViewLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col min-h-0 flex-1 *:border-t first:*:border-t-0 md:*:border-t-0 xl:overflow-hidden md:flex-row leading-5',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
-import { useBindCx } from "@scalar/components";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
 //#region src/components/ViewLayout/ViewLayout.vue?vue&type=script&setup=true&lang.ts
 var ViewLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ViewLayout",

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

@@ -1 +1 @@
-{"version":3,"file":"ViewLayout.vue.script.js","names":[],"sources":["../../../src/components/ViewLayout/ViewLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col min-h-0 flex-1 *:border-t first:*:border-t-0 md:*:border-t-0 xl:overflow-hidden md:flex-row leading-5',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAGA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,mBAOM,OAAA,eAAA,mBANW,MAAA,GAAE,CAAA,sHAAA,CAAA,CAAA,EAAA,CAKjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ViewLayout.vue.script.js","names":[],"sources":["../../../src/components/ViewLayout/ViewLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col min-h-0 flex-1 *:border-t first:*:border-t-0 md:*:border-t-0 xl:overflow-hidden md:flex-row leading-5',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;EAGA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,mBAOM,OAAA,eAAA,mBANW,MAAA,GAAE,CAAA,sHAAA,CAAA,CAAA,EAAA,CAKjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

package/dist/components/ViewLayout/ViewLayoutSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewLayoutSection.vue.js","names":[],"sources":["../../../src/components/ViewLayout/ViewLayoutSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <section\n    v-bind=\"\n      cx('xl:custom-scroll bg-b-1 flex flex-1 flex-col xl:h-full xl:min-w-0')\n    \">\n    <div\n      v-if=\"$slots.title\"\n      class=\"request-response-header bg-b-1 -mb-1/2 sticky top-0 z-1 flex min-h-11 items-center border-b px-2.5 text-base font-medium xl:rounded-none\">\n      <slot name=\"title\" />\n    </div>\n    <slot />\n  </section>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ViewLayoutSection.vue.js","names":[],"sources":["../../../src/components/ViewLayout/ViewLayoutSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <section\n    v-bind=\"\n      cx('xl:custom-scroll bg-b-1 flex flex-1 flex-col xl:h-full xl:min-w-0')\n    \">\n    <div\n      v-if=\"$slots.title\"\n      class=\"request-response-header bg-b-1 -mb-1/2 sticky top-0 z-1 flex min-h-11 items-center border-b px-2.5 text-base font-medium xl:rounded-none\">\n      <slot name=\"title\" />\n    </div>\n    <slot />\n  </section>\n</template>\n"],"mappings":""}

package/dist/components/ViewLayout/ViewLayoutSection.vue.script.js

@@ -1,5 +1,5 @@
 import { createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
-import { useBindCx } from "@scalar/components";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
 //#region src/components/ViewLayout/ViewLayoutSection.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,

package/dist/components/ViewLayout/ViewLayoutSection.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewLayoutSection.vue.script.js","names":["$slots"],"sources":["../../../src/components/ViewLayout/ViewLayoutSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <section\n    v-bind=\"\n      cx('xl:custom-scroll bg-b-1 flex flex-1 flex-col xl:h-full xl:min-w-0')\n    \">\n    <div\n      v-if=\"$slots.title\"\n      class=\"request-response-header bg-b-1 -mb-1/2 sticky top-0 z-1 flex min-h-11 items-center border-b px-2.5 text-base font-medium xl:rounded-none\">\n      <slot name=\"title\" />\n    </div>\n    <slot />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;EAKA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,mBAUU,WAAA,eAAA,mBATO,MAAA,GAAE,CAAA,oEAAA,CAAA,CAAA,EAAA,CAITA,KAAAA,OAAO,SAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EAEvB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ViewLayoutSection.vue.script.js","names":["$slots"],"sources":["../../../src/components/ViewLayout/ViewLayoutSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <section\n    v-bind=\"\n      cx('xl:custom-scroll bg-b-1 flex flex-1 flex-col xl:h-full xl:min-w-0')\n    \">\n    <div\n      v-if=\"$slots.title\"\n      class=\"request-response-header bg-b-1 -mb-1/2 sticky top-0 z-1 flex min-h-11 items-center border-b px-2.5 text-base font-medium xl:rounded-none\">\n      <slot name=\"title\" />\n    </div>\n    <slot />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;EAKA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,mBAUU,WAAA,eAAA,mBATO,MAAA,GAAE,CAAA,oEAAA,CAAA,CAAA,EAAA,CAITA,KAAAA,OAAO,SAAA,WAAA,EADf,mBAIM,OAJN,YAIM,CADJ,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EAEvB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}