@sortsys/ui 0.1.0

package/dist/dev.jsx

@@ -0,0 +1,3489 @@
+// src/components/SSButton.tsx
+function SSButton(props) {
+  const classes = () => [
+    "ss_button",
+    props.isIconOnly ? "ss_button--icon" : "",
+    props.class ?? ""
+  ].filter(Boolean).join(" ");
+  return <button
+    type={props.type ?? "button"}
+    class={classes()}
+    disabled={props.disabled}
+    aria-label={props.ariaLabel}
+    form={props.form}
+    onclick={props.onclick}
+  >
+      {props.children}
+    </button>;
+}
+
+// src/components/SSCallout.tsx
+function SSCallout(props) {
+  const { icon, color, class: className2, style: style2, children: children3, ...rest } = props;
+  return <div
+    {...rest}
+    class={`ss_callout ss_callout--${color} ${className2 ?? ""}`}
+    style={style2}
+  >
+      <span class="ss_callout__icon">
+        {icon}
+      </span>
+      <div class="ss_callout__content">
+        <span>{children3}</span>
+      </div>
+    </div>;
+}
+
+// src/components/SSChip.tsx
+function SSChip(props) {
+  const commonClass = `ss_chip ss_chip--${props.color ?? "blue"} ${props.class ?? ""}`;
+  if ("onclick" in props && props.onclick) {
+    return <button
+      type="button"
+      class={`${commonClass} ss_chip--clickable`}
+      style={props.style}
+      onclick={props.onclick}
+    >
+        <span class="ss_chip__label">{props.children}</span>
+      </button>;
+  }
+  return <div class={commonClass} style={props.style}>
+      <span class="ss_chip__label">{props.children}</span>
+      {"ondismiss" in props && props.ondismiss && <button
+    type="button"
+    class="ss_chip__dismiss"
+    aria-label="Entfernen"
+    onclick={props.ondismiss}
+  >
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+        </button>}
+    </div>;
+}
+
+// node_modules/solid-js/dist/solid.js
+var sharedConfig = {
+  context: void 0,
+  registry: void 0,
+  effects: void 0,
+  done: false,
+  getContextId() {
+    return getContextId(this.context.count);
+  },
+  getNextContextId() {
+    return getContextId(this.context.count++);
+  }
+};
+function getContextId(count) {
+  const num = String(count), len = num.length - 1;
+  return sharedConfig.context.id + (len ? String.fromCharCode(96 + len) : "") + num;
+}
+function setHydrateContext(context) {
+  sharedConfig.context = context;
+}
+var IS_DEV = false;
+var equalFn = (a, b) => a === b;
+var $PROXY = /* @__PURE__ */ Symbol("solid-proxy");
+var SUPPORTS_PROXY = typeof Proxy === "function";
+var $TRACK = /* @__PURE__ */ Symbol("solid-track");
+var signalOptions = {
+  equals: equalFn
+};
+var ERROR = null;
+var runEffects = runQueue;
+var STALE = 1;
+var PENDING = 2;
+var UNOWNED = {
+  owned: null,
+  cleanups: null,
+  context: null,
+  owner: null
+};
+var NO_INIT = {};
+var Owner = null;
+var Transition = null;
+var Scheduler = null;
+var ExternalSourceConfig = null;
+var Listener = null;
+var Updates = null;
+var Effects = null;
+var ExecCount = 0;
+function createRoot(fn, detachedOwner) {
+  const listener = Listener, owner = Owner, unowned = fn.length === 0, current = detachedOwner === void 0 ? owner : detachedOwner, root = unowned ? UNOWNED : {
+    owned: null,
+    cleanups: null,
+    context: current ? current.context : null,
+    owner: current
+  }, updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root)));
+  Owner = root;
+  Listener = null;
+  try {
+    return runUpdates(updateFn, true);
+  } finally {
+    Listener = listener;
+    Owner = owner;
+  }
+}
+function createSignal(value, options) {
+  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+  const s = {
+    value,
+    observers: null,
+    observerSlots: null,
+    comparator: options.equals || void 0
+  };
+  const setter = (value2) => {
+    if (typeof value2 === "function") {
+      if (Transition && Transition.running && Transition.sources.has(s)) value2 = value2(s.tValue);
+      else value2 = value2(s.value);
+    }
+    return writeSignal(s, value2);
+  };
+  return [readSignal.bind(s), setter];
+}
+function createComputed(fn, value, options) {
+  const c = createComputation(fn, value, true, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);
+  else updateComputation(c);
+}
+function createRenderEffect(fn, value, options) {
+  const c = createComputation(fn, value, false, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);
+  else updateComputation(c);
+}
+function createEffect(fn, value, options) {
+  runEffects = runUserEffects;
+  const c = createComputation(fn, value, false, STALE), s = SuspenseContext && useContext(SuspenseContext);
+  if (s) c.suspense = s;
+  if (!options || !options.render) c.user = true;
+  Effects ? Effects.push(c) : updateComputation(c);
+}
+function createMemo(fn, value, options) {
+  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
+  const c = createComputation(fn, value, true, 0);
+  c.observers = null;
+  c.observerSlots = null;
+  c.comparator = options.equals || void 0;
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
+  return readSignal.bind(c);
+}
+function isPromise(v) {
+  return v && typeof v === "object" && "then" in v;
+}
+function createResource(pSource, pFetcher, pOptions) {
+  let source;
+  let fetcher;
+  let options;
+  if (typeof pFetcher === "function") {
+    source = pSource;
+    fetcher = pFetcher;
+    options = pOptions || {};
+  } else {
+    source = true;
+    fetcher = pSource;
+    options = pFetcher || {};
+  }
+  let pr = null, initP = NO_INIT, id = null, loadedUnderTransition = false, scheduled = false, resolved = "initialValue" in options, dynamic = typeof source === "function" && createMemo(source);
+  const contexts = /* @__PURE__ */ new Set(), [value, setValue] = (options.storage || createSignal)(options.initialValue), [error, setError] = createSignal(void 0), [track, trigger] = createSignal(void 0, {
+    equals: false
+  }), [state, setState] = createSignal(resolved ? "ready" : "unresolved");
+  if (sharedConfig.context) {
+    id = sharedConfig.getNextContextId();
+    if (options.ssrLoadFrom === "initial") initP = options.initialValue;
+    else if (sharedConfig.load && sharedConfig.has(id)) initP = sharedConfig.load(id);
+  }
+  function loadEnd(p, v, error2, key) {
+    if (pr === p) {
+      pr = null;
+      key !== void 0 && (resolved = true);
+      if ((p === initP || v === initP) && options.onHydrated) queueMicrotask(() => options.onHydrated(key, {
+        value: v
+      }));
+      initP = NO_INIT;
+      if (Transition && p && loadedUnderTransition) {
+        Transition.promises.delete(p);
+        loadedUnderTransition = false;
+        runUpdates(() => {
+          Transition.running = true;
+          completeLoad(v, error2);
+        }, false);
+      } else completeLoad(v, error2);
+    }
+    return v;
+  }
+  function completeLoad(v, err) {
+    runUpdates(() => {
+      if (err === void 0) setValue(() => v);
+      setState(err !== void 0 ? "errored" : resolved ? "ready" : "unresolved");
+      setError(err);
+      for (const c of contexts.keys()) c.decrement();
+      contexts.clear();
+    }, false);
+  }
+  function read() {
+    const c = SuspenseContext && useContext(SuspenseContext), v = value(), err = error();
+    if (err !== void 0 && !pr) throw err;
+    if (Listener && !Listener.user && c) {
+      createComputed(() => {
+        track();
+        if (pr) {
+          if (c.resolved && Transition && loadedUnderTransition) Transition.promises.add(pr);
+          else if (!contexts.has(c)) {
+            c.increment();
+            contexts.add(c);
+          }
+        }
+      });
+    }
+    return v;
+  }
+  function load(refetching = true) {
+    if (refetching !== false && scheduled) return;
+    scheduled = false;
+    const lookup = dynamic ? dynamic() : source;
+    loadedUnderTransition = Transition && Transition.running;
+    if (lookup == null || lookup === false) {
+      loadEnd(pr, untrack(value));
+      return;
+    }
+    if (Transition && pr) Transition.promises.delete(pr);
+    let error2;
+    const p = initP !== NO_INIT ? initP : untrack(() => {
+      try {
+        return fetcher(lookup, {
+          value: value(),
+          refetching
+        });
+      } catch (fetcherError) {
+        error2 = fetcherError;
+      }
+    });
+    if (error2 !== void 0) {
+      loadEnd(pr, void 0, castError(error2), lookup);
+      return;
+    } else if (!isPromise(p)) {
+      loadEnd(pr, p, void 0, lookup);
+      return p;
+    }
+    pr = p;
+    if ("v" in p) {
+      if (p.s === 1) loadEnd(pr, p.v, void 0, lookup);
+      else loadEnd(pr, void 0, castError(p.v), lookup);
+      return p;
+    }
+    scheduled = true;
+    queueMicrotask(() => scheduled = false);
+    runUpdates(() => {
+      setState(resolved ? "refreshing" : "pending");
+      trigger();
+    }, false);
+    return p.then((v) => loadEnd(p, v, void 0, lookup), (e) => loadEnd(p, void 0, castError(e), lookup));
+  }
+  Object.defineProperties(read, {
+    state: {
+      get: () => state()
+    },
+    error: {
+      get: () => error()
+    },
+    loading: {
+      get() {
+        const s = state();
+        return s === "pending" || s === "refreshing";
+      }
+    },
+    latest: {
+      get() {
+        if (!resolved) return read();
+        const err = error();
+        if (err && !pr) throw err;
+        return value();
+      }
+    }
+  });
+  let owner = Owner;
+  if (dynamic) createComputed(() => (owner = Owner, load(false)));
+  else load(false);
+  return [read, {
+    refetch: (info) => runWithOwner(owner, () => load(info)),
+    mutate: setValue
+  }];
+}
+function untrack(fn) {
+  if (!ExternalSourceConfig && Listener === null) return fn();
+  const listener = Listener;
+  Listener = null;
+  try {
+    if (ExternalSourceConfig) return ExternalSourceConfig.untrack(fn);
+    return fn();
+  } finally {
+    Listener = listener;
+  }
+}
+function onMount(fn) {
+  createEffect(() => untrack(fn));
+}
+function onCleanup(fn) {
+  if (Owner === null) ;
+  else if (Owner.cleanups === null) Owner.cleanups = [fn];
+  else Owner.cleanups.push(fn);
+  return fn;
+}
+function getListener() {
+  return Listener;
+}
+function getOwner() {
+  return Owner;
+}
+function runWithOwner(o, fn) {
+  const prev = Owner;
+  const prevListener = Listener;
+  Owner = o;
+  Listener = null;
+  try {
+    return runUpdates(fn, true);
+  } catch (err) {
+    handleError(err);
+  } finally {
+    Owner = prev;
+    Listener = prevListener;
+  }
+}
+function startTransition(fn) {
+  if (Transition && Transition.running) {
+    fn();
+    return Transition.done;
+  }
+  const l = Listener;
+  const o = Owner;
+  return Promise.resolve().then(() => {
+    Listener = l;
+    Owner = o;
+    let t;
+    if (Scheduler || SuspenseContext) {
+      t = Transition || (Transition = {
+        sources: /* @__PURE__ */ new Set(),
+        effects: [],
+        promises: /* @__PURE__ */ new Set(),
+        disposed: /* @__PURE__ */ new Set(),
+        queue: /* @__PURE__ */ new Set(),
+        running: true
+      });
+      t.done || (t.done = new Promise((res) => t.resolve = res));
+      t.running = true;
+    }
+    runUpdates(fn, false);
+    Listener = Owner = null;
+    return t ? t.done : void 0;
+  });
+}
+var [transPending, setTransPending] = /* @__PURE__ */ createSignal(false);
+function createContext(defaultValue, options) {
+  const id = /* @__PURE__ */ Symbol("context");
+  return {
+    id,
+    Provider: createProvider(id),
+    defaultValue
+  };
+}
+function useContext(context) {
+  let value;
+  return Owner && Owner.context && (value = Owner.context[context.id]) !== void 0 ? value : context.defaultValue;
+}
+function children(fn) {
+  const children3 = createMemo(fn);
+  const memo2 = createMemo(() => resolveChildren(children3()));
+  memo2.toArray = () => {
+    const c = memo2();
+    return Array.isArray(c) ? c : c != null ? [c] : [];
+  };
+  return memo2;
+}
+var SuspenseContext;
+function readSignal() {
+  const runningTransition = Transition && Transition.running;
+  if (this.sources && (runningTransition ? this.tState : this.state)) {
+    if ((runningTransition ? this.tState : this.state) === STALE) updateComputation(this);
+    else {
+      const updates = Updates;
+      Updates = null;
+      runUpdates(() => lookUpstream(this), false);
+      Updates = updates;
+    }
+  }
+  if (Listener) {
+    const sSlot = this.observers ? this.observers.length : 0;
+    if (!Listener.sources) {
+      Listener.sources = [this];
+      Listener.sourceSlots = [sSlot];
+    } else {
+      Listener.sources.push(this);
+      Listener.sourceSlots.push(sSlot);
+    }
+    if (!this.observers) {
+      this.observers = [Listener];
+      this.observerSlots = [Listener.sources.length - 1];
+    } else {
+      this.observers.push(Listener);
+      this.observerSlots.push(Listener.sources.length - 1);
+    }
+  }
+  if (runningTransition && Transition.sources.has(this)) return this.tValue;
+  return this.value;
+}
+function writeSignal(node, value, isComp) {
+  let current = Transition && Transition.running && Transition.sources.has(node) ? node.tValue : node.value;
+  if (!node.comparator || !node.comparator(current, value)) {
+    if (Transition) {
+      const TransitionRunning = Transition.running;
+      if (TransitionRunning || !isComp && Transition.sources.has(node)) {
+        Transition.sources.add(node);
+        node.tValue = value;
+      }
+      if (!TransitionRunning) node.value = value;
+    } else node.value = value;
+    if (node.observers && node.observers.length) {
+      runUpdates(() => {
+        for (let i = 0; i < node.observers.length; i += 1) {
+          const o = node.observers[i];
+          const TransitionRunning = Transition && Transition.running;
+          if (TransitionRunning && Transition.disposed.has(o)) continue;
+          if (TransitionRunning ? !o.tState : !o.state) {
+            if (o.pure) Updates.push(o);
+            else Effects.push(o);
+            if (o.observers) markDownstream(o);
+          }
+          if (!TransitionRunning) o.state = STALE;
+          else o.tState = STALE;
+        }
+        if (Updates.length > 1e6) {
+          Updates = [];
+          if (IS_DEV) ;
+          throw new Error();
+        }
+      }, false);
+    }
+  }
+  return value;
+}
+function updateComputation(node) {
+  if (!node.fn) return;
+  cleanNode(node);
+  const time = ExecCount;
+  runComputation(node, Transition && Transition.running && Transition.sources.has(node) ? node.tValue : node.value, time);
+  if (Transition && !Transition.running && Transition.sources.has(node)) {
+    queueMicrotask(() => {
+      runUpdates(() => {
+        Transition && (Transition.running = true);
+        Listener = Owner = node;
+        runComputation(node, node.tValue, time);
+        Listener = Owner = null;
+      }, false);
+    });
+  }
+}
+function runComputation(node, value, time) {
+  let nextValue;
+  const owner = Owner, listener = Listener;
+  Listener = Owner = node;
+  try {
+    nextValue = node.fn(value);
+  } catch (err) {
+    if (node.pure) {
+      if (Transition && Transition.running) {
+        node.tState = STALE;
+        node.tOwned && node.tOwned.forEach(cleanNode);
+        node.tOwned = void 0;
+      } else {
+        node.state = STALE;
+        node.owned && node.owned.forEach(cleanNode);
+        node.owned = null;
+      }
+    }
+    node.updatedAt = time + 1;
+    return handleError(err);
+  } finally {
+    Listener = listener;
+    Owner = owner;
+  }
+  if (!node.updatedAt || node.updatedAt <= time) {
+    if (node.updatedAt != null && "observers" in node) {
+      writeSignal(node, nextValue, true);
+    } else if (Transition && Transition.running && node.pure) {
+      Transition.sources.add(node);
+      node.tValue = nextValue;
+    } else node.value = nextValue;
+    node.updatedAt = time;
+  }
+}
+function createComputation(fn, init, pure, state = STALE, options) {
+  const c = {
+    fn,
+    state,
+    updatedAt: null,
+    owned: null,
+    sources: null,
+    sourceSlots: null,
+    cleanups: null,
+    value: init,
+    owner: Owner,
+    context: Owner ? Owner.context : null,
+    pure
+  };
+  if (Transition && Transition.running) {
+    c.state = 0;
+    c.tState = state;
+  }
+  if (Owner === null) ;
+  else if (Owner !== UNOWNED) {
+    if (Transition && Transition.running && Owner.pure) {
+      if (!Owner.tOwned) Owner.tOwned = [c];
+      else Owner.tOwned.push(c);
+    } else {
+      if (!Owner.owned) Owner.owned = [c];
+      else Owner.owned.push(c);
+    }
+  }
+  if (ExternalSourceConfig && c.fn) {
+    const [track, trigger] = createSignal(void 0, {
+      equals: false
+    });
+    const ordinary = ExternalSourceConfig.factory(c.fn, trigger);
+    onCleanup(() => ordinary.dispose());
+    const triggerInTransition = () => startTransition(trigger).then(() => inTransition.dispose());
+    const inTransition = ExternalSourceConfig.factory(c.fn, triggerInTransition);
+    c.fn = (x) => {
+      track();
+      return Transition && Transition.running ? inTransition.track(x) : ordinary.track(x);
+    };
+  }
+  return c;
+}
+function runTop(node) {
+  const runningTransition = Transition && Transition.running;
+  if ((runningTransition ? node.tState : node.state) === 0) return;
+  if ((runningTransition ? node.tState : node.state) === PENDING) return lookUpstream(node);
+  if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
+  const ancestors = [node];
+  while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
+    if (runningTransition && Transition.disposed.has(node)) return;
+    if (runningTransition ? node.tState : node.state) ancestors.push(node);
+  }
+  for (let i = ancestors.length - 1; i >= 0; i--) {
+    node = ancestors[i];
+    if (runningTransition) {
+      let top = node, prev = ancestors[i + 1];
+      while ((top = top.owner) && top !== prev) {
+        if (Transition.disposed.has(top)) return;
+      }
+    }
+    if ((runningTransition ? node.tState : node.state) === STALE) {
+      updateComputation(node);
+    } else if ((runningTransition ? node.tState : node.state) === PENDING) {
+      const updates = Updates;
+      Updates = null;
+      runUpdates(() => lookUpstream(node, ancestors[0]), false);
+      Updates = updates;
+    }
+  }
+}
+function runUpdates(fn, init) {
+  if (Updates) return fn();
+  let wait = false;
+  if (!init) Updates = [];
+  if (Effects) wait = true;
+  else Effects = [];
+  ExecCount++;
+  try {
+    const res = fn();
+    completeUpdates(wait);
+    return res;
+  } catch (err) {
+    if (!wait) Effects = null;
+    Updates = null;
+    handleError(err);
+  }
+}
+function completeUpdates(wait) {
+  if (Updates) {
+    if (Scheduler && Transition && Transition.running) scheduleQueue(Updates);
+    else runQueue(Updates);
+    Updates = null;
+  }
+  if (wait) return;
+  let res;
+  if (Transition) {
+    if (!Transition.promises.size && !Transition.queue.size) {
+      const sources = Transition.sources;
+      const disposed = Transition.disposed;
+      Effects.push.apply(Effects, Transition.effects);
+      res = Transition.resolve;
+      for (const e2 of Effects) {
+        "tState" in e2 && (e2.state = e2.tState);
+        delete e2.tState;
+      }
+      Transition = null;
+      runUpdates(() => {
+        for (const d of disposed) cleanNode(d);
+        for (const v of sources) {
+          v.value = v.tValue;
+          if (v.owned) {
+            for (let i = 0, len = v.owned.length; i < len; i++) cleanNode(v.owned[i]);
+          }
+          if (v.tOwned) v.owned = v.tOwned;
+          delete v.tValue;
+          delete v.tOwned;
+          v.tState = 0;
+        }
+        setTransPending(false);
+      }, false);
+    } else if (Transition.running) {
+      Transition.running = false;
+      Transition.effects.push.apply(Transition.effects, Effects);
+      Effects = null;
+      setTransPending(true);
+      return;
+    }
+  }
+  const e = Effects;
+  Effects = null;
+  if (e.length) runUpdates(() => runEffects(e), false);
+  if (res) res();
+}
+function runQueue(queue) {
+  for (let i = 0; i < queue.length; i++) runTop(queue[i]);
+}
+function scheduleQueue(queue) {
+  for (let i = 0; i < queue.length; i++) {
+    const item = queue[i];
+    const tasks = Transition.queue;
+    if (!tasks.has(item)) {
+      tasks.add(item);
+      Scheduler(() => {
+        tasks.delete(item);
+        runUpdates(() => {
+          Transition.running = true;
+          runTop(item);
+        }, false);
+        Transition && (Transition.running = false);
+      });
+    }
+  }
+}
+function runUserEffects(queue) {
+  let i, userLength = 0;
+  for (i = 0; i < queue.length; i++) {
+    const e = queue[i];
+    if (!e.user) runTop(e);
+    else queue[userLength++] = e;
+  }
+  if (sharedConfig.context) {
+    if (sharedConfig.count) {
+      sharedConfig.effects || (sharedConfig.effects = []);
+      sharedConfig.effects.push(...queue.slice(0, userLength));
+      return;
+    }
+    setHydrateContext();
+  }
+  if (sharedConfig.effects && (sharedConfig.done || !sharedConfig.count)) {
+    queue = [...sharedConfig.effects, ...queue];
+    userLength += sharedConfig.effects.length;
+    delete sharedConfig.effects;
+  }
+  for (i = 0; i < userLength; i++) runTop(queue[i]);
+}
+function lookUpstream(node, ignore) {
+  const runningTransition = Transition && Transition.running;
+  if (runningTransition) node.tState = 0;
+  else node.state = 0;
+  for (let i = 0; i < node.sources.length; i += 1) {
+    const source = node.sources[i];
+    if (source.sources) {
+      const state = runningTransition ? source.tState : source.state;
+      if (state === STALE) {
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
+      } else if (state === PENDING) lookUpstream(source, ignore);
+    }
+  }
+}
+function markDownstream(node) {
+  const runningTransition = Transition && Transition.running;
+  for (let i = 0; i < node.observers.length; i += 1) {
+    const o = node.observers[i];
+    if (runningTransition ? !o.tState : !o.state) {
+      if (runningTransition) o.tState = PENDING;
+      else o.state = PENDING;
+      if (o.pure) Updates.push(o);
+      else Effects.push(o);
+      o.observers && markDownstream(o);
+    }
+  }
+}
+function cleanNode(node) {
+  let i;
+  if (node.sources) {
+    while (node.sources.length) {
+      const source = node.sources.pop(), index = node.sourceSlots.pop(), obs = source.observers;
+      if (obs && obs.length) {
+        const n = obs.pop(), s = source.observerSlots.pop();
+        if (index < obs.length) {
+          n.sourceSlots[s] = index;
+          obs[index] = n;
+          source.observerSlots[index] = s;
+        }
+      }
+    }
+  }
+  if (node.tOwned) {
+    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
+    delete node.tOwned;
+  }
+  if (Transition && Transition.running && node.pure) {
+    reset(node, true);
+  } else if (node.owned) {
+    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
+    node.owned = null;
+  }
+  if (node.cleanups) {
+    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
+    node.cleanups = null;
+  }
+  if (Transition && Transition.running) node.tState = 0;
+  else node.state = 0;
+}
+function reset(node, top) {
+  if (!top) {
+    node.tState = 0;
+    Transition.disposed.add(node);
+  }
+  if (node.owned) {
+    for (let i = 0; i < node.owned.length; i++) reset(node.owned[i]);
+  }
+}
+function castError(err) {
+  if (err instanceof Error) return err;
+  return new Error(typeof err === "string" ? err : "Unknown error", {
+    cause: err
+  });
+}
+function runErrors(err, fns, owner) {
+  try {
+    for (const f of fns) f(err);
+  } catch (e) {
+    handleError(e, owner && owner.owner || null);
+  }
+}
+function handleError(err, owner = Owner) {
+  const fns = ERROR && owner && owner.context && owner.context[ERROR];
+  const error = castError(err);
+  if (!fns) throw error;
+  if (Effects) Effects.push({
+    fn() {
+      runErrors(error, fns, owner);
+    },
+    state: STALE
+  });
+  else runErrors(error, fns, owner);
+}
+function resolveChildren(children3) {
+  if (typeof children3 === "function" && !children3.length) return resolveChildren(children3());
+  if (Array.isArray(children3)) {
+    const results = [];
+    for (let i = 0; i < children3.length; i++) {
+      const result = resolveChildren(children3[i]);
+      Array.isArray(result) ? results.push.apply(results, result) : results.push(result);
+    }
+    return results;
+  }
+  return children3;
+}
+function createProvider(id, options) {
+  return function provider(props) {
+    let res;
+    createRenderEffect(() => res = untrack(() => {
+      Owner.context = {
+        ...Owner.context,
+        [id]: props.value
+      };
+      return children(() => props.children);
+    }), void 0);
+    return res;
+  };
+}
+var FALLBACK = /* @__PURE__ */ Symbol("fallback");
+function dispose(d) {
+  for (let i = 0; i < d.length; i++) d[i]();
+}
+function mapArray(list, mapFn, options = {}) {
+  let items = [], mapped = [], disposers = [], len = 0, indexes = mapFn.length > 1 ? [] : null;
+  onCleanup(() => dispose(disposers));
+  return () => {
+    let newItems = list() || [], newLen = newItems.length, i, j;
+    newItems[$TRACK];
+    return untrack(() => {
+      let newIndices, newIndicesNext, temp, tempdisposers, tempIndexes, start, end, newEnd, item;
+      if (newLen === 0) {
+        if (len !== 0) {
+          dispose(disposers);
+          disposers = [];
+          items = [];
+          mapped = [];
+          len = 0;
+          indexes && (indexes = []);
+        }
+        if (options.fallback) {
+          items = [FALLBACK];
+          mapped[0] = createRoot((disposer) => {
+            disposers[0] = disposer;
+            return options.fallback();
+          });
+          len = 1;
+        }
+      } else if (len === 0) {
+        mapped = new Array(newLen);
+        for (j = 0; j < newLen; j++) {
+          items[j] = newItems[j];
+          mapped[j] = createRoot(mapper);
+        }
+        len = newLen;
+      } else {
+        temp = new Array(newLen);
+        tempdisposers = new Array(newLen);
+        indexes && (tempIndexes = new Array(newLen));
+        for (start = 0, end = Math.min(len, newLen); start < end && items[start] === newItems[start]; start++) ;
+        for (end = len - 1, newEnd = newLen - 1; end >= start && newEnd >= start && items[end] === newItems[newEnd]; end--, newEnd--) {
+          temp[newEnd] = mapped[end];
+          tempdisposers[newEnd] = disposers[end];
+          indexes && (tempIndexes[newEnd] = indexes[end]);
+        }
+        newIndices = /* @__PURE__ */ new Map();
+        newIndicesNext = new Array(newEnd + 1);
+        for (j = newEnd; j >= start; j--) {
+          item = newItems[j];
+          i = newIndices.get(item);
+          newIndicesNext[j] = i === void 0 ? -1 : i;
+          newIndices.set(item, j);
+        }
+        for (i = start; i <= end; i++) {
+          item = items[i];
+          j = newIndices.get(item);
+          if (j !== void 0 && j !== -1) {
+            temp[j] = mapped[i];
+            tempdisposers[j] = disposers[i];
+            indexes && (tempIndexes[j] = indexes[i]);
+            j = newIndicesNext[j];
+            newIndices.set(item, j);
+          } else disposers[i]();
+        }
+        for (j = start; j < newLen; j++) {
+          if (j in temp) {
+            mapped[j] = temp[j];
+            disposers[j] = tempdisposers[j];
+            if (indexes) {
+              indexes[j] = tempIndexes[j];
+              indexes[j](j);
+            }
+          } else mapped[j] = createRoot(mapper);
+        }
+        mapped = mapped.slice(0, len = newLen);
+        items = newItems.slice(0);
+      }
+      return mapped;
+    });
+    function mapper(disposer) {
+      disposers[j] = disposer;
+      if (indexes) {
+        const [s, set] = createSignal(j);
+        indexes[j] = set;
+        return mapFn(newItems[j], s);
+      }
+      return mapFn(newItems[j]);
+    }
+  };
+}
+function trueFn() {
+  return true;
+}
+var propTraps = {
+  get(_, property, receiver) {
+    if (property === $PROXY) return receiver;
+    return _.get(property);
+  },
+  has(_, property) {
+    if (property === $PROXY) return true;
+    return _.has(property);
+  },
+  set: trueFn,
+  deleteProperty: trueFn,
+  getOwnPropertyDescriptor(_, property) {
+    return {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return _.get(property);
+      },
+      set: trueFn,
+      deleteProperty: trueFn
+    };
+  },
+  ownKeys(_) {
+    return _.keys();
+  }
+};
+function resolveSource(s) {
+  return !(s = typeof s === "function" ? s() : s) ? {} : s;
+}
+function resolveSources() {
+  for (let i = 0, length = this.length; i < length; ++i) {
+    const v = this[i]();
+    if (v !== void 0) return v;
+  }
+}
+function mergeProps(...sources) {
+  let proxy = false;
+  for (let i = 0; i < sources.length; i++) {
+    const s = sources[i];
+    proxy = proxy || !!s && $PROXY in s;
+    sources[i] = typeof s === "function" ? (proxy = true, createMemo(s)) : s;
+  }
+  if (SUPPORTS_PROXY && proxy) {
+    return new Proxy({
+      get(property) {
+        for (let i = sources.length - 1; i >= 0; i--) {
+          const v = resolveSource(sources[i])[property];
+          if (v !== void 0) return v;
+        }
+      },
+      has(property) {
+        for (let i = sources.length - 1; i >= 0; i--) {
+          if (property in resolveSource(sources[i])) return true;
+        }
+        return false;
+      },
+      keys() {
+        const keys = [];
+        for (let i = 0; i < sources.length; i++) keys.push(...Object.keys(resolveSource(sources[i])));
+        return [...new Set(keys)];
+      }
+    }, propTraps);
+  }
+  const sourcesMap = {};
+  const defined = /* @__PURE__ */ Object.create(null);
+  for (let i = sources.length - 1; i >= 0; i--) {
+    const source = sources[i];
+    if (!source) continue;
+    const sourceKeys = Object.getOwnPropertyNames(source);
+    for (let i2 = sourceKeys.length - 1; i2 >= 0; i2--) {
+      const key = sourceKeys[i2];
+      if (key === "__proto__" || key === "constructor") continue;
+      const desc = Object.getOwnPropertyDescriptor(source, key);
+      if (!defined[key]) {
+        defined[key] = desc.get ? {
+          enumerable: true,
+          configurable: true,
+          get: resolveSources.bind(sourcesMap[key] = [desc.get.bind(source)])
+        } : desc.value !== void 0 ? desc : void 0;
+      } else {
+        const sources2 = sourcesMap[key];
+        if (sources2) {
+          if (desc.get) sources2.push(desc.get.bind(source));
+          else if (desc.value !== void 0) sources2.push(() => desc.value);
+        }
+      }
+    }
+  }
+  const target = {};
+  const definedKeys = Object.keys(defined);
+  for (let i = definedKeys.length - 1; i >= 0; i--) {
+    const key = definedKeys[i], desc = defined[key];
+    if (desc && desc.get) Object.defineProperty(target, key, desc);
+    else target[key] = desc ? desc.value : void 0;
+  }
+  return target;
+}
+function splitProps(props, ...keys) {
+  const len = keys.length;
+  if (SUPPORTS_PROXY && $PROXY in props) {
+    const blocked = len > 1 ? keys.flat() : keys[0];
+    const res = keys.map((k) => {
+      return new Proxy({
+        get(property) {
+          return k.includes(property) ? props[property] : void 0;
+        },
+        has(property) {
+          return k.includes(property) && property in props;
+        },
+        keys() {
+          return k.filter((property) => property in props);
+        }
+      }, propTraps);
+    });
+    res.push(new Proxy({
+      get(property) {
+        return blocked.includes(property) ? void 0 : props[property];
+      },
+      has(property) {
+        return blocked.includes(property) ? false : property in props;
+      },
+      keys() {
+        return Object.keys(props).filter((k) => !blocked.includes(k));
+      }
+    }, propTraps));
+    return res;
+  }
+  const objects = [];
+  for (let i = 0; i <= len; i++) {
+    objects[i] = {};
+  }
+  for (const propName of Object.getOwnPropertyNames(props)) {
+    let keyIndex = len;
+    for (let i = 0; i < keys.length; i++) {
+      if (keys[i].includes(propName)) {
+        keyIndex = i;
+        break;
+      }
+    }
+    const desc = Object.getOwnPropertyDescriptor(props, propName);
+    const isDefaultDesc = !desc.get && !desc.set && desc.enumerable && desc.writable && desc.configurable;
+    isDefaultDesc ? objects[keyIndex][propName] = desc.value : Object.defineProperty(objects[keyIndex], propName, desc);
+  }
+  return objects;
+}
+var counter = 0;
+function createUniqueId() {
+  const ctx = sharedConfig.context;
+  return ctx ? sharedConfig.getNextContextId() : `cl-${counter++}`;
+}
+var narrowedError = (name) => `Stale read from <${name}>.`;
+function For(props) {
+  const fallback = "fallback" in props && {
+    fallback: () => props.fallback
+  };
+  return createMemo(mapArray(() => props.each, props.children, fallback || void 0));
+}
+function Show(props) {
+  const keyed = props.keyed;
+  const conditionValue = createMemo(() => props.when, void 0, void 0);
+  const condition = keyed ? conditionValue : createMemo(conditionValue, void 0, {
+    equals: (a, b) => !a === !b
+  });
+  return createMemo(() => {
+    const c = condition();
+    if (c) {
+      const child = props.children;
+      const fn = typeof child === "function" && child.length > 0;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (!untrack(condition)) throw narrowedError("Show");
+        return conditionValue();
+      })) : child;
+    }
+    return props.fallback;
+  }, void 0, void 0);
+}
+
+// src/components/SSDataTable.tsx
+function SSDataCell(props) {
+  const rendered = createMemo(() => props.render(props.row));
+  const [asyncContent] = createResource(async () => {
+    const value = rendered();
+    if (value && typeof value.then === "function") {
+      return await value;
+    }
+    return null;
+  });
+  return <div>
+      {(() => {
+    const value = rendered();
+    if (value && typeof value.then === "function") {
+      return asyncContent() ?? "";
+    }
+    return value;
+  })()}
+    </div>;
+}
+function SSDataTable(props) {
+  const [sortIndex, setSortIndex] = createSignal(-1);
+  const [sortDir, setSortDir] = createSignal(null);
+  const [page, setPage] = createSignal(1);
+  const pageSize = () => Math.max(1, props.pageSize ?? 25);
+  const sortedRows = createMemo(() => {
+    const index = sortIndex();
+    const dir = sortDir();
+    if (index < 0 || !dir) return props.rows;
+    const column = props.columns[index];
+    if (!column?.sortKey) return props.rows;
+    const entries = props.rows.map((row, idx) => ({
+      row,
+      idx,
+      key: column.sortKey(row)
+    }));
+    entries.sort((a, b) => {
+      if (a.key === b.key) return a.idx - b.idx;
+      if (a.key < b.key) return dir === "asc" ? -1 : 1;
+      return dir === "asc" ? 1 : -1;
+    });
+    return entries.map((entry) => entry.row);
+  });
+  const totalPages = createMemo(() => {
+    return Math.max(1, Math.ceil(sortedRows().length / pageSize()));
+  });
+  const pagedRows = createMemo(() => {
+    const current = Math.min(page(), totalPages());
+    const start = (current - 1) * pageSize();
+    return sortedRows().slice(start, start + pageSize());
+  });
+  createEffect(() => {
+    if (page() > totalPages()) setPage(totalPages());
+  });
+  const toggleSort = (index) => {
+    if (sortIndex() !== index) {
+      setSortIndex(index);
+      setSortDir("asc");
+      setPage(1);
+      return;
+    }
+    if (sortDir() === "asc") {
+      setSortDir("desc");
+      return;
+    }
+    if (sortDir() === "desc") {
+      setSortIndex(-1);
+      setSortDir(null);
+      setPage(1);
+      return;
+    }
+    setSortDir("asc");
+    setPage(1);
+  };
+  const goToPage = (next) => {
+    const safePage = Math.min(Math.max(1, next), totalPages());
+    setPage(safePage);
+  };
+  const paginationPosition = () => props.paginationPosition ?? "bottom";
+  const containerClass = () => `ss_table ${paginationPosition() === "top" ? "ss_table--pagination-top" : ""} ${props.class ?? ""}`;
+  const paginationBar = () => <div class="ss_table__pagination">
+      <button
+    type="button"
+    class="ss_table__page_button"
+    disabled={page() === 1}
+    aria-label="Erste Seite"
+    onclick={() => goToPage(1)}
+  >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 6v12" /><path d="M18 6l-6 6l6 6" /></svg>
+      </button>
+      <button
+    type="button"
+    class="ss_table__page_button"
+    disabled={page() === 1}
+    aria-label="Vorherige Seite"
+    onclick={() => goToPage(page() - 1)}
+  >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 6l-6 6l6 6" /></svg>
+      </button>
+      <span class="ss_table__page_info">
+        Seite {page()} von {totalPages()}
+      </span>
+      <button
+    type="button"
+    class="ss_table__page_button"
+    disabled={page() === totalPages()}
+    aria-label="Nächste Seite"
+    onclick={() => goToPage(page() + 1)}
+  >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 6l6 6l-6 6" /></svg>
+      </button>
+      <button
+    type="button"
+    class="ss_table__page_button"
+    disabled={page() === totalPages()}
+    aria-label="Letzte Seite"
+    onclick={() => goToPage(totalPages())}
+  >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 6l6 6l-6 6" /><path d="M17 5v13" /></svg>
+      </button>
+    </div>;
+  return <div class={containerClass()} style={props.style}>
+      {paginationPosition() === "top" && paginationBar()}
+      <div class="ss_table__scroll">
+        <table>
+        <thead>
+          <tr>
+            <For each={props.columns}>
+              {(column, index) => {
+    const sortable = !!column.sortKey;
+    const isActive = () => sortIndex() === index();
+    const currentDir = () => isActive() ? sortDir() : null;
+    return <th>
+                    {sortable ? <button
+      type="button"
+      class="ss_table__sort_button"
+      aria-sort={currentDir() === "asc" ? "ascending" : currentDir() === "desc" ? "descending" : "none"}
+      data-sort={currentDir() ?? "none"}
+      onclick={() => toggleSort(index())}
+    >
+                        {column.label}
+                        <span class="ss_table__sort_icon" aria-hidden="true">
+                          {currentDir() === "asc" ? <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg> : currentDir() === "desc" ? <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 15l6 -6l6 6" /></svg> : <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-selector"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M8 9l4 -4l4 4" /><path d="M16 15l-4 4l-4 -4" /></svg>}
+                        </span>
+                      </button> : <span class="ss_table__header_label">{column.label}</span>}
+                  </th>;
+  }}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={pagedRows()}>
+            {(row) => <tr
+    data-clickable={props.onRowClick ? "true" : void 0}
+    onclick={() => props.onRowClick?.(row)}
+  >
+                <For each={props.columns}>
+                  {(column) => <td>
+                      <SSDataCell row={row} render={column.render} />
+                    </td>}
+                </For>
+              </tr>}
+          </For>
+        </tbody>
+        </table>
+      </div>
+      {paginationPosition() === "bottom" && paginationBar()}
+    </div>;
+}
+
+// src/components/SSDropdown.tsx
+function SSDropdown(props) {
+  const [open, setOpen] = createSignal(false);
+  const [renderMenu, setRenderMenu] = createSignal(false);
+  const [menuState, setMenuState] = createSignal("closed");
+  let rootRef;
+  const close = () => setOpen(false);
+  createEffect(() => {
+    if (open()) {
+      setRenderMenu(true);
+      requestAnimationFrame(() => setMenuState("open"));
+      return;
+    }
+    if (!renderMenu()) return;
+    setMenuState("closed");
+    const timeout = window.setTimeout(() => setRenderMenu(false), 160);
+    onCleanup(() => window.clearTimeout(timeout));
+  });
+  onMount(() => {
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!rootRef || !target) return;
+      if (!rootRef.contains(target)) close();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+  return <div class={`ss_dropdown ${props.class ?? ""}`} style={props.style} ref={(el) => rootRef = el}>
+      <button
+    type="button"
+    class="ss_dropdown__trigger ss_button ss_button--icon"
+    aria-haspopup="menu"
+    aria-expanded={open()}
+    aria-label={props.ariaLabel ?? "Aktionen \xF6ffnen"}
+    onclick={() => setOpen((value) => !value)}
+  >
+        {props.icon ?? <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>}
+      </button>
+
+      <Show when={renderMenu()}>
+        <div
+    class="ss_dropdown__menu"
+    role="menu"
+    data-state={menuState()}
+  >
+          <For each={props.items}>
+            {(item) => <button
+    type="button"
+    class="ss_dropdown__item"
+    role={item.checked ? "menuitemcheckbox" : "menuitem"}
+    aria-checked={item.checked ? "true" : void 0}
+    onclick={async () => {
+      close();
+      await item.onclick?.();
+    }}
+  >
+                <span class="ss_dropdown__item_icon">{item.icon}</span>
+                <span class="ss_dropdown__item_label">{item.label}</span>
+                {item.checked && <span class="ss_dropdown__item_check" aria-hidden="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
+                  </span>}
+              </button>}
+          </For>
+        </div>
+      </Show>
+    </div>;
+}
+
+// src/components/SSExpandable.tsx
+var TRANSITION_MS = 200;
+function SSExpandable(props) {
+  const [height, setHeight] = createSignal(props.initiallyExpanded ? "auto" : 0);
+  const isExpanded = createMemo(() => height() !== 0);
+  let contentRef;
+  let timeoutId;
+  const toggle = () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    const targetHeight = contentRef?.scrollHeight ?? 0;
+    if (isExpanded()) {
+      setHeight(targetHeight);
+      timeoutId = window.setTimeout(() => setHeight(0), 1);
+      return;
+    }
+    setHeight(targetHeight);
+    timeoutId = window.setTimeout(() => setHeight("auto"), TRANSITION_MS);
+  };
+  onCleanup(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+  return <div
+    class={`ss_expandable ${props.class ?? ""}`}
+    style={props.style}
+    data-state={isExpanded() ? "open" : "closed"}
+  >
+      <div
+    class="ss_expandable__header"
+    role="button"
+    tabindex="0"
+    aria-expanded={isExpanded()}
+    onclick={toggle}
+    onkeydown={(event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggle();
+      }
+    }}
+  >
+        <span class="ss_expandable__icon" aria-hidden="true">
+          {isExpanded() ? <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg> : <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 6l6 6l-6 6" /></svg>}
+        </span>
+        <span class="ss_expandable__title">{props.title}</span>
+      </div>
+
+      <div
+    ref={(el) => contentRef = el}
+    class="ss_expandable__content"
+    style={{
+      height: typeof height() === "number" ? `${height()}px` : height(),
+      "transition-duration": `${TRANSITION_MS}ms`
+    }}
+  >
+        <div class='ss_expandable__divider_wrapper'>
+          <div class="ss_expandable__divider" />
+          {props.children}
+        </div>
+      </div>
+    </div>;
+}
+
+// src/hooks/createLoading.ts
+function createLoading() {
+  const [loading, setLoading] = createSignal(false);
+  return [loading, async (callback) => {
+    if (loading()) return;
+    try {
+      setLoading(true);
+      await callback();
+    } finally {
+      setLoading(false);
+    }
+  }];
+}
+
+// src/components/SSForm.tsx
+var SSFormContext = createContext();
+var SSForm = function(props) {
+  const [loading, process] = createLoading();
+  const fields = {};
+  const context = {
+    loading,
+    process: (action) => process(() => action(context)),
+    field: (name) => fields[name] ?? null,
+    setField: (name, field) => {
+      fields[name] = field;
+    },
+    delField: (name) => {
+      delete fields[name];
+    },
+    setValues: (values) => Object.entries(values).forEach(([name, value]) => fields[name]?.setValue(value)),
+    getValues: () => Object.fromEntries(Object.entries(fields).map(([name, field]) => [name, field.getValue()])),
+    validate: () => Promise.all(Object.values(fields).map((field) => field.validate())).then(),
+    hasError: () => Object.values(fields).some((field) => field.hasError()),
+    submit: () => process(async () => {
+      await context.validate();
+      if (context.hasError()) return;
+      await props.onsubmit?.(context);
+    })
+  };
+  return <form class="ss_form" onsubmit={(e) => {
+    e.preventDefault();
+    context.submit();
+  }}>
+    <SSFormContext.Provider value={context}>
+      {props.children}
+    </SSFormContext.Provider>
+  </form>;
+};
+SSForm.Input = function(props) {
+  const context = useContext(SSFormContext);
+  const [value, setValue] = createSignal("");
+  const [error, setError] = createSignal(null);
+  const field = {
+    getValue: () => {
+      const trimmed = value().trim();
+      if (!trimmed) return null;
+      return trimmed;
+    },
+    setValue: (value2) => {
+      if (typeof value2 === "number") {
+        setValue(value2.toLocaleString());
+        return;
+      }
+      setValue(`${value2}`);
+    },
+    hasError: () => !!error(),
+    validate: async () => {
+      const rules = [...props.rules ?? []];
+      if (props.required) rules.unshift(SSForm.rules.required);
+      const value2 = await field.getValue();
+      for (const rule of rules) {
+        const newError = await rule(value2);
+        if (newError) {
+          setError(newError);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  let suggInitData = null;
+  const [suggItems, setSuggItems] = createSignal([]);
+  const [suggIndex, setSuggIndex] = createSignal(-1);
+  let suggListRef;
+  if (props.suggestions) {
+    const sugg = props.suggestions;
+    const [initialized, setInitialized] = createSignal(!sugg.prepare);
+    if (sugg.prepare) onMount(async () => {
+      if (!sugg.prepare) return;
+      suggInitData = await sugg.prepare();
+      setInitialized(true);
+    });
+    let timeout;
+    createEffect(() => {
+      clearTimeout(timeout ?? void 0);
+      if (!initialized()) return;
+      setSuggItems([]);
+      const query2 = value().trim().toLowerCase();
+      if (!query2) return;
+      timeout = setTimeout(async () => {
+        const items = await sugg.getItems({ query: query2, init: suggInitData });
+        setSuggItems(items);
+      }, 250);
+    });
+    onCleanup(() => clearTimeout(timeout ?? void 0));
+  }
+  createEffect(() => {
+    const items = suggItems();
+    if (!items.length) {
+      setSuggIndex(-1);
+      return;
+    }
+    if (suggIndex() >= items.length) setSuggIndex(items.length - 1);
+  });
+  const scrollToIndex = (idx) => {
+    const list = suggListRef;
+    if (!list || idx < 0) return;
+    const item = list.querySelectorAll("li")[idx];
+    if (!item) return;
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const viewTop = list.scrollTop;
+    const viewBottom = viewTop + list.clientHeight;
+    if (itemTop < viewTop) list.scrollTop = itemTop;
+    else if (itemBottom > viewBottom) list.scrollTop = itemBottom - list.clientHeight;
+  };
+  const moveIndex = (delta) => {
+    const items = suggItems();
+    if (!items.length) return;
+    const next = Math.max(-1, Math.min(suggIndex() + delta, items.length - 1));
+    setSuggIndex(next);
+    scrollToIndex(next);
+  };
+  const selectSuggestion = (item) => {
+    setValue(props.suggestions.stringify({ item, init: suggInitData }));
+    setSuggIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!suggItems().length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveIndex(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveIndex(-1);
+    } else if (e.key === "Enter" && suggIndex() >= 0) {
+      e.preventDefault();
+      const item = suggItems()[suggIndex()];
+      if (item) selectSuggestion(item);
+    } else if (e.key === "Escape") {
+      setSuggIndex(-1);
+    }
+  };
+  const handleInputChange = (next) => {
+    setValue(next);
+    setSuggIndex(-1);
+  };
+  const _id = createUniqueId();
+  return <div class="ss_form_input">
+    <label for={props.id || _id}>{props.label}</label>
+
+    <div class="ss__wrapper">
+      {props.textArea ? <textarea
+    id={props.id || _id}
+    value={value()}
+    oninput={(e) => handleInputChange(e.target.value)}
+    onkeydown={handleKeyDown}
+    disabled={props.disabled || context?.loading()}
+  /> : <input
+    id={props.id || _id}
+    value={value()}
+    oninput={(e) => handleInputChange(e.target.value)}
+    onkeydown={handleKeyDown}
+    disabled={props.disabled || context?.loading()}
+    type={props.type}
+  />}
+
+      {!!suggItems().length && <ul class="ss__suggestions" ref={(el) => suggListRef = el}>
+        <For each={suggItems()}>
+          {(item, idx) => {
+    const handleSelect = () => {
+      const active = document.activeElement;
+      if (active instanceof HTMLElement) active.blur();
+      selectSuggestion(item);
+    };
+    return <li
+      onpointerdown={(e) => e.preventDefault()}
+      onclick={handleSelect}
+      classList={{ "ss__hovered": idx() === suggIndex() }}
+    >
+              {props.suggestions.stringify({ item, init: suggInitData })}
+            </li>;
+  }}
+        </For>
+      </ul>}
+    </div>
+
+    {!!error() && <span role="alert">{error()}</span>}
+  </div>;
+};
+SSForm.Date = function(props) {
+  const context = useContext(SSFormContext);
+  const [value, setValue] = createSignal("");
+  const [error, setError] = createSignal(null);
+  const [open, setOpen] = createSignal(false);
+  const [viewDate, setViewDate] = createSignal(/* @__PURE__ */ new Date());
+  let containerRef;
+  const pad = (num) => `${num}`.padStart(2, "0");
+  const formatDate = (date) => {
+    const day = pad(date.getDate());
+    const month = pad(date.getMonth() + 1);
+    const year = date.getFullYear();
+    return `${day}.${month}.${year}`;
+  };
+  const parseDate = (input) => {
+    const trimmed = input.trim();
+    if (!trimmed) return null;
+    const match = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(trimmed);
+    if (!match) return null;
+    const day = Number(match[1]);
+    const month = Number(match[2]);
+    const year = Number(match[3]);
+    if (!day || !month) return null;
+    const date = new Date(year, month - 1, day);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+      return null;
+    }
+    return date;
+  };
+  createEffect(() => {
+    if (!open()) return;
+    const parsed = parseDate(value());
+    setViewDate(parsed ?? /* @__PURE__ */ new Date());
+  });
+  const field = {
+    getValue: () => {
+      const trimmed = value().trim();
+      if (!trimmed) return null;
+      return trimmed;
+    },
+    setValue: (value2) => {
+      if (value2 instanceof Date) {
+        setValue(formatDate(value2));
+        return;
+      }
+      setValue(`${value2 ?? ""}`);
+    },
+    hasError: () => !!error(),
+    validate: async () => {
+      const rules = [...props.rules ?? []];
+      if (props.required) rules.unshift(SSForm.rules.required);
+      const value2 = await field.getValue();
+      for (const rule of rules) {
+        const newError = await rule(value2);
+        if (newError) {
+          setError(newError);
+          return;
+        }
+      }
+      if (value2 && !parseDate(value2)) {
+        setError("Ung\xFCltiges Datum");
+        return;
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  const _id = createUniqueId();
+  const isSelected = (day) => {
+    const parsed = parseDate(value());
+    if (!parsed) return false;
+    return parsed.getFullYear() === viewDate().getFullYear() && parsed.getMonth() === viewDate().getMonth() && parsed.getDate() === day;
+  };
+  const isToday = (day) => {
+    const today = /* @__PURE__ */ new Date();
+    return today.getFullYear() === viewDate().getFullYear() && today.getMonth() === viewDate().getMonth() && today.getDate() === day;
+  };
+  const buildCalendar = () => {
+    const current = viewDate();
+    const year = current.getFullYear();
+    const month = current.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const startOffset = (firstDay.getDay() + 6) % 7;
+    const cells = [];
+    for (let i = 0; i < startOffset; i += 1) cells.push(null);
+    for (let day = 1; day <= daysInMonth; day += 1) cells.push(day);
+    while (cells.length % 7 !== 0) cells.push(null);
+    return cells;
+  };
+  const monthLabel = () => {
+    return viewDate().toLocaleDateString("de-DE", { month: "long", year: "numeric" });
+  };
+  const handleSelect = (day) => {
+    const next = new Date(viewDate().getFullYear(), viewDate().getMonth(), day);
+    setValue(formatDate(next));
+    setOpen(false);
+  };
+  onMount(() => {
+    const handleOutside = (event) => {
+      if (!open()) return;
+      const target = event.target;
+      if (containerRef && target && !containerRef.contains(target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+  return <div class="ss_form_date" ref={(el) => containerRef = el}>
+    <label for={props.id || _id}>{props.label}</label>
+
+    <div class="ss__wrapper">
+      <input
+    id={props.id || _id}
+    value={value()}
+    oninput={(e) => setValue(e.target.value)}
+    onfocus={() => setOpen(true)}
+    disabled={props.disabled || context?.loading()}
+    readonly={!props.editable}
+    type="text"
+    inputmode="numeric"
+    autocomplete="off"
+    placeholder="TT.MM.JJJJ"
+  />
+      <button
+    type="button"
+    class="ss_form_date__icon"
+    aria-label="Kalender öffnen"
+    aria-haspopup="dialog"
+    aria-expanded={open()}
+    onclick={() => setOpen((value2) => !value2)}
+    disabled={props.disabled || context?.loading()}
+  >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-calendar-week"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z" /><path d="M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z" /><path d="M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /></svg>
+      </button>
+    </div>
+
+    {open() && <div class="ss_form_date__picker" role="dialog" aria-label="Datum auswählen">
+        <div class="ss_form_date__header">
+          <div class="ss_form_date__nav_group">
+            <button type="button" class="ss_form_date__nav" onclick={() => {
+    const current = viewDate();
+    setViewDate(new Date(current.getFullYear() - 1, current.getMonth(), 1));
+  }}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 6v12" /><path d="M18 6l-6 6l6 6" /></svg>
+            </button>
+            <button type="button" class="ss_form_date__nav" onclick={() => {
+    const current = viewDate();
+    setViewDate(new Date(current.getFullYear(), current.getMonth() - 1, 1));
+  }}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 6l-6 6l6 6" /></svg>
+            </button>
+          </div>
+          <div class="ss_form_date__title">{monthLabel()}</div>
+          <div class="ss_form_date__nav_group">
+            <button type="button" class="ss_form_date__nav" onclick={() => {
+    const current = viewDate();
+    setViewDate(new Date(current.getFullYear(), current.getMonth() + 1, 1));
+  }}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 6l6 6l-6 6" /></svg>
+            </button>
+            <button type="button" class="ss_form_date__nav" onclick={() => {
+    const current = viewDate();
+    setViewDate(new Date(current.getFullYear() + 1, current.getMonth(), 1));
+  }}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 6l6 6l-6 6" /><path d="M17 5v13" /></svg>
+            </button>
+          </div>
+        </div>
+        <div class="ss_form_date__weekdays">
+          {["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"].map((day) => <span>{day}</span>)}
+        </div>
+        <div class="ss_form_date__grid">
+          {buildCalendar().map((day) => day ? <button
+    type="button"
+    class="ss_form_date__day"
+    classList={{ "is-selected": isSelected(day), "is-today": isToday(day) }}
+    onclick={() => handleSelect(day)}
+  >
+                {day}
+              </button> : <span class="ss_form_date__day is-empty" />)}
+        </div>
+      </div>}
+
+    {!!error() && <span role="alert">{error()}</span>}
+  </div>;
+};
+SSForm.Checkbox = function(props) {
+  const context = useContext(SSFormContext);
+  const [value, setValue] = createSignal(false);
+  const [error, setError] = createSignal(null);
+  const field = {
+    getValue: () => value(),
+    setValue: (value2) => setValue(!!value2),
+    hasError: () => !!error(),
+    validate: async () => {
+      const rules = [...props.rules ?? []];
+      if (props.required) rules.unshift(SSForm.rules.required);
+      const value2 = await field.getValue();
+      for (const rule of rules) {
+        const newError = await rule(value2);
+        if (newError) {
+          setError(newError);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  const _id = createUniqueId();
+  return <div class="ss_form_checkbox">
+    <div class="ss__wrapper">
+      <input
+    id={props.id || _id}
+    type="checkbox"
+    checked={value()}
+    onchange={(e) => setValue(e.target.checked)}
+    disabled={props.disabled || context?.loading()}
+  />
+      <label for={props.id || _id}>{props.label}</label>
+    </div>
+
+    {!!error() && <span role="alert">{error()}</span>}
+  </div>;
+};
+SSForm.useContext = function() {
+  const context = useContext(SSFormContext);
+  if (!context) return null;
+  const { setField, delField, ...publicContext } = context;
+  return publicContext;
+};
+SSForm.Select = function(props) {
+  const context = useContext(SSFormContext);
+  const [options, setOptions] = createSignal([]);
+  const [value, setValue] = createSignal(null);
+  const [error, setError] = createSignal(null);
+  const handleSetOptions = (result) => {
+    const built = result.map((opt) => ({ id: opt.id, label: props.buildOption(opt) }));
+    setOptions(built);
+    if (!result.length) {
+      setValue(null);
+      return;
+    }
+    if (value() && built.some((e) => e.id === value())) return;
+    setValue(built[0].id);
+  };
+  createEffect(() => {
+    const newOptions = props.getOptions();
+    if ("then" in newOptions && typeof newOptions.then === "function" || newOptions instanceof Promise) {
+      newOptions.then(handleSetOptions);
+    } else {
+      handleSetOptions(newOptions);
+    }
+  });
+  const field = {
+    getValue: () => {
+      const _value = value();
+      const availableOptions = options();
+      if (!availableOptions.some((e) => e.id === _value)) {
+        return null;
+      }
+      return _value;
+    },
+    setValue: (newValue) => {
+      const availableOptions = options();
+      if (!availableOptions.length) {
+        setValue(null);
+        return;
+      }
+      const defaultOption = availableOptions[0].id;
+      if (typeof newValue !== "string") {
+        setValue(defaultOption);
+        return;
+      }
+      const _newValue = newValue.trim();
+      if (!availableOptions.some((e) => e.id === _newValue)) {
+        setValue(defaultOption);
+        return;
+      }
+      setValue(_newValue);
+    },
+    hasError: () => !!error(),
+    validate: async () => {
+      const availableOptions = options();
+      const value2 = await field.getValue();
+      if (!value2) {
+        setError("Pflichtfeld");
+        return;
+      }
+      if (!availableOptions.some((e) => e.id === value2)) {
+        setError("Option nicht verf\xFCgbar");
+        return;
+      }
+      for (const rule of props.rules ?? []) {
+        const err = await rule(value2);
+        if (err) {
+          setError(err);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  field.setOptions = handleSetOptions;
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  const _id = createUniqueId();
+  return <div class="ss_form_select">
+    <label for={props.id || _id}>{props.label}</label>
+
+    <div class="ss_form_select__field">
+      <select
+    id={props.id || _id}
+    onchange={(e) => setValue(e.target.value)}
+    disabled={props.disabled || context?.loading()}
+  >
+        <For each={options()}>
+          {(opt) => <option value={opt.id} selected={value() === opt.id}>{opt.label}</option>}
+        </For>
+      </select>
+      <span class="ss_form_select__icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg>
+      </span>
+    </div>
+
+    {!!error() && <span role="alert">{error()}</span>}
+  </div>;
+};
+SSForm.ACSelect = function(props) {
+  const context = useContext(SSFormContext);
+  const [query2, setQuery] = createSignal("");
+  const [value, setValue] = createSignal([]);
+  const [error, setError] = createSignal(null);
+  const field = {
+    getValue: () => value(),
+    setValue: (newValue) => setValue(newValue),
+    hasError: () => !!error(),
+    validate: async () => {
+      const value2 = await field.getValue();
+      const min = props.minSelectedItems;
+      const max = props.maxSelectedItems;
+      if (min) {
+        if (value2.length < min) {
+          setError(`Mindestens ${min} ${min > 1 ? "Elemente m\xFCssen" : "Element muss"} ausgew\xE4hlt werden`);
+          return;
+        }
+      }
+      if (max) {
+        if (value2.length > max) {
+          setError(`Maximal ${max} ${max > 1 ? "Elemente d\xFCrfen" : "Element darf"} ausgew\xE4hlt werden`);
+          return;
+        }
+      }
+      for (const rule of props.rules ?? []) {
+        const err = await rule(value2);
+        if (err) {
+          setError(err);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  let initData = null;
+  const [initialized, setInitialized] = createSignal(!props.prepare);
+  if (props.prepare) onMount(async () => {
+    if (!props.prepare) return;
+    initData = await props.prepare();
+    setInitialized(true);
+  });
+  const [suggItems, setSuggItems] = createSignal([]);
+  const [suggIndex, setSuggIndex] = createSignal(-1);
+  let suggListRef;
+  let timeout;
+  createEffect(() => {
+    if (!initialized()) return;
+    clearTimeout(timeout);
+    const _query = query2().trim().toLowerCase();
+    if (!_query) {
+      setSuggItems(untrack(() => value()));
+      return;
+    }
+    setSuggItems([]);
+    timeout = setTimeout(async () => {
+      const items = await props.getOptions({ query: _query, init: initData });
+      setSuggItems(items);
+    }, 250);
+  });
+  createEffect(() => {
+    const _query = query2().trim().toLowerCase();
+    if (_query) return;
+    if (suggItems().length !== value().length) setSuggItems(value());
+  });
+  onCleanup(() => clearTimeout(timeout));
+  createEffect(() => {
+    const items = suggItems();
+    if (!items.length) {
+      setSuggIndex(-1);
+      return;
+    }
+    if (suggIndex() >= items.length) setSuggIndex(items.length - 1);
+  });
+  const scrollToIndex = (idx) => {
+    const list = suggListRef;
+    if (!list || idx < 0) return;
+    const item = list.querySelectorAll("li")[idx];
+    if (!item) return;
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const viewTop = list.scrollTop;
+    const viewBottom = viewTop + list.clientHeight;
+    if (itemTop < viewTop) list.scrollTop = itemTop;
+    else if (itemBottom > viewBottom) list.scrollTop = itemBottom - list.clientHeight;
+  };
+  const moveIndex = (delta) => {
+    const items = suggItems();
+    if (!items.length) return;
+    const next = Math.max(-1, Math.min(suggIndex() + delta, items.length - 1));
+    setSuggIndex(next);
+    scrollToIndex(next);
+  };
+  const _id = createUniqueId();
+  const selectedIds = createMemo(() => {
+    return new Set(value().map(({ id }) => id));
+  });
+  const selectItem = (item, resetIndex = true) => {
+    const isSelected = selectedIds().has(item.id);
+    if (props.maxSelectedItems === 1) {
+      setValue(isSelected ? [] : [item]);
+      setQuery("");
+      if (resetIndex) setSuggIndex(-1);
+      return;
+    }
+    if (isSelected) {
+      setValue((value2) => value2.filter(({ id }) => id !== item.id));
+    } else {
+      setValue((value2) => [...value2.filter(({ id }) => id !== item.id), item]);
+    }
+    if (resetIndex) setSuggIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!suggItems().length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveIndex(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveIndex(-1);
+    } else if (e.key === "Enter" && suggIndex() >= 0) {
+      e.preventDefault();
+      const item = suggItems()[suggIndex()];
+      if (item) selectItem(item, false);
+    } else if (e.key === "Escape") {
+      setSuggIndex(-1);
+    }
+  };
+  const isDisabled = () => props.disabled || context?.loading();
+  return <div class="ss_form_ac_select">
+    <label for={props.id || _id}>{props.label}</label>
+
+    {props.maxSelectedItems === 1 && !!props.renderSelection && value().length === 1 ? <div class="ss__selection">
+        <div class="ss__content">
+          {props.renderSelection({ item: value()[0], init: initData })}
+        </div>
+        <button
+    type="button"
+    class="ss__clear"
+    disabled={isDisabled()}
+    aria-label="Auswahl entfernen"
+    onclick={() => {
+      setValue([]);
+      setQuery("");
+      setTimeout(() => document.getElementById(props.id || _id)?.focus(), 0);
+    }}
+  >
+          ×
+        </button>
+      </div> : <div class="ss__wrapper">
+
+        <div class="ss__input_row">
+          {!!value().length && <span
+    class="ss__prefix"
+    role="button"
+    tabindex={isDisabled() ? -1 : 0}
+    aria-disabled={isDisabled() ? "true" : void 0}
+    onkeydown={(event) => {
+      if (isDisabled()) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        setValue([]);
+      }
+    }}
+    onclick={() => {
+      if (isDisabled()) return;
+      setValue([]);
+    }}
+  >
+            {value().length}
+          </span>}
+
+          <input
+    id={props.id || _id}
+    value={query2()}
+    oninput={(e) => {
+      if (isDisabled()) return;
+      setQuery(e.target.value);
+      setSuggIndex(-1);
+    }}
+    onkeydown={handleKeyDown}
+    disabled={isDisabled()}
+  />
+        </div>
+
+        {!!suggItems().length && <ul class="ss__suggestions" ref={(el) => suggListRef = el}>
+          <For each={suggItems()}>
+            {(item, idx) => {
+    const handleSelect = () => {
+      if (isDisabled()) return;
+      selectItem(item);
+      document.getElementById(props.id || _id)?.focus();
+    };
+    return <li
+      onpointerdown={(e) => e.preventDefault()}
+      onclick={handleSelect}
+      classList={{
+        "ss__selected": selectedIds().has(item.id),
+        "ss__hovered": idx() === suggIndex()
+      }}
+    >
+                {props.renderItem({ item, init: initData })}
+              </li>;
+  }}
+          </For>
+        </ul>}
+      </div>}
+
+    {!!error() && <span role="alert">{error()}</span>}
+  </div>;
+};
+SSForm.SubmitButton = function(props) {
+  const context = useContext(SSFormContext);
+  return <SSButton
+    type="submit"
+    class="ss_form_submit"
+    disabled={props.disabled || context?.loading()}
+  >
+    {props.children}
+  </SSButton>;
+};
+SSForm.rules = {
+  required: (value) => !value ? "Pflichtfeld" : null,
+  minLength: (length) => (value) => {
+    if (value === null) value = "";
+    if (typeof value !== "string") {
+      throw new Error(`invalid rule minLength(..) for non-string value ${value}`);
+    }
+    if (value.length < length) return `Mindestens ${length} Zeichen`;
+    return null;
+  },
+  maxLength: (length) => (value) => {
+    if (value === null) value = "";
+    if (typeof value !== "string") {
+      throw new Error(`invalid rule maxLength(..) for non-string value ${value}`);
+    }
+    if (value.length < length) return `Maximal ${length} Zeichen`;
+    return null;
+  },
+  pattern: (pattern) => (value) => {
+    if (value === null) value = "";
+    if (typeof value !== "string") {
+      throw new Error(`invalid rule pattern(..) for non-string value ${value}`);
+    }
+    if (!pattern.test(value)) return "Eingabe widerspricht erwartetem Muster";
+    return null;
+  }
+};
+
+// src/components/SSHeader.tsx
+function SSHeader(props) {
+  return <div class={`ss_header ${props.class ?? ""}`} style={props.style}>
+      <div class="ss_header__text">
+        <h3 class="ss_header__title">{props.title}</h3>
+        {props.subtitle && <h5 class="ss_header__subtitle">{props.subtitle}</h5>}
+      </div>
+      <div class="ss_header__actions">{props.actions}</div>
+    </div>;
+}
+
+// node_modules/solid-js/web/dist/web.js
+var booleans = [
+  "allowfullscreen",
+  "async",
+  "alpha",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "indeterminate",
+  "inert",
+  "ismap",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "seamless",
+  "selected",
+  "adauctionheaders",
+  "browsingtopics",
+  "credentialless",
+  "defaultchecked",
+  "defaultmuted",
+  "defaultselected",
+  "defer",
+  "disablepictureinpicture",
+  "disableremoteplayback",
+  "preservespitch",
+  "shadowrootclonable",
+  "shadowrootcustomelementregistry",
+  "shadowrootdelegatesfocus",
+  "shadowrootserializable",
+  "sharedstoragewritable"
+];
+var Properties = /* @__PURE__ */ new Set([
+  "className",
+  "value",
+  "readOnly",
+  "noValidate",
+  "formNoValidate",
+  "isMap",
+  "noModule",
+  "playsInline",
+  "adAuctionHeaders",
+  "allowFullscreen",
+  "browsingTopics",
+  "defaultChecked",
+  "defaultMuted",
+  "defaultSelected",
+  "disablePictureInPicture",
+  "disableRemotePlayback",
+  "preservesPitch",
+  "shadowRootClonable",
+  "shadowRootCustomElementRegistry",
+  "shadowRootDelegatesFocus",
+  "shadowRootSerializable",
+  "sharedStorageWritable",
+  ...booleans
+]);
+var ChildProperties = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]);
+var Aliases = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
+var PropAliases = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+  class: "className",
+  novalidate: {
+    $: "noValidate",
+    FORM: 1
+  },
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  },
+  adauctionheaders: {
+    $: "adAuctionHeaders",
+    IFRAME: 1
+  },
+  allowfullscreen: {
+    $: "allowFullscreen",
+    IFRAME: 1
+  },
+  browsingtopics: {
+    $: "browsingTopics",
+    IMG: 1
+  },
+  defaultchecked: {
+    $: "defaultChecked",
+    INPUT: 1
+  },
+  defaultmuted: {
+    $: "defaultMuted",
+    AUDIO: 1,
+    VIDEO: 1
+  },
+  defaultselected: {
+    $: "defaultSelected",
+    OPTION: 1
+  },
+  disablepictureinpicture: {
+    $: "disablePictureInPicture",
+    VIDEO: 1
+  },
+  disableremoteplayback: {
+    $: "disableRemotePlayback",
+    AUDIO: 1,
+    VIDEO: 1
+  },
+  preservespitch: {
+    $: "preservesPitch",
+    AUDIO: 1,
+    VIDEO: 1
+  },
+  shadowrootclonable: {
+    $: "shadowRootClonable",
+    TEMPLATE: 1
+  },
+  shadowrootdelegatesfocus: {
+    $: "shadowRootDelegatesFocus",
+    TEMPLATE: 1
+  },
+  shadowrootserializable: {
+    $: "shadowRootSerializable",
+    TEMPLATE: 1
+  },
+  sharedstoragewritable: {
+    $: "sharedStorageWritable",
+    IFRAME: 1,
+    IMG: 1
+  }
+});
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? a[tagName] ? a["$"] : void 0 : a;
+}
+var 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"]);
+var 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 = /* @__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();
+    }
+  }
+}
+var $$EVENTS = "_$DX_DELEGATE";
+function template(html, isImportNode, isSVG, isMathML) {
+  let node;
+  const create = () => {
+    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
+    t.innerHTML = html;
+    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
+  };
+  const fn = isImportNode ? () => 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 (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 = 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 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 !== void 0 && !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") {
+      if (!skipChildren) insertExpression(node, props.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 !== void 0 ? 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 !== void 0;
+  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 === void 0) 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 === 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];
+}
+var voidFn = () => void 0;
+var isServer = false;
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function createElement(tagName, isSVG = false, is = void 0) {
+  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+    is
+  });
+}
+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((dispose2) => insert(el, () => !clean() ? content() : dispose2(), 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));
+    }
+  }, void 0, {
+    render: !hydrating
+  });
+  return marker;
+}
+
+// src/components/SSModal.tsx
+var CLOSE_ANIMATION_MS = 180;
+function SSModal(props) {
+  const [isMounted, setIsMounted] = createSignal(props.open);
+  const [state, setState] = createSignal("closed");
+  const titleId = createUniqueId();
+  let closeTimeout;
+  let rafId;
+  let panelRef;
+  createEffect(() => {
+    if (closeTimeout) clearTimeout(closeTimeout);
+    if (rafId) cancelAnimationFrame(rafId);
+    if (props.open) {
+      if (!isMounted()) setIsMounted(true);
+      setState("closed");
+      rafId = requestAnimationFrame(() => setState("open"));
+    } else {
+      setState("closed");
+      if (isMounted()) {
+        closeTimeout = window.setTimeout(() => setIsMounted(false), CLOSE_ANIMATION_MS);
+      }
+    }
+  });
+  onMount(() => {
+    if (!props.open) return;
+    if (props.lockScroll !== false) {
+      const prev = document.body.style.overflowY;
+      document.body.style.overflowY = "hidden";
+      onCleanup(() => {
+        document.body.style.overflowY = prev;
+      });
+    }
+    rafId = requestAnimationFrame(() => panelRef?.focus());
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && props.dismissible !== false) {
+        props.onClose?.();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+  });
+  onCleanup(() => {
+    if (closeTimeout) clearTimeout(closeTimeout);
+    if (rafId) cancelAnimationFrame(rafId);
+  });
+  const handleBackdropClick = () => {
+    if (props.dismissible === false) return;
+    props.onClose?.();
+  };
+  return <Show when={isMounted()}>
+      <Portal>
+        <div class="ss_modal" data-state={state()} aria-hidden={state() === "closed"}>
+          <div class="ss_modal__backdrop" onclick={handleBackdropClick} />
+          <div
+    class="ss_modal__panel"
+    classList={{
+      "ss_modal__panel--sm": props.size === "sm",
+      "ss_modal__panel--lg": props.size === "lg",
+      "ss_modal__panel--fullscreen": props.fullscreen,
+      "ss_modal__panel--no-fullscreen": props.disableResponsiveFullscreen
+    }}
+    ref={(el) => panelRef = el}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={props.title ? titleId : void 0}
+    tabindex="-1"
+  >
+            {(props.title || props.onClose) && <div class="ss_modal__header">
+                {props.title && <h2 id={titleId} class="ss_modal__title">
+                    {props.title}
+                  </h2>}
+                <Show when={props.onClose}>
+                  <SSButton
+    type="button"
+    class="ss_modal__close"
+    isIconOnly
+    ariaLabel="Dialog schließen"
+    onclick={() => {
+      if (props.dismissible === false) return;
+      props.onClose?.();
+    }}
+  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+                  </SSButton>
+                </Show>
+              </div>}
+
+            <div class="ss_modal__body">
+              <div class="ss_modal__body_inner">{props.children}</div>
+            </div>
+
+            <Show when={props.footer}>
+              <div class="ss_modal__footer">{props.footer}</div>
+            </Show>
+          </div>
+        </div>
+      </Portal>
+    </Show>;
+}
+
+// node_modules/@solidjs/router/dist/index.js
+var depth;
+function saveCurrentDepth() {
+  if (!window.history.state || window.history.state._depth == null) {
+    window.history.replaceState({
+      ...window.history.state,
+      _depth: window.history.length - 1
+    }, "");
+  }
+  depth = window.history.state._depth;
+}
+if (!isServer) {
+  saveCurrentDepth();
+}
+var trimPathRegex = /^\/+|(\/)\/+$/g;
+function normalizePath(path, omitSlash = false) {
+  const s = path.replace(trimPathRegex, "$1");
+  return s ? omitSlash || /^[?#]/.test(s) ? s : "/" + s : "";
+}
+function invariant(value, message) {
+  if (value == null) {
+    throw new Error(message);
+  }
+  return value;
+}
+var RouterContextObj = createContext();
+var RouteContextObj = createContext();
+var useRouter = () => invariant(useContext(RouterContextObj), "<A> and 'use' router primitives can be only used inside a Route.");
+var useRoute = () => useContext(RouteContextObj) || useRouter().base;
+var useResolvedPath = (path) => {
+  const route = useRoute();
+  return createMemo(() => route.resolvePath(path()));
+};
+var useHref = (to) => {
+  const router = useRouter();
+  return createMemo(() => {
+    const to_ = to();
+    return to_ !== void 0 ? router.renderPath(to_) : to_;
+  });
+};
+var useNavigate = () => useRouter().navigatorFactory();
+var useLocation = () => useRouter().location;
+var intent;
+function getIntent() {
+  return intent;
+}
+var inPreloadFn = false;
+function getInPreloadFn() {
+  return inPreloadFn;
+}
+var LocationHeader = "Location";
+var PRELOAD_TIMEOUT = 5e3;
+var CACHE_TIMEOUT = 18e4;
+var cacheMap = /* @__PURE__ */ new Map();
+if (!isServer) {
+  setInterval(() => {
+    const now = Date.now();
+    for (let [k, v] of cacheMap.entries()) {
+      if (!v[4].count && now - v[0] > CACHE_TIMEOUT) {
+        cacheMap.delete(k);
+      }
+    }
+  }, 3e5);
+}
+function getCache() {
+  if (!isServer) return cacheMap;
+  const req = voidFn();
+  if (!req) throw new Error("Cannot find cache context");
+  return (req.router || (req.router = {})).cache || (req.router.cache = /* @__PURE__ */ new Map());
+}
+function query(fn, name) {
+  if (fn.GET) fn = fn.GET;
+  const cachedFn = (...args) => {
+    const cache = getCache();
+    const intent2 = getIntent();
+    const inPreloadFn2 = getInPreloadFn();
+    const owner = getOwner();
+    const navigate = owner ? useNavigate() : void 0;
+    const now = Date.now();
+    const key = name + hashKey(args);
+    let cached = cache.get(key);
+    let tracking;
+    if (isServer) {
+      const e = voidFn();
+      if (e) {
+        const dataOnly = (e.router || (e.router = {})).dataOnly;
+        if (dataOnly) {
+          const data = e && (e.router.data || (e.router.data = {}));
+          if (data && key in data) return data[key];
+          if (Array.isArray(dataOnly) && !matchKey(key, dataOnly)) {
+            data[key] = void 0;
+            return Promise.resolve();
+          }
+        }
+      }
+    }
+    if (getListener() && !isServer) {
+      tracking = true;
+      onCleanup(() => cached[4].count--);
+    }
+    if (cached && cached[0] && (isServer || intent2 === "native" || cached[4].count || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
+      if (tracking) {
+        cached[4].count++;
+        cached[4][0]();
+      }
+      if (cached[3] === "preload" && intent2 !== "preload") {
+        cached[0] = now;
+      }
+      let res2 = cached[1];
+      if (intent2 !== "preload") {
+        res2 = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
+        !isServer && intent2 === "navigate" && startTransition(() => cached[4][1](cached[0]));
+      }
+      inPreloadFn2 && "then" in res2 && res2.catch(() => {
+      });
+      return res2;
+    }
+    let res;
+    if (!isServer && sharedConfig.has && sharedConfig.has(key)) {
+      res = sharedConfig.load(key);
+      delete globalThis._$HY.r[key];
+    } else res = fn(...args);
+    if (cached) {
+      cached[0] = now;
+      cached[1] = res;
+      cached[3] = intent2;
+      !isServer && intent2 === "navigate" && startTransition(() => cached[4][1](cached[0]));
+    } else {
+      cache.set(key, cached = [now, res, , intent2, createSignal(now)]);
+      cached[4].count = 0;
+    }
+    if (tracking) {
+      cached[4].count++;
+      cached[4][0]();
+    }
+    if (isServer) {
+      const e = voidFn();
+      if (e && e.router.dataOnly) return e.router.data[key] = res;
+    }
+    if (intent2 !== "preload") {
+      res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
+    }
+    inPreloadFn2 && "then" in res && res.catch(() => {
+    });
+    if (isServer && sharedConfig.context && sharedConfig.context.async && !sharedConfig.context.noHydrate) {
+      const e = voidFn();
+      (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
+    }
+    return res;
+    function handleResponse(error) {
+      return async (v) => {
+        if (v instanceof Response) {
+          const e = voidFn();
+          if (e) {
+            for (const [key2, value] of v.headers) {
+              if (key2 == "set-cookie") e.response.headers.append("set-cookie", value);
+              else e.response.headers.set(key2, value);
+            }
+          }
+          const url = v.headers.get(LocationHeader);
+          if (url !== null) {
+            if (navigate && url.startsWith("/")) startTransition(() => {
+              navigate(url, {
+                replace: true
+              });
+            });
+            else if (!isServer) window.location.href = url;
+            else if (e) e.response.status = 302;
+            return;
+          }
+          if (v.customBody) v = await v.customBody();
+        }
+        if (error) throw v;
+        cached[2] = v;
+        return v;
+      };
+    }
+  };
+  cachedFn.keyFor = (...args) => name + hashKey(args);
+  cachedFn.key = name;
+  return cachedFn;
+}
+query.get = (key) => {
+  const cached = getCache().get(key);
+  return cached[2];
+};
+query.set = (key, value) => {
+  const cache = getCache();
+  const now = Date.now();
+  let cached = cache.get(key);
+  if (cached) {
+    cached[0] = now;
+    cached[1] = Promise.resolve(value);
+    cached[2] = value;
+    cached[3] = "preload";
+  } else {
+    cache.set(key, cached = [now, Promise.resolve(value), value, "preload", createSignal(now)]);
+    cached[4].count = 0;
+  }
+};
+query.delete = (key) => getCache().delete(key);
+query.clear = () => getCache().clear();
+function matchKey(key, keys) {
+  for (let k of keys) {
+    if (k && key.startsWith(k)) return true;
+  }
+  return false;
+}
+function hashKey(args) {
+  return JSON.stringify(args, (_, val) => isPlainObject(val) ? Object.keys(val).sort().reduce((result, key) => {
+    result[key] = val[key];
+    return result;
+  }, {}) : val);
+}
+function isPlainObject(obj) {
+  let proto;
+  return obj != null && typeof obj === "object" && (!(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype);
+}
+var _tmpl$ = /* @__PURE__ */ template(`<a>`);
+function A(props) {
+  props = mergeProps({
+    inactiveClass: "inactive",
+    activeClass: "active"
+  }, props);
+  const [, rest] = splitProps(props, ["href", "state", "class", "activeClass", "inactiveClass", "end"]);
+  const to = useResolvedPath(() => props.href);
+  const href = useHref(to);
+  const location = useLocation();
+  const isActive = createMemo(() => {
+    const to_ = to();
+    if (to_ === void 0) return [false, false];
+    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
+    const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
+    return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(rest, {
+      get href() {
+        return href() || props.href;
+      },
+      get state() {
+        return JSON.stringify(props.state);
+      },
+      get classList() {
+        return {
+          ...props.class && {
+            [props.class]: true
+          },
+          [props.inactiveClass]: !isActive()[0],
+          [props.activeClass]: isActive()[0],
+          ...rest.classList
+        };
+      },
+      "link": "",
+      get ["aria-current"]() {
+        return isActive()[1] ? "page" : void 0;
+      }
+    }), false, false);
+    return _el$;
+  })();
+}
+
+// src/components/SSModals.tsx
+var SSModalsContext = createContext();
+var modalCounter = 0;
+var nextModalId = () => `ss-modal-${modalCounter++}`;
+function useSSModals() {
+  const context = useContext(SSModalsContext);
+  if (!context) {
+    throw new Error("useSSModals must be used within SSModalsProvider");
+  }
+  return context;
+}
+function DefaultModal(props) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [loading, process] = createLoading();
+  const modalProps = () => props.config.modalProps?.({ hide: props.hide }) ?? {};
+  const {
+    primaryButtonText,
+    secondaryButtonText,
+    hideSecondaryButton,
+    danger,
+    ...rest
+  } = modalProps();
+  return <SSModal
+    open={props.visible()}
+    onClose={props.hide}
+    {...rest}
+    footer={<>
+          {!hideSecondaryButton && <SSButton class="secondary" onclick={props.hide}>
+              {secondaryButtonText ?? "Abbrechen"}
+            </SSButton>}
+          <SSButton
+      class={danger ? "danger" : void 0}
+      onclick={() => process(
+        () => props.config.onPrimaryAction?.({
+          hide: props.hide,
+          navigate,
+          pathname: location.pathname
+        }) ?? props.hide()
+      )}
+      disabled={loading()}
+    >
+            {primaryButtonText ?? "Weiter"}
+          </SSButton>
+        </>}
+  >
+      {props.config.content({ hide: props.hide })}
+    </SSModal>;
+}
+function FormModal(props) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return <SSForm
+    onsubmit={(context) => props.config.onSubmit({
+      hide: props.hide,
+      context,
+      navigate,
+      pathname: location.pathname
+    })}
+  >
+      <FormModalInner visible={props.visible} hide={props.hide} config={props.config} />
+    </SSForm>;
+}
+function FormModalInner(props) {
+  const context = SSForm.useContext();
+  if (!context) return null;
+  const modalProps = () => props.config.modalProps?.({ hide: props.hide, context }) ?? {};
+  const {
+    primaryButtonText,
+    secondaryButtonText,
+    hideSecondaryButton,
+    danger,
+    ...rest
+  } = modalProps();
+  return <SSModal
+    open={props.visible()}
+    onClose={props.hide}
+    {...rest}
+    footer={<>
+          {!hideSecondaryButton && <SSButton class="secondary" onclick={props.hide} disabled={context.loading()}>
+              {secondaryButtonText ?? "Abbrechen"}
+            </SSButton>}
+          <SSButton
+      class={danger ? "danger" : void 0}
+      onclick={() => context.submit()}
+      disabled={context.loading()}
+    >
+            {primaryButtonText ?? "Speichern"}
+          </SSButton>
+        </>}
+  >
+      {props.config.content({ hide: props.hide, context })}
+    </SSModal>;
+}
+function SSModalsProvider(props) {
+  const [modals, setModals] = createSignal([]);
+  const modalsById = /* @__PURE__ */ new Map();
+  const closeTimeouts = /* @__PURE__ */ new Map();
+  const removeDelayMs = 220;
+  const hide = (id) => {
+    const modal = modalsById.get(id);
+    if (!modal) return;
+    modal.setVisible(false);
+    const existing = closeTimeouts.get(id);
+    if (existing) window.clearTimeout(existing);
+    const timeout = window.setTimeout(() => {
+      setModals((list) => list.filter((modal2) => modal2.id !== id));
+      modalsById.delete(id);
+      closeTimeouts.delete(id);
+    }, removeDelayMs);
+    closeTimeouts.set(id, timeout);
+  };
+  const show = (render) => {
+    const id = nextModalId();
+    const [visible, setVisible] = createSignal(true);
+    const entry = { id, visible, setVisible, render };
+    modalsById.set(id, entry);
+    setModals((list) => [...list, entry]);
+    return id;
+  };
+  const showDefault = (config) => {
+    return show(({ hide: hide2, visible }) => <DefaultModal visible={visible} hide={hide2} config={config} />);
+  };
+  const showForm = (config) => {
+    return show(({ hide: hide2, visible }) => <FormModal visible={visible} hide={hide2} config={config} />);
+  };
+  onCleanup(() => {
+    closeTimeouts.forEach((timeout) => window.clearTimeout(timeout));
+    closeTimeouts.clear();
+  });
+  return <SSModalsContext.Provider value={{ show, showDefault, showForm, hide }}>
+      {props.children}
+
+      <For each={modals()}>
+        {(modal) => {
+    const hideModal = () => hide(modal.id);
+    return modal.render({ id: modal.id, hide: hideModal, visible: modal.visible });
+  }}
+      </For>
+    </SSModalsContext.Provider>;
+}
+
+// src/components/SSShell.tsx
+var SSShellContext = createContext();
+function SSShell(props) {
+  const drawerId = createUniqueId();
+  const location = useLocation();
+  const [hrefs, setHrefs] = createSignal([]);
+  const closeDrawer = () => {
+    const input = document.getElementById(drawerId);
+    if (input) input.checked = false;
+  };
+  const registerHref = (href) => {
+    setHrefs((prev) => prev.includes(href) ? prev : [...prev, href]);
+  };
+  const unregisterHref = (href) => {
+    setHrefs((prev) => prev.filter((item) => item !== href));
+  };
+  const activeHref = createMemo(() => {
+    const path = location.pathname;
+    let best = null;
+    for (const href of hrefs()) {
+      if (!path.startsWith(href)) continue;
+      if (!best || href.length > best.length) {
+        best = href;
+      }
+    }
+    return best;
+  });
+  return <SSShellContext.Provider value={{ closeDrawer, activeHref, registerHref, unregisterHref }}>
+      <div class={`ss_shell ${props.class ?? ""}`} style={props.style}>
+        <input id={drawerId} type="checkbox" class="ss_shell__drawer_toggle_input" />
+
+      <header class="ss_shell__header">
+        <div class="ss_shell__header_left">
+          <label
+    for={drawerId}
+    class="ss_shell__drawer_toggle ss_button ss_button--icon"
+    aria-label="Navigation öffnen"
+    role="button"
+    tabindex="0"
+  >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>
+          </label>
+          <div class="ss_shell__title">{props.title}</div>
+        </div>
+        <div class="ss_shell__actions">{props.actions}</div>
+      </header>
+
+        <div class="ss_shell__body">
+          <nav class="ss_shell__nav" aria-label="Hauptnavigation">
+            <div class="ss_shell__nav_inner">{props.nav}</div>
+          </nav>
+          <div class="ss_shell__main">{props.children}</div>
+          <label for={drawerId} class="ss_shell__scrim" aria-label="Navigation schließen" />
+        </div>
+      </div>
+    </SSShellContext.Provider>;
+}
+SSShell.Nav = function(props) {
+  return <div class="ss_shell__nav_list">{props.children}</div>;
+};
+SSShell.NavLink = function(props) {
+  const context = useContext(SSShellContext);
+  onMount(() => context?.registerHref(props.href));
+  onCleanup(() => context?.unregisterHref(props.href));
+  const isActive = () => context?.activeHref() === props.href;
+  return <a
+    class="ss_shell__nav_item"
+    classList={{ "ss_shell__nav_item--active": isActive() }}
+    href={props.href}
+    onclick={() => {
+      props.onclick?.();
+      context?.closeDrawer();
+    }}
+  >
+      {props.icon && <span class="ss_shell__nav_icon">{props.icon}</span>}
+      <span class="ss_shell__nav_label">{props.children}</span>
+    </a>;
+};
+SSShell.NavAction = function(props) {
+  const context = useContext(SSShellContext);
+  return <button
+    type="button"
+    class="ss_shell__nav_item"
+    onclick={() => {
+      props.onclick();
+      context?.closeDrawer();
+    }}
+  >
+      {props.icon && <span class="ss_shell__nav_icon">{props.icon}</span>}
+      <span class="ss_shell__nav_label">{props.children}</span>
+    </button>;
+};
+SSShell.NavGroup = function(props) {
+  return <details class="ss_shell__nav_group" open={props.initiallyExpanded}>
+      <summary class="ss_shell__nav_group_header">
+        {props.icon && <span class="ss_shell__nav_icon">{props.icon}</span>}
+        <span class="ss_shell__nav_label">{props.title}</span>
+        <span class="ss_shell__nav_group_chevron" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ss_shell__nav_group_chevron_svg"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 6l6 6l-6 6" /></svg>
+        </span>
+      </summary>
+      <div class="ss_shell__nav_group_items">{props.children}</div>
+    </details>;
+};
+
+// src/components/SSSurface.tsx
+function SSSurface(props) {
+  return <div class={`ss_surface ${props.class ?? ""}`} style={props.style}>
+      {props.children}
+    </div>;
+}
+
+// src/components/SSTile.tsx
+function SSTile(props) {
+  return <div class={`ss_tile ${props.class ?? ""}`} style={props.style}>
+      <div class="ss_tile__row">
+        {props.icon && <span class="ss_tile__icon">{props.icon}</span>}
+        <div class="ss_tile__content">
+          {props.href ? <h5 class="ss_tile__title">
+              <A class="ss_tile__link" href={props.href} onclick={props.onLinkClick}>
+                {props.title}
+              </A>
+            </h5> : <h5 class="ss_tile__title">
+              <span class="ss_tile__text">{props.title}</span>
+            </h5>}
+          {props.subtitle && <div class="ss_tile__subtitle">{props.subtitle}</div>}
+        </div>
+        {props.trailing && <div class="ss_tile__trailing">{props.trailing}</div>}
+      </div>
+    </div>;
+}
+function createSSTile(build) {
+  return function(props) {
+    const built = build(props.data);
+    return <SSTile
+      {...built}
+      onLinkClick={props.onLinkClick ?? built.onLinkClick}
+      href={props.noLink ? void 0 : built.href}
+      icon={props.noIcon ? void 0 : built.icon}
+    />;
+  };
+}
+export {
+  SSButton,
+  SSCallout,
+  SSChip,
+  SSDataTable,
+  SSDropdown,
+  SSExpandable,
+  SSForm,
+  SSHeader,
+  SSModal,
+  SSModalsProvider,
+  SSShell,
+  SSSurface,
+  SSTile,
+  createSSTile,
+  useSSModals
+};