@jirawatpyk/aura-react 5.33.0 → 5.35.0

package/dist/esm/ActionBar.js

@@ -35,6 +35,7 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
       },
       role: "region",
       "aria-label": props.label || t.actions,
+      "data-aura-hide-bottomnav": props.hidesBottomNav && !idle ? "" : void 0,
       className: cx(
         "aura-actionbar",
         "aura-actionbar--" + (props.position || "viewport"),

package/dist/esm/AppShell.js

@@ -5,6 +5,7 @@ import { IconButton } from "./IconButton.js";
 import { cx, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { useBreakpoint } from "./responsive.js";
+import { useHideOnScroll } from "./scrollHide.js";
 import { IconMenu } from "./icons.js";
 const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
@@ -29,13 +30,24 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
   const barH = React.useState(null);
+  const away = useHideOnScroll(!!props.headerHideOnScroll && hasBar, barRef, "(max-width: 1023.98px)", barH[0] || 56);
+  const awayRef = React.useRef(away);
+  awayRef.current = away;
+  useIsoLayoutEffect(
+    function() {
+      const root = rootRef.current, bar = barRef.current;
+      if (!root || !bar) return;
+      root.style.setProperty("--aura-shell-bar-height", away ? "0px" : bar.getBoundingClientRect().height + "px");
+    },
+    [away]
+  );
   useIsoLayoutEffect(
     function() {
       const root = rootRef.current, bar = barRef.current;
       if (!root || !bar) return;
       function sync() {
         const h = bar.getBoundingClientRect().height;
-        root.style.setProperty("--aura-shell-bar-height", h + "px");
+        root.style.setProperty("--aura-shell-bar-height", awayRef.current ? "0px" : h + "px");
         if (h > 0) barH[1](Math.round(h));
       }
       sync();
@@ -103,7 +115,9 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
         ref: barRef,
         className: cx(
           "aura-shell__bar",
-          (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only"
+          (!props.header || props.headerHideFrom === "lg") && "aura-shell__bar--menu-only",
+          props.headerHideOnScroll && "aura-shell__bar--hides",
+          away && "is-away"
         )
       },
       props.nav ? /* @__PURE__ */ React.createElement(

package/dist/esm/BottomNav.js

@@ -3,6 +3,8 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, devWarnOnce, plainClick, useMaybeControlled } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
+import { useHideOnScroll } from "./scrollHide.js";
+import { breakpoints } from "./breakpoints.js";
 const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
   const t = useStrings();
   const Link = useLinkComponent(props.linkComponent);
@@ -13,11 +15,33 @@ const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
   );
   const active = st[0];
   const hide = props.hideFrom === false ? "always" : "below-" + (props.hideFrom || "lg");
+  const own = React.useRef(null);
+  const hf = props.hideFrom === false ? null : props.hideFrom || "lg";
+  const away = useHideOnScroll(
+    !!props.hideOnScroll,
+    own,
+    hf ? "(max-width: " + (breakpoints[hf] - 0.02) + "px)" : "all",
+    64
+  );
+  const setRef = React.useCallback(
+    function(el) {
+      own.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: cx("aura-bottomnav-spacer", "aura-bottomnav--" + hide), "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
     "nav",
     {
-      ref,
-      className: cx("aura-bottomnav", "aura-bottomnav--" + hide, props.className),
+      ref: setRef,
+      className: cx(
+        "aura-bottomnav",
+        "aura-bottomnav--" + hide,
+        props.hideOnScroll && "aura-bottomnav--hides",
+        away && "is-away",
+        props.className
+      ),
       "aria-label": props.label || t.mainNav
     },
     /* @__PURE__ */ React.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {

package/dist/esm/StatusTile.js

@@ -0,0 +1,53 @@
+'use client';
+import * as React from "react";
+import { useLinkComponent, useStrings } from "./locale.js";
+import { useAutoTip } from "./autoTip.js";
+import { devWarnOnce } from "./classes.js";
+import { statusTileElement } from "./tiles.js";
+const useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const StatusTile = React.forwardRef(function StatusTile2(props, ref) {
+  const Link = useLinkComponent(props.linkComponent);
+  const t = useStrings();
+  useAutoTip();
+  if (!props.href && (props["aria-label"] || props["aria-labelledby"]))
+    devWarnOnce(
+      "status-tile-label",
+      "StatusTile `aria-label` needs `href`: without a link the tile is a plain box, where a name is not allowed."
+    );
+  const titleRef = React.useRef(null);
+  const check = React.useCallback(function() {
+    const el = titleRef.current;
+    if (!el) return;
+    const cut = el.scrollHeight > el.clientHeight + 1;
+    const text = (el.textContent || "").replace(/,$/, "").trim();
+    if (cut && text) el.setAttribute("data-aura-tip", text);
+    else el.removeAttribute("data-aura-tip");
+  }, []);
+  useIsoLayoutEffect(check, [props.title, check]);
+  const linked = !!props.href;
+  React.useEffect(
+    function() {
+      const el = titleRef.current;
+      if (!el) return;
+      let live = true;
+      const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(check) : null;
+      const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(check) : null;
+      if (ro) ro.observe(el);
+      if (mo) mo.observe(el, { characterData: true, childList: true, subtree: true });
+      if (document.fonts && document.fonts.ready)
+        document.fonts.ready.then(function() {
+          if (live) check();
+        });
+      return function() {
+        live = false;
+        if (ro) ro.disconnect();
+        if (mo) mo.disconnect();
+      };
+    },
+    [check, linked]
+  );
+  return statusTileElement(props, ref, Link, t, titleRef);
+});
+export {
+  StatusTile
+};

package/dist/esm/autoTip.js

@@ -22,6 +22,11 @@ function source(t) {
     const tag = el.closest(".aura-tag");
     if (tag) s = tag.querySelector(".aura-tag__text[" + ATTR + "]");
   }
+  if (!s) {
+    const tile = el.closest(".aura-status-tile");
+    const control = el.closest("a, button, input, select, textarea, [tabindex]");
+    if (tile && (!control || control === tile)) s = tile.querySelector(".aura-status-tile__title[" + ATTR + "]");
+  }
   if (!s || !s.getAttribute(ATTR) || !s.isConnected) return null;
   if (s.getAttribute("aria-expanded") === "true") return null;
   return s;

package/dist/esm/breakpoints.js

@@ -1,5 +1,22 @@
 'use client';
 const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+const ORDER = ["base", "sm", "md", "lg", "xl"];
+function respVars(prefix, value, map) {
+  const style = {};
+  if (value == null) return style;
+  if (typeof value !== "object") value = { base: value };
+  let byBp = value, cur;
+  ORDER.forEach(function(k) {
+    if (byBp[k] !== void 0) cur = map ? map(byBp[k]) : byBp[k];
+    if (cur !== void 0) style["--" + prefix + "-" + k] = cur;
+  });
+  return style;
+}
+const space = function(v) {
+  return typeof v === "number" ? "var(--aura-space-" + v + ")" : v;
+};
 export {
-  breakpoints
+  breakpoints,
+  respVars,
+  space
 };

package/dist/esm/index.js

@@ -36,6 +36,8 @@ import { Stack } from "./Stack.js";
 import { Grid } from "./Grid.js";
 import { Container } from "./Container.js";
 import { PageHeader } from "./PageHeader.js";
+import { StatusTile } from "./StatusTile.js";
+import { TileGrid, Sparkline } from "./tiles.js";
 import { AppShell } from "./AppShell.js";
 import { ActionBar } from "./ActionBar.js";
 import { Separator } from "./Separator.js";
@@ -111,9 +113,11 @@ export {
   Separator,
   SideNav,
   Skeleton,
+  Sparkline,
   Stack,
   Stat,
   StatusPill,
+  StatusTile,
   Stepper,
   Surface,
   Switch,
@@ -128,6 +132,7 @@ export {
   Textarea,
   Th,
   ThemeStyle,
+  TileGrid,
   TimePicker,
   Toaster,
   Tooltip,

package/dist/esm/responsive.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { breakpoints } from "./breakpoints.js";
+import { breakpoints, respVars, space } from "./breakpoints.js";
 const ORDER = ["base", "sm", "md", "lg", "xl"];
 function useBreakpoint() {
   return React.useSyncExternalStore(subscribe, current, function() {
@@ -27,20 +27,6 @@ function useResponsive(value) {
   for (let i = ORDER.indexOf(bp); i >= 0; i--) if (map[ORDER[i]] !== void 0) return map[ORDER[i]];
   return void 0;
 }
-function respVars(prefix, value, map) {
-  const style = {};
-  if (value == null) return style;
-  if (typeof value !== "object") value = { base: value };
-  let byBp = value, cur;
-  ORDER.forEach(function(k) {
-    if (byBp[k] !== void 0) cur = map ? map(byBp[k]) : byBp[k];
-    if (cur !== void 0) style["--" + prefix + "-" + k] = cur;
-  });
-  return style;
-}
-const space = function(v) {
-  return typeof v === "number" ? "var(--aura-space-" + v + ")" : v;
-};
 export {
   breakpoints,
   respVars,

package/dist/esm/scrollHide.js

@@ -0,0 +1,96 @@
+'use client';
+import * as React from "react";
+const STEP = 8;
+function useHideOnScroll(enabled, el, media, from) {
+  const st = React.useState(false), hidden = st[0], setHidden = st[1];
+  React.useEffect(
+    function() {
+      if (!enabled || typeof window === "undefined") {
+        setHidden(false);
+        return;
+      }
+      const mq = window.matchMedia ? window.matchMedia(media) : null;
+      let last = window.scrollY, lastH = window.innerHeight, resizedAt = -1e9, run = 0;
+      let restore = null;
+      function update() {
+        if (restore) {
+          const r = restore;
+          if (performance.now() > r.until || window.scrollY >= r.y - 1) restore = null;
+          else {
+            restore = null;
+            last = r.y;
+            window.scrollTo(window.scrollX, r.y);
+            return;
+          }
+        }
+        const y = window.scrollY, dy = y - last;
+        last = y;
+        const node2 = el.current;
+        if (mq && !mq.matches || y <= from || node2 && document.activeElement && node2.contains(document.activeElement)) {
+          run = 0;
+          setHidden(false);
+          return;
+        }
+        if (window.innerHeight !== lastH || performance.now() - resizedAt < 150) {
+          lastH = window.innerHeight;
+          resizedAt = performance.now();
+          run = 0;
+          return;
+        }
+        if (y + window.innerHeight > document.documentElement.scrollHeight + 1) return;
+        run = dy > 0 === run > 0 ? run + dy : dy;
+        if (run > STEP) setHidden(true);
+        else if (run < -STEP) setHidden(false);
+      }
+      let tabbing = false;
+      function disarm() {
+        restore = null;
+      }
+      function onKey(e) {
+        if (e.key !== "Tab" && e.code !== "Tab") {
+          if (e.key !== "Shift") restore = null;
+          return;
+        }
+        tabbing = true;
+        requestAnimationFrame(function() {
+          tabbing = false;
+        });
+      }
+      function reveal() {
+        const n = el.current;
+        if (n && n.classList.contains("is-away")) {
+          n.classList.remove("is-away");
+          if (tabbing) {
+            if (window.scrollY < last) window.scrollTo(window.scrollX, last);
+            else restore = { y: last, until: performance.now() + 400 };
+          }
+        }
+        setHidden(false);
+      }
+      window.addEventListener("scroll", update, { passive: true });
+      window.addEventListener("resize", update);
+      document.addEventListener("keydown", onKey, true);
+      window.addEventListener("wheel", disarm, { passive: true, capture: true });
+      window.addEventListener("touchstart", disarm, { passive: true, capture: true });
+      window.addEventListener("pointerdown", disarm, true);
+      const node = el.current;
+      if (node) node.addEventListener("focusin", reveal);
+      if (mq && mq.addEventListener) mq.addEventListener("change", update);
+      return function() {
+        window.removeEventListener("scroll", update);
+        window.removeEventListener("resize", update);
+        document.removeEventListener("keydown", onKey, true);
+        window.removeEventListener("wheel", disarm, true);
+        window.removeEventListener("touchstart", disarm, true);
+        window.removeEventListener("pointerdown", disarm, true);
+        if (node) node.removeEventListener("focusin", reveal);
+        if (mq && mq.removeEventListener) mq.removeEventListener("change", update);
+      };
+    },
+    [enabled, el, media, from]
+  );
+  return enabled && hidden;
+}
+export {
+  useHideOnScroll
+};

package/dist/esm/strings.js

@@ -127,6 +127,11 @@ const STRINGS = {
     },
     breadcrumbMore: "Show the full path",
     stepError: "has errors",
+    statusDown: "Down",
+    statusProblem: "Problem",
+    statusMaintenance: "Maintenance",
+    statusOk: "OK",
+    statusUnknown: "No data",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }

package/dist/esm/strings.sv.js

@@ -123,6 +123,11 @@ const sv = {
   },
   breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
   stepError: "har fel",
+  statusDown: "Nere",
+  statusProblem: "Problem",
+  statusMaintenance: "Underh\xE5ll",
+  statusOk: "OK",
+  statusUnknown: "Ingen data",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/esm/strings.th.js

@@ -123,6 +123,11 @@ const th = {
   },
   breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   stepError: "\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
+  statusDown: "\u0E25\u0E48\u0E21",
+  statusProblem: "\u0E21\u0E35\u0E1B\u0E31\u0E0D\u0E2B\u0E32",
+  statusMaintenance: "\u0E1B\u0E34\u0E14\u0E1B\u0E23\u0E31\u0E1A\u0E1B\u0E23\u0E38\u0E07",
+  statusOk: "\u0E1B\u0E01\u0E15\u0E34",
+  statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/esm/tiles.js

@@ -0,0 +1,220 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, devWarnOnce } from "./classes.js";
+import { respVars } from "./breakpoints.js";
+import { STRINGS } from "./strings.js";
+import { IconCircleAlert, IconCircleCheck, IconCircleDotDashed, IconTriangleAlert, IconWrench } from "./icons.js";
+const h = React.createElement;
+const STATUS_ICON = {
+  down: IconCircleAlert,
+  problem: IconTriangleAlert,
+  maintenance: IconWrench,
+  ok: IconCircleCheck,
+  unknown: IconCircleDotDashed
+};
+const STATUS_TONE = {
+  down: "danger",
+  problem: "warning",
+  maintenance: "accent",
+  ok: "default",
+  unknown: "default"
+};
+const STATUS_WORD = {
+  down: "statusDown",
+  problem: "statusProblem",
+  maintenance: "statusMaintenance",
+  ok: "statusOk",
+  unknown: "statusUnknown"
+};
+function statusWord(status, t) {
+  return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
+}
+function attrs(props) {
+  const out = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "style" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      out[k] = props[k];
+  });
+  return out;
+}
+const comma = h("span", { className: "aura-status-tile__sep" }, ",");
+function statusTileElement(props, ref, Link, t, titleRef) {
+  const status = STATUS_ICON[props.status] ? props.status : "unknown";
+  if (status !== props.status)
+    devWarnOnce(
+      "status-tile-status-" + String(props.status),
+      'StatusTile status="' + String(props.status) + '" is not down, problem, maintenance, ok or unknown: it shows as unknown ("No data"). Map your value first.'
+    );
+  const valueTone = props.valueTone || STATUS_TONE[status];
+  const word = props.statusLabel || statusWord(status, t);
+  const markers = (props.markers || []).filter(Boolean);
+  const has = function(v) {
+    return v != null && v !== false && v !== "";
+  };
+  const hasValue = has(props.value), hasMeta = has(props.meta);
+  const Tag = props.href ? Link : "div";
+  return h(
+    Tag,
+    Object.assign(attrs(props), {
+      ref,
+      href: props.href,
+      className: cx("aura-status-tile", "aura-status-tile--" + status, props.href && "is-interactive", props.className)
+    }),
+    h(
+      "span",
+      { className: "aura-status-tile__head" },
+      h(Icon, { name: h(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
+      h("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
+      hasValue ? h(
+        "span",
+        { className: cx("aura-status-tile__value", "is-" + valueTone) },
+        props.value,
+        hasMeta || markers.length ? comma : null
+      ) : null
+    ),
+    hasMeta || markers.length ? h(
+      "span",
+      { className: "aura-status-tile__foot" },
+      hasMeta ? h("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
+      markers.length ? h(
+        "span",
+        { className: "aura-status-tile__markers" },
+        markers.map(function(m, i) {
+          return h(
+            "span",
+            {
+              key: i,
+              className: cx("aura-status-tile__marker", "is-" + (m.tone || "neutral")),
+              "data-aura-tip": m.label
+            },
+            h(Icon, { name: m.icon, size: 14 }),
+            h("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
+          );
+        })
+      ) : null
+    ) : null
+  );
+}
+function ServerStatusTile(props) {
+  return statusTileElement(props, void 0, props.linkComponent || "a", STRINGS.en);
+}
+const TileGrid = React.forwardRef(function TileGrid2(props, ref) {
+  const style = Object.assign(
+    {},
+    respVars("aura-grid-cols", props.columns == null ? { base: 2, md: 3 } : props.columns),
+    props.style
+  );
+  return h(
+    "ul",
+    Object.assign(attrs(props), {
+      ref,
+      role: "list",
+      className: cx("aura-grid-layout", "aura-tile-grid", props.className),
+      style
+    }),
+    /* toArray drops null and booleans and keys each element; a Fragment's children are items too. */
+    flat(props.children).map(function(c, i) {
+      return h("li", { key: React.isValidElement(c) && c.key != null ? c.key : i }, c);
+    })
+  );
+});
+function flat(children) {
+  const out = [];
+  React.Children.toArray(children).forEach(function(c) {
+    if (React.isValidElement(c) && c.type === React.Fragment)
+      flat(c.props.children).forEach(function(x) {
+        out.push(React.isValidElement(x) ? React.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
+      });
+    else if (c !== "") out.push(c);
+  });
+  return out;
+}
+const SIZES = { sm: [80, 24], md: [120, 32] };
+const PAD = 2;
+function r(n) {
+  return Math.round(n * 100) / 100;
+}
+function num(v) {
+  return typeof v === "number" && isFinite(v) ? v : null;
+}
+const Sparkline = React.forwardRef(function Sparkline2(props, ref) {
+  const wh = SIZES[props.size || "sm"] || SIZES.sm;
+  const W = wh[0], H = wh[1];
+  const data = (props.data || []).map(num);
+  const n = data.length;
+  const vals = data.filter(function(v) {
+    return v != null;
+  });
+  let lo = num(props.min), hi = num(props.max);
+  if (lo == null) lo = vals.length ? Math.min.apply(null, vals) : 0;
+  if (hi == null) hi = vals.length ? Math.max.apply(null, vals) : 0;
+  if (lo > hi) {
+    const s = lo;
+    lo = hi;
+    hi = s;
+  }
+  const step = n > 1 ? (W - 2 * PAD) / (n - 1) : 0;
+  const x = function(i) {
+    return n > 1 ? PAD + i * step : W / 2;
+  };
+  const y = function(v) {
+    if (hi === lo) return H / 2;
+    const k = Math.max(0, Math.min(1, (v - lo) / (hi - lo)));
+    return H - PAD - k * (H - 2 * PAD);
+  };
+  let d = "";
+  const dots = [];
+  data.forEach(function(v, i) {
+    if (v == null) return;
+    const prev = i > 0 && data[i - 1] != null, next = i < n - 1 && data[i + 1] != null;
+    if (!prev && !next) dots.push(h("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
+    else d += (prev ? "L" : "M") + r(x(i)) + " " + r(y(v));
+  });
+  const mode = props.failures || "none";
+  const fails = [];
+  if (mode !== "none" && props.failed)
+    data.forEach(function(_v, i) {
+      if (!props.failed[i]) return;
+      if (mode === "band") {
+        const w = Math.max(2, step || W), left = Math.max(0, x(i) - w / 2), right = Math.min(W, x(i) + w / 2);
+        fails.push(h("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
+      } else
+        fails.push(
+          h("rect", {
+            key: "f" + i,
+            x: r(Math.max(0, Math.min(W - 1.5, x(i) - 0.75))),
+            y: H - 6,
+            width: 1.5,
+            height: 6
+          })
+        );
+    });
+  const named = !!props.label;
+  return h(
+    "svg",
+    Object.assign(attrs(props), {
+      ref,
+      className: cx("aura-sparkline", "is-" + (props.tone || "neutral"), props.className),
+      width: W,
+      height: H,
+      viewBox: "0 0 " + W + " " + H,
+      role: named ? "img" : void 0,
+      "aria-label": named ? props.label : void 0,
+      "aria-hidden": named ? void 0 : true,
+      focusable: "false"
+    }),
+    fails.length && mode === "band" ? h("g", { className: "aura-sparkline__band" }, fails) : null,
+    d ? h("path", { className: "aura-sparkline__line", d }) : null,
+    dots.length ? h("g", { className: "aura-sparkline__dots" }, dots) : null,
+    fails.length && mode === "ticks" ? h("g", { className: "aura-sparkline__ticks" }, fails) : null
+  );
+});
+export {
+  ServerStatusTile,
+  Sparkline,
+  TileGrid,
+  statusTileElement,
+  statusWord
+};