@valbuild/ui 0.12.0 → 0.13.3

package/dist/valbuild-ui.cjs.js

@@ -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

@@ -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.12.0",
+  "version": "0.13.3",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/assets/icons/Bold.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+
+const Bold: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+      <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+    </svg>
+  );
+};
+
+export default Bold;

package/src/assets/icons/Chevron.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+
+const Chevron: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 12 12"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.70733 1.00015L8.7784 6.07121L8.07129 6.77832L3.00022 1.70725L3.70733 1.00015Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.00015 10.4709L8.07121 5.39983L8.77832 6.10693L3.70725 11.178L3.00015 10.4709Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Chevron;

package/src/assets/icons/FontColor.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+
+const FontColor: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <g>
+        <path d="M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z" />
+        <path
+          d="M6.4,16.7C6.4,16.7,6.4,16.7,6.4,16.7l7,7c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l6.9-6.9c0,0,0,0,0,0l1.5-1.5
+		c0.4-0.4,0.4-1,0-1.4l-8.9-9c0,0,0,0,0,0l-2.5-2.5c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.8,1.8l-7.7,7.7c-0.4,0.4-0.4,1,0,1.4
+		L6.4,16.7z M13.6,7L14,7.5c0,0,0,0,0,0l7,7L20.6,15H7.5l-1-1L13.6,7z"
+        />
+        <path d="M25,24c1.7,0,3-1.3,3-3c0-1.4-1.8-3.2-2.3-3.7c-0.4-0.4-1-0.4-1.4,0C23.8,17.8,22,19.6,22,21C22,22.7,23.3,24,25,24z" />
+      </g>
+    </svg>
+  );
+};
+
+export default FontColor;

package/src/assets/icons/ImageIcon.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+
+const ImageIcon: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      className={className}
+      width={25}
+      height={25}
+      strokeWidth="4"
+    >
+      <g>
+        <path d="M25,2H7A5,5,0,0,0,2,7V25a5,5,0,0,0,5,5H25a5,5,0,0,0,5-5V7A5,5,0,0,0,25,2ZM7,4H25a3,3,0,0,1,3,3v5.59l-1.88-1.88a3,3,0,0,0-4.24,0l-7.95,8-3-2.42a3,3,0,0,0-3.8,0L4,18.86V7A3,3,0,0,1,7,4ZM25,28H7a3,3,0,0,1-3-3V21.47l4.38-3.66a1,1,0,0,1,1.27,0l3.73,3a1,1,0,0,0,1.33-.07l8.58-8.59a1,1,0,0,1,1.42,0L28,15.41V25A3,3,0,0,1,25,28Z" />
+        <path d="M10,13a3,3,0,1,0-3-3A3,3,0,0,0,10,13Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,10,9Z" />
+      </g>
+    </svg>
+  );
+};
+
+export default ImageIcon;

package/src/assets/icons/Italic.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+
+const Italic: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      width={25}
+      height={25}
+    >
+      <line x1="19" y1="4" x2="10" y2="4"></line>
+      <line x1="14" y1="20" x2="5" y2="20"></line>
+      <line x1="15" y1="4" x2="9" y2="20"></line>
+    </svg>
+  );
+};
+
+export default Italic;