ablok-components 0.0.39 → 0.0.42

package/dist/ablok-components.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as g, openBlock as r, createElementBlock as s, normalizeClass as b, createElementVNode as o, renderSlot as m, computed as h, createBlock as C, resolveDynamicComponent as D, unref as p, withCtx as A, createTextVNode as x, toDisplayString as v, resolveComponent as $, createCommentVNode as k, withDirectives as w, isRef as q, vModelDynamic as H, vModelText as U, ref as O, watch as S, onBeforeMount as L, Fragment as M, renderList as N, withModifiers as T, reactive as P, createVNode as z } from "vue";
+import { defineComponent as g, openBlock as r, createElementBlock as c, normalizeClass as b, createElementVNode as u, renderSlot as m, computed as h, createBlock as C, resolveDynamicComponent as D, unref as p, withCtx as A, createTextVNode as V, toDisplayString as v, resolveComponent as S, createCommentVNode as w, withDirectives as q, isRef as O, vModelDynamic as H, vModelText as U, ref as x, watch as $, onBeforeMount as L, Fragment as M, renderList as N, withModifiers as T, reactive as P, createVNode as z } from "vue";
 const R = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
@@ -23,13 +23,13 @@ const R = {
     }
   },
   setup(e) {
-    return (i, t) => (r(), s("i", {
+    return (o, t) => (r(), c("i", {
       class: b(["svg-icon", {
         [`svg-icon--${e.size}`]: e.size
       }])
     }, [
-      (r(), s("svg", R, [
-        o("use", {
+      (r(), c("svg", R, [
+        u("use", {
           "xlink:href": `${e.basePath}#${e.prefix}${e.symbol}`,
           "xmlns:xlink": "http://www.w3.org/1999/xlink",
           x: "0",
@@ -50,7 +50,7 @@ const E = { class: "loading-spinner d-block" }, j = { class: "loading-spinner__a
   viewBox: "0 0 100 100",
   "enable-background": "new 0 0 0 0",
   "xml:space": "preserve"
-}, J = ["fill"], X = /* @__PURE__ */ o("animateTransform", {
+}, J = ["fill"], X = /* @__PURE__ */ u("animateTransform", {
   attributeName: "transform",
   attributeType: "XML",
   type: "rotate",
@@ -69,16 +69,16 @@ const E = { class: "loading-spinner d-block" }, j = { class: "loading-spinner__a
     }
   },
   setup(e) {
-    return (i, t) => (r(), s("span", E, [
-      o("span", j, [
-        (r(), s("svg", G, [
-          o("path", {
+    return (o, t) => (r(), c("span", E, [
+      u("span", j, [
+        (r(), c("svg", G, [
+          u("path", {
             fill: e.color,
             d: "M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
           }, Y, 8, J)
         ]))
       ]),
-      m(i.$slots, "default")
+      m(o.$slots, "default")
     ]));
   }
 });
@@ -92,13 +92,13 @@ const Ne = /* @__PURE__ */ g({
     className: null
   },
   setup(e) {
-    const i = e, t = h(() => i.tag || "p");
-    return (l, n) => (r(), C(D(p(t)), {
+    const o = e, t = h(() => o.tag || "p");
+    return (d, a) => (r(), C(D(p(t)), {
       class: b(["headline", `headline--${e.size}${e.className || ""}`])
     }, {
       default: A(() => [
-        m(l.$slots, "default", {}, () => [
-          x(v(e.text), 1)
+        m(d.$slots, "default", {}, () => [
+          V(v(e.text), 1)
         ])
       ]),
       _: 3
@@ -113,11 +113,11 @@ const Ne = /* @__PURE__ */ g({
     className: null
   },
   setup(e) {
-    return (i, t) => (r(), s("p", {
+    return (o, t) => (r(), c("p", {
       class: b(["base-paragraph", `base-paragraph--${e.size}${e.className || ""}`])
     }, [
-      m(i.$slots, "default", {}, () => [
-        x(v(e.text), 1)
+      m(o.$slots, "default", {}, () => [
+        V(v(e.text), 1)
       ])
     ], 2));
   }
@@ -138,10 +138,10 @@ const Ne = /* @__PURE__ */ g({
     fab: { type: Boolean }
   },
   setup(e) {
-    const i = e, t = h(() => i.caption && !i.fab);
-    return (l, n) => {
-      const d = $("svg-icon");
-      return r(), s("button", {
+    const o = e, t = h(() => o.caption && !o.fab);
+    return (d, a) => {
+      const i = S("svg-icon");
+      return r(), c("button", {
         type: e.type,
         disabled: e.disabled,
         href: e.href,
@@ -158,16 +158,16 @@ const Ne = /* @__PURE__ */ g({
           "x-small": e.size === "x-small"
         }])
       }, [
-        m(l.$slots, "default", {}, () => [
-          e.icon ? (r(), C(d, {
+        m(d.$slots, "default", {}, () => [
+          e.icon ? (r(), C(i, {
             key: 0,
             id: e.icon,
             class: "base-button__caption"
-          }, null, 8, ["id"])) : k("", !0),
-          p(t) ? (r(), s("span", {
+          }, null, 8, ["id"])) : w("", !0),
+          p(t) ? (r(), c("span", {
             key: 1,
             class: b(["base-button__caption", { "icon-padding": e.icon }])
-          }, v(e.caption), 3)) : k("", !0)
+          }, v(e.caption), 3)) : w("", !0)
         ])
       ], 10, K);
     };
@@ -235,22 +235,22 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: i }) {
-    const t = e, l = h({
+  setup(e, { emit: o }) {
+    const t = e, d = h({
       get() {
         return t.modelValue;
       },
-      set(n) {
-        i("update:modelValue", n);
+      set(a) {
+        o("update:modelValue", a);
       }
     });
-    return (n, d) => (r(), s("div", {
+    return (a, i) => (r(), c("div", {
       class: b(["form-input", `form-input--${e.type}`])
     }, [
-      o("div", Q, [
-        m(n.$slots, "input-prepend"),
-        w(o("input", {
-          "onUpdate:modelValue": d[0] || (d[0] = (a) => q(l) ? l.value = a : null),
+      u("div", Q, [
+        m(a.$slots, "input-prepend"),
+        q(u("input", {
+          "onUpdate:modelValue": i[0] || (i[0] = (n) => O(d) ? d.value = n : null),
           type: e.type === "color" ? "text" : e.type,
           id: e.id,
           name: e.name,
@@ -266,12 +266,12 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
           }]),
           "aria-label": e.label
         }, null, 10, W), [
-          [H, p(l)]
+          [H, p(d)]
         ]),
-        m(n.$slots, "input-append", {}, () => [
-          e.type === "color" ? (r(), s("span", Z, [
-            w(o("input", {
-              "onUpdate:modelValue": d[1] || (d[1] = (a) => q(l) ? l.value = a : null),
+        m(a.$slots, "input-append", {}, () => [
+          e.type === "color" ? (r(), c("span", Z, [
+            q(u("input", {
+              "onUpdate:modelValue": i[1] || (i[1] = (n) => O(d) ? d.value = n : null),
               type: "color",
               name: `${e.name}-color`,
               id: `${e.id}-color`,
@@ -281,13 +281,13 @@ const Q = { class: "input-group form-input__input-group" }, W = ["type", "id", "
               class: "form-control",
               "aria-label": e.label
             }, null, 8, _), [
-              [U, p(l)]
+              [U, p(d)]
             ])
-          ])) : k("", !0)
+          ])) : w("", !0)
         ])
       ]),
-      m(n.$slots, "label", {}, () => [
-        o("label", {
+      m(a.$slots, "label", {}, () => [
+        u("label", {
           for: e.id,
           class: b(["form-input__label", {
             "form-check-label": e.type === "checkbox"
@@ -357,19 +357,19 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: i }) {
-    const t = e, l = h({
+  setup(e, { emit: o }) {
+    const t = e, d = h({
       get() {
         return t.modelValue;
       },
-      set(n) {
-        i("update:modelValue", n);
+      set(a) {
+        o("update:modelValue", a);
       }
     });
-    return (n, d) => (r(), s("div", te, [
-      m(n.$slots, "input-prepend"),
-      w(o("textarea", {
-        "onUpdate:modelValue": d[0] || (d[0] = (a) => q(l) ? l.value = a : null),
+    return (a, i) => (r(), c("div", te, [
+      m(a.$slots, "input-prepend"),
+      q(u("textarea", {
+        "onUpdate:modelValue": i[0] || (i[0] = (n) => O(d) ? d.value = n : null),
         type: e.type === "color" ? "text" : e.type,
         id: e.id,
         name: e.name,
@@ -382,12 +382,12 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
         class: b(["form-control", {}]),
         "aria-label": e.label
       }, null, 8, le), [
-        [U, p(l)]
+        [U, p(d)]
       ]),
-      m(n.$slots, "input-append", {}, () => [
-        e.type === "color" ? (r(), s("span", ae, [
-          w(o("input", {
-            "onUpdate:modelValue": d[1] || (d[1] = (a) => q(l) ? l.value = a : null),
+      m(a.$slots, "input-append", {}, () => [
+        e.type === "color" ? (r(), c("span", ae, [
+          q(u("input", {
+            "onUpdate:modelValue": i[1] || (i[1] = (n) => O(d) ? d.value = n : null),
             type: "color",
             name: `${e.name}-color`,
             id: `${e.id}-color`,
@@ -397,12 +397,12 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
             class: "form-control",
             "aria-label": e.label
           }, null, 8, ne), [
-            [U, p(l)]
+            [U, p(d)]
           ])
-        ])) : k("", !0)
+        ])) : w("", !0)
       ]),
-      m(n.$slots, "label", {}, () => [
-        o("label", {
+      m(a.$slots, "label", {}, () => [
+        u("label", {
           for: e.id,
           class: b(["form-input__label", {
             "form-check-label": e.type === "checkbox"
@@ -452,37 +452,37 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["change", "update:modelValue"],
-  setup(e, { emit: i }) {
-    const t = e, l = O([]);
-    return S(() => t.modelValue, (n, d) => {
-      l.value = t.options.map(
-        (a) => a.value ? t.modelValue.some((u) => u["value "] === a.value) : t.modelValue.some((u) => u === a)
+  setup(e, { emit: o }) {
+    const t = e, d = x([]);
+    return $(() => t.modelValue, (a, i) => {
+      d.value = t.options.map(
+        (n) => n.value ? t.modelValue.some((l) => l["value "] === n.value) : t.modelValue.some((l) => l === n)
       );
-    }, { immediate: !0 }), S(l, (n, d) => {
-      const a = n.reduce((u, c, f) => {
-        const V = c && t.options[f] ? [t.options[f] || t.options[f]] : [];
-        return [...u, ...V];
+    }, { immediate: !0 }), $(d, (a, i) => {
+      const n = a.reduce((l, s, f) => {
+        const k = s && t.options[f] ? [t.options[f] || t.options[f]] : [];
+        return [...l, ...k];
       }, []);
-      i("update:modelValue", a);
+      o("update:modelValue", n);
     }, { deep: !0 }), L(() => {
-    }), (n, d) => {
-      const a = $("form-input");
-      return r(), s("div", ie, [
-        (r(!0), s(M, null, N(e.options, (u, c) => (r(), C(a, {
-          key: c,
-          modelValue: p(l)[c],
-          "onUpdate:modelValue": (f) => p(l)[c] = f,
+    }), (a, i) => {
+      const n = S("form-input");
+      return r(), c("div", ie, [
+        (r(!0), c(M, null, N(e.options, (l, s) => (r(), C(n, {
+          key: s,
+          modelValue: p(d)[s],
+          "onUpdate:modelValue": (f) => p(d)[s] = f,
           type: "checkbox",
           name: e.name,
-          id: `${e.id}-${c}`,
-          label: `${u.text || u}${e.required ? " *" : ""}`,
+          id: `${e.id}-${s}`,
+          label: `${l.text || l}${e.required ? " *" : ""}`,
           disabled: e.disabled,
           "read-only": e.readOnly,
           required: e.required
         }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "id", "label", "disabled", "read-only", "required"]))), 128)),
-        o("label", { for: e.id }, [
-          m(n.$slots, "label", {}, () => [
-            x(v(e.label), 1)
+        u("label", { for: e.id }, [
+          m(a.$slots, "label", {}, () => [
+            V(v(e.label), 1)
           ])
         ], 8, oe)
       ]);
@@ -528,41 +528,41 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["change", "update:modelValue"],
-  setup(e, { emit: i }) {
+  setup(e, { emit: o }) {
     const t = e;
-    O(t.options.map((n) => n.value === t.modelValue));
-    function l(n) {
-      i("update:modelValue", n);
+    x(t.options.map((a) => a.value === t.modelValue));
+    function d(a) {
+      o("update:modelValue", a);
     }
     return L(() => {
-    }), (n, d) => {
-      const a = $("form-input");
-      return r(), s("div", ue, [
-        (r(!0), s(M, null, N(e.options, (u, c) => (r(), C(a, {
-          key: c,
+    }), (a, i) => {
+      const n = S("form-input");
+      return r(), c("div", ue, [
+        (r(!0), c(M, null, N(e.options, (l, s) => (r(), C(n, {
+          key: s,
           type: "radio",
           name: e.name,
-          id: `${e.id}-${c}`,
-          value: u.value || u,
-          label: `${u.text || u}${e.required ? " *" : ""}`,
-          checked: u.value ? u.value === e.modelValue : u === e.modelValue,
+          id: `${e.id}-${s}`,
+          value: l.value || l,
+          label: `${l.text || l}${e.required ? " *" : ""}`,
+          checked: l.value ? l.value === e.modelValue : l === e.modelValue,
           disabled: e.disabled,
           "read-only": e.readOnly,
           required: e.required,
-          onChange: (f) => l(u)
+          onChange: (f) => d(l)
         }, null, 8, ["name", "id", "value", "label", "checked", "disabled", "read-only", "required", "onChange"]))), 128)),
-        o("label", { for: e.id }, [
-          m(n.$slots, "label", {}, () => [
-            x(v(e.label), 1)
+        u("label", { for: e.id }, [
+          m(a.$slots, "label", {}, () => [
+            V(v(e.label), 1)
           ])
         ], 8, re)
       ]);
     };
   }
-}), se = { class: "input input-dropdown" }, ce = { class: "dropdown" }, me = {
+}), se = { class: "input input-dropdown" }, ce = { class: "dropdown" }, fe = {
   class: "btn-group",
   role: "group"
-}, fe = ["id", "disabled"], ye = ["aria-labelledby"], pe = ["onClick"], be = ["for"], Ae = /* @__PURE__ */ g({
+}, me = ["id", "disabled"], ye = ["aria-labelledby"], pe = ["onClick"], be = ["for"], Ae = /* @__PURE__ */ g({
   __name: "input-dropdown",
   props: {
     modelValue: {
@@ -619,31 +619,31 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: i }) {
+  setup(e, { emit: o }) {
     const t = e;
     h({
       get() {
         return t.modelValue;
       },
-      set(a) {
-        i("update:modelValue", a);
+      set(n) {
+        o("update:modelValue", n);
       }
     });
-    function l(a) {
-      i("update:modelValue", a);
+    function d(n) {
+      o("update:modelValue", n);
     }
-    const n = h(() => [
+    const a = h(() => [
       {
         text: "Please select"
       },
       ...t.options.map(
-        (a) => typeof a == "string" ? { value: a, text: a } : a
+        (n) => typeof n == "string" ? { value: n, text: n } : n
       )
-    ]), d = h(() => [...t.options].find((a) => JSON.stringify(a.value) === JSON.stringify(t.modelValue)));
-    return (a, u) => (r(), s("div", se, [
-      o("div", ce, [
-        o("div", me, [
-          o("button", {
+    ]), i = h(() => [...t.options].find((n) => JSON.stringify(n.value) === JSON.stringify(t.modelValue)));
+    return (n, l) => (r(), c("div", se, [
+      u("div", ce, [
+        u("div", fe, [
+          u("button", {
             class: b(["btn dropdown-toggle", {
               [`btn-${e.variant}`]: e.variant,
               [`btn-${e.color}`]: e.color,
@@ -655,25 +655,25 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
             "data-bs-toggle": "dropdown",
             "aria-expanded": "false",
             disabled: e.disabled
-          }, v(p(d) ? p(d).text : e.placeholder), 11, fe),
-          o("ul", {
+          }, v(p(i) ? p(i).text : e.placeholder), 11, me),
+          u("ul", {
             class: "dropdown-menu",
             "aria-labelledby": e.id
           }, [
-            (r(!0), s(M, null, N(p(n), (c, f) => (r(), s("li", { key: f }, [
-              m(a.$slots, "option", {}, () => [
-                o("a", {
+            (r(!0), c(M, null, N(p(a), (s, f) => (r(), c("li", { key: f }, [
+              m(n.$slots, "option", {}, () => [
+                u("a", {
                   class: "dropdown-item",
-                  onClick: T((V) => l(c.value), ["prevent"])
-                }, v(c.text), 9, pe)
+                  onClick: T((k) => d(s.value), ["prevent"])
+                }, v(s.text), 9, pe)
               ])
             ]))), 128))
           ], 8, ye)
         ])
       ]),
-      o("label", { for: e.id }, [
-        m(a.$slots, "label", {}, () => [
-          x(v(e.label), 1)
+      u("label", { for: e.id }, [
+        m(n.$slots, "label", {}, () => [
+          V(v(e.label), 1)
         ])
       ], 8, be)
     ]));
@@ -730,46 +730,51 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: i }) {
-    function t(d) {
-      const a = d.target && d.target.files;
-      a && (l.splice(0, l.length), Array.from(a).forEach((u) => {
-        l.push(u);
+  setup(e, { emit: o }) {
+    const t = e;
+    function d(l) {
+      const s = l.target && l.target.files;
+      s && (i.splice(0, i.length), Array.from(s).forEach((f) => {
+        i.push(f);
       }));
     }
-    const l = P([]), n = h(() => l && l.map((d) => d.name));
-    return h(() => l.map((d) => URL.createObjectURL(d))), S(() => l, (d, a) => {
-      console.log("file input", d), i("update:modelValue", d);
-    }, { deep: !0 }), (d, a) => (r(), s("div", {
+    const a = x(), i = P([]), n = h(() => i && i.map((l) => l.name));
+    return h(() => i.map((l) => URL.createObjectURL(l))), $(() => t.modelValue, (l, s) => {
+      l.length === 0 && (a.value.value = null);
+    }, { deep: !0 }), $(() => i, (l, s) => {
+      o("update:modelValue", l);
+    }, { deep: !0 }), (l, s) => (r(), c("div", {
       class: b(["form-input file-input", "file-input--primary"])
     }, [
-      o("input", {
+      u("input", {
+        ref_key: "input",
+        ref: a,
         type: "file",
         id: e.id,
         name: e.name,
         class: "d-none",
-        onChange: t,
+        onChange: d,
         multiple: e.multiple,
         accept: e.accept
       }, null, 40, ge),
-      o("div", he, [
-        m(d.$slots, "input-prepend"),
-        o("input", {
+      u("div", he, [
+        m(l.$slots, "input-prepend"),
+        u("input", {
           type: "text",
           value: p(n),
           id: e.id,
           name: e.name,
           class: "form-control"
         }, null, 8, ve),
-        m(d.$slots, "input-append", {}, () => [
-          o("label", {
+        m(l.$slots, "input-append", {}, () => [
+          u("label", {
             for: e.id,
             class: "btn btn-outline-dark"
           }, " Select Image ", 8, $e)
         ])
       ]),
-      m(d.$slots, "label", {}, () => [
-        o("label", {
+      m(l.$slots, "label", {}, () => [
+        u("label", {
           for: e.id,
           class: "form-input__label",
           innerHTML: `${e.label}${e.required ? " *" : ""}`
@@ -777,11 +782,11 @@ const te = { class: "form-input form-input--textarea" }, le = ["type", "id", "na
       ])
     ]));
   }
-}), xe = { class: "media-upload" }, Ve = ["src"], Be = ["onClick"], ke = ["for"];
+}), xe = { class: "media-upload" }, Ve = ["src"], ke = ["onClick"], Be = ["for"];
 async function we(e) {
-  return await new Promise((i) => {
+  return await new Promise((o) => {
     let t = new FileReader();
-    t.onload = () => i(t.result), t.readAsDataURL(e);
+    t.onload = () => o(t.result), t.readAsDataURL(e);
   });
 }
 const Pe = /* @__PURE__ */ g({
@@ -840,52 +845,52 @@ const Pe = /* @__PURE__ */ g({
     }
   },
   emits: ["update:modelValue", "update:src"],
-  setup(e, { emit: i }) {
-    const t = e, l = O([]), n = O([]), d = h(() => t.modelValue.length ? t.modelValue : t.src ? [{ type: "", src: t.src }] : n.value);
-    S(() => l, async (u, c) => {
-      n.value = await Promise.all(
-        u.value.map(async (f) => ({
+  setup(e, { emit: o }) {
+    const t = e, d = x([]), a = x([]), i = h(() => t.modelValue.length ? t.modelValue : t.src ? [{ type: "", src: t.src }] : a.value);
+    $(() => d, async (l, s) => {
+      a.value = await Promise.all(
+        l.value.map(async (f) => ({
           src: await we(f),
           type: f.type
         }))
       );
-    }, { deep: !0 }), S(() => n, async (u, c) => {
-      const f = t.multiple ? n.value : [n.value[0]];
-      i("update:modelValue", f), t.multiple || i("update:src", n.value[0] && n.value[0].src);
+    }, { deep: !0 }), $(() => a, async (l, s) => {
+      const f = t.multiple ? a.value : a.value[0];
+      o("update:modelValue", f), t.multiple || o("update:src", a.value[0] && a.value[0].src);
     }, { deep: !0 });
-    function a(u) {
-      l.value.splice(u, 1);
+    function n(l) {
+      d.value.splice(l, 1);
     }
-    return (u, c) => {
-      const f = $("svg-icon"), V = $("file-input");
-      return r(), s("div", xe, [
-        (r(!0), s(M, null, N(p(d), (B, I) => (r(), s("div", {
+    return (l, s) => {
+      const f = S("svg-icon"), k = S("file-input");
+      return r(), c("div", xe, [
+        (r(!0), c(M, null, N(p(i), (B, I) => (r(), c("div", {
           key: B.src,
           class: "media-upload__thumbnail"
         }, [
-          o("img", {
+          u("img", {
             src: B.src,
             class: "img-thumbnail rounded"
           }, null, 8, Ve),
-          o("button", {
-            onClick: T((qe) => a(I), ["prevent"]),
+          u("button", {
+            onClick: T((qe) => n(I), ["prevent"]),
             class: "btn btn--close"
           }, [
             z(f, { symbol: "x" })
-          ], 8, Be)
+          ], 8, ke)
         ]))), 128)),
-        z(V, {
-          modelValue: l.value,
-          "onUpdate:modelValue": c[0] || (c[0] = (B) => l.value = B),
+        z(k, {
+          modelValue: d.value,
+          "onUpdate:modelValue": s[0] || (s[0] = (B) => d.value = B),
           id: e.id,
           name: e.name,
           accept: e.accept,
           class: "d-none"
         }, null, 8, ["modelValue", "id", "name", "accept"]),
-        o("label", {
+        u("label", {
           for: e.id,
           class: "btn btn-outline-dark"
-        }, " Select Image ", 8, ke)
+        }, " Select Image ", 8, Be)
       ]);
     };
   }