coles-solid-library 0.0.1

package/dist/index.esm.js

@@ -0,0 +1,1848 @@
+import { sharedConfig, createRenderEffect, untrack, getOwner, createEffect, runWithOwner, createMemo, createSignal, createRoot, onCleanup, mergeProps, createComponent, Show, onMount, For, splitProps, createContext, useContext, children } from 'solid-js';
+
+const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
+const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
+const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  class: "className",
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  }
+});
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
+}
+const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
+const SVGNamespace = {
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace"
+};
+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 = 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, isImportNode, isSVG, isMathML) {
+  let node;
+  const create = () => {
+    const t = document.createElement("template");
+    t.innerHTML = html;
+    return t.content.firstChild;
+  };
+  const fn = () => (node || (node = create())).cloneNode(true);
+  fn.cloneNode = fn;
+  return fn;
+}
+function delegateEvents(eventNames, document = window.document) {
+  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
+  for (let i = 0, l = eventNames.length; i < l; i++) {
+    const name = eventNames[i];
+    if (!e.has(name)) {
+      e.add(name);
+      document.addEventListener(name, eventHandler);
+    }
+  }
+}
+function setAttribute(node, name, value) {
+  if (isHydrating(node)) return;
+  if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
+}
+function setAttributeNS(node, namespace, name, value) {
+  if (isHydrating(node)) return;
+  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+}
+function setBoolAttribute(node, name, value) {
+  if (isHydrating(node)) return;
+  value ? node.setAttribute(name, "") : node.removeAttribute(name);
+}
+function className(node, value) {
+  if (isHydrating(node)) return;
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
+function addEventListener(node, name, handler, delegate) {
+  if (delegate) {
+    if (Array.isArray(handler)) {
+      node[`$$${name}`] = handler[0];
+      node[`$$${name}Data`] = handler[1];
+    } else node[`$$${name}`] = handler;
+  } else if (Array.isArray(handler)) {
+    const handlerFn = handler[0];
+    node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
+  } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
+}
+function classList(node, value, prev = {}) {
+  const classKeys = Object.keys(value || {}),
+    prevKeys = Object.keys(prev);
+  let i, len;
+  for (i = 0, len = prevKeys.length; i < len; i++) {
+    const key = prevKeys[i];
+    if (!key || key === "undefined" || value[key]) continue;
+    toggleClassKey(node, key, false);
+    delete prev[key];
+  }
+  for (i = 0, len = classKeys.length; i < len; i++) {
+    const key = classKeys[i],
+      classValue = !!value[key];
+    if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
+    toggleClassKey(node, key, true);
+    prev[key] = classValue;
+  }
+  return prev;
+}
+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 = undefined);
+  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 spread(node, props = {}, isSVG, skipChildren) {
+  const prevProps = {};
+  if (!skipChildren) {
+    createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+  }
+  createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node));
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
+  return prevProps;
+}
+function use(fn, element, arg) {
+  return untrack(() => fn(element, arg));
+}
+function insert(parent, accessor, marker, initial) {
+  if (marker !== undefined && !initial) initial = [];
+  if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+  createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
+}
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props);
+    }
+  }
+  for (const prop in props) {
+    if (prop === "children") {
+      continue;
+    }
+    const value = props[prop];
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
+  }
+}
+function isHydrating(node) {
+  return !!sharedConfig.context && !sharedConfig.done && (!node || node.isConnected);
+}
+function toPropertyName(name) {
+  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
+}
+function toggleClassKey(node, key, value) {
+  const classNames = key.trim().split(/\s+/);
+  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
+}
+function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
+  let isCE, isProp, isChildProp, propAlias, forceProp;
+  if (prop === "style") return style(node, value, prev);
+  if (prop === "classList") return classList(node, value, prev);
+  if (value === prev) return prev;
+  if (prop === "ref") {
+    if (!skipRef) value(node);
+  } else if (prop.slice(0, 3) === "on:") {
+    const e = prop.slice(3);
+    prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
+    value && node.addEventListener(e, value, typeof value !== "function" && value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    const e = prop.slice(10);
+    prev && node.removeEventListener(e, prev, true);
+    value && node.addEventListener(e, value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    if (!delegate && prev) {
+      const h = Array.isArray(prev) ? prev[0] : prev;
+      node.removeEventListener(name, h);
+    }
+    if (delegate || value) {
+      addEventListener(node, name, value, delegate);
+      delegate && delegateEvents([name]);
+    }
+  } else if (prop.slice(0, 5) === "attr:") {
+    setAttribute(node, prop.slice(5), value);
+  } else if (prop.slice(0, 5) === "bool:") {
+    setBoolAttribute(node, prop.slice(5), value);
+  } else if ((forceProp = prop.slice(0, 5) === "prop:") || (isChildProp = ChildProperties.has(prop)) || !isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-") || "is" in props)) {
+    if (forceProp) {
+      prop = prop.slice(5);
+      isProp = true;
+    } else if (isHydrating(node)) return value;
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
+  } else {
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
+  }
+  return value;
+}
+function eventHandler(e) {
+  if (sharedConfig.registry && sharedConfig.events) {
+    if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
+  }
+  let node = e.target;
+  const key = `$$${e.type}`;
+  const oriTarget = e.target;
+  const oriCurrentTarget = e.currentTarget;
+  const retarget = value => Object.defineProperty(e, "target", {
+    configurable: true,
+    value
+  });
+  const handleNode = () => {
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const data = node[`${key}Data`];
+      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble) return;
+    }
+    node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
+    return true;
+  };
+  const walkUpTree = () => {
+    while (handleNode() && (node = node._$host || node.parentNode || node.host));
+  };
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
+  });
+  if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
+  if (e.composedPath) {
+    const path = e.composedPath();
+    retarget(path[0]);
+    for (let i = 0; i < path.length - 2; i++) {
+      node = path[i];
+      if (!handleNode()) break;
+      if (node._$host) {
+        node = node._$host;
+        walkUpTree();
+        break;
+      }
+      if (node.parentNode === oriCurrentTarget) {
+        break;
+      }
+    }
+  } else walkUpTree();
+  retarget(oriTarget);
+}
+function insertExpression(parent, value, current, marker, unwrapArray) {
+  const hydrating = isHydrating(parent);
+  if (hydrating) {
+    !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 !== undefined;
+  parent = multi && current[0] && current[0].parentNode || parent;
+  if (t === "string" || t === "number") {
+    if (hydrating) return current;
+    if (t === "number") {
+      value = value.toString();
+      if (value === current) return current;
+    }
+    if (multi) {
+      let node = current[0];
+      if (node && node.nodeType === 3) {
+        node.data !== value && (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 (hydrating) 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 (hydrating) {
+      if (!array.length) return current;
+      if (marker === undefined) return current = [...parent.childNodes];
+      let node = array[0];
+      if (node.parentNode !== parent) return current;
+      const nodes = [node];
+      while ((node = node.nextSibling) !== marker) nodes.push(node);
+      return current = nodes;
+    }
+    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 (hydrating && 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 ;
+  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[normalized.length],
+      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 === undefined) 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];
+}
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function createElement(tagName, isSVG = false) {
+  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName);
+}
+function Portal(props) {
+  const {
+      useShadow
+    } = props,
+    marker = document.createTextNode(""),
+    mount = () => props.mount || document.body,
+    owner = getOwner();
+  let content;
+  let hydrating = !!sharedConfig.context;
+  createEffect(() => {
+    if (hydrating) getOwner().user = hydrating = false;
+    content || (content = runWithOwner(owner, () => createMemo(() => props.children)));
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = createSignal(false);
+      const cleanup = () => setClean(true);
+      createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      onCleanup(cleanup);
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      onCleanup(() => el.removeChild(container));
+    }
+  }, undefined, {
+    render: !hydrating
+  });
+  return marker;
+}
+
+var _tmpl$$d = /*#__PURE__*/template(`<button>`);
+const Button = props => {
+  const styleTypeConst = props.styleType ?? "accent";
+  return (() => {
+    var _el$ = _tmpl$$d();
+    spread(_el$, mergeProps(props, {
+      "onClick": e => {
+        if (props.onClick) props.onClick(e);
+      },
+      get ["class"]() {
+        return `.${styleTypeConst} .customButtonStyle ${props.transparent ? '.transparent' : ""} ${props.class ?? ""} `;
+      }
+    }), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
+  })();
+};
+
+var _tmpl$$c = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$7 = /*#__PURE__*/template(`<span>:`),
+  _tmpl$3$4 = /*#__PURE__*/template(`<span><span>`);
+const Chip = props => {
+  const hoverChip = props.onClick ? '.hover' : "";
+  return (() => {
+    var _el$ = _tmpl$3$4(),
+      _el$4 = _el$.firstChild;
+    addEventListener(_el$, "click", props.onClick, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !!props.key;
+      },
+      get children() {
+        return [(() => {
+          var _el$2 = _tmpl$$c();
+          insert(_el$2, () => props.key);
+          return _el$2;
+        })(), _tmpl$2$7()];
+      }
+    }), _el$4);
+    insert(_el$4, () => '  ' + props.value);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !!props.remove;
+      },
+      get children() {
+        return createComponent(Button, {
+          "class": `'.hover' .removeChipButton`,
+          get onClick() {
+            return props.remove;
+          },
+          children: "X"
+        });
+      }
+    }), null);
+    createRenderEffect(() => className(_el$, `.accent .Chip ${props.class ?? ""} ${hoverChip}`));
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+
+var _tmpl$$b = /*#__PURE__*/template(`<span class=.leftArrow>`),
+  _tmpl$2$6 = /*#__PURE__*/template(`<span>`),
+  _tmpl$3$3 = /*#__PURE__*/template(`<span class=.rightArrow>`),
+  _tmpl$4$3 = /*#__PURE__*/template(`<div class=.chipbar><div class=.chipContainer>`);
+const Chipbar = props => {
+  const [chipContainer, setChipContainer] = createSignal();
+  const [showLeft, setShowLeft] = createSignal(false);
+  const [showRight, setShowRight] = createSignal(false);
+  const scrollFunction = e => {
+    setShowRight(chipContainer()?.scrollLeft !== chipContainer().scrollWidth - chipContainer().clientWidth);
+    setShowLeft(chipContainer().scrollLeft > 0);
+    if (chipContainer().scrollLeft <= 0) {
+      setShowLeft(false);
+    }
+  };
+  onMount(() => {
+    if (chipContainer()) {
+      chipContainer().addEventListener("scroll", scrollFunction);
+    }
+  });
+  onCleanup(() => {
+    if (chipContainer()) {
+      chipContainer().removeEventListener("scroll", scrollFunction);
+    }
+  });
+  createRenderEffect(() => {
+    if (props.chips().length > 0) {
+      scrollFunction();
+    }
+  });
+  const scrollLeft = () => {
+    chipContainer().scrollLeft -= 100;
+    scrollFunction();
+  };
+  const scrollRight = () => {
+    chipContainer().scrollLeft += 100;
+    scrollFunction();
+    setShowLeft(true);
+  };
+  return createComponent(Show, {
+    get when() {
+      return props.chips().length > 0;
+    },
+    get children() {
+      var _el$ = _tmpl$4$3(),
+        _el$3 = _el$.firstChild;
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return showLeft();
+        },
+        get children() {
+          var _el$2 = _tmpl$$b();
+          insert(_el$2, createComponent(Button, {
+            onClick: scrollLeft,
+            children: "\u2190"
+          }));
+          return _el$2;
+        }
+      }), _el$3);
+      use(setChipContainer, _el$3);
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return props.chips().length > 1;
+        },
+        get children() {
+          var _el$4 = _tmpl$2$6();
+          insert(_el$4, createComponent(Button, {
+            onClick: () => props.setChips ? props.setChips([]) : null,
+            children: "Clear All"
+          }));
+          return _el$4;
+        }
+      }), null);
+      insert(_el$3, createComponent(For, {
+        get each() {
+          return props.chips();
+        },
+        children: (chip, i) => createComponent(Chip, {
+          get key() {
+            return chip.key;
+          },
+          get value() {
+            return chip.value;
+          },
+          get remove() {
+            return props.chips().length > 0 ? () => props.setChips ? props.setChips(old => [...old].filter((x, index) => index !== i())) : null : undefined;
+          }
+        })
+      }), null);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return showRight();
+        },
+        get children() {
+          var _el$5 = _tmpl$3$3();
+          insert(_el$5, createComponent(Button, {
+            onClick: scrollRight,
+            children: "\u2192"
+          }));
+          return _el$5;
+        }
+      }), null);
+      return _el$;
+    }
+  });
+};
+
+var _tmpl$$a = /*#__PURE__*/template(`<div>`);
+const Body = props => {
+  const [customProps, normalProps] = splitProps(props, ["children", "class", 'style']);
+  return (() => {
+    var _el$ = _tmpl$$a();
+    spread(_el$, mergeProps(normalProps, {
+      get ["class"]() {
+        return `${customProps.style} .compBody ${customProps.class ?? ""}`;
+      }
+    }), false, true);
+    insert(_el$, () => customProps.children);
+    return _el$;
+  })();
+};
+
+const FormFieldContext = createContext({
+  getName: () => "",
+  setName: () => {},
+  getTextInside: () => true,
+  setTextInside: () => {},
+  getFocused: () => false,
+  setFocused: () => {},
+  getValue: () => "",
+  setValue: () => {},
+  getFieldType: () => "",
+  setFieldType: () => {}
+});
+const Provider = props => {
+  const [getName, setName] = createSignal(props.name ?? "");
+  const [getTextInside, setTextInside] = createSignal(false);
+  const [getFocused, setFocused] = createSignal(false);
+  const [getValue, setValue] = createSignal(props.value ?? "");
+  const [getFieldType, setFieldType] = createSignal(props.type ?? "text");
+  return createComponent(FormFieldContext.Provider, {
+    value: {
+      getName,
+      setName,
+      getTextInside,
+      setTextInside,
+      getFocused,
+      setFocused,
+      getValue,
+      setValue,
+      getFieldType,
+      setFieldType
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+function useFormProvider() {
+  const context = useContext(FormFieldContext);
+  return context;
+}
+
+function useClickOutside(ref, handler) {
+  const listener = e => {
+    if (ref() && !ref().contains(e.target)) handler(e);
+  };
+  document.addEventListener("mousedown", listener);
+  return () => document.removeEventListener("mousedown", listener);
+}
+function isNullish(params) {
+  return params === null || params === undefined;
+}
+
+var _tmpl$$9 = /*#__PURE__*/template(`<fieldset><legend>`);
+const FormField = props => {
+  return createComponent(Provider, {
+    get name() {
+      return props.name;
+    },
+    get children() {
+      return createComponent(FormField2, props);
+    }
+  });
+};
+const FormField2 = props => {
+  const [local, others] = splitProps(props, ["children", "styleType", "name", "class", "value", "legendClass"]);
+  const context = useFormProvider();
+  const hasInsideText = createMemo(() => !context.getValue() && !context.getFocused() && !context.getTextInside());
+  // -- context -- 
+  const theChildren = children(() => props.children);
+  const [fieldRef, setFieldRef] = createSignal();
+  useClickOutside(fieldRef, () => {
+    context.setTextInside(!!context.getValue().trim());
+    context.setFocused(false);
+  });
+  createRenderEffect(() => {
+    context.setName(props.name);
+  });
+  return (() => {
+    var _el$ = _tmpl$$9(),
+      _el$2 = _el$.firstChild;
+    use(setFieldRef, _el$);
+    spread(_el$, mergeProps(others, {
+      "onClick": () => context.setFocused(true),
+      get ["class"]() {
+        return `.${local.styleType ?? "accent"} .formField ${local.class ?? ''}`;
+      }
+    }), false, true);
+    insert(_el$2, (() => {
+      var _c$ = createMemo(() => !!context.getName());
+      return () => _c$() ? context.getName() : ``;
+    })());
+    insert(_el$, theChildren, null);
+    createRenderEffect(() => className(_el$2, `${hasInsideText() ? `.moveLegendInside` : ``} ${local?.legendClass ?? ''}`));
+    return _el$;
+  })();
+};
+
+var _tmpl$$8 = /*#__PURE__*/template(`<input>`);
+const Input = props => {
+  const [customProps, normalProps] = splitProps(props, ["tooltip", "transparent", "value", "onChange"]);
+  const noTransparent = type => "checkbox" !== (type ?? "text");
+  const context = useFormProvider();
+  const inputValue = createMemo(() => props.value);
+  const hasTrasparent = createMemo(() => {
+    return Object.keys(customProps).includes("transparent");
+  });
+  createEffect(() => {
+    if (Object.keys(props).includes("required") || props?.required === true) {
+      context.setName(old => `${old} *`);
+    } else {
+      context.setName(old => old);
+    }
+  });
+  onMount(() => {
+    if (!isNullish(context.getName)) {
+      context.setFieldType(props.type ?? "text");
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$$8();
+    spread(_el$, mergeProps(normalProps, {
+      get placeholder() {
+        return createMemo(() => !!(!!context.getName() && !context.getTextInside() && !context.getFocused()))() ? context.getName() : props.placeholder;
+      },
+      get value() {
+        return inputValue();
+      },
+      "onFocus": e => {
+        if (!isNullish(context.getName)) {
+          context.setFocused(true);
+        }
+      },
+      "onBlur": e => {
+        if (!isNullish(context.getName)) {
+          context.setFocused(false);
+        }
+      },
+      get type() {
+        return createMemo(() => context.getFieldType().length > 0)() ? context.getFieldType() : props.type;
+      },
+      "onChange": e => {
+        if (!isNullish(context.getName)) {
+          if (e.currentTarget.value.trim()) {
+            context.setValue(e.currentTarget.value);
+            context.setTextInside(true);
+          } else {
+            if (props.type === "checkbox") {
+              context.setValue(e.currentTarget.checked ? "true" : "");
+              context.setTextInside(e.currentTarget.checked);
+            } else {
+              context.setValue("");
+              context.setTextInside(false);
+            }
+          }
+        }
+        if (props.onChange) props.onChange(e);
+      },
+      get ["class"]() {
+        return `input ${hasTrasparent() && noTransparent(normalProps.type) ? 'transparent' : ""} ${props.class ?? ""}`;
+      },
+      get title() {
+        return customProps.tooltip;
+      }
+    }), false, false);
+    return _el$;
+  })();
+};
+
+var _tmpl$$7 = /*#__PURE__*/template(`<span class=solid-select__placeholder>`),
+  _tmpl$2$5 = /*#__PURE__*/template(`<span>`),
+  _tmpl$3$2 = /*#__PURE__*/template(`<span class=solid-select__arrow>▲`),
+  _tmpl$4$2 = /*#__PURE__*/template(`<span class=solid-select__arrow>▼`),
+  _tmpl$5$1 = /*#__PURE__*/template(`<div>`),
+  _tmpl$6 = /*#__PURE__*/template(`<div tabindex=0><div><span class=solid-select__value>`);
+const SelectContext = createContext();
+function Select(props) {
+  const isMultiple = Object.keys(props).includes("multiple") || props.multiple === true ? !!props.multiple : false;
+  // Internal state for selected value(s). Use provided value or defaultValue or an initial default.
+  const currStyle = props.style ?? "accent";
+  const defaultSelected = isMultiple ? props.value ?? props.defaultValue ?? [] : props.value ?? props.defaultValue ?? undefined;
+  const [selected, setSelected] = createSignal(defaultSelected);
+  const [selectRef, setSelectRef] = createSignal();
+  const [dropdownRef, setDropdownRef] = createSignal();
+  // Update internal state if `value` prop changes (controlled mode)
+  createEffect(() => {
+    if (!isNullish(props.value)) {
+      setSelected(() => props.value);
+    }
+  });
+  // Signal for dropdown open/closed
+  const [open, setOpen] = createSignal(false);
+  // Map of option value to label (JSX) for displaying selected labels
+  const optionsMap = new Map();
+  const registerOption = (val, label) => {
+    optionsMap.set(val, label);
+  };
+  const unregisterOption = val => {
+    optionsMap.delete(val);
+  };
+  // Helper to check if a value is selected (for Option highlighting)
+  const isSelected = val => {
+    const current = selected();
+    return isMultiple ? Array.isArray(current) && current.includes(val) : current === val;
+  };
+  // Function to handle selecting/toggling an option
+  const selectValue = val => {
+    if (isMultiple) {
+      // For multi-select, toggle the value in the array
+      const current = selected() ?? [];
+      let newSelected;
+      console.log('current', current, val);
+      if (current.includes(val)) {
+        newSelected = current.filter(item => item !== val);
+      } else {
+        newSelected = [...current, val];
+      }
+      console.log('newSelected', newSelected);
+      setSelected(newSelected);
+      props.onChange?.(newSelected);
+    } else {
+      setSelected(() => val);
+      props.onChange?.(val);
+      setOpen(false);
+    }
+  };
+  const toggleOpen = () => {
+    setOpen(!open());
+  };
+  onMount(() => {
+    const handleOutsideClick = e => {
+      if (open() && dropdownRef() && !dropdownRef().contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    onCleanup(() => document.removeEventListener("mousedown", handleOutsideClick));
+  });
+  // Compute the content to display in the closed select (trigger area)
+  const displayValue = createMemo(() => {
+    const current = selected();
+    if (isMultiple) {
+      const selectedArray = Array.isArray(current) ? current : [];
+      if (selectedArray.length === 0) {
+        return (() => {
+          var _el$ = _tmpl$$7();
+          insert(_el$, () => props.placeholder || "Select...");
+          return _el$;
+        })();
+      }
+      if (props.renderValue) {
+        return props.renderValue(selectedArray);
+      } else {
+        const labels = selectedArray.map(val => optionsMap.get(val) || String(val));
+        return (() => {
+          var _el$2 = _tmpl$2$5();
+          insert(_el$2, () => labels.join(", "));
+          return _el$2;
+        })();
+      }
+    } else {
+      // Single selection
+      const singleVal = current;
+      if (singleVal === undefined || singleVal === null) {
+        return (() => {
+          var _el$3 = _tmpl$$7();
+          insert(_el$3, () => props.placeholder || "Select...");
+          return _el$3;
+        })();
+      }
+      if (props.renderValue) {
+        return props.renderValue(singleVal);
+      } else {
+        const label = optionsMap.get(singleVal) || String(singleVal);
+        return (() => {
+          var _el$4 = _tmpl$2$5();
+          insert(_el$4, label);
+          return _el$4;
+        })();
+      }
+    }
+  });
+  const selectLocation = () => {
+    if (selectRef()) {
+      const rect = selectRef().getBoundingClientRect();
+      return {
+        x: rect.left,
+        y: rect.bottom
+      };
+    }
+    return {
+      x: 0,
+      y: 0
+    };
+  };
+  const selectWidth = () => {
+    if (selectRef()) {
+      return selectRef().getBoundingClientRect().width;
+    }
+    return 0;
+  };
+  createEffect(() => {
+    console.log('selected', selected());
+  });
+  // Update width of select to match option text width
+  createEffect(() => {
+    if (selectRef() && dropdownRef()) {
+      const dropdownWidth = dropdownRef().getBoundingClientRect().width;
+      const selectWidth = selectRef().getBoundingClientRect().width;
+      if (dropdownWidth > selectWidth) {
+        setSelectRef(old => {
+          if (!old) return;
+          old.style.width = `${dropdownWidth}px`;
+          return old;
+        });
+      }
+    }
+  });
+  const isTransparent = Object.keys(props).includes("transparent") || props.transparent === true;
+  const styleClass = !isTransparent ? "solid-select__" + currStyle : '';
+  const styleClassDropdown = "solid-select__" + currStyle + "_dropdown";
+  const styleClassTransparent = isTransparent ? "solid-select__transparent" : "";
+  return (() => {
+    var _el$5 = _tmpl$6(),
+      _el$6 = _el$5.firstChild,
+      _el$7 = _el$6.firstChild;
+    _el$5.$$keydown = e => {
+      // (Optional) keyboard support for navigation can be added here
+      if (e.key === "Escape") setOpen(false);
+    };
+    _el$5.addEventListener("focus", () => {});
+    use(setSelectRef, _el$5);
+    className(_el$5, `solid-select ${styleClass} ${styleClassTransparent}`);
+    _el$6.$$click = toggleOpen;
+    insert(_el$7, displayValue);
+    insert(_el$6, createComponent(Show, {
+      get when() {
+        return open();
+      },
+      get children() {
+        return _tmpl$3$2();
+      }
+    }), null);
+    insert(_el$6, createComponent(Show, {
+      get when() {
+        return !open();
+      },
+      get children() {
+        return _tmpl$4$2();
+      }
+    }), null);
+    insert(_el$5, createComponent(SelectContext.Provider, {
+      value: {
+        isSelected,
+        selectValue,
+        registerOption,
+        unregisterOption,
+        selectRef
+      },
+      get children() {
+        return createComponent(Show, {
+          get when() {
+            return open();
+          },
+          get children() {
+            return createComponent(Portal, {
+              get children() {
+                var _el$10 = _tmpl$5$1();
+                use(setDropdownRef, _el$10);
+                insert(_el$10, () => props.children);
+                createRenderEffect(_p$ => {
+                  var _v$ = `solid-select__dropdown ${styleClassDropdown} ${props.dropdownClass || ""}`,
+                    _v$2 = `${selectLocation().y}px`,
+                    _v$3 = `${selectLocation().x}px`,
+                    _v$4 = `${selectWidth()}px`;
+                  _v$ !== _p$.e && className(_el$10, _p$.e = _v$);
+                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$10.style.setProperty("top", _v$2) : _el$10.style.removeProperty("top"));
+                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$10.style.setProperty("left", _v$3) : _el$10.style.removeProperty("left"));
+                  _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$10.style.setProperty("width", _v$4) : _el$10.style.removeProperty("width"));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                return _el$10;
+              }
+            });
+          }
+        });
+      }
+    }), null);
+    createRenderEffect(_p$ => {
+      var _v$5 = props.id,
+        _v$6 = props.tooltip,
+        _v$7 = `solid-select__control ${props.class || ""}`;
+      _v$5 !== _p$.e && setAttribute(_el$5, "id", _p$.e = _v$5);
+      _v$6 !== _p$.t && setAttribute(_el$5, "title", _p$.t = _v$6);
+      _v$7 !== _p$.a && className(_el$6, _p$.a = _v$7);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$5;
+  })();
+}
+delegateEvents(["keydown", "click"]);
+
+var _tmpl$$6 = /*#__PURE__*/template(`<div><span class=checkmark></span><span class=option-label>`);
+function Option(props) {
+  const select = useContext(SelectContext);
+  if (!select) {
+    throw new Error("<Option> must be used within a <Select>");
+  }
+  onMount(() => select.registerOption?.(props.value, props.children));
+  onCleanup(() => select.unregisterOption?.(props.value));
+  const handleClick = e => {
+    e.stopPropagation();
+    select.selectValue(props.value);
+  };
+  return (() => {
+    var _el$ = _tmpl$$6(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    _el$.$$click = handleClick;
+    insert(_el$2, () => select.isSelected(props.value) ? "✓" : "");
+    insert(_el$3, () => props.children ?? "");
+    createRenderEffect(_p$ => {
+      var _v$ = `solid-select__option ${props.class || ""}`,
+        _v$2 = !!select.isSelected(props.value);
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _el$.classList.toggle("selected", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+
+var _tmpl$$5 = /*#__PURE__*/template(`<div class=snackContainer>`),
+  _tmpl$2$4 = /*#__PURE__*/template(`<div><span>`);
+const [snackbars, setSnackbars] = createSignal([]);
+const addSnackbar = snack => {
+  setSnackbars(old => [...old, snack]);
+};
+const removeSnackbar = index => {
+  setSnackbars(old => old.filter((_, i) => i !== index));
+};
+const SnackbarController = () => {
+  return createComponent(Show, {
+    get when() {
+      return snackbars().length > 0;
+    },
+    get children() {
+      var _el$ = _tmpl$$5();
+      insert(_el$, createComponent(For, {
+        get each() {
+          return snackbars();
+        },
+        children: (snack, index) => createComponent(Snackbar, mergeProps(snack, {
+          get index() {
+            return index();
+          },
+          onClose: () => removeSnackbar(index())
+        }))
+      }));
+      return _el$;
+    }
+  });
+};
+const Snackbar = props => {
+  const [isOpen, setIsOpen] = createSignal(true);
+  if (props.closeTimeout) setTimeout(() => props.onClose(), props.closeTimeout);
+  if (!props.closeTimeout) setTimeout(() => props.onClose(), 5000);
+  const messageLength = Math.floor(props.message.length / 17);
+  return createComponent(Portal, {
+    get mount() {
+      return document.body;
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return isOpen();
+        },
+        get children() {
+          var _el$2 = _tmpl$2$4(),
+            _el$3 = _el$2.firstChild;
+          insert(_el$3, () => props.message);
+          insert(_el$2, createComponent(Button, {
+            get onClick() {
+              return props.onClose;
+            },
+            children: "X"
+          }), null);
+          createRenderEffect(_p$ => {
+            var _v$ = `${10 + props.index * (50 + messageLength * 8)}px`,
+              _v$2 = `.primary .snack ${props.severity ?? "info"}`;
+            _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$2.style.setProperty("bottom", _v$) : _el$2.style.removeProperty("bottom"));
+            _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$2;
+        }
+      });
+    }
+  });
+};
+
+const tableContext = createContext({
+  tableState: () => ({
+    headers: [],
+    rowTransform: [],
+    currentColumns: []
+  }),
+  setTableState: () => {}
+});
+const TableProvider = props => {
+  const [tableState, setTableState] = createSignal(props.value);
+  return createComponent(tableContext.Provider, {
+    value: {
+      tableState,
+      setTableState
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+function getTableContext() {
+  return useContext(tableContext);
+}
+
+var _tmpl$$4 = /*#__PURE__*/template(`<svg width=46 height=44><path d="M24.15 12.7875L37.6625 25.575C39.1 26.95 39.1 29.15 37.6625 30.525C36.225 31.9 33.925 31.9 32.4875 30.525L24.15 22.6875C23.4312 22 22.425 22 21.7062 22.6875L13.3687 30.525C11.9312 31.9 9.63123 31.9 8.19373 30.525C6.75623 29.15 6.75623 26.95 8.19373 25.575L21.7062 12.7875C22.425 12.2375 23.575 12.2375 24.15 12.7875Z"stroke=white stroke-width=2 stroke-miterlimit=10 stroke-linecap=round stroke-linejoin=round>`),
+  _tmpl$2$3 = /*#__PURE__*/template(`<svg width=44 height=43><path d="M20.7625 31.8469L7.83752 19.35C6.46252 18.0062 6.46252 15.8562 7.83752 14.5125C9.21252 13.1687 11.4125 13.1687 12.7875 14.5125L20.7625 22.1719C21.45 22.8437 22.4125 22.8437 23.1 22.1719L31.075 14.5125C32.45 13.1687 34.65 13.1687 36.025 14.5125C37.4 15.8562 37.4 18.0062 36.025 19.35L23.1 31.8469C22.55 32.3844 21.45 32.3844 20.7625 31.8469Z"stroke=white stroke-width=2 stroke-miterlimit=10 stroke-linecap=round stroke-linejoin=round>`);
+const UpArrow = props => {
+  return (() => {
+    var _el$ = _tmpl$$4();
+    spread(_el$, mergeProps(props, {
+      "viewBox": "0 0 46 44",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }), true, true);
+    return _el$;
+  })();
+};
+const DownArrow = props => {
+  return (() => {
+    var _el$2 = _tmpl$2$3();
+    spread(_el$2, mergeProps(props, {
+      "viewBox": "0 0 44 43",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }), true, true);
+    return _el$2;
+  })();
+};
+
+var _tmpl$$3 = /*#__PURE__*/template(`<table><thead></thead><tbody>`),
+  _tmpl$2$2 = /*#__PURE__*/template(`<tr><td>`),
+  _tmpl$3$1 = /*#__PURE__*/template(`<tr>`),
+  _tmpl$4$1 = /*#__PURE__*/template(`<td>`);
+const Table = props => {
+  return createComponent(TableProvider, {
+    value: {
+      headers: [],
+      rowTransform: [],
+      currentColumns: []
+    },
+    get children() {
+      return createComponent(TableComponent, props);
+    }
+  });
+};
+const TableComponent = props => {
+  const state = getTableContext();
+  const [local, others] = splitProps(props, ["data", "columns", "children", "dropdown"]);
+  const [theadRef, setTheadRef] = createSignal();
+  const [tbodyRef, setTbodyRef] = createSignal();
+  state.setTableState({
+    headers: [],
+    rowTransform: [],
+    currentColumns: []
+  });
+  const [showDropdown, setShowDropdown] = createSignal({});
+  const getColumnIndex = name => state.tableState().currentColumns.findIndex(x => x === name);
+  const getHeaderTransform = name => state.tableState().headers[getColumnIndex(name)];
+  const isDropTable = () => Object.keys(props).includes("dropdown");
+  const dropCheck = i => {
+    const hasTransform = !!state.tableState().dropTransform;
+    const showDrop = !!showDropdown()[i] || !Object.keys(props).includes("dropdown");
+    return hasTransform && showDrop;
+  };
+  props.children;
+  return (() => {
+    var _el$ = _tmpl$$3(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    spread(_el$, others, false, true);
+    use(setTheadRef, _el$2);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return local.columns;
+      },
+      children: (column, i) => createMemo(() => getHeaderTransform(column))
+    }));
+    use(setTbodyRef, _el$3);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return !local.data().length;
+      },
+      get children() {
+        return [];
+      }
+    }), null);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return local.data().length;
+      },
+      get children() {
+        return createComponent(For, {
+          get each() {
+            return local.data();
+          },
+          children: (row, i) => [createComponent(BuildTableRow, {
+            get columns() {
+              return local.columns;
+            },
+            get showDropdown() {
+              return showDropdown()[i()];
+            },
+            setShowDropdown: setShowDropdown,
+            get dropdownArrow() {
+              return others.dropdownArrow;
+            },
+            get isDropTable() {
+              return isDropTable();
+            },
+            row: row,
+            get rowI() {
+              return i();
+            }
+          }), createComponent(Show, {
+            get when() {
+              return dropCheck(i());
+            },
+            get children() {
+              return createComponent(BuildSecondRow, {
+                get colSpan() {
+                  return local.columns.length;
+                },
+                row: row,
+                get rowI() {
+                  return i();
+                },
+                get transform() {
+                  return state.tableState().dropTransform;
+                }
+              });
+            }
+          })]
+        });
+      }
+    }), null);
+    return _el$;
+  })();
+};
+const BuildTableRow = props => {
+  const state = getTableContext();
+  const getCellProps = i => state.tableState().cellProps ? state.tableState().cellProps[i] : {};
+  const getColumnIndex = name => state.tableState().currentColumns.findIndex(x => x === name);
+  const getCellTransform = name => state.tableState().rowTransform[getColumnIndex(name)];
+  const hasTransforms = () => !!props.columns.map(x => getCellTransform(x)).filter(x => typeof x === "function").length;
+  return [createComponent(Show, {
+    get when() {
+      return createMemo(() => !!props.isDropTable)() && hasTransforms();
+    },
+    get children() {
+      var _el$4 = _tmpl$2$2(),
+        _el$5 = _el$4.firstChild;
+      insert(_el$4, createComponent(For, {
+        get each() {
+          return props.columns;
+        },
+        children: (column, i) => {
+          const cellTransform = getCellTransform(column);
+          return createComponent(Show, {
+            when: typeof cellTransform === "function",
+            get children() {
+              var _el$7 = _tmpl$4$1();
+              spread(_el$7, mergeProps({
+                get ["data-index"]() {
+                  return i();
+                }
+              }, () => getCellProps(getColumnIndex(column))), false, true);
+              insert(_el$7, () => cellTransform(props.row, props.rowI));
+              return _el$7;
+            }
+          });
+        }
+      }), _el$5);
+      insert(_el$5, createComponent(Show, {
+        get when() {
+          return props.showDropdown;
+        },
+        get children() {
+          return createComponent(Button, {
+            onClick: () => props.setShowDropdown(old => ({
+              ...old,
+              [props.rowI]: false
+            })),
+            get children() {
+              return createComponent(UpArrow, {
+                get width() {
+                  return props.dropdownArrow?.width;
+                },
+                get height() {
+                  return props.dropdownArrow?.height;
+                }
+              });
+            }
+          });
+        }
+      }), null);
+      insert(_el$5, createComponent(Show, {
+        get when() {
+          return !props.showDropdown;
+        },
+        get children() {
+          return createComponent(Button, {
+            onClick: () => props.setShowDropdown(old => ({
+              ...old,
+              [props.rowI]: true
+            })),
+            get children() {
+              return createComponent(DownArrow, {
+                get width() {
+                  return props.dropdownArrow?.width;
+                },
+                get height() {
+                  return props.dropdownArrow?.height;
+                }
+              });
+            }
+          });
+        }
+      }), null);
+      return _el$4;
+    }
+  }), createComponent(Show, {
+    get when() {
+      return createMemo(() => !!!props.isDropTable)() && hasTransforms();
+    },
+    get children() {
+      var _el$6 = _tmpl$3$1();
+      insert(_el$6, createComponent(For, {
+        get each() {
+          return props.columns;
+        },
+        children: (column, i) => {
+          const cellTransform = getCellTransform(column);
+          return createComponent(Show, {
+            when: typeof cellTransform === "function",
+            get children() {
+              var _el$8 = _tmpl$4$1();
+              spread(_el$8, mergeProps({
+                get ["data-index"]() {
+                  return i();
+                }
+              }, () => getCellProps(getColumnIndex(column))), false, true);
+              insert(_el$8, () => cellTransform(props.row, props.rowI));
+              return _el$8;
+            }
+          });
+        }
+      }));
+      return _el$6;
+    }
+  })];
+};
+const BuildSecondRow = props => {
+  return (() => {
+    var _el$9 = _tmpl$2$2(),
+      _el$10 = _el$9.firstChild;
+    insert(_el$10, () => props.transform(props.row, props.rowI));
+    createRenderEffect(() => setAttribute(_el$10, "colspan", props.colSpan));
+    return _el$9;
+  })();
+};
+
+const Tab = props => {
+  const {
+    tabs,
+    setTabs
+  } = getTabContext();
+  createEffect(() => {
+    if (props.hidden) {
+      if (props.hidden()) {
+        setTabs(old => {
+          const newTabs = {
+            ...old
+          };
+          delete newTabs[props.name];
+          return newTabs;
+        });
+      } else {
+        if (!!props.name && !Object.keys(tabs()).includes(props.name)) {
+          setTabs(old => ({
+            ...old,
+            [props.name]: props.children
+          }));
+        }
+      }
+    }
+  });
+  onMount(() => {
+    if (props.name !== undefined) {
+      if (!props.hidden || props.hidden && !props.hidden()) {
+        setTabs(old => ({
+          ...old,
+          [props.name]: props.children
+        }));
+      }
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return !props.hidden || props.hidden();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+var _tmpl$$2 = /*#__PURE__*/template(`<span class=leftArrow>`),
+  _tmpl$2$1 = /*#__PURE__*/template(`<span class=rightArrow>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class=.tabs><div><div class=tabHeader></div></div><div>`),
+  _tmpl$4 = /*#__PURE__*/template(`<b>`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class=hover>`);
+const tabContext = createContext({
+  tabs: () => ({}),
+  setTabs: () => {}
+});
+function getTabContext() {
+  return useContext(tabContext);
+}
+const TabProvider = props => {
+  const [tabs, setTabs] = createSignal(props.value, {
+    equals: (a, b) => {
+      const sameLength = Object.keys(a).length === Object.keys(b).length;
+      if (!sameLength) return false;
+      for (const key in a) {
+        if (a[key] !== b[key]) return false;
+      }
+      if (JSON.stringify(a) !== JSON.stringify(b)) return false;
+      return true;
+    }
+  });
+  return createComponent(tabContext.Provider, {
+    value: {
+      tabs,
+      setTabs
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+const Tabs = props => {
+  return createComponent(TabProvider, {
+    value: {},
+    get children() {
+      return createComponent(TabInternal, props);
+    }
+  });
+};
+const TabInternal = props => {
+  const {
+    tabs,
+    setTabs
+  } = useContext(tabContext);
+  const [selectedTab, setSelectedTab] = createSignal(Object.keys(tabs())[0]);
+  const currentElement = createMemo(() => tabs()[selectedTab()]);
+  children(() => props.children);
+  const isMobile = createMemo(() => window.innerWidth < 768);
+  const hasTranparent = createMemo(() => Object.keys(props).includes("transparent"));
+  createRenderEffect(() => {
+    setSelectedTab(Object.keys(tabs())[0]);
+  });
+  const [showLeft, setShowLeft] = createSignal(false);
+  const [showRight, setShowRight] = createSignal(false);
+  const scrollFunction = e => {
+    const scrollLeft = tabContainer?.scrollLeft;
+    tabContainer?.offsetWidth;
+    const scrollWidth = tabContainer?.scrollWidth ?? 0;
+    const clientWidth = tabContainer?.clientWidth ?? 0;
+    const newWidth = scrollWidth - clientWidth;
+    const showRight = Object.keys(tabs()).length >= 3 && isMobile() || scrollLeft !== newWidth;
+    const showLeft = scrollLeft > 0;
+    setShowRight(showRight);
+    setShowLeft(showLeft);
+    if (scrollLeft <= 0) {
+      setShowLeft(false);
+    }
+  };
+  let tabContainer;
+  onMount(() => {
+    if (tabContainer) {
+      tabContainer.addEventListener("scroll", scrollFunction);
+      scrollFunction();
+    }
+  });
+  onCleanup(() => {
+    if (tabContainer) {
+      tabContainer.removeEventListener("scroll", scrollFunction);
+    }
+  });
+  const scrollLeft = () => {
+    tabContainer.scrollLeft -= 100;
+    scrollFunction();
+  };
+  const scrollRight = () => {
+    tabContainer.scrollLeft += 100;
+    scrollFunction();
+    setShowLeft(true);
+  };
+  const styleType = props.styleType ?? "accent";
+  const [tabsArr, setTabsArr] = createSignal(Object.keys(tabs()));
+  createEffect(() => {
+    setTabsArr(Object.keys(tabs()));
+  });
+  return (() => {
+    var _el$ = _tmpl$3(),
+      _el$2 = _el$.firstChild,
+      _el$4 = _el$2.firstChild,
+      _el$6 = _el$2.nextSibling;
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return showLeft();
+      },
+      get children() {
+        var _el$3 = _tmpl$$2();
+        insert(_el$3, createComponent(Button, {
+          onClick: scrollLeft,
+          children: "\u2190"
+        }));
+        return _el$3;
+      }
+    }), _el$4);
+    var _ref$ = tabContainer;
+    typeof _ref$ === "function" ? use(_ref$, _el$4) : tabContainer = _el$4;
+    insert(_el$4, createComponent(For, {
+      get each() {
+        return tabsArr();
+      },
+      children: (tab, index) => (() => {
+        var _el$7 = _tmpl$5();
+        _el$7.$$click = () => setSelectedTab(tab);
+        insert(_el$7, createComponent(Show, {
+          get when() {
+            return tab === selectedTab();
+          },
+          get children() {
+            var _el$8 = _tmpl$4();
+            insert(_el$8, tab);
+            return _el$8;
+          }
+        }), null);
+        insert(_el$7, createComponent(Show, {
+          get when() {
+            return tab !== selectedTab();
+          },
+          children: tab
+        }), null);
+        return _el$7;
+      })()
+    }));
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return showRight();
+      },
+      get children() {
+        var _el$5 = _tmpl$2$1();
+        insert(_el$5, createComponent(Button, {
+          onClick: scrollRight,
+          children: "\u2192"
+        }));
+        return _el$5;
+      }
+    }), null);
+    insert(_el$6, currentElement);
+    createRenderEffect(_p$ => {
+      var _v$ = `${styleType} singleTabs ${hasTranparent() === true ? 'transparent' : ""}`,
+        _v$2 = `${styleType} tabBody ${hasTranparent() === true ? 'transparent' : ""}`;
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+
+var _tmpl$$1 = /*#__PURE__*/template(`<textarea>`);
+const TextArea = props => {
+  let myElement;
+  const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent"]);
+  const [showPicModal, setShowPicModal] = createSignal(false);
+  const context = useFormProvider();
+  /**
+     * Function to set the height of the textarea based on the content
+     */
+  function OnInput() {
+    if (myElement) {
+      myElement.style.height = 'auto';
+      const minHeight = customProps.minSize?.height ?? 100;
+      const currentHeight = myElement.scrollHeight < minHeight ? minHeight : myElement.scrollHeight;
+      myElement.style.height = `${currentHeight}px`;
+      myElement.setAttribute("style", "height:" + currentHeight + "px;overflow-y:hidden;");
+    }
+  }
+  // sets the field type on mount and sets the height of the textarea
+  onMount(() => {
+    OnInput();
+    context.setFieldType("textarea");
+  });
+  // updates height of textarea when text is changed
+  createRenderEffect(() => {
+    OnInput();
+    customProps.text();
+  });
+  createEffect(() => {
+    if (Object.keys(props).includes("required") || props?.required === true) {
+      context.setName(old => `${old} *`);
+    } else {
+      context.setName(old => old);
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$$1();
+    use(el => {
+      myElement = el;
+      OnInput();
+    }, _el$);
+    spread(_el$, mergeProps(normalProps, {
+      "onFocus": e => {
+        if (!isNullish(context.getName)) {
+          context.setFocused(true);
+        }
+      },
+      "onBlur": e => {
+        if (context.setFocused) {
+          context.setFocused(false);
+        }
+      },
+      get placeholder() {
+        return createMemo(() => !!(!!context.getName && !context.getTextInside() && !context.getFocused()))() ? context.getName() : props.placeholder;
+      },
+      get ["class"]() {
+        return `.areaStyle ${customProps.class ?? ""} ${customProps.transparent ? '.transparent' : ""}`;
+      },
+      get value() {
+        return customProps.text();
+      },
+      "onInput": e => {
+        customProps.setText(e.currentTarget.value);
+        OnInput();
+        if (!!context.getName && !!e.currentTarget.value.trim()) {
+          context.setValue(e.currentTarget.value);
+          context.setTextInside(true);
+        } else if (!!context.getName && !e.currentTarget.value.trim()) {
+          context.setValue("");
+          context.setTextInside(false);
+        }
+      },
+      get title() {
+        return customProps.tooltip;
+      }
+    }), false, false);
+    return _el$;
+  })();
+};
+
+var _tmpl$ = /*#__PURE__*/template(`<div class=".accent .body">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=".totalPanel .styles"><div class=".accent .header"><span>`);
+const ExpansionPanel = props => {
+  const [open, setOpen] = createSignal(!!props.startOpen);
+  return (() => {
+    var _el$ = _tmpl$2(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
+    spread(_el$, props, false, true);
+    _el$3.style.setProperty("width", "min-content");
+    _el$3.style.setProperty("height", "min-content");
+    insert(_el$3, () => props.children[0]);
+    insert(_el$2, createComponent(Button, {
+      style: {
+        width: 'min-content',
+        height: 'min-content',
+        padding: '0px',
+        margin: '0px'
+      },
+      onClick: () => {
+        setOpen(old => !old);
+        props.extraLogic ? props.extraLogic() : null;
+      },
+      "class": `.hover`,
+      get children() {
+        return [createComponent(Show, {
+          get when() {
+            return !open();
+          },
+          get children() {
+            return createComponent(DownArrow, {
+              style: {
+                padding: '0px',
+                margin: '0px'
+              },
+              get width() {
+                return props.arrowSize?.width;
+              },
+              get height() {
+                return props.arrowSize?.height;
+              }
+            });
+          }
+        }), createComponent(Show, {
+          get when() {
+            return open();
+          },
+          get children() {
+            return createComponent(UpArrow, {
+              style: {
+                padding: '0px',
+                margin: '0px'
+              },
+              get width() {
+                return props.arrowSize?.width;
+              },
+              get height() {
+                return props.arrowSize?.height;
+              }
+            });
+          }
+        })];
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return open();
+      },
+      get children() {
+        var _el$4 = _tmpl$();
+        insert(_el$4, () => props.children[1]);
+        return _el$4;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+
+export { Body, Button, Chip, Chipbar, ExpansionPanel, FormField, Input, Option, Select, SelectContext, SnackbarController, Tab, Table, Tabs, TextArea, addSnackbar, getTabContext };