@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system173.js

@@ -1,185 +0,0 @@
-import { useComponentId as e } from "./design-system10.js";
-import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, unref as f, useModel as p, watch as m } from "vue";
-//#region src/components/BRate/BRate.vue?vue&type=script&setup=true&lang.ts
-var h = [
-	"aria-label",
-	"aria-disabled",
-	"aria-valuenow",
-	"aria-valuemax",
-	"aria-valuetext",
-	"tabindex"
-], g = [
-	"title",
-	"onMousemove",
-	"onClick"
-], _ = {
-	class: "b-rate__star-first",
-	"aria-hidden": "true"
-}, v = ["data-character"], y = {
-	key: 1,
-	class: "b-rate__icon",
-	viewBox: "0 0 24 24",
-	fill: "currentColor",
-	"aria-hidden": "true"
-}, b = {
-	class: "b-rate__star-second",
-	"aria-hidden": "true"
-}, x = ["data-character"], S = {
-	key: 1,
-	class: "b-rate__icon",
-	viewBox: "0 0 24 24",
-	fill: "currentColor",
-	"aria-hidden": "true"
-}, C = ["name", "value"], w = /* @__PURE__ */ a({
-	__name: "BRate",
-	props: /* @__PURE__ */ o({
-		allowClear: {
-			type: Boolean,
-			default: !0
-		},
-		allowHalf: {
-			type: Boolean,
-			default: !1
-		},
-		count: { default: 5 },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		keyboard: {
-			type: Boolean,
-			default: !0
-		},
-		size: { default: "default" },
-		tooltips: { default: () => [] },
-		character: {}
-	}, {
-		modelValue: { default: 0 },
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ o([
-		"hover-change",
-		"change",
-		"focus",
-		"blur",
-		"keydown"
-	], ["update:modelValue"]),
-	setup(a, { expose: o, emit: w }) {
-		let T = p(a, "modelValue"), E = w, { componentUID: D } = e(), O = l(0), k = l(!1), A = l(0), j = n(() => O.value > 0 ? O.value : T.value), M = n(() => {
-			let e = [];
-			for (let t = 1; t <= a.count; t++) e.push({
-				index: t,
-				value: t
-			});
-			return e;
-		});
-		function N(e) {
-			let t = j.value;
-			return e <= Math.floor(t) ? "full" : a.allowHalf && e - .5 <= t && e > t ? "half" : "zero";
-		}
-		function P(e, t) {
-			if (a.disabled) return;
-			let n = t && a.allowHalf ? e - .5 : e;
-			a.allowClear && n === T.value ? (T.value = 0, E("change", 0)) : (T.value = n, E("change", n));
-		}
-		function F(e, t) {
-			if (a.disabled) return;
-			let n = t.currentTarget.getBoundingClientRect(), r = t.clientX - n.left < n.width / 2, i;
-			i = a.allowHalf && r ? e - .5 : e, i !== O.value && (O.value = i, E("hover-change", i));
-		}
-		function I() {
-			a.disabled || (O.value = 0, E("hover-change", 0));
-		}
-		function L() {
-			k.value = !0, A.value = Math.ceil(T.value) || 1, E("focus");
-		}
-		function R() {
-			k.value = !1, A.value = 0, E("blur");
-		}
-		function z(e) {
-			if (a.disabled || !a.keyboard) return;
-			E("keydown", e);
-			let t = a.allowHalf ? .5 : 1;
-			switch (e.key) {
-				case "ArrowRight":
-				case "ArrowUp": {
-					e.preventDefault();
-					let n = Math.min(T.value + t, a.count);
-					T.value = n, A.value = Math.ceil(n), E("change", n);
-					break;
-				}
-				case "ArrowLeft":
-				case "ArrowDown": {
-					e.preventDefault();
-					let n = Math.max(T.value - t, 0);
-					T.value = n, A.value = Math.ceil(n) || 1, E("change", n);
-					break;
-				}
-				case "Enter":
-				case " ":
-					e.preventDefault(), a.allowClear && A.value === Math.ceil(T.value) && (T.value = 0, E("change", 0));
-					break;
-			}
-		}
-		let B = l(null);
-		function V() {
-			B.value?.focus();
-		}
-		function H() {
-			B.value?.blur();
-		}
-		return o({
-			focus: V,
-			blur: H
-		}), m(O, (e) => {
-			e === 0 && (A.value = Math.ceil(T.value) || 0);
-		}), (e, n) => (c(), r("div", {
-			ref_key: "rootRef",
-			ref: B,
-			class: s(["b-rate", [`b-rate--${a.size}`, {
-				"b-rate--disabled": a.disabled,
-				"b-rate--focused": k.value
-			}]]),
-			role: "slider",
-			"aria-label": e.$attrs["aria-label"] || "Rating",
-			"aria-disabled": a.disabled || void 0,
-			"aria-valuenow": T.value,
-			"aria-valuemin": 0,
-			"aria-valuemax": a.count,
-			"aria-valuetext": `${T.value} out of ${a.count} stars`,
-			tabindex: a.disabled ? -1 : 0,
-			onMouseleave: I,
-			onFocus: L,
-			onBlur: R,
-			onKeydown: z
-		}, [(c(!0), r(t, null, u(M.value, (t) => (c(), r("div", {
-			key: t.index,
-			class: s(["b-rate__star", {
-				"b-rate__star--full": N(t.index) === "full",
-				"b-rate__star--half": N(t.index) === "half",
-				"b-rate__star--zero": N(t.index) === "zero",
-				"b-rate__star--active": O.value > 0,
-				"b-rate__star--focused": k.value && A.value === t.index
-			}]),
-			title: a.tooltips[t.index - 1] || void 0,
-			onMousemove: (e) => F(t.index, e),
-			onClick: (e) => P(t.index, a.allowHalf && e.offsetX < e.currentTarget.offsetWidth / 2)
-		}, [i("div", _, [d(e.$slots, "character", { index: t.index }, () => [a.character ? (c(), r("span", {
-			key: 0,
-			class: "b-rate__character",
-			"data-character": a.character
-		}, null, 8, v)) : (c(), r("svg", y, [...n[0] ||= [i("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }, null, -1)]]))], !0)]), i("div", b, [d(e.$slots, "character", { index: t.index }, () => [a.character ? (c(), r("span", {
-			key: 0,
-			class: "b-rate__character",
-			"data-character": a.character
-		}, null, 8, x)) : (c(), r("svg", S, [...n[1] ||= [i("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }, null, -1)]]))], !0)])], 42, g))), 128)), i("input", {
-			type: "hidden",
-			name: `b-rate-${f(D)}`,
-			value: T.value
-		}, null, 8, C)], 42, h));
-	}
-});
-//#endregion
-export { w as default };
-
-//# sourceMappingURL=design-system173.js.map

package/dist/design-system173.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system173.js","names":["$attrs"],"sources":["../src/components/BRate/BRate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\n//#region Props\nconst {\n  allowClear = true,\n  allowHalf = false,\n  count = 5,\n  disabled = false,\n  keyboard = true,\n  size = 'default',\n  tooltips = [],\n  character,\n} = defineProps<{\n  /** Whether to allow clearing the value when clicking the same star again. */\n  allowClear?: boolean;\n  /** Whether to allow half-star selection. */\n  allowHalf?: boolean;\n  /** Total number of stars. */\n  count?: number;\n  /** If true, the component is read-only and cannot be interacted with. */\n  disabled?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Size of the stars. */\n  size?: 'small' | 'default' | 'large';\n  /** Array of tooltip strings displayed on hover for each star. */\n  tooltips?: string[];\n  /** Custom character/icon rendered as each star. Receives `{ index }`. */\n  character?: string;\n}>();\n\n/**\n * The current rating value.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  'hover-change': [value: number];\n  change: [value: number];\n  focus: [];\n  blur: [];\n  keydown: [event: KeyboardEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst { componentUID } = useComponentId();\nconst hoverValue = ref(0);\nconst isFocused = ref(false);\nconst focusedIndex = ref(0);\n\nconst currentValue = computed(() =>\n  hoverValue.value > 0 ? hoverValue.value : model.value,\n);\n\nconst stars = computed(() => {\n  const items: { index: number; value: number }[] = [];\n  for (let i = 1; i <= count; i++) {\n    items.push({ index: i, value: i });\n  }\n  return items;\n});\n//#endregion\n\n//#region Star state\nfunction getStarState(index: number): 'full' | 'half' | 'zero' {\n  const val = currentValue.value;\n  if (index <= Math.floor(val)) return 'full';\n  if (allowHalf && index - 0.5 <= val && index > val) return 'half';\n  return 'zero';\n}\n//#endregion\n\n//#region Handlers\nfunction handleClick(index: number, isHalf: boolean) {\n  if (disabled) return;\n\n  const newValue = isHalf && allowHalf ? index - 0.5 : index;\n\n  if (allowClear && newValue === model.value) {\n    model.value = 0;\n    emit('change', 0);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleMouseMove(index: number, event: MouseEvent) {\n  if (disabled) return;\n\n  const target = event.currentTarget as HTMLElement;\n  const rect = target.getBoundingClientRect();\n  const isLeftHalf = event.clientX - rect.left < rect.width / 2;\n\n  let newHoverValue: number;\n  if (allowHalf && isLeftHalf) {\n    newHoverValue = index - 0.5;\n  } else {\n    newHoverValue = index;\n  }\n\n  if (newHoverValue !== hoverValue.value) {\n    hoverValue.value = newHoverValue;\n    emit('hover-change', newHoverValue);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (disabled) return;\n  hoverValue.value = 0;\n  emit('hover-change', 0);\n}\n\nfunction handleFocus() {\n  isFocused.value = true;\n  focusedIndex.value = Math.ceil(model.value) || 1;\n  emit('focus');\n}\n\nfunction handleBlur() {\n  isFocused.value = false;\n  focusedIndex.value = 0;\n  emit('blur');\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || !keyboard) return;\n  emit('keydown', event);\n\n  const step = allowHalf ? 0.5 : 1;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp': {\n      event.preventDefault();\n      const next = Math.min(model.value + step, count);\n      model.value = next;\n      focusedIndex.value = Math.ceil(next);\n      emit('change', next);\n      break;\n    }\n    case 'ArrowLeft':\n    case 'ArrowDown': {\n      event.preventDefault();\n      const prev = Math.max(model.value - step, 0);\n      model.value = prev;\n      focusedIndex.value = Math.ceil(prev) || 1;\n      emit('change', prev);\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (allowClear && focusedIndex.value === Math.ceil(model.value)) {\n        model.value = 0;\n        emit('change', 0);\n      }\n      break;\n    }\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLElement | 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\n//#region Watch hover for tooltip\nwatch(hoverValue, (val) => {\n  if (val === 0) {\n    focusedIndex.value = Math.ceil(model.value) || 0;\n  }\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-rate\"\n    :class=\"[\n      `b-rate--${size}`,\n      {\n        'b-rate--disabled': disabled,\n        'b-rate--focused': isFocused,\n      },\n    ]\"\n    role=\"slider\"\n    :aria-label=\"$attrs['aria-label'] as string || 'Rating'\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-valuenow=\"model\"\n    :aria-valuemin=\"0\"\n    :aria-valuemax=\"count\"\n    :aria-valuetext=\"`${model} out of ${count} stars`\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @mouseleave=\"handleMouseLeave\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div\n      v-for=\"star in stars\"\n      :key=\"star.index\"\n      class=\"b-rate__star\"\n      :class=\"{\n        'b-rate__star--full': getStarState(star.index) === 'full',\n        'b-rate__star--half': getStarState(star.index) === 'half',\n        'b-rate__star--zero': getStarState(star.index) === 'zero',\n        'b-rate__star--active': hoverValue > 0,\n        'b-rate__star--focused': isFocused && focusedIndex === star.index,\n      }\"\n      :title=\"tooltips[star.index - 1] || undefined\"\n      @mousemove=\"(e) => handleMouseMove(star.index, e)\"\n      @click=\"(e) => handleClick(star.index, allowHalf && (e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2))\"\n    >\n      <div class=\"b-rate__star-first\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n      <div class=\"b-rate__star-second\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n    </div>\n\n    <input\n      type=\"hidden\"\n      :name=\"`b-rate-${componentUID}`\"\n      :value=\"model\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.b-rate {\n  --b-rate-star-bg: rgba(0, 0, 0, 0.06);\n  --b-rate-star-color: #fadb14;\n  --b-rate-star-hover-scale: scale(1.1);\n  --b-rate-star-size: 20px;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  outline: none;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.b-rate--small {\n  --b-rate-star-size: 15px;\n  gap: 6px;\n}\n\n.b-rate--large {\n  --b-rate-star-size: 25px;\n  gap: 10px;\n}\n\n.b-rate--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.b-rate:focus-visible {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 4px;\n  border-radius: 2px;\n}\n\n.b-rate__star {\n  position: relative;\n  display: inline-flex;\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.b-rate--disabled .b-rate__star {\n  cursor: not-allowed;\n}\n\n.b-rate__star:not(.b-rate--disabled .b-rate__star):hover {\n  transform: var(--b-rate-star-hover-scale);\n}\n\n.b-rate__star--focused {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.b-rate__star-first,\n.b-rate__star-second {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  user-select: none;\n}\n\n.b-rate__star-first {\n  width: 50%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.b-rate__star-second {\n  z-index: 0;\n}\n\n/* Zero state: both halves use background color */\n.b-rate__star--zero .b-rate__star-first,\n.b-rate__star--zero .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n/* Full state: both halves use active color */\n.b-rate__star--full .b-rate__star-first,\n.b-rate__star--full .b-rate__star-second {\n  color: var(--b-rate-star-color);\n}\n\n/* Half state: first half active, second half background */\n.b-rate__star--half .b-rate__star-first {\n  color: var(--b-rate-star-color);\n}\n\n.b-rate__star--half .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n.b-rate__icon {\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  flex-shrink: 0;\n  display: block;\n}\n\n.b-rate__character {\n  font-size: var(--b-rate-star-size);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.b-rate__character::before {\n  content: attr(data-character);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-rate {\n  --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n  --b-rate-star-color: #fadb14;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-rate {\n    --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n    --b-rate-star-color: #fadb14;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-rate__star {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system176.js

@@ -1,118 +0,0 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, nextTick as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, watch as g } from "vue";
-//#region src/components/BSegmented/BSegmented.vue?vue&type=script&setup=true&lang.ts
-var _ = ["aria-disabled"], v = [
-	"aria-label",
-	"aria-checked",
-	"aria-disabled",
-	"tabindex",
-	"onClick",
-	"onKeydown"
-], y = { class: "b-segmented__item-inner" }, b = {
-	key: 0,
-	class: "b-segmented__item-icon",
-	"aria-hidden": "true"
-}, x = { class: "b-segmented__item-label" }, S = /* @__PURE__ */ o({
-	__name: "BSegmented",
-	props: {
-		modelValue: {},
-		defaultValue: {},
-		options: { default: () => [] },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		size: { default: "default" },
-		block: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: ["update:modelValue", "change"],
-	setup(o, { emit: S }) {
-		let C = S, w = t(() => o.options.map((e) => typeof e == "string" || typeof e == "number" ? {
-			label: String(e),
-			value: e,
-			disabled: !1
-		} : {
-			label: String(e.label ?? e.value),
-			value: e.value,
-			disabled: e.disabled ?? !1,
-			icon: e.icon
-		})), T = t(() => o.modelValue !== void 0), E = f(o.modelValue ?? o.defaultValue ?? w.value[0]?.value);
-		g(() => o.modelValue, (e) => {
-			e !== void 0 && (E.value = e);
-		}), g(w, (e) => {
-			E.value === void 0 && e.length > 0 && (E.value = e[0].value);
-		});
-		let D = t(() => T.value ? o.modelValue : E.value), O = f(null), k = f(null);
-		function A(e) {
-			if (!O.value) return;
-			let t = O.value.querySelectorAll(".b-segmented__item")[e];
-			if (!t) return;
-			let n = O.value.getBoundingClientRect().left, { left: r, width: i } = t.getBoundingClientRect();
-			k.value = {
-				transform: `translateX(${r - n}px)`,
-				width: `${i}px`
-			};
-		}
-		let j = t(() => w.value.findIndex((e) => e.value === D.value));
-		g(j, async (e) => {
-			e < 0 || (await s(), A(e));
-		}, { immediate: !1 }), u(() => {
-			j.value >= 0 && A(j.value);
-		});
-		function M(e) {
-			o.disabled || e.disabled || e.value !== D.value && (T.value || (E.value = e.value), C("update:modelValue", e.value), C("change", e.value));
-		}
-		function N(e, t) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), M(t)), (e.key === "ArrowRight" || e.key === "ArrowDown") && (e.preventDefault(), P(1)), (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), P(-1));
-		}
-		function P(e) {
-			if (!O.value) return;
-			let t = Array.from(O.value.querySelectorAll(".b-segmented__item:not([aria-disabled=\"true\"])")), n = document.activeElement, r = t.indexOf(n);
-			if (r < 0) {
-				t[0]?.focus();
-				return;
-			}
-			t[(r + e + t.length) % t.length]?.focus();
-		}
-		let F = t(() => ["b-segmented", {
-			"b-segmented--disabled": o.disabled,
-			"b-segmented--block": o.block,
-			"b-segmented--small": o.size === "small",
-			"b-segmented--large": o.size === "large"
-		}]);
-		return (t, s) => (d(), r("div", {
-			ref_key: "rootRef",
-			ref: O,
-			class: c(F.value),
-			role: "group",
-			"aria-disabled": o.disabled ? "true" : void 0
-		}, [k.value ? (d(), r("div", {
-			key: 0,
-			class: "b-segmented__thumb",
-			"aria-hidden": "true",
-			style: l({
-				transform: k.value.transform,
-				width: k.value.width
-			})
-		}, null, 4)) : n("", !0), (d(!0), r(e, null, p(w.value, (e) => (d(), r("div", {
-			key: String(e.value),
-			class: c(["b-segmented__item", {
-				"b-segmented__item--selected": e.value === D.value,
-				"b-segmented__item--disabled": e.disabled || o.disabled
-			}]),
-			role: "radio",
-			"aria-label": e.label,
-			"aria-checked": e.value === D.value,
-			"aria-disabled": e.disabled || o.disabled ? "true" : void 0,
-			tabindex: o.disabled || e.disabled ? -1 : e.value === D.value ? 0 : -1,
-			onClick: (t) => M(e),
-			onKeydown: (t) => N(t, e)
-		}, [i("div", y, [e.icon ? (d(), r("span", b, h(e.icon), 1)) : n("", !0), i("span", x, [m(t.$slots, "label", { option: e }, () => [a(h(e.label), 1)])])])], 42, v))), 128))], 10, _));
-	}
-});
-//#endregion
-export { S as default };
-
-//# sourceMappingURL=design-system176.js.map