@wrdagency/blockout 0.0.18 → 0.1.0

package/dist/WYCIER3C-8jmp2F15.js

@@ -0,0 +1,175 @@
+import { u as w, D as z } from "./RS7LB2H4-D0fWv5qu.js";
+import { a as T, m as B, o as G, t as J, c as K, s as C, b as x, d as Q, e as ee, f as b } from "./YV4JVR4I-LkUIiJWj.js";
+import { f as R, _ as j, o as _, a as te, q as ne, i as oe, s as se, b as S, l as ae, m as O, n as re, v as ie, X as v, Y as ue, U as le, Z as ce } from "./LMDWO4NN--KEvZePp.js";
+import { useRef as me, useState as de, useMemo as fe } from "react";
+import { r as pe } from "./index-BI5rPXbu.js";
+import { jsx as F } from "react/jsx-runtime";
+var Se = "div";
+function A(n, o) {
+  const e = setTimeout(o, n);
+  return () => clearTimeout(e);
+}
+function ve(n) {
+  let o = requestAnimationFrame(() => {
+    o = requestAnimationFrame(n);
+  });
+  return () => cancelAnimationFrame(o);
+}
+function V(...n) {
+  return n.join(", ").split(", ").reduce((o, e) => {
+    const t = e.endsWith("ms") ? 1 : 1e3, i = Number.parseFloat(e || "0s") * t;
+    return i > o ? i : o;
+  }, 0);
+}
+function De(n, o, e) {
+  return !e && o !== !1 && (!n || !!o);
+}
+var Ee = te(function(o) {
+  var e = o, { store: t, alwaysVisible: i } = e, r = j(e, ["store", "alwaysVisible"]);
+  const s = w();
+  t = t || s, oe(
+    t,
+    process.env.NODE_ENV !== "production" && "DisclosureContent must receive a `store` prop or be wrapped in a DisclosureProvider component."
+  );
+  const a = me(null), f = se(r.id), [l, P] = de(null), c = t.useState("open"), D = t.useState("mounted"), m = t.useState("animated"), d = t.useState("contentElement"), E = T(t.disclosure, "contentElement");
+  S(() => {
+    a.current && (t == null || t.setContentElement(a.current));
+  }, [t]), S(() => {
+    let u;
+    return t == null || t.setState("animated", (p) => (u = p, !0)), () => {
+      u !== void 0 && (t == null || t.setState("animated", u));
+    };
+  }, [t]), S(() => {
+    if (m) {
+      if (!(d != null && d.isConnected)) {
+        P(null);
+        return;
+      }
+      return ve(() => {
+        P(c ? "enter" : D ? "leave" : null);
+      });
+    }
+  }, [m, d, c, D]), S(() => {
+    if (!t || !m || !l || !d) return;
+    const u = () => t == null ? void 0 : t.setState("animating", !1), p = () => pe.flushSync(u);
+    if (l === "leave" && c || l === "enter" && !c) return;
+    if (typeof m == "number")
+      return A(m, p);
+    const {
+      transitionDuration: I,
+      animationDuration: M,
+      transitionDelay: N,
+      animationDelay: q
+    } = getComputedStyle(d), {
+      transitionDuration: U = "0",
+      animationDuration: W = "0",
+      transitionDelay: $ = "0",
+      animationDelay: k = "0"
+    } = E ? getComputedStyle(E) : {}, L = V(
+      N,
+      q,
+      $,
+      k
+    ), X = V(
+      I,
+      M,
+      U,
+      W
+    ), h = L + X;
+    if (!h) {
+      l === "enter" && t.setState("animated", !1), u();
+      return;
+    }
+    const Y = 1e3 / 60, Z = Math.max(h - Y, 0);
+    return A(Z, p);
+  }, [t, m, d, E, c, l]), r = ae(
+    r,
+    (u) => /* @__PURE__ */ F(z, { value: t, children: u }),
+    [t]
+  );
+  const y = De(D, r.hidden, i), g = r.style, H = fe(() => y ? O(_({}, g), { display: "none" }) : g, [y, g]);
+  return r = O(_({
+    id: f,
+    "data-open": c || void 0,
+    "data-enter": l === "enter" || void 0,
+    "data-leave": l === "leave" || void 0,
+    hidden: y
+  }, r), {
+    ref: re(f ? t.setContentElement : null, a, r.ref),
+    style: H
+  }), ie(r);
+}), ye = R(function(o) {
+  const e = Ee(o);
+  return ne(Se, e);
+}), Ve = R(function(o) {
+  var e = o, {
+    unmountOnHide: t
+  } = e, i = j(e, [
+    "unmountOnHide"
+  ]);
+  const r = w(), s = i.store || r;
+  return T(
+    s,
+    (f) => !t || (f == null ? void 0 : f.mounted)
+  ) === !1 ? null : /* @__PURE__ */ F(ye, _({}, i));
+});
+function ge(n = {}) {
+  const o = B(
+    n.store,
+    G(n.disclosure, ["contentElement", "disclosureElement"])
+  );
+  J(n, o);
+  const e = o == null ? void 0 : o.getState(), t = v(
+    n.open,
+    e == null ? void 0 : e.open,
+    n.defaultOpen,
+    !1
+  ), i = v(n.animated, e == null ? void 0 : e.animated, !1), r = {
+    open: t,
+    animated: i,
+    animating: !!i && t,
+    mounted: t,
+    contentElement: v(e == null ? void 0 : e.contentElement, null),
+    disclosureElement: v(e == null ? void 0 : e.disclosureElement, null)
+  }, s = K(r, o);
+  return C(
+    s,
+    () => x(s, ["animated", "animating"], (a) => {
+      a.animated || s.setState("animating", !1);
+    })
+  ), C(
+    s,
+    () => Q(s, ["open"], () => {
+      s.getState().animated && s.setState("animating", !0);
+    })
+  ), C(
+    s,
+    () => x(s, ["open", "animating"], (a) => {
+      s.setState("mounted", a.open || a.animating);
+    })
+  ), ue(le({}, s), {
+    disclosure: n.disclosure,
+    setOpen: (a) => s.setState("open", a),
+    show: () => s.setState("open", !0),
+    hide: () => s.setState("open", !1),
+    toggle: () => s.setState("open", (a) => !a),
+    stopAnimation: () => s.setState("animating", !1),
+    setContentElement: (a) => s.setState("contentElement", a),
+    setDisclosureElement: (a) => s.setState("disclosureElement", a)
+  });
+}
+function Ce(n, o, e) {
+  return ce(o, [e.store, e.disclosure]), b(n, e, "open", "setOpen"), b(n, e, "mounted", "setMounted"), b(n, e, "animated"), Object.assign(n, { disclosure: e.disclosure });
+}
+function we(n = {}) {
+  const [o, e] = ee(ge, n);
+  return Ce(o, e, n);
+}
+export {
+  Ve as D,
+  Ee as a,
+  Ce as b,
+  ge as c,
+  De as i,
+  we as u
+};

package/dist/YV4JVR4I-LkUIiJWj.js

@@ -0,0 +1,351 @@
+import { i as ot, N as A, a2 as st, a3 as at, a4 as ut, a0 as H, a5 as it, Y as ct, U as ft, a6 as lt, E as dt, b as K, m as St, o as C, e as pt, a7 as vt } from "./LMDWO4NN--KEvZePp.js";
+import * as R from "react";
+import F from "react";
+import { g as _t } from "./_commonjsHelpers-DaMA6jEr.js";
+function L(t, n) {
+  const e = t.__unstableInternals;
+  return ot(e, "Invalid store"), e[n];
+}
+function q(t, ...n) {
+  let e = t, f = e, r = Symbol(), o = lt;
+  const s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Set(), _ = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), u = (c) => (v.add(c), () => v.delete(c)), S = () => {
+    const c = s.size, d = Symbol();
+    s.add(d);
+    const g = () => {
+      s.delete(d), !s.size && o();
+    };
+    if (c) return g;
+    const y = ut(e).map(
+      (O) => H(
+        ...n.map((w) => {
+          var h;
+          const V = (h = w == null ? void 0 : w.getState) == null ? void 0 : h.call(w);
+          if (V && A(V, O))
+            return X(w, [O], (I) => {
+              B(
+                O,
+                I[O],
+                // @ts-expect-error - Not public API. This is just to prevent
+                // infinite loops.
+                !0
+              );
+            });
+        })
+      )
+    ), x = [];
+    for (const O of v)
+      x.push(O());
+    const P = n.map(J);
+    return o = H(...y, ...x, ...P), g;
+  }, l = (c, d, g = m) => (g.add(d), p.set(d, c), () => {
+    var y;
+    (y = a.get(d)) == null || y(), a.delete(d), p.delete(d), g.delete(d);
+  }), E = (c, d) => l(c, d), b = (c, d) => (a.set(d, d(e, e)), l(c, d)), D = (c, d) => (a.set(d, d(e, f)), l(c, d, _)), tt = (c) => q(at(e, c), j), et = (c) => q(st(e, c), j), nt = () => e, B = (c, d, g = !1) => {
+    var y;
+    if (!A(e, c)) return;
+    const x = it(d, e[c]);
+    if (x === e[c]) return;
+    if (!g)
+      for (const h of n)
+        (y = h == null ? void 0 : h.setState) == null || y.call(h, c, x);
+    const P = e;
+    e = ct(ft({}, e), { [c]: x });
+    const O = Symbol();
+    r = O, i.add(c);
+    const w = (h, V, I) => {
+      var M;
+      const $ = p.get(h), rt = (N) => I ? I.has(N) : N === c;
+      (!$ || $.some(rt)) && ((M = a.get(h)) == null || M(), a.set(h, h(e, V)));
+    };
+    for (const h of m)
+      w(h, P);
+    queueMicrotask(() => {
+      if (r !== O) return;
+      const h = e;
+      for (const V of _)
+        w(V, f, i);
+      f = h, i.clear();
+    });
+  }, j = {
+    getState: nt,
+    setState: B,
+    __unstableInternals: {
+      setup: u,
+      init: S,
+      subscribe: E,
+      sync: b,
+      batch: D,
+      pick: tt,
+      omit: et
+    }
+  };
+  return j;
+}
+function Vt(t, ...n) {
+  if (t)
+    return L(t, "setup")(...n);
+}
+function J(t, ...n) {
+  if (t)
+    return L(t, "init")(...n);
+}
+function Q(t, ...n) {
+  if (t)
+    return L(t, "subscribe")(...n);
+}
+function X(t, ...n) {
+  if (t)
+    return L(t, "sync")(...n);
+}
+function ht(t, ...n) {
+  if (t)
+    return L(t, "batch")(...n);
+}
+function Rt(t, ...n) {
+  if (t)
+    return L(t, "omit")(...n);
+}
+function At(t, ...n) {
+  if (t)
+    return L(t, "pick")(...n);
+}
+function Dt(...t) {
+  const n = t.reduce((f, r) => {
+    var o;
+    const s = (o = r == null ? void 0 : r.getState) == null ? void 0 : o.call(r);
+    return s ? Object.assign(f, s) : f;
+  }, {}), e = q(n, ...t);
+  return Object.assign({}, ...t, e);
+}
+function It(t, n) {
+  if (process.env.NODE_ENV === "production" || !n) return;
+  const e = Object.entries(t).filter(([o, s]) => o.startsWith("default") && s !== void 0).map(([o]) => {
+    var s;
+    const i = o.replace("default", "");
+    return `${((s = i[0]) == null ? void 0 : s.toLowerCase()) || ""}${i.slice(1)}`;
+  });
+  if (!e.length) return;
+  const f = n.getState();
+  if (e.filter(
+    (o) => A(f, o)
+  ).length)
+    throw new Error(
+      `Passing a store prop in conjunction with a default state is not supported.
+
+const store = useSelectStore();
+<SelectProvider store={store} defaultValue="Apple" />
+                ^             ^
+
+Instead, pass the default state to the topmost store:
+
+const store = useSelectStore({ defaultValue: "Apple" });
+<SelectProvider store={store} />
+
+See https://github.com/ariakit/ariakit/pull/2745 for more details.
+
+If there's a particular need for this, please submit a feature request at https://github.com/ariakit/ariakit
+`
+    );
+}
+var T = { exports: {} }, U = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var W;
+function mt() {
+  if (W) return U;
+  W = 1;
+  var t = F;
+  function n(a, p) {
+    return a === p && (a !== 0 || 1 / a === 1 / p) || a !== a && p !== p;
+  }
+  var e = typeof Object.is == "function" ? Object.is : n, f = t.useState, r = t.useEffect, o = t.useLayoutEffect, s = t.useDebugValue;
+  function i(a, p) {
+    var u = p(), S = f({ inst: { value: u, getSnapshot: p } }), l = S[0].inst, E = S[1];
+    return o(
+      function() {
+        l.value = u, l.getSnapshot = p, v(l) && E({ inst: l });
+      },
+      [a, u, p]
+    ), r(
+      function() {
+        return v(l) && E({ inst: l }), a(function() {
+          v(l) && E({ inst: l });
+        });
+      },
+      [a]
+    ), s(u), u;
+  }
+  function v(a) {
+    var p = a.getSnapshot;
+    a = a.value;
+    try {
+      var u = p();
+      return !e(a, u);
+    } catch {
+      return !0;
+    }
+  }
+  function m(a, p) {
+    return p();
+  }
+  var _ = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? m : i;
+  return U.useSyncExternalStore = t.useSyncExternalStore !== void 0 ? t.useSyncExternalStore : _, U;
+}
+var G = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var z;
+function Et() {
+  return z || (z = 1, process.env.NODE_ENV !== "production" && function() {
+    function t(u, S) {
+      return u === S && (u !== 0 || 1 / u === 1 / S) || u !== u && S !== S;
+    }
+    function n(u, S) {
+      _ || r.startTransition === void 0 || (_ = !0, console.error(
+        "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+      ));
+      var l = S();
+      if (!a) {
+        var E = S();
+        o(l, E) || (console.error(
+          "The result of getSnapshot should be cached to avoid an infinite loop"
+        ), a = !0);
+      }
+      E = s({
+        inst: { value: l, getSnapshot: S }
+      });
+      var b = E[0].inst, D = E[1];
+      return v(
+        function() {
+          b.value = l, b.getSnapshot = S, e(b) && D({ inst: b });
+        },
+        [u, l, S]
+      ), i(
+        function() {
+          return e(b) && D({ inst: b }), u(function() {
+            e(b) && D({ inst: b });
+          });
+        },
+        [u]
+      ), m(l), l;
+    }
+    function e(u) {
+      var S = u.getSnapshot;
+      u = u.value;
+      try {
+        var l = S();
+        return !o(u, l);
+      } catch {
+        return !0;
+      }
+    }
+    function f(u, S) {
+      return S();
+    }
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var r = F, o = typeof Object.is == "function" ? Object.is : t, s = r.useState, i = r.useEffect, v = r.useLayoutEffect, m = r.useDebugValue, _ = !1, a = !1, p = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? f : n;
+    G.useSyncExternalStore = r.useSyncExternalStore !== void 0 ? r.useSyncExternalStore : p, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), G;
+}
+var Y;
+function bt() {
+  return Y || (Y = 1, process.env.NODE_ENV === "production" ? T.exports = mt() : T.exports = Et()), T.exports;
+}
+var Ot = bt();
+const gt = /* @__PURE__ */ _t(Ot);
+var { useSyncExternalStore: Z } = gt, k = () => () => {
+};
+function yt(t, n = dt) {
+  const e = R.useCallback(
+    (r) => t ? Q(t, null, r) : k(),
+    [t]
+  ), f = () => {
+    const r = typeof n == "string" ? n : null, o = typeof n == "function" ? n : null, s = t == null ? void 0 : t.getState();
+    if (o) return o(s);
+    if (s && r && A(s, r))
+      return s[r];
+  };
+  return Z(e, f, f);
+}
+function Tt(t, n) {
+  const e = R.useRef(
+    {}
+  ), f = R.useCallback(
+    (o) => t ? Q(t, null, o) : k(),
+    [t]
+  ), r = () => {
+    const o = t == null ? void 0 : t.getState();
+    let s = !1;
+    const i = e.current;
+    for (const v in n) {
+      const m = n[v];
+      if (typeof m == "function") {
+        const _ = m(o);
+        _ !== i[v] && (i[v] = _, s = !0);
+      }
+      if (typeof m == "string") {
+        if (!o || !A(o, m)) continue;
+        const _ = o[m];
+        _ !== i[v] && (i[v] = _, s = !0);
+      }
+    }
+    return s && (e.current = C({}, i)), e.current;
+  };
+  return Z(f, r, r);
+}
+function Ct(t, n, e, f) {
+  const r = A(n, e) ? n[e] : void 0, o = f ? n[f] : void 0, s = vt({ value: r, setValue: o });
+  K(() => X(t, [e], (i, v) => {
+    const { value: m, setValue: _ } = s.current;
+    _ && i[e] !== v[e] && i[e] !== m && _(i[e]);
+  }), [t, e]), K(() => {
+    if (r !== void 0)
+      return t.setState(e, r), ht(t, [e], () => {
+        r !== void 0 && t.setState(e, r);
+      });
+  });
+}
+function jt(t, n) {
+  const [e, f] = R.useState(() => t(n));
+  K(() => J(e), [e]);
+  const r = R.useCallback(
+    (i) => yt(e, i),
+    [e]
+  ), o = R.useMemo(
+    () => St(C({}, e), { useState: r }),
+    [e, r]
+  ), s = pt(() => {
+    f((i) => t(C(C({}, n), i.getState())));
+  });
+  return [o, s];
+}
+export {
+  yt as a,
+  X as b,
+  q as c,
+  Q as d,
+  jt as e,
+  Ct as f,
+  ht as g,
+  J as i,
+  Dt as m,
+  Rt as o,
+  At as p,
+  Vt as s,
+  It as t,
+  Tt as u
+};

package/dist/assets/button.css

@@ -1 +1 @@
-.component-button{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--600);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 1.25rem;min-height:40px;font-size:1rem;width:fit-content;background-color:var(--button__bg);color:var(--button__text);cursor:pointer;outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.component-button>svg{width:1.25rem;height:1.25rem;color:currentColor}.component-button:hover{background-color:var(--button__bg--hover);color:var(--button__text--hover)}.component-button:focus{background-color:var(--button__bg--hover);color:var(--button__text--hover);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-button:active{outline-offset:3px}.component-button[aria-pressed=true]{box-shadow:inset 0 .25rem .5rem #00000040}.component-button>svg{width:1.25rem;height:1.25rem;fill:currentColor}.component-button--wide{width:100%}.component-button--outline{border:2px solid var(--button__bg);color:var(--button__bg);background-color:transparent}.component-button--outline:hover{border:2px solid var(--button__bg--hover);color:var(--button__bg--hover);background-color:transparent}.component-button--outline:focus{border:2px solid var(--button__bg--hover);color:var(--button__bg--hover);background-color:transparent}.component-button--primary{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--600);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50)}.component-button--neutral{--button__bg: var(--blockout__colours__surface--950);--button__bg--hover: var(--blockout__colours__surface--800);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50)}.component-button--quiet{--button__bg: var(--blockout__colours__surface--100);--button__bg--hover: var(--blockout__colours__surface--200);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950)}.component-button--ghost{--button__bg: transparent;--button__bg--hover: var(--blockout__colours__surface--200);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950)}.component-button:disabled{opacity:.66;pointer-events:none}.component-icon-button{padding:.75rem;min-height:40px}
+.component-button{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--600);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__surface--50);--button__icon--hover: var(--blockout__colours__surface--50);--button__padding--y: .75rem;--button__padding--x: 1.25rem;--button__gap: 1rem;--button__font-size: 1rem;display:flex;align-items:center;justify-content:center;gap:var(--button__gap);padding:var(--button__padding--y) var(--button__padding--x);font-size:var(--button__font-size);min-height:40px;width:fit-content;background-color:var(--button__bg);border:1px solid var(--button__border);border-radius:var(--blockout__radius--md);color:var(--button__text);cursor:pointer;outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.component-button>svg{width:calc(1.375 * var(--button__font-size));height:calc(1.375 * var(--button__font-size));color:var(--button__icon)}.component-button:hover{background-color:var(--button__bg--hover);border-color:var(--button__border--hover);color:var(--button__text--hover)}.component-button:focus{background-color:var(--button__bg--hover);color:var(--button__text--hover);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-button:hover>svg{color:var(--button__icon--hover)}.component-button:active{outline-offset:3px}.component-button[aria-pressed=true]{box-shadow:inset 0 .25rem .5rem #00000040}.component-button--wide{width:100%}.component-button--primary{--button__bg: var(--blockout__colours__primary--500);--button__bg--hover: var(--blockout__colours__primary--400);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__icon: var(--blockout__colours__primary--300);--button__icon--hover: var(--blockout__colours__primary--200)}.component-button--neutral{--button__bg: var(--blockout__colours__surface--950);--button__bg--hover: var(--blockout__colours__surface--800);--button__text: var(--blockout__colours__surface--50);--button__text--hover: var(--blockout__colours__surface--50);--button__icon: var(--blockout__colours__primary--500);--button__icon--hover: var(--blockout__colours__primary--500)}.component-button--quiet{--button__border: var(--blockout__colours__surface--300);--button__border--hover: var(--blockout__colours__surface--100);--button__bg: var(--blockout__colours__surface--0);--button__bg--hover: var(--blockout__colours__surface--100);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__icon: var(--blockout__colours__primary--500);--button__icon--hover: var(--blockout__colours__primary--500)}.component-button--ghost{--button__bg: transparent;--button__bg--hover: var(--blockout__colours__surface--100);--button__text: var(--blockout__colours__surface--950);--button__text--hover: var(--blockout__colours__surface--950);--button__icon: var(--blockout__colours__primary--500);--button__icon--hover: var(--blockout__colours__primary--500)}.component-button--small{--button__padding--y: .5rem;--button__padding--x: .75rem;--button__gap: .5rem;--button__font-size: .75rem;border-radius:var(--blockout__radius--sm);min-height:2rem}.component-button--medium{--button__padding--y: .75rem;--button__padding--x: 1.25rem;--button__gap: 1rem;--button__font-size: 1rem;border-radius:var(--blockout__radius--md)}.component-button--large{--button__padding--y: 1rem;--button__padding--x: 1.5rem;--button__gap: 1.25rem;--button__font-size: 1.25rem;border-radius:var(--blockout__radius--lg)}.component-button:disabled{opacity:.5;cursor:default;--button__border--hover: var(--button__border);--button__bg--hover: var(--button__bg);--button__text--hover: var(--button__text);--button__icon: var(--button__text);--button__icon--hover: var(--button__text)}.component-button--icon{aspect-ratio:1/1;padding:var(--button__padding--y)}

package/dist/assets/index.css

@@ -1 +1 @@
-:root{--blockout__colours__surface--0: #ffffff;--blockout__colours__surface--50: #fafaf9;--blockout__colours__surface--100: #f5f5f4;--blockout__colours__surface--200: #e7e5e4;--blockout__colours__surface--300: #d6d3d1;--blockout__colours__surface--400: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--600: #57534e;--blockout__colours__surface--700: #44403c;--blockout__colours__surface--800: #292524;--blockout__colours__surface--900: #1c1917;--blockout__colours__surface--950: #0c0a09;--blockout__colours__primary--50: #eff6ff;--blockout__colours__primary--100: #dbeafe;--blockout__colours__primary--200: #bfdbfe;--blockout__colours__primary--300: #93c5fd;--blockout__colours__primary--400: #60a5fa;--blockout__colours__primary--500: #3b82f6;--blockout__colours__primary--600: #2563eb;--blockout__colours__primary--700: #1d4ed8;--blockout__colours__primary--800: #1e40af;--blockout__colours__primary--900: #1e3a8a;--blockout__colours__primary--950: #172554;--blockout__colours__outline: var(--blockout__colours__surface--400);background-color:var(--blockout__colours__surface--0);color:var(--blockout__colours__surface--950)}[data-colour-scheme=dark]{--blockout__colours__surface--950: #fafaf9;--blockout__colours__surface--900: #f5f5f4;--blockout__colours__surface--800: #e7e5e4;--blockout__colours__surface--700: #d6d3d1;--blockout__colours__surface--600: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--400: #57534e;--blockout__colours__surface--300: #44403c;--blockout__colours__surface--200: #292524;--blockout__colours__surface--100: #1c1917;--blockout__colours__surface--50: #0c0a09;--blockout__colours__surface--0: #000000;--blockout__colours__primary--950: #eff6ff;--blockout__colours__primary--900: #dbeafe;--blockout__colours__primary--800: #bfdbfe;--blockout__colours__primary--700: #93c5fd;--blockout__colours__primary--600: #60a5fa;--blockout__colours__primary--500: #3b82f6;--blockout__colours__primary--400: #2563eb;--blockout__colours__primary--300: #1d4ed8;--blockout__colours__primary--200: #1e40af;--blockout__colours__primary--100: #1e3a8a;--blockout__colours__primary--50: #172554;background-color:var(--blockout__colours__surface--0);color:var(--blockout__colours__surface--950)}
+:root,[data-colour-scheme=light],:root[data-colour-scheme=dark] [data-colour-scheme=invert]{--blockout__colours__surface--0: #ffffff;--blockout__colours__surface--50: #fafaf9;--blockout__colours__surface--100: #f5f5f4;--blockout__colours__surface--200: #e7e5e4;--blockout__colours__surface--300: #d6d3d1;--blockout__colours__surface--400: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--600: #57534e;--blockout__colours__surface--700: #44403c;--blockout__colours__surface--800: #292524;--blockout__colours__surface--900: #1c1917;--blockout__colours__surface--950: #0c0a09;--blockout__colours__primary--50: #fffbeb;--blockout__colours__primary--100: #fef3c6;--blockout__colours__primary--200: #fee685;--blockout__colours__primary--300: #ffd230;--blockout__colours__primary--400: #ffb900;--blockout__colours__primary--500: #fe9a00;--blockout__colours__primary--600: #e17100;--blockout__colours__primary--700: #bb4d00;--blockout__colours__primary--800: #973c00;--blockout__colours__primary--900: #7a3306;--blockout__colours__primary--950: #461901;color-scheme:light;color:var(--blockout__colours__surface--950)}[data-colour-scheme=dark],:root[data-colour-scheme=light] [data-colour-scheme=invert]{--blockout__colours__surface--950: #fafaf9;--blockout__colours__surface--900: #f5f5f4;--blockout__colours__surface--800: #e7e5e4;--blockout__colours__surface--700: #d6d3d1;--blockout__colours__surface--600: #a8a29e;--blockout__colours__surface--500: #78716c;--blockout__colours__surface--400: #57534e;--blockout__colours__surface--300: #44403c;--blockout__colours__surface--200: #292524;--blockout__colours__surface--100: #1c1917;--blockout__colours__surface--50: #0c0a09;--blockout__colours__surface--0: #000000;--blockout__colours__primary--950: #fffbeb;--blockout__colours__primary--900: #fef3c6;--blockout__colours__primary--800: #fee685;--blockout__colours__primary--700: #ffd230;--blockout__colours__primary--600: #ffb900;--blockout__colours__primary--500: #fe9a00;--blockout__colours__primary--400: #e17100;--blockout__colours__primary--300: #bb4d00;--blockout__colours__primary--200: #973c00;--blockout__colours__primary--100: #7a3306;--blockout__colours__primary--50: #461901;color-scheme:dark;color:var(--blockout__colours__surface--950)}:root,body{--blockout__radius--xs: .375rem;--blockout__radius--sm: .675rem;--blockout__radius--md: .75rem;--blockout__radius--lg: 1rem;--blockout__radius--2xl: 1.275rem;--blockout__colours__outline: var(--blockout__colours__primary--500);background-color:var(--blockout__colours__surface--0);color:var(--blockout__colours__surface--950)}

package/dist/assets/index10.css

@@ -1 +1 @@
-.component-menu__button{outline:0px solid transparent;outline-offset:0px;cursor:pointer;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease}.component-menu__button:hover{background-color:var(--blockout__colours__surface--50)}.component-menu__button:focus-visible{background-color:transparent;outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-menu__menu-wrapper{z-index:9999!important}.component-menu{display:flex;flex-direction:column;background-color:var(--blockout__colours__surface--0);border:1px solid var(--blockout__colours__surface--300);min-width:8rem;gap:.325rem;padding:.325rem;box-shadow:0 .175rem .375rem #0000001a}.component-menu__arrow>svg{fill:var(--blockout__colours__surface--0)!important;stroke:var(--blockout__colours__surface--300)!important}.component-menu__item{display:flex;align-items:baseline;gap:.875rem;padding:.375rem .675rem;width:100%;cursor:pointer;transition:background-color .25s ease}.component-menu__item[data-active-item=true]{background-color:var(--blockout__colours__surface--100)}.component-menu__item:focus-visible{outline:none}.component-menu__item[data-active-item=true] .component-menu__item__label{color:var(--blockout__colours__surface--950)}.component-menu__item[data-active-item=true] .component-menu__item__description{color:var(--blockout__colours__surface--700)}.component-menu__item__icon{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--400)}.component-menu__item__icon--pictoral{transform:translateY(.25rem)}.component-menu__item__text{flex-grow:1}.component-menu__item__text__header{display:flex;align-items:center;gap:2rem;justify-content:space-between;width:100%}.component-menu__item__text__header+.component-menu__item__description{margin-top:.25rem}.component-menu__item__label{font-weight:500;color:var(--blockout__colours__surface--950);transition:color .25s ease}.component-menu__item__description{font-weight:400;color:var(--blockout__colours__surface--500);font-size:.875rem;padding-right:.375rem;transition:color .25s ease,opacity .25s ease}.component-menu__item--toggle--checked .component-menu__item__icon--checkbox{fill:var(--blockout__colours__surface--950)}.component-menu__separator{margin:0 -.325rem;border-top:1px solid var(--blockout__colours__surface--300);border-bottom:none}
+.component-filesystem__list{display:flex;flex-direction:column;gap:.25rem}.component-filesystem__file,.component-filesystem__folder__line{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:var(--blockout__radius--md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filesystem__file__icon,.component-filesystem__folder__icon{width:1.25rem;height:1.25rem;fill:var(--blockout__colours__surface--500);flex-shrink:0}.component-filesystem__file{outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.component-filesystem__file:focus-within,.component-filesystem__file:focus{background-color:var(--blockout__colours__surface--100);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-filesystem__file__base{text-underline-offset:0;transition:color .15s ease,text-underline-offset .15s ease}.component-filesystem__file__name:focus{outline:none}a.component-filesystem__file__name:hover .component-filesystem__file__base,a.component-filesystem__file__name:focus .component-filesystem__file__base{text-decoration:underline;text-decoration-color:var(--blockout__colours__primary--500);text-decoration-thickness:1px;text-underline-offset:.25rem}.component-filesystem__file__extension{color:var(--blockout__colours__surface--400);font-size:.875rem;margin-left:.125rem}.component-filesystem__folder__line{width:100%;cursor:pointer;outline:0px solid transparent;outline-offset:0px;transition:background-color .25s ease,outline .25s ease,outline-offset .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.component-filesystem__folder__line:hover{background-color:var(--blockout__colours__surface--100)}.component-filesystem__folder__line:focus{background-color:var(--blockout__colours__surface--100);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-filesystem__folder__children{padding-left:2rem;padding-top:.25rem}

package/dist/assets/index11.css

@@ -1 +1 @@
-.component-password-control__btn{width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s ease;border-left:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--0);transition:outline .25s ease,outline-offset .25s ease}.component-password-control__btn:hover{background-color:var(--blockout__colours__surface--50)}.component-password-control__btn:focus{background-color:var(--blockout__colours__surface--0);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-password-control__btn:first-child{border-bottom:1px solid var(--blockout__colours__surface--300)}.component-password-control__btn>svg{width:1rem;height:1rem;fill:currentColor}
+.component-progress{--component-progress__steps: 0;--component-progress__step-width: max(.75rem, 3.5%);--component-progress__bg: var(--blockout__colours__surface--200);--component-progress__fg: var(--blockout__colours__surface--950);-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:block;height:4px;width:100%;border-radius:0;overflow:clip}.component-progress::-webkit-progress-bar{border-radius:0;height:100%;background:var(--component-progress__bg)}.component-progress::-moz-progress-bar{border-radius:0;height:100%;background:var(--component-progress__fg)}.component-progress::-webkit-progress-value{border-radius:0;height:100%;background:var(--component-progress__fg)}.component-progress:indeterminate:before{content:"";position:absolute;top:0;left:0;background-color:var(--component-progress__fg);height:100%;width:20%;transform-origin:left;animation:component-progress__indeterminate 2s ease-in-out infinite alternate}@keyframes component-progress__indeterminate{0%{left:-50%}to{left:100%}}.component-progress--with-steps:after{content:"";position:absolute;top:-1px;bottom:-1px;left:0;right:0;height:calc(100% + 2px);width:100%;z-index:1;background-image:linear-gradient(90deg,transparent 0%,transparent calc(100% - var(--component-progress__step-width)),var(--blockout__colours__surface--50) calc(100% - var(--component-progress__step-width)),var(--blockout__colours__surface--0) 100%);background-repeat:repeat-x;background-size:calc((100% + ((var(--component-progress__steps) - 1) * (var(--component-progress__step-width) / 2))) / var(--component-progress__steps)) 100%;background-position:0% center}

package/dist/assets/index12.css

@@ -1 +1 @@
-.component-select-control__input{cursor:pointer;display:flex;width:100%}.component-select-control__input:focus{outline:none}.component-select-control__value{flex-grow:1;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__input:disabled .component-select-control__value{background-color:var(--blockout__colours__surface--200);color:var(--blockout__colours__surface--400)}.component-select-control__value:hover{background-color:var(--blockout__colours__surface--50)}.component-select-control__caret{width:2rem;display:flex;justify-content:center;align-items:center;border-left:1px solid var(--blockout__colours__surface--300);background-color:var(--blockout__colours__surface--0);cursor:pointer;transition:background-color .25s ease}.component-select-control__caret:hover{background-color:var(--blockout__colours__surface--50)}.component-select-control__caret>svg{width:.75rem;height:.75rem;fill:currentColor}.component-select-control__popover__wrapper{z-index:9999!important}.component-select-control__popover{background-color:var(--blockout__colours__surface--0);border:1px solid var(--blockout__colours__surface--300);box-shadow:0 .175rem .375rem #0000001a;width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto}.component-select-control__popover:focus{outline:none}.component-select-control__list{display:flex;flex-direction:column;gap:.325rem;padding:.325rem}.component-select-control__list:focus{outline:none}.component-select-control__popover__search-wrapper{display:flex;align-items:center;gap:0;padding-left:1rem;border-bottom:1px solid var(--blockout__colours__surface--300)}.component-select-control__popover__search-icon{width:1rem;height:1rem;fill:var(--blockout__colours__surface--600)}.component-select-control__popover__search{width:100%;padding:.375rem .675rem;min-height:40px}.component-select-control__popover__search:focus{outline:none}.component-select-control__option{display:flex;justify-content:center;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .675rem;min-height:40px;cursor:pointer;transition:background-color .25s ease}.component-select-control__option:focus{outline:none}.component-select-control__option:first-child{border-top:none}.component-select-control__option[aria-disabled=true] .component-select-control__option__label{color:var(--blockout__colours__surface--400)}.component-select-control__option[aria-disabled=true] .component-select-control__option__description{color:var(--blockout__colours__surface--300)}.component-select-control__option__label{font-weight:500;color:var(--blockout__colours__surface--950);transition:color .25s ease}.component-select-control__option__description{font-weight:400;color:var(--blockout__colours__surface--500);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-select-control__option[data-active-item=true]{background-color:var(--blockout__colours__surface--100)}.component-select-control__option[data-active-item=true] .component-select-control__option__label{color:var(--blockout__colours__surface--950)}.component-select-control__option[data-active-item=true] .component-select-control__option__description{color:var(--blockout__colours__surface--700)}
+.component-toolbar{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:var(--blockout__colours__surface--50)}