@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system186.js

@@ -1,109 +1,91 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, useModel as d, watch as f } from "vue";
-//#region src/components/BSwitch/BSwitch.vue?vue&type=script&setup=true&lang.ts
-var p = [
-	"aria-checked",
-	"aria-disabled",
-	"disabled",
-	"tabindex"
-], m = {
-	class: "b-switch__handle",
-	"aria-hidden": "true"
-}, h = {
-	key: 0,
-	class: "b-switch__loading-icon",
-	viewBox: "0 0 16 16",
-	fill: "none",
-	"aria-hidden": "true"
-}, g = {
-	class: "b-switch__inner",
-	"aria-hidden": "true"
-}, _ = {
+import e from "./design-system185.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f } from "vue";
+//#region src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts
+var p = {
 	key: 0,
-	class: "b-switch__inner-checked"
-}, v = {
+	class: "b-skeleton__header"
+}, m = { class: "b-skeleton__content" }, h = {
 	key: 1,
-	class: "b-switch__inner-unchecked"
-}, y = /* @__PURE__ */ i({
-	__name: "BSwitch",
-	props: /* @__PURE__ */ a({
-		defaultChecked: {
+	class: "b-skeleton__paragraph",
+	"aria-hidden": "true"
+}, g = /* @__PURE__ */ s({
+	__name: "BSkeleton",
+	props: {
+		active: {
 			type: Boolean,
 			default: !1
 		},
-		disabled: {
-			type: Boolean,
+		avatar: {
+			type: [Boolean, Object],
 			default: !1
 		},
 		loading: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		size: { default: "default" }
-	}, {
-		modelValue: {
+		paragraph: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		round: {
 			type: Boolean,
-			default: void 0
+			default: !1
 		},
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ a(["change", "click"], ["update:modelValue"]),
-	setup(i, { expose: a, emit: y }) {
-		let b = d(i, "modelValue"), x = y, S = l(i.defaultChecked), C = e(() => b.value === void 0 ? S.value : b.value);
-		s(() => {
-			b.value === void 0 && (S.value = i.defaultChecked);
-		}), f(() => b.value, (e) => {
-			e !== void 0 && (S.value = e);
-		});
-		function w(e) {
-			if (i.disabled || i.loading) return;
-			let t = !C.value;
-			S.value = t, b.value = t, x("change", t, e), e instanceof MouseEvent && x("click", t, e);
+		title: {
+			type: [Boolean, Object],
+			default: !0
 		}
+	},
+	setup(s) {
+		let g = n(() => s.avatar !== !1 && s.avatar != null), _ = n(() => s.title !== !1 && s.title != null), v = n(() => s.paragraph !== !1 && s.paragraph != null), y = n(() => typeof s.avatar == "object" && s.avatar !== null ? s.avatar : {}), b = n(() => typeof s.title == "object" && s.title !== null ? s.title : {}), x = n(() => typeof s.paragraph == "object" && s.paragraph !== null ? s.paragraph : {}), S = n(() => T(b.value.width)), C = n(() => {
+			let e = x.value.rows;
+			return typeof e == "number" && e > 0 ? Math.floor(e) : 3;
+		}), w = n(() => {
+			let e = x.value.width, t = C.value, n = [];
+			for (let r = 0; r < t; r += 1) if (Array.isArray(e)) {
+				let t = e[r];
+				n.push(T(t) ?? "");
+			} else if (r === t - 1) {
+				let t = T(e);
+				n.push(t ?? "61%");
+			} else n.push("");
+			return n;
+		});
 		function T(e) {
-			w(e);
-		}
-		function E(e) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), w(e));
-		}
-		let D = l(null);
-		function O() {
-			D.value?.focus();
-		}
-		function k() {
-			D.value?.blur();
+			if (e != null) return typeof e == "number" ? `${e}px` : e;
 		}
-		return a({
-			focus: O,
-			blur: k
-		}), (e, a) => (c(), n("button", {
-			ref_key: "rootRef",
-			ref: D,
-			type: "button",
-			role: "switch",
-			class: o(["b-switch", [`b-switch--${i.size}`, {
-				"b-switch--checked": C.value,
-				"b-switch--disabled": i.disabled,
-				"b-switch--loading": i.loading
-			}]]),
-			"aria-checked": C.value,
-			"aria-disabled": i.disabled || i.loading || void 0,
-			disabled: i.disabled,
-			tabindex: i.disabled ? -1 : 0,
-			onClick: T,
-			onKeydown: E
-		}, [r("span", m, [i.loading ? (c(), n("svg", h, [...a[0] ||= [r("circle", {
-			cx: "8",
-			cy: "8",
-			r: "6",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-dasharray": "28",
-			"stroke-dashoffset": "8"
-		}, null, -1)]])) : t("", !0)]), r("span", g, [C.value ? (c(), n("span", _, [u(e.$slots, "checked", {}, void 0, !0)])) : (c(), n("span", v, [u(e.$slots, "unchecked", {}, void 0, !0)]))])], 42, p));
+		let E = n(() => ["b-skeleton", {
+			"b-skeleton--active": s.active,
+			"b-skeleton--with-avatar": g.value,
+			"b-skeleton--round": s.round
+		}]);
+		return (n, b) => s.loading ? (u(), i("div", {
+			key: 0,
+			class: c(E.value),
+			role: "status",
+			"aria-live": "polite",
+			"aria-label": "Loading"
+		}, [g.value ? (u(), i("div", p, [o(e, {
+			active: s.active || y.value.active,
+			shape: y.value.shape,
+			size: y.value.size
+		}, null, 8, [
+			"active",
+			"shape",
+			"size"
+		])])) : r("", !0), a("div", m, [_.value ? (u(), i("h3", {
+			key: 0,
+			class: "b-skeleton__title",
+			style: l(S.value ? { width: S.value } : void 0),
+			"aria-hidden": "true"
+		}, null, 4)) : r("", !0), v.value ? (u(), i("ul", h, [(u(!0), i(t, null, d(w.value, (e, t) => (u(), i("li", {
+			key: t,
+			class: "b-skeleton__paragraph-row",
+			style: l(e ? { width: e } : void 0)
+		}, null, 4))), 128))])) : r("", !0)])], 2)) : f(n.$slots, "default", { key: 1 });
 	}
 });
 //#endregion
-export { y as default };
+export { g as default };
 
 //# sourceMappingURL=design-system186.js.map

package/dist/design-system186.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system186.js","names":[],"sources":["../src/components/BSwitch/BSwitch.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from \"vue\"\n\nconst _hoisted_1 = [\"aria-checked\", \"aria-disabled\", \"disabled\", \"tabindex\"]\nconst _hoisted_2 = {\n  class: \"b-switch__handle\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-switch__loading-icon\",\n  viewBox: \"0 0 16 16\",\n  fill: \"none\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_4 = {\n  class: \"b-switch__inner\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_5 = {\n  key: 0,\n  class: \"b-switch__inner-checked\"\n}\nconst _hoisted_6 = {\n  key: 1,\n  class: \"b-switch__inner-unchecked\"\n}\n\nimport { ref, computed, watch, onMounted } from 'vue';\n\n//#region Props\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSwitch',\n  props: /*@__PURE__*/_mergeModels({\n    defaultChecked: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    loading: { type: Boolean, default: false },\n    size: { default: 'default' }\n  }, {\n    \"modelValue\": { type: Boolean, ...{ default: undefined } },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\", \"click\"], [\"update:modelValue\"]),\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\n/**\n * The checked state of the switch.\n * Supports v-model for controlled usage.\n */\nconst model = _useModel<boolean>(__props, \"modelValue\");\n\nconst emit = __emit;\n//#endregion\n\n//#region Internal state\nconst internalChecked = ref(__props.defaultChecked);\n\nconst isChecked = computed(() =>\n  model.value !== undefined ? model.value : internalChecked.value,\n);\n\nonMounted(() => {\n  if (model.value === undefined) {\n    internalChecked.value = __props.defaultChecked;\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalChecked.value = val;\n    }\n  },\n);\n//#endregion\n\n//#region Handlers\nfunction toggle(event: MouseEvent | KeyboardEvent) {\n  if (__props.disabled || __props.loading) return;\n\n  const newChecked = !isChecked.value;\n  internalChecked.value = newChecked;\n  model.value = newChecked;\n  emit('change', newChecked, event);\n\n  if (event instanceof MouseEvent) {\n    emit('click', newChecked, event);\n  }\n}\n\nfunction handleClick(event: MouseEvent) {\n  toggle(event);\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle(event);\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLButtonElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\n__expose({ focus, blur });\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"button\", {\n    ref_key: \"rootRef\",\n    ref: rootRef,\n    type: \"button\",\n    role: \"switch\",\n    class: _normalizeClass([\"b-switch\", [\n      `b-switch--${__props.size}`,\n      {\n        'b-switch--checked': isChecked.value,\n        'b-switch--disabled': __props.disabled,\n        'b-switch--loading': __props.loading,\n      },\n    ]]),\n    \"aria-checked\": isChecked.value,\n    \"aria-disabled\": __props.disabled || __props.loading || undefined,\n    disabled: __props.disabled,\n    tabindex: __props.disabled ? -1 : 0,\n    onClick: handleClick,\n    onKeydown: handleKeyDown\n  }, [\n    _createElementVNode(\"span\", _hoisted_2, [\n      (__props.loading)\n        ? (_openBlock(), _createElementBlock(\"svg\", _hoisted_3, [...(_cache[0] || (_cache[0] = [\n            _createElementVNode(\"circle\", {\n              cx: \"8\",\n              cy: \"8\",\n              r: \"6\",\n              stroke: \"currentColor\",\n              \"stroke-width\": \"2\",\n              \"stroke-linecap\": \"round\",\n              \"stroke-dasharray\": \"28\",\n              \"stroke-dashoffset\": \"8\"\n            }, null, -1)\n          ]))]))\n        : _createCommentVNode(\"\", true)\n    ]),\n    _createElementVNode(\"span\", _hoisted_4, [\n      (isChecked.value)\n        ? (_openBlock(), _createElementBlock(\"span\", _hoisted_5, [\n            _renderSlot(_ctx.$slots, \"checked\", {}, undefined, true)\n          ]))\n        : (_openBlock(), _createElementBlock(\"span\", _hoisted_6, [\n            _renderSlot(_ctx.$slots, \"unchecked\", {}, undefined, true)\n          ]))\n    ])\n  ], 42, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system186.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAa,QAAe,EAAA,WAAW,MAAS,EAAA,UAAU,KAAK,EAC/D,IAAY,QAAe,EAAA,UAAU,MAAS,EAAA,SAAS,KAAK,EAC5D,IAAgB,QAAe,EAAA,cAAc,MAAS,EAAA,aAAa,KAAK,EAExE,IAAe,QACnB,OAAO,EAAA,UAAW,YAAY,EAAA,WAAW,OAAO,EAAA,SAAS,EAAE,CAC5D,EAEK,IAAc,QAClB,OAAO,EAAA,SAAU,YAAY,EAAA,UAAU,OAAO,EAAA,QAAQ,EAAE,CACzD,EAEK,IAAkB,QACtB,OAAO,EAAA,aAAc,YAAY,EAAA,cAAc,OAAO,EAAA,YAAY,EAAE,CACrE,EAEK,IAAa,QAAe,EAAe,EAAY,MAAM,MAAM,CAAC,EAEpE,IAAgB,QAAe;GACnC,IAAM,IAAI,EAAgB,MAAM;AAChC,UAAO,OAAO,KAAM,YAAY,IAAI,IAAI,KAAK,MAAM,EAAE,GAAG;IACxD,EAEI,IAAqB,QAAyB;GAClD,IAAM,IAAS,EAAgB,MAAM,OAC/B,IAAO,EAAc,OACrB,IAAgB,EAAE;AACxB,QAAK,IAAI,IAAI,GAAG,IAAI,GAAM,KAAK,EAC7B,KAAI,MAAM,QAAQ,EAAO,EAAE;IACzB,IAAM,IAAI,EAAO;AACjB,MAAI,KAAK,EAAe,EAAE,IAAI,GAAG;cACxB,MAAM,IAAO,GAAG;IAEzB,IAAM,IAAI,EAAe,EAAO;AAChC,MAAI,KAAK,KAAK,MAAM;SAEpB,GAAI,KAAK,GAAG;AAGhB,UAAO;IACP;EAEF,SAAS,EAAe,GAAoD;AACtE,YAAK,KAET,QADI,OAAO,KAAM,WAAiB,GAAG,EAAE,MAChC;;EAGT,IAAM,IAAc,QAAe,CACjC,cACA;GACE,sBAAsB,EAAA;GACtB,2BAA2B,EAAW;GACtC,qBAAqB,EAAA;GACtB,CACF,CAAC;mBAIW,EAAA,WAAA,GAAA,EAAX,EA0BM,OAAA;;GA1Be,OAAK,EAAE,EAAA,MAAW;GAAE,MAAK;GAAS,aAAU;GAAS,cAAW;MACxE,EAAA,SAAA,GAAA,EAAX,EAMM,OANN,GAMM,CALJ,EAIE,GAAA;GAHC,QAAQ,EAAA,UAAU,EAAA,MAAa;GAC/B,OAAO,EAAA,MAAa;GACpB,MAAM,EAAA,MAAa;;;;;qBAIxB,EAgBM,OAhBN,GAgBM,CAdI,EAAA,SAAA,GAAA,EADR,EAKE,MAAA;;GAHA,OAAM;GACL,OAAK,EAAE,EAAA,QAAU,EAAA,OAAY,EAAA,OAAU,GAAK,KAAA,EAAS;GACtD,eAAY;4BAGJ,EAAA,SAAA,GAAA,EAAV,EAOK,MAPL,GAOK,EAAA,EAAA,GAAA,EANH,EAKE,GAAA,MAAA,EAJiB,EAAA,QAAT,GAAG,YADb,EAKE,MAAA;GAHC,KAAK;GACN,OAAM;GACL,OAAK,EAAE,IAAC,EAAA,OAAY,GAAC,GAAK,KAAA,EAAS;gDAO1C,EAAQ,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA"}

package/dist/design-system188.js

@@ -1,9 +1,8 @@
-import e from "./design-system14.js";
-import t from "./design-system186.js";
+import e from "./design-system186.js";
 /* empty css                 */
-//#region src/components/BSwitch/BSwitch.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-a13562bf"]]);
+//#region src/components/BSkeleton/BSkeleton.vue
+var t = e;
 //#endregion
-export { n as default };
+export { t as default };
 
 //# sourceMappingURL=design-system188.js.map

package/dist/design-system188.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system188.js","names":[],"sources":["../src/components/BSwitch/BSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch, onMounted } from 'vue';\n\n//#region Props\nconst {\n  defaultChecked = false,\n  disabled = false,\n  loading = false,\n  size = 'default',\n} = defineProps<{\n  /** Initial checked state for uncontrolled usage. */\n  defaultChecked?: boolean;\n  /** Whether the switch is disabled. */\n  disabled?: boolean;\n  /** Whether to show a loading spinner on the handle. */\n  loading?: boolean;\n  /** Size of the switch. */\n  size?: 'default' | 'small';\n}>();\n\n/**\n * The checked state of the switch.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<boolean>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n  click: [checked: boolean, event: MouseEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst internalChecked = ref(defaultChecked);\n\nconst isChecked = computed(() =>\n  model.value !== undefined ? model.value : internalChecked.value,\n);\n\nonMounted(() => {\n  if (model.value === undefined) {\n    internalChecked.value = defaultChecked;\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalChecked.value = val;\n    }\n  },\n);\n//#endregion\n\n//#region Handlers\nfunction toggle(event: MouseEvent | KeyboardEvent) {\n  if (disabled || loading) return;\n\n  const newChecked = !isChecked.value;\n  internalChecked.value = newChecked;\n  model.value = newChecked;\n  emit('change', newChecked, event);\n\n  if (event instanceof MouseEvent) {\n    emit('click', newChecked, event);\n  }\n}\n\nfunction handleClick(event: MouseEvent) {\n  toggle(event);\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle(event);\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLButtonElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n</script>\n\n<template>\n  <button\n    ref=\"rootRef\"\n    type=\"button\"\n    role=\"switch\"\n    class=\"b-switch\"\n    :class=\"[\n      `b-switch--${size}`,\n      {\n        'b-switch--checked': isChecked,\n        'b-switch--disabled': disabled,\n        'b-switch--loading': loading,\n      },\n    ]\"\n    :aria-checked=\"isChecked\"\n    :aria-disabled=\"disabled || loading || undefined\"\n    :disabled=\"disabled\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeyDown\"\n  >\n    <span class=\"b-switch__handle\" aria-hidden=\"true\">\n      <svg\n        v-if=\"loading\"\n        class=\"b-switch__loading-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"28\"\n          stroke-dashoffset=\"8\"\n        />\n      </svg>\n    </span>\n    <span class=\"b-switch__inner\" aria-hidden=\"true\">\n      <span v-if=\"isChecked\" class=\"b-switch__inner-checked\">\n        <slot name=\"checked\" />\n      </span>\n      <span v-else class=\"b-switch__inner-unchecked\">\n        <slot name=\"unchecked\" />\n      </span>\n    </span>\n  </button>\n</template>\n\n<style scoped>\n.b-switch {\n  --b-switch-handle-bg: #fff;\n  --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);\n  --b-switch-handle-size: 18px;\n  --b-switch-track-height: 22px;\n  --b-switch-track-min-width: 44px;\n  --b-switch-track-padding: 2px;\n  --b-switch-inner-max-margin: 24px;\n  --b-switch-inner-min-margin: 9px;\n  --b-switch-track-bg: rgba(0, 0, 0, 0.25);\n  --b-switch-track-bg-checked: #1565d8;\n  --b-switch-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-switch-loading-color: #1565d8;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: var(--b-switch-track-min-width);\n  height: var(--b-switch-track-height);\n  padding: 0;\n  border: 0;\n  border-radius: calc(var(--b-switch-track-height) / 2);\n  background-color: var(--b-switch-track-bg);\n  cursor: pointer;\n  outline: none;\n  transition:\n    background-color 0.2s,\n    opacity 0.2s;\n  vertical-align: middle;\n  user-select: none;\n  line-height: 1;\n}\n\n.b-switch:focus-visible {\n  outline: 2px solid var(--b-switch-track-bg-checked);\n  outline-offset: 2px;\n}\n\n/* Checked state */\n.b-switch--checked {\n  background-color: var(--b-switch-track-bg-checked);\n}\n\n/* Disabled state */\n.b-switch--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n/* Loading state */\n.b-switch--loading {\n  cursor: default;\n  opacity: 0.85;\n}\n\n/* Handle */\n.b-switch__handle {\n  position: absolute;\n  top: var(--b-switch-track-padding);\n  inset-inline-start: var(--b-switch-track-padding);\n  width: var(--b-switch-handle-size);\n  height: var(--b-switch-handle-size);\n  border-radius: 50%;\n  background-color: var(--b-switch-handle-bg);\n  box-shadow: var(--b-switch-handle-shadow);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: inset-inline-start 0.2s ease-in-out;\n}\n\n.b-switch--checked .b-switch__handle {\n  inset-inline-start: calc(\n    100% - var(--b-switch-handle-size) - var(--b-switch-track-padding)\n  );\n}\n\n/* Loading icon */\n.b-switch__loading-icon {\n  width: calc(var(--b-switch-handle-size) * 0.6);\n  height: calc(var(--b-switch-handle-size) * 0.6);\n  color: var(--b-switch-loading-color);\n  animation: b-switch-spin 1s linear infinite;\n}\n\n.b-switch--checked .b-switch__loading-icon {\n  color: var(--b-switch-track-bg-checked);\n}\n\n@keyframes b-switch-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Inner content */\n.b-switch__inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  font-size: 12px;\n  color: #fff;\n  overflow: hidden;\n  padding: 0;\n}\n\n.b-switch__inner-checked,\n.b-switch__inner-unchecked {\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.b-switch__inner-checked {\n  margin-inline-start: calc(\n    var(--b-switch-track-padding) + var(--b-switch-inner-min-margin)\n  );\n  margin-inline-end: calc(\n    var(--b-switch-handle-size) + var(--b-switch-track-padding) +\n      var(--b-switch-inner-min-margin) - var(--b-switch-inner-max-margin) +\n      var(--b-switch-inner-max-margin)\n  );\n}\n\n.b-switch__inner-unchecked {\n  margin-inline-start: calc(\n    var(--b-switch-handle-size) + var(--b-switch-track-padding) +\n      var(--b-switch-inner-min-margin)\n  );\n  margin-inline-end: calc(\n    var(--b-switch-track-padding) + var(--b-switch-inner-min-margin)\n  );\n}\n\n/* Small size */\n.b-switch--small {\n  --b-switch-handle-size: 12px;\n  --b-switch-track-height: 16px;\n  --b-switch-track-min-width: 28px;\n  --b-switch-inner-max-margin: 18px;\n  --b-switch-inner-min-margin: 6px;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-switch {\n  --b-switch-track-bg: rgba(255, 255, 255, 0.25);\n  --b-switch-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-switch {\n    --b-switch-track-bg: rgba(255, 255, 255, 0.25);\n    --b-switch-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-switch__handle {\n    transition: none;\n  }\n\n  .b-switch {\n    transition: none;\n  }\n\n  .b-switch__loading-icon {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system188.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}