@companix/uikit 0.0.63 → 0.0.65

package/dist/bundle.es26.js

@@ -1,44 +1,23 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useResizeTextarea as x } from "./bundle.es55.js";
-import { attr as e, callMultiple as u } from "@companix/utils-browser";
-import { useEffect as z } from "react";
-import { mergeRefs as R } from "react-merge-refs";
-const q = ({
-  onResize: m,
-  grow: a = !1,
-  value: t,
-  onChange: s,
-  disabled: o,
-  required: i,
-  rows: l = 2,
-  fill: p = !1,
-  textAreaRef: c,
-  ...d
-}) => {
-  const [n, r] = x(m, a);
-  return z(r, [r, t]), /* @__PURE__ */ f(
-    "div",
-    {
-      className: "form form-textarea",
-      "data-required": e(i),
-      "data-disabled": e(o),
-      "data-fill": e(p),
-      children: /* @__PURE__ */ f(
-        "textarea",
-        {
-          className: "form-input",
-          "data-grow": e(a),
-          value: t,
-          ref: R([c, n]),
-          rows: l,
-          disabled: o,
-          onChange: u(s, r),
-          ...d
-        }
-      )
-    }
-  );
+import { jsx as d, Fragment as p } from "react/jsx-runtime";
+import { getNextCandleTime as T, sleep as S, getTimes as x } from "@companix/utils-js";
+import { useRef as g, useState as v, useEffect as s } from "react";
+const n = (t) => String(t).padStart(2, "0"), j = ({ expiration: t, separator: m = ":", onExpired: a }) => {
+  const e = g(null), [, o] = v([]);
+  s(() => {
+    const c = Date.now(), f = T(c, "1s") - c;
+    return e.current && clearInterval(e.current), S(f).then(() => {
+      o([]), e.current = setInterval(() => {
+        o([]);
+      }, 1e3);
+    }), () => {
+      e.current && clearInterval(e.current);
+    };
+  }, [t]);
+  const r = t - Date.now(), { hours: i, minutes: u, seconds: l } = x(r);
+  return s(() => {
+    r <= 0 && (a?.(), e.current && clearInterval(e.current));
+  }, [r <= 0]), /* @__PURE__ */ d(p, { children: [n(i), n(u), n(l)].join(m) });
 };
 export {
-  q as TextArea
+  j as Countdown
 };

package/dist/bundle.es27.js

@@ -1,122 +1,44 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { useFroozeClosing as M } from "./bundle.es47.js";
-import { Popover as j } from "./bundle.es10.js";
-import { useState as q, useRef as h, useMemo as V } from "react";
-import { Icon as g } from "./bundle.es33.js";
-import { attr as i, getActiveElementByAnotherElement as $, contains as B } from "@companix/utils-browser";
-import { mergeRefs as L } from "react-merge-refs";
-import { faXmark as X, faChevronDown as G } from "@companix/icons-solid";
-import { OptionsPopover as H } from "./bundle.es50.js";
-import { matchPattern as J } from "@companix/utils-js";
-const ne = (a) => {
-  const {
-    closeAfterSelect: v,
-    placeholder: C,
-    onChange: l,
-    onInputChange: x,
-    readOnly: c,
-    size: N = "md",
-    fill: O,
-    value: n,
-    inputRef: R,
-    disabled: u,
-    required: A,
-    // options popover
-    ...P
-  } = a, [f, b] = q(""), s = h(null), z = h(null), { popoverRef: d, froozePopoverPosition: D, handleAnimationEnd: E } = M(), S = (e) => n.includes(e) ? [...n] : [...n, e], k = (e) => n.filter((t) => e !== t), I = (e, t) => {
-    v ? (D(), l(e), t()) : l(e);
-  }, w = (e) => {
-    if (u) return;
-    d.current && d.current.getAttribute("data-state") === "open" && e.preventDefault();
-    const t = $(e.currentTarget);
-    e.defaultPrevented || B(e.currentTarget, t) || s.current && s.current.focus();
-  }, y = (e) => {
-    e.target !== s.current && e.preventDefault();
-  }, F = (e, t) => {
-    e.stopPropagation(), l(k(t));
-  }, T = ({ target: e }) => {
-    b(e.value), x?.(e.value);
-  }, m = V(() => {
-    const e = {};
-    return (a.options ?? a.defaultOptions ?? []).forEach((r) => {
-      e[r.value] = r;
-    }), e;
-  }, [a.options, a.defaultOptions]);
-  return /* @__PURE__ */ o(
-    j,
+import { jsx as f } from "react/jsx-runtime";
+import { useResizeTextarea as x } from "./bundle.es56.js";
+import { attr as e, callMultiple as u } from "@companix/utils-browser";
+import { useEffect as z } from "react";
+import { mergeRefs as R } from "react-merge-refs";
+const q = ({
+  onResize: m,
+  grow: a = !1,
+  value: t,
+  onChange: s,
+  disabled: o,
+  required: i,
+  rows: l = 2,
+  fill: p = !1,
+  textAreaRef: c,
+  ...d
+}) => {
+  const [n, r] = x(m, a);
+  return z(r, [r, t]), /* @__PURE__ */ f(
+    "div",
     {
-      minimal: !0,
-      ref: d,
-      sideOffset: 0,
-      matchTarget: "width",
-      onAnimationEnd: E,
-      onOpenAutoFocus: (e) => e.preventDefault(),
-      onCloseAutoFocus: (e) => e.preventDefault(),
-      content: ({ close: e }) => /* @__PURE__ */ o(
-        H,
+      className: "form form-textarea",
+      "data-required": e(i),
+      "data-disabled": e(o),
+      "data-fill": e(p),
+      children: /* @__PURE__ */ f(
+        "textarea",
         {
-          ...P,
-          isActive: (t) => n.includes(t),
-          onSelect: (t) => I(S(t), e),
-          disableFiltering: !f.trim(),
-          filterOptions: ({ title: t }) => J(t, f),
-          onOptionsLoaded: (t) => {
-            t.forEach((r) => {
-              m[r.value] = r;
-            });
-          }
-        }
-      ),
-      children: /* @__PURE__ */ o(
-        "div",
-        {
-          className: "form",
-          onClick: w,
-          onMouseDown: y,
-          "data-size": N ?? "md",
-          "data-fill": i(O),
-          "data-required": i(A),
-          "data-disabled": i(u),
-          children: /* @__PURE__ */ p("div", { className: "select-tags-container", children: [
-            /* @__PURE__ */ p("div", { className: "select-tags", children: [
-              n.length > 0 && /* @__PURE__ */ o(
-                "div",
-                {
-                  className: "tag-container",
-                  ref: z,
-                  role: "listbox",
-                  "data-readonly": i(c),
-                  children: n.map((e, t) => m[e] ? /* @__PURE__ */ p("div", { className: "tag", children: [
-                    /* @__PURE__ */ o("span", { className: "tag-name", children: m[e].title }),
-                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (r) => F(r, e), children: /* @__PURE__ */ o(g, { className: "tag-close-icon", icon: X, size: "xxxs" }) })
-                  ] }, `tag-option-${e}-${t}`) : null)
-                }
-              ),
-              (!c || n.length === 0) && /* @__PURE__ */ o(
-                "input",
-                {
-                  ref: L([R, s]),
-                  type: "text",
-                  autoCapitalize: "none",
-                  autoComplete: "off",
-                  autoCorrect: "off",
-                  className: "form-input",
-                  spellCheck: !1,
-                  value: f,
-                  disabled: u,
-                  readOnly: c,
-                  placeholder: C,
-                  onChange: T
-                }
-              )
-            ] }),
-            /* @__PURE__ */ o(g, { className: "expand-icon", icon: G, size: "xxxs" })
-          ] })
+          className: "form-input",
+          "data-grow": e(a),
+          value: t,
+          ref: R([c, n]),
+          rows: l,
+          disabled: o,
+          onChange: u(s, r),
+          ...d
         }
       )
     }
   );
 };
 export {
-  ne as SelectTags
+  q as TextArea
 };

package/dist/bundle.es28.js

@@ -1,11 +1,11 @@
 import { jsx as u } from "react/jsx-runtime";
 import { Popover as T } from "./bundle.es10.js";
-import { Input as w } from "./bundle.es13.js";
+import { Input as w } from "./bundle.es14.js";
 import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es56.js";
-import { useDayDisableCheker as N } from "./bundle.es57.js";
+import { Calendar as E } from "./bundle.es57.js";
+import { useDayDisableCheker as N } from "./bundle.es58.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es58.js";
+import { removeDigits as O } from "./bundle.es51.js";
 import { SelectRightElements as Y } from "./bundle.es59.js";
 const i = {
   char: "-",

package/dist/bundle.es29.js

@@ -1,7 +1,7 @@
 import { jsxs as D, jsx as h } from "react/jsx-runtime";
 import { useMemo as M, useEffect as C } from "react";
 import { Select as c } from "./bundle.es12.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es58.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es51.js";
 import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es60.js";
 const B = ({
   min: o = j,

package/dist/bundle.es32.js

@@ -1,81 +1,81 @@
 import { jsx as g } from "react/jsx-runtime";
-import { useRef as _, useMemo as b, useState as P, useEffect as j } from "react";
-import { getNum as v } from "@companix/utils-js";
-import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es58.js";
-import { SelectRightElements as w } from "./bundle.es59.js";
-import { Select as y } from "./bundle.es12.js";
-import { Input as z } from "./bundle.es13.js";
-const r = {
+import { useRef as b, useMemo as I, useState as E, useCallback as A } from "react";
+import { getNum as S } from "@companix/utils-js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es51.js";
+import { SelectRightElements as z } from "./bundle.es59.js";
+import { Select as F } from "./bundle.es12.js";
+import { Input as G } from "./bundle.es14.js";
+const o = {
   char: ":",
-  toString: (s) => s ? q(s, r.char) : "",
+  toString: (s) => s ? y(s, o.char) : "",
   toValue: (s) => {
-    const n = s.split(r.char);
+    const n = s.split(o.char);
     if (n.length === 2) {
-      const [e, i] = [v(n[0]), v(n[1])];
-      if (e !== null && i !== null && e < 24 && e >= 0 && i < 60 && i >= 0)
-        return { hours: e, minutes: i };
+      const [e, u] = [S(n[0]), S(n[1])];
+      if (e !== null && u !== null && e < 24 && e >= 0 && u < 60 && u >= 0)
+        return { hours: e, minutes: u };
     }
     return null;
   }
-}, U = (s) => {
-  const { value: n, onChange: e, clearButton: i, clearButtonIcon: I, disabled: a, ...T } = s, m = _(null), p = _(null), h = b(() => D(10), []), d = b(() => {
+}, Y = (s) => {
+  const { value: n, onChange: e, clearButton: u, clearButtonIcon: _, disabled: a, ...T } = s, m = b(null), p = b(null), h = I(() => W(10), []), k = I(() => {
     if (n && !n.minutes.toString().endsWith("0")) {
-      const t = n.hours * 6 + Math.trunc(n.minutes / 10), u = [...h];
-      return u.splice(t + 1, 0, A(n)), u;
+      const t = n.hours * 6 + Math.trunc(n.minutes / 10), r = [...h];
+      return r.splice(t + 1, 0, q(n)), r;
     }
     return h;
-  }, [h, n]), [o, l] = P(() => r.toString(n)), x = (t) => {
-    l(t);
-    const u = r.toValue(t);
-    u && e?.(u);
-  }, B = (t) => {
+  }, [h, n]), [i, l] = E(() => o.toString(n)), v = (t) => {
+    l(t), N(t);
+    const r = o.toValue(t);
+    r && e?.(r);
+  }, x = (t) => {
     a || m.current && m.current.getAttribute("data-state") === "open" && t.preventDefault();
-  }, O = () => {
-    r.toValue(o) === null && l(r.toString(n ?? null));
+  }, B = () => {
+    o.toValue(i) === null && l(o.toString(n ?? null));
+  }, O = (t) => {
+    e?.(o.toValue(t)), l(t);
   }, R = (t) => {
-    e?.(r.toValue(t)), l(t);
-  }, k = (t) => {
     t.stopPropagation(), l(""), e?.(null);
-  };
-  return j(() => {
-    if (o && o !== "__:__") {
-      const [t, u] = o.split(":"), V = (c) => {
-        const [C, S] = c.split(""), [E, M] = [C === "_" ? "0" : C, S === "_" ? "0" : S];
-        return E + M;
-      }, N = [V(t), V(u)].join(":"), f = r.toValue(N);
+  }, N = A((t) => {
+    if (t && t !== "__:__") {
+      const [r, M] = t.split(":"), d = (c) => {
+        const [C, V] = c.split(""), [j, D] = [C === "_" ? "0" : C, V === "_" ? "0" : V];
+        return j + D;
+      }, P = [d(r), d(M)].join(":"), f = o.toValue(P);
       if (f) {
         const c = f.hours * 6 + Math.trunc(f.minutes / 10);
         c !== -1 && p.current && p.current.scrollTo(c);
       }
     }
-  }, [d, o]), /* @__PURE__ */ g(
-    y,
+  }, []);
+  return /* @__PURE__ */ g(
+    F,
     {
       minimalOptions: !0,
-      options: d,
-      onChange: R,
-      value: o,
+      options: k,
+      onChange: O,
+      value: i,
       popoverRef: m,
       scrollRef: p,
       disabled: a,
       children: /* @__PURE__ */ g(
-        z,
+        G,
         {
           ...T,
-          value: o,
+          value: i,
           disabled: a,
-          onClick: B,
-          onValueChange: x,
-          onBlur: O,
+          onClick: x,
+          onValueChange: v,
+          onBlur: B,
           mask: "99:99",
           placeholder: "00:00",
           rightElement: /* @__PURE__ */ g(
-            w,
+            z,
             {
-              clearButton: i,
-              clearButtonIcon: I,
-              value: !!W(o, [":", "_"]),
-              onClear: k
+              clearButton: u,
+              clearButtonIcon: _,
+              value: !!w(i, [":", "_"]),
+              onClear: R
             }
           )
         }
@@ -84,5 +84,5 @@ const r = {
   );
 };
 export {
-  U as TimePicker
+  Y as TimePicker
 };

package/dist/bundle.es42.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-toast";
 import { attr as T } from "@companix/utils-browser";
 import { useState as d, useRef as b, useEffect as j, useLayoutEffect as E } from "react";
-import { RemoveListener as I } from "./bundle.es53.js";
+import { RemoveListener as I } from "./bundle.es54.js";
 const m = (o) => {
   const [r, u] = d(!0), [p, f] = d(!1), s = b(null), {
     appearance: C = "neutral",

package/dist/bundle.es43.js

@@ -1,6 +1,6 @@
 import { jsx as r, Fragment as m } from "react/jsx-runtime";
 import { useContext as C, createContext as g, useState as h, useEffect as x, useCallback as u } from "react";
-import { Dialog as D } from "./bundle.es21.js";
+import { Dialog as D } from "./bundle.es22.js";
 import { hash as v } from "@companix/utils-js";
 const $ = (t) => {
   const e = {}, n = {}, l = [], c = v();

package/dist/bundle.es50.js

@@ -1,8 +1,8 @@
-import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
 import { useMemo as h, useEffect as O } from "react";
 import { Spinner as L } from "./bundle.es6.js";
-import { OptionItem as u } from "./bundle.es14.js";
-import { OptionsList as C } from "./bundle.es16.js";
+import { OptionItem as u } from "./bundle.es15.js";
+import { OptionsList as C } from "./bundle.es17.js";
 import { Icon as R } from "./bundle.es33.js";
 import { faPlus as S } from "@companix/icons-solid";
 const b = () => ({ isLoading: !1, options: [] }), k = (s) => {
@@ -21,10 +21,10 @@ const b = () => ({ isLoading: !1, options: [] }), k = (s) => {
     onSelect: a,
     minimalOptions: m,
     filterOptions: l,
-    disableFiltering: e,
+    disableFiltering: i,
     ...d
-  } = s, { options: f, isLoading: v } = k(d), x = h(() => l && !e ? f.filter(l) : f, [f, l, e]);
-  return v ? /* @__PURE__ */ i("div", { className: "select-popover-loading", children: /* @__PURE__ */ i(L, { size: 24 }) }) : /* @__PURE__ */ i(
+  } = s, { options: f, isLoading: v } = k(d), x = h(() => l && !i ? f.filter(l) : f, [f, l, i]);
+  return v ? /* @__PURE__ */ e("div", { className: "select-popover-loading", children: /* @__PURE__ */ e(L, { size: 24 }) }) : /* @__PURE__ */ e(
     y,
     {
       options: x,
@@ -51,25 +51,25 @@ const b = () => ({ isLoading: !1, options: [] }), k = (s) => {
     emptyText: l = "Ничего не найдено"
   } = s;
   return O(() => {
-    r?.(p.findIndex((e) => n(e.value)));
+    r?.(p.findIndex(({ value: i }) => n(i)));
   }, []), /* @__PURE__ */ g(C, { scrollboxRef: t, optionsWrapperRef: c, maxHeight: 300, children: [
-    o && /* @__PURE__ */ i(
+    o && /* @__PURE__ */ e(
       u,
       {
         className: "select-add-option",
-        icon: /* @__PURE__ */ i(R, { icon: S }),
+        icon: /* @__PURE__ */ e(R, { icon: S }),
         title: o.text,
         onClick: o.onClick
       }
     ),
-    p.length === 0 && !o && /* @__PURE__ */ i("div", { className: "select-tags-empty", children: l }),
-    p.map((e, d) => /* @__PURE__ */ i(
+    p.length === 0 && !o && /* @__PURE__ */ e("div", { className: "select-tags-empty", children: l }),
+    p.map((i, d) => /* @__PURE__ */ e(
       u,
       {
-        active: n(e.value),
-        onClick: () => a?.(e.value),
+        active: n(i.value),
+        onClick: () => a?.(i.value),
         minimal: m,
-        ...e
+        ...i
       },
       `select-option-${d}`
     ))

package/dist/bundle.es51.js

@@ -1,26 +1,76 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as m, useCallback as i } from "react";
-import c from "react-input-mask";
-const I = m(
-  ({ mask: r, maskChar: f = "_", onChange: n, onValueChange: o, ...a }, e) => {
-    const p = i(
-      (t) => {
-        n?.(t), o?.(t.target.value, t.target);
-      },
-      [n, o]
-    );
-    return r ? /* @__PURE__ */ u(
-      c,
-      {
-        inputRef: e,
-        mask: r,
-        maskChar: f,
-        onChange: p,
-        ...a
-      }
-    ) : /* @__PURE__ */ u("input", { ref: e, ...a, onChange: p });
+import { clamp as m } from "@companix/utils-browser";
+import { formatTime as i } from "@companix/utils-js";
+const d = (n, r) => new Date(r, n, 0).getDate(), u = (n, r) => new Date(r, n - 1, 1).getDay(), g = (n) => n === 0 ? 6 : n - 1, D = (n) => new Array(n).fill(0), T = {
+  add: (n, r) => n.includes(r) ? [...n] : [...n, r],
+  remove: (n, r) => n.filter((t) => r !== t)
+}, p = (n) => ({
+  day: n.getDate(),
+  month: n.getMonth() + 1,
+  year: n.getFullYear()
+}), A = ({ min: n, max: r }) => (t) => {
+  if (n.year === t.year) {
+    if (t.month !== 0 && t.month < n.month)
+      return t.month = 0, t.day = 0, t;
+    if (t.month === n.month && t.day < n.day && t.day !== 0)
+      return t.day = 0, t;
   }
-);
+  if (r.year === t.year) {
+    if (t.month !== 0 && t.month > r.month)
+      return t.month = 0, t.day = 0, t;
+    if (t.month === r.month && t.day > r.day && t.day !== 0)
+      return t.day = 0, t;
+  }
+}, M = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"], w = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь"
+], c = 9999, a = 100, F = (n, r) => {
+  const t = [], o = m(n - r, a, c), e = m(n + r, a, c);
+  for (let s = o; s <= e; s++)
+    t.push({ title: String(s).padStart(4, "0"), value: s });
+  return t;
+}, Y = (n) => {
+  const r = [], t = new Intl.DateTimeFormat(n, {
+    month: "long"
+  });
+  for (let o = 0; o < 12; o++)
+    r.push({
+      title: t.format(new Date(2023, o, 15)),
+      value: o
+    });
+  return r;
+}, E = (n, r) => r.reduce((t, o) => t.replaceAll(o, ""), n.trim()), _ = ({ hours: n, minutes: r }, t = ":") => [i(n), i(r)].join(t), h = (n, r = ":") => {
+  const [t, o] = [i(n.hours), i(n.minutes)], e = [t, o].join(r);
+  return { title: e, value: e, hours: t, minutes: o };
+}, I = (n, r = ":") => {
+  const t = { minutes: -n, hours: 0 };
+  return Array.from({ length: 1440 / n }).map(() => (t.minutes += n, t.minutes === 60 && (t.minutes = 0, t.hours++), h(t, r)));
+};
 export {
-  I as InputElement
+  c as DEFAULT_MAX_YEAR,
+  a as DEFAULT_MIN_YEAR,
+  w as DefaultMonths,
+  T as arrays,
+  _ as convertTimeToOption,
+  A as createDateValidation,
+  D as createVoids,
+  p as dateToFormat,
+  g as getDayIndex,
+  u as getFirstDay,
+  d as getMonthMaxDay,
+  Y as getMonths,
+  h as getTimeValue,
+  I as getTimesOptions,
+  F as getYears,
+  E as removeDigits,
+  M as weeks
 };

package/dist/bundle.es52.js

@@ -1,41 +1,26 @@
-import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import h from "classnames";
-import { attr as e } from "@companix/utils-browser";
-import { forwardRef as x } from "react";
-import { useInputPadding as N } from "./bundle.es64.js";
-const v = x(
-  ({
-    required: s,
-    disabled: t,
-    size: i,
-    fill: d,
-    leftElement: r,
-    rightElement: a,
-    className: f,
-    inputRef: m,
-    children: n,
-    ...p
-  }, c) => {
-    const { leftRef: l, rightRef: u } = N(m, [r, a]);
-    return /* @__PURE__ */ b(
-      "div",
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as m, useCallback as i } from "react";
+import c from "react-input-mask";
+const I = m(
+  ({ mask: r, maskChar: f = "_", onChange: n, onValueChange: o, ...a }, e) => {
+    const p = i(
+      (t) => {
+        n?.(t), o?.(t.target.value, t.target);
+      },
+      [n, o]
+    );
+    return r ? /* @__PURE__ */ u(
+      c,
       {
-        ref: c,
-        className: h("form", f),
-        "data-size": i ?? "md",
-        "data-fill": e(d),
-        "data-required": e(s),
-        "data-disabled": e(t),
-        ...p,
-        children: [
-          r && /* @__PURE__ */ o("span", { ref: l, className: "form-input-base-left-element", children: r }),
-          n,
-          a && /* @__PURE__ */ o("span", { ref: u, className: "form-input-base-right-element", children: a })
-        ]
+        inputRef: e,
+        mask: r,
+        maskChar: f,
+        onChange: p,
+        ...a
       }
-    );
+    ) : /* @__PURE__ */ u("input", { ref: e, ...a, onChange: p });
   }
 );
 export {
-  v as InputContainer
+  I as InputElement
 };