@ganpatiinfo/gids-core-web 3.1.0 → 4.0.0

package/dist-bundled/es/p-D4xtPT_U-04HkZiXU.js

@@ -0,0 +1,181 @@
+import { H as l, C as n, f as r, R as o, D as d } from "./p-ibikYq-w-BsGxk8ro.js";
+import { d as h } from "./p-veoOgDXg-DElc87c0.js";
+import { i as c } from "./p-B2zUuNXz-BLBgQDu7.js";
+import { c as _ } from "./clsx-OuTLNxxd.js";
+const g = (t) => _("gids-field", t), u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getGidsFieldClassNames: g
+}, Symbol.toStringTag, { value: "Module" })), { getGidsFieldClassNames: f } = u, p = n(class extends r {
+  constructor(t) {
+    super(), t !== !1 && this.__registerHost(), this.__attachShadow(), this.status = "implicit", this._hasLabel = !1, this._controlListenerTargets = [], this._controlTouched = !1, this._handleLabelSlotChange = () => {
+      this._hasLabel = (this._labelSlot?.assignedElements()?.length ?? 0) > 0;
+    }, this._setLabelSlot = (e) => {
+      this._labelSlot = e ?? void 0, this._handleLabelSlotChange();
+    }, this._setControlSlot = (e) => {
+      this._controlSlot = e ?? void 0, this._handleControlSlotChange();
+    }, this._handleControlSlotChange = () => {
+      const e = this._controlSlot?.assignedNodes({ flatten: !0 }) ?? [], s = this._findTextControl(e);
+      this._attachControlElement(s);
+    }, this._handleControlValueInput = (e) => {
+      if (!this._controlTouched) {
+        const s = e.target;
+        s instanceof HTMLInputElement && (s.type === "checkbox" || s.type === "radio") && (this._controlTouched = !0);
+      }
+      this._updateControlValidationState();
+    }, this._handleControlBlur = () => {
+      this._controlTouched = !0, this._updateControlValidationState();
+    }, this._handleControlInvalid = () => {
+      this._controlTouched = !0, this._updateControlValidationState();
+    }, this._handleFormReset = () => {
+      this._controlTouched = !1, this._updateControlValidationState();
+    }, this._handleFormSubmit = () => {
+      this._controlTouched = !0, this._updateControlValidationState();
+    };
+  }
+  _handleStatusChange() {
+    this._isImplicitStatus() || this._controlValidationMessage === void 0 ? this._updateControlValidationState() : this._controlValidationMessage = void 0;
+  }
+  connectedCallback() {
+    const t = c();
+    t !== void 0 && this._el.shadowRoot?.adoptedStyleSheets.push(t);
+  }
+  componentDidLoad() {
+    setTimeout((() => {
+      this._handleControlSlotChange(), this._handleLabelSlotChange();
+    }));
+  }
+  async reScanControl() {
+    this._handleControlSlotChange();
+  }
+  disconnectedCallback() {
+    this._detachControlElement(), this._detachFormListeners();
+  }
+  render() {
+    const t = this._hasStatusText(), e = this._controlValidationMessage !== void 0 ? this._controlValidationMessage : this._shouldRenderExplicitStatusText() ? this.statusText : void 0, s = this._getCurrentStatus(), i = ["gids-field__status-text"];
+    if (t) {
+      const a = this._getStatusModifierClass(s, "gids-field__status-text");
+      a != null && i.push(a);
+    }
+    return o(d, { key: "fed52ee2bacf334f4ec630fdaea5285d8aee56b3" }, o("div", { key: "fe65a5714ae0e8369a2e6d91f5ccbe37ce1b04b4", class: f() }, o("div", { key: "37d656971e39e9c26085b54fd253f9758e6110fa", class: "gids-field__header", hidden: !this._hasLabelContent() }, o("slot", { key: "eda62c8170fb5caf2e69f66bae079d1646a52ff8", ref: this._setLabelSlot, name: "label", onSlotchange: this._handleControlSlotChange }), o("div", { key: "28677c5ebd0e8bfb7f9f0c43634c9a70b84f4cd0", class: "gids-field__count", "aria-live": "polite" }, this.count)), o("div", { key: "0a816504a863304e13be74c64429b74700fc3590", class: "gids-field__control" }, o("slot", { key: "1081771bfb182da6b0527303132555458de3ff2e", ref: this._setControlSlot, onSlotchange: this._handleControlSlotChange })), o("p", { key: "632636f8c4d819b6c32658a7ae72ab9308973fda", class: "gids-field__supporting-text", hidden: !this._shouldShowHelperText() }, this.helperText), t ? o("p", { class: i.join(" "), role: "status", "aria-live": "polite" }, this._renderStatusIcon(s), e !== void 0 ? o("span", null, e) : null) : null));
+  }
+  _hasLabelContent() {
+    return this._hasLabel;
+  }
+  _hasHelperText() {
+    return this._hasText(this.helperText);
+  }
+  _shouldShowHelperText() {
+    return !!this._hasHelperText() && !this._hasStatusText();
+  }
+  _hasStatusText() {
+    return this._isImplicitStatus() ? this._controlValidationMessage !== void 0 : this._shouldRenderExplicitStatusText();
+  }
+  _shouldRenderExplicitStatusText() {
+    return !this._isImplicitStatus() && this.status !== "default" && this._hasText(this.statusText);
+  }
+  _renderStatusIcon(t) {
+    if (!this._hasStatusText()) return;
+    const e = this._getStatusIconName(t);
+    if (e === void 0) return;
+    const s = ["gids-field__status-icon"], i = this._getStatusModifierClass(t, "gids-field__status-icon");
+    i != null && s.push(i);
+    let a = t;
+    return t === "error" && (a = "danger"), t === "success" && (a = "positive"), o(h, { appearance: "filled", size: "sm", alt: "", name: e, class: s.join(" "), style: { "--gidsIcon-color": `var(--gids-color-icon-${a})` } });
+  }
+  _getCurrentStatus() {
+    return this._isImplicitStatus() && this._controlValidationMessage != null ? "error" : this.status ?? "implicit";
+  }
+  _getStatusIconName(t) {
+    if (t !== "implicit") return t === "success" ? "positive" : t === "error" ? "danger" : void 0;
+  }
+  _isImplicitStatus() {
+    return this.status === "implicit" || this.status === void 0;
+  }
+  _hasText(t) {
+    return typeof t == "string" && t.trim().length > 0;
+  }
+  _getStatusModifierClass(t, e) {
+    if (t !== "implicit") return `${e}--${t}`;
+  }
+  _attachControlElement(t) {
+    if (this._controlElement === t) return this._updateControlValidationState(), void this._attachFormListeners(t?.form ?? this._el.closest("form"));
+    if (this._detachControlElement(), this._controlElement = t, this._resetControlValidationState(), this._controlListenerTargets = [], t) {
+      const e = this._getControlListenerTargets(t);
+      this._controlListenerTargets = e, e.forEach(((s) => {
+        s.addEventListener("input", this._handleControlValueInput), s.addEventListener("change", this._handleControlValueInput), s.addEventListener("blur", this._handleControlBlur, !0), s.addEventListener("invalid", this._handleControlInvalid);
+      })), this._attachFormListeners(t.form ?? this._el.closest("form"));
+    }
+    this._updateControlValidationState();
+  }
+  _detachControlElement() {
+    this._controlListenerTargets.length > 0 && (this._controlListenerTargets?.forEach(((t) => {
+      t.removeEventListener("input", this._handleControlValueInput), t.removeEventListener("change", this._handleControlValueInput), t.removeEventListener("blur", this._handleControlBlur, !0), t.removeEventListener("invalid", this._handleControlInvalid);
+    })), this._controlListenerTargets = []), this._controlElement = null, this._resetControlValidationState(), this._detachFormListeners();
+  }
+  _getControlListenerTargets(t) {
+    return t instanceof HTMLInputElement && t.type === "radio" && t.name != null ? this._getRadioGroupControls(t) : [t];
+  }
+  _getRadioGroupControls(t) {
+    const e = t.form;
+    if (e && t.name != null) {
+      const s = e.elements.namedItem(t.name);
+      if (s instanceof RadioNodeList) {
+        const i = Array.from(s).filter(((a) => a instanceof HTMLInputElement && a.type === "radio" && this._el.contains(a)));
+        if (i.length > 0) return i;
+      }
+    }
+    if (t.name != null) {
+      const s = `input[type="radio"][name="${CSS.escape(t.name)}"]`, i = Array.from(this._el.querySelectorAll(s));
+      if (i.length > 0) return i;
+    }
+    return [t];
+  }
+  _attachFormListeners(t) {
+    t !== void 0 && (t !== null ? t !== this._formElement && (this._detachFormListeners(), this._formElement = t, this._formElement.addEventListener("reset", this._handleFormReset), this._formElement.addEventListener("submit", this._handleFormSubmit)) : this._detachFormListeners());
+  }
+  _detachFormListeners() {
+    this._formElement && (this._formElement.removeEventListener("reset", this._handleFormReset), this._formElement.removeEventListener("submit", this._handleFormSubmit), this._formElement = null);
+  }
+  _findTextControl(t) {
+    for (const e of t) {
+      if (e.nodeType !== Node.ELEMENT_NODE) continue;
+      const s = e, i = this._asTextControl(s);
+      if (i !== null) return i;
+      const a = s.querySelector("input, textarea");
+      if (a instanceof HTMLInputElement || a instanceof HTMLTextAreaElement) return a;
+    }
+    return null;
+  }
+  _asTextControl(t) {
+    return t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement ? t : null;
+  }
+  _resetControlValidationState() {
+    this._controlTouched = !1, this._controlValidationMessage !== void 0 && (this._controlValidationMessage = void 0);
+  }
+  _updateControlValidationState() {
+    if (!this._isImplicitStatus()) return void (this._controlValidationMessage !== void 0 && (this._controlValidationMessage = void 0));
+    const t = this._controlElement;
+    if (!t || t.disabled) return void (this._controlValidationMessage !== void 0 && (this._controlValidationMessage = void 0));
+    const e = t.validationMessage?.trim() ?? "";
+    this._controlTouched && t.matches(":user-invalid") && e.length > 0 ? this._controlValidationMessage !== e && (this._controlValidationMessage = e) : this._controlValidationMessage !== void 0 && (this._controlValidationMessage = void 0);
+  }
+  get _el() {
+    return this;
+  }
+  static get watchers() {
+    return { status: [{ _handleStatusChange: 0 }] };
+  }
+  static get style() {
+    return ".gids-field{display:flex;flex-direction:column;gap:var(--gids-gap-075)}.gids-field__header{display:flex;gap:var(--gids-gap-100);align-items:flex-start}.gids-field__header[hidden]{display:none}.gids-field__count{margin-left:auto;color:var(--gids-color-text-subtle);text-align:right;white-space:nowrap;font-family:var(--gids-typography-label-x-small__font-family);font-size:var(--gids-typography-label-x-small__font-size);font-weight:var(--gids-typography-label-x-small__font-weight);letter-spacing:var(--gids-typography-label-x-small__letter-spacing);line-height:var(--gids-typography-label-x-small__line-height);text-transform:var(--gids-typography-label-x-small__text-transform, inherit);font-variant-caps:var(--gids-typography-label-x-small__font-variant-caps, inherit)}:host([disabled]) .gids-field__count{color:var(--gids-color-text-disabled)}.gids-field__control{display:flex;flex-direction:column;gap:var(--gids-gap-050)}.gids-field__supporting-text,.gids-field__status-text{margin:0;padding-top:var(--gids-padding-vertical-edge-to-element-050);font-family:var(--gids-typography-paragraph-x-small__font-family);font-size:var(--gids-typography-paragraph-x-small__font-size);font-weight:var(--gids-typography-paragraph-x-small__font-weight);letter-spacing:var(--gids-typography-paragraph-x-small__letter-spacing);line-height:var(--gids-typography-paragraph-x-small__line-height);text-transform:var(--gids-typography-paragraph-x-small__text-transform, inherit);font-variant-caps:var(--gids-typography-paragraph-x-small__font-variant-caps, inherit)}.gids-field__supporting-text{color:var(--gids-color-text-subtlest)}.gids-field__status-text{display:flex;align-items:flex-start;gap:var(--gids-gap-050)}.gids-field__status-text .gids-field__status-icon{margin-top:max(0px, -1 * (var(--gids-size-160) - var(--gids-typograpy-paragraph-x-small__line-height) * var(--gids-typograpy-paragraph-x-small__font-size)) / 2)}.gids-field__status-text>span{margin-top:max(0px, (var(--gids-size-160) - var(--gids-typograpy-paragraph-x-small__line-height) * var(--gids-typograpy-paragraph-x-small__font-size)) / 2)}.gids-field__status-icon{flex-shrink:0}.gids-field__status-text--information{color:var(--gids-color-text-information);--gids-field-status-icon-color:$icon-color}.gids-field__status-icon--information{--gidsIcon-color:$icon-color}.gids-field__status-text--success{color:var(--gids-color-text-positive);--gids-field-status-icon-color:$icon-color}.gids-field__status-icon--success{--gidsIcon-color:$icon-color}.gids-field__status-text--warning{color:var(--gids-color-text-warning);--gids-field-status-icon-color:$icon-color}.gids-field__status-icon--warning{--gidsIcon-color:$icon-color}.gids-field__status-text--error{color:var(--gids-color-text-danger);--gids-field-status-icon-color:$icon-color}.gids-field__status-icon--error{--gidsIcon-color:$icon-color}";
+  }
+}, [257, "gids-field", { disabled: [516], count: [513], helperText: [513, "helper-text"], statusText: [513, "status-text"], status: [513], _controlValidationMessage: [32], _hasLabel: [32], reScanControl: [64] }, void 0, { status: [{ _handleStatusChange: 0 }] }]);
+function m() {
+  typeof customElements < "u" && ["gids-field"].forEach(((t) => {
+    t === "gids-field" && (customElements.get(l(t)) || customElements.define(l(t), p));
+  }));
+}
+m();
+export {
+  p as d,
+  m as h
+};

package/dist-bundled/es/p-DijVkS9b-CtFkEtlE.js

@@ -0,0 +1,35 @@
+import { R as o } from "./p-ibikYq-w-BsGxk8ro.js";
+import { d as f } from "./p-veoOgDXg-DElc87c0.js";
+import { c as u } from "./clsx-OuTLNxxd.js";
+const _ = ({ disabled: e }, s) => u("gids-label", { "gids-label--disabled": e }, s), y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getGidsLabelClassNames: _
+}, Symbol.toStringTag, { value: "Module" })), b = (e) => {
+  const s = Array.isArray(e) ? e[e.length - 1] : e;
+  return typeof s == "string" && s.trim().endsWith(".");
+}, S = /\w/, h = (e) => e.replace(S, (s) => s.toLocaleUpperCase()), c = (e, s) => typeof e == "function" ? e(s) : s ? h(e) : e, C = ({ children: e, fieldRequirement: s, fieldRequirementOptionalText: t, fieldRequirementRequiredText: r, isLabelSentence: i }) => {
+  const n = i ? i(e) : b(e);
+  if (s === "required")
+    return c(r && r.length > 0 ? r : "(required)", n);
+  if (s === "optional")
+    return c(t && t.length > 0 ? t : "(optional)", n);
+}, j = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getIndicatorText: C,
+  isSentence: b
+}, Symbol.toStringTag, { value: "Module" })), L = ({ appearance: e, size: s }, t) => u("gids-dismiss-button", {
+  "gids-dismiss-button--sm": s === "sm",
+  // 'gids-dismiss-button--md': size === 'md',
+  "gids-dismiss-button--lg": s === "lg",
+  "gids-dismiss-button--bold": e === "bold"
+}, t), O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getGidsDismissButtonClassNames: L
+}, Symbol.toStringTag, { value: "Module" })), { getIndicatorText: v } = j, { getGidsLabelClassNames: z } = y, T = ({ disabled: e, fieldRequirement: s, fieldRequirementOptionalText: t, fieldRequirementRequiredText: r, info: i, htmlFor: n, labelId: l, class: m, isLabelSentence: g, ...p }, a) => {
+  const d = v({ children: a, fieldRequirement: s, fieldRequirementOptionalText: t, fieldRequirementRequiredText: r, isLabelSentence: g });
+  return o("div", { class: z({ disabled: e }, m), ...p }, o("label", { htmlFor: n, id: l }, a, d && o("span", { class: "gids-label__field-requirement" }, d)), i);
+}, { getGidsDismissButtonClassNames: F } = O, x = ({ appearance: e = "subtle", size: s = "md", disabled: t = !1, class: r, onPressDismiss: i, label: n, ...l }) => o("button", { class: F({ appearance: e, size: s }, r), onClick: i, disabled: t, "aria-label": n, ...l }, o(f, { name: "cross", appearance: "regular" }));
+export {
+  T as n,
+  x as o
+};

package/dist-bundled/es/p-DybsMR13-DpmsG3Q1.js

@@ -0,0 +1,31 @@
+import { R as l } from "./p-ibikYq-w-BsGxk8ro.js";
+import { c as x } from "./clsx-OuTLNxxd.js";
+const f = ({ size: e, indeterminate: t, value: n }, r) => x("gids-spinner-control", {
+  "gids-spinner-control--xs": e === "xs",
+  "gids-spinner-control--sm": e === "sm",
+  // 'gids-spinner-control--md': size === 'md',
+  "gids-spinner-control--lg": e === "lg",
+  "gids-spinner-control--xl": e === "xl",
+  "gids-spinner-control--2xl": e === "2xl",
+  "gids-spinner-control--determinate": t === !1
+}, n, r), h = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getGidsSpinnerControlClassNames: f
+}, Symbol.toStringTag, { value: "Module" })), c = 64, g = 10, u = c / 2 - g / 2, _ = c / 2, a = 2 * Math.PI * u, y = `0 0 ${c} ${c}`, k = (e = 0, t) => {
+  const n = typeof t == "number" && t > 0 ? t : 1, i = Math.max(0, Math.min(n, e)) / n * 100, o = (a * i / 100).toFixed(2), m = (a - parseFloat(o)).toFixed(2);
+  return `${o} ${m}`;
+}, v = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  calculateStrokeDasharray: k,
+  centerPosition: _,
+  circumference: a,
+  radius: u,
+  thickness: g,
+  viewBox: y
+}, Symbol.toStringTag, { value: "Module" })), { getGidsSpinnerControlClassNames: S } = h, { calculateStrokeDasharray: b, thickness: d, radius: p, centerPosition: s, viewBox: M } = v, P = ({ size: e, indeterminate: t, value: n, max: r, ...i }) => {
+  let o;
+  return t || (o = { strokeDashArray: b(n, r || 0), strokeDashoffset: "0" }), l("svg", { class: S({ size: e, indeterminate: t, value: n }), viewBox: M, ...i }, l("circle", { class: "gids-spinner-control__track", cx: s, cy: s, r: p, "stroke-width": d }), l("circle", { style: o, class: "gids-spinner-control__progress", cx: s, cy: s, r: p, "stroke-width": d }));
+};
+export {
+  P as l
+};

package/dist-bundled/es/p-RqpjvEHh-BGGYsIBf.js

@@ -0,0 +1,74 @@
+import { H as s, C as l, f as u, R as i, L as d } from "./p-ibikYq-w-BsGxk8ro.js";
+import { d as n } from "./p-veoOgDXg-DElc87c0.js";
+import { l as r } from "./p-DybsMR13-DpmsG3Q1.js";
+const c = (e) => e.type === "hidden", f = (e) => {
+  if (!(e instanceof HTMLElement))
+    return !1;
+  const { nodeName: t } = e;
+  return !!([
+    "BUTTON",
+    "DETAILS",
+    "EMBED",
+    "IFRAME",
+    "KEYGEN",
+    "LABEL",
+    "SELECT",
+    "TEXTAREA"
+  ].includes(t) || t === "A" && e.hasAttribute("href") || e instanceof HTMLInputElement && !c(e) || ["AUDIO", "VIDEO"].includes(t) && e.hasAttribute("controls") || ["IMG", "OBJECT"].includes(t) && e.hasAttribute("usemap") || e.hasAttribute("tabindex") && e.tabIndex > -1);
+}, o = l(class extends u {
+  constructor(e) {
+    super(), e !== !1 && this.__registerHost(), this.#e = {}, this._focusInput = (t) => {
+      const a = t.target;
+      a === this.#t || this._isWithinInteractiveElement(a) || this.#t?.focus();
+    }, this._handleInputFocusAndBlur = (t) => {
+      this._el.dispatchEvent(new FocusEvent(t.type, { relatedTarget: t.relatedTarget }));
+    };
+  }
+  get defaultValue() {
+    return this.#t?.defaultValue ?? this.#e.defaultValue ?? "";
+  }
+  set defaultValue(e) {
+    this.#t ? this.#t.defaultValue = e : this.#e.defaultValue = e;
+  }
+  get value() {
+    return this.#t?.value ?? this.#e.value ?? this.#e.defaultValue ?? "";
+  }
+  set value(e) {
+    this.#t ? this.#t.value = e : this.#e.value = e;
+  }
+  #t;
+  #e;
+  _isWithinInteractiveElement(e) {
+    if (e === null || e === this._el || !this._el.contains(e)) return !1;
+    if (f(e)) return !0;
+    {
+      const t = e.parentElement;
+      if (t) return this._isWithinInteractiveElement(t);
+    }
+    return !1;
+  }
+  connectedCallback() {
+    this._el.addEventListener("click", this._focusInput);
+  }
+  disconnectedCallback() {
+    this._el.removeEventListener("click", this._focusInput);
+  }
+  render() {
+    return i(d, { key: "9d1ed3749495c830b3940d4da09056620ccaef1d" }, i("slot", { key: "ae4b6e25b50e1b2fc04ff7eb1b2695437b25b974", name: "leadingIcon" }), this.leadingLabel && i("span", { key: "408038e8921dc443f14b5c57541d8ca74205e193", class: "gids-input__label" }, this.leadingLabel), i("slot", { key: "033b3c940545c99f3aa356e08267c77c25c0f89c", name: "leadingAccessory" }), i("input", { key: "d302436fe388ce84e775ee73c83723cd4bfb46b3", ...this.inputProps, ref: (e) => {
+      this.#t = e, this.#e.value !== void 0 && (this.#t.value = this.#e.value, delete this.#e.value), this.#e.defaultValue !== void 0 && (this.#t.defaultValue = this.#e.defaultValue, delete this.#e.defaultValue);
+    }, class: "gids-input__control", name: this.name, disabled: this.disabled, readOnly: this.readOnly, required: this.required, onFocus: this._handleInputFocusAndBlur, onBlur: this._handleInputFocusAndBlur }), i("slot", { key: "85d41d8a06da0c88a6defe65eae2d6f1e69c3abd", name: "trailingAccessory" }), this.trailingLabel && i("span", { key: "1fec370bdb270031d6e3cdd9bed84871116be21f", class: "gids-input__label" }, this.trailingLabel), i("slot", { key: "65800ff524221d70b659901d440c5459e64975a8", name: "trailingIcon" }), this.status === "incomplete" && i(n, { key: "2bec2513415dad3294abc23ebcdc0493fa44399a", name: "warning", appearance: "filled", class: "gids-input__warning-icon" }), this.status === "complete" && i(n, { key: "2e21e9cb5ccfad300400c97dba89642395f84b04", name: "positive", appearance: "filled", class: "gids-input__positive-icon" }), this.loading && i(r, { key: "5fb23cf0b1e280cf7acd8ccd47c1a8d9611a1f19", size: "md", indeterminate: !0 }));
+  }
+  get _el() {
+    return this;
+  }
+}, [260, "gids-input", { appearance: [513], defaultValue: [6657, "default-value"], disabled: [516], inputProps: [16], leadingLabel: [513, "leading-label"], trailingLabel: [513, "trailing-label"], loading: [516], name: [513], readOnly: [516, "readonly"], required: [516], status: [513], value: [6145] }]);
+function h() {
+  typeof customElements < "u" && ["gids-input"].forEach(((e) => {
+    e === "gids-input" && (customElements.get(s(e)) || customElements.define(s(e), o));
+  }));
+}
+h();
+export {
+  o as l,
+  h as r
+};