@cupra/ui-kit 2.0.0-canary.16 → 2.0.0-canary.160

package/dist-react/esm/components/ds-select/ds-select.js

@@ -1,176 +1,192 @@
-import { UiKitElement as f } from "../base/UiKitElement.js";
-import { customUiKitElement as S } from "../../decorators/customUiKitElement.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as d, nothing as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as O } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as v } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { SelectKeyboardController as m } from "./controllers/SelectKeyboardController.js";
-import { commonStyles as b } from "./styles/common.styles.js";
-var x = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (e, t, i, o) => {
-  for (var a = o > 1 ? void 0 : o ? I(t, i) : t, l = e.length - 1, r; l >= 0; l--)
-    (r = e[l]) && (a = (o ? r(t, i, a) : r(a)) || a);
-  return o && a && x(t, i, a), a;
-};
-let s = class extends f {
-  constructor() {
-    super(...arguments), this.mode = "light", this.size = "medium", this.variant = "primary", this._open = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.activeIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
-      e.forEach((t) => {
-        t.type === "childList" && this.syncNativeOptions();
-      }), this.requestUpdate();
-    }, this.syncNativeOptions = () => {
-      this.nativeOptions = Array.from(this.nativeSelect.options);
-    }, this.handleOpen = () => {
-      this._open = !0, this.activeIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect();
-    }, this.handleClose = () => {
-      this._open = !1;
-    }, this.handleClickDisplaySelect = () => {
-      this._open ? this.handleClose() : this.handleOpen();
-    }, this.handleKeydown = (e) => {
-      this._open ? m.handleKeydownWhenOpen(e, {
-        commit: () => this.commitSelection(),
-        navigateNext: () => this.advanceSelection(1),
-        navigatePrev: () => this.advanceSelection(-1),
-        navigateFirst: () => this.advanceToFirst(),
-        navigateLast: () => this.advanceToLast(),
-        close: this.handleClose
-      }) : m.handleKeydownWhenClosed(e, {
-        open: this.handleOpen
-      });
-    };
-  }
-  firstUpdated() {
-    this.initializeNativeSelect();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.cleanup();
-  }
-  initializeNativeSelect() {
-    var e, t;
-    this.nativeSelect = (e = this.nativeSelects) == null ? void 0 : e[0], this.nativeLabel = (t = this.nativeLabels) == null ? void 0 : t[0], this.nativeSelect && (this.syncNativeOptions(), this.setupNativeElementsAttributes(), this.setupEventListeners());
-  }
-  handleChangeForcedError() {
-    var e;
-    this.hasForcedError = ((e = this.forcedError) == null ? void 0 : e.length) > 0;
-  }
-  setupNativeElementsAttributes() {
-    this.nativeSelect.setAttribute("aria-hidden", "true"), this.nativeSelect.setAttribute("tabindex", "-1");
-  }
-  setupEventListeners() {
-    this.nativeSelect.addEventListener("change", this.syncNativeOptions), this.observer = new MutationObserver(this.handleMutations), this.observer.observe(this.nativeSelect, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0
-    });
-  }
-  cleanup() {
-    var e, t;
-    (e = this.nativeSelect) == null || e.removeEventListener("change", this.syncNativeOptions), (t = this.observer) == null || t.disconnect();
-  }
-  findSelectedOptionIndex() {
-    var t;
-    const e = this.nativeOptions.findIndex((i) => i.value === this.nativeSelect.value);
-    return (t = this.nativeOptions[e]) != null && t.hidden ? this.nativeOptions.findIndex((i) => !i.hidden) : e;
-  }
-  focusDisplaySelect() {
-    this.updateComplete.then(() => {
-      var e;
-      (e = this.displaySelect) == null || e.focus();
-    });
-  }
-  advanceToFirst() {
-    if (this.nativeOptions.length) {
-      const t = this.nativeOptions.findIndex((i) => !i.hidden);
-      this.advanceSelection(t - this.activeIndex);
-    }
-  }
-  advanceToLast() {
-    if (this.nativeOptions.length) {
-      let t = -1;
-      for (let i = this.nativeOptions.length - 1; i >= 0; i--)
-        if (!this.nativeOptions[i].hidden) {
-          t = i;
-          break;
-        }
-      this.advanceSelection(t - this.activeIndex);
-    }
-  }
-  advanceSelection(e) {
-    const t = this.nativeOptions.length;
-    this.activeIndex = (this.activeIndex + e + t) % t, this.shouldSkipHiddenOption() ? this.advanceSelection(Math.sign(e)) : this.scrollToActive(this.nativeOptions[this.activeIndex]);
-  }
-  shouldSkipHiddenOption() {
-    return this.nativeOptions.some((t) => !t.hidden) && this.nativeOptions[this.activeIndex].hidden;
-  }
-  scrollToActive(e) {
-    var t;
-    (t = e == null ? void 0 : e.scrollIntoView) == null || t.call(e, { block: "nearest" });
-  }
-  commitSelection() {
-    this.handleClose();
-    const e = this.nativeOptions[this.activeIndex];
-    this.nativeSelect && (e != null && e.value) && this.updateNativeSelectValue(e.value);
-  }
-  updateNativeSelectValue(e) {
-    this.nativeSelect.value = e, ["input", "change"].forEach(
-      (t) => this.nativeSelect.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
-    );
-  }
-  get containerClasses() {
-    var e, t, i, o;
-    return {
-      container: !0,
-      open: this._open,
-      disabled: !!((e = this.nativeSelect) != null && e.disabled),
-      filled: !!((i = (t = this.nativeOptions) == null ? void 0 : t.find((a) => a.selected && !a.hidden)) != null && i.selected),
-      invalid: !((o = this.nativeSelect) != null && o.validity.valid),
-      error: this.hasForcedError,
-      [this.size]: !!this.size,
-      [this.mode]: !!this.mode,
-      [this.variant]: !!this.variant
-    };
-  }
-  set open(e) {
-    this._open = e;
-  }
-  get open() {
-    return this._open;
-  }
-  render() {
-    return d`
+import "../ds-theme-provider/themeContext.js";
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { e as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import { o as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as s } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { e as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import "../ds-loader-spinner/ds-loader-spinner.js";
+import { SelectKeyboardController as p } from "./controllers/SelectKeyboardController.js";
+import { commonStyles as m } from "./styles/common.styles.js";
+//#region src/components/ds-select/ds-select.ts
+var h, g = class extends s {
+	static {
+		h = this;
+	}
+	constructor(...e) {
+		super(...e), this.mode = "light", this.size = "large", this.variant = "primary", this.readonly = !1, this.loading = !1, this.loadingAriaLabel = "Loading", this.iconName = void 0, this.dataAriaLabel = void 0, this._open = !1, this._keyboardNavigating = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.keyboardFocusIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
+			e.forEach((e) => {
+				e.type === "childList" && this.syncNativeOptions();
+			}), this.requestUpdate();
+		}, this.syncNativeOptions = () => {
+			this.nativeOptions = Array.from(this.nativeSelect.options);
+		}, this.handleOpen = () => {
+			this.readonly || this.loading || (this._open = !0, this.keyboardFocusIndex = this.findSelectedOptionIndex(), this.focusDisplaySelect());
+		}, this.handleClose = () => {
+			this._open = !1;
+		}, this.handleClickDisplaySelect = () => {
+			this._open ? this.handleClose() : (this._keyboardNavigating = !1, this.handleOpen());
+		}, this.handleKeydown = (e) => {
+			this._open ? (this._keyboardNavigating = !0, p.handleKeydownWhenOpen(e, {
+				commit: () => this.commitSelection(),
+				navigateNext: () => this.advanceSelection(1),
+				navigatePrev: () => this.advanceSelection(-1),
+				navigateFirst: () => this.advanceToFirst(),
+				navigateLast: () => this.advanceToLast(),
+				close: this.handleClose
+			})) : p.handleKeydownWhenClosed(e, { open: () => {
+				this._keyboardNavigating = !0, this.handleOpen();
+			} });
+		};
+	}
+	static {
+		this.styles = [m];
+	}
+	static {
+		this.ARIA_OPTION_PREFIX = "option-";
+	}
+	firstUpdated() {
+		queueMicrotask(() => this.initializeNativeSelect());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.cleanup();
+	}
+	initializeNativeSelect() {
+		this.nativeSelect = this.nativeSelects?.[0], this.nativeLabel = this.nativeLabels?.[0], this.nativeSelect && (this.syncNativeOptions(), this.setupNativeElementsAttributes(), this.setupEventListeners());
+	}
+	handleChangeForcedError() {
+		this.hasForcedError = this.forcedError?.length > 0;
+	}
+	setupNativeElementsAttributes() {
+		this.nativeSelect.setAttribute("aria-hidden", "true"), this.nativeSelect.setAttribute("tabindex", "-1");
+	}
+	setupEventListeners() {
+		this.nativeSelect.addEventListener("change", this.syncNativeOptions), this.observer = new MutationObserver(this.handleMutations), this.observer.observe(this.nativeSelect, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0
+		});
+	}
+	cleanup() {
+		this.nativeSelect?.removeEventListener("change", this.syncNativeOptions), this.observer?.disconnect();
+	}
+	findSelectedOptionIndex() {
+		let e = this.nativeOptions.findIndex((e) => e.value === this.nativeSelect.value);
+		return this.nativeOptions[e]?.hidden ? this.nativeOptions.findIndex((e) => !e.hidden) : e;
+	}
+	focusDisplaySelect() {
+		this.updateComplete.then(() => {
+			this.displaySelect?.focus();
+		});
+	}
+	advanceToFirst() {
+		if (this.nativeOptions.length) {
+			let e = this.nativeOptions.findIndex((e) => !e.hidden);
+			this.advanceSelection(e - this.keyboardFocusIndex);
+		}
+	}
+	advanceToLast() {
+		if (this.nativeOptions.length) {
+			let e = -1;
+			for (let t = this.nativeOptions.length - 1; t >= 0; t--) if (!this.nativeOptions[t].hidden) {
+				e = t;
+				break;
+			}
+			this.advanceSelection(e - this.keyboardFocusIndex);
+		}
+	}
+	advanceSelection(e) {
+		let t = this.nativeOptions.length;
+		this.keyboardFocusIndex = (this.keyboardFocusIndex + e + t) % t, this.shouldSkipHiddenOption() ? this.advanceSelection(Math.sign(e)) : this.scrollToActive(this.nativeOptions[this.keyboardFocusIndex]);
+	}
+	shouldSkipHiddenOption() {
+		return this.nativeOptions.some((e) => !e.hidden) && this.nativeOptions[this.keyboardFocusIndex].hidden;
+	}
+	scrollToActive(e) {
+		e?.scrollIntoView?.({ block: "nearest" });
+	}
+	commitSelection(e = this.keyboardFocusIndex) {
+		this.handleClose();
+		let t = this.nativeOptions[e];
+		this.nativeSelect && t?.value && this.updateNativeSelectValue(t.value);
+	}
+	updateNativeSelectValue(e) {
+		this.nativeSelect.value = e, ["input", "change"].forEach((e) => this.nativeSelect.dispatchEvent(new Event(e, {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	get containerClasses() {
+		return {
+			container: !0,
+			open: this._open,
+			disabled: !!this.nativeSelect?.disabled,
+			readonly: !!this.readonly,
+			loading: !!this.loading,
+			filled: !!this.nativeOptions?.find((e) => e.selected && !e.hidden)?.selected,
+			invalid: !this.nativeSelect?.validity.valid,
+			error: this.hasForcedError,
+			[this.size]: !!this.size,
+			[this.mode]: !!this.mode,
+			[this.variant]: !!this.variant
+		};
+	}
+	set open(e) {
+		this._open = e;
+	}
+	get open() {
+		return this._open;
+	}
+	render() {
+		return t`
             <slot @slotchange=${this.initializeNativeSelect}></slot>
-            <div class=${u(this.containerClasses)}>
+            <div class=${d(this.containerClasses)}>
                 ${this.displaySelectTemplate}
                 ${this.optionsContainerTemplate}
                 <slot name="helper-text"></slot>
+                <slot name="readonly-text"></slot>
                 <slot name="forced-error" @slotchange=${this.handleChangeForcedError}></slot>
                 <slot name="invalid-error"></slot>
             </div>
         `;
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this._open ? "arrow-up" : "arrow-down"
-    });
-  }
-  get displaySelectTemplate() {
-    var i, o, a;
-    const e = this.nativeOptions.find((l) => l.selected), t = (i = Array.from((e == null ? void 0 : e.childNodes) || [])) == null ? void 0 : i.map((l) => {
-      const r = l.cloneNode(!0);
-      if (l.nodeType !== 3)
-        return r;
-      if (l.textContent.trim() === "") return "";
-      const h = document.createElement("span");
-      return h.classList.add("text"), h.appendChild(r), h;
-    });
-    return d`
+	}
+	get spinnerSize() {
+		return this.size === "medium" ? 20 : 24;
+	}
+	get iconTemplate() {
+		return this.loading ? u`<ds-loader-spinner
+                class="loading-spinner"
+                show
+                .size=${this.spinnerSize}
+                data-aria-label=${this.loadingAriaLabel}
+            ></ds-loader-spinner>` : u`<ds-icon class="icon" icon-name=${this._open ? "arrow-up" : "arrow-down"}></ds-icon>`;
+	}
+	get leftIconTemplate() {
+		return this.iconName ? u`<ds-icon class="left-icon" icon-name=${f(this.iconName)}></ds-icon>` : e;
+	}
+	get displaySelectTemplate() {
+		let n = this.nativeOptions.find((e) => e.selected), r = Array.from(n?.childNodes || [])?.map((e) => {
+			let t = e.cloneNode(!0);
+			if (e.nodeType !== 3) return t;
+			if (e.textContent.trim() === "") return "";
+			let n = document.createElement("span");
+			return n.classList.add("text"), n.appendChild(t), n;
+		}), i = this.nativeLabel ? t`<label id="display-label" class="label">${this.nativeLabel.textContent}</label>` : e, a = this.nativeLabel ? "display-label" : void 0, o = this.nativeLabel ? void 0 : this.dataAriaLabel;
+		return t`
             <div class="select-outline">
                 <div class="select-container">
-                    <label id="display-label" class="label">${(o = this.nativeLabel) == null ? void 0 : o.innerText}</label>
+                    ${i}
                     <div
                         class="select"
                         role="combobox"
@@ -178,97 +194,78 @@ let s = class extends f {
                         aria-expanded="${this._open}"
                         aria-activedescendant="${this.activeDescendantId}"
                         aria-controls="options-container"
-                        aria-labelledby="display-label"
-                        aria-disabled=${!!((a = this.nativeSelect) != null && a.disabled)}
+                        aria-labelledby=${f(a)}
+                        aria-label=${f(o)}
+                        aria-disabled=${!!this.nativeSelect?.disabled}
                         @click=${this.handleClickDisplaySelect}
                         @keydown=${this.handleKeydown}
                         @blur=${this.handleClose}
                     >
-                        <span class="select-content">${t}</span>
+                        ${this.leftIconTemplate}
+                        <span class="select-content">${r}</span>
                         ${this.iconTemplate}
                     </div>
                 </div>
             </div>
         `;
-  }
-  get activeDescendantId() {
-    return this._open && this.activeIndex >= 0 ? `${s.ARIA_OPTION_PREFIX}${this.nativeOptions[this.activeIndex].value}` : "";
-  }
-  get optionsContainerTemplate() {
-    return d`
+	}
+	get activeDescendantId() {
+		return this._open && this.keyboardFocusIndex >= 0 ? `${h.ARIA_OPTION_PREFIX}${this.nativeOptions[this.keyboardFocusIndex].value}` : "";
+	}
+	get optionsContainerTemplate() {
+		return t`
             <div id="options-container" class="options-container" role="listbox">
-                ${this.nativeOptions.map(
-      (e, t) => e.hidden ? y : this.renderOptionClone(e, t)
-    )}
+                ${this.nativeOptions.map((t, n) => t.hidden ? e : this.renderOptionClone(t, n))}
             </div>
         `;
-  }
-  renderOptionClone(e, t) {
-    const i = Array.from(e.childNodes).map((o) => o.cloneNode(!0));
-    return d`
+	}
+	renderOptionClone(e, n) {
+		let r = Array.from(e.childNodes).map((e) => e.cloneNode(!0));
+		return t`
             <div
-                id="${s.ARIA_OPTION_PREFIX}${e.value}"
-                class=${u({
-      option: !0,
-      active: t === this.activeIndex,
-      selected: e.value === this.nativeSelect.value
-    })}
+                id="${h.ARIA_OPTION_PREFIX}${e.value}"
+                class=${d({
+			option: !0,
+			"keyboard-focused": n === this.keyboardFocusIndex && this._keyboardNavigating,
+			selected: e.value === this.nativeSelect.value
+		})}
                 role="option"
                 aria-selected="${e.value === this.nativeSelect.value}"
                 tabindex="-1"
-                @mousedown=${() => {
-      this.activeIndex = t, this.commitSelection();
-    }}
+                @mousedown=${() => this.commitSelection(n)}
             >
-                ${i}
+                ${r}
             </div>
         `;
-  }
-};
-s.styles = [b];
-s.ARIA_OPTION_PREFIX = "option-";
-n([
-  p({ type: String })
-], s.prototype, "mode", 2);
-n([
-  p({ type: String })
-], s.prototype, "size", 2);
-n([
-  p({ type: String })
-], s.prototype, "variant", 2);
-n([
-  c()
-], s.prototype, "_open", 2);
-n([
-  c()
-], s.prototype, "nativeSelect", 2);
-n([
-  c()
-], s.prototype, "nativeLabel", 2);
-n([
-  c()
-], s.prototype, "nativeOptions", 2);
-n([
-  c()
-], s.prototype, "activeIndex", 2);
-n([
-  c()
-], s.prototype, "hasForcedError", 2);
-n([
-  v({ slot: "", selector: "select", flatten: !0 })
-], s.prototype, "nativeSelects", 2);
-n([
-  v({ slot: "", selector: "label", flatten: !0 })
-], s.prototype, "nativeLabels", 2);
-n([
-  v({ slot: "forced-error", flatten: !0 })
-], s.prototype, "forcedError", 2);
-n([
-  O(".select")
-], s.prototype, "displaySelect", 2);
-s = n([
-  S("ds-select")
-], s);
-export {
-  s as DsSelect
+	}
 };
+o([n({ type: String })], g.prototype, "mode", void 0), o([n({ type: String })], g.prototype, "size", void 0), o([n({ type: String })], g.prototype, "variant", void 0), o([n({
+	type: Boolean,
+	converter: l,
+	reflect: !0
+})], g.prototype, "readonly", void 0), o([n({
+	type: Boolean,
+	converter: l,
+	reflect: !0
+})], g.prototype, "loading", void 0), o([n({
+	type: String,
+	attribute: "loading-aria-label"
+})], g.prototype, "loadingAriaLabel", void 0), o([n({
+	type: String,
+	attribute: "icon-name"
+})], g.prototype, "iconName", void 0), o([n({
+	type: String,
+	attribute: "data-aria-label"
+})], g.prototype, "dataAriaLabel", void 0), o([r()], g.prototype, "_open", void 0), o([r()], g.prototype, "_keyboardNavigating", void 0), o([r()], g.prototype, "nativeLabel", void 0), o([r()], g.prototype, "nativeOptions", void 0), o([r()], g.prototype, "keyboardFocusIndex", void 0), o([r()], g.prototype, "hasForcedError", void 0), o([a({
+	slot: "",
+	selector: "select",
+	flatten: !0
+})], g.prototype, "nativeSelects", void 0), o([a({
+	slot: "",
+	selector: "label",
+	flatten: !0
+})], g.prototype, "nativeLabels", void 0), o([a({
+	slot: "forced-error",
+	flatten: !0
+})], g.prototype, "forcedError", void 0), o([i(".select")], g.prototype, "displaySelect", void 0), g = h = o([c("ds-select")], g);
+//#endregion

package/dist-react/esm/components/ds-select/styles/common.styles.js

@@ -1,8 +1,7 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const i = o`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-select/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
@@ -24,6 +23,5 @@ const i = o`
         pointer-events: none;
     }
 `;
-export {
-  i as commonStyles
-};
+//#endregion
+export { t as commonStyles };