@appkit/dek-lib 0.26.0 → 0.27.0

package/dist/index.es.js

@@ -1100,14 +1100,14 @@ function M7() {
         }
       return null;
     }
-    var Z = Object.assign, L1 = 0, d1, I, S, n1, B1, f1, S1;
+    var Z = Object.assign, L1 = 0, d1, I, S, n1, C1, f1, S1;
     function j1() {
     }
     j1.__reactDisabledLog = true;
     function k1() {
       {
         if (L1 === 0) {
-          d1 = console.log, I = console.info, S = console.warn, n1 = console.error, B1 = console.group, f1 = console.groupCollapsed, S1 = console.groupEnd;
+          d1 = console.log, I = console.info, S = console.warn, n1 = console.error, C1 = console.group, f1 = console.groupCollapsed, S1 = console.groupEnd;
           var _10 = {
             configurable: true,
             enumerable: true,
@@ -1149,7 +1149,7 @@ function M7() {
               value: n1
             }),
             group: Z({}, _10, {
-              value: B1
+              value: C1
             }),
             groupCollapsed: Z({}, _10, {
               value: f1
@@ -1617,7 +1617,7 @@ const I0 = () => 0, F9 = `
 `, F4 = (t2, e2 = false) => t2 === "center" ? "center" : t2 === "left" ? e2 ? "flex-end" : "flex-start" : t2 === "stretch" ? "stretch" : e2 ? "flex-start" : "flex-end", E4 = (t2, e2 = false) => t2 === "center" ? "center" : t2 === "top" ? e2 ? "flex-end" : "flex-start" : e2 ? "flex-start" : "flex-end", f7 = styled.div`
   box-sizing: border-box;
   background-color: ${(t2) => t2.$active ? t2.$backColorActive : t2.$backColor};
-  filter: ${(t2) => t2.$disabled ? `brightness(${C1.button.brightnessDisabled})` : t2.$pressed ? `brightness(${C1.button.brightnessPressed})` : "none"};
+  filter: ${(t2) => t2.$disabled ? `brightness(${B1.button.brightnessDisabled})` : t2.$pressed ? `brightness(${B1.button.brightnessPressed})` : "none"};
   border-radius: ${({ $borderRadius: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
   width: ${({ $width: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
   height: ${({ $height: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
@@ -1668,7 +1668,7 @@ const I0 = () => 0, F9 = `
   }, W = () => {
     e2 || X();
   }, G = i2 ? void 0 : r2 ? `dek-button-${t2}-active` : `dek-button-${t2}`;
-  return i2 || (i2 = (J = C1.button[t2]) == null ? void 0 : J.backColor), c2 || (c2 = (r1 = C1.button[t2]) == null ? void 0 : r1.backColorActive), /* @__PURE__ */ z1.jsx(
+  return i2 || (i2 = (J = B1.button[t2]) == null ? void 0 : J.backColor), c2 || (c2 = (r1 = B1.button[t2]) == null ? void 0 : r1.backColorActive), /* @__PURE__ */ z1.jsx(
     f7,
     {
       $pressed: e2 ? false : R,
@@ -24498,7 +24498,7 @@ const kU1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   iconPadding: c2 = 2,
   iconBackColor: l2 = ""
 }) => {
-  const o4 = e2 ? h2 : n5 || C1.button.normal.color, d = l2 ? i2 - 4 : i2, g = c2, f4 = l2 ? 2 : 0;
+  const o4 = e2 ? h2 : n5 || B1.button.normal.color, d = l2 ? i2 - 4 : i2, g = c2, f4 = l2 ? 2 : 0;
   return /* @__PURE__ */ z1.jsxs(
     OU1,
     {
@@ -24521,7 +24521,7 @@ const kU1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
       ]
     }
   );
-}, C1 = {
+}, B1 = {
   text: {
     size: {
       xxsmall: 10,
@@ -24618,15 +24618,15 @@ const kU1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
 function z5(t2) {
   switch (t2) {
     case "xxsubtle":
-      return C1.text.color.xxsubtle;
+      return B1.text.color.xxsubtle;
     case "xsubtle":
-      return C1.text.color.xsubtle;
+      return B1.text.color.xsubtle;
     case "subtle":
-      return C1.text.color.subtle;
+      return B1.text.color.subtle;
     case "tint":
-      return C1.text.color.tint;
+      return B1.text.color.tint;
     case "normal":
-      return C1.text.color.normal;
+      return B1.text.color.normal;
     default:
       return t2;
   }
@@ -24634,97 +24634,97 @@ function z5(t2) {
 function H3(t2) {
   switch (t2) {
     case "normal":
-      return C1.text.family.normal;
+      return B1.text.family.normal;
     case "condensed":
-      return C1.text.family.condensed;
+      return B1.text.family.condensed;
     case "mono":
-      return C1.text.family.mono;
+      return B1.text.family.mono;
     case "slab":
-      return C1.text.family.slab;
+      return B1.text.family.slab;
     case "flex":
-      return C1.text.family.flex;
+      return B1.text.family.flex;
     case "heading":
-      return C1.text.family.heading;
+      return B1.text.family.heading;
     default:
       return t2;
   }
 }
 function j4(t2) {
   if (t2 === void 0)
-    return C1.text.size.normal;
+    return B1.text.size.normal;
   if (typeof t2 == "number")
     return t2;
   switch (t2) {
     case "xxsmall":
-      return C1.text.size.xxsmall;
+      return B1.text.size.xxsmall;
     case "xsmall":
-      return C1.text.size.xsmall;
+      return B1.text.size.xsmall;
     case "small":
-      return C1.text.size.small;
+      return B1.text.size.small;
     case "normal":
-      return C1.text.size.normal;
+      return B1.text.size.normal;
     case "large":
-      return C1.text.size.large;
+      return B1.text.size.large;
     case "xlarge":
-      return C1.text.size.xlarge;
+      return B1.text.size.xlarge;
     case "xxlarge":
-      return C1.text.size.xxlarge;
+      return B1.text.size.xxlarge;
     case "heading":
-      return C1.text.size.heading;
+      return B1.text.size.heading;
   }
 }
 function N9(t2) {
   if (t2 === void 0)
-    return C1.text.height.normal;
+    return B1.text.height.normal;
   if (typeof t2 == "number")
     return t2 + 5;
   switch (t2) {
     case "xxsmall":
-      return C1.text.height.xxsmall;
+      return B1.text.height.xxsmall;
     case "xsmall":
-      return C1.text.height.xsmall;
+      return B1.text.height.xsmall;
     case "small":
-      return C1.text.height.small;
+      return B1.text.height.small;
     case "normal":
-      return C1.text.height.normal;
+      return B1.text.height.normal;
     case "large":
-      return C1.text.height.large;
+      return B1.text.height.large;
     case "xlarge":
-      return C1.text.height.xlarge;
+      return B1.text.height.xlarge;
     case "xxlarge":
-      return C1.text.height.xxlarge;
+      return B1.text.height.xxlarge;
     case "heading":
-      return C1.text.height.heading;
+      return B1.text.height.heading;
   }
 }
 function M5(t2) {
   if (t2 === void 0)
-    return C1.text.weight.normal;
+    return B1.text.weight.normal;
   if (typeof t2 == "number")
     return t2;
   switch (t2) {
     case "xxthin":
-      return C1.text.weight.xxthin;
+      return B1.text.weight.xxthin;
     case "xthin":
-      return C1.text.weight.xthin;
+      return B1.text.weight.xthin;
     case "thin":
-      return C1.text.weight.thin;
+      return B1.text.weight.thin;
     case "normal":
-      return C1.text.weight.normal;
+      return B1.text.weight.normal;
     case "bold":
-      return C1.text.weight.bold;
+      return B1.text.weight.bold;
     case "xbold":
-      return C1.text.weight.xbold;
+      return B1.text.weight.xbold;
     case "xxbold":
-      return C1.text.weight.xxbold;
+      return B1.text.weight.xxbold;
     case "heavy":
-      return C1.text.weight.heavy;
+      return B1.text.weight.heavy;
     case "xheavy":
-      return C1.text.weight.xheavy;
+      return B1.text.weight.xheavy;
     case "xxheavy":
-      return C1.text.weight.xxheavy;
+      return B1.text.weight.xxheavy;
     case "heading":
-      return C1.text.weight.heading;
+      return B1.text.weight.heading;
   }
 }
 const bU1 = styled.div`
@@ -24842,22 +24842,22 @@ const bU1 = styled.div`
   }, N = t2.variant === "clear" || t2.variant === "toggle" ? t2.variant : "normal", X = {
     ...t2,
     pressed: e2,
-    color: m || ((Q = C1.button[N]) == null ? void 0 : Q.color),
-    colorActive: B || (($ = C1.button[N]) == null ? void 0 : $.colorActive),
+    color: m || ((Q = B1.button[N]) == null ? void 0 : Q.color),
+    colorActive: B || (($ = B1.button[N]) == null ? void 0 : $.colorActive),
     textStyle: {},
     label: "button-text"
   }, c1 = {
     ...t2,
     pressed: e2,
-    iconColor: i2 || m || ((W = C1.button[N]) == null ? void 0 : W.color),
-    iconColorActive: w2 || B || ((G = C1.button[N]) == null ? void 0 : G.colorActive),
+    iconColor: i2 || m || ((W = B1.button[N]) == null ? void 0 : W.color),
+    iconColorActive: w2 || B || ((G = B1.button[N]) == null ? void 0 : G.colorActive),
     label: "button-icon"
   }, a1 = {
     ...t2,
     variant: N,
     paddingVert: f4 === void 0 && d === void 0 && g === void 0 && o4 === void 0 ? 12 : o4,
     // if only backColor is set, use it for backColorActive (except for toggle variants)
-    backColorActive: l2 || (N !== "toggle" ? c2 || ((J = C1.button[N]) == null ? void 0 : J.backColor) : void 0)
+    backColorActive: l2 || (N !== "toggle" ? c2 || ((J = B1.button[N]) == null ? void 0 : J.backColor) : void 0)
   };
   let R = null;
   return C ? R = C : h2 === "none" ? (X.textStyle.margin = "4px 4px 0 4px", R = /* @__PURE__ */ z1.jsx(P8, { ...X })) : (h2 === "top" ? (a1.direction = "vert", X.textStyle.margin = "0 4px") : h2 === "right" ? (a1.direction = "horz-reverse", X.textStyle.margin = "4px 4px 0 4px") : h2 === "bottom" ? (a1.direction = "vert-reverse", X.textStyle.margin = "0 4px") : h2 === "left" && (a1.direction = "horz", X.textStyle.margin = "4px 4px 0 4px"), R = /* @__PURE__ */ z1.jsxs(z1.Fragment, { children: [
@@ -24874,79 +24874,36 @@ const bU1 = styled.div`
       children: R
     }
   );
-}, Bt2 = (t2) => {
-  const {
-    title: e2,
-    width: r2 = C1.card.width,
-    height: n5 = C1.card.height,
-    halign: h2 = "left",
-    valign: i2 = "top",
-    onPressed: c2,
-    children: l2,
-    borderRadius: o4 = C1.card.borderRadius,
-    onClick: d = I0
-  } = t2;
-  return /* @__PURE__ */ z1.jsx(
-    R6,
-    {
-      ...t2,
-      label: "card-button",
-      width: r2,
-      height: n5,
-      halign: h2,
-      valign: i2,
-      title: e2,
-      borderRadius: o4,
-      onClick: d,
-      onPressed: c2,
-      children: l2
-    }
-  );
-}, _U1 = (t2) => {
-  const { onPressed: e2, children: r2, onClick: n5 = I0, padding: h2 = 6 } = t2;
-  return /* @__PURE__ */ z1.jsx(
-    R6,
-    {
-      ...t2,
-      label: "icon-button",
-      padding: h2,
-      halign: "center",
-      valign: "center",
-      onClick: n5,
-      onPressed: e2,
-      children: r2
-    }
-  );
 };
 function A3(t2) {
   switch (t2) {
     case "subtle":
-      return console.error("subtle view backColor is deprecated"), C1.text.color.subtle;
+      return console.error("subtle view backColor is deprecated"), B1.text.color.subtle;
     case "tile":
-      return C1.view.backColor.tile;
+      return B1.view.backColor.tile;
     case "card":
-      return C1.view.backColor.card;
+      return B1.view.backColor.card;
     case "clear":
-      return C1.view.backColor.clear;
+      return B1.view.backColor.clear;
     case "light":
-      return C1.view.backColor.light;
+      return B1.view.backColor.light;
     case "lighter":
-      return C1.view.backColor.lighter;
+      return B1.view.backColor.lighter;
     case "lightest":
-      return C1.view.backColor.lightest;
+      return B1.view.backColor.lightest;
     case "dark":
-      return C1.view.backColor.dark;
+      return B1.view.backColor.dark;
     case "darker":
-      return C1.view.backColor.darker;
+      return B1.view.backColor.darker;
     case "darkest":
-      return C1.view.backColor.darkest;
+      return B1.view.backColor.darkest;
     case "none":
       return "transparent";
     default:
       return t2;
   }
 }
-const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 === "hidden" ? "hidden" : "initial", xa = (t2) => typeof t2 == "string" ? t2 === "true" : t2, IU1 = styled.div`
+const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 === "hidden" ? "hidden" : "initial", xa = (t2) => typeof t2 == "string" ? t2 === "true" : t2, _U1 = styled.div`
   display: flex;
   box-sizing: border-box;
   ${(t2) => xa(t2.$collapse) ? "flex-shrink: 0;" : ""}
@@ -24957,7 +24914,7 @@ const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 ===
 }};
   ${({ $fixed: t2 }) => t2 === "none" ? "" : t2 === "top" ? "position: absolute; top: 0; left: 0; right: 0;" : "position: absolute; bottom: 0; left: 0; right: 0;"}
   width: ${({ $width: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
-  color: ${() => C1.text.color.normal};
+  color: ${() => B1.text.color.normal};
   border-radius: ${(t2) => t2.$borderRadius}px;
   overflow-y: ${({ $vscroll: t2 }) => b3(t2)};
   overflow-x: ${({ $hscroll: t2 }) => b3(t2)};
@@ -25010,7 +24967,7 @@ const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 ===
   style: G,
   children: J
 }) => /* @__PURE__ */ z1.jsx(
-  IU1,
+  _U1,
   {
     "aria-label": t2 || "view",
     $direction: e2,
@@ -25041,37 +24998,117 @@ const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 ===
     style: G,
     children: J
   }
-), PU1 = ({ size: t2, weight: e2, ...r2 }) => /* @__PURE__ */ z1.jsx(h4, { size: t2 || "heading", weight: e2 || "heading", ...r2 }), WU1 = ({ title: t2, active: e2, onClick: r2 = I0 }) => /* @__PURE__ */ z1.jsx(
-  u0,
-  {
-    backColor: e2 ? "clear" : "none",
-    backColorHover: e2 ? "lighter" : "light",
-    borderRadius: 6,
-    onClick: r2,
-    collapse: true,
-    className: e2 ? "dek-button-clear" : "",
-    style: { marginBottom: 4, marginRight: 4, cursor: "pointer" },
-    children: /* @__PURE__ */ z1.jsx(PU1, { padding: 20, children: t2 })
-  }
-), Ct2 = ({
+), Bt2 = (t2) => {
+  const {
+    variant: e2 = "normal",
+    children: r2,
+    square: n5 = false,
+    width: h2 = n5 ? B1.card.height : B1.card.width,
+    height: i2 = B1.card.height,
+    borderRadius: c2 = B1.card.borderRadius,
+    label: l2 = "card",
+    ...o4
+  } = t2;
+  let { backColor: d } = t2;
+  const g = d ? void 0 : `dek-card-${e2}`;
+  return d || (d = e2 === "normal" ? B1.view.backColor.card : B1.view.backColor.clear), /* @__PURE__ */ z1.jsx(
+    u0,
+    {
+      width: h2,
+      height: i2,
+      className: g,
+      backColor: d,
+      borderRadius: c2,
+      label: l2,
+      ...o4,
+      children: r2
+    }
+  );
+}, Ct2 = (t2) => {
+  const {
+    title: e2,
+    square: r2 = false,
+    width: n5 = r2 ? B1.card.height : B1.card.width,
+    height: h2 = B1.card.height,
+    halign: i2 = "left",
+    valign: c2 = "top",
+    onPressed: l2,
+    children: o4,
+    borderRadius: d = B1.card.borderRadius,
+    onClick: g = I0
+  } = t2;
+  return /* @__PURE__ */ z1.jsx(
+    R6,
+    {
+      ...t2,
+      label: "card-button",
+      width: n5,
+      height: h2,
+      halign: i2,
+      valign: c2,
+      title: e2,
+      borderRadius: d,
+      onClick: g,
+      onPressed: l2,
+      children: o4
+    }
+  );
+}, IU1 = (t2) => {
+  const { onPressed: e2, children: r2, onClick: n5 = I0, padding: h2 = 6 } = t2;
+  return /* @__PURE__ */ z1.jsx(
+    R6,
+    {
+      ...t2,
+      label: "icon-button",
+      padding: h2,
+      halign: "center",
+      valign: "center",
+      onClick: n5,
+      onPressed: e2,
+      children: r2
+    }
+  );
+}, PU1 = ({ size: t2, weight: e2, ...r2 }) => /* @__PURE__ */ z1.jsx(h4, { size: t2 || "heading", weight: e2 || "heading", ...r2 }), WU1 = ({
+  title: t2,
+  active: e2,
+  compact: r2 = false,
+  onClick: n5 = I0
+}) => {
+  const h2 = r2 ? 10 : 20, i2 = r2 ? "large" : void 0;
+  return /* @__PURE__ */ z1.jsx(
+    u0,
+    {
+      backColor: e2 ? "clear" : "none",
+      backColorHover: e2 ? "lighter" : "light",
+      borderRadius: 6,
+      onClick: n5,
+      collapse: true,
+      className: e2 ? "dek-button-clear" : "",
+      style: { marginBottom: 4, marginRight: 4, cursor: "pointer" },
+      children: /* @__PURE__ */ z1.jsx(PU1, { size: i2, padding: h2, children: t2 })
+    }
+  );
+}, yt2 = ({
   items: t2,
   initialKey: e2,
   direction: r2 = "vert",
-  onSelect: n5 = I0
+  compact: n5 = false,
+  onSelect: h2 = I0
 }) => {
-  const [h2, i2] = useState$1(e2), c2 = (l2) => {
-    i2(l2), n5(l2);
+  const [i2, c2] = useState$1(e2), l2 = (o4) => {
+    c2(o4), h2(o4);
   };
-  return /* @__PURE__ */ z1.jsx(u0, { children: /* @__PURE__ */ z1.jsx(u0, { direction: r2, collapse: true, children: t2.map(({ key: l2, title: o4 }) => /* @__PURE__ */ z1.jsx(
+  return /* @__PURE__ */ z1.jsx(u0, { children: /* @__PURE__ */ z1.jsx(u0, { direction: r2, collapse: true, children: t2.map(({ key: o4, title: d }) => /* @__PURE__ */ z1.jsx(
     WU1,
     {
-      title: o4,
-      onClick: () => c2(l2),
-      active: h2 === l2
+      title: d,
+      compact: n5,
+      onClick: () => l2(o4),
+      active: i2 === o4
     },
-    l2
+    o4
   )) }) });
-}, yt2 = (t2) => {
+}, kt2 = (t2) => {
   const { title: e2, icon: r2 = "left", onPressed: n5, children: h2, onClick: i2 = I0 } = t2;
   return /* @__PURE__ */ z1.jsx(
     R6,
@@ -25096,7 +25133,7 @@ const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 ===
   padding: ${({ $padding: t2 }) => t2}px;
   background-color: ${({ $backColor: t2 }) => t2};
   border-radius: 50%;
-`, TU1 = styled.div``, kt2 = ({
+`, TU1 = styled.div``, Ot2 = ({
   loading: t2 = false,
   disabled: e2 = false,
   iconName: r2,
@@ -25105,7 +25142,7 @@ const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 ===
   iconPadding: i2 = 2,
   iconBackColor: c2 = "transparent"
 }) => {
-  const l2 = e2 ? "#888" : n5 === void 0 ? C1.text.color.normal : n5;
+  const l2 = e2 ? "#888" : n5 === void 0 ? B1.text.color.normal : n5;
   return /* @__PURE__ */ z1.jsxs(
     DU1,
     {
@@ -25126,31 +25163,6 @@ const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 ===
       ]
     }
   );
-}, Ot2 = (t2) => {
-  const {
-    variant: e2 = "normal",
-    children: r2,
-    width: n5 = C1.card.width,
-    height: h2 = C1.card.height,
-    borderRadius: i2 = C1.card.borderRadius,
-    label: c2 = "card",
-    ...l2
-  } = t2;
-  let { backColor: o4 } = t2;
-  const d = o4 ? void 0 : `dek-card-${e2}`;
-  return o4 || (o4 = e2 === "normal" ? C1.view.backColor.card : C1.view.backColor.clear), /* @__PURE__ */ z1.jsx(
-    u0,
-    {
-      width: n5,
-      height: h2,
-      className: d,
-      backColor: o4,
-      borderRadius: i2,
-      label: c2,
-      ...l2,
-      children: r2
-    }
-  );
 };
 var $9 = {}, U9 = {}, h6 = { exports: {} }, wa = { exports: {} }, Y5 = { exports: {} }, Ba = { exports: {} }, G5 = { exports: {} }, Ca, W8;
 function RU1() {
@@ -25166,7 +25178,7 @@ function RU1() {
         !n5.call(v, E) && E !== V && t2(v, E, { get: () => M[E], enumerable: !(k = e2(M, E)) || k.enumerable });
     return v;
   }, c2 = (v) => i2(t2({}, "__esModule", { value: true }), v), l2 = {};
-  h2(l2, { FluidValue: () => _10, Globals: () => o4, addFluidObserver: () => u1, callFluidObserver: () => ct, callFluidObservers: () => e0, clamp: () => Q2, colorToRgba: () => X1, colors: () => $1, createInterpolator: () => L0, createStringInterpolator: () => A2, defineHidden: () => D, deprecateDirectCall: () => v4, deprecateInterpolate: () => o42, each: () => d1, eachProp: () => I, easings: () => J0, flush: () => n1, flushCalls: () => B1, frameLoop: () => c23, getFluidObservers: () => yt, getFluidValue: () => W0, hasFluidValue: () => Z0, hex3: () => x, hex4: () => z, hex6: () => p4, hex8: () => O, hsl: () => F2, hsla: () => l0, is: () => Z, isAnimatedString: () => ot, isEqual: () => L1, isSSR: () => f1, noop: () => r1, onResize: () => kt, onScroll: () => z4, once: () => D0, prefix: () => P1, raf: () => g, removeFluidObserver: () => E1, rgb: () => q2, rgba: () => S2, setFluidGetter: () => v1, toArray: () => S, useConstant: () => E0, useForceUpdate: () => L, useIsomorphicLayoutEffect: () => u7, useMemoOne: () => P, useOnce: () => h1, usePrev: () => l1, useReducedMotion: () => V1 }), Ca = c2(l2);
+  h2(l2, { FluidValue: () => _10, Globals: () => o4, addFluidObserver: () => u1, callFluidObserver: () => ct, callFluidObservers: () => e0, clamp: () => Q2, colorToRgba: () => X1, colors: () => $1, createInterpolator: () => L0, createStringInterpolator: () => A2, defineHidden: () => D, deprecateDirectCall: () => v4, deprecateInterpolate: () => o42, each: () => d1, eachProp: () => I, easings: () => J0, flush: () => n1, flushCalls: () => C1, frameLoop: () => c23, getFluidObservers: () => yt, getFluidValue: () => W0, hasFluidValue: () => Z0, hex3: () => x, hex4: () => z, hex6: () => p4, hex8: () => O, hsl: () => F2, hsla: () => l0, is: () => Z, isAnimatedString: () => ot, isEqual: () => L1, isSSR: () => f1, noop: () => r1, onResize: () => kt, onScroll: () => z4, once: () => D0, prefix: () => P1, raf: () => g, removeFluidObserver: () => E1, rgb: () => q2, rgba: () => S2, setFluidGetter: () => v1, toArray: () => S, useConstant: () => E0, useForceUpdate: () => L, useIsomorphicLayoutEffect: () => u7, useMemoOne: () => P, useOnce: () => h1, usePrev: () => l1, useReducedMotion: () => V1 }), Ca = c2(l2);
   var o4 = {};
   h2(o4, { assign: () => H1, colors: () => k1, createStringInterpolator: () => S1, skipAnimation: () => y2, to: () => j1, willAdvance: () => K });
   var d = G(), g = (v) => a1(v, d), f4 = G();
@@ -25284,7 +25296,7 @@ function RU1() {
       v.clear(), d1(V, M);
     }
   }
-  var B1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
+  var C1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
     v.to && (j1 = v.to), v.now && (g.now = v.now), v.colors !== void 0 && (k1 = v.colors), v.skipAnimation != null && (y2 = v.skipAnimation), v.createStringInterpolator && (S1 = v.createStringInterpolator), v.requestAnimationFrame && g.use(v.requestAnimationFrame), v.batchedUpdates && (g.batchedUpdates = v.batchedUpdates), v.willAdvance && (K = v.willAdvance), v.frameLoop && (g.frameLoop = v.frameLoop);
   }, g1 = /* @__PURE__ */ new Set(), M1 = [], I1 = [], R1 = 0, c23 = { get idle() {
     return !g1.size && !M1.length;
@@ -25607,7 +25619,7 @@ function FU1() {
     eachProp: () => I,
     easings: () => J0,
     flush: () => n1,
-    flushCalls: () => B1,
+    flushCalls: () => C1,
     frameLoop: () => c23,
     getFluidObservers: () => yt,
     getFluidValue: () => W0,
@@ -25781,7 +25793,7 @@ function FU1() {
       v.clear(), d1(V, M);
     }
   }
-  var B1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
+  var C1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
     v.to && (j1 = v.to), v.now && (g.now = v.now), v.colors !== void 0 && (k1 = v.colors), v.skipAnimation != null && (y2 = v.skipAnimation), v.createStringInterpolator && (S1 = v.createStringInterpolator), v.requestAnimationFrame && g.use(v.requestAnimationFrame), v.batchedUpdates && (g.batchedUpdates = v.batchedUpdates), v.willAdvance && (K = v.willAdvance), v.frameLoop && (g.frameLoop = v.frameLoop);
   }, g1 = /* @__PURE__ */ new Set(), M1 = [], I1 = [], R1 = 0, c23 = {
     get idle() {
@@ -26521,7 +26533,7 @@ function EU1() {
     return (0, d1.forwardRef)((g1, M1) => {
       let I1 = (0, d1.useRef)(null), R1 = H1 && (0, d1.useCallback)(($1) => {
         I1.current = f1(M1, $1);
-      }, [M1]), [c23, K1] = B1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
+      }, [M1]), [c23, K1] = C1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
         let $1 = I1.current;
         H1 && !$1 || ($1 ? K.applyAnimatedValues($1, c23.getValue(true)) : false) === false && H2();
       }, z2 = new n1(W2, K1), M2 = (0, d1.useRef)();
@@ -26542,7 +26554,7 @@ function EU1() {
       y2.type == "change" && I.raf.write(this.update);
     }
   };
-  function B1(y2, K) {
+  function C1(y2, K) {
     let H1 = /* @__PURE__ */ new Set();
     return $.dependencies = H1, y2.style && (y2 = { ...y2, style: K.createAnimatedStyle(y2.style) }), y2 = new W(y2), $.dependencies = null, [y2, H1];
   }
@@ -26720,7 +26732,7 @@ function jU1() {
           I1.current = f1(M1, $1);
         },
         [M1]
-      ), [c23, K1] = B1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
+      ), [c23, K1] = C1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
         const $1 = I1.current;
         if (H1 && !$1)
           return;
@@ -26746,7 +26758,7 @@ function jU1() {
       y2.type == "change" && I.raf.write(this.update);
     }
   };
-  function B1(y2, K) {
+  function C1(y2, K) {
     const H1 = /* @__PURE__ */ new Set();
     return $.dependencies = H1, y2.style && (y2 = {
       ...y2,
@@ -26917,7 +26929,7 @@ function UU1() {
         }
       });
     }
-    var L1 = T1(), d1 = React__default, I = T1(), S = T1(), n1 = Vt(), B1 = T1(), f1 = { default: { tension: 170, friction: 26 }, gentle: { tension: 120, friction: 14 }, wobbly: { tension: 180, friction: 12 }, stiff: { tension: 210, friction: 20 }, slow: { tension: 280, friction: 60 }, molasses: { tension: 280, friction: 120 } }, S1 = { ...f1.default, mass: 1, damping: 1, easing: B1.easings.linear, clamp: false }, j1 = class {
+    var L1 = T1(), d1 = React__default, I = T1(), S = T1(), n1 = Vt(), C1 = T1(), f1 = { default: { tension: 170, friction: 26 }, gentle: { tension: 120, friction: 14 }, wobbly: { tension: 180, friction: 12 }, stiff: { tension: 210, friction: 20 }, slow: { tension: 280, friction: 60 }, molasses: { tension: 280, friction: 120 } }, S1 = { ...f1.default, mass: 1, damping: 1, easing: C1.easings.linear, clamp: false }, j1 = class {
       constructor() {
         this.velocity = 0, Object.assign(this, S1);
       }
@@ -26927,14 +26939,14 @@ function UU1() {
       for (let Y in S1)
         s10[Y] == null && (s10[Y] = S1[Y]);
       let { frequency: L, damping: A } = s10, { mass: P } = s10;
-      return B1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
+      return C1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
     }
     function y2(s10, u7) {
-      if (!B1.is.und(u7.decay))
+      if (!C1.is.und(u7.decay))
         s10.duration = void 0;
       else {
-        let H = !B1.is.und(u7.tension) || !B1.is.und(u7.friction);
-        (H || !B1.is.und(u7.frequency) || !B1.is.und(u7.damping) || !B1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
+        let H = !C1.is.und(u7.tension) || !C1.is.und(u7.friction);
+        (H || !C1.is.und(u7.frequency) || !C1.is.und(u7.damping) || !C1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
       }
     }
     var K = [], H1 = class {
@@ -27998,7 +28010,7 @@ function qU1() {
         }
       });
     }
-    var L1 = T1(), d1 = React__default, I = T1(), S = T1(), n1 = Vt(), B1 = T1(), f1 = {
+    var L1 = T1(), d1 = React__default, I = T1(), S = T1(), n1 = Vt(), C1 = T1(), f1 = {
       default: { tension: 170, friction: 26 },
       gentle: { tension: 120, friction: 14 },
       wobbly: { tension: 180, friction: 12 },
@@ -28009,7 +28021,7 @@ function qU1() {
       ...f1.default,
       mass: 1,
       damping: 1,
-      easing: B1.easings.linear,
+      easing: C1.easings.linear,
       clamp: false
     }, j1 = class {
       constructor() {
@@ -28022,14 +28034,14 @@ function qU1() {
         s10[Y] == null && (s10[Y] = S1[Y]);
       let { frequency: L, damping: A } = s10;
       const { mass: P } = s10;
-      return B1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
+      return C1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
     }
     function y2(s10, u7) {
-      if (!B1.is.und(u7.decay))
+      if (!C1.is.und(u7.decay))
         s10.duration = void 0;
       else {
-        const H = !B1.is.und(u7.tension) || !B1.is.und(u7.friction);
-        (H || !B1.is.und(u7.frequency) || !B1.is.und(u7.damping) || !B1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
+        const H = !C1.is.und(u7.tension) || !C1.is.und(u7.friction);
+        (H || !C1.is.und(u7.frequency) || !C1.is.und(u7.damping) || !C1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
       }
     }
     var K = [], H1 = class {
@@ -29314,10 +29326,10 @@ function YU1() {
     var e2 = Object.defineProperty, r2 = Object.getOwnPropertyDescriptor, n5 = Object.getOwnPropertyNames, h2 = Object.prototype.hasOwnProperty, i2 = (I, S) => {
       for (var n1 in S)
         e2(I, n1, { get: S[n1], enumerable: true });
-    }, c2 = (I, S, n1, B1) => {
+    }, c2 = (I, S, n1, C1) => {
       if (S && typeof S == "object" || typeof S == "function")
         for (let f1 of n5(S))
-          !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(B1 = r2(S, f1)) || B1.enumerable });
+          !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(C1 = r2(S, f1)) || C1.enumerable });
       return I;
     }, l2 = (I, S, n1) => (c2(I, S, "default"), n1 && c2(n1, S, "default")), o4 = (I) => c2(e2({}, "__esModule", { value: true }), I), d = {};
     i2(d, { a: () => d1, animated: () => d1 }), t2.exports = o4(d);
@@ -29329,11 +29341,11 @@ function YU1() {
     function F(I, S) {
       if (!I.nodeType || !I.setAttribute)
         return false;
-      let n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: B1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map((g1) => n1 || I.hasAttribute(g1) ? g1 : b[g1] || (b[g1] = g1.replace(/([A-Z])/g, (M1) => "-" + M1.toLowerCase())));
+      let n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: C1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map((g1) => n1 || I.hasAttribute(g1) ? g1 : b[g1] || (b[g1] = g1.replace(/([A-Z])/g, (M1) => "-" + M1.toLowerCase())));
       f1 !== void 0 && (I.textContent = f1);
-      for (let g1 in B1)
-        if (B1.hasOwnProperty(g1)) {
-          let M1 = C(g1, B1[g1]);
+      for (let g1 in C1)
+        if (C1.hasOwnProperty(g1)) {
+          let M1 = C(g1, C1[g1]);
           B.test(g1) ? I.style.setProperty(g1, M1) : I.style[g1] = M1;
         }
       H1.forEach((g1, M1) => {
@@ -29343,18 +29355,18 @@ function YU1() {
     var N = { animationIterationCount: true, borderImageOutset: true, borderImageSlice: true, borderImageWidth: true, boxFlex: true, boxFlexGroup: true, boxOrdinalGroup: true, columnCount: true, columns: true, flex: true, flexGrow: true, flexPositive: true, flexShrink: true, flexNegative: true, flexOrder: true, gridRow: true, gridRowEnd: true, gridRowSpan: true, gridRowStart: true, gridColumn: true, gridColumnEnd: true, gridColumnSpan: true, gridColumnStart: true, fontWeight: true, lineClamp: true, lineHeight: true, opacity: true, order: true, orphans: true, tabSize: true, widows: true, zIndex: true, zoom: true, fillOpacity: true, floodOpacity: true, stopOpacity: true, strokeDasharray: true, strokeDashoffset: true, strokeMiterlimit: true, strokeOpacity: true, strokeWidth: true }, X = (I, S) => I + S.charAt(0).toUpperCase() + S.substring(1), c1 = ["Webkit", "Ms", "Moz", "O"];
     N = Object.keys(N).reduce((I, S) => (c1.forEach((n1) => I[X(n1, S)] = I[S]), I), N);
     var a1 = Vt(), R = T1(), Q = /^(matrix|translate|scale|rotate|skew)/, $ = /^(translate)/, W = /^(rotate|skew)/, G = (I, S) => R.is.num(I) && I !== 0 ? I + S : I, J = (I, S) => R.is.arr(I) ? I.every((n1) => J(n1, S)) : R.is.num(I) ? I === S : parseFloat(I) === S, r1 = class extends a1.AnimatedObject {
-      constructor({ x: I, y: S, z: n1, ...B1 }) {
+      constructor({ x: I, y: S, z: n1, ...C1 }) {
         let f1 = [], S1 = [];
-        (I || S || n1) && (f1.push([I || 0, S || 0, n1 || 0]), S1.push((j1) => [`translate3d(${j1.map((k1) => G(k1, "px")).join(",")})`, J(j1, 0)])), (0, R.eachProp)(B1, (j1, k1) => {
+        (I || S || n1) && (f1.push([I || 0, S || 0, n1 || 0]), S1.push((j1) => [`translate3d(${j1.map((k1) => G(k1, "px")).join(",")})`, J(j1, 0)])), (0, R.eachProp)(C1, (j1, k1) => {
           if (k1 === "transform")
             f1.push([j1 || ""]), S1.push((y2) => [y2, y2 === ""]);
           else if (Q.test(k1)) {
-            if (delete B1[k1], R.is.und(j1))
+            if (delete C1[k1], R.is.und(j1))
               return;
             let y2 = $.test(k1) ? "px" : W.test(k1) ? "deg" : "";
             f1.push((0, R.toArray)(j1)), S1.push(k1 === "rotate3d" ? ([K, H1, g1, M1]) => [`rotate3d(${K},${H1},${g1},${G(M1, y2)})`, J(M1, 0)] : (K) => [`${k1}(${K.map((H1) => G(H1, y2)).join(",")})`, J(K, k1.startsWith("scale") ? 1 : 0)]);
           }
-        }), f1.length && (B1.transform = new D(f1, S1)), super(B1);
+        }), f1.length && (C1.transform = new D(f1, S1)), super(C1);
       }
     }, D = class extends R.FluidValue {
       constructor(I, S) {
@@ -29365,8 +29377,8 @@ function YU1() {
       }
       _get() {
         let I = "", S = true;
-        return (0, R.each)(this.inputs, (n1, B1) => {
-          let f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[B1](R.is.arr(f1) ? f1 : n1.map(R.getFluidValue));
+        return (0, R.each)(this.inputs, (n1, C1) => {
+          let f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[C1](R.is.arr(f1) ? f1 : n1.map(R.getFluidValue));
           I += " " + S1, S = S && j1;
         }), S ? "none" : I;
       }
@@ -29390,10 +29402,10 @@ function GU1() {
     var e2 = Object.defineProperty, r2 = Object.getOwnPropertyDescriptor, n5 = Object.getOwnPropertyNames, h2 = Object.prototype.hasOwnProperty, i2 = (I, S) => {
       for (var n1 in S)
         e2(I, n1, { get: S[n1], enumerable: true });
-    }, c2 = (I, S, n1, B1) => {
+    }, c2 = (I, S, n1, C1) => {
       if (S && typeof S == "object" || typeof S == "function")
         for (let f1 of n5(S))
-          !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(B1 = r2(S, f1)) || B1.enumerable });
+          !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(C1 = r2(S, f1)) || C1.enumerable });
       return I;
     }, l2 = (I, S, n1) => (c2(I, S, "default"), n1 && c2(n1, S, "default")), o4 = (I) => c2(e2({}, "__esModule", { value: true }), I), d = {};
     i2(d, {
@@ -29408,7 +29420,7 @@ function GU1() {
     function F(I, S) {
       if (!I.nodeType || !I.setAttribute)
         return false;
-      const n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: B1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map(
+      const n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: C1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map(
         (g1) => n1 || I.hasAttribute(g1) ? g1 : b[g1] || (b[g1] = g1.replace(
           /([A-Z])/g,
           // Attributes are written in dash case
@@ -29416,9 +29428,9 @@ function GU1() {
         ))
       );
       f1 !== void 0 && (I.textContent = f1);
-      for (const g1 in B1)
-        if (B1.hasOwnProperty(g1)) {
-          const M1 = C(g1, B1[g1]);
+      for (const g1 in C1)
+        if (C1.hasOwnProperty(g1)) {
+          const M1 = C(g1, C1[g1]);
           B.test(g1) ? I.style.setProperty(g1, M1) : I.style[g1] = M1;
         }
       H1.forEach((g1, M1) => {
@@ -29471,17 +29483,17 @@ function GU1() {
     }, X = (I, S) => I + S.charAt(0).toUpperCase() + S.substring(1), c1 = ["Webkit", "Ms", "Moz", "O"];
     N = Object.keys(N).reduce((I, S) => (c1.forEach((n1) => I[X(n1, S)] = I[S]), I), N);
     var a1 = Vt(), R = T1(), Q = /^(matrix|translate|scale|rotate|skew)/, $ = /^(translate)/, W = /^(rotate|skew)/, G = (I, S) => R.is.num(I) && I !== 0 ? I + S : I, J = (I, S) => R.is.arr(I) ? I.every((n1) => J(n1, S)) : R.is.num(I) ? I === S : parseFloat(I) === S, r1 = class extends a1.AnimatedObject {
-      constructor({ x: I, y: S, z: n1, ...B1 }) {
+      constructor({ x: I, y: S, z: n1, ...C1 }) {
         const f1 = [], S1 = [];
         (I || S || n1) && (f1.push([I || 0, S || 0, n1 || 0]), S1.push((j1) => [
           `translate3d(${j1.map((k1) => G(k1, "px")).join(",")})`,
           // prettier-ignore
           J(j1, 0)
-        ])), (0, R.eachProp)(B1, (j1, k1) => {
+        ])), (0, R.eachProp)(C1, (j1, k1) => {
           if (k1 === "transform")
             f1.push([j1 || ""]), S1.push((y2) => [y2, y2 === ""]);
           else if (Q.test(k1)) {
-            if (delete B1[k1], R.is.und(j1))
+            if (delete C1[k1], R.is.und(j1))
               return;
             const y2 = $.test(k1) ? "px" : W.test(k1) ? "deg" : "";
             f1.push((0, R.toArray)(j1)), S1.push(
@@ -29494,7 +29506,7 @@ function GU1() {
               ]
             );
           }
-        }), f1.length && (B1.transform = new D(f1, S1)), super(B1);
+        }), f1.length && (C1.transform = new D(f1, S1)), super(C1);
       }
     }, D = class extends R.FluidValue {
       constructor(I, S) {
@@ -29505,8 +29517,8 @@ function GU1() {
       }
       _get() {
         let I = "", S = true;
-        return (0, R.each)(this.inputs, (n1, B1) => {
-          const f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[B1](
+        return (0, R.each)(this.inputs, (n1, C1) => {
+          const f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[C1](
             R.is.arr(f1) ? f1 : n1.map(R.getFluidValue)
           );
           I += " " + S1, S = S && j1;
@@ -29882,7 +29894,7 @@ function aq1(t2, e2) {
         var I = Z.defaultPrevented;
         if (!I && D.state.active) {
           if (D.isMovingCross == null) {
-            var S = D.props, n1 = S.vertical, B1 = S.ignoreCrossMove, f1 = B1;
+            var S = D.props, n1 = S.vertical, C1 = S.ignoreCrossMove, f1 = C1;
             typeof f1 != "number" && (f1 = f1 ? 1 : 0);
             var S1 = n1 ? "y" : "x", j1 = n1 ? "x" : "y", k1 = Math.abs(L1[S1] - D.touchMoves[0][S1]), y2 = Math.abs(L1[j1] - D.touchMoves[0][j1]);
             D.isMovingCross = y2 * f1 > k1;
@@ -29905,10 +29917,10 @@ function aq1(t2, e2) {
         D.grabbing && (Z.preventDefault(), Z.stopPropagation());
         var d1 = D.state.dragging, I = null;
         if (d1 && D.touchMoves.length) {
-          for (var S = D.props, n1 = S.cardSize, B1 = S.moveScale, f1 = S.vertical, S1 = D.props.friction / 1e6, j1 = b(D), k1 = j1.touchMoves, y2 = k1.length, K = 0; --y2 >= 0 && K < 100; )
+          for (var S = D.props, n1 = S.cardSize, C1 = S.moveScale, f1 = S.vertical, S1 = D.props.friction / 1e6, j1 = b(D), k1 = j1.touchMoves, y2 = k1.length, K = 0; --y2 >= 0 && K < 100; )
             K = Date.now() - k1[y2].time;
           y2++;
-          var H1 = f1 ? "y" : "x", g1 = ((0, h2.getTouchPosition)(Z)[H1] - k1[y2][H1]) / K, M1 = g1 * Math.abs(g1) / S1 / 2, I1 = D.state.cursor, R1 = (0, h2.clamp)(M1 / n1 * B1, Math.floor(I1) - I1, Math.ceil(I1) - I1);
+          var H1 = f1 ? "y" : "x", g1 = ((0, h2.getTouchPosition)(Z)[H1] - k1[y2][H1]) / K, M1 = g1 * Math.abs(g1) / S1 / 2, I1 = D.state.cursor, R1 = (0, h2.clamp)(M1 / n1 * C1, Math.floor(I1) - I1, Math.ceil(I1) - I1);
           I = Math.round(I1 + R1), D.touchMoves = [];
         } else
           I = Math.round(D.state.cursor);
@@ -30003,8 +30015,8 @@ function aq1(t2, e2) {
         var Z = this;
         this.AnimatedComponent = (0, n5.animated)(D.component);
         var L1 = function(I) {
-          var S = I.index, n1 = I.modIndex, B1 = I.cursor, f1 = I.state;
-          return Z.usedCursor = B1, Z.props.renderCard(S, n1, B1, f1);
+          var S = I.index, n1 = I.modIndex, C1 = I.cursor, f1 = I.state;
+          return Z.usedCursor = C1, Z.props.renderCard(S, n1, C1, f1);
         };
         this.AnimatedCard = (0, n5.animated)(L1);
       }
@@ -30016,8 +30028,8 @@ function aq1(t2, e2) {
     }, {
       key: "getComputedCursor",
       value: function() {
-        var D = this.props, Z = D.cardCount, L1 = D.loop, d1 = D.maxOverflow, I = this.state, S = I.cursor, n1 = I.dragging, B1 = S;
-        return L1 || (B1 = (0, h2.clamp)(B1, 1 - Z, 0), n1 && S > 0 ? B1 = d1 - d1 / (S + 1) : n1 && S < 1 - Z && (B1 = 1 - Z - d1 + d1 / (1 - Z - S + 1))), B1;
+        var D = this.props, Z = D.cardCount, L1 = D.loop, d1 = D.maxOverflow, I = this.state, S = I.cursor, n1 = I.dragging, C1 = S;
+        return L1 || (C1 = (0, h2.clamp)(C1, 1 - Z, 0), n1 && S > 0 ? C1 = d1 - d1 / (S + 1) : n1 && S < 1 - Z && (C1 = 1 - Z - d1 + d1 / (1 - Z - S + 1))), C1;
       }
     }, {
       key: "getUsedCursor",
@@ -30031,9 +30043,9 @@ function aq1(t2, e2) {
         d1.cardSize;
         var I = d1.cardCount, S = d1.cardPadCount;
         d1.renderCard;
-        var n1 = d1.tension, B1 = d1.friction, f1 = d1.precision, S1 = d1.loop, j1 = l2(d1, ["cardSize", "cardCount", "cardPadCount", "renderCard", "tension", "friction", "precision", "loop"]), k1 = S1 ? S : 0, y2 = {
+        var n1 = d1.tension, C1 = d1.friction, f1 = d1.precision, S1 = d1.loop, j1 = l2(d1, ["cardSize", "cardCount", "cardPadCount", "renderCard", "tension", "friction", "precision", "loop"]), k1 = S1 ? S : 0, y2 = {
           tension: n1,
-          friction: B1,
+          friction: C1,
           precision: f1
         }, K = this.getComputedCursor();
         return /* @__PURE__ */ r2.default.createElement(n5.Spring, {
@@ -30965,7 +30977,7 @@ var _q1 = er.exports;
     }, {
       key: "render",
       value: function() {
-        var W, G, J, r1, D, Z = this.props, L1 = Z.baseClassName, d1 = Z.controlClassName, I = Z.placeholderClassName, S = Z.menuClassName, n1 = Z.arrowClassName, B1 = Z.arrowClosed, f1 = Z.arrowOpen, S1 = Z.className, j1 = this.props.disabled ? "Dropdown-disabled" : "", k1 = typeof this.state.selected == "string" ? this.state.selected : this.state.selected.label, y2 = (0, r2.default)((W = {}, g(W, "".concat(L1, "-root"), true), g(W, S1, !!S1), g(W, "is-open", this.state.isOpen), W)), K = (0, r2.default)((G = {}, g(G, "".concat(L1, "-control"), true), g(G, d1, !!d1), g(G, j1, !!j1), G)), H1 = (0, r2.default)((J = {}, g(J, "".concat(L1, "-placeholder"), true), g(J, I, !!I), g(J, "is-selected", this.isValueSelected()), J)), g1 = (0, r2.default)((r1 = {}, g(r1, "".concat(L1, "-menu"), true), g(r1, S, !!S), r1)), M1 = (0, r2.default)((D = {}, g(D, "".concat(L1, "-arrow"), true), g(D, n1, !!n1), D)), I1 = e2.default.createElement("div", {
+        var W, G, J, r1, D, Z = this.props, L1 = Z.baseClassName, d1 = Z.controlClassName, I = Z.placeholderClassName, S = Z.menuClassName, n1 = Z.arrowClassName, C1 = Z.arrowClosed, f1 = Z.arrowOpen, S1 = Z.className, j1 = this.props.disabled ? "Dropdown-disabled" : "", k1 = typeof this.state.selected == "string" ? this.state.selected : this.state.selected.label, y2 = (0, r2.default)((W = {}, g(W, "".concat(L1, "-root"), true), g(W, S1, !!S1), g(W, "is-open", this.state.isOpen), W)), K = (0, r2.default)((G = {}, g(G, "".concat(L1, "-control"), true), g(G, d1, !!d1), g(G, j1, !!j1), G)), H1 = (0, r2.default)((J = {}, g(J, "".concat(L1, "-placeholder"), true), g(J, I, !!I), g(J, "is-selected", this.isValueSelected()), J)), g1 = (0, r2.default)((r1 = {}, g(r1, "".concat(L1, "-menu"), true), g(r1, S, !!S), r1)), M1 = (0, r2.default)((D = {}, g(D, "".concat(L1, "-arrow"), true), g(D, n1, !!n1), D)), I1 = e2.default.createElement("div", {
           className: H1
         }, k1), R1 = this.state.isOpen ? e2.default.createElement("div", {
           className: g1,
@@ -30981,7 +30993,7 @@ var _q1 = er.exports;
           "aria-haspopup": "listbox"
         }, I1, e2.default.createElement("div", {
           className: "".concat(L1, "-arrow-wrapper")
-        }, f1 && B1 ? this.state.isOpen ? f1 : B1 : e2.default.createElement("span", {
+        }, f1 && C1 ? this.state.isOpen ? f1 : C1 : e2.default.createElement("span", {
           className: M1
         }))), R1);
       }
@@ -33044,7 +33056,7 @@ Q6.write = function(t2, e2, r2, n5, h2, i2) {
         case "ucs-2":
         case "utf16le":
         case "utf-16le":
-          return B1(this, z, p4);
+          return C1(this, z, p4);
         default:
           if (O)
             throw new TypeError("Unknown encoding: " + x);
@@ -33306,7 +33318,7 @@ Q6.write = function(t2, e2, r2, n5, h2, i2) {
       T += S2[x[q]];
     return T;
   }
-  function B1(x, z, p4) {
+  function C1(x, z, p4) {
     const O = x.slice(z, p4);
     let T = "";
     for (let q = 0; q < O.length - 1; q += 2)
@@ -34473,7 +34485,7 @@ body {
   )
 ] }), SG1 = styled.div`
   position: relative;
-  background-color: ${(t2) => t2.$pressed ? C1.view.backColor.lighter : A3(t2.$backColor)};
+  background-color: ${(t2) => t2.$pressed ? B1.view.backColor.lighter : A3(t2.$backColor)};
   border-radius: 10px;
   padding: 16px;
   padding-top: 8px;
@@ -34483,19 +34495,19 @@ body {
 
   ${F9};
 `, AG1 = styled.div`
-  font-size: ${() => C1.text.size.xsmall}px;
-  color: ${() => C1.text.color.tint};
+  font-size: ${() => B1.text.size.xsmall}px;
+  color: ${() => B1.text.color.tint};
   padding: 0;
   padding-top: 8px;
   margin-left: 4px;
   margin-bottom: -4px;
   text-transform: uppercase;
 `, bG1 = styled.div`
-  font-family: ${() => C1.text.family.heading};
-  font-size: ${() => C1.text.size.heading}px;
-  line-height: ${() => C1.text.height.heading}px;
-  font-weight: ${() => C1.text.weight.heading};
-  color: ${() => C1.text.color.normal};
+  font-family: ${() => B1.text.family.heading};
+  font-size: ${() => B1.text.size.heading}px;
+  line-height: ${() => B1.text.height.heading}px;
+  font-weight: ${() => B1.text.weight.heading};
+  color: ${() => B1.text.color.normal};
   margin: 4px;
   margin-bottom: 1px;
 `, _G1 = styled.div`
@@ -34504,8 +34516,8 @@ body {
   padding: 6px 6px 6px 4px;
   padding-top: 4px;
 `, IG1 = styled.div`
-  font-size: ${() => C1.text.size.normal}px;
-  color: ${() => C1.text.color.xsubtle};
+  font-size: ${() => B1.text.size.normal}px;
+  color: ${() => B1.text.color.xsubtle};
   margin-top: -1px;
   padding-left: ${(t2) => t2.$hasIcon ? "6px" : "0px"};
 `, PG1 = styled.div`
@@ -34551,7 +34563,7 @@ body {
             {
               name: i2,
               size: 18,
-              color: C1.text.color.xsubtle
+              color: B1.text.color.xsubtle
             }
           ) }),
           /* @__PURE__ */ z1.jsx(IG1, { $hasIcon: !!i2, children: n5 })
@@ -38482,7 +38494,7 @@ class I4 extends Lt {
     }
     const Z = o2(h2.ticks.maxTicksLimit, f4), L1 = Math.max(1, Math.ceil(f4 / Z));
     for (X = 0; X < f4; X += L1) {
-      const d1 = this.getContext(X), I = i2.setContext(d1), S = l2.setContext(d1), n1 = I.lineWidth, B1 = I.color, f1 = S.dash || [], S1 = S.dashOffset, j1 = I.tickWidth, k1 = I.tickColor, y2 = I.tickBorderDash || [], K = I.tickBorderDashOffset;
+      const d1 = this.getContext(X), I = i2.setContext(d1), S = l2.setContext(d1), n1 = I.lineWidth, C1 = I.color, f1 = S.dash || [], S1 = S.dashOffset, j1 = I.tickWidth, k1 = I.tickColor, y2 = I.tickBorderDash || [], K = I.tickBorderDashOffset;
       c1 = HX1(this, X, o4), c1 !== void 0 && (a1 = V4(n5, c1, n1), d ? R = $ = G = r1 = a1 : Q = W = J = D = a1, w2.push({
         tx1: R,
         ty1: Q,
@@ -38493,7 +38505,7 @@ class I4 extends Lt {
         x2: r1,
         y2: D,
         width: n1,
-        color: B1,
+        color: C1,
         borderDash: f1,
         borderDashOffset: S1,
         tickWidth: j1,
@@ -38541,8 +38553,8 @@ class I4 extends Lt {
       const L1 = i2.setContext(this.getContext(F));
       $ = this.getPixelForTick(F) + i2.labelOffset, W = this._resolveTickFontOptions(F), G = W.lineHeight, J = R2(c1) ? c1.length : 1;
       const d1 = J / 2, I = L1.color, S = L1.textStrokeColor, n1 = L1.textStrokeWidth;
-      let B1 = Q;
-      c2 ? (a1 = $, Q === "inner" && (F === N - 1 ? B1 = this.options.reverse ? "left" : "right" : F === 0 ? B1 = this.options.reverse ? "right" : "left" : B1 = "center"), h2 === "top" ? d === "near" || C !== 0 ? r1 = -J * G + G / 2 : d === "center" ? r1 = -Z.highest.height / 2 - d1 * G + G : r1 = -Z.highest.height + G / 2 : d === "near" || C !== 0 ? r1 = G / 2 : d === "center" ? r1 = Z.highest.height / 2 - d1 * G : r1 = Z.highest.height - J * G, f4 && (r1 *= -1), C !== 0 && !L1.showLabelBackdrop && (a1 += G / 2 * Math.sin(C))) : (R = $, r1 = (1 - J) * G / 2);
+      let C1 = Q;
+      c2 ? (a1 = $, Q === "inner" && (F === N - 1 ? C1 = this.options.reverse ? "left" : "right" : F === 0 ? C1 = this.options.reverse ? "right" : "left" : C1 = "center"), h2 === "top" ? d === "near" || C !== 0 ? r1 = -J * G + G / 2 : d === "center" ? r1 = -Z.highest.height / 2 - d1 * G + G : r1 = -Z.highest.height + G / 2 : d === "near" || C !== 0 ? r1 = G / 2 : d === "center" ? r1 = Z.highest.height / 2 - d1 * G : r1 = Z.highest.height - J * G, f4 && (r1 *= -1), C !== 0 && !L1.showLabelBackdrop && (a1 += G / 2 * Math.sin(C))) : (R = $, r1 = (1 - J) * G / 2);
       let f1;
       if (L1.showLabelBackdrop) {
         const S1 = H0(L1.backdropPadding), j1 = Z.heights[F], k1 = Z.widths[F];
@@ -38583,7 +38595,7 @@ class I4 extends Lt {
           color: I,
           strokeColor: S,
           strokeWidth: n1,
-          textAlign: B1,
+          textAlign: C1,
           textBaseline: D,
           translation: [
             a1,
@@ -42480,7 +42492,7 @@ const HZ1 = ({
   subtitle: n5,
   subtitleSize: h2 = "small",
   backColor: i2,
-  borderRadius: c2 = C1.card.borderRadius,
+  borderRadius: c2 = B1.card.borderRadius,
   width: l2,
   height: o4,
   padding: d = 15,
@@ -42592,7 +42604,7 @@ const HZ1 = ({
   }, l2 = r2 ? "none" : "light", o4 = /* @__PURE__ */ z1.jsxs(u0, { valign: "center", paddingRight: 10, children: [
     /* @__PURE__ */ z1.jsx(h4, { size: "xlarge", weight: "bold", paddingRight: 2, children: t2 }),
     !i2 && /* @__PURE__ */ z1.jsx(
-      _U1,
+      IU1,
       {
         onClick: c2,
         iconName: "IoCloseSharp",
@@ -45169,9 +45181,9 @@ function Gt2(t2 = /* @__PURE__ */ new Date()) {
 const dekUiModule = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Button: R6,
-  ButtonLoadingIcon: kt2,
-  Card: Ot2,
-  CardButton: Bt2,
+  ButtonLoadingIcon: Ot2,
+  Card: Bt2,
+  CardButton: Ct2,
   Carousel: Mq1,
   Cell: St2,
   ColorPicker: At2,
@@ -45181,12 +45193,12 @@ const dekUiModule = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   Header: Eq1,
   HeadingText: PU1,
   Icon: G4,
-  IconButton: _U1,
+  IconButton: IU1,
   Image: It2,
   LoadingDots: Cr,
-  MenuBar: Ct2,
+  MenuBar: yt2,
   MenuBarItem: WU1,
-  PillButton: yt2,
+  PillButton: kt2,
   ProgressBar: Pt2,
   Screen: Wt2,
   ScreenLoadingOverlay: Dt2,
@@ -45201,7 +45213,7 @@ const dekUiModule = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   formatDateTime: Yt2,
   formatFromNow: Gt2,
   getImageAsBase64: uG1,
-  theme: C1,
+  theme: B1,
   useDateTime: qt2,
   useInterval: Ut2
 }, Symbol.toStringTag, { value: "Module" }));
@@ -49808,7 +49820,7 @@ const Zone = (props) => {
             if (zone2.containerProps && Object.keys(zone2.containerProps).length > 0) {
               const style = parsePropsForComponent(api2, zone2.containerProps);
               components.push(
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-label": `zone-${props.id}`, style, children: component })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { "aria-label": `zone-${props.id}`, style, children: component })
               );
             } else {
               components.push(component);
@@ -66849,7 +66861,7 @@ async function fetchUserPlugins(email, password) {
   result.integrations.push({
     key: "base",
     pluginName: "base",
-    pluginVersion: "0.26.0",
+    pluginVersion: "0.27.0",
     pluginConfig: []
   });
   return result;
@@ -66881,7 +66893,7 @@ const state = proxy({
 const useEntities = () => {
   return useSnapshot(state).entities;
 };
-const Container$9 = styled.div`
+const Container$b = styled.div`
   width: 50px;
   height: 50px;
   padding: 0;
@@ -66959,7 +66971,7 @@ const WeatherIcon = ({ type }) => {
     }
   };
   const info = getWeatherTypeInfo(type);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$9, { "aria-label": "weather-icon", $top: info.top, $left: info.left, children: info.element });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$b, { "aria-label": "weather-icon", $top: info.top, $left: info.left, children: info.element });
 };
 const WeatherComponent = () => {
   const api2 = getPluginApi();
@@ -66985,7 +66997,7 @@ const WeatherComponent = () => {
     ] })
   ] });
 };
-const Container$8 = styled.div`
+const Container$a = styled.div`
   display: flex;
   align-items: center;
   width: 100%;
@@ -67016,7 +67028,7 @@ const HeaderRight = styled.div`
   padding-right: 15px;
 `;
 const Header = ({ height = 70 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$8, { "aria-label": "header", $height: height, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$a, { "aria-label": "header", $height: height, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderLeft, { "aria-label": "header-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(WeatherComponent, { "aria-label": "weather" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderCenter, { "aria-label": "header-center" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRight, { "aria-label": "header-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClockComponent, { "aria-label": "clock" }) })
@@ -67024,7 +67036,7 @@ const Header = ({ height = 70 }) => {
 };
 const About = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, direction: "vert", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.26.0"}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.27.0"}` }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { children: "From Appkit" })
   ] });
 };
@@ -67050,7 +67062,7 @@ const Backgrounds = ({ api: api2 }) => {
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { cols: "24% auto", gap: 20, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Ct2,
+      yt2,
       {
         items: menuItems,
         onSelect: handleSelection,
@@ -67139,7 +67151,7 @@ const Boards = ({ api: api2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, collapse: true, direction: "vert", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { paddingBottom: 15, children: "Boards" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: boards && boards.map(({ key, title }) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      yt2,
+      kt2,
       {
         title,
         icon: "none",
@@ -67165,7 +67177,7 @@ const PluginDev = ({ api: api2 }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, collapse: true, direction: "vert", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { paddingBottom: 15, children: "Components" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: integration && integration.info.components.map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        yt2,
+        kt2,
         {
           title: component,
           icon: "none",
@@ -67174,7 +67186,7 @@ const PluginDev = ({ api: api2 }) => {
       ) }, component)) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { paddingBottom: 15, paddingTop: 50, children: "Screens" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: integration && integration.info.screens.map((screen) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        yt2,
+        kt2,
         {
           title: screen,
           icon: "none",
@@ -67183,7 +67195,7 @@ const PluginDev = ({ api: api2 }) => {
       ) }, screen)) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { fixed: "bottom", height: 120, paddingLeft: 20, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Bt2,
+      Ct2,
       {
         title: "Settings",
         variant: "clear",
@@ -67247,7 +67259,7 @@ const Theme = ({ api: api2 }) => {
   ];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { cols: "24% auto", gap: 20, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Ct2,
+      yt2,
       {
         items: menuItems,
         onSelect: handleSelection,
@@ -67266,7 +67278,7 @@ const Theme = ({ api: api2 }) => {
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { children: "Sets the color for Cards with variant='normal'.." })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Ot2, { padding: 12, direction: "vert", style: { marginBottom: 40 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Bt2, { padding: 12, direction: "vert", style: { marginBottom: 40 }, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: "Card" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { color: "subtle", children: "Body" })
         ] }),
@@ -67276,7 +67288,7 @@ const Theme = ({ api: api2 }) => {
             width: "100%",
             maxWidth: 400,
             height: 150,
-            color: themeState["card-bg"] || C1.view.backColor.card,
+            color: themeState["card-bg"] || B1.view.backColor.card,
             onChange: (color) => {
               themeState["card-bg"] = color;
               setThemeState(themeState);
@@ -67312,7 +67324,7 @@ const Theme = ({ api: api2 }) => {
             width: "100%",
             maxWidth: 400,
             height: 150,
-            color: themeState["tile-bg"] || C1.view.backColor.tile,
+            color: themeState["tile-bg"] || B1.view.backColor.tile,
             onChange: (color) => {
               themeState["tile-bg"] = color;
               setThemeState(themeState);
@@ -67343,7 +67355,7 @@ const Theme = ({ api: api2 }) => {
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { width: 20 }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(yt2, { title: "Clear Pill", variant: "clear" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(kt2, { title: "Clear Pill", variant: "clear" })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           At2,
@@ -67352,7 +67364,7 @@ const Theme = ({ api: api2 }) => {
             width: "100%",
             maxWidth: 400,
             height: 150,
-            color: themeState["clear-bg"] || C1.view.backColor.clear,
+            color: themeState["clear-bg"] || B1.view.backColor.clear,
             onChange: (color) => {
               themeState["clear-bg"] = color;
               setThemeState(themeState);
@@ -67373,9 +67385,9 @@ const Theme = ({ api: api2 }) => {
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { style: { marginBottom: 40 }, direction: "horz", collapse: true, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Bt2, { title: "Button", variant: "normal" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Ct2, { title: "Button", variant: "normal" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { width: 20 }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(yt2, { title: "Pill", variant: "normal" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(kt2, { title: "Pill", variant: "normal" })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           At2,
@@ -67383,7 +67395,7 @@ const Theme = ({ api: api2 }) => {
             width: "100%",
             maxWidth: 400,
             height: 150,
-            color: themeState["button-bg"] || C1.button.normal.backColor,
+            color: themeState["button-bg"] || B1.button.normal.backColor,
             onChange: (color) => {
               themeState["button-bg"] = color;
               setThemeState(themeState);
@@ -67468,7 +67480,7 @@ const SettingsScreen = ({ api: api2, isPluginDev }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wt2, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { fullscreen: true, cols: "20% auto", padding: 20, paddingTop: 90, gap: 20, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Ct2,
+        yt2,
         {
           items: menuItems,
           onSelect: handleMenuSelection,
@@ -71426,7 +71438,7 @@ hooks.HTML5_FMT = {
   MONTH: "YYYY-MM"
   // <input type="month" />
 };
-const Container$7 = styled.div`
+const Container$9 = styled.div`
   align-items: flex-start;
   padding: 10px 20px;
   margin-top: 130px;
@@ -71495,9 +71507,9 @@ const Greeting = ({ api: api2 }) => {
       events2.nextEvent.startDate * 1e3
     ).format("h:mm")}`;
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$7, { "aria-label": "greeting", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: `${getGreeting()} ${getUpcoming()}` }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$9, { "aria-label": "greeting", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: `${getGreeting()} ${getUpcoming()}` }) });
 };
-const Container$6 = styled.div`
+const Container$8 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `linear-gradient(90deg, ${props.$colorStart}, ${props.$colorEnd})`};
@@ -71537,12 +71549,12 @@ const Content = styled.div`
   }
 `;
 const BlobBackground = ({
-  colorStart = "#e52e71",
-  colorEnd = "#ff8a00",
-  speed = 0.5
+  colorStart = "#26a88d",
+  colorEnd = "#00796b",
+  speed = 1
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$6,
+    Container$8,
     {
       "aria-label": "blob-background",
       $colorStart: colorStart,
@@ -71551,7 +71563,7 @@ const BlobBackground = ({
     }
   );
 };
-const Container$5 = styled.div`
+const Container$7 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `radial-gradient(${props.$colorStart}, ${props.$colorEnd})`};
@@ -71646,12 +71658,12 @@ const Light9 = styled(Light)`
   left: 85%;
 `;
 const BlurredLightsBackground = ({
-  colorStart = "#e52e71",
-  colorEnd = "#ff8a00",
-  speed = 0.5
+  colorStart = "#d2276c",
+  colorEnd = "#170070",
+  speed = 1
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Container$5,
+    Container$7,
     {
       "aria-label": "blurred-lights-background",
       $colorStart: colorStart,
@@ -71670,7 +71682,7 @@ const BlurredLightsBackground = ({
     }
   );
 };
-const Container$4 = styled.div`
+const Container$6 = styled.div`
   height: 100vh;
   width: 100vw;
   display: flex;
@@ -71704,7 +71716,7 @@ const GradientBackground = ({
   speed = 0.5
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$4,
+    Container$6,
     {
       "aria-label": "gradient-background",
       $colorStart: colorStart,
@@ -71713,7 +71725,7 @@ const GradientBackground = ({
     }
   );
 };
-const Container$3 = styled.div`
+const Container$5 = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -71780,13 +71792,184 @@ const ImageBackground = ({ itemKey = "fibre", opacity }) => {
   };
   const background = backgrounds[itemKey];
   opacity = opacity === void 0 ? background.opacity : opacity;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$3, { "aria-label": "background", $imageUrl: background.uri, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { $opacity: opacity || 0 }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$5, { "aria-label": "background", $imageUrl: background.uri, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { $opacity: opacity || 0 }) });
+};
+const Container$4 = styled.div`
+  height: 100vh;
+  width: 100vw;
+  xbackground: ${(props) => `radial-gradient(
+    ${props.$colorStart} 0%,
+    ${props.$colorEnd} 100%
+  )`};
+`;
+const speedFactor = 2;
+const Slant1 = styled.div`
+  animation: slide ${({ $speed }) => ($speed + 0) * speedFactor}s ease-in-out
+    infinite alternate;
+  background-image: ${({ $colorStart, $colorEnd }) => `linear-gradient(-60deg, ${$colorStart} 50%, ${$colorEnd} 50%)`};
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: fixed;
+  right: -50%;
+  top: 0;
+  z-index: -1;
+
+  @keyframes slide {
+    0% {
+      transform: translateX(-25%);
+    }
+    100% {
+      transform: translateX(25%);
+    }
+  }
+`;
+const Slant2 = styled.div`
+  animation: slide ${({ $speed }) => ($speed + 0) * speedFactor}s ease-in-out
+    infinite alternate;
+  animation-direction: alternate-reverse;
+  animation-duration: ${({ $speed }) => ($speed + 1) * speedFactor}s;
+  background-image: ${({ $colorStart, $colorEnd }) => `linear-gradient(-60deg, ${$colorStart} 50%, ${$colorEnd} 50%)`};
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: fixed;
+  right: -50%;
+  top: 0;
+  z-index: -1;
+
+  @keyframes slide {
+    0% {
+      transform: translateX(-25%);
+    }
+    100% {
+      transform: translateX(25%);
+    }
+  }
+`;
+const Slant3 = styled.div`
+  animation: slide ${({ $speed }) => ($speed + 0) * speedFactor}s ease-in-out
+    infinite alternate;
+  animation-duration: ${({ $speed }) => ($speed + 2) * speedFactor}s;
+  background-image: ${({ $colorStart, $colorEnd }) => `linear-gradient(-60deg, ${$colorStart} 50%, ${$colorEnd} 50%)`};
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: fixed;
+  right: -50%;
+  top: 0;
+  z-index: -1;
+
+  @keyframes slide {
+    0% {
+      transform: translateX(-25%);
+    }
+    100% {
+      transform: translateX(25%);
+    }
+  }
+`;
+const SlantBackground = ({
+  colorStart = "#6c3",
+  colorEnd = "#09f",
+  speed = 30
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Container$4,
+    {
+      "aria-label": "slant-background",
+      $colorStart: colorStart,
+      $colorEnd: colorEnd,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Slant1, { $speed: speed, $colorStart: colorStart, $colorEnd: colorEnd }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Slant2, { $speed: speed, $colorStart: colorStart, $colorEnd: colorEnd }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Slant3, { $speed: speed, $colorStart: colorStart, $colorEnd: colorEnd })
+      ]
+    }
+  );
+};
+const Container$3 = styled.div`
+  height: 100vh;
+  width: 100vw;
+  background: ${(props) => `radial-gradient(
+    ${props.$colorStart} 0%,
+    ${props.$colorEnd} 100%
+  )`};
+`;
+const Ocean = styled.div`
+  height: ${({ $height }) => $height * 3}%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: #015871;
+`;
+const Wave1 = styled.div`
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)
+    repeat-x;
+  position: absolute;
+  width: 6400px;
+  top: -198px;
+  left: 0;
+  height: 198px;
+  transform: translate(0, 0, 0);
+  animation: wave ${({ $speed }) => $speed * 70}s ease infinite;
+
+  @keyframes wave {
+    0% {
+      margin-left: 0;
+    }
+    100% {
+      margin-left: -1600px;
+    }
+  }
+`;
+const Wave2 = styled.div`
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)
+    repeat-x;
+  position: absolute;
+  width: 6400px;
+  top: -168px;
+  left: 0;
+  height: 198px;
+  transform: translate(0, 0, 0);
+  animation: swell ${({ $speed }) => $speed * 40}s ease infinite;
+  opacity: 1;
+
+  @keyframes swell {
+    0%,
+    100% {
+      transform: translate(0, -30px);
+    }
+    50% {
+      transform: translate(0, 5px);
+    }
+  }
+`;
+const WaveBackground = ({
+  colorStart = "#3a88ba",
+  colorEnd = "#0b5774",
+  speed = 0.5,
+  tide = 3
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Container$3,
+    {
+      "aria-label": "wave-background",
+      $colorStart: colorStart,
+      $colorEnd: colorEnd,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Ocean, { $height: tide, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Wave1, { $speed: speed }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Wave2, { $speed: speed })
+      ] })
+    }
+  );
 };
 const AboutScreen = ({ api: api2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wt2, { overlay: true, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx($t2, { title: "About" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { paddingTop: 100, paddingHorz: 20, collapse: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Bt2,
+      Ct2,
       {
         title: "Settings",
         iconName: "about",
@@ -98557,7 +98740,7 @@ const ComponentScreen = ({ api: api2 }) => {
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            yt2,
+            kt2,
             {
               title: "RESET",
               variant: "clear",
@@ -98716,17 +98899,17 @@ let Plugin$2 = class Plugin {
         colorStart: {
           type: "color",
           title: "Start Color",
-          default: "#e52e71"
+          default: "#d2276c"
         },
         colorEnd: {
           type: "color",
           title: "End Color",
-          default: "#ff8a00"
+          default: "#170070"
         },
         speed: {
           type: "number",
           title: "Speed",
-          default: 0.5,
+          default: 1,
           min: 0.1,
           max: 2,
           step: 0.1,
@@ -98742,12 +98925,38 @@ let Plugin$2 = class Plugin {
         colorStart: {
           type: "color",
           title: "Start Color",
-          default: "#e52e71"
+          default: "#26a88d"
         },
         colorEnd: {
           type: "color",
           title: "End Color",
-          default: "#ff8a00"
+          default: "#00796b"
+        },
+        speed: {
+          type: "number",
+          title: "Speed",
+          default: 1,
+          min: 0.1,
+          max: 2,
+          step: 0.1,
+          minLabel: "Fast",
+          maxLabel: "Slow"
+        }
+      }
+    });
+    registry2.registerCollectionItem("backgrounds", "wave", {
+      name: "Wave",
+      component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(WaveBackground, { ...props }),
+      props: {
+        colorStart: {
+          type: "color",
+          title: "Start Color",
+          default: "#3a88ba"
+        },
+        colorEnd: {
+          type: "color",
+          title: "End Color",
+          default: "#0b5774"
         },
         speed: {
           type: "number",
@@ -98758,6 +98967,42 @@ let Plugin$2 = class Plugin {
           step: 0.1,
           minLabel: "Fast",
           maxLabel: "Slow"
+        },
+        tide: {
+          type: "number",
+          title: "Tide",
+          default: 3,
+          min: 1,
+          max: 10,
+          step: 1,
+          minLabel: "Low",
+          maxLabel: "High"
+        }
+      }
+    });
+    registry2.registerCollectionItem("backgrounds", "slant", {
+      name: "Slant",
+      component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(SlantBackground, { ...props }),
+      props: {
+        colorStart: {
+          type: "color",
+          title: "Start Color",
+          default: "#6c3"
+        },
+        colorEnd: {
+          type: "color",
+          title: "End Color",
+          default: "#09f"
+        },
+        speed: {
+          type: "number",
+          title: "Speed",
+          default: 30,
+          min: 5,
+          max: 55,
+          step: 5,
+          minLabel: "Fast",
+          maxLabel: "Slow"
         }
       }
     });
@@ -98789,7 +99034,7 @@ let Plugin$2 = class Plugin {
     return [
       {
         key: "card-button",
-        element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Bt2, { ...props })
+        element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Ct2, { ...props })
       },
       {
         key: "command-group",
@@ -99132,7 +99377,7 @@ const CalendarTiles = ({
         more > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(MoreContainer, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(MoreSpacer, {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx(More, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            yt2,
+            kt2,
             {
               title: `${more} more today`,
               icon: "none",
@@ -102210,7 +102455,8 @@ const EntityButton = ({
   title,
   entityId,
   iconName = "IoMedicalSharp",
-  variant = "toggle"
+  variant = "toggle",
+  square = true
 }) => {
   const entities = useEntities();
   const [loading, setLoading] = useState$1(false);
@@ -102224,7 +102470,7 @@ const EntityButton = ({
   const disabled = !entity;
   const active = entity && entity.state === "on";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Bt2,
+    Ct2,
     {
       variant,
       active,
@@ -102237,7 +102483,8 @@ const EntityButton = ({
       iconBackColor: active ? "#ffcc01" : "#ffffff22",
       iconColor: active ? "#fff" : "#fff",
       iconColorActive: "#fff",
-      loading
+      loading,
+      square
     }
   );
 };
@@ -102277,7 +102524,12 @@ function transformMediaData(data) {
     album: data.attributes.media_album_name
   };
 }
-const MediaButton = ({ entityId, title = "Media", variant }) => {
+const MediaButton = ({
+  entityId,
+  title = "Media",
+  variant,
+  square = true
+}) => {
   const entities = useEntities();
   const [loading, setLoading] = useState$1(false);
   const [state2, setState2] = useState$1("");
@@ -102298,14 +102550,15 @@ const MediaButton = ({ entityId, title = "Media", variant }) => {
   const iconName = state2 === "playing" ? "MdPause" : "MdPlayArrow";
   const disabled = !entity;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Bt2,
+    Ct2,
     {
       variant,
       disabled: loading || disabled,
       title,
       onClick: handleStateToggle,
       iconName,
-      loading
+      loading,
+      square
     }
   );
 };
@@ -102505,7 +102758,7 @@ const MediaView = ({ api: api2, entityId, showLargeContent = false }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(MediaTrack, { entity: media }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { paddingTop: 0, collapse: true, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          _U1,
+          IU1,
           {
             variant: "clear",
             width: 50,
@@ -102518,7 +102771,7 @@ const MediaView = ({ api: api2, entityId, showLargeContent = false }) => {
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(ControlSpacer, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          _U1,
+          IU1,
           {
             variant: "clear",
             width: 50,
@@ -102534,6 +102787,60 @@ const MediaView = ({ api: api2, entityId, showLargeContent = false }) => {
     ] })
   ] }) });
 };
+function tryParseNumber(value, defValue) {
+  const parsed = parseInt(value);
+  return isNaN(parsed) ? defValue : parsed;
+}
+const SensorCard = ({
+  title,
+  entityId,
+  iconName = "MdOutlineDeviceThermostat",
+  clear = false,
+  square = true
+}) => {
+  const entity = useEntity(entityId);
+  const state2 = entity ? tryParseNumber(entity.state) : void 0;
+  const value = entity && state2 ? `${state2} ${entity.attributes.unit_of_measurement}` : "?";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Bt2,
+    {
+      variant: clear ? "clear" : "normal",
+      square,
+      label: "sensor-card",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { direction: "vert", padding: 10, paddingTop: 12, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(G4, { name: iconName, size: 30 }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { direction: "vert", paddingHorz: 4, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { size: "large", weight: "xbold", children: value }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { size: "normal", weight: "normal", children: title })
+        ] })
+      ] })
+    }
+  );
+};
+const EntitiesScreen = () => {
+  const entities = useEntities();
+  const [selectedKey, setSelectedKey] = useState$1("");
+  const menuItems = Object.keys(entities).map((key) => ({
+    title: entities[key].attributes.friendly_name || "Unknown",
+    key
+  }));
+  const handleMenuSelection = (key) => {
+    setSelectedKey(key);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Wt2, { overlay: false, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { fullscreen: true, cols: "40% auto", rows: "60px auto", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(St2, { colSpan: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx($t2, { title: "Home Assistant Entities" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "vert", vscroll: "auto", hscroll: "hidden", padding: 15, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      yt2,
+      {
+        items: menuItems,
+        onSelect: handleMenuSelection,
+        initialKey: selectedKey,
+        compact: true
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { vscroll: "auto", hscroll: "hidden", padding: 15, children: selectedKey && /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { style: { fontSize: 16 }, children: JSON.stringify(entities[selectedKey], null, 2) }) })
+  ] }) });
+};
 class Plugin3 {
   constructor(config2) {
     __publicField(this, "config");
@@ -102568,6 +102875,18 @@ class Plugin3 {
       {
         key: "entity-button",
         element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(EntityButton, { ...props })
+      },
+      {
+        key: "sensor-card",
+        element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(SensorCard, { ...props })
+      }
+    ];
+  }
+  get screens() {
+    return [
+      {
+        path: "/entities",
+        element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(EntitiesScreen, { ...props })
       }
     ];
   }
@@ -102709,7 +103028,7 @@ async function updatePlugins(email, password) {
         {
           key: "base",
           pluginName: "base",
-          pluginVersion: "0.26.0",
+          pluginVersion: "0.27.0",
           pluginConfig: []
         }
       ],
@@ -103889,7 +104208,7 @@ const transitionDelay = 0;
 const BoardProvider = ({ email, password, plugin, pluginConfig }) => {
   const config2 = useUserConfig(email, password, plugin, pluginConfig);
   console.log("### LOADED", config2);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ThemeProvider, { theme: C1, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ThemeProvider, { theme: B1, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(BoardStyles, { transitionDelay }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Background, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { userConfig: config2, transitionDelay }),