@valbuild/ui 0.13.0 → 0.13.4

package/dist/valbuild-ui.cjs.js

@@ -49193,25 +49193,25 @@ function toLexicalNode(node) {
 }
 function toLexicalHeadingNode(heading) {
   const node = LexicalRichText_1.$createHeadingNode(heading.tag);
-  node.setFormat(heading.format);
-  node.setIndent(heading.indent);
-  node.setDirection(heading.direction);
+  node.setFormat(heading.format || "");
+  node.setIndent(heading.indent || 0);
+  node.setDirection(heading.direction || "ltr");
   node.append(...heading.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalParagraphNode(paragraph) {
   const node = Lexical_1.$createParagraphNode();
-  node.setFormat(paragraph.format);
-  node.setIndent(paragraph.indent);
-  node.setDirection(paragraph.direction);
+  node.setFormat(paragraph.format || "");
+  node.setIndent(paragraph.indent || 0);
+  node.setDirection(paragraph.direction || "ltr");
   node.append(...paragraph.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalListItemNode(listItem) {
   const node = LexicalList_1.$createListItemNode();
-  node.setFormat(listItem.format);
-  node.setIndent(listItem.indent);
-  node.setDirection(listItem.direction);
+  node.setFormat(listItem.format || "");
+  node.setIndent(listItem.indent || 0);
+  node.setDirection(listItem.direction || "ltr");
   node.setValue(listItem.value);
   node.setChecked(listItem.checked);
   node.append(...listItem.children.map((child) => toLexicalNode(child)));
@@ -49219,9 +49219,9 @@ function toLexicalListItemNode(listItem) {
 }
 function toLexicalListNode(list) {
   const node = LexicalList_1.$createListNode(list.listType, list.start);
-  node.setFormat(list.format);
-  node.setIndent(list.indent);
-  node.setDirection(list.direction);
+  node.setFormat(list.format || "");
+  node.setIndent(list.indent || 0);
+  node.setDirection(list.direction || "ltr");
   node.append(...list.children.map((child) => toLexicalNode(child)));
   return node;
 }
@@ -49230,8 +49230,8 @@ function toLexicalTextNode(text) {
   node.setFormat(text.format);
   text.indent && node.setIndent(text.indent);
   text.direction && node.setDirection(text.direction);
-  node.setStyle(text.style);
-  node.setDetail(text.detail);
+  node.setStyle(text.style || "");
+  node.setDetail(text.detail || 0);
   return node;
 }
 const RichTextEditor = ({
@@ -49256,7 +49256,7 @@ const RichTextEditor = ({
         underline: "underline",
         italic: "italic",
         strikethrough: "line-through",
-        underlineStrikethrough: "underlined-line-through"
+        underlineStrikethrough: "underline line-through"
       },
       list: {
         listitem: "ml-[20px]",
@@ -49281,7 +49281,7 @@ const RichTextEditor = ({
       LexicalRichTextPlugin_1.RichTextPlugin,
       {
         contentEditable: /* @__PURE__ */ jsxRuntime.jsx(LexicalContentEditable, { className: "relative bg-fill flex flex-col h-full w-full min-h-[200px] text-primary outline-none" }),
-        placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(58px+1rem)] left-4 text-base/25 ", children: "Enter some text..." }),
+        placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(58px+1rem)] left-4 text-base/25 text-primary", children: "Enter some text..." }),
         ErrorBoundary: LexicalErrorBoundary_1
       }
     ),
@@ -50791,7 +50791,7 @@ function ValWindow({
   onClose,
   children
 }) {
-  const [draggedPosition, isInitialized, ref, onMouseDown] = useDrag({
+  const [draggedPosition, isInitialized, dragRef, onMouseDownDrag] = useDrag({
     position
   });
   React.useEffect(() => {
@@ -50805,26 +50805,30 @@ function ValWindow({
       document.removeEventListener("keyup", closeOnEscape);
     };
   }, []);
+  const [size, resizeRef, onMouseDownResize] = useResize();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: classNames(
-        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 tablet:max-w-[50ch] max-w-full",
+        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
         {
           "opacity-0": !(isInitialized || isInitializedProp),
           "opacity-100": isInitialized || isInitializedProp
         }
       ),
+      ref: resizeRef,
       style: {
         left: draggedPosition.left,
-        top: draggedPosition.top
+        top: draggedPosition.top,
+        width: size == null ? void 0 : size.width,
+        height: size == null ? void 0 : size.height
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            ref,
-            className: "relative flex justify-center px-2 py-2 text-primary",
+            ref: dragRef,
+            className: "relative flex justify-center px-2 pt-2 text-primary pb-[16px]",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 AlignJustify$1,
@@ -50834,7 +50838,7 @@ function ValWindow({
                   onMouseDown: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    onMouseDown();
+                    onMouseDownDrag();
                   }
                 }
               ),
@@ -50849,11 +50853,63 @@ function ValWindow({
             ]
           }
         ),
-        children
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute bottom-0 right-0 hidden ml-auto select-none tablet:block text-border cursor-nwse-resize",
+            style: {
+              height: 16,
+              width: 16
+            },
+            onMouseDown: onMouseDownResize,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                height: "18",
+                viewBox: "0 0 18 18",
+                width: "18",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "m14.228 16.227a1 1 0 0 1 -.707-1.707l1-1a1 1 0 0 1 1.416 1.414l-1 1a1 1 0 0 1 -.707.293zm-5.638 0a1 1 0 0 1 -.707-1.707l6.638-6.638a1 1 0 0 1 1.416 1.414l-6.638 6.638a1 1 0 0 1 -.707.293zm-5.84 0a1 1 0 0 1 -.707-1.707l12.477-12.477a1 1 0 1 1 1.415 1.414l-12.478 12.477a1 1 0 0 1 -.707.293z",
+                    fill: "currentColor"
+                  }
+                )
+              }
+            )
+          }
+        )
       ]
     }
   );
 }
+function useResize() {
+  const ref = React.useRef(null);
+  const [size, setSize] = React.useState();
+  const handler = (mouseDownEvent) => {
+    var _a;
+    const startSize = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
+    const startPosition = { x: mouseDownEvent.pageX, y: mouseDownEvent.pageY };
+    function onMouseMove(mouseMoveEvent) {
+      if (startSize) {
+        const nextWidth = startSize.width - startPosition.x + mouseMoveEvent.pageX;
+        const nextHeight = startSize.height - startPosition.y + mouseMoveEvent.pageY;
+        setSize({
+          width: nextWidth,
+          height: nextHeight
+        });
+      }
+    }
+    function onMouseUp() {
+      document.body.removeEventListener("mousemove", onMouseMove);
+    }
+    document.body.addEventListener("mousemove", onMouseMove);
+    document.body.addEventListener("mouseup", onMouseUp, { once: true });
+  };
+  return [size, ref, handler];
+}
 function useDrag({
   position: initPosition
 }) {
@@ -50929,7 +50985,7 @@ function ValOverlay({
     editMode && valWindow && /* @__PURE__ */ jsxRuntime.jsx(ValWindow, { onClose: closeValWindow, position: valWindow.position, children: /* @__PURE__ */ jsxRuntime.jsx(Form, { onSubmit: valWindow.onSubmit, inputs: valWindow.inputs }) })
   ] });
 }
-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.inset-0 {\n  inset: 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-4 {\n  left: 16px;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.top-\\[calc\\(58px\\+1rem\\)\\] {\n  top: calc(58px + 1rem);\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.mb-4 {\n  margin-bottom: 16px;\n}\n.ml-2 {\n  margin-left: 8px;\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.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.hidden {\n  display: none;\n}\n.h-0 {\n  height: 0px;\n}\n.h-\\[100svh\\] {\n  height: 100svh;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[40px\\] {\n  height: 40px;\n}\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n.h-full {\n  height: 100%;\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-0 {\n  width: 0px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.max-w-full {\n  max-width: 100%;\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-\\[-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.-scale-x-100 {\n  --tw-scale-x: -1;\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-grab {\n  cursor: grab;\n}\n.cursor-pointer {\n  cursor: pointer;\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.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-center {\n  align-items: center;\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.overflow-scroll {\n  overflow: scroll;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\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-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.bg-base {\n  background-color: var(--val-theme-base);\n}\n.bg-border {\n  background-color: var(--val-theme-border);\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-yellow {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\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-2 {\n  padding: 8px;\n}\n.p-4 {\n  padding: 16px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-4 {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.px-\\[12px\\] {\n  padding-left: 12px;\n  padding-right: 12px;\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-4 {\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.py-\\[8px\\] {\n  padding-top: 8px;\n  padding-bottom: 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.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-\\[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-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.text-base {\n  color: var(--val-theme-base);\n}\n.text-fill {\n  color: var(--val-theme-fill);\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-75 {\n  opacity: 0.75;\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.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\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.transition-transform {\n  transition-property: transform;\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\\:border-highlight:hover {\n  border-color: var(--val-theme-highlight);\n}\n.hover\\:bg-base:hover {\n  background-color: var(--val-theme-base);\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-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\\: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.group:hover .group-hover\\:block {\n  display: block;\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\"] .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\\:w-auto {\n    width: auto;\n  }\n\n  .tablet\\:max-w-\\[50ch\\] {\n    max-width: 50ch;\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.inset-0 {\n  inset: 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-4 {\n  left: 16px;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.top-\\[calc\\(58px\\+1rem\\)\\] {\n  top: calc(58px + 1rem);\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.mb-4 {\n  margin-bottom: 16px;\n}\n.ml-2 {\n  margin-left: 8px;\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.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.hidden {\n  display: none;\n}\n.h-0 {\n  height: 0px;\n}\n.h-\\[100svh\\] {\n  height: 100svh;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[40px\\] {\n  height: 40px;\n}\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n.h-full {\n  height: 100%;\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-0 {\n  width: 0px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.max-w-full {\n  max-width: 100%;\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-\\[-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.-scale-x-100 {\n  --tw-scale-x: -1;\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-grab {\n  cursor: grab;\n}\n.cursor-nwse-resize {\n  cursor: nwse-resize;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.select-none {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: 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.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-center {\n  align-items: center;\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.overflow-scroll {\n  overflow: scroll;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\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-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.bg-base {\n  background-color: var(--val-theme-base);\n}\n.bg-border {\n  background-color: var(--val-theme-border);\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-yellow {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\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-2 {\n  padding: 8px;\n}\n.p-4 {\n  padding: 16px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-4 {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.px-\\[12px\\] {\n  padding-left: 12px;\n  padding-right: 12px;\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-4 {\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.py-\\[8px\\] {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-\\[16px\\] {\n  padding-bottom: 16px;\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.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-\\[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-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.text-base {\n  color: var(--val-theme-base);\n}\n.text-border {\n  color: var(--val-theme-border);\n}\n.text-fill {\n  color: var(--val-theme-fill);\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-75 {\n  opacity: 0.75;\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.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\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.transition-transform {\n  transition-property: transform;\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\\:border-highlight:hover {\n  border-color: var(--val-theme-highlight);\n}\n.hover\\:bg-base:hover {\n  background-color: var(--val-theme-base);\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-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\\: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.group:hover .group-hover\\:block {\n  display: block;\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\"] .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__ */ jsxRuntime.jsx("style", { children: styleCss });
 }

package/dist/valbuild-ui.esm.js

@@ -49191,25 +49191,25 @@ function toLexicalNode(node) {
 }
 function toLexicalHeadingNode(heading) {
   const node = LexicalRichText_1.$createHeadingNode(heading.tag);
-  node.setFormat(heading.format);
-  node.setIndent(heading.indent);
-  node.setDirection(heading.direction);
+  node.setFormat(heading.format || "");
+  node.setIndent(heading.indent || 0);
+  node.setDirection(heading.direction || "ltr");
   node.append(...heading.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalParagraphNode(paragraph) {
   const node = Lexical_1.$createParagraphNode();
-  node.setFormat(paragraph.format);
-  node.setIndent(paragraph.indent);
-  node.setDirection(paragraph.direction);
+  node.setFormat(paragraph.format || "");
+  node.setIndent(paragraph.indent || 0);
+  node.setDirection(paragraph.direction || "ltr");
   node.append(...paragraph.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalListItemNode(listItem) {
   const node = LexicalList_1.$createListItemNode();
-  node.setFormat(listItem.format);
-  node.setIndent(listItem.indent);
-  node.setDirection(listItem.direction);
+  node.setFormat(listItem.format || "");
+  node.setIndent(listItem.indent || 0);
+  node.setDirection(listItem.direction || "ltr");
   node.setValue(listItem.value);
   node.setChecked(listItem.checked);
   node.append(...listItem.children.map((child) => toLexicalNode(child)));
@@ -49217,9 +49217,9 @@ function toLexicalListItemNode(listItem) {
 }
 function toLexicalListNode(list) {
   const node = LexicalList_1.$createListNode(list.listType, list.start);
-  node.setFormat(list.format);
-  node.setIndent(list.indent);
-  node.setDirection(list.direction);
+  node.setFormat(list.format || "");
+  node.setIndent(list.indent || 0);
+  node.setDirection(list.direction || "ltr");
   node.append(...list.children.map((child) => toLexicalNode(child)));
   return node;
 }
@@ -49228,8 +49228,8 @@ function toLexicalTextNode(text) {
   node.setFormat(text.format);
   text.indent && node.setIndent(text.indent);
   text.direction && node.setDirection(text.direction);
-  node.setStyle(text.style);
-  node.setDetail(text.detail);
+  node.setStyle(text.style || "");
+  node.setDetail(text.detail || 0);
   return node;
 }
 const RichTextEditor = ({
@@ -49254,7 +49254,7 @@ const RichTextEditor = ({
         underline: "underline",
         italic: "italic",
         strikethrough: "line-through",
-        underlineStrikethrough: "underlined-line-through"
+        underlineStrikethrough: "underline line-through"
       },
       list: {
         listitem: "ml-[20px]",
@@ -49279,7 +49279,7 @@ const RichTextEditor = ({
       LexicalRichTextPlugin_1.RichTextPlugin,
       {
         contentEditable: /* @__PURE__ */ jsx(LexicalContentEditable, { className: "relative bg-fill flex flex-col h-full w-full min-h-[200px] text-primary outline-none" }),
-        placeholder: /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(58px+1rem)] left-4 text-base/25 ", children: "Enter some text..." }),
+        placeholder: /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(58px+1rem)] left-4 text-base/25 text-primary", children: "Enter some text..." }),
         ErrorBoundary: LexicalErrorBoundary_1
       }
     ),
@@ -50789,7 +50789,7 @@ function ValWindow({
   onClose,
   children
 }) {
-  const [draggedPosition, isInitialized, ref, onMouseDown] = useDrag({
+  const [draggedPosition, isInitialized, dragRef, onMouseDownDrag] = useDrag({
     position
   });
   useEffect(() => {
@@ -50803,26 +50803,30 @@ function ValWindow({
       document.removeEventListener("keyup", closeOnEscape);
     };
   }, []);
+  const [size, resizeRef, onMouseDownResize] = useResize();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classNames(
-        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 tablet:max-w-[50ch] max-w-full",
+        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
         {
           "opacity-0": !(isInitialized || isInitializedProp),
           "opacity-100": isInitialized || isInitializedProp
         }
       ),
+      ref: resizeRef,
       style: {
         left: draggedPosition.left,
-        top: draggedPosition.top
+        top: draggedPosition.top,
+        width: size == null ? void 0 : size.width,
+        height: size == null ? void 0 : size.height
       },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            ref,
-            className: "relative flex justify-center px-2 py-2 text-primary",
+            ref: dragRef,
+            className: "relative flex justify-center px-2 pt-2 text-primary pb-[16px]",
             children: [
               /* @__PURE__ */ jsx(
                 AlignJustify$1,
@@ -50832,7 +50836,7 @@ function ValWindow({
                   onMouseDown: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    onMouseDown();
+                    onMouseDownDrag();
                   }
                 }
               ),
@@ -50847,11 +50851,63 @@ function ValWindow({
             ]
           }
         ),
-        children
+        children,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute bottom-0 right-0 hidden ml-auto select-none tablet:block text-border cursor-nwse-resize",
+            style: {
+              height: 16,
+              width: 16
+            },
+            onMouseDown: onMouseDownResize,
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                height: "18",
+                viewBox: "0 0 18 18",
+                width: "18",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "m14.228 16.227a1 1 0 0 1 -.707-1.707l1-1a1 1 0 0 1 1.416 1.414l-1 1a1 1 0 0 1 -.707.293zm-5.638 0a1 1 0 0 1 -.707-1.707l6.638-6.638a1 1 0 0 1 1.416 1.414l-6.638 6.638a1 1 0 0 1 -.707.293zm-5.84 0a1 1 0 0 1 -.707-1.707l12.477-12.477a1 1 0 1 1 1.415 1.414l-12.478 12.477a1 1 0 0 1 -.707.293z",
+                    fill: "currentColor"
+                  }
+                )
+              }
+            )
+          }
+        )
       ]
     }
   );
 }
+function useResize() {
+  const ref = useRef(null);
+  const [size, setSize] = useState();
+  const handler = (mouseDownEvent) => {
+    var _a;
+    const startSize = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
+    const startPosition = { x: mouseDownEvent.pageX, y: mouseDownEvent.pageY };
+    function onMouseMove(mouseMoveEvent) {
+      if (startSize) {
+        const nextWidth = startSize.width - startPosition.x + mouseMoveEvent.pageX;
+        const nextHeight = startSize.height - startPosition.y + mouseMoveEvent.pageY;
+        setSize({
+          width: nextWidth,
+          height: nextHeight
+        });
+      }
+    }
+    function onMouseUp() {
+      document.body.removeEventListener("mousemove", onMouseMove);
+    }
+    document.body.addEventListener("mousemove", onMouseMove);
+    document.body.addEventListener("mouseup", onMouseUp, { once: true });
+  };
+  return [size, ref, handler];
+}
 function useDrag({
   position: initPosition
 }) {
@@ -50927,7 +50983,7 @@ function ValOverlay({
     editMode && valWindow && /* @__PURE__ */ jsx(ValWindow, { onClose: closeValWindow, position: valWindow.position, children: /* @__PURE__ */ jsx(Form, { onSubmit: valWindow.onSubmit, inputs: valWindow.inputs }) })
   ] });
 }
-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.inset-0 {\n  inset: 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-4 {\n  left: 16px;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.top-\\[calc\\(58px\\+1rem\\)\\] {\n  top: calc(58px + 1rem);\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.mb-4 {\n  margin-bottom: 16px;\n}\n.ml-2 {\n  margin-left: 8px;\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.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.hidden {\n  display: none;\n}\n.h-0 {\n  height: 0px;\n}\n.h-\\[100svh\\] {\n  height: 100svh;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[40px\\] {\n  height: 40px;\n}\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n.h-full {\n  height: 100%;\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-0 {\n  width: 0px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.max-w-full {\n  max-width: 100%;\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-\\[-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.-scale-x-100 {\n  --tw-scale-x: -1;\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-grab {\n  cursor: grab;\n}\n.cursor-pointer {\n  cursor: pointer;\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.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-center {\n  align-items: center;\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.overflow-scroll {\n  overflow: scroll;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\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-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.bg-base {\n  background-color: var(--val-theme-base);\n}\n.bg-border {\n  background-color: var(--val-theme-border);\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-yellow {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\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-2 {\n  padding: 8px;\n}\n.p-4 {\n  padding: 16px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-4 {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.px-\\[12px\\] {\n  padding-left: 12px;\n  padding-right: 12px;\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-4 {\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.py-\\[8px\\] {\n  padding-top: 8px;\n  padding-bottom: 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.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-\\[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-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.text-base {\n  color: var(--val-theme-base);\n}\n.text-fill {\n  color: var(--val-theme-fill);\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-75 {\n  opacity: 0.75;\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.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\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.transition-transform {\n  transition-property: transform;\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\\:border-highlight:hover {\n  border-color: var(--val-theme-highlight);\n}\n.hover\\:bg-base:hover {\n  background-color: var(--val-theme-base);\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-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\\: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.group:hover .group-hover\\:block {\n  display: block;\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\"] .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\\:w-auto {\n    width: auto;\n  }\n\n  .tablet\\:max-w-\\[50ch\\] {\n    max-width: 50ch;\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.inset-0 {\n  inset: 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-4 {\n  left: 16px;\n}\n.left-\\[50\\%\\] {\n  left: 50%;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.top-\\[50\\%\\] {\n  top: 50%;\n}\n.top-\\[calc\\(58px\\+1rem\\)\\] {\n  top: calc(58px + 1rem);\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.mb-4 {\n  margin-bottom: 16px;\n}\n.ml-2 {\n  margin-left: 8px;\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.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.hidden {\n  display: none;\n}\n.h-0 {\n  height: 0px;\n}\n.h-\\[100svh\\] {\n  height: 100svh;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[40px\\] {\n  height: 40px;\n}\n.h-fit {\n  height: -moz-fit-content;\n  height: fit-content;\n}\n.h-full {\n  height: 100%;\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-0 {\n  width: 0px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.min-w-\\[500px\\] {\n  min-width: 500px;\n}\n.max-w-\\[90vw\\] {\n  max-width: 90vw;\n}\n.max-w-full {\n  max-width: 100%;\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-\\[-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.-scale-x-100 {\n  --tw-scale-x: -1;\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-grab {\n  cursor: grab;\n}\n.cursor-nwse-resize {\n  cursor: nwse-resize;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.select-none {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: 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.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-center {\n  align-items: center;\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.overflow-scroll {\n  overflow: scroll;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\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-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.bg-base {\n  background-color: var(--val-theme-base);\n}\n.bg-border {\n  background-color: var(--val-theme-border);\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-yellow {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 0 / var(--tw-bg-opacity));\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-2 {\n  padding: 8px;\n}\n.p-4 {\n  padding: 16px;\n}\n.px-2 {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.px-4 {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.px-\\[12px\\] {\n  padding-left: 12px;\n  padding-right: 12px;\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-4 {\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n.py-\\[2px\\] {\n  padding-top: 2px;\n  padding-bottom: 2px;\n}\n.py-\\[8px\\] {\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-\\[16px\\] {\n  padding-bottom: 16px;\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.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-\\[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-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.font-\\[12px\\] {\n  font-weight: 12px;\n}\n.font-\\[500\\] {\n  font-weight: 500;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.tracking-\\[0\\.04em\\] {\n  letter-spacing: 0.04em;\n}\n.text-base {\n  color: var(--val-theme-base);\n}\n.text-border {\n  color: var(--val-theme-border);\n}\n.text-fill {\n  color: var(--val-theme-fill);\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-75 {\n  opacity: 0.75;\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.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\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.transition-transform {\n  transition-property: transform;\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\\:border-highlight:hover {\n  border-color: var(--val-theme-highlight);\n}\n.hover\\:bg-base:hover {\n  background-color: var(--val-theme-base);\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-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\\: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.group:hover .group-hover\\:block {\n  display: block;\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\"] .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.13.0",
+  "version": "0.13.4",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -65,27 +65,27 @@ function toLexicalNode(node: ValNode): LexicalNode {
 
 function toLexicalHeadingNode(heading: ValHeadingNode): LexicalNode {
   const node = $createHeadingNode(heading.tag);
-  node.setFormat(heading.format);
-  node.setIndent(heading.indent);
-  node.setDirection(heading.direction);
+  node.setFormat(heading.format || "");
+  node.setIndent(heading.indent || 0);
+  node.setDirection(heading.direction || "ltr");
   node.append(...heading.children.map((child) => toLexicalNode(child)));
   return node;
 }
 
 function toLexicalParagraphNode(paragraph: ValParagraphNode): LexicalNode {
   const node = $createParagraphNode();
-  node.setFormat(paragraph.format);
-  node.setIndent(paragraph.indent);
-  node.setDirection(paragraph.direction);
+  node.setFormat(paragraph.format || "");
+  node.setIndent(paragraph.indent || 0);
+  node.setDirection(paragraph.direction || "ltr");
   node.append(...paragraph.children.map((child) => toLexicalNode(child)));
   return node;
 }
 
 function toLexicalListItemNode(listItem: ValListItemNode): LexicalNode {
   const node = $createListItemNode();
-  node.setFormat(listItem.format);
-  node.setIndent(listItem.indent);
-  node.setDirection(listItem.direction);
+  node.setFormat(listItem.format || "");
+  node.setIndent(listItem.indent || 0);
+  node.setDirection(listItem.direction || "ltr");
   node.setValue(listItem.value);
   node.setChecked(listItem.checked);
   node.append(...listItem.children.map((child) => toLexicalNode(child)));
@@ -94,9 +94,9 @@ function toLexicalListItemNode(listItem: ValListItemNode): LexicalNode {
 
 function toLexicalListNode(list: ValListNode): LexicalNode {
   const node = $createListNode(list.listType, list.start);
-  node.setFormat(list.format);
-  node.setIndent(list.indent);
-  node.setDirection(list.direction);
+  node.setFormat(list.format || "");
+  node.setIndent(list.indent || 0);
+  node.setDirection(list.direction || "ltr");
   node.append(...list.children.map((child) => toLexicalNode(child)));
   return node;
 }
@@ -106,8 +106,8 @@ function toLexicalTextNode(text: ValTextNode): LexicalNode {
   node.setFormat(text.format as any); // TODO: why is text.format numbers when we are trying it out?
   text.indent && node.setIndent(text.indent);
   text.direction && node.setDirection(text.direction);
-  node.setStyle(text.style);
-  node.setDetail(text.detail);
+  node.setStyle(text.style || "");
+  node.setDetail(text.detail || 0);
   return node;
 }
 
@@ -133,7 +133,7 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
         underline: "underline",
         italic: "italic",
         strikethrough: "line-through",
-        underlineStrikethrough: "underlined-line-through",
+        underlineStrikethrough: "underline line-through",
       },
       list: {
         listitem: "ml-[20px]",
@@ -161,7 +161,7 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
             <LexicalContentEditable className="relative bg-fill flex flex-col h-full w-full min-h-[200px] text-primary outline-none" />
           }
           placeholder={
-            <div className="absolute top-[calc(58px+1rem)] left-4 text-base/25 ">
+            <div className="absolute top-[calc(58px+1rem)] left-4 text-base/25 text-primary">
               Enter some text...
             </div>
           }

package/src/components/ValWindow.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { RichText as RichTextType, SourcePath } from "@valbuild/core";
 import { RichTextEditor } from "../exports";
 import { FormContainer } from "./forms/FormContainer";
 import { ImageForm } from "./forms/ImageForm";
@@ -72,34 +73,37 @@ export const RichText: Story = {
         }}
       >
         <RichTextEditor
-          richtext={{
-            children: [
-              {
-                children: [
-                  {
-                    detail: 0,
-                    format: 0,
-                    mode: "normal",
-                    style: "",
-                    text: "Heading 1",
-                    type: "text",
-                    version: 1,
-                  },
-                ],
-                direction: "ltr",
-                format: "",
-                indent: 0,
-                type: "heading",
-                version: 1,
-                tag: "h1",
-              },
-            ],
-            direction: "ltr",
-            format: "",
-            indent: 0,
-            type: "root",
-            version: 1,
-          }}
+          richtext={
+            {
+              valPath: "/foo" as SourcePath,
+              children: [
+                {
+                  children: [
+                    {
+                      detail: 0,
+                      format: 0,
+                      mode: "normal",
+                      style: "",
+                      text: "Heading 1",
+                      type: "text",
+                      version: 1,
+                    },
+                  ],
+                  direction: "ltr",
+                  format: "",
+                  indent: 0,
+                  type: "heading",
+                  version: 1,
+                  tag: "h1",
+                },
+              ],
+              direction: "ltr",
+              format: "",
+              indent: 0,
+              type: "root",
+              version: 1,
+            } as RichTextType
+          }
         />
       </FormContainer>
     ),

package/src/components/ValWindow.tsx

@@ -15,7 +15,7 @@ export function ValWindow({
   onClose,
   children,
 }: ValWindowProps): React.ReactElement {
-  const [draggedPosition, isInitialized, ref, onMouseDown] = useDrag({
+  const [draggedPosition, isInitialized, dragRef, onMouseDownDrag] = useDrag({
     position,
   });
   useEffect(() => {
@@ -29,23 +29,29 @@ export function ValWindow({
       document.removeEventListener("keyup", closeOnEscape);
     };
   }, []);
+
+  //
+  const [size, resizeRef, onMouseDownResize] = useResize();
   return (
     <div
       className={classNames(
-        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 tablet:max-w-[50ch] max-w-full",
+        "absolute h-[100svh] w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
         {
           "opacity-0": !(isInitialized || isInitializedProp),
           "opacity-100": isInitialized || isInitializedProp,
         }
       )}
+      ref={resizeRef}
       style={{
         left: draggedPosition.left,
         top: draggedPosition.top,
+        width: size?.width,
+        height: size?.height,
       }}
     >
       <div
-        ref={ref}
-        className="relative flex justify-center px-2 py-2 text-primary"
+        ref={dragRef}
+        className="relative flex justify-center px-2 pt-2 text-primary pb-[16px]"
       >
         <AlignJustify
           size={16}
@@ -53,7 +59,7 @@ export function ValWindow({
           onMouseDown={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            onMouseDown();
+            onMouseDownDrag();
           }}
         />
         <button
@@ -64,10 +70,59 @@ export function ValWindow({
         </button>
       </div>
       {children}
+      <div
+        className="absolute bottom-0 right-0 hidden ml-auto select-none tablet:block text-border cursor-nwse-resize"
+        style={{
+          height: 16,
+          width: 16,
+        }}
+        onMouseDown={onMouseDownResize}
+      >
+        <svg
+          height="18"
+          viewBox="0 0 18 18"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m14.228 16.227a1 1 0 0 1 -.707-1.707l1-1a1 1 0 0 1 1.416 1.414l-1 1a1 1 0 0 1 -.707.293zm-5.638 0a1 1 0 0 1 -.707-1.707l6.638-6.638a1 1 0 0 1 1.416 1.414l-6.638 6.638a1 1 0 0 1 -.707.293zm-5.84 0a1 1 0 0 1 -.707-1.707l12.477-12.477a1 1 0 1 1 1.415 1.414l-12.478 12.477a1 1 0 0 1 -.707.293z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
     </div>
   );
 }
 
+function useResize() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<{ height: number; width: number }>();
+
+  const handler = (mouseDownEvent: React.MouseEvent) => {
+    const startSize = ref.current?.getBoundingClientRect();
+
+    const startPosition = { x: mouseDownEvent.pageX, y: mouseDownEvent.pageY };
+    function onMouseMove(mouseMoveEvent: MouseEvent) {
+      if (startSize) {
+        const nextWidth =
+          startSize.width - startPosition.x + mouseMoveEvent.pageX;
+        const nextHeight =
+          startSize.height - startPosition.y + mouseMoveEvent.pageY;
+        setSize({
+          width: nextWidth,
+          height: nextHeight,
+        });
+      }
+    }
+    function onMouseUp() {
+      document.body.removeEventListener("mousemove", onMouseMove);
+    }
+    document.body.addEventListener("mousemove", onMouseMove);
+    document.body.addEventListener("mouseup", onMouseUp, { once: true });
+  };
+  return [size, ref, handler] as const;
+}
+
 function useDrag({
   position: initPosition,
 }: {

package/src/stories/RichTextEditor.stories.tsx

@@ -3,6 +3,7 @@ import {
   RichTextEditorProps,
 } from "../components/RichTextEditor/RichTextEditor";
 import { Meta, Story } from "@storybook/react";
+import { RichText, SourcePath } from "@valbuild/core";
 
 export default {
   title: "RichTextEditor",
@@ -17,6 +18,7 @@ export const DropdownStory = Template.bind({});
 
 DropdownStory.args = {
   richtext: {
+    valPath: "/test" as SourcePath,
     children: [
       {
         children: [
@@ -310,5 +312,5 @@ DropdownStory.args = {
     indent: 0,
     type: "root",
     version: 1,
-  },
+  } as RichText,
 };