@tcn/ui 0.2.0 → 0.3.0

package/dist/surfaces/tooltip/tooltip.js

@@ -0,0 +1,38 @@
+import { jsx as e, jsxs as f, Fragment as u } from "react/jsx-runtime";
+import { clsx as x } from "clsx";
+import R, { useRef as d, isValidElement as h, cloneElement as E } from "react";
+import { PreviewPopper as b } from "../../overlay/popper/preview_popper.js";
+import { HStack as j } from "../../stacks/h_stack.js";
+import '../../tooltip.css';const w = "_tooltip_b8c58d5", P = { tooltip: w }, F = R.forwardRef(function({
+  children: o,
+  className: r,
+  verticalAnchor: n = "top",
+  verticalOrigin: c = "bottom",
+  horizontalAnchor: s = "center",
+  horizontalOrigin: l = "center",
+  label: m,
+  ...p
+}, i) {
+  const t = d(null), a = h(o) ? E(o, { ref: t }) : /* @__PURE__ */ e(j, { as: "span", ref: t, children: o });
+  return /* @__PURE__ */ f(u, { children: [
+    a,
+    /* @__PURE__ */ e(
+      b,
+      {
+        ref: i,
+        anchorElement: t,
+        verticalAnchor: n,
+        verticalOrigin: c,
+        horizontalAnchor: s,
+        horizontalOrigin: l,
+        className: x(r, P.tooltip, "tcn-surface", "tcn-tooltip"),
+        ...p,
+        children: m
+      }
+    )
+  ] });
+});
+export {
+  F as Tooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/surfaces/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/surfaces/tooltip/tooltip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { isValidElement, cloneElement, useRef } from 'react';\nimport styles from './tooltip.module.css';\nimport {\n  PreviewPopper,\n  type PreviewPopperProps,\n} from '../../overlay/popper/preview_popper.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nexport interface TooltipProps extends Omit<PreviewPopperProps, 'anchorElement'> {\n  /** The element that triggers the tooltip on hover */\n  children: React.ReactNode;\n  /** Content to display in the tooltip */\n  label: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    children,\n    className,\n    verticalAnchor = 'top',\n    verticalOrigin = 'bottom',\n    horizontalAnchor = 'center',\n    horizontalOrigin = 'center',\n    label,\n    ...props\n  },\n  ref\n) {\n  const anchorRef = useRef<HTMLElement>(null);\n\n  // If children is a valid element, clone it and attach the ref\n  // Otherwise, wrap it in a span\n  const anchor = isValidElement(children) ? (\n    cloneElement(children, { ref: anchorRef } as React.Attributes)\n  ) : (\n    <HStack as=\"span\" ref={anchorRef}>\n      {children}\n    </HStack>\n  );\n\n  return (\n    <>\n      {anchor}\n      <PreviewPopper\n        ref={ref}\n        anchorElement={anchorRef}\n        verticalAnchor={verticalAnchor}\n        verticalOrigin={verticalOrigin}\n        horizontalAnchor={horizontalAnchor}\n        horizontalOrigin={horizontalOrigin}\n        className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}\n        {...props}\n      >\n        {label}\n      </PreviewPopper>\n    </>\n  );\n});\n"],"names":["Tooltip","React","children","className","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","label","props","ref","anchorRef","useRef","anchor","isValidElement","cloneElement","jsx","HStack","jsxs","Fragment","PreviewPopper","clsx","styles"],"mappings":";;;;;kDAgBaA,IAAUC,EAAM,WAAyC,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GAIpCC,IAASC,EAAeZ,CAAQ,IACpCa,EAAab,GAAU,EAAE,KAAKS,EAAA,CAA+B,IAE7D,gBAAAK,EAACC,GAAA,EAAO,IAAG,QAAO,KAAKN,GACpB,UAAAT,GACH;AAGF,SACE,gBAAAgB,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAG;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,eAAeC;AAAA,QACf,gBAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,WAAWc,EAAKlB,GAAWmB,EAAO,SAAS,eAAe,aAAa;AAAA,QACtE,GAAGb;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/surfaces/window/window.d.ts

@@ -1,6 +1,6 @@
-import { VStackProps } from '../../stacks/v_stack.js';
 import { default as React } from 'react';
 import { FrameOwnProps } from '../../overlay/frame/frame.js';
-export type WindowProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;
-export declare const Window: React.ForwardRefExoticComponent<FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, "as"> & React.RefAttributes<HTMLDialogElement>>;
+import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+export type WindowProps = FrameOwnProps & ScaffoldProps;
+export declare const Window: React.ForwardRefExoticComponent<FrameOwnProps & ScaffoldProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=window.d.ts.map

package/dist/surfaces/window/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/surfaces/window/window.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAEzE,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,CAAC;AAErF,eAAO,MAAM,MAAM,sIAgBjB,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/surfaces/window/window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAKlF,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,aAAa,CAAC;AAExD,eAAO,MAAM,MAAM,mGAkBjB,CAAC"}

package/dist/surfaces/window/window.js

@@ -1,21 +1,23 @@
 import { jsx as o } from "react/jsx-runtime";
-import { VStack as c } from "../../stacks/v_stack.js";
-import { clsx as d } from "clsx";
-import e from "react";
-import { Frame as f } from "../../overlay/frame/frame.js";
-import '../../window.css';const a = "_window_7610fdb", l = { window: a }, b = e.forwardRef(function({ children: r, className: t, isOpen: i, draggable: n = !0, veil: m = !1, ...s }, w) {
-  return /* @__PURE__ */ o(f, { isOpen: i, draggable: n, veil: m, children: /* @__PURE__ */ o(
-    c,
+import { clsx as m } from "clsx";
+import w from "react";
+import { Frame as d } from "../../overlay/frame/frame.js";
+import { Scaffold as s } from "../../layouts/scaffold/scaffold.js";
+import '../../window.css';const a = "_window_7610fdb", l = { window: a }, _ = w.forwardRef(function({ children: t, className: r, isOpen: i, draggable: n = !0, veil: f = !1, ...c }, e) {
+  return /* @__PURE__ */ o(
+    d,
     {
-      ref: w,
-      className: d(l.window, "tcn-window", t),
-      as: "dialog",
-      ...s,
-      children: r
+      isOpen: i,
+      draggable: n,
+      veil: f,
+      className: m(l.window, "tcn-surface", "tcn-window", r),
+      width: "auto",
+      height: "auto",
+      children: /* @__PURE__ */ o(s, { ref: e, ...c, children: t })
     }
-  ) });
+  );
 });
 export {
-  b as Window
+  _ as Window
 };
 //# sourceMappingURL=window.js.map

package/dist/surfaces/window/window.js.map

@@ -1 +1 @@
-{"version":3,"file":"window.js","sources":["../../../src/surfaces/window/window.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './window.module.css';\nimport { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';\n\nexport type WindowProps = FrameOwnProps & Omit<VStackProps<HTMLDialogElement>, 'as'>;\n\nexport const Window = React.forwardRef<HTMLDialogElement, WindowProps>(function Window(\n  { children, className, isOpen, draggable = true, veil = false, ...props }: WindowProps,\n  ref\n) {\n  return (\n    <Frame isOpen={isOpen} draggable={draggable} veil={veil}>\n      <VStack\n        ref={ref}\n        className={clsx(styles['window'], 'tcn-window', className)}\n        as=\"dialog\"\n        {...props}\n      >\n        {children}\n      </VStack>\n    </Frame>\n  );\n});\n"],"names":["Window","React","children","className","isOpen","draggable","veil","props","ref","jsx","Frame","VStack","clsx","styles"],"mappings":";;;;;gDAQaA,IAASC,EAAM,WAA2C,SACrE,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,IAAM,MAAAC,IAAO,IAAO,GAAGC,EAAA,GAClEC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAM,QAAAN,GAAgB,WAAAC,GAAsB,MAAAC,GAC3C,UAAA,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI,EAAKC,EAAO,QAAW,cAAcV,CAAS;AAAA,MACzD,IAAG;AAAA,MACF,GAAGI;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;"}
+{"version":3,"file":"window.js","sources":["../../../src/surfaces/window/window.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './window.module.css';\n\nexport type WindowProps = FrameOwnProps & ScaffoldProps;\n\nexport const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(\n  { children, className, isOpen, draggable = true, veil = false, ...props }: WindowProps,\n  ref\n) {\n  return (\n    <Frame\n      isOpen={isOpen}\n      draggable={draggable}\n      veil={veil}\n      className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}\n      width=\"auto\"\n      height=\"auto\"\n    >\n      <Scaffold ref={ref} {...props}>\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Window","React","children","className","isOpen","draggable","veil","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;gDAUaA,IAASC,EAAM,WAAqC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,IAAM,MAAAC,IAAO,IAAO,GAAGC,EAAA,GAClEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAAN;AAAA,MACA,WAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAWK,EAAKC,EAAO,QAAW,eAAe,cAAcT,CAAS;AAAA,MACxE,OAAM;AAAA,MACN,QAAO;AAAA,MAEP,UAAA,gBAAAM,EAACI,GAAA,EAAS,KAAAL,GAAW,GAAGD,GACrB,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/tethered.css

@@ -0,0 +1 @@
+._tethered_44058d8{display:inline-block;position:absolute;width:auto;height:auto;left:var(--tethered-left, 0);top:var(--tethered-top, 0)}

package/dist/themes/themes/ergo/ergo_theme.js

@@ -136,6 +136,14 @@ legend {
 /* ===== CSS VARIABLES ===== */
 :root {
   --scalar: 1;
+  --accent-color: #cd6b2c;
+
+  /* Typography */
+  --font-color: #395578;
+  --font-family: "Lato", sans-serif;
+  --font-size: 12px;
+
+  /* Spacing */
   --gap-small: 4px;
   --gap-medium: 8px;
   --gap-large: 16px;
@@ -144,6 +152,7 @@ legend {
   --padding-medium: 8px;
   --padding-large: 16px;
 
+  /* Status Colors */
   --status-color-disabled: #7f7f7f;
   --status-color-info: #008cff;
   --status-color-warning: #ffff00;
@@ -155,6 +164,12 @@ legend {
   --async-color-success: #00ff00;
   --async-color-failed: #ff0000;
 
+  /* Shape */
+  --shape-radius-small: 2px;
+  --shape-radius-medium: 4px;
+  --shape-radius-large: 8px;
+
+  /* Palette */
   --primary-color-faint: #c0c0c0;
   --primary-color: #008cff;
   --primary-color-strong: #008cff;
@@ -171,10 +186,6 @@ legend {
   --quaternary-color: #008cff;
   --quaternary-color-strong: #008cff;
 
-  --font-color: #395578;
-  --font-family: "Lato", sans-serif;
-  --font-size: 12px;
-
   --background-color-primary: #ffffff;
   --background-color-secondary: #ffffff;
   --background-color-tertiary: #ffffff;
@@ -189,12 +200,7 @@ legend {
   --material-secondary-dark: 197 29.1% 40.4%;
   --material-tan: 33, 22%, 84%;
 
-  --shape-radius-small: 2px;
-  --shape-radius-medium: 4px;
-  --shape-radius-large: 8px;
-
-  --accent-color: #cd6b2c;
-
+  /* Default Material */
   --action: 23, 65%, 49%;
   --on-action: 0, 0%, 100%;
   --material: 0, 0%, 100%;
@@ -373,72 +379,6 @@ legend {
   }
 }
 
-/* ===== Materials ===== */
-
-/* White on Gray */
-.material-status-disabled {
-  --action: 0, 0%, 100%;
-  --on-action: 0, 0%, 49.8%;
-  --material: 0, 0%, 49.8%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* White on Vivid Blue */
-.material-status-info {
-  --action: 0, 0%, 100%;
-  --on-action: 207, 100%, 50%;
-  --material: 207, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* Navy on Yellow */
-.material-status-warning {
-  --action: 213, 35.6%, 34.7%;
-  --on-action: 60, 100%, 50%;
-  --material: 60, 100%, 50%;
-  --on-material: 213, 35.6%, 34.7%;
-}
-
-/* White on Red  */
-.material-status-error {
-  --action: 0, 0%, 100%;
-  --on-action: 0, 100%, 50%;
-  --material: 0, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* Navy on Light Grey */
-.material-async-initial {
-  --action: 213, 35.6%, 34.7%;
-  --on-action: 0, 0%, 75.3%;
-  --material: 0, 0%, 75.3%;
-  --on-material: 213, 35.6%, 34.7%;
-}
-
-/* White on Loading Blue */
-.material-async-pending {
-  --action: 0, 0%, 100%;
-  --on-action: 207, 100%, 50%;
-  --material: 207, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* White on Vivid Green */
-.material-async-success {
-  --action: 0, 0%, 100%;
-  --on-action: 120, 100%, 50%;
-  --material: 120, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
-/* White on Red */
-.material-async-failed {
-  --action: 0, 0%, 100%;
-  --on-action: 0, 100%, 50%;
-  --material: 0, 100%, 50%;
-  --on-material: 0, 0%, 100%;
-}
-
 .material {
   background-color: hsl(var(--material));
   color: hsl(var(--on-material));
@@ -455,6 +395,14 @@ legend {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
+.tcn-tooltip {
+  background: rgba(57, 85, 120, 0.85);
+  box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
+  color: rgba(255, 255, 255, 1);
+  border-radius: var(--shape-radius-medium);
+  padding: var(--padding-medium);
+}
+
 .tcn-list {
   gap: var(--gap-medium);
   .tcn-item {
@@ -464,19 +412,66 @@ legend {
   }
 }
 
-.tcn-veil {
+/* Scaffold: */
+.tcn-scaffold {
+  --scaffold-v-inset: var(--v-inset, var(--padding-large));
+  --scaffold-header-size: var(--header-size, 40px);
+  --scaffold-footer-size: var(--footer-size, 40px);
+  --scaffold-utility-bar-size: var(--utility-bar-size, 32px);
+  --scaffold-divide-footer: var(--divide-footer, 1);
+  --scaffold-divide-header: var(--divide-header, 1);
+
+  :where(.tcn-header) {
+    min-height: var(--scaffold-header-size);
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  /* Border appears on body only when it follows header or utility-bar */
+  :where(.tcn-header) + :where(.tcn-body),
+  :where(.tcn-utility-bar) + :where(.tcn-body) {
+    border-top: calc(var(--scaffold-divide-header) * 1px) solid
+      var(--foreground-color-primary);
+  }
+
+  /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */
+  :where(.tcn-body) + :where(.tcn-footer) {
+    border-top: calc(var(--scaffold-divide-footer) * 1px) solid
+      var(--foreground-color-primary);
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: var(--scaffold-utility-bar-size);
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: var(--scaffold-footer-size);
+    padding: 0 var(--scaffold-v-inset);
+  }
+}
+
+.tcn-frame-veil[data-is-veil="true"] {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */
 /* MODAL: */
 .tcn-modal {
-  --v-inset: var(--padding-large);
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  /* TODO: This should be a variable */
-  border: 1px solid rgba(170, 170, 170, 1);
-  overflow: hidden;
+  --divide-header: 0;
+
+  :where(.tcn-scaffold) {
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 1px solid var(--foreground-color-primary);
+  }
 
   :where(.tcn-typography) {
     color: inherit;
@@ -489,53 +484,29 @@ legend {
     --on-action: 0, 0%, 100%;
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
   }
 
   :where(.tcn-utility-bar) {
-    min-height: 32px;
-    border-bottom: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
-  }
-
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-  }
-
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    border-top: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
 }
 
 /* WINDOW: */
 .tcn-window {
-  --v-inset: var(--padding-large);
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  /* TODO: This should be a variable */
-  border: 1px solid rgba(170, 170, 170, 1);
-  overflow: hidden;
+  --divide-header: 0;
+
+  :where(.tcn-scaffold) {
+    box-shadow: 0px 4px 34px 0px #00000096;
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 2px solid white;
+  }
 
   :where(.tcn-typography) {
     color: inherit;
@@ -548,112 +519,80 @@ legend {
     --on-action: 0, 0%, 100%;
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
   }
 
   :where(.tcn-utility-bar) {
-    min-height: 32px;
-    border-bottom: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
-  }
-
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-  }
-
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    border-top: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
 }
 
-/* PANEL */
-.tcn-panel {
-  --v-inset: var(--padding-large);
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  overflow: hidden;
-
-  :where(.tcn-header) {
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-
-    :where(.tcn-title) {
-      font-weight: 700;
-    }
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
-  }
+.tcn-pop-confirm {
+  --divide-header: 0;
+  --v-inset: var(--padding-medium);
 
-  /* Border appears on body only when it follows header or utility-bar */
-  :where(.tcn-header) + :where(.tcn-body),
-  :where(.tcn-utility-bar) + :where(.tcn-body) {
-    border-top: 1px solid var(--foreground-color-primary);
+  :where(.tcn-scaffold) {
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
   }
 
-  /* Border appears on footer only when it follows body */
-  :where(.tcn-body) + :where(.tcn-footer) {
-    border-top: 1px solid var(--foreground-color-primary);
+  :where(.tcn-typography) {
+    color: inherit;
   }
 
-  :where(.tcn-utility-bar) {
+  :where(.tcn-header) {
     min-height: 32px;
-    padding: 0 var(--v-inset);
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
 
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
+  :where(.tcn-utility-bar) {
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
   }
+}
 
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-  }
+/* PANEL */
+.tcn-panel {
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
 }
 
 /* Card */
 .tcn-card {
-  padding: 0;
-  gap: 0px;
-  border: 1px solid var(--foreground-color-primary);
+  --header-size: 32px;
+  --footer-size: 32px;
+  --utility-bar-size: 24px;
+  --divide-header: 0;
+
+  background-color: var(--background-color-primary);
   border-radius: var(--shape-radius-medium);
+  border: 1px solid var(--foreground-color-primary);
   overflow: hidden;
+
   :where(.tcn-header) {
-    /* TODO: Color header */
-    min-height: 32px;
+    /* TODO: This should be a variable */
+    background-color: #ecf4fb;
   }
-  :where(.tcn-body) {
-    padding: var(--padding-medium) var(--v-inset);
+
+  :where(.tcn-utility-bar) {
+    /* TODO: This should be a variable */
+    background-color: #ecf4fb;
   }
 }
 `, a = new CSSStyleSheet();

package/dist/themes/themes/ergo/ergo_theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\nhtml,\\nbody,\\ndiv,\\nspan,\\napplet,\\nobject,\\niframe,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\np,\\nblockquote,\\npre,\\na,\\nabbr,\\nacronym,\\naddress,\\nbig,\\ncite,\\ncode,\\ndel,\\ndfn,\\nem,\\nimg,\\nins,\\nkbd,\\nq,\\ns,\\nsamp,\\nsmall,\\nstrike,\\nstrong,\\nsub,\\nsup,\\ntt,\\nvar,\\nb,\\nu,\\ni,\\ncenter,\\ndl,\\ndt,\\ndd,\\nol,\\nul,\\nli,\\nfieldset,\\nform,\\nlabel,\\nlegend,\\ntable,\\ncaption,\\ntbody,\\ntfoot,\\nthead,\\ntr,\\nth,\\ntd,\\narticle,\\naside,\\ncanvas,\\ndetails,\\nembed,\\nfigure,\\nfigcaption,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\noutput,\\nruby,\\nsection,\\nsummary,\\ntime,\\nmark,\\naudio,\\nvideo {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline;\\n}\\n/* HTML5 display-role reset for older browsers */\\narticle,\\naside,\\ndetails,\\nfigcaption,\\nfigure,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\nsection {\\n  display: block;\\n}\\nbody {\\n  line-height: 1;\\n}\\nol,\\nul {\\n  list-style: none;\\n}\\nblockquote,\\nq {\\n  quotes: none;\\n}\\nblockquote:before,\\nblockquote:after,\\nq:before,\\nq:after {\\n  content: \\\"\\\";\\n  content: none;\\n}\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0;\\n}\\n\\nlegend {\\n  all: unset;\\n  display: block;\\n  margin: 0;\\n  padding: 0;\\n  font: inherit;\\n  color: inherit;\\n}\\n\\n/* ===== CSS VARIABLES ===== */\\n:root {\\n  --scalar: 1;\\n  --gap-small: 4px;\\n  --gap-medium: 8px;\\n  --gap-large: 16px;\\n\\n  --padding-small: 4px;\\n  --padding-medium: 8px;\\n  --padding-large: 16px;\\n\\n  --status-color-disabled: #7f7f7f;\\n  --status-color-info: #008cff;\\n  --status-color-warning: #ffff00;\\n  --status-color-positive: #00ff00;\\n  --status-color-error: #ff0000;\\n\\n  --async-color-initial: #c0c0c0;\\n  --async-color-pending: #008cff;\\n  --async-color-success: #00ff00;\\n  --async-color-failed: #ff0000;\\n\\n  --primary-color-faint: #c0c0c0;\\n  --primary-color: #008cff;\\n  --primary-color-strong: #008cff;\\n\\n  --secondary-color-faint: #c0c0c0;\\n  --secondary-color: #008cff;\\n  --secondary-color-strong: #008cff;\\n\\n  --tertiary-color-faint: #c0c0c0;\\n  --tertiary-color: #008cff;\\n  --tertiary-color-strong: #008cff;\\n\\n  --quaternary-color-faint: #c0c0c0;\\n  --quaternary-color: #008cff;\\n  --quaternary-color-strong: #008cff;\\n\\n  --font-color: #395578;\\n  --font-family: \\\"Lato\\\", sans-serif;\\n  --font-size: 12px;\\n\\n  --background-color-primary: #ffffff;\\n  --background-color-secondary: #ffffff;\\n  --background-color-tertiary: #ffffff;\\n  --background-color-quaternary: #ffffff;\\n\\n  --foreground-color-primary: #aaa;\\n  --foreground-color-secondary: #222222;\\n  --foreground-color-tertiary: #222222;\\n  --foreground-color-quaternary: #222222;\\n\\n  --material-disabled: #d3d3d3;\\n  --material-secondary-dark: 197 29.1% 40.4%;\\n  --material-tan: 33, 22%, 84%;\\n\\n  --shape-radius-small: 2px;\\n  --shape-radius-medium: 4px;\\n  --shape-radius-large: 8px;\\n\\n  --accent-color: #cd6b2c;\\n\\n  --action: 23, 65%, 49%;\\n  --on-action: 0, 0%, 100%;\\n  --material: 0, 0%, 100%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n/* ===== Actions ===== */\\n\\n.tcn-interactive {\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    transform 0.1s,\\n    background 0.1s,\\n    color 0.1s;\\n\\n  --act: hsl(var(--action));\\n  --on-act: hsl(var(--on-action));\\n  /* Could use hsl here if we made three color variables for each of the hsl values */\\n  --act-down: color-mix(in srgb, var(--act), black 8%);\\n  --act-raised: color-mix(in srgb, var(--act), white 8%);\\n  --act-faint: hsla(var(--action), 0.2);\\n  --on-mat: hsl(var(--on-material));\\n  --on-mat-faint: hsla(var(--on-material), 0.2);\\n  --mat: hsl(var(--material));\\n  --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n  --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n}\\n\\n.tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n  pointer-events: none;\\n  cursor: not-allowed;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n  background: var(--act);\\n  color: var(--on-act);\\n  border: 1px solid var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n  outline: 2px dashed var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n  background: var(--material-disabled);\\n  color: white;\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n  background: var(--act-raised);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n  background: var(--act-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid transparent;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n  text-decoration: underline;\\n  text-decoration-color: var(--on-mat);\\n  text-decoration-thickness: 1px;\\n  text-underline-offset: 4px;\\n  color: var(--on-mat);\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n/* Button */\\n.tcn-button {\\n  border-radius: 4px;\\n}\\n\\n.tcn-button[data-size=\\\"sm\\\"] {\\n  padding: 0px 8px;\\n  min-height: 22px;\\n}\\n\\n.tcn-button[data-size=\\\"md\\\"] {\\n  padding: 0px 12px;\\n  min-height: 26px;\\n}\\n\\n.tcn-button[data-size=\\\"lg\\\"] {\\n  padding: 0px 16px;\\n  min-height: 32px;\\n}\\n\\n.tcn-button:hover {\\n  transform: translateY(-1px);\\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-button:active {\\n  transform: translateY(1px);\\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-slim-button {\\n  height: auto;\\n  width: auto;\\n  padding: 0;\\n}\\n\\n.tcn-slim-button[data-size=\\\"sm\\\"] {\\n  min-height: 12px;\\n  min-width: 12px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 10px;\\n    min-width: 10px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"md\\\"] {\\n  min-height: 18px;\\n  min-width: 18px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 14px;\\n    min-width: 14px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"lg\\\"] {\\n  min-height: 24px;\\n  min-width: 24px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 20px;\\n    min-width: 20px;\\n  }\\n}\\n\\n/* ===== Materials ===== */\\n\\n/* White on Gray */\\n.material-status-disabled {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 0%, 49.8%;\\n  --material: 0, 0%, 49.8%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Blue */\\n.material-status-info {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Yellow */\\n.material-status-warning {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 60, 100%, 50%;\\n  --material: 60, 100%, 50%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Red  */\\n.material-status-error {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Light Grey */\\n.material-async-initial {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 0, 0%, 75.3%;\\n  --material: 0, 0%, 75.3%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Loading Blue */\\n.material-async-pending {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Green */\\n.material-async-success {\\n  --action: 0, 0%, 100%;\\n  --on-action: 120, 100%, 50%;\\n  --material: 120, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Red */\\n.material-async-failed {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n.material {\\n  background-color: hsl(var(--material));\\n  color: hsl(var(--on-material));\\n}\\n\\n/* ===== SURFACES ===== */\\n.tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n  .tcn-drag-handle {\\n    cursor: move;\\n  }\\n}\\n\\n.tcn-frame[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.tcn-list {\\n  gap: var(--gap-medium);\\n  .tcn-item {\\n    height: 24px;\\n    padding: 0px var(--padding-medium);\\n    border-radius: var(--shape-radius-medium);\\n  }\\n}\\n\\n.tcn-veil {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */\\n/* MODAL: */\\n.tcn-modal {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  /* TODO: This should be a variable */\\n  border: 1px solid rgba(170, 170, 170, 1);\\n  overflow: hidden;\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    border-bottom: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n\\n    :where(.tcn-button) {\\n      padding: 0;\\n      min-width: 18px;\\n      min-height: 18px;\\n    }\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    border-top: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* WINDOW: */\\n.tcn-window {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  /* TODO: This should be a variable */\\n  border: 1px solid rgba(170, 170, 170, 1);\\n  overflow: hidden;\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    border-bottom: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n\\n    :where(.tcn-button) {\\n      padding: 0;\\n      min-width: 18px;\\n      min-height: 18px;\\n    }\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    border-top: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* PANEL */\\n.tcn-panel {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n\\n  :where(.tcn-header) {\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-title) {\\n      font-weight: 700;\\n    }\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  /* Border appears on body only when it follows header or utility-bar */\\n  :where(.tcn-header) + :where(.tcn-body),\\n  :where(.tcn-utility-bar) + :where(.tcn-body) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  /* Border appears on footer only when it follows body */\\n  :where(.tcn-body) + :where(.tcn-footer) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    padding: 0 var(--v-inset);\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* Card */\\n.tcn-card {\\n  padding: 0;\\n  gap: 0px;\\n  border: 1px solid var(--foreground-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n  :where(.tcn-header) {\\n    /* TODO: Color header */\\n    min-height: 32px;\\n  }\\n  :where(.tcn-body) {\\n    padding: var(--padding-medium) var(--v-inset);\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
+{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\nhtml,\\nbody,\\ndiv,\\nspan,\\napplet,\\nobject,\\niframe,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\np,\\nblockquote,\\npre,\\na,\\nabbr,\\nacronym,\\naddress,\\nbig,\\ncite,\\ncode,\\ndel,\\ndfn,\\nem,\\nimg,\\nins,\\nkbd,\\nq,\\ns,\\nsamp,\\nsmall,\\nstrike,\\nstrong,\\nsub,\\nsup,\\ntt,\\nvar,\\nb,\\nu,\\ni,\\ncenter,\\ndl,\\ndt,\\ndd,\\nol,\\nul,\\nli,\\nfieldset,\\nform,\\nlabel,\\nlegend,\\ntable,\\ncaption,\\ntbody,\\ntfoot,\\nthead,\\ntr,\\nth,\\ntd,\\narticle,\\naside,\\ncanvas,\\ndetails,\\nembed,\\nfigure,\\nfigcaption,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\noutput,\\nruby,\\nsection,\\nsummary,\\ntime,\\nmark,\\naudio,\\nvideo {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline;\\n}\\n/* HTML5 display-role reset for older browsers */\\narticle,\\naside,\\ndetails,\\nfigcaption,\\nfigure,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\nsection {\\n  display: block;\\n}\\nbody {\\n  line-height: 1;\\n}\\nol,\\nul {\\n  list-style: none;\\n}\\nblockquote,\\nq {\\n  quotes: none;\\n}\\nblockquote:before,\\nblockquote:after,\\nq:before,\\nq:after {\\n  content: \\\"\\\";\\n  content: none;\\n}\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0;\\n}\\n\\nlegend {\\n  all: unset;\\n  display: block;\\n  margin: 0;\\n  padding: 0;\\n  font: inherit;\\n  color: inherit;\\n}\\n\\n/* ===== CSS VARIABLES ===== */\\n:root {\\n  --scalar: 1;\\n  --accent-color: #cd6b2c;\\n\\n  /* Typography */\\n  --font-color: #395578;\\n  --font-family: \\\"Lato\\\", sans-serif;\\n  --font-size: 12px;\\n\\n  /* Spacing */\\n  --gap-small: 4px;\\n  --gap-medium: 8px;\\n  --gap-large: 16px;\\n\\n  --padding-small: 4px;\\n  --padding-medium: 8px;\\n  --padding-large: 16px;\\n\\n  /* Status Colors */\\n  --status-color-disabled: #7f7f7f;\\n  --status-color-info: #008cff;\\n  --status-color-warning: #ffff00;\\n  --status-color-positive: #00ff00;\\n  --status-color-error: #ff0000;\\n\\n  --async-color-initial: #c0c0c0;\\n  --async-color-pending: #008cff;\\n  --async-color-success: #00ff00;\\n  --async-color-failed: #ff0000;\\n\\n  /* Shape */\\n  --shape-radius-small: 2px;\\n  --shape-radius-medium: 4px;\\n  --shape-radius-large: 8px;\\n\\n  /* Palette */\\n  --primary-color-faint: #c0c0c0;\\n  --primary-color: #008cff;\\n  --primary-color-strong: #008cff;\\n\\n  --secondary-color-faint: #c0c0c0;\\n  --secondary-color: #008cff;\\n  --secondary-color-strong: #008cff;\\n\\n  --tertiary-color-faint: #c0c0c0;\\n  --tertiary-color: #008cff;\\n  --tertiary-color-strong: #008cff;\\n\\n  --quaternary-color-faint: #c0c0c0;\\n  --quaternary-color: #008cff;\\n  --quaternary-color-strong: #008cff;\\n\\n  --background-color-primary: #ffffff;\\n  --background-color-secondary: #ffffff;\\n  --background-color-tertiary: #ffffff;\\n  --background-color-quaternary: #ffffff;\\n\\n  --foreground-color-primary: #aaa;\\n  --foreground-color-secondary: #222222;\\n  --foreground-color-tertiary: #222222;\\n  --foreground-color-quaternary: #222222;\\n\\n  --material-disabled: #d3d3d3;\\n  --material-secondary-dark: 197 29.1% 40.4%;\\n  --material-tan: 33, 22%, 84%;\\n\\n  /* Default Material */\\n  --action: 23, 65%, 49%;\\n  --on-action: 0, 0%, 100%;\\n  --material: 0, 0%, 100%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n/* ===== Actions ===== */\\n\\n.tcn-interactive {\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    transform 0.1s,\\n    background 0.1s,\\n    color 0.1s;\\n\\n  --act: hsl(var(--action));\\n  --on-act: hsl(var(--on-action));\\n  /* Could use hsl here if we made three color variables for each of the hsl values */\\n  --act-down: color-mix(in srgb, var(--act), black 8%);\\n  --act-raised: color-mix(in srgb, var(--act), white 8%);\\n  --act-faint: hsla(var(--action), 0.2);\\n  --on-mat: hsl(var(--on-material));\\n  --on-mat-faint: hsla(var(--on-material), 0.2);\\n  --mat: hsl(var(--material));\\n  --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n  --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n}\\n\\n.tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n  pointer-events: none;\\n  cursor: not-allowed;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n  background: var(--act);\\n  color: var(--on-act);\\n  border: 1px solid var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n  outline: 2px dashed var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n  background: var(--material-disabled);\\n  color: white;\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n  background: var(--act-raised);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n  background: var(--act-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid transparent;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n  text-decoration: underline;\\n  text-decoration-color: var(--on-mat);\\n  text-decoration-thickness: 1px;\\n  text-underline-offset: 4px;\\n  color: var(--on-mat);\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n/* Button */\\n.tcn-button {\\n  border-radius: 4px;\\n}\\n\\n.tcn-button[data-size=\\\"sm\\\"] {\\n  padding: 0px 8px;\\n  min-height: 22px;\\n}\\n\\n.tcn-button[data-size=\\\"md\\\"] {\\n  padding: 0px 12px;\\n  min-height: 26px;\\n}\\n\\n.tcn-button[data-size=\\\"lg\\\"] {\\n  padding: 0px 16px;\\n  min-height: 32px;\\n}\\n\\n.tcn-button:hover {\\n  transform: translateY(-1px);\\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-button:active {\\n  transform: translateY(1px);\\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-slim-button {\\n  height: auto;\\n  width: auto;\\n  padding: 0;\\n}\\n\\n.tcn-slim-button[data-size=\\\"sm\\\"] {\\n  min-height: 12px;\\n  min-width: 12px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 10px;\\n    min-width: 10px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"md\\\"] {\\n  min-height: 18px;\\n  min-width: 18px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 14px;\\n    min-width: 14px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"lg\\\"] {\\n  min-height: 24px;\\n  min-width: 24px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 20px;\\n    min-width: 20px;\\n  }\\n}\\n\\n.material {\\n  background-color: hsl(var(--material));\\n  color: hsl(var(--on-material));\\n}\\n\\n/* ===== SURFACES ===== */\\n.tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n  .tcn-drag-handle {\\n    cursor: move;\\n  }\\n}\\n\\n.tcn-frame[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.tcn-tooltip {\\n  background: rgba(57, 85, 120, 0.85);\\n  box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n  color: rgba(255, 255, 255, 1);\\n  border-radius: var(--shape-radius-medium);\\n  padding: var(--padding-medium);\\n}\\n\\n.tcn-list {\\n  gap: var(--gap-medium);\\n  .tcn-item {\\n    height: 24px;\\n    padding: 0px var(--padding-medium);\\n    border-radius: var(--shape-radius-medium);\\n  }\\n}\\n\\n/* Scaffold: */\\n.tcn-scaffold {\\n  --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n  --scaffold-header-size: var(--header-size, 40px);\\n  --scaffold-footer-size: var(--footer-size, 40px);\\n  --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n  --scaffold-divide-footer: var(--divide-footer, 1);\\n  --scaffold-divide-header: var(--divide-header, 1);\\n\\n  :where(.tcn-header) {\\n    min-height: var(--scaffold-header-size);\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  /* Border appears on body only when it follows header or utility-bar */\\n  :where(.tcn-header) + :where(.tcn-body),\\n  :where(.tcn-utility-bar) + :where(.tcn-body) {\\n    border-top: calc(var(--scaffold-divide-header) * 1px) solid\\n      var(--foreground-color-primary);\\n  }\\n\\n  /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */\\n  :where(.tcn-body) + :where(.tcn-footer) {\\n    border-top: calc(var(--scaffold-divide-footer) * 1px) solid\\n      var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: var(--scaffold-utility-bar-size);\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--scaffold-v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: var(--scaffold-footer-size);\\n    padding: 0 var(--scaffold-v-inset);\\n  }\\n}\\n\\n.tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* MODAL: */\\n.tcn-modal {\\n  --divide-header: 0;\\n\\n  :where(.tcn-scaffold) {\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n/* WINDOW: */\\n.tcn-window {\\n  --divide-header: 0;\\n\\n  :where(.tcn-scaffold) {\\n    box-shadow: 0px 4px 34px 0px #00000096;\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n    border: 2px solid white;\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n.tcn-pop-confirm {\\n  --divide-header: 0;\\n  --v-inset: var(--padding-medium);\\n\\n  :where(.tcn-scaffold) {\\n    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n    border-radius: var(--shape-radius-medium);\\n    background-color: var(--background-color-primary);\\n    overflow: hidden;\\n  }\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    min-height: 32px;\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n  }\\n}\\n\\n/* PANEL */\\n.tcn-panel {\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n}\\n\\n/* Card */\\n.tcn-card {\\n  --header-size: 32px;\\n  --footer-size: 32px;\\n  --utility-bar-size: 24px;\\n  --divide-header: 0;\\n\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  border: 1px solid var(--foreground-color-primary);\\n  overflow: hidden;\\n\\n  :where(.tcn-header) {\\n    /* TODO: This should be a variable */\\n    background-color: #ecf4fb;\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    /* TODO: This should be a variable */\\n    background-color: #ecf4fb;\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/dist/tooltip.css

@@ -1 +1 @@
-._tooltip_e324d7e{background-color:var(--background-color-primary)}
+._tooltip_b8c58d5{background-color:var(--background-color-primary)}

package/dist/utility_bar.css

@@ -1 +1 @@
-._utility-bar_3a92315{width:100%;min-height:0;border-bottom:1px solid rgb(221,221,221);padding:var(--padding-medium);gap:var(--gap-medium)}
+._utility-bar_3a92315{width:100%;min-height:0}