react-asc 26.2.0 → 26.3.0

package/components/LoadingIndicator/LoadingIndicatorContainer.d.ts

@@ -3,4 +3,4 @@ export interface ILoadingIndicatorContainerProps {
     children: React.ReactNode;
     isFixed?: boolean;
 }
-export declare const LoadingIndicatorContainer: ({ children, isFixed }: ILoadingIndicatorContainerProps) => React.JSX.Element;
+export declare const LoadingIndicatorContainer: ({ children, isFixed, }: ILoadingIndicatorContainerProps) => React.JSX.Element;

package/index.es.js

@@ -225,16 +225,27 @@ const Yc = () => /* @__PURE__ */ o(
       }
     )
   }
-), pt = () => /* @__PURE__ */ o("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: /* @__PURE__ */ o("path", { fill: "currentColor", d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }) }), qc = () => /* @__PURE__ */ o("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "home", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: /* @__PURE__ */ o(
-  "path",
+), pt = () => /* @__PURE__ */ o("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: /* @__PURE__ */ o("path", { fill: "currentColor", d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }) }), qc = () => /* @__PURE__ */ o(
+  "svg",
   {
-    fill: "currentColor",
-    d: `M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16
+    "aria-hidden": "true",
+    focusable: "false",
+    "data-prefix": "fas",
+    "data-icon": "home",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 576 512",
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        fill: "currentColor",
+        d: `M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16
 			16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12
 			12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12
 			12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z`
+      }
+    )
   }
-) }), Ct = () => /* @__PURE__ */ o("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: /* @__PURE__ */ o(
+), Ct = () => /* @__PURE__ */ o("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: /* @__PURE__ */ o(
   "path",
   {
     fill: "currentColor",
@@ -333,7 +344,10 @@ const Yc = () => /* @__PURE__ */ o(
 }, es = ({ ...n }) => /* @__PURE__ */ o("div", { className: (() => {
   const s = [];
   return s.push(Ge.loadingIndicator), s.filter((t) => t).join(" ");
-})(), ...n, children: /* @__PURE__ */ o(_t, {}) }), ss = ({ children: n, isFixed: e }) => /* @__PURE__ */ o("div", { className: (() => {
+})(), ...n, children: /* @__PURE__ */ o(_t, {}) }), ss = ({
+  children: n,
+  isFixed: e
+}) => /* @__PURE__ */ o("div", { className: (() => {
   const t = [];
   return t.push(Ge.loadingIndicatorContainer), e && t.push(Ge.isFixed), t.filter((r) => r).join(" ");
 })(), children: n });
@@ -426,7 +440,11 @@ const Gc = new Dt(), Mt = "_iconButton_1m2ki_1", jt = "_shadow_1m2ki_24", Lt = "
   xxl: on
 };
 var an = /* @__PURE__ */ ((n) => (n.sm = "sm", n.md = "md", n.lg = "lg", n.xl = "xl", n.xxl = "xxl", n))(an || {});
-const Uc = ({ avatar: n, avatarSize: e = "sm", ...s }) => /* @__PURE__ */ o("div", { className: (() => {
+const Uc = ({
+  avatar: n,
+  avatarSize: e = "sm",
+  ...s
+}) => /* @__PURE__ */ o("div", { className: (() => {
   const r = [];
   return r.push(ds.avatar), r.push(ds[e]), r.filter((a) => a).join(" ");
 })(), ...s, children: n }), rn = "_icon_1dwao_1", cn = {
@@ -706,7 +724,15 @@ const Uc = ({ avatar: n, avatarSize: e = "sm", ...s }) => /* @__PURE__ */ o("div
     !l && !h && (C(!m), f?.current?.click());
   };
   return /* @__PURE__ */ S("div", { className: Ve.checkboxContainer, children: [
-    /* @__PURE__ */ o(ae, { className: u(), onClick: v, icon: y(), disabled: l || h }),
+    /* @__PURE__ */ o(
+      ae,
+      {
+        className: u(),
+        onClick: v,
+        icon: y(),
+        disabled: l || h
+      }
+    ),
     /* @__PURE__ */ o("label", { onClick: v, className: p(), children: r }),
     /* @__PURE__ */ o(
       "input",
@@ -1249,7 +1275,18 @@ const ll = (n) => {
   chipContainer: Jo,
   selectMenu: Zo
 }, se = (n) => {
-  const { id: e, className: s, options: t = [], value: r, multiple: a, multipleMaxCountItems: c = 5, disabled: l, readOnly: h, onChange: d, onKeyDown: m } = n, [C, f] = $(""), [i, u] = $(null), [p, y] = $(!1), [v, k] = $([]), D = P(null), I = P(null), B = () => {
+  const {
+    id: e,
+    className: s,
+    options: t = [],
+    value: r,
+    multiple: a,
+    multipleMaxCountItems: c = 5,
+    disabled: l,
+    readOnly: h,
+    onChange: d,
+    onKeyDown: m
+  } = n, [C, f] = $(""), [i, u] = $(null), [p, y] = $(!1), [v, k] = $([]), D = P(null), I = P(null), B = () => {
     const _ = [];
     return s && _.push(s), l && _.push(pe.disabled), h && _.push(pe.readOnly), _.push(pe.select), _.filter((w) => w).join(" ");
   };
@@ -1265,7 +1302,9 @@ const ll = (n) => {
     }, 100);
   }, [i, p]);
   const N = (_) => {
-    const w = I.current?.children[0]?.querySelector(`#list-item-${_}`);
+    const w = I.current?.children[0]?.querySelector(
+      `#list-item-${_}`
+    );
     w && w?.scrollIntoView({ block: "center", behavior: "smooth" });
   }, A = (_) => f(_);
   O(() => {
@@ -1287,7 +1326,16 @@ const ll = (n) => {
     return v.length > 0 && (_ = /* @__PURE__ */ o("span", { children: v[0].label })), _;
   }, re = () => {
     let _ = null;
-    return v.length <= c && v.length > 0 ? _ = v.map((w) => /* @__PURE__ */ o(Bs, { color: z.primary, isDeletable: !0, onDelete: (x) => g(x, w), children: w.label }, w.value)) : _ = /* @__PURE__ */ S("span", { children: [
+    return v.length <= c && v.length > 0 ? _ = v.map((w) => /* @__PURE__ */ o(
+      Bs,
+      {
+        color: z.primary,
+        isDeletable: !0,
+        onDelete: (x) => g(x, w),
+        children: w.label
+      },
+      w.value
+    )) : _ = /* @__PURE__ */ S("span", { children: [
       v.length,
       " Items selected"
     ] }), _;
@@ -1314,11 +1362,21 @@ const ll = (n) => {
       }
   };
   return /* @__PURE__ */ S("div", { ref: D, className: pe.selectContainer, children: [
-    /* @__PURE__ */ o("div", { id: e, className: B(), onClick: () => E(), tabIndex: 0, onKeyDown: (_) => b(_), children: /* @__PURE__ */ S(q, { children: [
-      !a && J(),
-      a && /* @__PURE__ */ o("div", { className: pe.chipContainer, children: re() }),
-      /* @__PURE__ */ o(ee, { className: "ml-auto", children: /* @__PURE__ */ o(Te, {}) })
-    ] }) }),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        id: e,
+        className: B(),
+        onClick: () => E(),
+        tabIndex: 0,
+        onKeyDown: (_) => b(_),
+        children: /* @__PURE__ */ S(q, { children: [
+          !a && J(),
+          a && /* @__PURE__ */ o("div", { className: pe.chipContainer, children: re() }),
+          /* @__PURE__ */ o(ee, { className: "ml-auto", children: /* @__PURE__ */ o(Te, {}) })
+        ] })
+      }
+    ),
     p && /* @__PURE__ */ S(xe, { className: "backdrop-root", children: [
       /* @__PURE__ */ o(
         "div",
@@ -1337,7 +1395,13 @@ const ll = (n) => {
               onClick: () => V(_),
               active: j(_),
               children: [
-                a && /* @__PURE__ */ o(as, { checked: j(_), onChange: () => V(_) }),
+                a && /* @__PURE__ */ o(
+                  as,
+                  {
+                    checked: j(_),
+                    onChange: () => V(_)
+                  }
+                ),
                 /* @__PURE__ */ o(ts, { primary: _.label ? _.label : _.value })
               ]
             },
@@ -1496,7 +1560,12 @@ const ll = (n) => {
   ] });
 }, na = "_formLabel_1kzj0_1", oa = {
   formLabel: na
-}, oe = ({ children: n, className: e, htmlFor: s, ...t }) => /* @__PURE__ */ o("label", { htmlFor: s, className: (() => {
+}, oe = ({
+  children: n,
+  className: e,
+  htmlFor: s,
+  ...t
+}) => /* @__PURE__ */ o("label", { htmlFor: s, className: (() => {
   const a = [];
   return a.push(oa.formLabel), e && a.push(e), a.filter((c) => c).join(" ");
 })(), ...t, children: n }), Ts = (n) => n?.toString().trim() === "" || n === null || n === void 0, aa = (n) => {
@@ -1547,10 +1616,16 @@ class ia extends Es {
             aa(e) && t.push({ validator: c, message: "Email format is wrong" });
             break;
           case "min":
-            la(e, parseInt(l)) || t.push({ validator: c, message: `Minimum number of ${l} characters not met` });
+            la(e, parseInt(l)) || t.push({
+              validator: c,
+              message: `Minimum number of ${l} characters not met`
+            });
             break;
           case "max":
-            ca(e, parseInt(l)) || t.push({ validator: c, message: `Maximum number of ${l} characters exceeded` });
+            ca(e, parseInt(l)) || t.push({
+              validator: c,
+              message: `Maximum number of ${l} characters exceeded`
+            });
             break;
           case "match":
             if (l) {
@@ -1844,11 +1919,18 @@ const dl = (n) => {
     ] }),
     /* @__PURE__ */ S(ue, { children: [
       /* @__PURE__ */ o(oe, { children: "Month" }),
-      /* @__PURE__ */ o(Ca, { value: l.getMonth(), disabled: t, onChange: (m) => d(
-        m,
-        1
-        /* MONTH */
-      ) })
+      /* @__PURE__ */ o(
+        Ca,
+        {
+          value: l.getMonth(),
+          disabled: t,
+          onChange: (m) => d(
+            m,
+            1
+            /* MONTH */
+          )
+        }
+      )
     ] }),
     /* @__PURE__ */ S(ue, { children: [
       /* @__PURE__ */ o(oe, { children: "Day" }),
@@ -1944,7 +2026,17 @@ const dl = (n) => {
   rightTop: Aa,
   rightBottom: Va
 }, Ha = (n) => {
-  const { className: e, icon: s, color: t = z.primary, fixed: r, position: a = "rightBottom", size: c = Fe.lg, isActive: l, disabled: h, onClick: d } = n, m = () => {
+  const {
+    className: e,
+    icon: s,
+    color: t = z.primary,
+    fixed: r,
+    position: a = "rightBottom",
+    size: c = Fe.lg,
+    isActive: l,
+    disabled: h,
+    onClick: d
+  } = n, m = () => {
     const f = [];
     return f.push(Ee.fab), r && f.push(Ee.fixed), a && r && f.push(Ee[a]), e && f.push(e), f.filter((i) => i).join(" ");
   }, C = (f) => {
@@ -1967,11 +2059,22 @@ const dl = (n) => {
   link: Ea
 }, ml = (n) => {
   const { href: e = "#", className: s, target: t, children: r, ...a } = n, [c, l] = $(Me.NORMAL), [h] = Xe([Ra.link, s, c]);
-  return /* @__PURE__ */ o("a", { className: h, href: e, target: t, onMouseEnter: () => {
-    l(Me.HOVERED);
-  }, onMouseLeave: () => {
-    l(Me.NORMAL);
-  }, ...a, children: r });
+  return /* @__PURE__ */ o(
+    "a",
+    {
+      className: h,
+      href: e,
+      target: t,
+      onMouseEnter: () => {
+        l(Me.HOVERED);
+      },
+      onMouseLeave: () => {
+        l(Me.NORMAL);
+      },
+      ...a,
+      children: r
+    }
+  );
 }, Pa = "_menuBody_1931d_1", Wa = "_shadow_1931d_18", vs = {
   menuBody: Pa,
   shadow: Wa
@@ -2016,7 +2119,15 @@ const dl = (n) => {
   };
   return /* @__PURE__ */ S("div", { ref: h, className: m(), ...l, children: [
     /* @__PURE__ */ o("div", { className: "d-inline", ref: d, children: e }),
-    r && /* @__PURE__ */ o(Ya, { parentRef: d, menuPosition: a, onClickBackdrop: C, children: s })
+    r && /* @__PURE__ */ o(
+      Ya,
+      {
+        parentRef: d,
+        menuPosition: a,
+        onClickBackdrop: C,
+        children: s
+      }
+    )
   ] });
 }, Cl = (n) => {
   const { children: e, onClick: s, ...t } = n, r = () => [].filter((l) => l).join(" "), a = (c) => {
@@ -2085,7 +2196,14 @@ const dl = (n) => {
   };
   return /* @__PURE__ */ S(q, { children: [
     /* @__PURE__ */ o(xe, { className: "modal-root", target: e, children: /* @__PURE__ */ o("div", { className: Ce.modal, children: /* @__PURE__ */ o("div", { className: C(), children: /* @__PURE__ */ S("div", { className: Ce.modalContent, children: [
-      c && /* @__PURE__ */ o(ur, { isDismissable: m, onClose: () => h && h(), children: c }),
+      c && /* @__PURE__ */ o(
+        ur,
+        {
+          isDismissable: m,
+          onClose: () => h && h(),
+          children: c
+        }
+      ),
       /* @__PURE__ */ o(or, { children: a }),
       l && /* @__PURE__ */ o(cr, { children: l })
     ] }) }) }) }),
@@ -2156,7 +2274,16 @@ const ws = ({
       )) }),
       children: [
         e && /* @__PURE__ */ o("div", { children: e }),
-        i === be.FORM && /* @__PURE__ */ o(q, { children: /* @__PURE__ */ o(ia, { ref: u, controls: C, validateOnBlur: !0, onSubmit: v, onChange: r }) })
+        i === be.FORM && /* @__PURE__ */ o(q, { children: /* @__PURE__ */ o(
+          ia,
+          {
+            ref: u,
+            controls: C,
+            validateOnBlur: !0,
+            onSubmit: v,
+            onChange: r
+          }
+        ) })
       ]
     }
   );
@@ -2263,7 +2390,14 @@ const pr = "_tooltipContainer_1wz21_1", Cr = "_tooltip_1wz21_1", _r = "_arrow_1w
   "placement-left": "_placement-left_1wz21_33",
   "placement-right": "_placement-right_1wz21_36"
 }, fr = (n) => {
-  const { children: e, text: s, placement: t = As.bottom, isOpen: r = !1, isShowClose: a = !1, delay: c = 0 } = n, [l, h] = $(), [d, m] = $(c), [C, f] = $(r), [i, u] = $(r), [p, y] = $(a), v = P(null), k = P(null);
+  const {
+    children: e,
+    text: s,
+    placement: t = As.bottom,
+    isOpen: r = !1,
+    isShowClose: a = !1,
+    delay: c = 0
+  } = n, [l, h] = $(), [d, m] = $(c), [C, f] = $(r), [i, u] = $(r), [p, y] = $(a), v = P(null), k = P(null);
   Is(
     () => {
       f(i);
@@ -2280,15 +2414,19 @@ const pr = "_tooltipContainer_1wz21_1", Cr = "_tooltip_1wz21_1", _r = "_arrow_1w
     C === !0 && v && v.current && k && k.current ? D() : I();
   }, [C]);
   const D = () => {
-    const j = Ss(v.current, k.current, {
-      placement: t,
-      modifiers: [
-        {
-          name: "offset",
-          options: { offset: [0, 8] }
-        }
-      ]
-    });
+    const j = Ss(
+      v.current,
+      k.current,
+      {
+        placement: t,
+        modifiers: [
+          {
+            name: "offset",
+            options: { offset: [0, 8] }
+          }
+        ]
+      }
+    );
     h(j);
   }, I = () => {
     l?.destroy();
@@ -2492,7 +2630,12 @@ class Ar {
   handler;
   root;
   show(e, s) {
-    const t = { timeout: 3e3, actionText: "ok", color: z.dark, target: document.body }, r = Object.assign(t, s);
+    const t = {
+      timeout: 3e3,
+      actionText: "ok",
+      color: z.dark,
+      target: document.body
+    }, r = Object.assign(t, s);
     return new Promise((a) => {
       this.container && this.hide(), this.container = document.createElement("div"), this.container.classList.add("snackbar-container"), r.target.appendChild(this.container), r.timeout && r.timeout > 0 && (this.handler = setTimeout(() => {
         this.hide();
@@ -2534,10 +2677,20 @@ const Nl = new Ar(), Vr = "_speedDial_1jw7t_1", Hr = {
   speedDialAction: Wr
 }, Il = (n) => {
   const { icon: e, color: s = z.light, onClick: t, className: r } = n;
-  return /* @__PURE__ */ o(ae, { className: (() => {
-    const c = [];
-    return c.push(Yr.speedDialAction), r && c.push(r), c.filter((l) => l).join(" ");
-  })(), icon: e, color: s, variant: Y.contained, shadow: !0, onClick: t });
+  return /* @__PURE__ */ o(
+    ae,
+    {
+      className: (() => {
+        const c = [];
+        return c.push(Yr.speedDialAction), r && c.push(r), c.filter((l) => l).join(" ");
+      })(),
+      icon: e,
+      color: s,
+      variant: Y.contained,
+      shadow: !0,
+      onClick: t
+    }
+  );
 }, Ol = (n) => {
   const { children: e, className: s, ...t } = n;
   return /* @__PURE__ */ o(ee, { className: (() => {
@@ -2576,7 +2729,18 @@ const Nl = new Ar(), Vr = "_speedDial_1jw7t_1", Hr = {
 }, nc = "_stepperActions_1ii7p_1", oc = {
   stepperActions: nc
 }, ac = (n) => {
-  const { className: e, showDoneButton: s, showResetButton: t, isCompleted: r, isFirstStep: a, isStepOptional: c, onBack: l, onSkip: h, onNext: d, onReset: m } = n;
+  const {
+    className: e,
+    showDoneButton: s,
+    showResetButton: t,
+    isCompleted: r,
+    isFirstStep: a,
+    isStepOptional: c,
+    onBack: l,
+    onSkip: h,
+    onNext: d,
+    onReset: m
+  } = n;
   return /* @__PURE__ */ S("div", { className: (() => {
     const f = [];
     return f.push(oc.stepperActions), e && f.push(e), f.filter((i) => i).join(" ");
@@ -2799,10 +2963,29 @@ const Nl = new Ar(), Vr = "_speedDial_1jw7t_1", Hr = {
   }, d = (m) => {
     a && a({ event: m, value: r }), l && l(r);
   };
-  return /* @__PURE__ */ o(ne, { className: h(), onClick: d, isActive: c === r, disabled: t, children: e });
+  return /* @__PURE__ */ o(
+    ne,
+    {
+      className: h(),
+      onClick: d,
+      isActive: c === r,
+      disabled: t,
+      children: e
+    }
+  );
 }, Bl = (n) => {
   const { children: e, value: s, index: t, ...r } = n;
-  return /* @__PURE__ */ o("div", { role: "tabpanel", hidden: s !== t, id: `tabpanel-${t}`, "aria-labelledby": `wrapped-tab-${t}`, ...r, children: s === t && e });
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: s !== t,
+      id: `tabpanel-${t}`,
+      "aria-labelledby": `wrapped-tab-${t}`,
+      ...r,
+      children: s === t && e
+    }
+  );
 }, xc = (n) => {
   const { className: e, value: s = 0, id: t, name: r, disabled: a, onChange: c } = n, [l, h] = $(s), [d, m] = $();
   O(() => {
@@ -2923,7 +3106,15 @@ const Fl = (n) => {
     const i = [];
     return i.push("row"), e && i.push(e), i.filter((u) => u).join(" ");
   }, f = (i, u) => {
-    const p = d.getFullYear(), y = d.getMonth(), v = d.getDate(), k = u === 0 ? i : d.getHours(), D = u === 1 ? i : d.getMinutes(), I = u === 2 ? i : d.getSeconds(), B = u === 3 ? i : d.getMilliseconds(), N = new Date(p, y, v, k, D, I, B);
+    const p = d.getFullYear(), y = d.getMonth(), v = d.getDate(), k = u === 0 ? i : d.getHours(), D = u === 1 ? i : d.getMinutes(), I = u === 2 ? i : d.getSeconds(), B = u === 3 ? i : d.getMilliseconds(), N = new Date(
+      p,
+      y,
+      v,
+      k,
+      D,
+      I,
+      B
+    );
     m(N), h && h(N);
   };
   return /* @__PURE__ */ S(zs, { className: C(), children: [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "26.2.0",
+	"version": "26.3.0",
 	"description": "handcrafted react components",
 	"main": "index.cjs.js",
 	"module": "index.es.js",

package/readme.md

@@ -8,8 +8,8 @@ react-asc interactive showcase with code snippets [link](https://react-asc.oardi
 
 ## Stackblitz Examples
 
--   react-asc and jsx [link](https://stackblitz.com/edit/react-asc-example-js)
--   react-asc and tsx [link](https://stackblitz.com/edit/react-asc-example-ts)
+- react-asc and jsx [link](https://stackblitz.com/edit/react-asc-example-js)
+- react-asc and tsx [link](https://stackblitz.com/edit/react-asc-example-ts)
 
 ## usage
 
@@ -46,48 +46,48 @@ react-asc provides built-in ts definition
 
 ## Included Components
 
--   Alert (beta)
--   AppBar
--   AutoComplete (beta)
--   Backdrop
--   Badge
--   Breadcrumb
--   Button
--   ButtonGroup
--   Card
--   Checkbox
--   Chip
--   CssTransition
--   ConditionalWrapper
--   DateSelect
--   Drawer
--   ExpansionPanel
--   FileInput
--   FloatingActionButton
--   Form (beta)
--   Grid
--   Icon
--   IconButton
--   Link
--   List
--   LoadingIndicator
--   Menu
--   Modal + ModalService
--   NumberSelect
-    Portal
--   Select
--   Sidebar
--   Skeleton (Avatar, Image, Text, SkeletonFooter)
--   Snackbar + SnackbarService
--   SpeedDial
--   Stepper (beta)
--   Table (beta)
--   Tabs
--   Textarea
--   TimeSelect
--   Tooltip
--   TreeView (beta)
--   Typography
+- Alert (beta)
+- AppBar
+- AutoComplete (beta)
+- Backdrop
+- Badge
+- Breadcrumb
+- Button
+- ButtonGroup
+- Card
+- Checkbox
+- Chip
+- CssTransition
+- ConditionalWrapper
+- DateSelect
+- Drawer
+- ExpansionPanel
+- FileInput
+- FloatingActionButton
+- Form (beta)
+- Grid
+- Icon
+- IconButton
+- Link
+- List
+- LoadingIndicator
+- Menu
+- Modal + ModalService
+- NumberSelect
+  Portal
+- Select
+- Sidebar
+- Skeleton (Avatar, Image, Text, SkeletonFooter)
+- Snackbar + SnackbarService
+- SpeedDial
+- Stepper (beta)
+- Table (beta)
+- Tabs
+- Textarea
+- TimeSelect
+- Tooltip
+- TreeView (beta)
+- Typography
 
 ## Credit