@valbuild/ui 0.20.0 → 0.20.2

package/dist/valbuild-ui.esm.js

@@ -48678,10 +48678,9 @@ const Button = ({
   children,
   icon,
   // active = false,
-  disabled = false,
-  tooltip
+  disabled = false
 }) => {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       disabled,
@@ -48694,19 +48693,10 @@ const Button = ({
         }
       ),
       onClick,
-      children: [
-        tooltip && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `absolute bottom-[-75%] left-0 z-20 bg-black w-fit h-fit text-primary hidden group-hover:block`,
-            children: /* @__PURE__ */ jsx("div", { children: tooltip })
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "flex flex-row items-center justify-center gap-2", children: [
-          icon && icon,
-          children
-        ] })
-      ]
+      children: /* @__PURE__ */ jsxs("span", { className: "flex flex-row items-center justify-center gap-2", children: [
+        icon && icon,
+        children
+      ] })
     }
   );
 };
@@ -48744,16 +48734,71 @@ const Chevron = ({ className }) => {
   );
 };
 const Chevron$1 = Chevron;
+const ValOverlayContext = React$3.createContext({
+  get api() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get session() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get theme() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get setTheme() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get editMode() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get setEditMode() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get highlight() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get setHighlight() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get setWindowSize() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get windowSize() {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  }
+});
+function useValOverlayContext() {
+  return React$3.useContext(ValOverlayContext);
+}
 const Dropdown$1 = ({
   options,
   onChange,
   label,
   icon
-  // variant = "primary",
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const [selectedOption, setSelectedOption] = useState(0);
+  const { windowSize } = useValOverlayContext();
   const handleToggle = () => {
     setIsOpen(!isOpen);
   };
@@ -48773,39 +48818,46 @@ const Dropdown$1 = ({
       document.removeEventListener("click", handleOutsideClick);
     };
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "text-[12px]", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        onClick: (ev) => {
-          ev.preventDefault();
-          handleToggle();
-        },
-        icon: /* @__PURE__ */ jsx(
-          Chevron$1,
-          {
-            className: `rotate-[-90deg] transition-transform duration-150 ease-in-out ${isOpen ? "" : "rotate-[90deg]"}`
-          }
-        ),
-        children: /* @__PURE__ */ jsxs("span", { className: "flex flex-row items-center justify-center gap-1", children: [
+  return /* @__PURE__ */ jsx("div", { className: "text-[12px]", ref: dropdownRef, children: /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      onClick: (ev) => {
+        ev.preventDefault();
+        handleToggle();
+      },
+      icon: /* @__PURE__ */ jsx(
+        Chevron$1,
+        {
+          className: `rotate-[-90deg] transition-transform duration-150 ease-in-out ${isOpen ? "" : "rotate-[90deg]"}`
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-row items-center justify-center gap-1", children: [
           label,
           icon && icon
-        ] })
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute left-0 mt-2 w-48 shadow-lg font-mono text-[14px] text-primary bg-border z-overlay", children: /* @__PURE__ */ jsx("div", { className: "py-1 rounded-md", children: options == null ? void 0 : options.map((option, idx) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: (ev) => {
-          ev.preventDefault();
-          handleSelect(option, idx);
-        },
-        className: `w-full text-left px-4 py-2 hover:bg-base hover:text-highlight  ${idx === selectedOption && "font-bold bg-base hover:bg-base"}`,
-        children: option
-      },
-      option
-    )) }) })
-  ] });
+        ] }),
+        isOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute -top-[4px] overflow-scroll shadow-lg -left-2 text-primary bg-border w-fit z-overlay",
+            style: { maxHeight: windowSize == null ? void 0 : windowSize.innerHeight },
+            children: /* @__PURE__ */ jsx("div", { className: "flex flex-col ", children: options == null ? void 0 : options.map((option, idx) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (ev) => {
+                  ev.preventDefault();
+                  handleSelect(option, idx);
+                },
+                className: `text-left px-2 py-1 hover:bg-base hover:text-highlight  ${idx === selectedOption && "font-bold bg-base hover:bg-base truncate"}`,
+                children: option
+              },
+              option
+            )) })
+          }
+        )
+      ] })
+    }
+  ) });
 };
 const Dropdown$2 = Dropdown$1;
 function _arrayLikeToArray(arr, len) {
@@ -53127,10 +53179,12 @@ function fromLexicalListItemNode(listItemNode, files) {
 function onError(error) {
   console.error(error);
 }
+const TOOLBAR_HEIGHT = 28;
 const RichTextEditor = ({
   richtext,
   onEditor
 }) => {
+  const { windowSize } = useValOverlayContext();
   const prePopulatedState = (editor) => {
     editor.setEditorState(
       editor.parseEditorState({ root: toLexical(richtext) })
@@ -53141,7 +53195,6 @@ const RichTextEditor = ({
     editorState: prePopulatedState,
     nodes: [LexicalRichText_1.HeadingNode, ImageNode, LexicalList_1.ListNode, LexicalList_1.ListItemNode],
     theme: {
-      root: "p-4 bg-fill text-white font-roboto border-b border-highlight",
       text: {
         bold: "font-semibold",
         underline: "underline",
@@ -53171,7 +53224,16 @@ const RichTextEditor = ({
     /* @__PURE__ */ jsx(
       LexicalRichTextPlugin_1.RichTextPlugin,
       {
-        contentEditable: /* @__PURE__ */ jsx(LexicalContentEditable, { className: "outline-none" }),
+        contentEditable: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "text-white border-b border-highlight font-roboto",
+            style: {
+              minHeight: (windowSize == null ? void 0 : windowSize.innerHeight) ? (windowSize == null ? void 0 : windowSize.innerHeight) - TOOLBAR_HEIGHT : void 0
+            },
+            children: /* @__PURE__ */ jsx(LexicalContentEditable, { className: "p-4 outline-none bg-fill" })
+          }
+        ),
         placeholder: /* @__PURE__ */ jsx("div", { className: "", children: "Enter some text..." }),
         ErrorBoundary: LexicalErrorBoundary$1
       }
@@ -58411,51 +58473,6 @@ X.propTypes = {
 };
 X.displayName = "X";
 const X$1 = X;
-const ValOverlayContext = React$3.createContext({
-  get api() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  },
-  get session() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  },
-  get theme() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  },
-  get setTheme() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  },
-  get editMode() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  },
-  get setEditMode() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  },
-  get highlight() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  },
-  get setHighlight() {
-    throw Error(
-      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
-    );
-  }
-});
-function useValOverlayContext() {
-  return React$3.useContext(ValOverlayContext);
-}
 function ValMenu({ api }) {
   const { theme, setTheme, editMode, setEditMode } = useValOverlayContext();
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-center w-full h-full space-x-4 text-primary", children: [
@@ -60477,7 +60494,6 @@ function ValWindow({
   onClose,
   children
 }) {
-  var _a, _b;
   const [draggedPosition, isInitialized, dragRef, onMouseDownDrag] = useDrag({
     position
   });
@@ -60492,14 +60508,30 @@ function ValWindow({
       document.removeEventListener("keyup", closeOnEscape);
     };
   }, []);
-  const [size, setSize] = useState();
+  const { windowSize, setWindowSize } = useValOverlayContext();
+  useEffect(() => {
+    var _a, _b;
+    if (!windowSize) {
+      setWindowSize({
+        height: MIN_HEIGHT,
+        width: MIN_WIDTH,
+        innerHeight: MIN_HEIGHT - (64 + (((_b = (_a = bottomRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height) || 0))
+      });
+    }
+  }, [windowSize]);
   const bottomRef = useRef(null);
   return /* @__PURE__ */ jsx(
     Resizable,
     {
-      width: (size == null ? void 0 : size.width) || MIN_WIDTH,
-      height: (size == null ? void 0 : size.height) || MIN_HEIGHT,
-      onResize: (_, { size: size2 }) => setSize(size2),
+      width: (windowSize == null ? void 0 : windowSize.width) || MIN_WIDTH,
+      height: (windowSize == null ? void 0 : windowSize.height) || MIN_HEIGHT,
+      onResize: (_, { size }) => {
+        var _a, _b;
+        return setWindowSize({
+          ...size,
+          innerHeight: ((windowSize == null ? void 0 : windowSize.height) || MIN_HEIGHT) - (64 + (((_b = (_a = bottomRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height) || 0))
+        });
+      },
       handle: /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 right-0 cursor-se-resize", children: /* @__PURE__ */ jsx(
         "svg",
         {
@@ -60518,7 +60550,7 @@ function ValWindow({
       ) }),
       draggableOpts: {},
       className: classNames(
-        "absolute inset-0  w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
+        "absolute inset-0  tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75",
         {
           "opacity-0": !isInitialized,
           "opacity-100": isInitialized
@@ -60528,8 +60560,8 @@ function ValWindow({
         "div",
         {
           style: {
-            width: (size == null ? void 0 : size.width) || MIN_WIDTH,
-            height: (size == null ? void 0 : size.height) || MIN_HEIGHT,
+            width: (windowSize == null ? void 0 : windowSize.width) || MIN_WIDTH,
+            height: (windowSize == null ? void 0 : windowSize.height) || MIN_HEIGHT,
             left: draggedPosition.left,
             top: draggedPosition.top
           },
@@ -60577,7 +60609,7 @@ function ValWindow({
                     {
                       className: "relative overflow-scroll",
                       style: {
-                        height: ((size == null ? void 0 : size.height) || MIN_HEIGHT) - (64 + (((_b = (_a = bottomRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height) || 0))
+                        height: windowSize == null ? void 0 : windowSize.innerHeight
                       },
                       children: Array.isArray(children) ? children.slice(1, -1) : children
                     }
@@ -60713,6 +60745,7 @@ function ValOverlay({ defaultTheme, api }) {
       );
     });
   }, [windowTarget == null ? void 0 : windowTarget.path]);
+  const [windowSize, setWindowSize] = useState();
   return /* @__PURE__ */ jsx(
     ValOverlayContext.Provider,
     {
@@ -60724,7 +60757,9 @@ function ValOverlay({ defaultTheme, api }) {
         setEditMode,
         highlight,
         setHighlight,
-        setTheme
+        setTheme,
+        windowSize,
+        setWindowSize
       },
       children: /* @__PURE__ */ jsxs("div", { "data-mode": theme, children: [
         /* @__PURE__ */ jsx("div", { className: "fixed -translate-x-1/2 z-overlay left-1/2 bottom-4", children: /* @__PURE__ */ jsx(ValMenu, { api }) }),
@@ -61628,7 +61663,7 @@ const ValDashboard = ({
     /* @__PURE__ */ jsx("div", { children: "content" })
   ] }) }) });
 };
-const styleCss = '/*\n  Need to explicitly set config path, otherwise it may fail to resolve when\n  built from outside packages/ui.\n*/\n\n/*\n  ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: \'Roboto\', sans-serif; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type=\'button\'],\n[type=\'reset\'],\n[type=\'submit\'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n\n[hidden] {\n  display: none;\n}\n\n/* For use with Shadow DOM, copied from the TailwindCSS prelude */\n\n:host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont,\n      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",\n      "Helvetica Neue", sans-serif;\n    font-feature-settings: normal;\n    margin: 0;\n\n    /* theme properties - if updated remember to update the .storybook/theme.css file as well */\n    --val-theme-white: #fcfcfc;\n    --val-theme-light-gray: #d6d6d6;\n    --val-theme-dark-gray: #575757;\n    --val-theme-medium-black: #303030;\n    --val-theme-warm-black: #1a1a1a;\n    --val-theme-yellow: #ffff00;\n    --val-theme-red: #f02929;\n    --val-theme-green: #1ced1c;\n\n    /* light theme */\n    --val-theme-base: var(--val-theme-white);\n    --val-theme-highlight: var(--val-theme-yellow);\n    --val-theme-border: var(--val-theme-light-gray);\n    --val-theme-fill: var(--val-theme-light-gray);\n    --val-theme-primary: var(--val-theme-warm-black);\n  }\n\n/* dark theme */\n\n*[data-mode="dark"] {\n    --val-theme-base: var(--val-theme-warm-black);\n    --val-theme-highlight: var(--val-theme-yellow);\n    --val-theme-border: var(--val-theme-dark-gray);\n    --val-theme-fill: var(--val-theme-medium-black);\n    --val-theme-primary: var(--val-theme-white);\n  }\n\n/* text area auto-grow */\n\n.grow-wrap {\n    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one\'s height */\n    display: grid;\n  }\n\n.grow-wrap::after {\n    /* Note the weird space! Needed to preventy jumpy behavior */\n    content: attr(data-replicated-value) " ";\n\n    /* This is how textarea text behaves */\n    white-space: pre-wrap;\n\n    /* Hidden from view, clicks, and screen readers */\n    visibility: hidden;\n  }\n\n.grow-wrap > textarea {\n    /* Firefox shows scrollbar on growth, you can hide like this. */\n    overflow: hidden;\n  }\n\n.grow-wrap > textarea,\n  .grow-wrap::after {\n    /* Identical styling required!! */\n    border: 1px solid black;\n    padding: 0.5rem;\n    font: inherit;\n\n    /* Place on top of each other */\n    grid-area: 1 / 1 / 2 / 2;\n  }\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 16px;\n}\n.bottom-\\[-75\\%\\] {\n  bottom: -75%;\n}\n.left-0 {\n  left: 0px;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.right-\\[16px\\] {\n  right: 16px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.top-\\[68\\.54px\\] {\n  top: 68.54px;\n}\n.z-overlay {\n  z-index: 4;\n}\n.-my-2 {\n  margin-top: -8px;\n  margin-bottom: -8px;\n}\n.-my-\\[100px\\] {\n  margin-top: -100px;\n  margin-bottom: -100px;\n}\n.mx-2 {\n  margin-left: 8px;\n  margin-right: 8px;\n}\n.mb-4 {\n  margin-bottom: 16px;\n}\n.ml-2 {\n  margin-left: 8px;\n}\n.ml-4 {\n  margin-left: 16px;\n}\n.ml-\\[20px\\] {\n  margin-left: 20px;\n}\n.ml-auto {\n  margin-left: auto;\n}\n.mt-2 {\n  margin-top: 8px;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-3 {\n  height: 12px;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[1px\\] {\n  height: 1px;\n}\n.h-\\[20px\\] {\n  height: 20px;\n}\n.h-\\[24px\\] {\n  height: 24px;\n}\n.h-\\[32px\\] {\n  height: 32px;\n}\n.h-\\[50px\\] {\n  height: 50px;\n}\n.h-\\[75px\\] {\n  height: 75px;\n}\n.h-\\[9px\\] {\n  height: 9px;\n}\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n.h-full {\n  height: 100%;\n}\n.h-screen {\n  height: 100vh;\n}\n.max-h-\\[300px\\] {\n  max-height: 300px;\n}\n.min-h-\\[200px\\] {\n  min-height: 200px;\n}\n.min-h-\\[300px\\] {\n  min-height: 300px;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-3 {\n  width: 12px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-\\[1px\\] {\n  width: 1px;\n}\n.w-\\[20px\\] {\n  width: 20px;\n}\n.w-\\[24px\\] {\n  width: 24px;\n}\n.w-\\[32px\\] {\n  width: 32px;\n}\n.w-\\[9px\\] {\n  width: 9px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.w-screen {\n  width: 100vw;\n}\n.min-w-0 {\n  min-width: 0px;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.max-w-\\[1000px\\] {\n  max-width: 1000px;\n}\n.max-w-\\[300px\\] {\n  max-width: 300px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.max-w-full {\n  max-width: 100%;\n}\n.flex-auto {\n  flex: 1 1 auto;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.-translate-x-1\\/2 {\n  --tw-translate-x: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[-90deg\\] {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[90deg\\] {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-col-resize {\n  cursor: col-resize;\n}\n.cursor-grab {\n  cursor: grab;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-se-resize {\n  cursor: se-resize;\n}\n.resize-none {\n  resize: none;\n}\n.resize {\n  resize: both;\n}\n.list-decimal {\n  list-style-type: decimal;\n}\n.list-disc {\n  list-style-type: disc;\n}\n.grid-rows-\\[1fr\\2c _min-content\\] {\n  grid-template-rows: 1fr min-content;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 4px;\n}\n.gap-2 {\n  gap: 8px;\n}\n.gap-3 {\n  gap: 12px;\n}\n.gap-4 {\n  gap: 16px;\n}\n.gap-\\[36px\\] {\n  gap: 36px;\n}\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(16px * var(--tw-space-x-reverse));\n  margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-clip {\n  overflow: clip;\n}\n.overflow-scroll {\n  overflow: scroll;\n}\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-sm {\n  border-radius: 0.125rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-\\[2px\\] {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-base {\n  border-color: var(--val-theme-base);\n}\n.border-border {\n  border-color: var(--val-theme-border);\n}\n.border-dark-gray {\n  --tw-border-opacity: 1;\n  border-color: rgb(87 87 87 / var(--tw-border-opacity));\n}\n.border-highlight {\n  border-color: var(--val-theme-highlight);\n}\n.border-primary {\n  border-color: var(--val-theme-primary);\n}\n.border-warm-black {\n  --tw-border-opacity: 1;\n  border-color: rgb(26 26 26 / var(--tw-border-opacity));\n}\n.border-yellow {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 0 / var(--tw-border-opacity));\n}\n.bg-base {\n  background-color: var(--val-theme-base);\n}\n.bg-border {\n  background-color: var(--val-theme-border);\n}\n.bg-dark-gray {\n  --tw-bg-opacity: 1;\n  background-color: rgb(87 87 87 / var(--tw-bg-opacity));\n}\n.bg-fill {\n  background-color: var(--val-theme-fill);\n}\n.bg-highlight {\n  background-color: var(--val-theme-highlight);\n}\n.bg-light-gray {\n  --tw-bg-opacity: 1;\n  background-color: rgb(214 214 214 / var(--tw-bg-opacity));\n}\n.bg-medium-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(48 48 48 / var(--tw-bg-opacity));\n}\n.bg-red {\n  --tw-bg-opacity: 1;\n  background-color: rgb(240 41 41 / var(--tw-bg-opacity));\n}\n.bg-warm-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(26 26 26 / var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(252 252 252 / var(--tw-bg-opacity));\n}\n.bg-yellow {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\n}\n.fill-white {\n  fill: #FCFCFC;\n}\n.stroke-\\[2px\\] {\n  stroke-width: 2px;\n}\n.stroke-\\[3px\\] {\n  stroke-width: 3px;\n}\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n.p-1 {\n  padding: 4px;\n}\n.p-2 {\n  padding: 8px;\n}\n.p-4 {\n  padding: 16px;\n}\n.px-1 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-3 {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.px-4 {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.px-\\[24px\\] {\n  padding-left: 24px;\n  padding-right: 24px;\n}\n.py-1 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.py-2 {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.py-3 {\n  padding-top: 12px;\n  padding-bottom: 12px;\n}\n.py-4 {\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pb-0 {\n  padding-bottom: 0px;\n}\n.pr-1 {\n  padding-right: 4px;\n}\n.pt-2 {\n  padding-top: 8px;\n}\n.pt-4 {\n  padding-top: 16px;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-start {\n  text-align: start;\n}\n.font-sans {\n  font-family: \'Roboto\', sans-serif;\n}\n.font-serif {\n  font-family: \'JetBrains Mono\', monospace;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.text-\\[12px\\] {\n  font-size: 12px;\n}\n.text-\\[14px\\] {\n  font-size: 14px;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[400\\] {\n  font-weight: 400;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-\\[550\\] {\n  font-weight: 550;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-extrabold {\n  font-weight: 800;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.leading-4 {\n  line-height: 1rem;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.text-base {\n  color: var(--val-theme-base);\n}\n.text-fill {\n  color: var(--val-theme-fill);\n}\n.text-highlight {\n  color: var(--val-theme-highlight);\n}\n.text-primary {\n  color: var(--val-theme-primary);\n}\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgb(240 41 41 / var(--tw-text-opacity));\n}\n.text-warm-black {\n  --tw-text-opacity: 1;\n  color: rgb(26 26 26 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(252 252 252 / var(--tw-text-opacity));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.line-through {\n  text-decoration-line: line-through;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.drop-shadow-2xl {\n  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.delay-75 {\n  transition-delay: 75ms;\n}\n.duration-150 {\n  transition-duration: 150ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hover\\:w-\\[2px\\]:hover {\n  width: 2px;\n}\n.hover\\:cursor-pointer:hover {\n  cursor: pointer;\n}\n.hover\\:rounded-lg:hover {\n  border-radius: 0.5rem;\n}\n.hover\\:border-highlight:hover {\n  border-color: var(--val-theme-highlight);\n}\n.hover\\:border-light-gray:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(214 214 214 / var(--tw-border-opacity));\n}\n.hover\\:bg-base:hover {\n  background-color: var(--val-theme-base);\n}\n.hover\\:bg-dark-gray:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(87 87 87 / var(--tw-bg-opacity));\n}\n.hover\\:bg-light-gray:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(214 214 214 / var(--tw-bg-opacity));\n}\n.hover\\:bg-light-gray\\/20:hover {\n  background-color: rgb(214 214 214 / 0.2);\n}\n.hover\\:bg-warm-black:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(26 26 26 / var(--tw-bg-opacity));\n}\n.hover\\:text-highlight:hover {\n  color: var(--val-theme-highlight);\n}\n.hover\\:text-warm-black:hover {\n  --tw-text-opacity: 1;\n  color: rgb(26 26 26 / var(--tw-text-opacity));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(252 252 252 / var(--tw-text-opacity));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:border-highlight:focus-visible {\n  border-color: var(--val-theme-highlight);\n}\n.focus-visible\\:outline-highlight:focus-visible {\n  outline-color: var(--val-theme-highlight);\n}\n.disabled\\:border-border:disabled {\n  border-color: var(--val-theme-border);\n}\n.disabled\\:bg-fill:disabled {\n  background-color: var(--val-theme-fill);\n}\n.disabled\\:text-base:disabled {\n  font-size: 1rem;\n  line-height: 1.5rem;\n  color: var(--val-theme-base);\n}\n.disabled\\:text-dark-gray:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(87 87 87 / var(--tw-text-opacity));\n}\n.group:hover .group-hover\\:block {\n  display: block;\n}\n.group:hover .group-hover\\:bg-dark-gray {\n  --tw-bg-opacity: 1;\n  background-color: rgb(87 87 87 / var(--tw-bg-opacity));\n}\n.group:hover .group-hover\\:fill-highlight {\n  fill: var(--val-theme-highlight);\n}\n:is([data-mode="dark"] .dark\\:border-white) {\n  --tw-border-opacity: 1;\n  border-color: rgb(252 252 252 / var(--tw-border-opacity));\n}\n:is([data-mode="dark"] .dark\\:hover\\:border-highlight:hover) {\n  border-color: var(--val-theme-highlight);\n}\n:is([data-mode="dark"] .hover\\:dark\\:bg-yellow):hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\n}\n:is([data-mode="dark"] .hover\\:dark\\:text-dark-gray):hover {\n  --tw-text-opacity: 1;\n  color: rgb(87 87 87 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .tablet\\:block {\n    display: block;\n  }\n\n  .tablet\\:h-auto {\n    height: auto;\n  }\n\n  .tablet\\:min-h-fit {\n    min-height: -moz-fit-content;\n    min-height: fit-content;\n  }\n\n  .tablet\\:w-auto {\n    width: auto;\n  }\n\n  .tablet\\:rounded {\n    border-radius: 0.25rem;\n  }\n}\n';
+const styleCss = '/*\n  Need to explicitly set config path, otherwise it may fail to resolve when\n  built from outside packages/ui.\n*/\n\n/*\n  ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: \'Roboto\', sans-serif; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type=\'button\'],\n[type=\'reset\'],\n[type=\'submit\'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n\n[hidden] {\n  display: none;\n}\n\n/* For use with Shadow DOM, copied from the TailwindCSS prelude */\n\n:host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont,\n      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",\n      "Helvetica Neue", sans-serif;\n    font-feature-settings: normal;\n    margin: 0;\n\n    /* theme properties - if updated remember to update the .storybook/theme.css file as well */\n    --val-theme-white: #fcfcfc;\n    --val-theme-light-gray: #d6d6d6;\n    --val-theme-dark-gray: #575757;\n    --val-theme-medium-black: #303030;\n    --val-theme-warm-black: #1a1a1a;\n    --val-theme-yellow: #ffff00;\n    --val-theme-red: #f02929;\n    --val-theme-green: #1ced1c;\n\n    /* light theme */\n    --val-theme-base: var(--val-theme-white);\n    --val-theme-highlight: var(--val-theme-yellow);\n    --val-theme-border: var(--val-theme-light-gray);\n    --val-theme-fill: var(--val-theme-light-gray);\n    --val-theme-primary: var(--val-theme-warm-black);\n  }\n\n/* dark theme */\n\n*[data-mode="dark"] {\n    --val-theme-base: var(--val-theme-warm-black);\n    --val-theme-highlight: var(--val-theme-yellow);\n    --val-theme-border: var(--val-theme-dark-gray);\n    --val-theme-fill: var(--val-theme-medium-black);\n    --val-theme-primary: var(--val-theme-white);\n  }\n\n/* text area auto-grow */\n\n.grow-wrap {\n    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one\'s height */\n    display: grid;\n  }\n\n.grow-wrap::after {\n    /* Note the weird space! Needed to preventy jumpy behavior */\n    content: attr(data-replicated-value) " ";\n\n    /* This is how textarea text behaves */\n    white-space: pre-wrap;\n\n    /* Hidden from view, clicks, and screen readers */\n    visibility: hidden;\n  }\n\n.grow-wrap > textarea {\n    /* Firefox shows scrollbar on growth, you can hide like this. */\n    overflow: hidden;\n  }\n\n.grow-wrap > textarea,\n  .grow-wrap::after {\n    /* Identical styling required!! */\n    border: 1px solid black;\n    padding: 0.5rem;\n    font: inherit;\n\n    /* Place on top of each other */\n    grid-area: 1 / 1 / 2 / 2;\n  }\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.-left-2 {\n  left: -8px;\n}\n.-top-\\[4px\\] {\n  top: -4px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 16px;\n}\n.left-0 {\n  left: 0px;\n}\n.left-1\\/2 {\n  left: 50%;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.right-\\[16px\\] {\n  right: 16px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.top-\\[68\\.54px\\] {\n  top: 68.54px;\n}\n.z-overlay {\n  z-index: 4;\n}\n.-my-2 {\n  margin-top: -8px;\n  margin-bottom: -8px;\n}\n.-my-\\[100px\\] {\n  margin-top: -100px;\n  margin-bottom: -100px;\n}\n.mx-2 {\n  margin-left: 8px;\n  margin-right: 8px;\n}\n.mb-4 {\n  margin-bottom: 16px;\n}\n.ml-2 {\n  margin-left: 8px;\n}\n.ml-4 {\n  margin-left: 16px;\n}\n.ml-\\[20px\\] {\n  margin-left: 20px;\n}\n.ml-auto {\n  margin-left: auto;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-3 {\n  height: 12px;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[1px\\] {\n  height: 1px;\n}\n.h-\\[20px\\] {\n  height: 20px;\n}\n.h-\\[24px\\] {\n  height: 24px;\n}\n.h-\\[32px\\] {\n  height: 32px;\n}\n.h-\\[50px\\] {\n  height: 50px;\n}\n.h-\\[75px\\] {\n  height: 75px;\n}\n.h-\\[9px\\] {\n  height: 9px;\n}\n.h-full {\n  height: 100%;\n}\n.h-screen {\n  height: 100vh;\n}\n.max-h-\\[300px\\] {\n  max-height: 300px;\n}\n.min-h-\\[200px\\] {\n  min-height: 200px;\n}\n.min-h-\\[300px\\] {\n  min-height: 300px;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-3 {\n  width: 12px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-\\[1px\\] {\n  width: 1px;\n}\n.w-\\[20px\\] {\n  width: 20px;\n}\n.w-\\[24px\\] {\n  width: 24px;\n}\n.w-\\[32px\\] {\n  width: 32px;\n}\n.w-\\[9px\\] {\n  width: 9px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.w-screen {\n  width: 100vw;\n}\n.min-w-0 {\n  min-width: 0px;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.max-w-\\[1000px\\] {\n  max-width: 1000px;\n}\n.max-w-\\[300px\\] {\n  max-width: 300px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.flex-auto {\n  flex: 1 1 auto;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.-translate-x-1\\/2 {\n  --tw-translate-x: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[-90deg\\] {\n  --tw-rotate: -90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-\\[90deg\\] {\n  --tw-rotate: 90deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-col-resize {\n  cursor: col-resize;\n}\n.cursor-grab {\n  cursor: grab;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-se-resize {\n  cursor: se-resize;\n}\n.resize-none {\n  resize: none;\n}\n.resize {\n  resize: both;\n}\n.list-decimal {\n  list-style-type: decimal;\n}\n.list-disc {\n  list-style-type: disc;\n}\n.grid-rows-\\[1fr\\2c _min-content\\] {\n  grid-template-rows: 1fr min-content;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 4px;\n}\n.gap-2 {\n  gap: 8px;\n}\n.gap-3 {\n  gap: 12px;\n}\n.gap-4 {\n  gap: 16px;\n}\n.gap-\\[36px\\] {\n  gap: 36px;\n}\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(16px * var(--tw-space-x-reverse));\n  margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-clip {\n  overflow: clip;\n}\n.overflow-scroll {\n  overflow: scroll;\n}\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-sm {\n  border-radius: 0.125rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-\\[2px\\] {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-base {\n  border-color: var(--val-theme-base);\n}\n.border-border {\n  border-color: var(--val-theme-border);\n}\n.border-dark-gray {\n  --tw-border-opacity: 1;\n  border-color: rgb(87 87 87 / var(--tw-border-opacity));\n}\n.border-highlight {\n  border-color: var(--val-theme-highlight);\n}\n.border-primary {\n  border-color: var(--val-theme-primary);\n}\n.border-warm-black {\n  --tw-border-opacity: 1;\n  border-color: rgb(26 26 26 / var(--tw-border-opacity));\n}\n.border-yellow {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 0 / var(--tw-border-opacity));\n}\n.bg-base {\n  background-color: var(--val-theme-base);\n}\n.bg-border {\n  background-color: var(--val-theme-border);\n}\n.bg-dark-gray {\n  --tw-bg-opacity: 1;\n  background-color: rgb(87 87 87 / var(--tw-bg-opacity));\n}\n.bg-fill {\n  background-color: var(--val-theme-fill);\n}\n.bg-highlight {\n  background-color: var(--val-theme-highlight);\n}\n.bg-light-gray {\n  --tw-bg-opacity: 1;\n  background-color: rgb(214 214 214 / var(--tw-bg-opacity));\n}\n.bg-medium-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(48 48 48 / var(--tw-bg-opacity));\n}\n.bg-red {\n  --tw-bg-opacity: 1;\n  background-color: rgb(240 41 41 / var(--tw-bg-opacity));\n}\n.bg-warm-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(26 26 26 / var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(252 252 252 / var(--tw-bg-opacity));\n}\n.bg-yellow {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\n}\n.fill-white {\n  fill: #FCFCFC;\n}\n.stroke-\\[2px\\] {\n  stroke-width: 2px;\n}\n.stroke-\\[3px\\] {\n  stroke-width: 3px;\n}\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n.p-1 {\n  padding: 4px;\n}\n.p-2 {\n  padding: 8px;\n}\n.p-4 {\n  padding: 16px;\n}\n.px-1 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-3 {\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.px-4 {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.px-\\[24px\\] {\n  padding-left: 24px;\n  padding-right: 24px;\n}\n.py-1 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n.py-2 {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.py-3 {\n  padding-top: 12px;\n  padding-bottom: 12px;\n}\n.py-4 {\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.pb-0 {\n  padding-bottom: 0px;\n}\n.pr-1 {\n  padding-right: 4px;\n}\n.pt-2 {\n  padding-top: 8px;\n}\n.pt-4 {\n  padding-top: 16px;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-start {\n  text-align: start;\n}\n.font-sans {\n  font-family: \'Roboto\', sans-serif;\n}\n.font-serif {\n  font-family: \'JetBrains Mono\', monospace;\n}\n.text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.text-\\[12px\\] {\n  font-size: 12px;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[400\\] {\n  font-weight: 400;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-\\[550\\] {\n  font-weight: 550;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-extrabold {\n  font-weight: 800;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.leading-4 {\n  line-height: 1rem;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.text-base {\n  color: var(--val-theme-base);\n}\n.text-fill {\n  color: var(--val-theme-fill);\n}\n.text-highlight {\n  color: var(--val-theme-highlight);\n}\n.text-primary {\n  color: var(--val-theme-primary);\n}\n.text-red {\n  --tw-text-opacity: 1;\n  color: rgb(240 41 41 / var(--tw-text-opacity));\n}\n.text-warm-black {\n  --tw-text-opacity: 1;\n  color: rgb(26 26 26 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(252 252 252 / var(--tw-text-opacity));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.line-through {\n  text-decoration-line: line-through;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.drop-shadow-2xl {\n  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.delay-75 {\n  transition-delay: 75ms;\n}\n.duration-150 {\n  transition-duration: 150ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hover\\:w-\\[2px\\]:hover {\n  width: 2px;\n}\n.hover\\:cursor-pointer:hover {\n  cursor: pointer;\n}\n.hover\\:rounded-lg:hover {\n  border-radius: 0.5rem;\n}\n.hover\\:border-highlight:hover {\n  border-color: var(--val-theme-highlight);\n}\n.hover\\:border-light-gray:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(214 214 214 / var(--tw-border-opacity));\n}\n.hover\\:bg-base:hover {\n  background-color: var(--val-theme-base);\n}\n.hover\\:bg-dark-gray:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(87 87 87 / var(--tw-bg-opacity));\n}\n.hover\\:bg-light-gray:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(214 214 214 / var(--tw-bg-opacity));\n}\n.hover\\:bg-light-gray\\/20:hover {\n  background-color: rgb(214 214 214 / 0.2);\n}\n.hover\\:bg-warm-black:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(26 26 26 / var(--tw-bg-opacity));\n}\n.hover\\:text-highlight:hover {\n  color: var(--val-theme-highlight);\n}\n.hover\\:text-warm-black:hover {\n  --tw-text-opacity: 1;\n  color: rgb(26 26 26 / var(--tw-text-opacity));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(252 252 252 / var(--tw-text-opacity));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:border-highlight:focus-visible {\n  border-color: var(--val-theme-highlight);\n}\n.focus-visible\\:outline-highlight:focus-visible {\n  outline-color: var(--val-theme-highlight);\n}\n.disabled\\:border-border:disabled {\n  border-color: var(--val-theme-border);\n}\n.disabled\\:bg-fill:disabled {\n  background-color: var(--val-theme-fill);\n}\n.disabled\\:text-base:disabled {\n  font-size: 1rem;\n  line-height: 1.5rem;\n  color: var(--val-theme-base);\n}\n.disabled\\:text-dark-gray:disabled {\n  --tw-text-opacity: 1;\n  color: rgb(87 87 87 / var(--tw-text-opacity));\n}\n.group:hover .group-hover\\:bg-dark-gray {\n  --tw-bg-opacity: 1;\n  background-color: rgb(87 87 87 / var(--tw-bg-opacity));\n}\n.group:hover .group-hover\\:fill-highlight {\n  fill: var(--val-theme-highlight);\n}\n:is([data-mode="dark"] .dark\\:border-white) {\n  --tw-border-opacity: 1;\n  border-color: rgb(252 252 252 / var(--tw-border-opacity));\n}\n:is([data-mode="dark"] .dark\\:hover\\:border-highlight:hover) {\n  border-color: var(--val-theme-highlight);\n}\n:is([data-mode="dark"] .hover\\:dark\\:bg-yellow):hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\n}\n:is([data-mode="dark"] .hover\\:dark\\:text-dark-gray):hover {\n  --tw-text-opacity: 1;\n  color: rgb(87 87 87 / var(--tw-text-opacity));\n}\n@media (min-width: 640px) {\n\n  .tablet\\:block {\n    display: block;\n  }\n\n  .tablet\\:h-auto {\n    height: auto;\n  }\n\n  .tablet\\:min-h-fit {\n    min-height: -moz-fit-content;\n    min-height: fit-content;\n  }\n\n  .tablet\\:w-auto {\n    width: auto;\n  }\n\n  .tablet\\:rounded {\n    border-radius: 0.25rem;\n  }\n}\n';
 function Style() {
   return /* @__PURE__ */ jsx("style", { children: styleCss });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/ui",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -16,7 +16,7 @@
     "@lexical/utils": "^0.10.0",
     "@types/express": "^4.17.17",
     "@types/react": "^18.0.26",
-    "@valbuild/core": "~0.20.0",
+    "@valbuild/core": "~0.20.2",
     "classnames": "^2.3.2",
     "esbuild": "^0.17.19",
     "lexical": "^0.10.0",

package/src/components/Button.tsx

@@ -7,7 +7,6 @@ export interface ButtonProps
   icon?: React.ReactElement<SVGProps<SVGSVGElement>>;
   active?: boolean;
   disabled?: boolean;
-  tooltip?: string;
 }
 
 export function PrimaryButton({
@@ -34,7 +33,6 @@ const Button: FC<ButtonProps> = ({
   icon,
   // active = false,
   disabled = false,
-  tooltip,
 }) => {
   return (
     <button
@@ -51,13 +49,6 @@ const Button: FC<ButtonProps> = ({
       )}
       onClick={onClick}
     >
-      {tooltip && (
-        <div
-          className={`absolute bottom-[-75%] left-0 z-20 bg-black w-fit h-fit text-primary hidden group-hover:block`}
-        >
-          <div>{tooltip}</div>
-        </div>
-      )}
       <span className="flex flex-row items-center justify-center gap-2">
         {icon && icon}
         {children}

package/src/components/Dropdown.tsx

@@ -1,6 +1,7 @@
 import React, { SVGProps, useEffect, useRef, useState } from "react";
 import Chevron from "../assets/icons/Chevron";
 import Button from "./Button";
+import { useValOverlayContext } from "./ValOverlayContext";
 
 export interface DropdownProps {
   options: string[];
@@ -15,11 +16,11 @@ const Dropdown: React.FC<DropdownProps> = ({
   onChange,
   label,
   icon,
-  // variant = "primary",
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [selectedOption, setSelectedOption] = useState<number>(0);
+  const { windowSize } = useValOverlayContext();
 
   const handleToggle = () => {
     setIsOpen(!isOpen);
@@ -62,31 +63,37 @@ const Dropdown: React.FC<DropdownProps> = ({
           />
         }
       >
-        <span className="flex flex-row items-center justify-center gap-1">
-          {label}
-          {icon && icon}
-        </span>
-      </Button>
-      {isOpen && (
-        <div className="absolute left-0 mt-2 w-48 shadow-lg font-mono text-[14px] text-primary bg-border z-overlay">
-          <div className="py-1 rounded-md">
-            {options?.map((option, idx) => (
-              <button
-                key={option}
-                onClick={(ev) => {
-                  ev.preventDefault();
-                  handleSelect(option, idx);
-                }}
-                className={`w-full text-left px-4 py-2 hover:bg-base hover:text-highlight  ${
-                  idx === selectedOption && "font-bold bg-base hover:bg-base"
-                }`}
-              >
-                {option}
-              </button>
-            ))}
-          </div>
+        <div className="relative">
+          <span className="flex flex-row items-center justify-center gap-1">
+            {label}
+            {icon && icon}
+          </span>
+          {isOpen && (
+            <div
+              className="absolute -top-[4px] overflow-scroll shadow-lg -left-2 text-primary bg-border w-fit z-overlay"
+              style={{ maxHeight: windowSize?.innerHeight }}
+            >
+              <div className="flex flex-col ">
+                {options?.map((option, idx) => (
+                  <button
+                    key={option}
+                    onClick={(ev) => {
+                      ev.preventDefault();
+                      handleSelect(option, idx);
+                    }}
+                    className={`text-left px-2 py-1 hover:bg-base hover:text-highlight  ${
+                      idx === selectedOption &&
+                      "font-bold bg-base hover:bg-base truncate"
+                    }`}
+                  >
+                    {option}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
-      )}
+      </Button>
     </div>
   );
 };