@lundal/zed-solid 0.0.1

package/dist/index.js

@@ -0,0 +1,969 @@
+import './style.css';
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import { sharedConfig, createRenderEffect, untrack, createComponent, For, createMemo, createSignal, onMount } from "solid-js";
+import { A } from "@solidjs/router";
+const style$1 = "";
+function reconcileArrays(parentNode, a, b) {
+  let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = a[aEnd - 1].nextSibling, map = null;
+  while (aStart < aEnd || bStart < bEnd) {
+    if (a[aStart] === b[bStart]) {
+      aStart++;
+      bStart++;
+      continue;
+    }
+    while (a[aEnd - 1] === b[bEnd - 1]) {
+      aEnd--;
+      bEnd--;
+    }
+    if (aEnd === aStart) {
+      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after;
+      while (bStart < bEnd)
+        parentNode.insertBefore(b[bStart++], node);
+    } else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        if (!map || !map.has(a[aStart]))
+          a[aStart].remove();
+        aStart++;
+      }
+    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+      const node = a[--aEnd].nextSibling;
+      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
+      parentNode.insertBefore(b[--bEnd], node);
+      a[aEnd] = b[bEnd];
+    } else {
+      if (!map) {
+        map = /* @__PURE__ */ new Map();
+        let i = bStart;
+        while (i < bEnd)
+          map.set(b[i], i++);
+      }
+      const index = map.get(a[aStart]);
+      if (index != null) {
+        if (bStart < index && index < bEnd) {
+          let i = aStart, sequence = 1, t;
+          while (++i < aEnd && i < bEnd) {
+            if ((t = map.get(a[i])) == null || t !== index + sequence)
+              break;
+            sequence++;
+          }
+          if (sequence > index - bStart) {
+            const node = a[aStart];
+            while (bStart < index)
+              parentNode.insertBefore(b[bStart++], node);
+          } else
+            parentNode.replaceChild(b[bStart++], a[aStart++]);
+        } else
+          aStart++;
+      } else
+        a[aStart++].remove();
+    }
+  }
+}
+const $$EVENTS = "_$DX_DELEGATE";
+function template(html, isCE, isSVG) {
+  let node;
+  const create = () => {
+    const t = document.createElement("template");
+    t.innerHTML = html;
+    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+  };
+  const fn = isCE ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  fn.cloneNode = fn;
+  return fn;
+}
+function delegateEvents(eventNames, document2 = window.document) {
+  const e = document2[$$EVENTS] || (document2[$$EVENTS] = /* @__PURE__ */ new Set());
+  for (let i = 0, l = eventNames.length; i < l; i++) {
+    const name = eventNames[i];
+    if (!e.has(name)) {
+      e.add(name);
+      document2.addEventListener(name, eventHandler);
+    }
+  }
+}
+function setAttribute(node, name, value) {
+  if (value == null)
+    node.removeAttribute(name);
+  else
+    node.setAttribute(name, value);
+}
+function className(node, value) {
+  if (value == null)
+    node.removeAttribute("class");
+  else
+    node.className = value;
+}
+function style(node, value, prev) {
+  if (!value)
+    return prev ? setAttribute(node, "style") : value;
+  const nodeStyle = node.style;
+  if (typeof value === "string")
+    return nodeStyle.cssText = value;
+  typeof prev === "string" && (nodeStyle.cssText = prev = void 0);
+  prev || (prev = {});
+  value || (value = {});
+  let v, s;
+  for (s in prev) {
+    value[s] == null && nodeStyle.removeProperty(s);
+    delete prev[s];
+  }
+  for (s in value) {
+    v = value[s];
+    if (v !== prev[s]) {
+      nodeStyle.setProperty(s, v);
+      prev[s] = v;
+    }
+  }
+  return prev;
+}
+function use(fn, element, arg) {
+  return untrack(() => fn(element, arg));
+}
+function insert(parent, accessor, marker, initial) {
+  if (marker !== void 0 && !initial)
+    initial = [];
+  if (typeof accessor !== "function")
+    return insertExpression(parent, accessor, initial, marker);
+  createRenderEffect((current) => insertExpression(parent, accessor(), current, marker), initial);
+}
+function eventHandler(e) {
+  const key = `$$${e.type}`;
+  let node = e.composedPath && e.composedPath()[0] || e.target;
+  if (e.target !== node) {
+    Object.defineProperty(e, "target", {
+      configurable: true,
+      value: node
+    });
+  }
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
+  });
+  if (sharedConfig.registry && !sharedConfig.done)
+    sharedConfig.done = _$HY.done = true;
+  while (node) {
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const data = node[`${key}Data`];
+      data !== void 0 ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble)
+        return;
+    }
+    node = node._$host || node.parentNode || node.host;
+  }
+}
+function insertExpression(parent, value, current, marker, unwrapArray) {
+  if (sharedConfig.context) {
+    !current && (current = [...parent.childNodes]);
+    let cleaned = [];
+    for (let i = 0; i < current.length; i++) {
+      const node = current[i];
+      if (node.nodeType === 8 && node.data.slice(0, 2) === "!$")
+        node.remove();
+      else
+        cleaned.push(node);
+    }
+    current = cleaned;
+  }
+  while (typeof current === "function")
+    current = current();
+  if (value === current)
+    return current;
+  const t = typeof value, multi = marker !== void 0;
+  parent = multi && current[0] && current[0].parentNode || parent;
+  if (t === "string" || t === "number") {
+    if (sharedConfig.context)
+      return current;
+    if (t === "number")
+      value = value.toString();
+    if (multi) {
+      let node = current[0];
+      if (node && node.nodeType === 3) {
+        node.data = value;
+      } else
+        node = document.createTextNode(value);
+      current = cleanChildren(parent, current, marker, node);
+    } else {
+      if (current !== "" && typeof current === "string") {
+        current = parent.firstChild.data = value;
+      } else
+        current = parent.textContent = value;
+    }
+  } else if (value == null || t === "boolean") {
+    if (sharedConfig.context)
+      return current;
+    current = cleanChildren(parent, current, marker);
+  } else if (t === "function") {
+    createRenderEffect(() => {
+      let v = value();
+      while (typeof v === "function")
+        v = v();
+      current = insertExpression(parent, v, current, marker);
+    });
+    return () => current;
+  } else if (Array.isArray(value)) {
+    const array = [];
+    const currentArray = current && Array.isArray(current);
+    if (normalizeIncomingArray(array, value, current, unwrapArray)) {
+      createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+      return () => current;
+    }
+    if (sharedConfig.context) {
+      if (!array.length)
+        return current;
+      for (let i = 0; i < array.length; i++) {
+        if (array[i].parentNode)
+          return current = array;
+      }
+    }
+    if (array.length === 0) {
+      current = cleanChildren(parent, current, marker);
+      if (multi)
+        return current;
+    } else if (currentArray) {
+      if (current.length === 0) {
+        appendNodes(parent, array, marker);
+      } else
+        reconcileArrays(parent, current, array);
+    } else {
+      current && cleanChildren(parent);
+      appendNodes(parent, array);
+    }
+    current = array;
+  } else if (value.nodeType) {
+    if (sharedConfig.context && value.parentNode)
+      return current = multi ? [value] : value;
+    if (Array.isArray(current)) {
+      if (multi)
+        return current = cleanChildren(parent, current, marker, value);
+      cleanChildren(parent, current, null, value);
+    } else if (current == null || current === "" || !parent.firstChild) {
+      parent.appendChild(value);
+    } else
+      parent.replaceChild(value, parent.firstChild);
+    current = value;
+  } else
+    console.warn(`Unrecognized value. Skipped inserting`, value);
+  return current;
+}
+function normalizeIncomingArray(normalized, array, current, unwrap) {
+  let dynamic = false;
+  for (let i = 0, len = array.length; i < len; i++) {
+    let item = array[i], prev = current && current[i], t;
+    if (item == null || item === true || item === false)
+      ;
+    else if ((t = typeof item) === "object" && item.nodeType) {
+      normalized.push(item);
+    } else if (Array.isArray(item)) {
+      dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
+    } else if (t === "function") {
+      if (unwrap) {
+        while (typeof item === "function")
+          item = item();
+        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
+      } else {
+        normalized.push(item);
+        dynamic = true;
+      }
+    } else {
+      const value = String(item);
+      if (prev && prev.nodeType === 3 && prev.data === value)
+        normalized.push(prev);
+      else
+        normalized.push(document.createTextNode(value));
+    }
+  }
+  return dynamic;
+}
+function appendNodes(parent, array, marker = null) {
+  for (let i = 0, len = array.length; i < len; i++)
+    parent.insertBefore(array[i], marker);
+}
+function cleanChildren(parent, current, marker, replacement) {
+  if (marker === void 0)
+    return parent.textContent = "";
+  const node = replacement || document.createTextNode("");
+  if (current.length) {
+    let inserted = false;
+    for (let i = current.length - 1; i >= 0; i--) {
+      const el = current[i];
+      if (node !== el) {
+        const isParent = el.parentNode === parent;
+        if (!inserted && !i)
+          isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
+        else
+          isParent && el.remove();
+      } else
+        inserted = true;
+    }
+  } else
+    parent.insertBefore(node, marker);
+  return [node];
+}
+function mergeClasses(a, b) {
+  if (a && b)
+    return `${a} ${b}`;
+  if (a)
+    return a;
+  if (b)
+    return b;
+  return void 0;
+}
+const _tmpl$$k = /* @__PURE__ */ template(`<div>`);
+function App(props) {
+  return (() => {
+    const _el$ = _tmpl$$k();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses(`z-app z-app--layout-${props.layout} z-theme--${props.theme}`, props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$j = /* @__PURE__ */ template(`<button>`);
+function Button(props) {
+  return (() => {
+    const _el$ = _tmpl$$j();
+    _el$.$$click = () => !props.busy && props.onClick();
+    insert(_el$, () => props.label);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses(`z-button z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "aria-busy", _p$._v$3 = _v$3);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+const _tmpl$$i = /* @__PURE__ */ template(`<div>`);
+function Card(props) {
+  return (() => {
+    const _el$ = _tmpl$$i();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-card", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$h = /* @__PURE__ */ template(`<div><input type="checkbox"><label>`);
+function CheckBox(props) {
+  return (() => {
+    const _el$ = _tmpl$$h(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    _el$2.addEventListener("change", () => props.onChange(!props.value));
+    insert(_el$3, () => props.label);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-checkbox", props.class), _v$2 = props.style, _v$3 = props.id, _v$4 = props.invalid, _v$5 = props.errormessage, _v$6 = props.id;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$2, "id", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && setAttribute(_el$2, "aria-invalid", _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && setAttribute(_el$2, "aria-errormessage", _p$._v$5 = _v$5);
+      _v$6 !== _p$._v$6 && setAttribute(_el$3, "for", _p$._v$6 = _v$6);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0,
+      _v$4: void 0,
+      _v$5: void 0,
+      _v$6: void 0
+    });
+    createRenderEffect(() => _el$2.checked = props.value);
+    return _el$;
+  })();
+}
+const _tmpl$$g = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$5 = /* @__PURE__ */ template(`<div class="z-checkbox"><input type="checkbox"><label>`), _tmpl$3$3 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$2 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+function CheckBoxes(props) {
+  return (() => {
+    const _el$ = _tmpl$$g(), _el$2 = _el$.firstChild;
+    insert(_el$2, () => props.label);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.options;
+      },
+      children: (option, index) => (() => {
+        const _el$3 = _tmpl$2$5(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        _el$4.addEventListener("change", () => option.onChange(!option.value));
+        insert(_el$5, () => option.label);
+        createRenderEffect((_p$) => {
+          const _v$3 = `${props.id}-${index()}`, _v$4 = !!props.error, _v$5 = props.error ? `${props.id}-error` : void 0, _v$6 = `${props.id}-${index()}`;
+          _v$3 !== _p$._v$3 && setAttribute(_el$4, "id", _p$._v$3 = _v$3);
+          _v$4 !== _p$._v$4 && setAttribute(_el$4, "aria-invalid", _p$._v$4 = _v$4);
+          _v$5 !== _p$._v$5 && setAttribute(_el$4, "aria-errormessage", _p$._v$5 = _v$5);
+          _v$6 !== _p$._v$6 && setAttribute(_el$5, "for", _p$._v$6 = _v$6);
+          return _p$;
+        }, {
+          _v$3: void 0,
+          _v$4: void 0,
+          _v$5: void 0,
+          _v$6: void 0
+        });
+        createRenderEffect(() => _el$4.checked = option.value);
+        return _el$3;
+      })()
+    }), null);
+    insert(_el$, (() => {
+      const _c$ = createMemo(() => !!props.error);
+      return () => _c$() && (() => {
+        const _el$6 = _tmpl$3$3();
+        insert(_el$6, () => props.error);
+        createRenderEffect(() => setAttribute(_el$6, "id", `${props.id}-error`));
+        return _el$6;
+      })();
+    })(), null);
+    insert(_el$, (() => {
+      const _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      return () => _c$2() && _tmpl$4$2();
+    })(), null);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-fieldset", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$f = /* @__PURE__ */ template(`<div>`);
+function Column(props) {
+  return (() => {
+    const _el$ = _tmpl$$f();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-column", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$e = /* @__PURE__ */ template(`<dialog>`);
+function Dialog(props) {
+  const [wasOutside, setWasOutside] = createSignal(false);
+  function isOutside(e) {
+    const rect = e.target.getBoundingClientRect();
+    return e.clientX <= rect.left || e.clientX >= rect.right || e.clientY <= rect.top || e.clientY >= rect.bottom;
+  }
+  let dialog;
+  onMount(() => {
+    dialog == null ? void 0 : dialog.showModal();
+    dialog == null ? void 0 : dialog.classList.add("z-dialog--open");
+  });
+  function close() {
+    dialog == null ? void 0 : dialog.classList.remove("z-dialog--open");
+    setTimeout(() => {
+      dialog == null ? void 0 : dialog.close();
+      props.onClose();
+    }, 100);
+  }
+  return (() => {
+    const _el$ = _tmpl$$e();
+    _el$.$$click = (e) => {
+      if (wasOutside() && isOutside(e)) {
+        e.preventDefault();
+        close();
+      }
+    };
+    _el$.$$mousedown = (e) => {
+      setWasOutside(isOutside(e));
+    };
+    _el$.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      close();
+    });
+    const _ref$ = dialog;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : dialog = _el$;
+    insert(_el$, () => props.children(close));
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-dialog", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["mousedown", "click"]);
+const _tmpl$$d = /* @__PURE__ */ template(`<div>`), _tmpl$2$4 = /* @__PURE__ */ template(`<label>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+function Field(props) {
+  return (() => {
+    const _el$ = _tmpl$$d();
+    insert(_el$, (() => {
+      const _c$ = createMemo(() => !!props.label);
+      return () => _c$() && (() => {
+        const _el$2 = _tmpl$2$4();
+        insert(_el$2, () => props.label);
+        createRenderEffect(() => setAttribute(_el$2, "for", props.id));
+        return _el$2;
+      })();
+    })(), null);
+    insert(_el$, () => props.children(() => ({
+      id: props.id,
+      invalid: !!props.error,
+      errorId: props.error ? `${props.id}-error` : void 0
+    })), null);
+    insert(_el$, (() => {
+      const _c$2 = createMemo(() => !!props.error);
+      return () => _c$2() && (() => {
+        const _el$3 = _tmpl$3$2();
+        insert(_el$3, () => props.error);
+        createRenderEffect(() => setAttribute(_el$3, "id", `${props.id}-error`));
+        return _el$3;
+      })();
+    })(), null);
+    insert(_el$, (() => {
+      const _c$3 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      return () => _c$3() && _tmpl$4$1();
+    })(), null);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-field", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$c = /* @__PURE__ */ template(`<div>`);
+function Form(props) {
+  return (() => {
+    const _el$ = _tmpl$$c();
+    _el$.addEventListener("submit", (event) => {
+      event.preventDefault();
+      props.onSubmit();
+    });
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = props.class, _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$b = /* @__PURE__ */ template(`<header><a class="z-header--app" href="/"><span></span></a><div class="z-header--buttons">`);
+function Header(props) {
+  return (() => {
+    const _el$ = _tmpl$$b(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    insert(_el$2, () => props.appIcon, _el$3);
+    insert(_el$3, () => props.appName);
+    insert(_el$4, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-header", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$a = /* @__PURE__ */ template(`<h1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<h2>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h3>`);
+function H1(props) {
+  return (() => {
+    const _el$ = _tmpl$$a();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-" + (props.lookLike ?? "h1"), props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+function H2(props) {
+  return (() => {
+    const _el$2 = _tmpl$2$3();
+    insert(_el$2, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$3 = mergeClasses("z-" + (props.lookLike ?? "h2"), props.class), _v$4 = props.style;
+      _v$3 !== _p$._v$3 && className(_el$2, _p$._v$3 = _v$3);
+      _p$._v$4 = style(_el$2, _v$4, _p$._v$4);
+      return _p$;
+    }, {
+      _v$3: void 0,
+      _v$4: void 0
+    });
+    return _el$2;
+  })();
+}
+function H3(props) {
+  return (() => {
+    const _el$3 = _tmpl$3$1();
+    insert(_el$3, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$5 = mergeClasses("z-" + (props.lookLike ?? "h3"), props.class), _v$6 = props.style;
+      _v$5 !== _p$._v$5 && className(_el$3, _p$._v$5 = _v$5);
+      _p$._v$6 = style(_el$3, _v$6, _p$._v$6);
+      return _p$;
+    }, {
+      _v$5: void 0,
+      _v$6: void 0
+    });
+    return _el$3;
+  })();
+}
+const _tmpl$$9 = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill="currentColor"></svg>`, false, true);
+function Icon(props) {
+  const data = createMemo(() => {
+    const [width, height, , , paths] = props.definition.icon;
+    return {
+      width,
+      height,
+      paths: Array.isArray(paths) ? paths : [paths]
+    };
+  });
+  return (() => {
+    const _el$ = _tmpl$$9();
+    insert(_el$, createComponent(For, {
+      get each() {
+        return data().paths;
+      },
+      children: (path) => (() => {
+        const _el$2 = _tmpl$2$2();
+        setAttribute(_el$2, "d", path);
+        return _el$2;
+      })()
+    }));
+    createRenderEffect((_p$) => {
+      const _v$ = props.class, _v$2 = props.style, _v$3 = `0 0 ${data().width} ${data().height}`;
+      _v$ !== _p$._v$ && setAttribute(_el$, "class", _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "viewBox", _p$._v$3 = _v$3);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$8 = /* @__PURE__ */ template(`<button>`);
+function IconButton(props) {
+  return (() => {
+    const _el$ = _tmpl$$8();
+    _el$.$$click = () => !props.busy && props.onClick();
+    insert(_el$, () => props.icon);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses(`z-button z-button--icon z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.label, _v$5 = props.label;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "aria-busy", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && setAttribute(_el$, "aria-label", _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && setAttribute(_el$, "title", _p$._v$5 = _v$5);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0,
+      _v$4: void 0,
+      _v$5: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+function Link(props) {
+  return createComponent(A, {
+    get ["class"]() {
+      return mergeClasses("z-link", props.class);
+    },
+    get style() {
+      return props.style;
+    },
+    activeClass: "",
+    inactiveClass: "",
+    get href() {
+      return props.href;
+    },
+    end: true,
+    get children() {
+      return props.children;
+    }
+  });
+}
+const _tmpl$$7 = /* @__PURE__ */ template(`<nav>`);
+function Nav(props) {
+  return (() => {
+    const _el$ = _tmpl$$7();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-nav", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$6 = /* @__PURE__ */ template(`<div>`);
+function NavHeader(props) {
+  return (() => {
+    const _el$ = _tmpl$$6();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-nav--header", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$5 = /* @__PURE__ */ template(`<span>`);
+function NavLink(props) {
+  return createComponent(A, {
+    get ["class"]() {
+      return mergeClasses("z-nav--link", props.class);
+    },
+    get style() {
+      return props.style;
+    },
+    activeClass: "z-nav--link-active",
+    inactiveClass: "",
+    get href() {
+      return props.href;
+    },
+    end: true,
+    get children() {
+      return [createMemo(() => props.icon), (() => {
+        const _el$ = _tmpl$$5();
+        insert(_el$, () => props.text);
+        return _el$;
+      })()];
+    }
+  });
+}
+const _tmpl$$4 = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class="z-radiobutton"><input type="radio"><label>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+function RadioButtons(props) {
+  return (() => {
+    const _el$ = _tmpl$$4(), _el$2 = _el$.firstChild;
+    insert(_el$2, () => props.label);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.options;
+      },
+      children: (option, index) => (() => {
+        const _el$3 = _tmpl$2$1(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        _el$4.addEventListener("change", () => props.onChange(option.value));
+        insert(_el$5, () => option.label);
+        createRenderEffect((_p$) => {
+          const _v$3 = props.id, _v$4 = `${props.id}-${index()}`, _v$5 = !!props.error, _v$6 = props.error ? `${props.id}-error` : void 0, _v$7 = `${props.id}-${index()}`;
+          _v$3 !== _p$._v$3 && setAttribute(_el$4, "name", _p$._v$3 = _v$3);
+          _v$4 !== _p$._v$4 && setAttribute(_el$4, "id", _p$._v$4 = _v$4);
+          _v$5 !== _p$._v$5 && setAttribute(_el$4, "aria-invalid", _p$._v$5 = _v$5);
+          _v$6 !== _p$._v$6 && setAttribute(_el$4, "aria-errormessage", _p$._v$6 = _v$6);
+          _v$7 !== _p$._v$7 && setAttribute(_el$5, "for", _p$._v$7 = _v$7);
+          return _p$;
+        }, {
+          _v$3: void 0,
+          _v$4: void 0,
+          _v$5: void 0,
+          _v$6: void 0,
+          _v$7: void 0
+        });
+        createRenderEffect(() => _el$4.checked = option.value === props.value);
+        return _el$3;
+      })()
+    }), null);
+    insert(_el$, (() => {
+      const _c$ = createMemo(() => !!props.error);
+      return () => _c$() && (() => {
+        const _el$6 = _tmpl$3();
+        insert(_el$6, () => props.error);
+        createRenderEffect(() => setAttribute(_el$6, "id", `${props.id}-error`));
+        return _el$6;
+      })();
+    })(), null);
+    insert(_el$, (() => {
+      const _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      return () => _c$2() && _tmpl$4();
+    })(), null);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-fieldset", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$3 = /* @__PURE__ */ template(`<div>`);
+function Row(props) {
+  return (() => {
+    const _el$ = _tmpl$$3();
+    insert(_el$, () => props.children);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-row", props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$$2 = /* @__PURE__ */ template(`<select>`), _tmpl$2 = /* @__PURE__ */ template(`<option>`);
+function Select(props) {
+  return (() => {
+    const _el$ = _tmpl$$2();
+    _el$.addEventListener("change", (e) => {
+      const option = props.options[Number(e.target.value)];
+      props.onChange(option.value);
+    });
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.options;
+      },
+      children: (option, index) => (() => {
+        const _el$2 = _tmpl$2();
+        insert(_el$2, () => option.label);
+        createRenderEffect(() => _el$2.value = index());
+        return _el$2;
+      })()
+    }));
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-select", props.class), _v$2 = props.style, _v$3 = props.id, _v$4 = props.invalid, _v$5 = props.errorId;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "id", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && setAttribute(_el$, "aria-invalid", _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && setAttribute(_el$, "aria-errormessage", _p$._v$5 = _v$5);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0,
+      _v$4: void 0,
+      _v$5: void 0
+    });
+    createRenderEffect(() => _el$.value = props.options.findIndex((it) => it.value === props.value));
+    return _el$;
+  })();
+}
+const _tmpl$$1 = /* @__PURE__ */ template(`<div>`);
+function Spinner(props) {
+  return (() => {
+    const _el$ = _tmpl$$1();
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses(`z-spinner z-spinner--${props.size ?? "normal"}`, props.class), _v$2 = props.style;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
+    return _el$;
+  })();
+}
+const _tmpl$ = /* @__PURE__ */ template(`<input>`);
+function TextBox(props) {
+  return (() => {
+    const _el$ = _tmpl$();
+    _el$.$$input = (e) => props.onChange(e.target.value);
+    createRenderEffect((_p$) => {
+      const _v$ = mergeClasses("z-textbox", props.class), _v$2 = props.style, _v$3 = props.hidden ? "password" : "text", _v$4 = props.id, _v$5 = props.invalid, _v$6 = props.errorId;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      _v$3 !== _p$._v$3 && setAttribute(_el$, "type", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && setAttribute(_el$, "id", _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && setAttribute(_el$, "aria-invalid", _p$._v$5 = _v$5);
+      _v$6 !== _p$._v$6 && setAttribute(_el$, "aria-errormessage", _p$._v$6 = _v$6);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0,
+      _v$4: void 0,
+      _v$5: void 0,
+      _v$6: void 0
+    });
+    createRenderEffect(() => _el$.value = props.value);
+    return _el$;
+  })();
+}
+delegateEvents(["input"]);
+export {
+  App,
+  Button,
+  Card,
+  CheckBox,
+  CheckBoxes,
+  Column,
+  Dialog,
+  Field,
+  Form,
+  H1,
+  H2,
+  H3,
+  Header,
+  Icon,
+  IconButton,
+  Link,
+  Nav,
+  NavHeader,
+  NavLink,
+  RadioButtons,
+  Row,
+  Select,
+  Spinner,
+  TextBox
+};