@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/form-control-CBEBNz12.js

@@ -0,0 +1,120 @@
+//#region source/utilities/form-control.ts
+var e = [
+	"valueMissing",
+	"typeMismatch",
+	"patternMismatch",
+	"tooLong",
+	"tooShort",
+	"rangeUnderflow",
+	"rangeOverflow",
+	"stepMismatch",
+	"badInput",
+	"customError"
+], t = (e) => e == null || e === "" || Array.isArray(e) && e.length === 0, n = (e) => ({
+	flags: { customError: !0 },
+	message: e
+}), r = (e, t, r, i) => {
+	if (e) {
+		if (t && !r) {
+			let { flags: r } = n(t);
+			e.setValidity(r, t, i ?? void 0);
+		} else e.setValidity({});
+	}
+}, i = (e) => Array.isArray(e) ? [...e] : e, a = (r) => {
+	class a extends r {
+		static {
+			this.formAssociated = !0;
+		}
+		constructor(...e) {
+			super(...e), this._internals = null, this._initialValue = void 0, this._initialValueCaptured = !1;
+			try {
+				this._internals = this.attachInternals();
+			} catch {
+				this._internals = null;
+			}
+		}
+		get form() {
+			return this._internals?.form ?? null;
+		}
+		get labels() {
+			return this._internals?.labels ?? null;
+		}
+		get validity() {
+			return this._internals?.validity ?? null;
+		}
+		get validationMessage() {
+			return this._internals?.validationMessage ?? "";
+		}
+		get willValidate() {
+			return this._internals?.willValidate ?? !1;
+		}
+		checkValidity() {
+			return this._internals?.checkValidity() ?? !0;
+		}
+		reportValidity() {
+			return this._internals?.reportValidity() ?? !0;
+		}
+		formResetCallback() {
+			this.value = i(this._initialValue);
+		}
+		formStateRestoreCallback(e) {
+			typeof e == "string" && (this.value = e);
+		}
+		getFormValue() {
+			let e = this, { value: t } = e;
+			if (t == null) return null;
+			if (Array.isArray(t)) {
+				if (!e.name) return null;
+				let n = new FormData();
+				for (let r of t) n.append(e.name, String(r));
+				return n;
+			}
+			return String(t);
+		}
+		getValidityTarget() {
+			return null;
+		}
+		getValidityAnchor() {
+			return this.getValidityTarget() ?? this.renderRoot?.querySelector("input:not([type=\"hidden\"]), textarea, [role=\"combobox\"], [tabindex=\"0\"], button") ?? null;
+		}
+		getFormValidity() {
+			let n = this.getValidityTarget();
+			if (n) {
+				let t = {};
+				for (let r of e) n.validity[r] && (t[r] = !0);
+				return {
+					flags: t,
+					message: n.validationMessage
+				};
+			}
+			let r = this;
+			return r.required && t(r.value) ? {
+				flags: { valueMissing: !0 },
+				message: "Please fill out this field."
+			} : {
+				flags: {},
+				message: ""
+			};
+		}
+		getCustomValidityMessage() {
+			return this.errorMessage ?? "";
+		}
+		syncFormState() {
+			let e = this;
+			e.name && this.getAttribute("name") !== e.name && this.setAttribute("name", e.name);
+			let t = this._internals;
+			if (!t) return;
+			t.setFormValue(e.disabled ? null : this.getFormValue());
+			let r = this.getCustomValidityMessage(), { flags: i, message: a } = r ? n(r) : this.getFormValidity();
+			Object.values(i).some(Boolean) && !e.disabled ? t.setValidity(i, a, this.getValidityAnchor() ?? void 0) : t.setValidity({});
+		}
+		updated(e) {
+			super.updated(e), this._initialValueCaptured ||= (this._initialValue = i(this.value), !0), this.syncFormState();
+		}
+	}
+	return a;
+};
+//#endregion
+export { n, r, a as t };
+
+//# sourceMappingURL=form-control-CBEBNz12.js.map

package/dist/shared/form-control-CBEBNz12.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-CBEBNz12.js","names":["VALIDITY_KEYS","isEmpty","value","customErrorValidity","syncCustomValidity","internals","message","disabled","flags","anchor","cloneValue","FormControlMixin","FormControlElement","superClass","args","state","host","data","item","target","key","customMessage","changed"],"sources":["../../source/utilities/form-control.ts"],"sourcesContent":["import type { LitElement, PropertyValues } from 'lit';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T = object> = new (...args: any[]) => T;\n\n/** A value `ElementInternals.setFormValue()` accepts. */\nexport type FormValue = string | File | FormData | null;\n\n/** Validity flags plus the message the browser shows for them. */\nexport interface FormValidity {\n  flags: ValidityStateFlags;\n  message: string;\n}\n\nconst VALIDITY_KEYS = [\n  'valueMissing',\n  'typeMismatch',\n  'patternMismatch',\n  'tooLong',\n  'tooShort',\n  'rangeUnderflow',\n  'rangeOverflow',\n  'stepMismatch',\n  'badInput',\n  'customError',\n] as const satisfies ReadonlyArray<keyof ValidityStateFlags>;\n\n/** The shape a form control element needs for the mixin to read it. */\ninterface FormControlHost extends LitElement {\n  name?: string | null;\n  value?: unknown;\n  required?: boolean;\n  disabled?: boolean;\n  errorMessage?: string | null;\n}\n\n/**\n * Public API added by {@link FormControlMixin}.\n *\n * Declared separately so the mixin's return type can be expressed in .d.ts\n * output (TypeScript cannot emit anonymous classes with non-public members).\n */\nexport declare class FormControlInterface {\n  static formAssociated: boolean;\n  /** The `<form>` this control belongs to, if any. */\n  readonly form: HTMLFormElement | null;\n  /** Labels associated with the control (e.g. `<label for>` in light DOM). */\n  readonly labels: NodeList | null;\n  /** Current validity state, as on native form controls. */\n  readonly validity: ValidityState | null;\n  /** Message describing why the control is invalid ('' when valid). */\n  readonly validationMessage: string;\n  /** Whether the control takes part in constraint validation. */\n  readonly willValidate: boolean;\n  /** Returns true when the control is valid; fires `invalid` otherwise. */\n  checkValidity(): boolean;\n  /** Like checkValidity(), and shows the browser's validation message. */\n  reportValidity(): boolean;\n  /** Restores the value the control had when it first rendered. */\n  formResetCallback(): void;\n  /** Restores a value the browser saved (back/forward navigation, autofill). */\n  formStateRestoreCallback(state: string | File | FormData | null): void;\n  /**\n   * The value submitted with the form. Defaults to `value` as a string;\n   * arrays submit one entry per item. Override for other value shapes.\n   */\n  getFormValue(): FormValue;\n  /**\n   * Validity to report. Defaults to mirroring `getValidityTarget()` when it\n   * returns a native input, else to `valueMissing` when `required` and empty.\n   */\n  getFormValidity(): FormValidity;\n  /**\n   * App-set error that marks the control invalid for its form, like a\n   * native `setCustomValidity()`. Defaults to `errorMessage`. While it is\n   * non-empty the control reports `customError` with this message, taking\n   * precedence over `getFormValidity()`.\n   */\n  getCustomValidityMessage(): string;\n  /** A native input/textarea whose constraint validation is mirrored. */\n  getValidityTarget(): HTMLInputElement | HTMLTextAreaElement | null;\n  /** The focusable element the browser's validation bubble points at. */\n  getValidityAnchor(): HTMLElement | null;\n  /** Pushes value and validity to the form. Runs after every update. */\n  syncFormState(): void;\n}\n\nconst isEmpty = (value: unknown): boolean =>\n  value === null ||\n  value === undefined ||\n  value === '' ||\n  (Array.isArray(value) && value.length === 0);\n\n/** Validity for an app-set error message, like `setCustomValidity()`. */\nexport const customErrorValidity = (message: string): FormValidity => ({\n  flags: { customError: true },\n  message,\n});\n\n/**\n * Marks a form-associated element invalid while `message` is non-empty\n * (and it is not disabled), else clears its validity. For controls that\n * manage their own `ElementInternals` instead of using\n * {@link FormControlMixin}.\n */\nexport const syncCustomValidity = (\n  internals: ElementInternals | null,\n  message: string | null | undefined,\n  disabled: boolean,\n  anchor?: HTMLElement | null\n): void => {\n  if (!internals) return;\n  if (message && !disabled) {\n    const { flags } = customErrorValidity(message);\n    internals.setValidity(flags, message, anchor ?? undefined);\n  } else {\n    internals.setValidity({});\n  }\n};\n\nconst cloneValue = (value: unknown): unknown =>\n  Array.isArray(value) ? [...value] : value;\n\n/**\n * Makes a Lit element a form-associated custom element: its `name` and\n * `value` are submitted with an enclosing `<form>`, `required` takes part in\n * constraint validation, and form reset restores the initial value.\n *\n * The host must expose `name`, `value`, `required` and `disabled` properties.\n * Components that override `updated()` must call `super.updated()`.\n *\n * @example\n * ```ts\n * @customElement('bp-input')\n * export class BpInput extends FormControlMixin(LitElement) { ... }\n * ```\n */\nexport const FormControlMixin = <T extends Constructor<LitElement>>(\n  superClass: T\n) => {\n  class FormControlElement extends superClass {\n    static formAssociated = true;\n\n    /** @internal */\n    _internals: ElementInternals | null = null;\n    /** @internal */\n    _initialValue: unknown = undefined;\n    /** @internal */\n    _initialValueCaptured = false;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      try {\n        this._internals = this.attachInternals();\n      } catch {\n        // Environments without ElementInternals: the control still works,\n        // it just does not take part in native form submission.\n        this._internals = null;\n      }\n    }\n\n    get form(): HTMLFormElement | null {\n      return this._internals?.form ?? null;\n    }\n\n    get labels(): NodeList | null {\n      return this._internals?.labels ?? null;\n    }\n\n    get validity(): ValidityState | null {\n      return this._internals?.validity ?? null;\n    }\n\n    get validationMessage(): string {\n      return this._internals?.validationMessage ?? '';\n    }\n\n    get willValidate(): boolean {\n      return this._internals?.willValidate ?? false;\n    }\n\n    checkValidity(): boolean {\n      return this._internals?.checkValidity() ?? true;\n    }\n\n    reportValidity(): boolean {\n      return this._internals?.reportValidity() ?? true;\n    }\n\n    formResetCallback(): void {\n      (this as unknown as FormControlHost).value = cloneValue(\n        this._initialValue\n      );\n    }\n\n    formStateRestoreCallback(state: string | File | FormData | null): void {\n      if (typeof state === 'string') {\n        (this as unknown as FormControlHost).value = state;\n      }\n    }\n\n    getFormValue(): FormValue {\n      const host = this as unknown as FormControlHost;\n      const { value } = host;\n      if (value === null || value === undefined) return null;\n      if (Array.isArray(value)) {\n        if (!host.name) return null;\n        const data = new FormData();\n        for (const item of value) data.append(host.name, String(item));\n        return data;\n      }\n      return String(value);\n    }\n\n    getValidityTarget(): HTMLInputElement | HTMLTextAreaElement | null {\n      return null;\n    }\n\n    getValidityAnchor(): HTMLElement | null {\n      return (\n        this.getValidityTarget() ??\n        this.renderRoot?.querySelector<HTMLElement>(\n          'input:not([type=\"hidden\"]), textarea, [role=\"combobox\"], [tabindex=\"0\"], button'\n        ) ??\n        null\n      );\n    }\n\n    getFormValidity(): FormValidity {\n      const target = this.getValidityTarget();\n      if (target) {\n        const flags: ValidityStateFlags = {};\n        for (const key of VALIDITY_KEYS) {\n          if (target.validity[key]) flags[key] = true;\n        }\n        return { flags, message: target.validationMessage };\n      }\n      const host = this as unknown as FormControlHost;\n      if (host.required && isEmpty(host.value)) {\n        return {\n          flags: { valueMissing: true },\n          message: 'Please fill out this field.',\n        };\n      }\n      return { flags: {}, message: '' };\n    }\n\n    getCustomValidityMessage(): string {\n      return (this as unknown as FormControlHost).errorMessage ?? '';\n    }\n\n    syncFormState(): void {\n      const host = this as unknown as FormControlHost;\n\n      // Form submission uses the host's `name` attribute.\n      if (host.name) {\n        if (this.getAttribute('name') !== host.name) {\n          this.setAttribute('name', host.name);\n        }\n      }\n\n      const internals = this._internals;\n      if (!internals) return;\n\n      internals.setFormValue(host.disabled ? null : this.getFormValue());\n\n      const customMessage = this.getCustomValidityMessage();\n      const { flags, message } = customMessage\n        ? customErrorValidity(customMessage)\n        : this.getFormValidity();\n      const invalid = Object.values(flags).some(Boolean);\n      if (invalid && !host.disabled) {\n        internals.setValidity(\n          flags,\n          message,\n          this.getValidityAnchor() ?? undefined\n        );\n      } else {\n        internals.setValidity({});\n      }\n    }\n\n    protected override updated(changed: PropertyValues): void {\n      super.updated(changed);\n      if (!this._initialValueCaptured) {\n        this._initialValue = cloneValue(\n          (this as unknown as FormControlHost).value\n        );\n        this._initialValueCaptured = true;\n      }\n      this.syncFormState();\n    }\n  }\n\n  return FormControlElement as unknown as Constructor<FormControlInterface> & {\n    formAssociated: boolean;\n  } & T;\n};\n"],"mappings":"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"}

package/dist/shared/grid-BDSEzri7.js

@@ -0,0 +1,88 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region source/components/grid/grid.style.ts
+var o = n`
+  :host {
+    display: grid;
+    /* Set from the columns / minColumnWidth properties */
+    grid-template-columns: var(--_bp-grid-template, repeat(1, minmax(0, 1fr)));
+    gap: var(--bp-spacing-md);
+    align-items: stretch;
+    min-width: 0;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Gap: semantic spacing scale */
+  :host([gap='none']) {
+    gap: 0;
+  }
+  :host([gap='2xs']) {
+    gap: var(--bp-spacing-2xs);
+  }
+  :host([gap='xs']) {
+    gap: var(--bp-spacing-xs);
+  }
+  :host([gap='sm']) {
+    gap: var(--bp-spacing-sm);
+  }
+  :host([gap='md']) {
+    gap: var(--bp-spacing-md);
+  }
+  :host([gap='lg']) {
+    gap: var(--bp-spacing-lg);
+  }
+  :host([gap='xl']) {
+    gap: var(--bp-spacing-xl);
+  }
+  :host([gap='2xl']) {
+    gap: var(--bp-spacing-2xl);
+  }
+
+  :host([align='start']) {
+    align-items: start;
+  }
+  :host([align='center']) {
+    align-items: center;
+  }
+  :host([align='end']) {
+    align-items: end;
+  }
+`, s = class extends t {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.columns = 1, this.minColumnWidth = "", this.gap = "md", this.align = "stretch";
+	}
+	get template() {
+		return this.minColumnWidth ? `repeat(auto-fit, minmax(min(${this.minColumnWidth}, 100%), 1fr))` : `repeat(${Math.max(1, Math.floor(Number(this.columns) || 1))}, minmax(0, 1fr))`;
+	}
+	updated(e) {
+		super.updated(e), (e.has("columns") || e.has("minColumnWidth")) && this.style.setProperty("--_bp-grid-template", this.template);
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
+};
+e([a({
+	type: Number,
+	reflect: !0
+})], s.prototype, "columns", void 0), e([a({
+	type: String,
+	attribute: "min-column-width",
+	reflect: !0
+})], s.prototype, "minColumnWidth", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "gap", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "align", void 0), s = e([i("bp-grid")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=grid-BDSEzri7.js.map

package/dist/shared/grid-BDSEzri7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-BDSEzri7.js","names":["_decorate","__decorate","gridStyles","BpGrid","LitElement","changed","property","customElement"],"sources":["../../source/components/grid/grid.style.ts","../../source/components/grid/grid.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const gridStyles = css`\n  :host {\n    display: grid;\n    /* Set from the columns / minColumnWidth properties */\n    grid-template-columns: var(--_bp-grid-template, repeat(1, minmax(0, 1fr)));\n    gap: var(--bp-spacing-md);\n    align-items: stretch;\n    min-width: 0;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* Gap: semantic spacing scale */\n  :host([gap='none']) {\n    gap: 0;\n  }\n  :host([gap='2xs']) {\n    gap: var(--bp-spacing-2xs);\n  }\n  :host([gap='xs']) {\n    gap: var(--bp-spacing-xs);\n  }\n  :host([gap='sm']) {\n    gap: var(--bp-spacing-sm);\n  }\n  :host([gap='md']) {\n    gap: var(--bp-spacing-md);\n  }\n  :host([gap='lg']) {\n    gap: var(--bp-spacing-lg);\n  }\n  :host([gap='xl']) {\n    gap: var(--bp-spacing-xl);\n  }\n  :host([gap='2xl']) {\n    gap: var(--bp-spacing-2xl);\n  }\n\n  :host([align='start']) {\n    align-items: start;\n  }\n  :host([align='center']) {\n    align-items: center;\n  }\n  :host([align='end']) {\n    align-items: end;\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { gridStyles } from './grid.style.js';\nimport type { LayoutGap } from '../stack/stack.js';\n\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * Lays its children out on a grid with a token-based gap. Give it a fixed\n * number of `columns`, or a `minColumnWidth` to fit as many columns as the\n * space allows (responsive without media queries).\n *\n * @element bp-grid\n *\n * @slot - The grid items\n */\n@customElement('bp-grid')\nexport class BpGrid extends LitElement {\n  /** Fixed number of equal-width columns (ignored when `minColumnWidth` is set) */\n  @property({ type: Number, reflect: true }) declare columns: number;\n\n  /**\n   * Minimum column width as a CSS length (e.g. `16rem`, `240px`). When set,\n   * the grid fits as many columns of at least this width as it can.\n   */\n  @property({ type: String, attribute: 'min-column-width', reflect: true })\n  declare minColumnWidth: string;\n\n  /** Space between rows and columns, from the semantic spacing scale */\n  @property({ type: String, reflect: true }) declare gap: LayoutGap;\n\n  /** Vertical alignment of items within their row */\n  @property({ type: String, reflect: true }) declare align: GridAlign;\n\n  static styles = [gridStyles];\n\n  constructor() {\n    super();\n    this.columns = 1;\n    this.minColumnWidth = '';\n    this.gap = 'md';\n    this.align = 'stretch';\n  }\n\n  /** The grid-template-columns value the properties describe */\n  get template(): string {\n    if (this.minColumnWidth) {\n      return `repeat(auto-fit, minmax(min(${this.minColumnWidth}, 100%), 1fr))`;\n    }\n    const count = Math.max(1, Math.floor(Number(this.columns) || 1));\n    return `repeat(${count}, minmax(0, 1fr))`;\n  }\n\n  protected updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has('columns') || changed.has('minColumnWidth')) {\n      this.style.setProperty('--_bp-grid-template', this.template);\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-grid': BpGrid;\n  }\n}\n"],"mappings":";;;;AAEA,IAAaE,IAAa,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCehBC,IAAN,cAAqBC,EAAW;;EAiBrB,KAAA,SAAA,CAACF,CAAU;;CAE3B,cAAc;EAKZ,AAJA,MAAM,GACN,KAAK,UAAU,GACf,KAAK,iBAAiB,IACtB,KAAK,MAAM,MACX,KAAK,QAAQ;CACf;CAGA,IAAI,WAAmB;EAKrB,OAJI,KAAK,iBACA,+BAA+B,KAAK,eAAe,kBAGrD,UADO,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,KAAK,OAAO,KAAK,CAAC,CAC7C,EAAM;CACzB;CAEA,QAAkB,GAA+B;EAE/C,AADA,MAAM,QAAQG,CAAO,IACjBA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,gBAAgB,MACxD,KAAK,MAAM,YAAY,uBAAuB,KAAK,QAAQ;CAE/D;CAEA,SAAS;EACP,OAAO,CAAI;CACb;AACF;AA5CGL,EAAA,CAAAM,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,WAAA,KAAA,CAAA,GAMxCH,EAAA,CAAAM,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAoB,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,kBAAA,KAAA,CAAA,GAIvEH,EAAA,CAAAM,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,OAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAM,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,SAAA,KAAA,CAAA,GAhB1C,IAAAH,EAAA,CAAAO,EAAc,SAAS,CAAA,GAAAJ,CAAA"}

package/dist/shared/heading-9DjHVERY.js

@@ -0,0 +1,150 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region source/components/heading/heading.style.ts
+var o = n`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .heading {
+    margin: 0;
+    padding: 0;
+    color: var(--bp-color-text);
+    font-family: var(--bp-font-family);
+  }
+
+  /* Sizes */
+  .heading--xs {
+    font-size: var(--bp-font-size-xs);
+    line-height: 1.5;
+  }
+
+  .heading--sm {
+    font-size: var(--bp-font-size-sm);
+    line-height: 1.45;
+  }
+
+  .heading--md {
+    font-size: var(--bp-font-size-base);
+    line-height: 1.4;
+  }
+
+  .heading--lg {
+    font-size: var(--bp-font-size-lg);
+    line-height: 1.35;
+  }
+
+  .heading--xl {
+    font-size: var(--bp-font-size-xl);
+    line-height: 1.3;
+  }
+
+  .heading--2xl {
+    font-size: var(--bp-font-size-2xl);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  .heading--3xl {
+    font-size: var(--bp-font-size-3xl);
+    line-height: 1.2;
+    letter-spacing: -0.015em;
+  }
+
+  .heading--4xl {
+    font-size: var(--bp-font-size-4xl);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  /* Font weights */
+  .heading--light {
+    font-weight: var(--bp-font-weight-light);
+  }
+
+  .heading--normal {
+    font-weight: var(--bp-font-weight-normal);
+  }
+
+  .heading--medium {
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  .heading--semibold {
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  .heading--bold {
+    font-weight: var(--bp-font-weight-bold);
+  }
+`, s = class extends t {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.level = 1, this.size = "4xl", this.weight = "bold";
+	}
+	render() {
+		let e = `heading--${this.size}`, t = `heading--${this.weight}`;
+		switch (this.level) {
+			case 1: return r`<h1
+          part="heading"
+          class="heading ${e} ${t}"
+        >
+          <slot></slot>
+        </h1>`;
+			case 2: return r`<h2
+          part="heading"
+          class="heading ${e} ${t}"
+        >
+          <slot></slot>
+        </h2>`;
+			case 3: return r`<h3
+          part="heading"
+          class="heading ${e} ${t}"
+        >
+          <slot></slot>
+        </h3>`;
+			case 4: return r`<h4
+          part="heading"
+          class="heading ${e} ${t}"
+        >
+          <slot></slot>
+        </h4>`;
+			case 5: return r`<h5
+          part="heading"
+          class="heading ${e} ${t}"
+        >
+          <slot></slot>
+        </h5>`;
+			case 6: return r`<h6
+          part="heading"
+          class="heading ${e} ${t}"
+        >
+          <slot></slot>
+        </h6>`;
+			default: return r`<h1
+          part="heading"
+          class="heading ${e} ${t}"
+        >
+          <slot></slot>
+        </h1>`;
+		}
+	}
+};
+e([a({
+	type: Number,
+	reflect: !0
+})], s.prototype, "level", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "weight", void 0), s = e([i("bp-heading")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=heading-9DjHVERY.js.map

package/dist/shared/heading-9DjHVERY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-9DjHVERY.js","names":["_decorate","__decorate","headingStyles","BpHeading","LitElement","sizeClass","weightClass","property","customElement"],"sources":["../../source/components/heading/heading.style.ts","../../source/components/heading/heading.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const headingStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .heading {\n    margin: 0;\n    padding: 0;\n    color: var(--bp-color-text);\n    font-family: var(--bp-font-family);\n  }\n\n  /* Sizes */\n  .heading--xs {\n    font-size: var(--bp-font-size-xs);\n    line-height: 1.5;\n  }\n\n  .heading--sm {\n    font-size: var(--bp-font-size-sm);\n    line-height: 1.45;\n  }\n\n  .heading--md {\n    font-size: var(--bp-font-size-base);\n    line-height: 1.4;\n  }\n\n  .heading--lg {\n    font-size: var(--bp-font-size-lg);\n    line-height: 1.35;\n  }\n\n  .heading--xl {\n    font-size: var(--bp-font-size-xl);\n    line-height: 1.3;\n  }\n\n  .heading--2xl {\n    font-size: var(--bp-font-size-2xl);\n    line-height: 1.25;\n    letter-spacing: -0.01em;\n  }\n\n  .heading--3xl {\n    font-size: var(--bp-font-size-3xl);\n    line-height: 1.2;\n    letter-spacing: -0.015em;\n  }\n\n  .heading--4xl {\n    font-size: var(--bp-font-size-4xl);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n  }\n\n  /* Font weights */\n  .heading--light {\n    font-weight: var(--bp-font-weight-light);\n  }\n\n  .heading--normal {\n    font-weight: var(--bp-font-weight-normal);\n  }\n\n  .heading--medium {\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  .heading--semibold {\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  .heading--bold {\n    font-weight: var(--bp-font-weight-bold);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { headingStyles } from './heading.style.js';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingSize =\n  'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\nexport type HeadingWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';\n\n/**\n * A typography component for semantic headings (h1-h6).\n *\n * @element bp-heading\n *\n * @property {HeadingLevel} level - The semantic heading level (h1-h6)\n * @property {HeadingSize} size - The visual size of the heading\n * @property {HeadingWeight} weight - The font weight of the heading\n *\n * @slot - The heading text content\n *\n * @cssprop --bp-heading-color - Custom color for the heading\n * @cssprop --bp-heading-font-family - Custom font family for the heading\n *\n * @csspart heading - The heading element (h1-h6)\n */\n@customElement('bp-heading')\nexport class BpHeading extends LitElement {\n  /**\n   * The semantic heading level (h1-h6).\n   * Determines the actual HTML element rendered.\n   */\n  @property({ type: Number, reflect: true }) declare level: HeadingLevel;\n\n  /**\n   * The visual size of the heading.\n   * Allows visual hierarchy independent of semantic level.\n   * Defaults to match the level when not specified.\n   */\n  @property({ type: String, reflect: true }) declare size: HeadingSize;\n\n  /**\n   * The font weight of the heading.\n   */\n  @property({ type: String, reflect: true }) declare weight: HeadingWeight;\n\n  static styles = [headingStyles];\n\n  constructor() {\n    super();\n    this.level = 1;\n    this.size = '4xl';\n    this.weight = 'bold';\n  }\n\n  render() {\n    const sizeClass = `heading--${this.size}`;\n    const weightClass = `heading--${this.weight}`;\n\n    // Using a switch to create the proper heading element\n    switch (this.level) {\n      case 1:\n        return html`<h1\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h1>`;\n      case 2:\n        return html`<h2\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h2>`;\n      case 3:\n        return html`<h3\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h3>`;\n      case 4:\n        return html`<h4\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h4>`;\n      case 5:\n        return html`<h5\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h5>`;\n      case 6:\n        return html`<h6\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h6>`;\n      default:\n        return html`<h1\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h1>`;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-heading': BpHeading;\n  }\n}\n"],"mappings":";;;;AAEA,IAAaE,IAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCwBnBC,IAAN,cAAwBC,EAAW;;EAmBxB,KAAA,SAAA,CAACF,CAAa;;CAE9B,cAAc;EAIZ,AAHA,MAAM,GACN,KAAK,QAAQ,GACb,KAAK,OAAO,OACZ,KAAK,SAAS;CAChB;CAEA,SAAS;EACP,IAAMG,IAAY,YAAY,KAAK,QAC7BC,IAAc,YAAY,KAAK;EAGrC,QAAQ,KAAK,OAAb;GACE,KAAK,GACH,OAAO,CAAI;;2BAEQD,EAAU,GAAGC,EAAY;;;;GAI9C,KAAK,GACH,OAAO,CAAI;;2BAEQD,EAAU,GAAGC,EAAY;;;;GAI9C,KAAK,GACH,OAAO,CAAI;;2BAEQD,EAAU,GAAGC,EAAY;;;;GAI9C,KAAK,GACH,OAAO,CAAI;;2BAEQD,EAAU,GAAGC,EAAY;;;;GAI9C,KAAK,GACH,OAAO,CAAI;;2BAEQD,EAAU,GAAGC,EAAY;;;;GAI9C,KAAK,GACH,OAAO,CAAI;;2BAEQD,EAAU,GAAGC,EAAY;;;;GAI9C,SACE,OAAO,CAAI;;2BAEQD,EAAU,GAAGC,EAAY;;;;EAIhD;CACF;AACF;AAhFGN,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,SAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,UAAA,KAAA,CAAA,GAlB1C,IAAAH,EAAA,CAAAQ,EAAc,YAAY,CAAA,GAAAL,CAAA"}

package/dist/shared/icon-SU3ebQcn.js

@@ -0,0 +1,176 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import { unsafeHTML as c } from "lit/directives/unsafe-html.js";
+//#region source/components/icon/icon.style.ts
+var l = n`
+  /* Base styles */
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+  }
+
+  :host([size='full']) {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    /* Icons take the color of the text around them unless a variant is set */
+    color: inherit;
+  }
+
+  .icon svg,
+  .icon ::slotted(svg) {
+    width: 100%;
+    height: 100%;
+    display: block;
+    fill: currentColor;
+  }
+
+  /* Color variants */
+  .icon--default {
+    color: inherit;
+  }
+
+  .icon--primary {
+    color: var(--bp-color-primary);
+  }
+
+  .icon--success {
+    color: var(--bp-color-success);
+  }
+
+  .icon--warning {
+    color: var(--bp-color-warning);
+  }
+
+  .icon--error {
+    color: var(--bp-color-error);
+  }
+
+  .icon--muted {
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Size variants */
+  .icon--xs {
+    width: var(--bp-icon-size-xs);
+    height: var(--bp-icon-size-xs);
+  }
+
+  .icon--sm {
+    width: var(--bp-icon-size-sm);
+    height: var(--bp-icon-size-sm);
+  }
+
+  .icon--md {
+    width: var(--bp-icon-size-md);
+    height: var(--bp-icon-size-md);
+  }
+
+  .icon--lg {
+    width: var(--bp-icon-size-lg);
+    height: var(--bp-icon-size-lg);
+  }
+
+  .icon--xl {
+    width: var(--bp-icon-size-xl);
+    height: var(--bp-icon-size-xl);
+  }
+
+  .icon--2xl {
+    width: var(--bp-icon-size-2xl);
+    height: var(--bp-icon-size-2xl);
+  }
+
+  .icon--3xl {
+    width: var(--bp-icon-size-3xl);
+    height: var(--bp-icon-size-3xl);
+  }
+
+  .icon--4xl {
+    width: var(--bp-icon-size-4xl);
+    height: var(--bp-icon-size-4xl);
+  }
+
+  .icon--full {
+    width: 100%;
+    height: 100%;
+  }
+`, u = /* @__PURE__ */ new Map();
+function d(e, t) {
+	u.set(e, t);
+}
+function f(e) {
+	return u.get(e);
+}
+//#endregion
+//#region source/components/icon/icon.ts
+var p = class extends t {
+	constructor() {
+		super(), this._loadedSvg = "", this._loadingName = "", this.name = "", this.svg = "", this.size = "md", this.color = "default", this.ariaLabel = "";
+	}
+	static {
+		this.styles = [l];
+	}
+	willUpdate(e) {
+		if (e.has("name") || e.has("svg")) {
+			if (this.svg) {
+				this._loadedSvg = "", this._loadingName = "";
+				return;
+			}
+			this.name && e.has("name") && this._loadIcon(this.name);
+		}
+	}
+	async _loadIcon(e) {
+		this._loadingName = e;
+		let t = f(e);
+		if (t) {
+			this._loadedSvg = t;
+			return;
+		}
+		try {
+			let { loadIconByName: t } = await import("../icons/resolver.js"), n = await t(e);
+			n && this._loadingName === e && (d(e, n), this._loadedSvg = n);
+		} catch {
+			this._loadingName === e && (this._loadedSvg = "");
+		}
+	}
+	render() {
+		let e = [
+			"icon",
+			`icon--${this.size}`,
+			`icon--${this.color}`
+		].join(" "), t = this.svg || this._loadedSvg || null;
+		return r`
+      <span
+        class=${e}
+        part="icon"
+        role=${this.ariaLabel ? "img" : "presentation"}
+        aria-label=${s(this.ariaLabel || void 0)}
+      >
+        ${t ? r`${c(t)}` : r`<slot></slot>`}
+      </span>
+    `;
+	}
+};
+e([a({ type: String })], p.prototype, "name", void 0), e([a({ type: String })], p.prototype, "svg", void 0), e([a({
+	type: String,
+	reflect: !0
+})], p.prototype, "size", void 0), e([a({ type: String })], p.prototype, "color", void 0), e([a({
+	type: String,
+	attribute: "aria-label"
+})], p.prototype, "ariaLabel", void 0), e([o()], p.prototype, "_loadedSvg", void 0), p = e([i("bp-icon")], p);
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=icon-SU3ebQcn.js.map

package/dist/shared/icon-SU3ebQcn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-SU3ebQcn.js","names":["_decorate","__decorate","iconStyles","registry","registerIcon","name","svg","getIconSvg","BpIcon","LitElement","changedProps","cached","loadIconByName","classes","svgContent","ifDefined","unsafeHTML","property","state","customElement"],"sources":["../../source/components/icon/icon.style.ts","../../source/components/icon/icon-registry.ts","../../source/components/icon/icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n  }\n\n  :host([size='full']) {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    /* Icons take the color of the text around them unless a variant is set */\n    color: inherit;\n  }\n\n  .icon svg,\n  .icon ::slotted(svg) {\n    width: 100%;\n    height: 100%;\n    display: block;\n    fill: currentColor;\n  }\n\n  /* Color variants */\n  .icon--default {\n    color: inherit;\n  }\n\n  .icon--primary {\n    color: var(--bp-color-primary);\n  }\n\n  .icon--success {\n    color: var(--bp-color-success);\n  }\n\n  .icon--warning {\n    color: var(--bp-color-warning);\n  }\n\n  .icon--error {\n    color: var(--bp-color-error);\n  }\n\n  .icon--muted {\n    color: var(--bp-color-text-muted);\n  }\n\n  /* Size variants */\n  .icon--xs {\n    width: var(--bp-icon-size-xs);\n    height: var(--bp-icon-size-xs);\n  }\n\n  .icon--sm {\n    width: var(--bp-icon-size-sm);\n    height: var(--bp-icon-size-sm);\n  }\n\n  .icon--md {\n    width: var(--bp-icon-size-md);\n    height: var(--bp-icon-size-md);\n  }\n\n  .icon--lg {\n    width: var(--bp-icon-size-lg);\n    height: var(--bp-icon-size-lg);\n  }\n\n  .icon--xl {\n    width: var(--bp-icon-size-xl);\n    height: var(--bp-icon-size-xl);\n  }\n\n  .icon--2xl {\n    width: var(--bp-icon-size-2xl);\n    height: var(--bp-icon-size-2xl);\n  }\n\n  .icon--3xl {\n    width: var(--bp-icon-size-3xl);\n    height: var(--bp-icon-size-3xl);\n  }\n\n  .icon--4xl {\n    width: var(--bp-icon-size-4xl);\n    height: var(--bp-icon-size-4xl);\n  }\n\n  .icon--full {\n    width: 100%;\n    height: 100%;\n  }\n`;\n","/**\n * Shared icon registry — runtime singleton.\n *\n * Serves two roles:\n * 1. **Lazy-load cache** — When `<bp-icon name=\"...\">` dynamically imports\n *    an icon entry module, the SVG is stored here so subsequent renders of\n *    the same icon name are instant.\n * 2. **Bulk registration** — `all.ts` imports every icon entry and calls\n *    `registerIcon()` for each one (used by Storybook / dev tools).\n *\n * Internal Blueprint components bypass the registry entirely. They import\n * SVG data as value bindings and pass them directly via the `svg` property,\n * which guarantees the data survives bundler tree-shaking.\n */\n\nconst registry = new Map<string, string>();\n\n/**\n * Register an icon's SVG content by name.\n * Duplicate registrations silently overwrite (idempotent).\n */\nexport function registerIcon(name: string, svg: string): void {\n  registry.set(name, svg);\n}\n\n/**\n * Retrieve the raw SVG string for a registered icon.\n * Returns undefined if the icon has not been registered.\n */\nexport function getIconSvg(name: string): string | undefined {\n  return registry.get(name);\n}\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { iconStyles } from './icon.style.js';\nimport { getIconSvg, registerIcon } from './icon-registry.js';\nimport type { IconName } from './icons/icon-name.generated.js';\n\nexport type { IconName } from './icons/icon-name.generated.js';\n\nexport type IconSize =\n  'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';\nexport type IconColor =\n  'default' | 'primary' | 'success' | 'warning' | 'error' | 'muted';\n\n/**\n * Icon component - SVG icon wrapper with size variants\n *\n * Supports both named icons from the System UI Icons library and custom SVG content via slot.\n *\n * @slot - Custom SVG content to display (used when `name` is not provided)\n *\n * @csspart icon - The icon container element\n *\n * @example\n * ```html\n * <!-- Using named icon from library -->\n * <bp-icon name=\"create\" size=\"md\" color=\"primary\"></bp-icon>\n *\n * <!-- Using custom SVG content -->\n * <bp-icon size=\"md\">\n *   <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n *     <path d=\"M12 2L2 7v10c0 5.5 3.8 10.6 10 12 6.2-1.4 10-6.5 10-12V7l-10-5z\"/>\n *   </svg>\n * </bp-icon>\n * ```\n */\n@customElement('bp-icon')\nexport class BpIcon extends LitElement {\n  /**\n   * Name of the icon from the System UI Icons library.\n   * When set (and `svg` is empty), the component lazy-loads the icon's\n   * entry module at runtime and caches the SVG for subsequent renders.\n   * Ignored when the `svg` property is set.\n   * @type {IconName}\n   */\n  @property({ type: String }) declare name: IconName | '';\n\n  /**\n   * Raw SVG string to render directly. When set, the `name` property is\n   * ignored. This is the preferred way for internal Blueprint components\n   * to supply icon data because it survives bundler tree-shaking.\n   * @type {string}\n   */\n  @property({ type: String }) declare svg: string;\n\n  /**\n   * Size variant of the icon\n   * @type {IconSize}\n   */\n  @property({ type: String, reflect: true }) declare size: IconSize;\n\n  /**\n   * Color variant of the icon. `default` inherits the surrounding text color.\n   * @type {IconColor}\n   */\n  @property({ type: String }) declare color: IconColor;\n\n  /**\n   * ARIA label for accessibility\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  declare ariaLabel: string;\n\n  /** SVG content resolved by lazy-loading an icon entry module. */\n  @state() private _loadedSvg = '';\n\n  /** Tracks which icon name is currently being loaded to avoid races. */\n  private _loadingName = '';\n\n  constructor() {\n    super();\n    this.name = '';\n    this.svg = '';\n    this.size = 'md';\n    this.color = 'default';\n    this.ariaLabel = '';\n  }\n\n  static styles = [iconStyles];\n\n  willUpdate(changedProps: PropertyValues) {\n    // When the name changes and no direct svg is provided, lazy-load the icon.\n    if (changedProps.has('name') || changedProps.has('svg')) {\n      if (this.svg) {\n        // Direct svg takes priority — clear any lazy-loaded content.\n        this._loadedSvg = '';\n        this._loadingName = '';\n        return;\n      }\n\n      if (this.name && changedProps.has('name')) {\n        this._loadIcon(this.name);\n      }\n    }\n  }\n\n  /**\n   * Lazy-load an icon entry module by name.\n   *\n   * First checks the sync registry cache (populated by `all.ts` or a\n   * previous load). If the icon isn't cached, dynamically imports the\n   * generated resolver module which contains static `import()` paths for\n   * every icon. Static paths let the consumer's bundler (Vite, Rollup,\n   * esbuild) analyse and rewrite them at build time — unlike computed\n   * URLs which break when the bundler reorganises the file layout.\n   */\n  private async _loadIcon(name: string) {\n    this._loadingName = name;\n\n    // Fast path: icon already in the registry (e.g. tests import all.ts).\n    const cached = getIconSvg(name);\n    if (cached) {\n      this._loadedSvg = cached;\n      return;\n    }\n\n    try {\n      const { loadIconByName } = await import('./icons/resolver.generated.js');\n      const svg = await loadIconByName(name);\n\n      if (svg && this._loadingName === name) {\n        registerIcon(name, svg); // Cache for next time.\n        this._loadedSvg = svg;\n      }\n    } catch {\n      if (this._loadingName === name) {\n        this._loadedSvg = '';\n      }\n    }\n  }\n\n  render() {\n    const classes = ['icon', `icon--${this.size}`, `icon--${this.color}`].join(\n      ' '\n    );\n\n    // Priority: svg property → lazy-loaded → slot fallback\n    const svgContent = this.svg || this._loadedSvg || null;\n\n    return html`\n      <span\n        class=${classes}\n        part=\"icon\"\n        role=${this.ariaLabel ? 'img' : 'presentation'}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        ${svgContent ? html`${unsafeHTML(svgContent)}` : html`<slot></slot>`}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-icon': BpIcon;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAaE,IAAa,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCavBC,oBAAW,IAAI,IAAoB;AAMzC,SAAgBC,EAAa,GAAc,GAAmB;CAC5D,EAAS,IAAIC,GAAMC,CAAG;AACxB;AAMA,SAAgBC,EAAW,GAAkC;CAC3D,OAAOJ,EAAS,IAAIE,CAAI;AAC1B;;;ACOO,IAAMG,IAAN,cAAqBC,EAAW;CA2CrC,cAAc;EAMZ,AALA,MAAM,GANsB,KAAA,aAAA,IAGP,KAAA,eAAA,IAIrB,KAAK,OAAO,IACZ,KAAK,MAAM,IACX,KAAK,OAAO,MACZ,KAAK,QAAQ,WACb,KAAK,YAAY;CACnB;;EAEgB,KAAA,SAAA,CAACP,CAAU;;CAE3B,WAAW,GAA8B;EAEvC,IAAIQ,EAAa,IAAI,MAAM,KAAKA,EAAa,IAAI,KAAK,GAAG;GACvD,IAAI,KAAK,KAAK;IAGZ,AADA,KAAK,aAAa,IAClB,KAAK,eAAe;IACpB;GACF;GAEA,AAAI,KAAK,QAAQA,EAAa,IAAI,MAAM,KACtC,KAAK,UAAU,KAAK,IAAI;EAE5B;CACF;CAYA,MAAc,UAAU,GAAc;EACpC,KAAK,eAAeL;EAGpB,IAAMM,IAASJ,EAAWF,CAAI;EAC9B,IAAIM,GAAQ;GACV,KAAK,aAAaA;GAClB;EACF;EAEA,IAAI;GACF,IAAM,EAAE,sBAAmB,MAAM,OAAO,yBAClCL,IAAM,MAAMM,EAAeP,CAAI;GAErC,AAAIC,KAAO,KAAK,iBAAiBD,MAC/BD,EAAaC,GAAMC,CAAG,GACtB,KAAK,aAAaA;EAEtB,QAAQ;GACN,AAAI,KAAK,iBAAiBD,MACxB,KAAK,aAAa;EAEtB;CACF;CAEA,SAAS;EACP,IAAMQ,IAAU;GAAC;GAAQ,SAAS,KAAK;GAAQ,SAAS,KAAK;EAAO,CAAC,CAAC,KACpE,GACF,GAGMC,IAAa,KAAK,OAAO,KAAK,cAAc;EAElD,OAAO,CAAI;;gBAECD,EAAQ;;eAET,KAAK,YAAY,QAAQ,eAAe;qBAClCE,EAAU,KAAK,aAAa,KAAA,CAAS,EAAE;;UAElDD,IAAa,CAAI,GAAGE,EAAWF,CAAU,MAAM,CAAI,gBAAgB;;;CAG3E;AACF;AApHGd,EAAA,CAAAiB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,QAAA,KAAA,CAAA,GAQzBR,EAAA,CAAAiB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,OAAA,KAAA,CAAA,GAMzBR,EAAA,CAAAiB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,QAAA,KAAA,CAAA,GAMxCR,EAAA,CAAAiB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,SAAA,KAAA,CAAA,GAMzBR,EAAA,CAAAiB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAAT,EAAA,WAAA,aAAA,KAAA,CAAA,GAIlDR,EAAA,CAAAkB,EAAM,CAAA,GAAAV,EAAA,WAAA,cAAA,KAAA,CAAA,GAvCR,IAAAR,EAAA,CAAAmB,EAAc,SAAS,CAAA,GAAAX,CAAA"}