@scalar/api-reference 1.57.2 → 1.57.4

package/dist/components/Content/Tags/components/ClassicLayout.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClassicLayout.vue.script.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport {\n  SectionContainerAccordion,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\n\nconst { tag, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  isCollapsed: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n\n<template>\n  <SectionContainerAccordion\n    :aria-label=\"tag.title\"\n    class=\"tag-section\"\n    :class=\"{ 'tag-section-group': tag.isGroup }\"\n    :modelValue=\"!isCollapsed\"\n    @update:modelValue=\"\n      (value) => eventBus?.emit('toggle:nav-item', { id: tag.id, open: value })\n    \">\n    <template #title>\n      <SectionHeader\n        class=\"tag-name\"\n        :class=\"{ 'tag-group-name': tag.isGroup }\">\n        <Anchor\n          @copyAnchorUrl=\"\n            () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n          \">\n          <SectionHeaderTag :level=\"2\">\n            {{ tag.title }}\n          </SectionHeaderTag>\n        </Anchor>\n      </SectionHeader>\n      <ScalarMarkdown\n        class=\"tag-description\"\n        :value=\"tag?.description\"\n        withImages />\n    </template>\n    <slot />\n  </SectionContainerAccordion>\n</template>\n\n<style scoped>\n.tag-section {\n  margin-bottom: 48px;\n}\n.tag-name {\n  text-transform: capitalize;\n}\n.tag-description {\n  padding-bottom: 4px;\n  text-align: left;\n}\n\n/* Tag Groups */\n.tag-section-group .tag-group-name {\n  gap: 12px;\n  align-self: stretch;\n  grid-template-columns: auto 1fr;\n}\n.tag-group-name:after {\n  content: '';\n  display: block;\n  height: 1px;\n  align-self: center;\n  background: var(--scalar-border-color);\n}\n.tag-group-name:has(* > *:hover),\n.tag-group-name:has(:focus-visible) {\n  gap: 32px;\n}\n.tag-section-group .tag-section {\n  padding-inline: 0;\n  margin-bottom: 24px;\n}\n.tag-section-group .tag-section:last-of-type {\n  margin-bottom: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;uBAoBE,YA2B4B,MAAA,kCAAA,EAAA;IA1BzB,cAAY,QAAA,IAAI;IACjB,OAAK,eAAA,CAAC,eAAa,EAAA,qBACY,QAAA,IAAI,SAAO,CAAA,CAAA;IACzC,YAAU,CAAG,QAAA;IACb,uBAAiB,OAAA,OAAA,OAAA,MAAU,UAAU,QAAA,UAAU,KAAI,mBAAA;KAAA,IAA0B,QAAA,IAAI;KAAE,MAAQ;KAAK,CAAA;;IAGtF,OAAK,cAYE,CAXhB,YAWgB,MAAA,sBAAA,EAAA,EAVd,OAAK,eAAA,CAAC,YAAU,EAAA,kBACY,QAAA,IAAI,SAAO,CAAA,CAAA,EAAA,EAAA;4BAQ9B,CAPT,YAOS,MAAA,eAAA,EAAA,EANN,iBAAa,OAAA,OAAA,OAAA,WAAqB,QAAA,UAAU,KAAI,qBAAA,EAAA,IAA4B,QAAA,IAAI,IAAE,CAAA,GAAA,EAAA;6BAKhE,CAFnB,YAEmB,MAAA,yBAAA,EAAA,EAFA,OAAO,GAAC,EAAA;8BACV,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;sBAIlB,YAGe,MAAA,eAAA,EAAA;KAFb,OAAM;KACL,OAAO,QAAA,KAAK;KACb,YAAA;;2BAEI,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"ClassicLayout.vue.script.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/ClassicLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport {\n  SectionContainerAccordion,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\n\nconst { tag, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  isCollapsed: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n\n<template>\n  <SectionContainerAccordion\n    :aria-label=\"tag.title\"\n    class=\"tag-section\"\n    :class=\"{ 'tag-section-group': tag.isGroup }\"\n    :modelValue=\"!isCollapsed\"\n    @update:modelValue=\"\n      (value) => eventBus?.emit('toggle:nav-item', { id: tag.id, open: value })\n    \">\n    <template #title>\n      <SectionHeader\n        class=\"tag-name\"\n        :class=\"{ 'tag-group-name': tag.isGroup }\">\n        <Anchor\n          @copyAnchorUrl=\"\n            () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n          \">\n          <SectionHeaderTag :level=\"2\">\n            {{ tag.title }}\n          </SectionHeaderTag>\n        </Anchor>\n      </SectionHeader>\n      <ScalarMarkdown\n        class=\"tag-description\"\n        :value=\"tag?.description\"\n        withImages />\n    </template>\n    <slot />\n  </SectionContainerAccordion>\n</template>\n\n<style scoped>\n.tag-section {\n  margin-bottom: 48px;\n}\n.tag-name {\n  text-transform: capitalize;\n}\n.tag-description {\n  padding-bottom: 4px;\n  text-align: left;\n}\n\n/* Tag Groups */\n.tag-section-group .tag-group-name {\n  gap: 12px;\n  align-self: stretch;\n  grid-template-columns: auto 1fr;\n}\n.tag-group-name:after {\n  content: '';\n  display: block;\n  height: 1px;\n  align-self: center;\n  background: var(--scalar-border-color);\n}\n.tag-group-name:has(* > *:hover),\n.tag-group-name:has(:focus-visible) {\n  gap: 32px;\n}\n.tag-section-group .tag-section {\n  padding-inline: 0;\n  margin-bottom: 24px;\n}\n.tag-section-group .tag-section:last-of-type {\n  margin-bottom: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;uBAoBE,YA2B4B,MAAA,kCAAA,EAAA;IA1BzB,cAAY,QAAA,IAAI;IACjB,OAAK,eAAA,CAAC,eAAa,EAAA,qBACY,QAAA,IAAI,SAAO,CAAA,CAAA;IACzC,YAAU,CAAG,QAAA;IACb,uBAAiB,OAAA,OAAA,OAAA,MAAU,UAAU,QAAA,UAAU,KAAI,mBAAA;KAAA,IAA0B,QAAA,IAAI;KAAE,MAAQ;KAAK,CAAA;;IAGtF,OAAK,cAYE,CAXhB,YAWgB,MAAA,sBAAA,EAAA,EAVd,OAAK,eAAA,CAAC,YAAU,EAAA,kBACY,QAAA,IAAI,SAAO,CAAA,CAAA,EAAA,EAAA;4BAQ9B,CAPT,YAOS,MAAA,eAAA,EAAA,EANN,iBAAa,OAAA,OAAA,OAAA,WAAqB,QAAA,UAAU,KAAI,qBAAA,EAAA,IAA4B,QAAA,IAAI,IAAE,CAAA,GAAA,EAAA;6BAKhE,CAFnB,YAEmB,MAAA,yBAAA,EAAA,EAFA,OAAO,GAAC,EAAA;8BACV,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;sBAIlB,YAGe,MAAA,eAAA,EAAA;KAFb,OAAM;KACL,OAAO,QAAA,KAAK;KACb,YAAA;;2BAEI,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA"}

package/dist/components/Content/Tags/components/TagSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSection.vue.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  isLoading?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader v-show=\"!isLoading\">\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\"> (Collapsed)</ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent :loading=\"isLoading\">\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TagSection.vue.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  isLoading?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader v-show=\"!isLoading\">\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\"> (Collapsed)</ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent :loading=\"isLoading\">\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":""}

package/dist/components/Content/Tags/components/TagSection.vue.script.js

@@ -9,7 +9,7 @@ import Anchor_default from "../../../Anchor/Anchor.vue.js";
 import SpecificationExtension_default from "../../../../features/specification-extension/SpecificationExtension.vue.js";
 import OperationsList_default from "../../../OperationsList/OperationsList.vue.js";
 import { createBlock, createCommentVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, vShow, withCtx, withDirectives } from "vue";
-import { ScalarMarkdown } from "@scalar/components";
+import { ScalarMarkdown } from "@scalar/components/markdown";
 //#region src/components/Content/Tags/components/TagSection.vue?vue&type=script&setup=true&lang.ts
 var TagSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "TagSection",

package/dist/components/Content/Tags/components/TagSection.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSection.vue.script.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  isLoading?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader v-show=\"!isLoading\">\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\"> (Collapsed)</ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent :loading=\"isLoading\">\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;UA4BU,QAAA,OAAA,WAAA,EADR,YAoCU,MAAA,gBAAA,EAAA;;IAlCP,IAAI,QAAA,IAAI;IACT,MAAK;IACJ,gBAAY,OAAA,OAAA,OAAA,WAAe,QAAA,UAAU,KAAI,yBAAA,EAAA,IAAgC,QAAA,IAAI,IAAE,CAAA;;2BAehE;oBAZhB,YAYgB,MAAA,sBAAA,EAAA,MAAA;6BADL,CAVT,YAUS,MAAA,eAAA,EAAA,EATN,iBAAa,OAAA,OAAA,OAAA,WAAmB,QAAA,UAAU,KAAI,qBAAA,EAAA,IAA4B,QAAA,IAAI,IAAE,CAAA,GAAA,EAAA;8BAQ9D,CALnB,YAKmB,MAAA,yBAAA,EAAA;QAJhB,IAAI,QAAA;QACJ,OAAO;;+BACO,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,GAAG,KACf,EAAA,EAAoB,QAAA,eAAA,WAAA,EAApB,YAA4D,sBAAA,EAAA,KAAA,GAAA,EAAA;gCAAf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAZ,gBAAY,GAAA,CAAA,EAAA,CAAA;;;;;;;;wBAT3B,QAAA,UAAS,CAAA,CAAA;KAajC,YAciB,MAAA,uBAAA,EAAA,EAdA,SAAS,QAAA,WAAS,EAAA;6BAahB,CAZjB,YAYiB,MAAA,uBAAA,EAAA,MAAA;8BANC,CALhB,YAKgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAHf,YAGe,MAAA,eAAA,EAAA;SAFZ,OAAO,QAAA,cAAW,IAAO,KAAA;SACzB,OAAO,QAAA,KAAK,eAAW;SACxB,YAAA;;;WAEJ,YAIgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAFf,YAEe,MAAA,uBAAA,EAAA;SADZ,UAAU,QAAA;SACV,KAAK,QAAA;;;;;;;;KAId,YAA6C,MAAA,+BAAA,EAAA,EAApB,OAAO,QAAA,IAAI,OAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}
+{"version":3,"file":"TagSection.vue.script.js","names":[],"sources":["../../../../../src/components/Content/Tags/components/TagSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\n\nimport { Anchor } from '@/components/Anchor'\nimport { OperationsList } from '@/components/OperationsList'\nimport ScreenReader from '@/components/ScreenReader.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport { SpecificationExtension } from '@/features/specification-extension'\n\nconst { tag, headerId, isCollapsed } = defineProps<{\n  tag: TraversedTag\n  headerId?: string\n  isCollapsed?: boolean\n  isLoading?: boolean\n  eventBus: WorkspaceEventBus | null\n}>()\n</script>\n<template>\n  <Section\n    v-if=\"tag\"\n    :id=\"tag.id\"\n    role=\"none\"\n    @intersecting=\"\n      () => eventBus?.emit('intersecting:nav-item', { id: tag.id })\n    \">\n    <SectionHeader v-show=\"!isLoading\">\n      <Anchor\n        @copyAnchorUrl=\"\n          () => eventBus?.emit('copy-url:nav-item', { id: tag.id })\n        \">\n        <SectionHeaderTag\n          :id=\"headerId\"\n          :level=\"2\">\n          {{ tag.title }}\n          <ScreenReader v-if=\"isCollapsed\"> (Collapsed)</ScreenReader>\n        </SectionHeaderTag>\n      </Anchor>\n    </SectionHeader>\n    <SectionContent :loading=\"isLoading\">\n      <SectionColumns>\n        <SectionColumn>\n          <ScalarMarkdown\n            :clamp=\"isCollapsed ? 7 : undefined\"\n            :value=\"tag?.description ?? ''\"\n            withImages />\n        </SectionColumn>\n        <SectionColumn>\n          <OperationsList\n            :eventBus=\"eventBus\"\n            :tag=\"tag\" />\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n    <SpecificationExtension :value=\"tag.xKeys\" />\n  </Section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;UA4BU,QAAA,OAAA,WAAA,EADR,YAoCU,MAAA,gBAAA,EAAA;;IAlCP,IAAI,QAAA,IAAI;IACT,MAAK;IACJ,gBAAY,OAAA,OAAA,OAAA,WAAe,QAAA,UAAU,KAAI,yBAAA,EAAA,IAAgC,QAAA,IAAI,IAAE,CAAA;;2BAehE;oBAZhB,YAYgB,MAAA,sBAAA,EAAA,MAAA;6BADL,CAVT,YAUS,MAAA,eAAA,EAAA,EATN,iBAAa,OAAA,OAAA,OAAA,WAAmB,QAAA,UAAU,KAAI,qBAAA,EAAA,IAA4B,QAAA,IAAI,IAAE,CAAA,GAAA,EAAA;8BAQ9D,CALnB,YAKmB,MAAA,yBAAA,EAAA;QAJhB,IAAI,QAAA;QACJ,OAAO;;+BACO,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,GAAG,KACf,EAAA,EAAoB,QAAA,eAAA,WAAA,EAApB,YAA4D,sBAAA,EAAA,KAAA,GAAA,EAAA;gCAAf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAZ,gBAAY,GAAA,CAAA,EAAA,CAAA;;;;;;;;wBAT3B,QAAA,UAAS,CAAA,CAAA;KAajC,YAciB,MAAA,uBAAA,EAAA,EAdA,SAAS,QAAA,WAAS,EAAA;6BAahB,CAZjB,YAYiB,MAAA,uBAAA,EAAA,MAAA;8BANC,CALhB,YAKgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAHf,YAGe,MAAA,eAAA,EAAA;SAFZ,OAAO,QAAA,cAAW,IAAO,KAAA;SACzB,OAAO,QAAA,KAAK,eAAW;SACxB,YAAA;;;WAEJ,YAIgB,MAAA,sBAAA,EAAA,MAAA;+BADC,CAFf,YAEe,MAAA,uBAAA,EAAA;SADZ,UAAU,QAAA;SACV,KAAK,QAAA;;;;;;;;KAId,YAA6C,MAAA,+BAAA,EAAA,EAApB,OAAO,QAAA,IAAI,OAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}

package/dist/components/GettingStarted.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import GettingStarted_vue_vue_type_script_setup_true_lang_default from "./GettingStarted.vue.script.js";
 /* empty css                             */
 //#region src/components/GettingStarted.vue
-var GettingStarted_default = /* @__PURE__ */ _plugin_vue_export_helper_default(GettingStarted_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8ab3de01"]]);
+var GettingStarted_default = /* @__PURE__ */ _plugin_vue_export_helper_default(GettingStarted_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-68d4d91b"]]);
 //#endregion
 export { GettingStarted_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"GettingStarted.vue.js","names":[],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\ndefineProps<{\n  theme: ThemeId\n}>()\n\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">Swagger Editor</h1>\n      <p class=\"start-p\">\n        Welcome to the Scalar API References + Swagger Editor, a Free &\n        Open-Source tool that takes your Swagger/OAS file and generates\n        Beautiful API references.\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          Show Example\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          Upload File\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">INTEGRATIONS</div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">THEMING</p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">Features</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">Customize</p>\n        Bring your typography & color palettes, or use our themes!\n      </li>\n      <li>\n        <p class=\"start-h3\">Testing</p>\n        A deeply integrated Rest API Client (Also Free & Open-Source)\n      </li>\n      <li>\n        <p class=\"start-h3\">Search</p>\n        Fully integrated Search (Using fuse.js)\n      </li>\n      <li>\n        <p class=\"start-h3\">Hosting</p>\n        Free subdomain hosting on https://apidocumentation.com\n      </li>\n      <li>\n        <p class=\"start-h3\">OpenAPI & Swagger</p>\n        Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0\n      </li>\n      <li>\n        <p class=\"start-h3\">Code Samples</p>\n        Code samples to show off your API in most popular languages\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"GettingStarted.vue.js","names":[],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\ndefineProps<{\n  theme: ThemeId\n}>()\n\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">Swagger Editor</h1>\n      <p class=\"start-p\">\n        Welcome to the Scalar API References + Swagger Editor, a Free &\n        Open-Source tool that takes your Swagger/OAS file and generates\n        Beautiful API references.\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          Show Example\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          Upload File\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">INTEGRATIONS</div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">THEMING</p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">Features</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">Customize</p>\n        Bring your typography & color palettes, or use our themes!\n      </li>\n      <li>\n        <p class=\"start-h3\">Testing</p>\n        A deeply integrated Rest API Client (Also Free & Open-Source)\n      </li>\n      <li>\n        <p class=\"start-h3\">Search</p>\n        Fully integrated Search (Using fuse.js)\n      </li>\n      <li>\n        <p class=\"start-h3\">Hosting</p>\n        Free subdomain hosting on https://apidocumentation.com\n      </li>\n      <li>\n        <p class=\"start-h3\">OpenAPI & Swagger</p>\n        Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0\n      </li>\n      <li>\n        <p class=\"start-h3\">Code Samples</p>\n        Code samples to show off your API in most popular languages\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import { Fragment, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
-import { ScalarButton } from "@scalar/components";
 import { themeLabels } from "@scalar/themes";
+import { ScalarButton } from "@scalar/components/button";
 //#region src/components/GettingStarted.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "custom-scroll start" };
 var _hoisted_2 = { class: "start-copy" };
@@ -36,7 +36,7 @@ var GettingStarted_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
-				createElementVNode("div", _hoisted_2, [_cache[3] || (_cache[3] = createStaticVNode("<div class=\"start-logo\" data-v-8ab3de01><svg height=\"36\" viewBox=\"0 0 36 36\" width=\"36\" xmlns=\"http://www.w3.org/2000/svg\" data-v-8ab3de01><path d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\" fill=\"currentColor\" fill-rule=\"evenodd\" data-v-8ab3de01></path></svg></div><h1 class=\"start-h1\" data-v-8ab3de01>Swagger Editor</h1><p class=\"start-p\" data-v-8ab3de01> Welcome to the Scalar API References + Swagger Editor, a Free &amp; Open-Source tool that takes your Swagger/OAS file and generates Beautiful API references. </p>", 3)), createElementVNode("div", _hoisted_3, [createVNode(unref(ScalarButton), {
+				createElementVNode("div", _hoisted_2, [_cache[3] || (_cache[3] = createStaticVNode("<div class=\"start-logo\" data-v-68d4d91b><svg height=\"36\" viewBox=\"0 0 36 36\" width=\"36\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><path d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\" fill=\"currentColor\" fill-rule=\"evenodd\" data-v-68d4d91b></path></svg></div><h1 class=\"start-h1\" data-v-68d4d91b>Swagger Editor</h1><p class=\"start-p\" data-v-68d4d91b> Welcome to the Scalar API References + Swagger Editor, a Free &amp; Open-Source tool that takes your Swagger/OAS file and generates Beautiful API references. </p>", 3)), createElementVNode("div", _hoisted_3, [createVNode(unref(ScalarButton), {
 					class: "w-full",
 					onClick: fetchExampleSpecification
 				}, {
@@ -50,7 +50,7 @@ var GettingStarted_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Upload File ", -1)])]),
 					_: 1
 				})])]),
-				createElementVNode("div", _hoisted_4, [_cache[5] || (_cache[5] = createStaticVNode("<div class=\"start-section start-section-integrations\" data-v-8ab3de01><div class=\"start-h2\" data-v-8ab3de01>INTEGRATIONS</div><a class=\"start-item\" href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\" target=\"_blank\" data-v-8ab3de01><svg fill=\"currentColor\" height=\"16\" viewBox=\"0 0 19 16\" width=\"19\" xmlns=\"http://www.w3.org/2000/svg\" data-v-8ab3de01><path d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\" fill=\"currentColor\" fill-rule=\"nonzero\" data-v-8ab3de01></path></svg><span data-v-8ab3de01>Fastify</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\" target=\"_blank\" data-v-8ab3de01><svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" data-v-8ab3de01><g data-v-8ab3de01><path d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\" fill=\"currentColor\" data-v-8ab3de01></path><path d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-8ab3de01></path><path d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-8ab3de01></path></g></svg><span data-v-8ab3de01>CDN</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\" target=\"_blank\" data-v-8ab3de01><svg height=\"170\" viewBox=\"0 0 196.3 170\" width=\"196.3\" xmlns=\"http://www.w3.org/2000/svg\" data-v-8ab3de01><g fill=\"currentColor\" fill-rule=\"nonzero\" data-v-8ab3de01><polygon points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" data-v-8ab3de01></polygon><polygon points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" data-v-8ab3de01></polygon></g></svg><span data-v-8ab3de01>Vue</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\" target=\"_blank\" data-v-8ab3de01><svg height=\"23.3\" viewBox=\"0 0 22 23.3\" width=\"22\" xmlns=\"http://www.w3.org/2000/svg\" data-v-8ab3de01><g fill=\"none\" fill-rule=\"evenodd\" data-v-8ab3de01><circle cx=\"11\" cy=\"11.6\" fill=\"currentColor\" fill-rule=\"nonzero\" r=\"2\" data-v-8ab3de01></circle><g stroke=\"currentColor\" data-v-8ab3de01><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" data-v-8ab3de01></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(60 11 11.6)\" data-v-8ab3de01></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(120 11 11.6)\" data-v-8ab3de01></ellipse></g></g></svg><span data-v-8ab3de01>React</span></a></div>", 1)), createElementVNode("div", _hoisted_5, [_cache[4] || (_cache[4] = createElementVNode("p", { class: "start-h2" }, "THEMING", -1)), (openBlock(), createElementBlock(Fragment, null, renderList(themeIds, (themeId) => {
+				createElementVNode("div", _hoisted_4, [_cache[5] || (_cache[5] = createStaticVNode("<div class=\"start-section start-section-integrations\" data-v-68d4d91b><div class=\"start-h2\" data-v-68d4d91b>INTEGRATIONS</div><a class=\"start-item\" href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\" target=\"_blank\" data-v-68d4d91b><svg fill=\"currentColor\" height=\"16\" viewBox=\"0 0 19 16\" width=\"19\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><path d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\" fill=\"currentColor\" fill-rule=\"nonzero\" data-v-68d4d91b></path></svg><span data-v-68d4d91b>Fastify</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\" target=\"_blank\" data-v-68d4d91b><svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><g data-v-68d4d91b><path d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\" fill=\"currentColor\" data-v-68d4d91b></path><path d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-68d4d91b></path><path d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\" fill=\"currentColor\" data-v-68d4d91b></path></g></svg><span data-v-68d4d91b>CDN</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\" target=\"_blank\" data-v-68d4d91b><svg height=\"170\" viewBox=\"0 0 196.3 170\" width=\"196.3\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><g fill=\"currentColor\" fill-rule=\"nonzero\" data-v-68d4d91b><polygon points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" data-v-68d4d91b></polygon><polygon points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" data-v-68d4d91b></polygon></g></svg><span data-v-68d4d91b>Vue</span></a><a class=\"start-item\" href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\" target=\"_blank\" data-v-68d4d91b><svg height=\"23.3\" viewBox=\"0 0 22 23.3\" width=\"22\" xmlns=\"http://www.w3.org/2000/svg\" data-v-68d4d91b><g fill=\"none\" fill-rule=\"evenodd\" data-v-68d4d91b><circle cx=\"11\" cy=\"11.6\" fill=\"currentColor\" fill-rule=\"nonzero\" r=\"2\" data-v-68d4d91b></circle><g stroke=\"currentColor\" data-v-68d4d91b><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" data-v-68d4d91b></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(60 11 11.6)\" data-v-68d4d91b></ellipse><ellipse cx=\"11\" cy=\"11.6\" rx=\"11\" ry=\"4.2\" transform=\"rotate(120 11 11.6)\" data-v-68d4d91b></ellipse></g></g></svg><span data-v-68d4d91b>React</span></a></div>", 1)), createElementVNode("div", _hoisted_5, [_cache[4] || (_cache[4] = createElementVNode("p", { class: "start-h2" }, "THEMING", -1)), (openBlock(), createElementBlock(Fragment, null, renderList(themeIds, (themeId) => {
 					return createElementVNode("div", {
 						key: themeId,
 						class: normalizeClass(["start-item", { "start-item-active": themeId === __props.theme }]),
@@ -60,7 +60,7 @@ var GettingStarted_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						})
 					}, toDisplayString(unref(themeLabels)[themeId]), 11, _hoisted_6);
 				}), 64))])]),
-				_cache[6] || (_cache[6] = createStaticVNode("<p class=\"start-h1\" data-v-8ab3de01>Features</p><ul class=\"start-ul\" data-v-8ab3de01><li data-v-8ab3de01><p class=\"start-h3\" data-v-8ab3de01>Customize</p> Bring your typography &amp; color palettes, or use our themes! </li><li data-v-8ab3de01><p class=\"start-h3\" data-v-8ab3de01>Testing</p> A deeply integrated Rest API Client (Also Free &amp; Open-Source) </li><li data-v-8ab3de01><p class=\"start-h3\" data-v-8ab3de01>Search</p> Fully integrated Search (Using fuse.js) </li><li data-v-8ab3de01><p class=\"start-h3\" data-v-8ab3de01>Hosting</p> Free subdomain hosting on https://apidocumentation.com </li><li data-v-8ab3de01><p class=\"start-h3\" data-v-8ab3de01>OpenAPI &amp; Swagger</p> Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0 </li><li data-v-8ab3de01><p class=\"start-h3\" data-v-8ab3de01>Code Samples</p> Code samples to show off your API in most popular languages </li></ul>", 2))
+				_cache[6] || (_cache[6] = createStaticVNode("<p class=\"start-h1\" data-v-68d4d91b>Features</p><ul class=\"start-ul\" data-v-68d4d91b><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Customize</p> Bring your typography &amp; color palettes, or use our themes! </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Testing</p> A deeply integrated Rest API Client (Also Free &amp; Open-Source) </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Search</p> Fully integrated Search (Using fuse.js) </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Hosting</p> Free subdomain hosting on https://apidocumentation.com </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>OpenAPI &amp; Swagger</p> Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0 </li><li data-v-68d4d91b><p class=\"start-h3\" data-v-68d4d91b>Code Samples</p> Code samples to show off your API in most popular languages </li></ul>", 2))
 			]);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"GettingStarted.vue.script.js","names":["$emit"],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\ndefineProps<{\n  theme: ThemeId\n}>()\n\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">Swagger Editor</h1>\n      <p class=\"start-p\">\n        Welcome to the Scalar API References + Swagger Editor, a Free &\n        Open-Source tool that takes your Swagger/OAS file and generates\n        Beautiful API references.\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          Show Example\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          Upload File\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">INTEGRATIONS</div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">THEMING</p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">Features</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">Customize</p>\n        Bring your typography & color palettes, or use our themes!\n      </li>\n      <li>\n        <p class=\"start-h3\">Testing</p>\n        A deeply integrated Rest API Client (Also Free & Open-Source)\n      </li>\n      <li>\n        <p class=\"start-h3\">Search</p>\n        Fully integrated Search (Using fuse.js)\n      </li>\n      <li>\n        <p class=\"start-h3\">Hosting</p>\n        Free subdomain hosting on https://apidocumentation.com\n      </li>\n      <li>\n        <p class=\"start-h3\">OpenAPI & Swagger</p>\n        Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0\n      </li>\n      <li>\n        <p class=\"start-h3\">Code Samples</p>\n        Code samples to show off your API in most popular languages\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAOd,MAAM,WAAsB;GAC1B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACF;EAEA,eAAe,4BAA4B;AAKzC,SAAM,iBAAiB,OAJN,MAAM,MACrB,8DACF,EAEsC,MAAM,CAAA;;;uBAI5C,mBAmLM,OAnLN,YAmLM;IAlLJ,mBAgCM,OAhCN,YAgCM,CAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,4rBAAA,EAAA,GAbJ,mBAYM,OAZN,YAYM,CAXJ,YAIe,MAAA,aAAA,EAAA;KAHb,OAAM;KACL,SAAO;;4BAEV,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFqC,kBAErC,GAAA,CAAA,EAAA,CAAA;;QACA,YAKe,MAAA,aAAA,EAAA;KAJb,OAAM;KACN,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,kBAAA;;4BAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFoC,iBAEpC,GAAA,CAAA,EAAA,CAAA;;;IAGJ,mBAqHM,OArHN,YAqHM,CAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,inHAAA,EAAA,GAbJ,mBAYM,OAZN,YAYM,CAAA,OAAA,OAAA,OAAA,KAXJ,mBAA+B,KAAA,EAA5B,OAAM,YAAU,EAAC,WAAO,GAAA,IAAA,WAAA,EAC3B,mBASM,UAAA,MAAA,WARc,WAAX,YAAO;YADhB,mBASM,OAAA;MAPH,KAAK;MACN,OAAK,eAAA,CAAC,cAAY,EAAA,qBACa,YAAY,QAAA,OAAK,CAAA,CAAA;MAC/C,UAAK,WAAeA,KAAAA,MAAK,eAAA;OAAA,IAAsB;OAAO,OAAS,MAAA,YAAW,CAAC;OAAO,CAAA;wBAGhF,MAAA,YAAW,CAAC,SAAO,EAAA,IAAA,WAAA"}
+{"version":3,"file":"GettingStarted.vue.script.js","names":["$emit"],"sources":["../../src/components/GettingStarted.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { themeLabels, type ThemeId } from '@scalar/themes'\n\ndefineProps<{\n  theme: ThemeId\n}>()\n\nconst emits = defineEmits<{\n  (e: 'changeTheme', { id, label }: { id: ThemeId; label: string }): void\n  (e: 'loadSwaggerFile'): void\n  (e: 'linkSwaggerFile'): void\n  (e: 'updateContent', value: string): void\n}>()\n\nconst themeIds: ThemeId[] = [\n  'default',\n  'alternate',\n  'moon',\n  'purple',\n  'solarized',\n  'bluePlanet',\n  'saturn',\n  'kepler',\n  'mars',\n  'deepSpace',\n]\n\nasync function fetchExampleSpecification() {\n  const response = await fetch(\n    'https://registry.scalar.com/@scalar/apis/galaxy?format=yaml',\n  )\n\n  emits('updateContent', await response.text())\n}\n</script>\n<template>\n  <div class=\"custom-scroll start\">\n    <div class=\"start-copy\">\n      <div class=\"start-logo\">\n        <svg\n          height=\"36\"\n          viewBox=\"0 0 36 36\"\n          width=\"36\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M18 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36Zm11.2 6.5c-3.3-3.3-11.1-1-17.4 5.3-6.2 6.3-8.6 14-5.3 17.4 3.3 3.3 11 .9 17.3-5.4 6.3-6.2 8.7-14 5.4-17.3ZM17.6 12a6.3 6.3 0 1 1 0 12.7 6.3 6.3 0 0 1 0-12.7Z\"\n            fill=\"currentColor\"\n            fill-rule=\"evenodd\" />\n        </svg>\n      </div>\n      <h1 class=\"start-h1\">Swagger Editor</h1>\n      <p class=\"start-p\">\n        Welcome to the Scalar API References + Swagger Editor, a Free &\n        Open-Source tool that takes your Swagger/OAS file and generates\n        Beautiful API references.\n      </p>\n      <div class=\"start-cta\">\n        <ScalarButton\n          class=\"w-full\"\n          @click=\"fetchExampleSpecification\">\n          Show Example\n        </ScalarButton>\n        <ScalarButton\n          class=\"w-full\"\n          variant=\"outlined\"\n          @click=\"$emit('loadSwaggerFile')\">\n          Upload File\n        </ScalarButton>\n      </div>\n    </div>\n    <div class=\"start-row\">\n      <div class=\"start-section start-section-integrations\">\n        <div class=\"start-h2\">INTEGRATIONS</div>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/tree/main/integrations/fastify#readme\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 19 16\"\n            width=\"19\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"m18.2 3.1.8-2V.9l-4.7 1.3C15.2 1 15 0 15 0s-2.5 1.6-4.3 1.5c-2 0-3.6.8-4 1-1.8 1.2-2.5 3.3-3.2 3.8L0 8.9 2.3 8l-2 2.5c.2.3 1.2 1.6 2.1 1.3l.4-.1 1.6.5-.7-1 .2-.2.9.3-.1-.8.9.3-.1-.8.3-.1 1-3.5 3.7-2.6-.3.7A4 4 0 0 1 8 7l-.6.2c-.5.5-.7.7-.8 2.5a2 2 0 0 1 1 0c1.6.4 2.2 2.3 1.7 2.9l-.7.6H8v.6h-.7v.5l-.2.2c-.7 0-1.4-.6-1.4-.6 0 .5.4 1.3.4 1.3s1.7 1.1 2.7.7c1-.4.7-2.3 2.8-3.2l3.3-.9.8-2.2-1.7.5v-2l2.5-.6.9-2.2-3.4.9v-2l4.2-1.1Z\"\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\" />\n          </svg>\n          <span>Fastify</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/documentation/integrations/html-js.md#html\"\n          target=\"_blank\">\n          <svg\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <path\n                d=\"M22.5 1.5h-21A1.5 1.5 0 0 0 0 3v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 6V3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3A1.25 1.25 0 1 1 4.5 5.75 1.25 1.25 0 0 1 3.25 4.5ZM8.5 5.75A1.25 1.25 0 1 1 9.75 4.5 1.25 1.25 0 0 1 8.5 5.75Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 9h-21A1.5 1.5 0 0 0 0 10.5v3A1.5 1.5 0 0 0 1.5 15h21a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 22.5 9ZM3.25 12a1.25 1.25 0 1 1 1.25 1.25A1.25 1.25 0 0 1 3.25 12Zm5.25 1.25A1.25 1.25 0 1 1 9.75 12a1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n              <path\n                d=\"M22.5 16.5h-21A1.5 1.5 0 0 0 0 18v3a1.5 1.5 0 0 0 1.5 1.5h21A1.5 1.5 0 0 0 24 21v-3a1.5 1.5 0 0 0-1.5-1.5Zm-19.25 3a1.25 1.25 0 1 1 1.25 1.25 1.25 1.25 0 0 1-1.25-1.25Zm5.25 1.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25Z\"\n                fill=\"currentColor\" />\n            </g>\n          </svg>\n          <span>CDN</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference/README.md#vuejs\"\n          target=\"_blank\">\n          <svg\n            height=\"170\"\n            viewBox=\"0 0 196.3 170\"\n            width=\"196.3\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"currentColor\"\n              fill-rule=\"nonzero\">\n              <polygon\n                points=\"39.23 0 0 0 2.9450761 5.1010782 98.16 170.02 196.32 0 157.06 0 98.16 102.01 42.175701 5.0991171\" />\n              <polygon\n                points=\"75.5 2.009956e-14 0 2.009956e-14 2.94 5.1 78.44871 5.1 98.16 39.26 117.87937 5.1 193.38 5.1 196.325 0 120.82 7.8065636e-15 114.97322 2.009956e-14 98.16 29.037153 81.35 2.009956e-14\" />\n            </g>\n          </svg>\n          <span>Vue</span>\n        </a>\n        <a\n          class=\"start-item\"\n          href=\"https://github.com/scalar/scalar/blob/main/packages/api-reference-react/README.md#usage\"\n          target=\"_blank\">\n          <svg\n            height=\"23.3\"\n            viewBox=\"0 0 22 23.3\"\n            width=\"22\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <g\n              fill=\"none\"\n              fill-rule=\"evenodd\">\n              <circle\n                cx=\"11\"\n                cy=\"11.6\"\n                fill=\"currentColor\"\n                fill-rule=\"nonzero\"\n                r=\"2\" />\n              <g stroke=\"currentColor\">\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(60 11 11.6)\" />\n                <ellipse\n                  cx=\"11\"\n                  cy=\"11.6\"\n                  rx=\"11\"\n                  ry=\"4.2\"\n                  transform=\"rotate(120 11 11.6)\" />\n              </g>\n            </g>\n          </svg>\n          <span>React</span>\n        </a>\n      </div>\n      <div class=\"start-section start-section-colors\">\n        <p class=\"start-h2\">THEMING</p>\n        <div\n          v-for=\"themeId in themeIds\"\n          :key=\"themeId\"\n          class=\"start-item\"\n          :class=\"{ 'start-item-active': themeId === theme }\"\n          @click=\"\n            $emit('changeTheme', { id: themeId, label: themeLabels[themeId] })\n          \">\n          {{ themeLabels[themeId] }}\n        </div>\n      </div>\n    </div>\n    <p class=\"start-h1\">Features</p>\n    <ul class=\"start-ul\">\n      <li>\n        <p class=\"start-h3\">Customize</p>\n        Bring your typography & color palettes, or use our themes!\n      </li>\n      <li>\n        <p class=\"start-h3\">Testing</p>\n        A deeply integrated Rest API Client (Also Free & Open-Source)\n      </li>\n      <li>\n        <p class=\"start-h3\">Search</p>\n        Fully integrated Search (Using fuse.js)\n      </li>\n      <li>\n        <p class=\"start-h3\">Hosting</p>\n        Free subdomain hosting on https://apidocumentation.com\n      </li>\n      <li>\n        <p class=\"start-h3\">OpenAPI & Swagger</p>\n        Support for OpenAPI 3.1, OpenAPI 3.0, and Swagger 2.0\n      </li>\n      <li>\n        <p class=\"start-h3\">Code Samples</p>\n        Code samples to show off your API in most popular languages\n      </li>\n    </ul>\n  </div>\n</template>\n<style scoped>\n.start {\n  padding: 24px;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: space-between;\n  position: relative;\n  z-index: 0;\n}\n.swagger-editor .start {\n  padding-top: 24px;\n}\n.start-h1 {\n  font-size: var(--scalar-heading-2);\n  margin-top: 0;\n  line-height: 1.45;\n  margin-bottom: 0;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n  position: relative;\n}\n.start-h3 {\n  font-size: var(--scalar-paragraph);\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  line-height: 1.45;\n  font-weight: var(--scalar-bold);\n  color: var(--scalar-color-1);\n  width: 100%;\n}\n.start-h1:not(:first-of-type) {\n  margin-top: 24px;\n}\n.start-p {\n  font-size: var(--scalar-paragraph);\n  color: var(--scalar-color-2);\n  line-height: 1.5;\n  width: 100%;\n  margin-top: 12px;\n}\n.start-ul {\n  margin-top: 12px;\n  font-size: var(--scalar-paragraph);\n  line-height: 1.5;\n  padding-left: 0;\n  list-style: initial;\n  display: flex;\n  flex-flow: wrap;\n  gap: 24px;\n}\n.start-ul li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  width: calc(50% - 24px);\n  color: var(--scalar-color-2);\n}\n.start-ul li:first-of-type {\n  margin-top: 0;\n}\n.start-section {\n  width: 100%;\n  margin-bottom: 12px;\n  display: flex;\n  flex-flow: wrap;\n}\n.start-section:last-of-type {\n  margin-bottom: 48px;\n}\n.start-h2 {\n  background: var(--scalar-background-2);\n  border-top-left-radius: var(--scalar-radius-lg);\n  border-top-right-radius: var(--scalar-radius-lg);\n  border: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  width: 100%;\n}\n.start-item {\n  align-items: center;\n  background: var(--scalar-background-2);\n  border-right: 1px solid var(--scalar-border-color);\n  border-bottom: 1px solid var(--scalar-border-color);\n  color: var(--scalar-color-1);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-size: var(--scalar-mini);\n  font-weight: var(--scalar-semibold);\n  padding: 9px;\n  text-transform: capitalize;\n  user-select: none;\n}\n.start-section-integrations .start-item:first-of-type {\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-integrations .start-item:last-of-type {\n  border-bottom-right-radius: var(--scalar-radius-lg);\n}\n.start-section-colors .start-item {\n  min-width: 33.33%;\n}\n.start-section-colors .start-item:nth-child(3n + 2) {\n  border-left: 1px solid var(--scalar-border-color);\n}\n.start-section-colors .start-item:last-of-type,\n.start-section-colors .start-item-active:last-of-type::before {\n  border-radius: 0 0 var(--scalar-radius-lg) var(--scalar-radius-lg);\n}\n.start-item:empty {\n  pointer-events: none;\n}\n.start-item svg {\n  width: 14px;\n  height: 14px;\n  margin-right: 6px;\n}\n.start-item:hover {\n  background: var(--scalar-background-3);\n}\n.start-item-active {\n  z-index: 10;\n  position: relative;\n  color: var(--scalar-color-1);\n}\n.start-item-active::before {\n  border: 1px solid var(--scalar-color-1);\n  content: '';\n  inset: -1px -1px -1px -1px;\n  pointer-events: none;\n  position: absolute;\n}\n.start-section-color .start-item {\n  text-transform: capitalize;\n}\n.start-cta {\n  display: flex;\n  gap: 12px;\n  width: 100%;\n  margin-top: 24px;\n  margin-bottom: 0;\n}\n.start-row {\n  width: 100%;\n  margin-top: 12px;\n  overflow: hidden;\n}\n.start-hero-copy {\n  background: var(--scalar-background-2);\n  padding: 12px;\n  border-radius: var(--scalar-radius-lg);\n}\n.start-p-small {\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-mini);\n  color: var(--scalar-color-2);\n  margin-bottom: 12px;\n  line-height: 1.4;\n}\n.start-cta {\n  margin-bottom: 12px;\n  width: fit-content;\n  white-space: nowrap;\n}\n.start-copy {\n  padding: 76px 48px 48px 48px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n}\n.start-logo {\n  color: var(--scalar-color-1);\n  margin-bottom: 24px;\n  width: 72px;\n  aspect-ratio: 1;\n  position: relative;\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: 50%;\n}\n.start-logo:before {\n  content: '';\n  width: 300%;\n  aspect-ratio: 1;\n  left: -100%;\n  top: -100%;\n  position: absolute;\n  z-index: -1;\n  border-radius: 50%;\n  background-size: 24px 24px;\n  box-shadow:\n    inset 0 0 50px var(--scalar-background-1),\n    inset 0 0 50px var(--scalar-background-1);\n  background-image:\n    linear-gradient(to right, var(--scalar-border-color) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--scalar-border-color) 1px, transparent 1px);\n}\n.start-logo svg {\n  width: 100%;\n  height: auto;\n  background: var(--scalar-background-1);\n  padding: 3px;\n  border-radius: 50%;\n  position: relative;\n}\n@media screen and (max-width: 600px) {\n  .start-section-colors .start-item,\n  .start-item {\n    width: 100%;\n    border-radius: 0;\n    border-right: none;\n    border-top: 1px solid var(--scalar-border-color);\n  }\n  .start-item:empty {\n    display: none;\n  }\n  .start-h2 {\n    border-bottom: none;\n  }\n  .start li {\n    width: 100%;\n  }\n  .start-copy {\n    padding: 48px 0 24px 0;\n  }\n}\n@media screen and (max-width: 1000px) {\n  .start {\n    padding: 0;\n    overflow: auto;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAOd,MAAM,WAAsB;GAC1B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACF;EAEA,eAAe,4BAA4B;AAKzC,SAAM,iBAAiB,OAJN,MAAM,MACrB,8DACF,EAEsC,MAAM,CAAA;;;uBAI5C,mBAmLM,OAnLN,YAmLM;IAlLJ,mBAgCM,OAhCN,YAgCM,CAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,4rBAAA,EAAA,GAbJ,mBAYM,OAZN,YAYM,CAXJ,YAIe,MAAA,aAAA,EAAA;KAHb,OAAM;KACL,SAAO;;4BAEV,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFqC,kBAErC,GAAA,CAAA,EAAA,CAAA;;QACA,YAKe,MAAA,aAAA,EAAA;KAJb,OAAM;KACN,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,kBAAA;;4BAEf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFoC,iBAEpC,GAAA,CAAA,EAAA,CAAA;;;IAGJ,mBAqHM,OArHN,YAqHM,CAAA,OAAA,OAAA,OAAA,KAAA,kBAAA,inHAAA,EAAA,GAbJ,mBAYM,OAZN,YAYM,CAAA,OAAA,OAAA,OAAA,KAXJ,mBAA+B,KAAA,EAA5B,OAAM,YAAU,EAAC,WAAO,GAAA,IAAA,WAAA,EAC3B,mBASM,UAAA,MAAA,WARc,WAAX,YAAO;YADhB,mBASM,OAAA;MAPH,KAAK;MACN,OAAK,eAAA,CAAC,cAAY,EAAA,qBACa,YAAY,QAAA,OAAK,CAAA,CAAA;MAC/C,UAAK,WAAeA,KAAAA,MAAK,eAAA;OAAA,IAAsB;OAAO,OAAS,MAAA,YAAW,CAAC;OAAO,CAAA;wBAGhF,MAAA,YAAW,CAAC,SAAO,EAAA,IAAA,WAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/MobileHeader.vue"],"names":[],"mappings":"AA8EA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,OAAO,CAAA;CACrB,CAAC;AAQF,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,KAAK,CAAA;IACjB,OAAO,CAAC,CAAC,KAAK,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;IAClD,MAAM,CAAC,IAAI,KAAK,CAAA;CACjB,CAAC;AAuHF,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"MobileHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/MobileHeader.vue"],"names":[],"mappings":"AAgFA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,OAAO,CAAA;CACrB,CAAC;AAQF,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,KAAK,CAAA;IACjB,OAAO,CAAC,CAAC,KAAK,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAA;IAClD,MAAM,CAAC,IAAI,KAAK,CAAA;CACjB,CAAC;AAuHF,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeader.vue.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, ScalarIconButton } from '@scalar/components'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"isSidebarOpen ? 'Close Menu' : 'Open Menu'\"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"MobileHeader.vue.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"isSidebarOpen ? 'Close Menu' : 'Open Menu'\"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,7 @@
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
-import { ScalarIconButton, cva } from "@scalar/components";
 import { ScalarIconList, ScalarIconX } from "@scalar/icons";
+import { ScalarIconButton } from "@scalar/components/icon-button";
+import { cva } from "@scalar/use-hooks/useBindCx";
 //#region src/components/MobileHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2" };
 var _hoisted_2 = {

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

@@ -1 +1 @@
-{"version":3,"file":"MobileHeader.vue.script.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, ScalarIconButton } from '@scalar/components'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"isSidebarOpen ? 'Close Menu' : 'Open Menu'\"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAUA,MAAM,OAAO;EAUb,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,iEACP,EACF;GACF,CAAA;;2DAIC,WAKmB,KAAA,QAAA,WAAA,eAAA,mBAJT,EAAA,gBAAA,8HAGP,CAAA,CAAA,CAAA,EAEH,mBAiCM,OAAA,EAhCJ,OAAK,eAAA,CAAC,iBACE,MAAA,SAAQ,CAAA,EAAA,MAAS,QAAA,eAAa,CAAA,CAAA,CAAA,EAAA,EAAA,CACtC,mBAqBS,UArBT,YAqBS;IAlBC,QAAA,eAAA,WAAA,EADR,YAKmC,MAAA,iBAAA,EAAA;;KAHhC,MAAM,QAAA,gBAAgB,MAAA,YAAW,GAAG,MAAA,eAAc;KAClD,OAAO,QAAA,gBAAa,eAAA;KACrB,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;;IAGN,QAAA,eAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,WAAU,EAAA,EAAA,IAEf,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,CAAA;IAElB,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;OAKnB,QAAA,gBADR,WAMmB,KAAA,QAAA,WAAA,eAAA,WAAA,EAAA,KAAA,GAAA,EAJT,EAAA,gBAAA,sEAGP,CAAA,CAAA,CAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"MobileHeader.vue.script.js","names":[],"sources":["../../src/components/MobileHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconList, ScalarIconX } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  breadcrumb: string\n  isSidebarOpen: boolean\n  showSidebar: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggleSidebar'): void\n}>()\n\ndefineSlots<{\n  actions?(): never\n  sidebar?(props: { sidebarClasses: string }): never\n  search?(): never\n}>()\n\nconst variants = cva({\n  base: 'lg:hidden items-center bg-b-1 sticky top-(--scalar-custom-header-height,0) z-10 [grid-area:header]',\n  variants: {\n    open: {\n      true: 'h-(--refs-sidebar-height) custom-scrollbar flex flex-col z-50',\n    },\n  },\n})\n</script>\n<template>\n  <!-- Always render the desktop sidebar slot and let CSS handle breakpoints -->\n  <slot\n    v-bind=\"{\n      sidebarClasses:\n        'hidden lg:flex sticky top-(--refs-header-height) h-(--refs-sidebar-height) w-(--refs-sidebar-width) [grid-area:navigation]',\n    }\"\n    name=\"sidebar\" />\n  <div\n    class=\"t-doc__header\"\n    :class=\"variants({ open: isSidebarOpen })\">\n    <header\n      class=\"flex h-(--scalar-header-height) w-full items-center border-b bg-inherit px-2\">\n      <ScalarIconButton\n        v-if=\"showSidebar\"\n        :icon=\"isSidebarOpen ? ScalarIconX : ScalarIconList\"\n        :label=\"isSidebarOpen ? 'Close Menu' : 'Open Menu'\"\n        size=\"md\"\n        @click=\"emit('toggleSidebar')\" />\n\n      <span\n        v-if=\"showSidebar\"\n        class=\"flex-1 text-sm font-medium whitespace-nowrap\">\n        {{ breadcrumb }}\n      </span>\n      <slot\n        v-else\n        name=\"search\" />\n\n      <div class=\"flex h-6 items-center gap-1 pl-1\">\n        <slot name=\"actions\" />\n      </div>\n    </header>\n    <!-- In mobile layout, render the sidebar slot into the header panel -->\n    <slot\n      v-if=\"isSidebarOpen\"\n      v-bind=\"{\n        sidebarClasses:\n          'overflow-y-auto custom-scrollbar min-h-0 flex-1 w-full border-none',\n      }\"\n      name=\"sidebar\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAWA,MAAM,OAAO;EAUb,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,MAAM,EACJ,MAAM,iEACP,EACF;GACF,CAAA;;2DAIC,WAKmB,KAAA,QAAA,WAAA,eAAA,mBAJT,EAAA,gBAAA,8HAGP,CAAA,CAAA,CAAA,EAEH,mBAiCM,OAAA,EAhCJ,OAAK,eAAA,CAAC,iBACE,MAAA,SAAQ,CAAA,EAAA,MAAS,QAAA,eAAa,CAAA,CAAA,CAAA,EAAA,EAAA,CACtC,mBAqBS,UArBT,YAqBS;IAlBC,QAAA,eAAA,WAAA,EADR,YAKmC,MAAA,iBAAA,EAAA;;KAHhC,MAAM,QAAA,gBAAgB,MAAA,YAAW,GAAG,MAAA,eAAc;KAClD,OAAO,QAAA,gBAAa,eAAA;KACrB,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAA;;IAGN,QAAA,eAAA,WAAA,EADR,mBAIO,QAJP,YAIO,gBADF,QAAA,WAAU,EAAA,EAAA,IAEf,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,CAAA;IAElB,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;OAKnB,QAAA,gBADR,WAMmB,KAAA,QAAA,WAAA,eAAA,WAAA,EAAA,KAAA,GAAA,EAJT,EAAA,gBAAA,sEAGP,CAAA,CAAA,CAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/components/OperationsList/OperationsList.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import OperationsList_vue_vue_type_script_setup_true_lang_default from "./OperationsList.vue.script.js";
 /* empty css                             */
 //#region src/components/OperationsList/OperationsList.vue
-var OperationsList_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationsList_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f726f753"]]);
+var OperationsList_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OperationsList_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b8cb97c7"]]);
 //#endregion
 export { OperationsList_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"OperationsList.vue.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{ tag.isWebhooks ? 'Webhooks' : 'Operations' }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"`${tag.title} endpoints`\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"OperationsList.vue.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{ tag.isWebhooks ? 'Webhooks' : 'Operations' }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"`${tag.title} endpoints`\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 import ScreenReader_default from "../ScreenReader.vue.js";
 import OperationsListItem_default from "./OperationsListItem.vue.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
-import { ScalarCard, ScalarCardHeader, ScalarCardSection } from "@scalar/components";
+import { ScalarCard, ScalarCardHeader, ScalarCardSection } from "@scalar/components/card";
 //#region src/components/OperationsList/OperationsList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
 var OperationsList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({

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

@@ -1 +1 @@
-{"version":3,"file":"OperationsList.vue.script.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{ tag.isWebhooks ? 'Webhooks' : 'Operations' }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"`${tag.title} endpoints`\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAmBA,MAAM,wBAAwB,eAAe;AAC3C,UACE,QAAA,IAAI,UAAU,QACX,UAAU,MAAM,SAAS,eAAe,MAAM,SAAS,UACzD,IAAI,EAAC;IAET;;UAIiB,QAAA,IAAI,YAAY,QAAA,IAAI,UAAU,SAAM,KAAA,WAAA,EAClD,YAgBa,MAAA,WAAA,EAAA;;IAhBD,OAAM;;2BAIG,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,OAAA,IAAK,EAAA;4BACuB,CAA5C,YAA4C,sBAAA,MAAA;6BAAf,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;yBAAkB,MAC5C,gBAAG,QAAA,IAAI,aAAU,aAAA,aAAA,EAAA,EAAA,CAAA,CAAA;;QAEnB,YAUoB,MAAA,kBAAA,EAAA,EAVD,OAAM,8BAA4B,EAAA;4BAS9C,CARL,mBAQK,MAAA;MAPF,cAAU,GAAK,QAAA,IAAI,MAAK;MACzB,OAAM;2BACN,mBAIoC,UAAA,MAAA,WAHL,sBAAA,QAAtB,uBAAkB;0BAD3B,YAIoC,4BAAA;OAFjC,KAAK,mBAAmB;OACxB,UAAU,QAAA;OACV,WAAW"}
+{"version":3,"file":"OperationsList.vue.script.js","names":[],"sources":["../../../src/components/OperationsList/OperationsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarCard,\n  ScalarCardHeader,\n  ScalarCardSection,\n} from '@scalar/components/card'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { TraversedTag } from '@scalar/workspace-store/schemas/navigation'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nimport OperationsListItem from './OperationsListItem.vue'\n\nconst { tag } = defineProps<{\n  tag: TraversedTag\n  eventBus: WorkspaceEventBus | null\n}>()\n\nconst operationsAndWebhooks = computed(() => {\n  return (\n    tag.children?.filter(\n      (child) => child.type === 'operation' || child.type === 'webhook',\n    ) ?? []\n  )\n})\n</script>\n\n<template>\n  <template v-if=\"tag.children && tag.children?.length > 0\">\n    <ScalarCard class=\"endpoints-card\">\n      <ScalarCardHeader muted>\n        <ScreenReader>{{ tag.title }}</ScreenReader>\n        {{ tag.isWebhooks ? 'Webhooks' : 'Operations' }}\n      </ScalarCardHeader>\n      <ScalarCardSection class=\"custom-scroll max-h-[60vh]\">\n        <ul\n          :aria-label=\"`${tag.title} endpoints`\"\n          class=\"endpoints\">\n          <OperationsListItem\n            v-for=\"operationOrWebhook in operationsAndWebhooks\"\n            :key=\"operationOrWebhook.id\"\n            :eventBus=\"eventBus\"\n            :operation=\"operationOrWebhook\" />\n        </ul>\n      </ScalarCardSection>\n    </ScalarCard>\n  </template>\n</template>\n\n<style scoped>\n.endpoints-card {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n  font-size: var(--scalar-font-size-3);\n}\n.endpoints {\n  overflow: auto;\n  background: var(--scalar-background-2);\n  padding: 10px 12px;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAmBA,MAAM,wBAAwB,eAAe;AAC3C,UACE,QAAA,IAAI,UAAU,QACX,UAAU,MAAM,SAAS,eAAe,MAAM,SAAS,UACzD,IAAI,EAAC;IAET;;UAIiB,QAAA,IAAI,YAAY,QAAA,IAAI,UAAU,SAAM,KAAA,WAAA,EAClD,YAgBa,MAAA,WAAA,EAAA;;IAhBD,OAAM;;2BAIG,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,OAAA,IAAK,EAAA;4BACuB,CAA5C,YAA4C,sBAAA,MAAA;6BAAf,CAAA,gBAAA,gBAAZ,QAAA,IAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;yBAAkB,MAC5C,gBAAG,QAAA,IAAI,aAAU,aAAA,aAAA,EAAA,EAAA,CAAA,CAAA;;QAEnB,YAUoB,MAAA,kBAAA,EAAA,EAVD,OAAM,8BAA4B,EAAA;4BAS9C,CARL,mBAQK,MAAA;MAPF,cAAU,GAAK,QAAA,IAAI,MAAK;MACzB,OAAM;2BACN,mBAIoC,UAAA,MAAA,WAHL,sBAAA,QAAtB,uBAAkB;0BAD3B,YAIoC,4BAAA;OAFjC,KAAK,mBAAmB;OACxB,UAAU,QAAA;OACV,WAAW"}

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

@@ -1 +1 @@
-{"version":3,"file":"RenderPlugins.vue.js","names":[],"sources":["../../../src/components/RenderPlugins/RenderPlugins.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { viewName, options } = defineProps<{\n  viewName: 'content.end'\n  options: Record<string, any>\n}>()\n\nconst { getViewComponents } = usePluginManager()\nconst components = getViewComponents(viewName)\n</script>\n\n<template>\n  <template v-if=\"components.length\">\n    <div class=\"plugin-view\">\n      <template\n        v-for=\"(item, _index) in components\"\n        :key=\"_index\">\n        <ScalarErrorBoundary>\n          <template v-if=\"item.renderer\">\n            <!-- Custom renderer (e.g. React) -->\n            <component\n              :is=\"item.renderer\"\n              v-bind=\"{\n                component: item.component,\n                options,\n                ...item.props,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue component -->\n            <component\n              :is=\"item.component\"\n              v-bind=\"{ options, ...item.props }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RenderPlugins.vue.js","names":[],"sources":["../../../src/components/RenderPlugins/RenderPlugins.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { viewName, options } = defineProps<{\n  viewName: 'content.end'\n  options: Record<string, any>\n}>()\n\nconst { getViewComponents } = usePluginManager()\nconst components = getViewComponents(viewName)\n</script>\n\n<template>\n  <template v-if=\"components.length\">\n    <div class=\"plugin-view\">\n      <template\n        v-for=\"(item, _index) in components\"\n        :key=\"_index\">\n        <ScalarErrorBoundary>\n          <template v-if=\"item.renderer\">\n            <!-- Custom renderer (e.g. React) -->\n            <component\n              :is=\"item.renderer\"\n              v-bind=\"{\n                component: item.component,\n                options,\n                ...item.props,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue component -->\n            <component\n              :is=\"item.component\"\n              v-bind=\"{ options, ...item.props }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import { usePluginManager } from "../../plugins/hooks/usePluginManager.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
-import { ScalarErrorBoundary } from "@scalar/components";
+import { ScalarErrorBoundary } from "@scalar/components/error-boundary";
 //#region src/components/RenderPlugins/RenderPlugins.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,

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

@@ -1 +1 @@
-{"version":3,"file":"RenderPlugins.vue.script.js","names":[],"sources":["../../../src/components/RenderPlugins/RenderPlugins.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { viewName, options } = defineProps<{\n  viewName: 'content.end'\n  options: Record<string, any>\n}>()\n\nconst { getViewComponents } = usePluginManager()\nconst components = getViewComponents(viewName)\n</script>\n\n<template>\n  <template v-if=\"components.length\">\n    <div class=\"plugin-view\">\n      <template\n        v-for=\"(item, _index) in components\"\n        :key=\"_index\">\n        <ScalarErrorBoundary>\n          <template v-if=\"item.renderer\">\n            <!-- Custom renderer (e.g. React) -->\n            <component\n              :is=\"item.renderer\"\n              v-bind=\"{\n                component: item.component,\n                options,\n                ...item.props,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue component -->\n            <component\n              :is=\"item.component\"\n              v-bind=\"{ options, ...item.props }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAUA,MAAM,EAAE,sBAAsB,kBAAiB;EAC/C,MAAM,aAAa,kBAAkB,QAAA,SAAQ;;UAI3B,MAAA,WAAU,CAAC,UAAA,WAAA,EACzB,mBAuBM,OAvBN,YAuBM,EAAA,UAAA,KAAA,EAtBJ,mBAqBW,UAAA,MAAA,WApBgB,MAAA,WAAU,GAA3B,MAAM,WAAM;wBAEpB,YAiBsB,MAAA,oBAAA,EAAA,EAAA,KAlBhB,QAAM,EAAA;4BAWC,CATK,KAAK,YAAA,WAAA,EAEnB,YAMO,wBALA,KAAK,SAAQ,EADpB,WAMO;;;;iBAJgC,KAAK;eAA2B,QAAA;SAA4B,KAAK;oCAQxG,YAEwC,wBADjC,KAAK,UAAS,EADrB,WAEwC;;;;eAA5B,QAAA;MAAO,GAAK,KAAK;MAAK,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA"}
+{"version":3,"file":"RenderPlugins.vue.script.js","names":[],"sources":["../../../src/components/RenderPlugins/RenderPlugins.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components/error-boundary'\n\nimport { usePluginManager } from '@/plugins'\n\nconst { viewName, options } = defineProps<{\n  viewName: 'content.end'\n  options: Record<string, any>\n}>()\n\nconst { getViewComponents } = usePluginManager()\nconst components = getViewComponents(viewName)\n</script>\n\n<template>\n  <template v-if=\"components.length\">\n    <div class=\"plugin-view\">\n      <template\n        v-for=\"(item, _index) in components\"\n        :key=\"_index\">\n        <ScalarErrorBoundary>\n          <template v-if=\"item.renderer\">\n            <!-- Custom renderer (e.g. React) -->\n            <component\n              :is=\"item.renderer\"\n              v-bind=\"{\n                component: item.component,\n                options,\n                ...item.props,\n              }\" />\n          </template>\n          <template v-else>\n            <!-- Vue component -->\n            <component\n              :is=\"item.component\"\n              v-bind=\"{ options, ...item.props }\" />\n          </template>\n        </ScalarErrorBoundary>\n      </template>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAUA,MAAM,EAAE,sBAAsB,kBAAiB;EAC/C,MAAM,aAAa,kBAAkB,QAAA,SAAQ;;UAI3B,MAAA,WAAU,CAAC,UAAA,WAAA,EACzB,mBAuBM,OAvBN,YAuBM,EAAA,UAAA,KAAA,EAtBJ,mBAqBW,UAAA,MAAA,WApBgB,MAAA,WAAU,GAA3B,MAAM,WAAM;wBAEpB,YAiBsB,MAAA,oBAAA,EAAA,EAAA,KAlBhB,QAAM,EAAA;4BAWC,CATK,KAAK,YAAA,WAAA,EAEnB,YAMO,wBALA,KAAK,SAAQ,EADpB,WAMO;;;;iBAJgC,KAAK;eAA2B,QAAA;SAA4B,KAAK;oCAQxG,YAEwC,wBADjC,KAAK,UAAS,EADrB,WAEwC;;;;eAA5B,QAAA;MAAO,GAAK,KAAK;MAAK,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA"}

package/dist/features/Operation/components/ContentTypeSelect.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentTypeSelect.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/components/ContentTypeSelect.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAKnG,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,SAAS,CAAA;CACrD,CAAC;AAwCF,KAAK,gBAAgB,GAAG;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAsIxD,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ContentTypeSelect.vue.d.ts","sourceRoot":"","sources":["../../../../src/features/Operation/components/ContentTypeSelect.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AAKnG,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,SAAS,CAAA;CACrD,CAAC;AAwCF,KAAK,gBAAgB,GAAG;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAsIxD,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/Operation/components/ContentTypeSelect.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentTypeSelect.vue.js","names":[],"sources":["../../../../src/features/Operation/components/ContentTypeSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, ScalarButton, ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nconst { content } = defineProps<{\n  content: Record<string, MediaTypeObject> | undefined\n}>()\n\n/** The selected content type with two-way binding */\nconst selectedContentType = defineModel<string>({ required: true })\n\ndefineOptions({ inheritAttrs: false })\n\nconst contentTypes = computed(() => Object.keys(content ?? {}))\n\nconst selectedOption = computed({\n  get: () =>\n    options.value.find((option) => option.id === selectedContentType.value),\n  set: (option) => {\n    if (option) {\n      selectedContentType.value = option.id\n    }\n  },\n})\n\nconst options = computed(() => {\n  return contentTypes.value.map((type) => ({\n    id: type,\n    label: type,\n  }))\n})\n\n// Content type select style variant based on dropdown availability\nconst contentTypeSelect = cva({\n  base: 'font-normal text-c-2 bg-b-1 py-1 flex items-center gap-1 rounded-full text-xs leading-none border',\n  variants: {\n    dropdown: {\n      true: 'hover:text-c-1 pl-2 pr-1.5 font-medium cursor-pointer',\n      false: 'px-2',\n    },\n  },\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"contentTypes.length > 1\"\n    v-slot=\"{ open }\"\n    v-model=\"selectedOption\"\n    :options=\"options\"\n    placement=\"bottom-end\"\n    teleport\n    @click.stop>\n    <ScalarButton\n      class=\"h-fit\"\n      :class=\"contentTypeSelect({ dropdown: true })\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\"\n      @click.stop>\n      <ScreenReader>Selected Content Type:</ScreenReader>\n      <span>{{ selectedContentType }}</span>\n      <ScalarIconCaretDown\n        class=\"size-2.75 transition-transform duration-100\"\n        :class=\"{ 'rotate-180': open }\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"selected-content-type\"\n    :class=\"contentTypeSelect({ dropdown: false })\"\n    v-bind=\"$attrs\"\n    tabindex=\"0\">\n    <span>{{ selectedContentType }}</span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ContentTypeSelect.vue.js","names":[],"sources":["../../../../src/features/Operation/components/ContentTypeSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nconst { content } = defineProps<{\n  content: Record<string, MediaTypeObject> | undefined\n}>()\n\n/** The selected content type with two-way binding */\nconst selectedContentType = defineModel<string>({ required: true })\n\ndefineOptions({ inheritAttrs: false })\n\nconst contentTypes = computed(() => Object.keys(content ?? {}))\n\nconst selectedOption = computed({\n  get: () =>\n    options.value.find((option) => option.id === selectedContentType.value),\n  set: (option) => {\n    if (option) {\n      selectedContentType.value = option.id\n    }\n  },\n})\n\nconst options = computed(() => {\n  return contentTypes.value.map((type) => ({\n    id: type,\n    label: type,\n  }))\n})\n\n// Content type select style variant based on dropdown availability\nconst contentTypeSelect = cva({\n  base: 'font-normal text-c-2 bg-b-1 py-1 flex items-center gap-1 rounded-full text-xs leading-none border',\n  variants: {\n    dropdown: {\n      true: 'hover:text-c-1 pl-2 pr-1.5 font-medium cursor-pointer',\n      false: 'px-2',\n    },\n  },\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"contentTypes.length > 1\"\n    v-slot=\"{ open }\"\n    v-model=\"selectedOption\"\n    :options=\"options\"\n    placement=\"bottom-end\"\n    teleport\n    @click.stop>\n    <ScalarButton\n      class=\"h-fit\"\n      :class=\"contentTypeSelect({ dropdown: true })\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\"\n      @click.stop>\n      <ScreenReader>Selected Content Type:</ScreenReader>\n      <span>{{ selectedContentType }}</span>\n      <ScalarIconCaretDown\n        class=\"size-2.75 transition-transform duration-100\"\n        :class=\"{ 'rotate-180': open }\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"selected-content-type\"\n    :class=\"contentTypeSelect({ dropdown: false })\"\n    v-bind=\"$attrs\"\n    tabindex=\"0\">\n    <span>{{ selectedContentType }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/features/Operation/components/ContentTypeSelect.vue.script.js

@@ -1,7 +1,9 @@
 import ScreenReader_default from "../../../components/ScreenReader.vue.js";
 import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
-import { ScalarButton, ScalarListbox, cva } from "@scalar/components";
 import { ScalarIconCaretDown } from "@scalar/icons";
+import { ScalarButton } from "@scalar/components/button";
+import { cva } from "@scalar/use-hooks/useBindCx";
+import { ScalarListbox } from "@scalar/components/listbox";
 //#region src/features/Operation/components/ContentTypeSelect.vue?vue&type=script&setup=true&lang.ts
 var ContentTypeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,

package/dist/features/Operation/components/ContentTypeSelect.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentTypeSelect.vue.script.js","names":["$attrs"],"sources":["../../../../src/features/Operation/components/ContentTypeSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, ScalarButton, ScalarListbox } from '@scalar/components'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nconst { content } = defineProps<{\n  content: Record<string, MediaTypeObject> | undefined\n}>()\n\n/** The selected content type with two-way binding */\nconst selectedContentType = defineModel<string>({ required: true })\n\ndefineOptions({ inheritAttrs: false })\n\nconst contentTypes = computed(() => Object.keys(content ?? {}))\n\nconst selectedOption = computed({\n  get: () =>\n    options.value.find((option) => option.id === selectedContentType.value),\n  set: (option) => {\n    if (option) {\n      selectedContentType.value = option.id\n    }\n  },\n})\n\nconst options = computed(() => {\n  return contentTypes.value.map((type) => ({\n    id: type,\n    label: type,\n  }))\n})\n\n// Content type select style variant based on dropdown availability\nconst contentTypeSelect = cva({\n  base: 'font-normal text-c-2 bg-b-1 py-1 flex items-center gap-1 rounded-full text-xs leading-none border',\n  variants: {\n    dropdown: {\n      true: 'hover:text-c-1 pl-2 pr-1.5 font-medium cursor-pointer',\n      false: 'px-2',\n    },\n  },\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"contentTypes.length > 1\"\n    v-slot=\"{ open }\"\n    v-model=\"selectedOption\"\n    :options=\"options\"\n    placement=\"bottom-end\"\n    teleport\n    @click.stop>\n    <ScalarButton\n      class=\"h-fit\"\n      :class=\"contentTypeSelect({ dropdown: true })\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\"\n      @click.stop>\n      <ScreenReader>Selected Content Type:</ScreenReader>\n      <span>{{ selectedContentType }}</span>\n      <ScalarIconCaretDown\n        class=\"size-2.75 transition-transform duration-100\"\n        :class=\"{ 'rotate-180': open }\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"selected-content-type\"\n    :class=\"contentTypeSelect({ dropdown: false })\"\n    v-bind=\"$attrs\"\n    tabindex=\"0\">\n    <span>{{ selectedContentType }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAaA,MAAM,sBAAsB,SAAmB,SAAA,aAAmB;EAIlE,MAAM,eAAe,eAAe,OAAO,KAAK,QAAA,WAAW,EAAE,CAAC,CAAA;EAE9D,MAAM,iBAAiB,SAAS;GAC9B,WACE,QAAQ,MAAM,MAAM,WAAW,OAAO,OAAO,oBAAoB,MAAM;GACzE,MAAM,WAAW;AACf,QAAI,OACF,qBAAoB,QAAQ,OAAO;;GAGxC,CAAA;EAED,MAAM,UAAU,eAAe;AAC7B,UAAO,aAAa,MAAM,KAAK,UAAU;IACvC,IAAI;IACJ,OAAO;IACR,EAAC;IACH;EAGD,MAAM,oBAAoB,IAAI;GAC5B,MAAM;GACN,UAAU,EACR,UAAU;IACR,MAAM;IACN,OAAO;IACR,EACF;GACF,CAAA;;UAIS,aAAA,MAAa,SAAM,KAAA,WAAA,EAD3B,YAqBgB,MAAA,cAAA,EAAA;;gBAlBL,eAAA;gFAAc,QAAA;IACtB,SAAS,QAAA;IACV,WAAU;IACV,UAAA;IACC,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;sBAaI,EAlBL,WAAI,CAMd,YAYe,MAAA,aAAA,EAZf,WAYe;KAXb,OAAK,CAAC,SACE,MAAA,kBAAiB,CAAA,EAAA,UAAA,MAAA,CAAA,CAAA;KACzB,SAAQ;OACAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA;4BACwC;MAAnD,YAAmD,sBAAA,MAAA;8BAAf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAtB,0BAAsB,GAAA,CAAA,EAAA,CAAA;;;MACpC,mBAAsC,QAAA,MAAA,gBAA7B,oBAAA,MAAmB,EAAA,EAAA;MAC5B,YAGkB,MAAA,oBAAA,EAAA;OAFhB,OAAK,eAAA,CAAC,+CAA6C,EAAA,cAC3B,MAAI,CAAA,CAAA;OAC5B,QAAO;;;;;;qDAGb,mBAOM,OAPN,WAOM;;IALJ,OAAK,CAAC,yBACE,MAAA,kBAAiB,CAAA,EAAA,UAAA,OAAA,CAAA,CAAA;MACjBA,KAAAA,QAAM,EACd,UAAS,KAAG,CAAA,EAAA,CACZ,mBAAsC,QAAA,MAAA,gBAA7B,oBAAA,MAAmB,EAAA,EAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ContentTypeSelect.vue.script.js","names":["$attrs"],"sources":["../../../../src/features/Operation/components/ContentTypeSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarListbox } from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport { cva } from '@scalar/use-hooks/useBindCx'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ScreenReader from '@/components/ScreenReader.vue'\n\nconst { content } = defineProps<{\n  content: Record<string, MediaTypeObject> | undefined\n}>()\n\n/** The selected content type with two-way binding */\nconst selectedContentType = defineModel<string>({ required: true })\n\ndefineOptions({ inheritAttrs: false })\n\nconst contentTypes = computed(() => Object.keys(content ?? {}))\n\nconst selectedOption = computed({\n  get: () =>\n    options.value.find((option) => option.id === selectedContentType.value),\n  set: (option) => {\n    if (option) {\n      selectedContentType.value = option.id\n    }\n  },\n})\n\nconst options = computed(() => {\n  return contentTypes.value.map((type) => ({\n    id: type,\n    label: type,\n  }))\n})\n\n// Content type select style variant based on dropdown availability\nconst contentTypeSelect = cva({\n  base: 'font-normal text-c-2 bg-b-1 py-1 flex items-center gap-1 rounded-full text-xs leading-none border',\n  variants: {\n    dropdown: {\n      true: 'hover:text-c-1 pl-2 pr-1.5 font-medium cursor-pointer',\n      false: 'px-2',\n    },\n  },\n})\n</script>\n<template>\n  <ScalarListbox\n    v-if=\"contentTypes.length > 1\"\n    v-slot=\"{ open }\"\n    v-model=\"selectedOption\"\n    :options=\"options\"\n    placement=\"bottom-end\"\n    teleport\n    @click.stop>\n    <ScalarButton\n      class=\"h-fit\"\n      :class=\"contentTypeSelect({ dropdown: true })\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\"\n      @click.stop>\n      <ScreenReader>Selected Content Type:</ScreenReader>\n      <span>{{ selectedContentType }}</span>\n      <ScalarIconCaretDown\n        class=\"size-2.75 transition-transform duration-100\"\n        :class=\"{ 'rotate-180': open }\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n  <div\n    v-else\n    class=\"selected-content-type\"\n    :class=\"contentTypeSelect({ dropdown: false })\"\n    v-bind=\"$attrs\"\n    tabindex=\"0\">\n    <span>{{ selectedContentType }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAeA,MAAM,sBAAsB,SAAmB,SAAA,aAAmB;EAIlE,MAAM,eAAe,eAAe,OAAO,KAAK,QAAA,WAAW,EAAE,CAAC,CAAA;EAE9D,MAAM,iBAAiB,SAAS;GAC9B,WACE,QAAQ,MAAM,MAAM,WAAW,OAAO,OAAO,oBAAoB,MAAM;GACzE,MAAM,WAAW;AACf,QAAI,OACF,qBAAoB,QAAQ,OAAO;;GAGxC,CAAA;EAED,MAAM,UAAU,eAAe;AAC7B,UAAO,aAAa,MAAM,KAAK,UAAU;IACvC,IAAI;IACJ,OAAO;IACR,EAAC;IACH;EAGD,MAAM,oBAAoB,IAAI;GAC5B,MAAM;GACN,UAAU,EACR,UAAU;IACR,MAAM;IACN,OAAO;IACR,EACF;GACF,CAAA;;UAIS,aAAA,MAAa,SAAM,KAAA,WAAA,EAD3B,YAqBgB,MAAA,cAAA,EAAA;;gBAlBL,eAAA;gFAAc,QAAA;IACtB,SAAS,QAAA;IACV,WAAU;IACV,UAAA;IACC,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;sBAaI,EAlBL,WAAI,CAMd,YAYe,MAAA,aAAA,EAZf,WAYe;KAXb,OAAK,CAAC,SACE,MAAA,kBAAiB,CAAA,EAAA,UAAA,MAAA,CAAA,CAAA;KACzB,SAAQ;OACAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA;4BACwC;MAAnD,YAAmD,sBAAA,MAAA;8BAAf,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAtB,0BAAsB,GAAA,CAAA,EAAA,CAAA;;;MACpC,mBAAsC,QAAA,MAAA,gBAA7B,oBAAA,MAAmB,EAAA,EAAA;MAC5B,YAGkB,MAAA,oBAAA,EAAA;OAFhB,OAAK,eAAA,CAAC,+CAA6C,EAAA,cAC3B,MAAI,CAAA,CAAA;OAC5B,QAAO;;;;;;qDAGb,mBAOM,OAPN,WAOM;;IALJ,OAAK,CAAC,yBACE,MAAA,kBAAiB,CAAA,EAAA,UAAA,OAAA,CAAA,CAAA;MACjBA,KAAAA,QAAM,EACd,UAAS,KAAG,CAAA,EAAA,CACZ,mBAAsC,QAAA,MAAA,gBAA7B,oBAAA,MAAmB,EAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/features/Operation/components/Headers.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import Headers_vue_vue_type_script_setup_true_lang_default from "./Headers.vue.script.js";
 /* empty css                      */
 //#region src/features/Operation/components/Headers.vue
-var Headers_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Headers_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ab19704d"]]);
+var Headers_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Headers_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c4fe6aa2"]]);
 //#endregion
 export { Headers_default as default };
 

package/dist/features/Operation/components/Headers.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Headers.vue.js","names":[],"sources":["../../../../src/features/Operation/components/Headers.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { HeaderObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport Header from './Header.vue'\n\nconst { headers, breadcrumb } = defineProps<{\n  headers: Record<string, HeaderObject>\n  breadcrumb?: string[]\n  eventBus: WorkspaceEventBus | null\n  orderRequiredPropertiesFirst: boolean | undefined\n  orderSchemaPropertiesBy: 'alpha' | 'preserve' | undefined\n}>()\n</script>\n<template>\n  <Disclosure v-slot=\"{ open }\">\n    <div\n      class=\"headers-card headers-card--compact\"\n      :class=\"[{ 'headers-card--open': open }]\">\n      <div\n        class=\"headers-properties\"\n        :class=\"{ 'headers-properties-open': open }\">\n        <DisclosureButton\n          class=\"headers-card-title headers-card-title--compact\"\n          :style=\"{\n            top: `calc(var(--refs-viewport-offset)))`,\n          }\">\n          <ScalarIcon\n            class=\"headers-card-title-icon\"\n            :class=\"{ 'headers-card-title-icon--open': open }\"\n            icon=\"Add\"\n            size=\"sm\" />\n          <template v-if=\"open\"> Hide Headers </template>\n          <template v-else> Show Headers </template>\n        </DisclosureButton>\n        <DisclosurePanel>\n          <template\n            v-for=\"(header, key) in headers\"\n            :key=\"key\">\n            <Header\n              :breadcrumb=\"breadcrumb ? [...breadcrumb, 'headers'] : undefined\"\n              :eventBus=\"eventBus\"\n              :header=\"getResolvedRef(header)\"\n              :name=\"key\"\n              :orderRequiredPropertiesFirst=\"orderRequiredPropertiesFirst\"\n              :orderSchemaPropertiesBy=\"orderSchemaPropertiesBy\" />\n          </template>\n        </DisclosurePanel>\n      </div>\n    </div>\n  </Disclosure>\n</template>\n<style scoped>\n.headers-card {\n  z-index: 0;\n  margin-top: 12px;\n  margin-bottom: 6px;\n  position: relative;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-1);\n\n  align-self: flex-start;\n}\n.headers-card.headers-card--open {\n  align-self: initial;\n}\n.headers-card-title {\n  padding: 6px 10px;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-micro);\n\n  border-radius: 13.5px;\n}\nbutton.headers-card-title {\n  cursor: pointer;\n}\nbutton.headers-card-title:hover {\n  color: var(--scalar-color-1);\n}\n.headers-card-title-icon--open {\n  transform: rotate(45deg);\n}\n.headers-properties {\n  display: flex;\n  flex-direction: column;\n\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n\n  border-radius: 13.5px;\n  width: fit-content;\n}\n.headers-properties-open > .headers-card-title {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.headers-properties-open {\n  border-radius: var(--scalar-radius-lg);\n  width: 100%;\n}\n.headers-card .property:last-of-type {\n  padding-bottom: 10px;\n}\n.headers-card-title > .headers-card-title-icon {\n  width: 14px;\n  height: 14px;\n  margin: 0;\n}\n.headers-card-title > .headers-card-title-icon--open {\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"Headers.vue.js","names":[],"sources":["../../../../src/features/Operation/components/Headers.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { HeaderObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport Header from './Header.vue'\n\nconst { headers, breadcrumb } = defineProps<{\n  headers: Record<string, HeaderObject>\n  breadcrumb?: string[]\n  eventBus: WorkspaceEventBus | null\n  orderRequiredPropertiesFirst: boolean | undefined\n  orderSchemaPropertiesBy: 'alpha' | 'preserve' | undefined\n}>()\n</script>\n<template>\n  <Disclosure v-slot=\"{ open }\">\n    <div\n      class=\"headers-card headers-card--compact\"\n      :class=\"[{ 'headers-card--open': open }]\">\n      <div\n        class=\"headers-properties\"\n        :class=\"{ 'headers-properties-open': open }\">\n        <DisclosureButton\n          class=\"headers-card-title headers-card-title--compact\"\n          :style=\"{\n            top: `calc(var(--refs-viewport-offset)))`,\n          }\">\n          <ScalarIcon\n            class=\"headers-card-title-icon\"\n            :class=\"{ 'headers-card-title-icon--open': open }\"\n            icon=\"Add\"\n            size=\"sm\" />\n          <template v-if=\"open\"> Hide Headers </template>\n          <template v-else> Show Headers </template>\n        </DisclosureButton>\n        <DisclosurePanel>\n          <template\n            v-for=\"(header, key) in headers\"\n            :key=\"key\">\n            <Header\n              :breadcrumb=\"breadcrumb ? [...breadcrumb, 'headers'] : undefined\"\n              :eventBus=\"eventBus\"\n              :header=\"getResolvedRef(header)\"\n              :name=\"key\"\n              :orderRequiredPropertiesFirst=\"orderRequiredPropertiesFirst\"\n              :orderSchemaPropertiesBy=\"orderSchemaPropertiesBy\" />\n          </template>\n        </DisclosurePanel>\n      </div>\n    </div>\n  </Disclosure>\n</template>\n<style scoped>\n.headers-card {\n  z-index: 0;\n  margin-top: 12px;\n  margin-bottom: 6px;\n  position: relative;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-1);\n\n  align-self: flex-start;\n}\n.headers-card.headers-card--open {\n  align-self: initial;\n}\n.headers-card-title {\n  padding: 6px 10px;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  font-size: var(--scalar-micro);\n\n  border-radius: 13.5px;\n}\nbutton.headers-card-title {\n  cursor: pointer;\n}\nbutton.headers-card-title:hover {\n  color: var(--scalar-color-1);\n}\n.headers-card-title-icon--open {\n  transform: rotate(45deg);\n}\n.headers-properties {\n  display: flex;\n  flex-direction: column;\n\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n\n  border-radius: 13.5px;\n  width: fit-content;\n}\n.headers-properties-open > .headers-card-title {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n.headers-properties-open {\n  border-radius: var(--scalar-radius-lg);\n  width: 100%;\n}\n.headers-card .property:last-of-type {\n  padding-bottom: 10px;\n}\n.headers-card-title > .headers-card-title-icon {\n  width: 14px;\n  height: 14px;\n  margin: 0;\n}\n.headers-card-title > .headers-card-title-icon--open {\n  transform: rotate(45deg);\n}\n</style>\n"],"mappings":""}

package/dist/features/Operation/components/Headers.vue.script.js

@@ -1,7 +1,7 @@
 import Header_default from "./Header.vue.js";
 import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, unref, withCtx } from "vue";
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
-import { ScalarIcon } from "@scalar/components";
+import { ScalarIcon } from "@scalar/components/icon";
 import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
 //#region src/features/Operation/components/Headers.vue?vue&type=script&setup=true&lang.ts
 var Headers_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({