npm - @noya-app/noya-designsystem - Versions diffs - 0.1.36 → 0.1.38 - Mend

@noya-app/noya-designsystem 0.1.36 → 0.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/.turbo/turbo-build.log +10 -10
package/CHANGELOG.md +12 -0
package/dist/index.css +1 -1
package/dist/index.d.mts +358 -33
package/dist/index.d.ts +358 -33
package/dist/index.js +1227 -854
package/dist/index.js.map +1 -1
package/dist/index.mjs +1010 -626
package/dist/index.mjs.map +1 -1
package/package.json +1 -1
package/src/components/Button.tsx +1 -1
package/src/components/Checkbox.tsx +78 -0
package/src/components/Chip.tsx +15 -8
package/src/components/DraggableMenuButton.tsx +3 -2
package/src/components/FillPreviewBackground.tsx +10 -9
package/src/components/FloatingWindow.tsx +5 -6
package/src/components/IconButton.tsx +5 -1
package/src/components/InputField.tsx +95 -68
package/src/components/InspectorContainer.tsx +2 -2
package/src/components/InspectorPrimitives.tsx +19 -9
package/src/components/Label.tsx +16 -29
package/src/components/ListView.tsx +19 -32
package/src/components/RadioGroup.tsx +1 -1
package/src/components/SelectMenu.tsx +41 -35
package/src/components/Switch.tsx +5 -2
package/src/components/Text.tsx +20 -7
package/src/components/TextArea.tsx +1 -1
package/src/components/Tooltip.tsx +1 -1
package/src/components/WorkspaceLayout.tsx +4 -3
package/src/components/internal/TextInput.tsx +1 -0
package/src/index.css +12 -2
package/src/index.tsx +1 -1
package/src/theme/index.ts +6 -3
package/src/theme/themeUtils.ts +72 -0
package/src/utils/tailwind.ts +4 -12
package/src/utils/withSeparatorElements.ts +29 -3
package/tailwind.config.ts +19 -5
package/tsconfig.json +1 -1

package/dist/index.mjs CHANGED Viewed

@@ -473,7 +473,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment2 = REACT_FRAGMENT_TYPE;
+        var Fragment3 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal6 = REACT_PORTAL_TYPE;
@@ -532,7 +532,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment2;
+        exports.Fragment = Fragment3;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal6;
@@ -1389,12 +1389,12 @@ import React, { memo } from "react";
 // ../../node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR = "-";
-var createClassGroupUtils = (config) => {
-  const classMap = createClassMap(config);
+var createClassGroupUtils = (config2) => {
+  const classMap = createClassMap(config2);
   const {
     conflictingClassGroups,
     conflictingClassGroupModifiers
-  } = config;
+  } = config2;
   const getClassGroupId = (className) => {
     const classParts = className.split(CLASS_PART_SEPARATOR);
     if (classParts[0] === "" && classParts.length !== 1) {
@@ -1442,22 +1442,22 @@ var getGroupIdForArbitraryProperty = (className) => {
     }
   }
 };
-var createClassMap = (config) => {
+var createClassMap = (config2) => {
   const {
-    theme: theme2,
+    theme,
     prefix
-  } = config;
+  } = config2;
   const classMap = {
     nextPart: /* @__PURE__ */ new Map(),
     validators: []
   };
-  const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
+  const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config2.classGroups), prefix);
   prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
-    processClassesRecursively(classGroup, classMap, classGroupId, theme2);
+    processClassesRecursively(classGroup, classMap, classGroupId, theme);
   });
   return classMap;
 };
-var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme2) => {
+var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
   classGroup.forEach((classDefinition) => {
     if (typeof classDefinition === "string") {
       const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
@@ -1466,7 +1466,7 @@ var processClassesRecursively = (classGroup, classPartObject, classGroupId, them
     }
     if (typeof classDefinition === "function") {
       if (isThemeGetter(classDefinition)) {
-        processClassesRecursively(classDefinition(theme2), classPartObject, classGroupId, theme2);
+        processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
         return;
       }
       classPartObject.validators.push({
@@ -1476,7 +1476,7 @@ var processClassesRecursively = (classGroup, classPartObject, classGroupId, them
       return;
     }
     Object.entries(classDefinition).forEach(([key, classGroup2]) => {
-      processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme2);
+      processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
     });
   });
 };
@@ -1552,11 +1552,11 @@ var createLruCache = (maxCacheSize) => {
   };
 };
 var IMPORTANT_MODIFIER = "!";
-var createParseClassName = (config) => {
+var createParseClassName = (config2) => {
   const {
     separator,
     experimentalParseClassName
-  } = config;
+  } = config2;
   const isSeparatorSingleCharacter = separator.length === 1;
   const firstSeparatorCharacter = separator[0];
   const separatorLength = separator.length;
@@ -1621,10 +1621,10 @@ var sortModifiers = (modifiers) => {
   sortedModifiers.push(...unsortedModifiers.sort());
   return sortedModifiers;
 };
-var createConfigUtils = (config) => ({
-  cache: createLruCache(config.cacheSize),
-  parseClassName: createParseClassName(config),
-  ...createClassGroupUtils(config)
+var createConfigUtils = (config2) => ({
+  cache: createLruCache(config2.cacheSize),
+  parseClassName: createParseClassName(config2),
+  ...createClassGroupUtils(config2)
 });
 var SPLIT_CLASSES_REGEX = /\s+/;
 var mergeClassList = (classList, configUtils) => {
@@ -1711,8 +1711,8 @@ function createTailwindMerge(createConfigFirst, ...createConfigRest) {
   let cacheSet;
   let functionToCall = initTailwindMerge;
   function initTailwindMerge(classList) {
-    const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
-    configUtils = createConfigUtils(config);
+    const config2 = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
+    configUtils = createConfigUtils(config2);
     cacheGet = configUtils.cache.get;
     cacheSet = configUtils.cache.set;
     functionToCall = tailwindMerge;
@@ -1732,7 +1732,7 @@ function createTailwindMerge(createConfigFirst, ...createConfigRest) {
   };
 }
 var fromTheme = (key) => {
-  const themeGetter = (theme2) => theme2[key] || [];
+  const themeGetter = (theme) => theme[key] || [];
   themeGetter.isThemeGetter = true;
   return themeGetter;
 };
@@ -3849,9 +3849,6 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 // src/utils/tailwind.ts
 var cn = (...classes) => twMerge(classes.filter(Boolean));
-function camelCaseToKebabCase(string) {
-  return string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
 // src/components/ActivityIndicator.tsx
 var ActivityIndicator = memo(function ActivityIndicator2({
@@ -3952,6 +3949,30 @@ import React4, { memo as memo2 } from "react";
 // src/components/Text.tsx
 import React3, { forwardRef as forwardRef2 } from "react";
+// src/theme/themeUtils.ts
+function camelToKebabCase(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function kebabToCamelCase(str) {
+  return str.replace(
+    /-([a-z])/g,
+    (_, letter) => letter.toUpperCase()
+  );
+}
+function convertKebabToCamelCase(obj) {
+  if (Array.isArray(obj) || obj instanceof Set || obj instanceof Map) {
+    return obj;
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(obj)) {
+    const camelKey = kebabToCamelCase(key);
+    result[camelKey] = value && typeof value === "object" && !Array.isArray(value) && !(value instanceof Set) && !(value instanceof Map) ? convertKebabToCamelCase(value) : value;
+  }
+  return result;
+}
+// src/components/Text.tsx
 var elements = {
   title: "h1",
   subtitle: "h1",
@@ -3998,7 +4019,7 @@ var Text = forwardRef2(function Text2({
     Component3,
     {
       ref: forwardedRef,
-      className: `${textStyles[variant]} text-${camelCaseToKebabCase(String(color)) ?? "text"} ${className ?? ""}`,
+      className: `${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} ${className ?? ""}`,
       style: style5,
       tabIndex,
       onClick,
@@ -4049,7 +4070,7 @@ var Tooltip = memo2(function Tooltip2({ children: children2, content }) {
       align: "center",
       sideOffset: 2,
       collisionPadding: 8,
-      className: `${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_var(--shadow-color)_0_0_12px_var(--shadow-color)] border border-solid border-divider-strong`
+      className: `${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2)_0_0_12px_rgba(0,0,0,0.1)] border border-solid border-divider-strong`
     },
     content
   ))));
@@ -4094,7 +4115,7 @@ var Button = forwardRef3(function Button2({
     {
       ref: forwardedRef,
       id,
-      className: `no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:z-10 focus:shadow-[0_0_0_1px_var(--popover-background)_inset] ${disabled ? "opacity-25" : ""} ${!className?.includes("flex") ? "flex-none" : ""} ${active ? "bg-primary text-white hover:bg-primary-light active:bg-primary" : variantStyles[variant]} ${sizeStyles[variant === "thin" ? "thin" : variant === "floating" && size3 !== "small" ? "floating" : variant === "none" ? "none" : size3]} ${className ?? ""}`,
+      className: `no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--popover-background)_inset] ${disabled ? "opacity-25" : ""} ${!className?.includes("flex") ? "flex-none" : ""} ${active ? "bg-primary text-white hover:bg-primary-light active:bg-primary" : variantStyles[variant]} ${sizeStyles[variant === "thin" ? "thin" : variant === "floating" && size3 !== "small" ? "floating" : variant === "none" ? "none" : size3]} ${className ?? ""}`,
       style: style5,
       tabIndex,
       disabled,
@@ -4116,12 +4137,90 @@ var Button = forwardRef3(function Button2({
   return tooltip ? /* @__PURE__ */ React5.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
 });
+// src/components/Checkbox.tsx
+import React6, { forwardRef as forwardRef4, memo as memo3 } from "react";
+var colorSchemeStyles = {
+  normal: "text-text-subtle",
+  primary: "text-primary",
+  secondary: "text-secondary"
+};
+var Checkbox = memo3(
+  forwardRef4(function Checkbox2({ className, colorScheme = "secondary", ...props }, ref) {
+    return /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: `relative inline-flex w-[19px] h-[19px] ${colorSchemeStyles[colorScheme]} ${className ?? ""}`
+      },
+      /* @__PURE__ */ React6.createElement(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          className: `
+            w-full
+            h-full
+            peer
+            appearance-none
+            rounded
+            bg-input-background
+            transition-colors
+            border
+            border-input-border
+            disabled:opacity-50
+            disabled:cursor-not-allowed
+            focus:ring-2
+            focus:ring-primary
+            focus:ring-offset-1
+            focus:z-interactable
+          `,
+          style: {
+            width: "27px",
+            ...props.style
+          },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ React6.createElement(
+        "svg",
+        {
+          className: `
+            absolute
+            inset-0
+            h-[27px]
+            w-[27px]
+            pointer-events-none
+            stroke-white
+            opacity-0
+            peer-checked:opacity-100
+            z-label
+          `,
+          style: {
+            strokeWidth: "1.3"
+          },
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        /* @__PURE__ */ React6.createElement(
+          "path",
+          {
+            d: "M3 6L4.5 7.5L8 4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            stroke: "currentColor"
+          }
+        )
+      )
+    );
+  })
+);
 // src/components/Chip.tsx
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React7, { forwardRef as forwardRef4, memo as memo3 } from "react";
+import React8, { forwardRef as forwardRef5, memo as memo4 } from "react";
 // src/hooks/useHover.ts
-import * as React6 from "react";
+import * as React7 from "react";
 var globalIgnoreEmulatedMouseEvents = false;
 var hoverCount = 0;
 function setGlobalIgnoreEmulatedMouseEvents() {
@@ -4151,13 +4250,13 @@ function setupGlobalTouchEvents() {
 }
 function useHover(props = {}) {
   const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
-  const [isHovered, setHovered] = React6.useState(false);
-  const state = React6.useRef({
+  const [isHovered, setHovered] = React7.useState(false);
+  const state = React7.useRef({
     isHovered: false,
     ignoreEmulatedMouseEvents: false
   }).current;
-  React6.useEffect(setupGlobalTouchEvents, []);
-  const hoverProps = React6.useMemo(
+  React7.useEffect(setupGlobalTouchEvents, []);
+  const hoverProps = React7.useMemo(
     function getHoverProps() {
       function triggerHoverStart(event, pointerType) {
         if (isDisabled || pointerType === "touch" || state.isHovered) {
@@ -4216,6 +4315,244 @@ function useHover(props = {}) {
   };
 }
+// tailwind.config.ts
+var config = {
+  content: ["./src/**/*.{ts,tsx}"],
+  corePlugins: {
+    // disables @tailwind base global styles
+    preflight: false
+  },
+  theme: {
+    extend: {
+      colors: {
+        "logo-fill": "var(--logo-fill)",
+        "logo-highlight": "var(--logo-highlight)",
+        background: "var(--background)",
+        text: "var(--text)",
+        "text-muted": "var(--text-muted)",
+        "text-subtle": "var(--text-subtle)",
+        "text-disabled": "var(--text-disabled)",
+        "text-decorative-light": "var(--text-decorative-light)",
+        "divider-subtle": "var(--divider-subtle)",
+        divider: "var(--divider)",
+        "divider-strong": "var(--divider-strong)",
+        primary: "var(--primary)",
+        "primary-light": "var(--primary-light)",
+        "primary-pastel": "var(--primary-pastel)",
+        secondary: "var(--secondary)",
+        "secondary-light": "var(--secondary-light)",
+        "secondary-pastel": "var(--secondary-pastel)",
+        "secondary-bright": "var(--secondary-bright)",
+        "input-background": "var(--input-background)",
+        "input-background-light": "var(--input-background-light)",
+        "code-background": "var(--code-background)",
+        "code-background-dark": "var(--code-background-dark)",
+        "selected-background": "var(--selected-background)",
+        "breadcrumb-text": "var(--breadcrumb-text)",
+        "breadcrumb-text-hover": "var(--breadcrumb-text-hover)",
+        "breadcrumb-icon": "var(--breadcrumb-icon)",
+        "canvas-background": "var(--canvas-background)",
+        "canvas-grid": "var(--canvas-grid)",
+        "sidebar-background": "var(--sidebar-background)",
+        "sidebar-background-transparent": "var(--sidebar-background-transparent)",
+        "popover-background": "var(--popover-background)",
+        "popover-divider": "var(--popover-divider)",
+        "listview-raised-background": "var(--listview-raised-background)",
+        "listview-editing-background": "var(--listview-editing-background)",
+        "slider-background": "var(--slider-background)",
+        "slider-border": "var(--slider-border)",
+        "radio-group-background": "var(--radio-group-background)",
+        mask: "var(--mask)",
+        "transparent-checker": "var(--transparent-checker)",
+        scrollbar: "var(--scrollbar)",
+        "placeholder-dots": "var(--placeholder-dots)",
+        "drag-outline": "var(--drag-outline)",
+        "active-background": "var(--active-background)",
+        "thumbnail-background": "var(--thumbnail-background)",
+        "thumbnail-shadow": "var(--thumbnail-shadow)",
+        "inline-code-text": "var(--inline-code-text)",
+        "inline-code-background": "var(--inline-code-background)",
+        "text-link": "var(--text-link)",
+        "text-link-focused": "var(--text-link-focused)",
+        icon: "var(--icon)",
+        "icon-selected": "var(--icon-selected)",
+        warning: "var(--warning)",
+        "radio-group-item": "var(--radio-group-item)",
+        dot: "var(--dot)",
+        "row-highlight": "var(--row-highlight)",
+        "table-row-background": "var(--table-row-background)",
+        "chip-primary-bg": "var(--chip-primary-bg)",
+        "chip-secondary-bg": "var(--chip-secondary-bg)",
+        "chip-error-bg": "var(--chip-error-bg)",
+        "chip-default-bg": "var(--chip-default-bg)",
+        "chip-primary-shadow": "var(--chip-primary-shadow)",
+        "chip-secondary-shadow": "var(--chip-secondary-shadow)",
+        "chip-error-shadow": "var(--chip-error-shadow)",
+        "chip-default-shadow": "var(--chip-default-shadow)"
+      },
+      fontFamily: {
+        sans: [
+          "__Inter_6b0edc",
+          "__Inter_Fallback_6b0edc",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Helvetica Neue",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "sans-serif"
+        ],
+        mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"]
+      },
+      // Type scale
+      // The last one, 0.85, I just eyeballed
+      // old:  typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
+      fontSize: {
+        title: [
+          "3.052rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.05em"
+          }
+        ],
+        subtitle: [
+          "1.563rem",
+          {
+            lineHeight: "1.75",
+            letterSpacing: "-0.05em"
+          }
+        ],
+        heading1: [
+          "1.953rem",
+          {
+            lineHeight: "1.6",
+            letterSpacing: "-0.025em"
+          }
+        ],
+        heading2: [
+          "1.563rem",
+          {
+            lineHeight: "1.5",
+            letterSpacing: "-0.025em"
+          }
+        ],
+        heading3: [
+          "1.25rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.025em"
+          }
+        ],
+        heading4: [
+          "1rem",
+          {
+            lineHeight: "1.4"
+          }
+        ],
+        heading5: [
+          "0.85rem",
+          {
+            lineHeight: "1.4"
+          }
+        ],
+        body: [
+          "1",
+          {
+            lineHeight: "1.4"
+          }
+        ],
+        small: [
+          "1",
+          {
+            lineHeight: "19px"
+          }
+        ],
+        code: [
+          "90%",
+          {
+            lineHeight: "1.5"
+          }
+        ],
+        button: [
+          "0.8rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.2px"
+          }
+        ],
+        label: [
+          "0.62rem",
+          {
+            lineHeight: "19px",
+            letterSpacing: "-0.3px"
+          }
+        ]
+      },
+      spacing: {
+        nano: "2px",
+        micro: "4px",
+        small: "8px",
+        medium: "16px",
+        large: "32px",
+        xlarge: "64px",
+        xxlarge: "128px",
+        "inset-top": "var(--inset-top)",
+        "sidebar-width": "var(--sidebar-width)",
+        "toolbar-height": "var(--toolbar-height)",
+        "toolbar-separator": "var(--toolbar-separator)",
+        "inspector-h-separator": "var(--inspector-h-separator)",
+        "inspector-v-separator": "var(--inspector-v-separator)",
+        "dialog-padding": "var(--dialog-padding)"
+      },
+      keyframes: {
+        spin: {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" }
+        },
+        shimmer: {
+          "0%": {
+            backgroundPosition: "-200% 0"
+          },
+          "100%": {
+            backgroundPosition: "200% 0"
+          }
+        }
+      },
+      animation: {
+        spin: "spin 1s linear infinite",
+        shimmer: "shimmer 6s infinite linear"
+      },
+      zIndex: {
+        interactable: "var(--interactable-z-index)",
+        label: "var(--label-z-index)"
+      }
+    }
+  },
+  safelist: [
+    "group",
+    "group-hover:flex",
+    "bg-row-highlight",
+    "left-5",
+    "right-6",
+    "m-[0_-24px_0_-20px]",
+    "p-[0_24px_0_20px]",
+    "left-0",
+    "border-divider-strong",
+    "decoration-text-decorative-light",
+    "underline",
+    "-left-2.5",
+    "-mr-2",
+    "border-gray-200",
+    "gap-1.5",
+    "gap-toolbar-separator"
+  ]
+};
+var tailwind_config_default = config;
+// src/theme/index.ts
+var cssVars = convertKebabToCamelCase(tailwind_config_default.theme.extend);
 // src/components/Chip.tsx
 function getChipStyles({
   $colorScheme,
@@ -4236,27 +4573,33 @@ function getChipStyles({
     small: "text-[9px] p-[0px_4px]"
   }[$size];
   const fontStyles = $monospace ? "font-mono" : "";
+  const shadowStyles = {
+    primary: "shadow-[0_0_0_1px_var(--chip-primary-shadow)_inset]",
+    secondary: "shadow-[0_0_0_1px_var(--chip-secondary-shadow)_inset]",
+    error: "shadow-[0_0_0_1px_var(--chip-error-shadow)_inset]",
+    default: "shadow-[0_0_0_1px_var(--chip-default-shadow)_inset]"
+  };
   const variantStyles2 = (() => {
     const colors = {
       primary: {
         text: "text-primary",
         bg: "bg-primary-pastel",
-        subtle: "bg-[rgba(238,229,255,0.2)]"
+        subtle: "bg-[var(--chip-primary-bg)]"
       },
       secondary: {
         text: "text-secondary",
         bg: "bg-secondary-pastel",
-        subtle: "bg-[rgba(205,238,231,0.2)]"
+        subtle: "bg-[var(--chip-secondary-bg)]"
       },
       error: {
         text: "text-text",
         bg: "bg-[rgb(255,219,219)]",
-        subtle: "bg-[rgba(255,219,219,0.2)]"
+        subtle: "bg-[var(--chip-error-bg)]"
       },
       default: {
         text: "text-text",
         bg: "bg-input-background",
-        subtle: "bg-[rgba(0,0,0,0.1)]"
+        subtle: "bg-[var(--chip-default-bg)]"
       }
     }[$colorScheme ?? "default"];
     if ($variant === "solid") {
@@ -4265,7 +4608,7 @@ function getChipStyles({
     if ($variant === "outlined") {
       return `
         ${colors.text} bg-transparent
-        shadow-[0_0_0_1px_${colors.subtle.slice(3, -1)}_inset]
+        ${shadowStyles[$colorScheme ?? "default"]}
         hover:${colors.subtle} hover:shadow-none
       `;
     }
@@ -4295,8 +4638,8 @@ function getIconStyles(size3, isAdd) {
     scale-60
   `;
 }
-var Chip = memo3(
-  forwardRef4(function Chip2({
+var Chip = memo4(
+  forwardRef5(function Chip2({
     colorScheme,
     children: children2,
     deletable,
@@ -4318,8 +4661,8 @@ var Chip = memo3(
       onHoverChange: onHoverDeleteChange
     });
     const handleClick = !children2 && !deletable && addable ? onAdd : onClick;
-    const color = colorScheme === "primary" ? "var(--primary)" : colorScheme === "secondary" ? "var(--secondary)" : "var(--text)";
-    return /* @__PURE__ */ React7.createElement(
+    const color = colorScheme === "primary" ? cssVars.colors.primary : colorScheme === "secondary" ? cssVars.colors.secondary : cssVars.colors.text;
+    return /* @__PURE__ */ React8.createElement(
       "span",
       {
         ref: forwardedRef,
@@ -4338,7 +4681,7 @@ var Chip = memo3(
         tabIndex,
         ...rest
       },
-      addable && /* @__PURE__ */ React7.createElement(
+      addable && /* @__PURE__ */ React8.createElement(
         PlusIcon,
         {
           className: getIconStyles(size3, true),
@@ -4350,7 +4693,7 @@ var Chip = memo3(
         }
       ),
       children2,
-      deletable && /* @__PURE__ */ React7.createElement(
+      deletable && /* @__PURE__ */ React8.createElement(
         Cross1Icon,
         {
           className: getIconStyles(size3, false),
@@ -4370,31 +4713,31 @@ var Chip = memo3(
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import React24, { memo as memo11, useCallback as useCallback13, useMemo as useMemo11 } from "react";
+import React25, { memo as memo12, useCallback as useCallback13, useMemo as useMemo11 } from "react";
 // src/components/Icons.tsx
 import * as Icons from "@noya-app/noya-icons";
-import React8 from "react";
+import React9 from "react";
 function renderIcon(iconName) {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName];
-    return /* @__PURE__ */ React8.createElement(Icon, null);
+    return /* @__PURE__ */ React9.createElement(Icon, null);
   }
   return iconName;
 }
 // src/components/Spacer.tsx
-import React9, { forwardRef as forwardRef5 } from "react";
-var SpacerVertical = forwardRef5(
+import React10, { forwardRef as forwardRef6 } from "react";
+var SpacerVertical = forwardRef6(
   ({ size: size3, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React9.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
+    return /* @__PURE__ */ React10.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
       minHeight: `${size3}px`
     } : void 0, ...props, ref });
   }
 );
-var SpacerHorizontal = forwardRef5(
+var SpacerHorizontal = forwardRef6(
   ({ size: size3, inline, ...props }, ref) => {
-    return /* @__PURE__ */ React9.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
+    return /* @__PURE__ */ React10.createElement("span", { className: `${inline ? "inline-block" : "block"} ${size3 === void 0 ? "flex flex-1" : ""}`, style: size3 ? {
       minWidth: `${size3}px`
     } : void 0, ...props, ref });
   }
@@ -4407,13 +4750,13 @@ var Spacer;
 // src/components/internal/Menu.tsx
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React23, { memo as memo10 } from "react";
+import React24, { memo as memo11 } from "react";
 // src/contexts/DesignSystemConfiguration.tsx
 import { getCurrentPlatform } from "@noya-app/noya-keymap";
-import React22, {
+import React23, {
   createContext as createContext5,
-  memo as memo9,
+  memo as memo10,
   useContext as useContext5,
   useEffect as useEffect12,
   useMemo as useMemo10,
@@ -4422,16 +4765,16 @@ import React22, {
 // src/components/Toast.tsx
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React11 from "react";
+import React12 from "react";
 // src/components/IconButton.tsx
-import React10, {
-  forwardRef as forwardRef6,
-  memo as memo4,
+import React11, {
+  forwardRef as forwardRef7,
+  memo as memo5,
   useMemo as useMemo2
 } from "react";
-var IconButton = memo4(
-  forwardRef6(function IconButton2({ selected, iconName, color, size: size3, contentStyle, ...props }, forwardedRef) {
+var IconButton = memo5(
+  forwardRef7(function IconButton2({ selected, iconName, color, size: size3, contentStyle, ...props }, forwardedRef) {
     const Icon = Icons[iconName];
     const style5 = useMemo2(() => {
       return {
@@ -4440,10 +4783,10 @@ var IconButton = memo4(
         ...contentStyle
       };
     }, [contentStyle, size3]);
-    return /* @__PURE__ */ React10.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style5 }, /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React11.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style5 }, /* @__PURE__ */ React11.createElement(
       Icon,
       {
-        color: color ?? (selected ? "var(--icon-selected)" : "var(--icon)"),
+        color: color ?? (selected ? cssVars.colors.iconSelected : cssVars.colors.icon),
         ...size3 && { width: size3, height: size3 }
       }
     ));
@@ -4457,22 +4800,22 @@ var Toast = ({
   children: children2,
   ...props
 }) => {
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     ToastPrimitive.Root,
     {
       className: "px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] text-text-muted",
       ...props
     },
-    title && /* @__PURE__ */ React11.createElement(ToastPrimitive.Title, { className: `mb-[5px] ${textStyles.label} font-bold text-text` }, title),
-    /* @__PURE__ */ React11.createElement(ToastPrimitive.Description, { className: `${textStyles.small} text-text-muted` }, content),
-    children2 && /* @__PURE__ */ React11.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children2),
-    /* @__PURE__ */ React11.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React11.createElement(IconButton, { iconName: "Cross1Icon" }))
+    title && /* @__PURE__ */ React12.createElement(ToastPrimitive.Title, { className: `mb-[5px] ${textStyles.label} font-bold text-text` }, title),
+    /* @__PURE__ */ React12.createElement(ToastPrimitive.Description, { className: `${textStyles.small} text-text-muted` }, content),
+    children2 && /* @__PURE__ */ React12.createElement(ToastPrimitive.Action, { asChild: true, altText: "" }, children2),
+    /* @__PURE__ */ React12.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React12.createElement(IconButton, { iconName: "Cross1Icon" }))
   );
 };
-var ToastProvider = ({ children: children2 }) => /* @__PURE__ */ React11.createElement(ToastPrimitive.Provider, null, children2, /* @__PURE__ */ React11.createElement(ToastPrimitive.Viewport, { className: "fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" }));
+var ToastProvider = ({ children: children2 }) => /* @__PURE__ */ React12.createElement(ToastPrimitive.Provider, null, children2, /* @__PURE__ */ React12.createElement(ToastPrimitive.Viewport, { className: "fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" }));
 // src/contexts/DialogContext.tsx
-import React20, {
+import React21, {
   createContext as createContext3,
   useCallback as useCallback12,
   useContext as useContext3,
@@ -4483,12 +4826,12 @@ import React20, {
 // src/components/Dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React12, {
-  forwardRef as forwardRef7,
+import React13, {
+  forwardRef as forwardRef8,
   useImperativeHandle,
   useRef as useRef2
 } from "react";
-var StyledOverlay = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var StyledOverlay = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -4496,7 +4839,7 @@ var StyledOverlay = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ *
     ...props
   }
 ));
-var StyledContent = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var StyledContent = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   DialogPrimitive.Content,
   {
     ref,
@@ -4511,7 +4854,7 @@ var StyledContent = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ *
     ...props
   }
 ));
-var StyledTitle = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var StyledTitle = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -4522,7 +4865,7 @@ var StyledTitle = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-var StyledDescription = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var StyledDescription = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -4533,7 +4876,7 @@ var StyledDescription = forwardRef7(({ className, ...props }, ref) => /* @__PURE
     ...props
   }
 ));
-var CloseButtonContainer = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var CloseButtonContainer = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
   "div",
   {
     ref,
@@ -4541,7 +4884,7 @@ var CloseButtonContainer = forwardRef7(({ className, ...props }, ref) => /* @__P
     ...props
   }
 ));
-var Dialog = forwardRef7(function Dialog2({
+var Dialog = forwardRef8(function Dialog2({
   children: children2,
   title,
   description,
@@ -4558,7 +4901,7 @@ var Dialog = forwardRef7(function Dialog2({
       return contentRef.current.contains(element);
     }
   }));
-  return /* @__PURE__ */ React12.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React12.createElement(StyledOverlay, null), /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(StyledOverlay, null), /* @__PURE__ */ React13.createElement(
     StyledContent,
     {
       ref: contentRef,
@@ -4569,14 +4912,14 @@ var Dialog = forwardRef7(function Dialog2({
         onInteractOutside: (event) => event.preventDefault()
       }
     },
-    /* @__PURE__ */ React12.createElement(CloseButtonContainer, null, /* @__PURE__ */ React12.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React12.createElement(IconButton, { iconName: "Cross1Icon" }))),
-    title && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(StyledTitle, null, title), /* @__PURE__ */ React12.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
-    description && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React12.createElement(StyledDescription, null, description), /* @__PURE__ */ React12.createElement(Spacer.Vertical, { size: 20 })),
+    /* @__PURE__ */ React13.createElement(CloseButtonContainer, null, /* @__PURE__ */ React13.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React13.createElement(IconButton, { iconName: "Cross1Icon" }))),
+    title && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(StyledTitle, null, title), /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    description && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React13.createElement(StyledDescription, null, description), /* @__PURE__ */ React13.createElement(Spacer.Vertical, { size: 20 })),
     children2
   ));
 });
-var FullscreenDialog = forwardRef7(function FullscreenDialog2({ style: style5, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React12.createElement(
+var FullscreenDialog = forwardRef8(function FullscreenDialog2({ style: style5, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ React13.createElement(
     Dialog,
     {
       ref: forwardedRef,
@@ -4602,13 +4945,13 @@ var FullscreenDialog = forwardRef7(function FullscreenDialog2({ style: style5, .
 import { CaretDownIcon } from "@noya-app/noya-icons";
 // ../noya-react-utils/src/components/AutoSizer.tsx
-import React14, { memo as memo5, useRef as useRef3 } from "react";
+import React15, { memo as memo6, useRef as useRef3 } from "react";
 // ../noya-react-utils/src/hooks/useSize.ts
-import * as React13 from "react";
+import * as React14 from "react";
 function useSize(refToObserve, dimensions = "both") {
-  const [size3, setSize] = React13.useState(void 0);
-  React13.useEffect(() => {
+  const [size3, setSize] = React14.useState(void 0);
+  React14.useEffect(() => {
     if (refToObserve.current) {
       const elementToObserve = refToObserve.current;
       const resizeObserver = new ResizeObserver((entries) => {
@@ -4655,26 +4998,26 @@ var style = {
   flex: "1 0 0",
   flexDirection: "column"
 };
-var AutoSizer = memo5(function AutoSizer2({
+var AutoSizer = memo6(function AutoSizer2({
   children: children2,
   className
 }) {
   const containerRef = useRef3(null);
   const containerSize = useSize(containerRef);
-  return /* @__PURE__ */ React14.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children2(containerSize));
+  return /* @__PURE__ */ React15.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children2(containerSize));
 });
-var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
+var SingleDimensionAutoSizer = memo6(function SingleDimensionAutoSizer2({
   children: children2,
   dimension,
   className
 }) {
   const containerRef = useRef3(null);
   const containerSize = useSize(containerRef, dimension);
-  return /* @__PURE__ */ React14.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children2(containerSize[dimension]));
+  return /* @__PURE__ */ React15.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children2(containerSize[dimension]));
 });
 // ../noya-react-utils/src/components/FileDropTarget.tsx
-import React15, { memo as memo6, useCallback as useCallback3, useRef as useRef4 } from "react";
+import React16, { memo as memo7, useCallback as useCallback3, useRef as useRef4 } from "react";
 // ../noya-react-utils/src/hooks/useFileDropTarget.ts
 import { useCallback as useCallback2, useState as useState3 } from "react";
@@ -4724,7 +5067,7 @@ function useFileDropTarget(ref, dropEvent) {
 function isSupportedFile(file, supportedFileTypes) {
   return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
 }
-var FileDropTarget = memo6(function FileDropTarget2({
+var FileDropTarget = memo7(function FileDropTarget2({
   children: children2,
   onDropFiles,
   supportedFileTypes,
@@ -4767,7 +5110,7 @@ var FileDropTarget = memo6(function FileDropTarget2({
     ref,
     handleFile
   );
-  return /* @__PURE__ */ React15.createElement("div", { ref, ...dropTargetProps, ...props }, typeof children2 === "function" ? children2(isDropTargetActive) : children2);
+  return /* @__PURE__ */ React16.createElement("div", { ref, ...dropTargetProps, ...props }, typeof children2 === "function" ? children2(isDropTargetActive) : children2);
 });
 // ../noya-react-utils/src/hooks/useDeepArray.ts
@@ -4906,15 +5249,16 @@ function assignRef(ref, value) {
 }
 // src/components/InputField.tsx
-import React19, {
+import React20, {
   Children,
   createContext as createContext2,
-  forwardRef as forwardRef10,
+  forwardRef as forwardRef11,
   isValidElement,
-  memo as memo8,
+  memo as memo9,
   useCallback as useCallback11,
   useContext as useContext2,
   useEffect as useEffect11,
+  useId,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo7,
   useRef as useRef12,
@@ -4948,13 +5292,13 @@ function handleNudge(e) {
 import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
-import React16, {
-  forwardRef as forwardRef8,
-  memo as memo7,
+import React17, {
+  forwardRef as forwardRef9,
+  memo as memo8,
   useCallback as useCallback9,
   useMemo as useMemo6
 } from "react";
-var DropdownMenuItem = memo7(function ContextMenuItem({
+var DropdownMenuItem = memo8(function ContextMenuItem({
   value,
   children: children2,
   onSelect,
@@ -4970,7 +5314,7 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement(
       RadixDropdownMenu.CheckboxItem,
       {
         checked,
@@ -4978,26 +5322,26 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
         onSelect: handleSelectItem,
         className: styles.itemStyle({ disabled })
       },
-      /* @__PURE__ */ React16.createElement(RadixDropdownMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ React16.createElement(CheckIcon, null)),
-      icon && /* @__PURE__ */ React16.createElement(React16.Fragment, null, renderIcon(icon), /* @__PURE__ */ React16.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ React17.createElement(RadixDropdownMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ React17.createElement(CheckIcon, null)),
+      icon && /* @__PURE__ */ React17.createElement(React17.Fragment, null, renderIcon(icon), /* @__PURE__ */ React17.createElement(Spacer.Horizontal, { size: 8 })),
       children2
     );
   }
-  const element = /* @__PURE__ */ React16.createElement(
+  const element = /* @__PURE__ */ React17.createElement(
     RadixDropdownMenu.Item,
     {
       disabled,
       onSelect: handleSelectItem,
       className: styles.itemStyle({ disabled })
     },
-    indented && /* @__PURE__ */ React16.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ React16.createElement(React16.Fragment, null, renderIcon(icon), /* @__PURE__ */ React16.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ React17.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ React17.createElement(React17.Fragment, null, renderIcon(icon), /* @__PURE__ */ React17.createElement(Spacer.Horizontal, { size: 8 })),
     children2,
-    shortcut && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React16.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React16.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React16.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React16.createElement(ChevronRightIcon, null))
+    shortcut && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React17.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React17.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React17.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React17.createElement(ChevronRightIcon, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement(
       DropdownMenuRoot,
       {
         isNested: true,
@@ -5011,7 +5355,7 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
     return element;
   }
 });
-var DropdownMenuRoot = forwardRef8(function DropdownMenuRoot2({
+var DropdownMenuRoot = forwardRef9(function DropdownMenuRoot2({
   items,
   children: children2,
   onSelect,
@@ -5039,7 +5383,7 @@ var DropdownMenuRoot = forwardRef8(function DropdownMenuRoot2({
   const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
   const ContentComponent = isNested ? RadixDropdownMenu.SubContent : RadixDropdownMenu.Content;
   const contentStyle = useMemo6(() => ({ zIndex: 1e3 }), []);
-  return /* @__PURE__ */ React16.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React16.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children2), /* @__PURE__ */ React16.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React17.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children2), /* @__PURE__ */ React17.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React17.createElement(
     ContentComponent,
     {
       className: styles.contentStyle,
@@ -5053,13 +5397,13 @@ var DropdownMenuRoot = forwardRef8(function DropdownMenuRoot2({
     },
     items.length === 0 ? emptyState : null,
     items.map(
-      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React16.createElement(
+      (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React17.createElement(
         RadixDropdownMenu.Separator,
         {
           key: index,
           className: styles.separatorStyle
         }
-      ) : /* @__PURE__ */ React16.createElement(
+      ) : /* @__PURE__ */ React17.createElement(
         DropdownMenuItem,
         {
           key: item.value ?? index,
@@ -5077,12 +5421,12 @@ var DropdownMenuRoot = forwardRef8(function DropdownMenuRoot2({
     )
   )));
 });
-var DropdownMenu = memo7(DropdownMenuRoot);
+var DropdownMenu = memo8(DropdownMenuRoot);
 // src/components/internal/TextInput.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React17, {
-  forwardRef as forwardRef9,
+import React18, {
+  forwardRef as forwardRef10,
   useCallback as useCallback10,
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect3,
@@ -5130,19 +5474,20 @@ function useGlobalInputBlurTrigger() {
 }
 // src/components/internal/TextInput.tsx
-var ReadOnlyTextInput = forwardRef9(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
-  return /* @__PURE__ */ React17.createElement(
+var ReadOnlyTextInput = forwardRef10(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ React18.createElement(
     "input",
     {
       ref: forwardedRef,
       ...rest,
       value,
       onKeyDown,
-      readOnly: true
+      readOnly: true,
+      className: "focus:z-interactable"
     }
   );
 });
-var ControlledTextInput = forwardRef9(function ControlledTextInput2({
+var ControlledTextInput = forwardRef10(function ControlledTextInput2({
   onKeyDown,
   value,
   onChange,
@@ -5165,7 +5510,7 @@ var ControlledTextInput = forwardRef9(function ControlledTextInput2({
     },
     [onFocusCapture, onFocusChange]
   );
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "input",
     {
       ref: forwardedRef,
@@ -5181,7 +5526,7 @@ var ControlledTextInput = forwardRef9(function ControlledTextInput2({
     }
   );
 });
-var SubmittableTextInput = forwardRef9(function SubmittableTextInput2({
+var SubmittableTextInput = forwardRef10(function SubmittableTextInput2({
   onKeyDown,
   value,
   onSubmit,
@@ -5192,7 +5537,7 @@ var SubmittableTextInput = forwardRef9(function SubmittableTextInput2({
   submitAutomaticallyAfterDelay,
   ...rest
 }, forwardedRef) {
-  const ref = React17.useRef(null);
+  const ref = React18.useRef(null);
   const latestValue = useRef11(value);
   latestValue.current = value;
   const userDidEdit = useRef11(false);
@@ -5273,7 +5618,7 @@ var SubmittableTextInput = forwardRef9(function SubmittableTextInput2({
       }
     };
   }, [internalValue, submitAutomaticallyAfterDelay]);
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "input",
     {
       ref: composeRefs(ref, forwardedRef),
@@ -5286,7 +5631,7 @@ var SubmittableTextInput = forwardRef9(function SubmittableTextInput2({
     }
   );
 });
-var TextInput_default = forwardRef9(function TextInput(props, forwardedRef) {
+var TextInput_default = forwardRef10(function TextInput(props, forwardedRef) {
   const commonProps = {
     onPointerDown: useCallback10(
       (event) => event.stopPropagation(),
@@ -5305,17 +5650,17 @@ var TextInput_default = forwardRef9(function TextInput(props, forwardedRef) {
     ...props
   };
   if ("readOnly" in commonProps) {
-    return /* @__PURE__ */ React17.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
+    return /* @__PURE__ */ React18.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
   } else if ("onChange" in commonProps) {
-    return /* @__PURE__ */ React17.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React18.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
   } else {
-    return /* @__PURE__ */ React17.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ React18.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
   }
 });
 // src/components/Popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React18 from "react";
+import React19 from "react";
 var closeStyles = {
   all: "unset",
   fontFamily: "inherit"
@@ -5337,7 +5682,7 @@ function Popover({
   onFocusOutside,
   onClickClose
 }) {
-  return /* @__PURE__ */ React18.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React18.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React18.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React19.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React19.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React19.createElement(
     PopoverPrimitive.Content,
     {
       className: `rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000] ${variant === "large" ? "w-[680px]" : variant === "normal" ? "w-[240px]" : ""}`,
@@ -5353,14 +5698,14 @@ function Popover({
       arrowPadding: 2
     },
     children2,
-    showArrow && /* @__PURE__ */ React18.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
-    closable && /* @__PURE__ */ React18.createElement(
+    showArrow && /* @__PURE__ */ React19.createElement(PopoverPrimitive.Arrow, { className: "fill-popover-background" }),
+    closable && /* @__PURE__ */ React19.createElement(
       PopoverPrimitive.Close,
       {
         className: "rounded-full h-[25px] w-[25px] inline-flex items-center justify-center absolute top-[5px] right-[5px]",
         style: closeStyles
       },
-      /* @__PURE__ */ React18.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
+      /* @__PURE__ */ React19.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose })
     )
   )));
 }
@@ -5376,31 +5721,35 @@ var InputFieldContext = createContext2({
   onFocusChange: () => {
   }
 });
-var LabelContainer = forwardRef10(
-  ({ pointerEvents, $labelPosition, $hasDropdown, $size, className, style: style5, ...props }, ref) => {
-    const memoizedStyles = useMemo7(() => ({
+var LabelContainer = forwardRef11(function LabelContainer2({
+  labelPosition: $labelPosition,
+  hasDropdown: $hasDropdown,
+  size: $size,
+  className,
+  style: style5,
+  ...props
+}, ref) {
+  const memoizedStyles = useMemo7(
+    () => ({
       left: $labelPosition === "start" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
-      right: $labelPosition === "end" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : ""
-    }), [$labelPosition, $size]);
-    return /* @__PURE__ */ React19.createElement(
-      "label",
-      {
-        ref,
-        className: `absolute top-0 bottom-0 flex items-center font-sans text-label font-bold uppercase text-text-disabled select-none ${$labelPosition === "start" ? `justify-start pl-[6px]` : $labelPosition === "end" ? `justify-end ${$hasDropdown ? "pr-[16px]" : "pr-[6px]"}` : ""} ${pointerEvents === "none" ? "pointer-events-none" : ""} ${className ?? ""}`,
-        style: { ...memoizedStyles, ...style5 },
-        ...props
-      }
-    );
-  }
-);
-var InputFieldLabel = memo8(
-  forwardRef10(function InputFieldLabel2({
-    children: children2 = false,
-    pointerEvents = "none",
-    style: style5,
-    className
-  }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth, size: size3 } = useContext2(InputFieldContext);
+      right: $labelPosition === "end" ? $size === "large" ? "6px" : $size === "medium" ? "2px" : "0px" : "",
+      ...style5
+    }),
+    [$labelPosition, $size, style5]
+  );
+  return /* @__PURE__ */ React20.createElement(
+    "label",
+    {
+      ref,
+      className: `absolute top-0 bottom-0 flex items-center font-sans text-label font-bold uppercase text-text-disabled select-none z-label pointer-events-none ${$labelPosition === "start" ? `justify-start pl-[6px]` : $labelPosition === "end" ? `justify-end ${$hasDropdown ? "pr-[16px]" : "pr-[6px]"}` : ""} ${className ?? ""}`,
+      style: memoizedStyles,
+      ...props
+    }
+  );
+});
+var InputFieldLabel = memo9(
+  forwardRef11(function InputFieldLabel2(props, forwardedRef) {
+    const { labelPosition, hasDropdown, setLabelWidth, size: size3, id } = useContext2(InputFieldContext);
     const ref = useRef12(null);
     useLayoutEffect4(() => {
       if (!setLabelWidth) return;
@@ -5408,25 +5757,23 @@ var InputFieldLabel = memo8(
       if (!width) return;
       setLabelWidth(width);
     }, [setLabelWidth]);
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       LabelContainer,
       {
-        $size: size3,
         ref: (element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
         },
-        pointerEvents,
-        $labelPosition: labelPosition,
-        $hasDropdown: hasDropdown,
-        style: style5,
-        className
-      },
-      children2
+        size: size3,
+        labelPosition,
+        hasDropdown,
+        htmlFor: id,
+        ...props
+      }
     );
   })
 );
-var DropdownContainer = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */ React19.createElement(
+var DropdownContainer = forwardRef11(({ className, ...props }, ref) => /* @__PURE__ */ React20.createElement(
   "span",
   {
     ref,
@@ -5434,7 +5781,7 @@ var DropdownContainer = forwardRef10(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-var InputFieldDropdownMenu = memo8(function InputFieldDropdownMenu2({ id, items, onSelect, children: children2 }) {
+var InputFieldDropdownMenu = memo9(function InputFieldDropdownMenu2({ id, items, onSelect, children: children2 }) {
   const { size: size3 } = useContext2(InputFieldContext);
   const contentStyle = useMemo7(
     () => ({
@@ -5443,7 +5790,7 @@ var InputFieldDropdownMenu = memo8(function InputFieldDropdownMenu2({ id, items,
     }),
     [size3]
   );
-  return /* @__PURE__ */ React19.createElement(DropdownContainer, null, /* @__PURE__ */ React19.createElement(DropdownMenu, { items, onSelect }, children2 || /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(DropdownContainer, null, /* @__PURE__ */ React20.createElement(DropdownMenu, { items, onSelect }, children2 || /* @__PURE__ */ React20.createElement(
     Button,
     {
       id,
@@ -5451,10 +5798,10 @@ var InputFieldDropdownMenu = memo8(function InputFieldDropdownMenu2({ id, items,
       className: "flex flex-1",
       contentStyle
     },
-    /* @__PURE__ */ React19.createElement(CaretDownIcon, null)
+    /* @__PURE__ */ React20.createElement(CaretDownIcon, null)
   )));
 });
-var ButtonContainer = forwardRef10(({ $size, className, ...props }, ref) => /* @__PURE__ */ React19.createElement(
+var ButtonContainer = forwardRef11(({ $size, className, ...props }, ref) => /* @__PURE__ */ React20.createElement(
   "span",
   {
     ref,
@@ -5462,8 +5809,8 @@ var ButtonContainer = forwardRef10(({ $size, className, ...props }, ref) => /* @
     ...props
   }
 ));
-var InputFieldButton = memo8(
-  forwardRef10(function InputFieldButton2(props, forwardedRef) {
+var InputFieldButton = memo9(
+  forwardRef11(function InputFieldButton2(props, forwardedRef) {
     const { children: children2, onClick, ...rest } = props;
     const { size: size3, inputRef, setButtonWidth } = useContext2(InputFieldContext);
     const ref = useRef12(null);
@@ -5491,7 +5838,7 @@ var InputFieldButton = memo8(
       },
       []
     );
-    return /* @__PURE__ */ React19.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(ButtonContainer, { $size: size3 }, /* @__PURE__ */ React20.createElement(
       Button,
       {
         ref: (element) => {
@@ -5509,7 +5856,7 @@ var InputFieldButton = memo8(
     ));
   })
 );
-var InputElement = forwardRef10(
+var InputElement = forwardRef11(
   ({
     disabled,
     readOnly,
@@ -5527,25 +5874,28 @@ var InputElement = forwardRef10(
   }, ref) => {
     const paddingLeft = ($size === "large" ? 10 : $size === "medium" ? 6 : 4) + ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0);
     const paddingRight = ($size === "large" ? 10 : $size === "medium" ? 6 : 1) + ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) + ($hasDropdown ? 11 : 0);
-    const memoizedStyles = useMemo7(() => ({
-      paddingLeft: `${paddingLeft}px`,
-      paddingRight: `${paddingRight}px`
-    }), [paddingLeft, paddingRight]);
-    return /* @__PURE__ */ React19.createElement(
+    const memoizedStyles = useMemo7(
+      () => ({
+        paddingLeft: `${paddingLeft}px`,
+        paddingRight: `${paddingRight}px`
+      }),
+      [paddingLeft, paddingRight]
+    );
+    return /* @__PURE__ */ React20.createElement(
       TextInput_default,
       {
         value: value ?? "",
         onSubmit: onSubmit ?? (() => {
         }),
         ref,
-        className: `flex w-0 flex-[1_1_0px] relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary focus:z-10 placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} font-sans font-normal ${$textAlign && `text-${$textAlign}`} ${$size === "small" ? "text-[11px] leading-[19px] py-[1px]" : $size === "large" ? "py-[10px] text-heading5" : $size === "medium" ? "py-1  text-heading5" : $variant === "bare" && "p-1 -m-1"} ${className ?? ""}`,
+        className: `flex w-0 flex-[1_1_0px] relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} font-sans font-normal ${$textAlign && `text-${$textAlign}`} ${$size === "small" ? "text-[11px] leading-[19px] py-[1px]" : $size === "large" ? "py-[10px] text-heading5" : $size === "medium" ? "py-1  text-heading5" : $variant === "bare" && "p-1 -m-1"} ${className ?? ""}`,
         style: memoizedStyles,
         ...props
       }
     );
   }
 );
-var InputFieldInput = forwardRef10(function InputFieldInput2({ textAlign, variant, ...rest }, forwardedRef) {
+var InputFieldInput = forwardRef11(function InputFieldInput2({ textAlign, variant, ...rest }, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -5553,7 +5903,8 @@ var InputFieldInput = forwardRef10(function InputFieldInput2({ textAlign, varian
     buttonSize,
     size: size3,
     onFocusChange,
-    setInputRef
+    setInputRef,
+    id
   } = useContext2(InputFieldContext);
   const handleFocusChange = useCallback11(
     (isFocused) => {
@@ -5564,7 +5915,7 @@ var InputFieldInput = forwardRef10(function InputFieldInput2({ textAlign, varian
   useLayoutEffect4(() => {
     setInputRef?.(forwardedRef);
   }, [forwardedRef, setInputRef]);
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     InputElement,
     {
       ref: forwardedRef,
@@ -5575,6 +5926,7 @@ var InputFieldInput = forwardRef10(function InputFieldInput2({ textAlign, varian
       $variant: variant,
       $textAlign: textAlign,
       onFocusChange: handleFocusChange,
+      id,
       ...rest
     }
   );
@@ -5587,7 +5939,7 @@ var InputFieldTypeahead = (props) => {
     size: size3
     // onFocusChange,
   } = useContext2(InputFieldContext);
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     InputElement,
     {
       $labelPosition: labelPosition,
@@ -5598,8 +5950,8 @@ var InputFieldTypeahead = (props) => {
       value: "",
       className: "absolute inset-0 w-full h-full pointer-events-none bg-transparent shadow-none"
     },
-    /* @__PURE__ */ React19.createElement("span", { style: { opacity: 0 } }, props.prefix),
-    /* @__PURE__ */ React19.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
+    /* @__PURE__ */ React20.createElement("span", { style: { opacity: 0 } }, props.prefix),
+    /* @__PURE__ */ React20.createElement("span", { style: { opacity: 0.5 } }, props.value.slice(props.prefix.length))
   );
 };
 function parseNumber(value) {
@@ -5655,7 +6007,7 @@ function InputFieldNumberInput(props) {
     },
     [onBlur]
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     InputFieldInput,
     {
       ...rest,
@@ -5667,7 +6019,7 @@ function InputFieldNumberInput(props) {
     }
   );
 }
-var RootContainer = forwardRef10(({ $width, $flex, className, ...props }, ref) => /* @__PURE__ */ React19.createElement(
+var RootContainer = forwardRef11(({ $width, $flex, className, ...props }, ref) => /* @__PURE__ */ React20.createElement(
   "div",
   {
     ref,
@@ -5689,13 +6041,14 @@ function InputFieldRoot({
   className
 }) {
   const childrenArray = Children.toArray(children2);
+  const randomId = useId();
   const hasDropdown = childrenArray.some(
     (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
   );
-  const [isFocused, setIsFocused] = React19.useState(false);
-  const [measuredLabelSize, setMeasuredLabelSize] = React19.useState();
-  const [measuredButtonSize, setMeasuredButtonSize] = React19.useState();
-  const [measuredWidth, setMeasuredWidth] = React19.useState();
+  const [isFocused, setIsFocused] = React20.useState(false);
+  const [measuredLabelSize, setMeasuredLabelSize] = React20.useState();
+  const [measuredButtonSize, setMeasuredButtonSize] = React20.useState();
+  const [measuredWidth, setMeasuredWidth] = React20.useState();
   const handleFocusChange = useCallback11(
     (isFocused2) => {
       setIsFocused(isFocused2);
@@ -5703,7 +6056,7 @@ function InputFieldRoot({
     },
     [onFocusChange]
   );
-  const [inputRef, setInputRef] = React19.useState();
+  const [inputRef, setInputRef] = React20.useState();
   useEffect11(() => {
     if (inputRef && typeof inputRef !== "function") {
       setMeasuredWidth?.(
@@ -5723,7 +6076,8 @@ function InputFieldRoot({
       inputRef,
       setInputRef,
       setLabelWidth: setMeasuredLabelSize,
-      setButtonWidth: setMeasuredButtonSize
+      setButtonWidth: setMeasuredButtonSize,
+      id: id ?? randomId
     }),
     [
       labelPosition,
@@ -5734,13 +6088,14 @@ function InputFieldRoot({
       size3,
       isFocused,
       handleFocusChange,
-      inputRef
+      inputRef,
+      id,
+      randomId
     ]
   );
-  const rootElement = /* @__PURE__ */ React19.createElement(
+  const rootElement = /* @__PURE__ */ React20.createElement(
     RootContainer,
     {
-      id,
       $width: width,
       $flex: flex,
       style: style5,
@@ -5748,7 +6103,7 @@ function InputFieldRoot({
     },
     children2
   );
-  return /* @__PURE__ */ React19.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(InputFieldContext.Provider, { value: contextValue }, renderPopoverContent ? /* @__PURE__ */ React20.createElement(
     Popover,
     {
       open: true,
@@ -5764,7 +6119,7 @@ function InputFieldRoot({
         event.stopPropagation();
       }
     },
-    measuredWidth && /* @__PURE__ */ React19.createElement("div", { className: `flex flex-col w-[${measuredWidth}] hidden` }, renderPopoverContent({ width: measuredWidth }))
+    measuredWidth && /* @__PURE__ */ React20.createElement("div", { className: `flex flex-col w-[${measuredWidth}] hidden` }, renderPopoverContent({ width: measuredWidth }))
   ) : rootElement);
 }
 var PrimitiveInputField = ({
@@ -5772,19 +6127,19 @@ var PrimitiveInputField = ({
   disabled,
   className,
   ...props
-}) => /* @__PURE__ */ React19.createElement(
+}) => /* @__PURE__ */ React20.createElement(
   "input",
   {
-    className: `flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 px-1.5 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary focus:z-10 font-sans font-normal text-heading5 placeholder:text-text-disabled ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} ${className ?? ""}`,
+    className: `flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 px-1.5 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary font-sans font-normal text-heading5 placeholder:text-text-disabled focus:z-interactable ${readOnly ? "text-text-muted" : disabled ? "text-text-disabled" : "text-text"} ${className ?? ""}`,
     ...props
   }
 );
 var InputField;
 ((InputField2) => {
-  InputField2.Root = memo8(InputFieldRoot);
-  InputField2.Input = memo8(InputFieldInput);
-  InputField2.Typeahead = memo8(InputFieldTypeahead);
-  InputField2.NumberInput = memo8(InputFieldNumberInput);
+  InputField2.Root = memo9(InputFieldRoot);
+  InputField2.Input = memo9(InputFieldInput);
+  InputField2.Typeahead = memo9(InputFieldTypeahead);
+  InputField2.NumberInput = memo9(InputFieldNumberInput);
   InputField2.DropdownMenu = InputFieldDropdownMenu;
   InputField2.Button = InputFieldButton;
   InputField2.Label = InputFieldLabel;
@@ -5848,7 +6203,7 @@ var DialogProvider = function DialogProvider2({
     if (!dialogRef.current) return false;
     return dialogRef.current.containsElement(element);
   }, []);
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     DialogContext.Provider,
     {
       value: useMemo8(
@@ -5857,7 +6212,7 @@ var DialogProvider = function DialogProvider2({
       )
     },
     children2
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     Dialog,
     {
       ref: dialogRef,
@@ -5878,7 +6233,7 @@ var DialogProvider = function DialogProvider2({
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
       }, [])
     },
-    /* @__PURE__ */ React20.createElement(InputField.Root, null, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(InputField.Root, null, /* @__PURE__ */ React21.createElement(
       InputField.Input,
       {
         ref: inputRef,
@@ -5894,8 +6249,8 @@ var DialogProvider = function DialogProvider2({
         onKeyDown: handleKeyDown
       }
     )),
-    /* @__PURE__ */ React20.createElement(Spacer.Vertical, { size: 20 }),
-    /* @__PURE__ */ React20.createElement("div", { className: "flex-1 flex-row items-center" }, /* @__PURE__ */ React20.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React20.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React20.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React20.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
+    /* @__PURE__ */ React21.createElement(Spacer.Vertical, { size: 20 }),
+    /* @__PURE__ */ React21.createElement("div", { className: "flex-1 flex-row items-center" }, /* @__PURE__ */ React21.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React21.createElement(Button, { onClick: close }, "Cancel"), /* @__PURE__ */ React21.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React21.createElement(Button, { disabled: !contents?.inputValue, onClick: submit }, "Submit"))
   ));
 };
 function useDialog() {
@@ -5914,7 +6269,7 @@ function useDialogContainsElement() {
 // src/contexts/FloatingWindowContext.tsx
 import { uuid } from "@noya-app/noya-utils";
-import React21, { createContext as createContext4, useContext as useContext4, useMemo as useMemo9, useState as useState14 } from "react";
+import React22, { createContext as createContext4, useContext as useContext4, useMemo as useMemo9, useState as useState14 } from "react";
 import { createPortal } from "react-dom";
 var FloatingWindowContext = createContext4(void 0);
 var CurrentWindowContext = createContext4(void 0);
@@ -5927,7 +6282,7 @@ var FloatingWindowProvider = ({
       const id = uuid();
       setWindows((windows2) => ({
         ...windows2,
-        [id]: /* @__PURE__ */ React21.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
+        [id]: /* @__PURE__ */ React22.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
       }));
       return id;
     };
@@ -5939,7 +6294,7 @@ var FloatingWindowProvider = ({
     };
     return { createWindow, closeWindow };
   }, []);
-  return /* @__PURE__ */ React21.createElement(FloatingWindowContext.Provider, { value: contextValue }, children2, Object.entries(windows).map(
+  return /* @__PURE__ */ React22.createElement(FloatingWindowContext.Provider, { value: contextValue }, children2, Object.entries(windows).map(
     ([id, element]) => createPortal(element, document.body, id)
   ));
 };
@@ -5964,7 +6319,7 @@ var useCurrentFloatingWindowInternal = () => {
 var DesignSystemConfigurationContext = createContext5({
   platform: "key"
 });
-var DesignSystemConfigurationProvider = memo9(
+var DesignSystemConfigurationProvider = memo10(
   function DesignSystemConfigurationProvider2({
     children: children2,
     platform
@@ -5982,7 +6337,7 @@ var DesignSystemConfigurationProvider = memo9(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
-    return /* @__PURE__ */ React22.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React22.createElement(DialogProvider, null, /* @__PURE__ */ React22.createElement(ToastProvider, null, /* @__PURE__ */ React22.createElement(FloatingWindowProvider, null, children2))));
+    return /* @__PURE__ */ React23.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React23.createElement(DialogProvider, null, /* @__PURE__ */ React23.createElement(ToastProvider, null, /* @__PURE__ */ React23.createElement(FloatingWindowProvider, null, children2))));
   }
 );
 function useDesignSystemConfiguration() {
@@ -5990,12 +6345,28 @@ function useDesignSystemConfiguration() {
 }
 // src/utils/withSeparatorElements.ts
-import { Children as Children2, cloneElement, isValidElement as isValidElement2 } from "react";
+import {
+  Children as Children2,
+  cloneElement,
+  Fragment,
+  isValidElement as isValidElement2
+} from "react";
+function flattenChildren(children2, traverseFragments) {
+  return Children2.toArray(children2).flatMap((child) => {
+    if (traverseFragments && isValidElement2(child) && child.type === Fragment) {
+      return flattenChildren(child.props.children, traverseFragments);
+    }
+    return child;
+  });
+}
 function createKey(key) {
   return `s-${key}`;
 }
-function withSeparatorElements(elements2, separator) {
-  const childrenArray = Children2.toArray(elements2);
+function withSeparatorElements(elements2, separator, options) {
+  const childrenArray = flattenChildren(
+    elements2,
+    options?.traverseFragments ?? true
+  );
   for (let i = childrenArray.length - 1; i > 0; i--) {
     let sep = typeof separator === "function" ? separator() : isValidElement2(separator) ? cloneElement(separator, { key: createKey(i) }) : separator;
     if (isValidElement2(sep) && sep.key == null) {
@@ -6050,13 +6421,13 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
     menuItems.flatMap(getKeyboardShortcuts).map(([key, value]) => [key, () => onSelect(value)])
   );
 }
-var ShortcutElement = ({ children: children2, fixedWidth }) => /* @__PURE__ */ React23.createElement("kbd", { className: cn(textStyles.small, "text-text-disabled", fixedWidth && "w-[0.9rem] text-center") }, children2);
-var KeyboardShortcut = memo10(function KeyboardShortcut2({
+var ShortcutElement = ({ children: children2, fixedWidth }) => /* @__PURE__ */ React24.createElement("kbd", { className: cn(textStyles.small, "text-text-disabled", fixedWidth && "w-[0.9rem] text-center") }, children2);
+var KeyboardShortcut = memo11(function KeyboardShortcut2({
   shortcut
 }) {
   const platform = useDesignSystemConfiguration().platform;
   const { keys, separator } = getShortcutDisplayParts(shortcut, platform);
-  const keyElements = keys.map((key) => /* @__PURE__ */ React23.createElement(
+  const keyElements = keys.map((key) => /* @__PURE__ */ React24.createElement(
     ShortcutElement,
     {
       key,
@@ -6064,14 +6435,14 @@ var KeyboardShortcut = memo10(function KeyboardShortcut2({
     },
     key
   ));
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, separator ? withSeparatorElements(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, separator ? withSeparatorElements(
     keyElements,
-    /* @__PURE__ */ React23.createElement(ShortcutElement, null, separator)
+    /* @__PURE__ */ React24.createElement(ShortcutElement, null, separator)
   ) : keyElements);
 });
 // src/components/ContextMenu.tsx
-var ContextMenuItem2 = memo11(function ContextMenuItem3({
+var ContextMenuItem2 = memo12(function ContextMenuItem3({
   value,
   children: children2,
   onSelect,
@@ -6091,7 +6462,7 @@ var ContextMenuItem2 = memo11(function ContextMenuItem3({
     onSelect(value);
   }, [onSelect, value]);
   if (checked) {
-    return /* @__PURE__ */ React24.createElement(
+    return /* @__PURE__ */ React25.createElement(
       RadixContextMenu.CheckboxItem,
       {
         checked,
@@ -6099,11 +6470,11 @@ var ContextMenuItem2 = memo11(function ContextMenuItem3({
         onSelect: handleSelectItem,
         className: styles.itemStyle({ disabled })
       },
-      /* @__PURE__ */ React24.createElement(RadixContextMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ React24.createElement(CheckIcon2, null)),
+      /* @__PURE__ */ React25.createElement(RadixContextMenu.ItemIndicator, { className: styles.itemIndicatorStyle }, /* @__PURE__ */ React25.createElement(CheckIcon2, null)),
       children2
     );
   }
-  const element = /* @__PURE__ */ React24.createElement(
+  const element = /* @__PURE__ */ React25.createElement(
     RadixContextMenu.Item,
     {
       className: styles.itemStyle({ disabled }),
@@ -6111,14 +6482,14 @@ var ContextMenuItem2 = memo11(function ContextMenuItem3({
       onSelect: handleSelectItem,
       onPointerDown: handlePointerDown
     },
-    indented && /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
-    icon && /* @__PURE__ */ React24.createElement(React24.Fragment, null, renderIcon(icon), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 8 })),
+    indented && /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
+    icon && /* @__PURE__ */ React25.createElement(React25.Fragment, null, renderIcon(icon), /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: 8 })),
     children2,
-    shortcut && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React24.createElement(KeyboardShortcut, { shortcut })),
-    items && items.length > 0 && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React24.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React24.createElement(ChevronRightIcon2, null))
+    shortcut && /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React25.createElement(KeyboardShortcut, { shortcut })),
+    items && items.length > 0 && /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React25.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React25.createElement(ChevronRightIcon2, null))
   );
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React24.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ React25.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
   } else {
     return element;
   }
@@ -6145,8 +6516,8 @@ function ContextMenuRoot({
   const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
   const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
   const ContentComponent = isNested ? RadixContextMenu.SubContent : RadixContextMenu.Content;
-  return /* @__PURE__ */ React24.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React24.createElement(TriggerComponent, { asChild: true, onPointerDown }, children2), /* @__PURE__ */ React24.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React24.createElement(ContentComponent, { className: styles.contentStyle }, items.map(
-    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React24.createElement(RadixContextMenu.Separator, { key: index, className: styles.separatorStyle }) : /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React25.createElement(TriggerComponent, { asChild: true, onPointerDown }, children2), /* @__PURE__ */ React25.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React25.createElement(ContentComponent, { className: styles.contentStyle }, items.map(
+    (item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React25.createElement(RadixContextMenu.Separator, { key: index, className: styles.separatorStyle }) : /* @__PURE__ */ React25.createElement(
       ContextMenuItem2,
       {
         key: item.value ?? index,
@@ -6163,18 +6534,18 @@ function ContextMenuRoot({
     )
   ))));
 }
-var ContextMenu = memo11(ContextMenuRoot);
+var ContextMenu = memo12(ContextMenuRoot);
 // src/components/Divider.tsx
-import React25, { memo as memo12 } from "react";
-var Divider = memo12(function Divider2({
+import React26, { memo as memo13 } from "react";
+var Divider = memo13(function Divider2({
   variant = "normal",
   overflow = 0,
   className,
   style: style5,
   ...props
 }) {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     "div",
     {
       className: `
@@ -6192,13 +6563,13 @@ var Divider = memo12(function Divider2({
     }
   );
 });
-var DividerVertical = memo12(function DividerVertical2({
+var DividerVertical = memo13(function DividerVertical2({
   variant = "normal",
   overflow = 0,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     "div",
     {
       className: `
@@ -6215,8 +6586,8 @@ var DividerVertical = memo12(function DividerVertical2({
 // src/components/DraggableMenuButton.tsx
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React26, { forwardRef as forwardRef11, memo as memo13, useCallback as useCallback14, useState as useState16 } from "react";
-var DotButton = forwardRef11(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+import React27, { forwardRef as forwardRef12, memo as memo14, useCallback as useCallback14, useState as useState16 } from "react";
+var DotButton = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   "div",
   {
     ref,
@@ -6224,7 +6595,7 @@ var DotButton = forwardRef11(({ className, ...props }, ref) => /* @__PURE__ */ R
     ...props
   }
 ));
-var Trigger5 = forwardRef11(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var Trigger5 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ React27.createElement(
   "div",
   {
     ref,
@@ -6232,7 +6603,7 @@ var Trigger5 = forwardRef11(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var DraggableMenuButton = memo13(function DraggableMenuButton2({
+var DraggableMenuButton = memo14(function DraggableMenuButton2({
   items,
   onSelect,
   isVisible = true
@@ -6274,7 +6645,7 @@ var DraggableMenuButton = memo13(function DraggableMenuButton2({
     },
     [setOpen]
   );
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     DotButton,
     {
       onPointerDownCapture: handlePointerDownCapture,
@@ -6284,7 +6655,7 @@ var DraggableMenuButton = memo13(function DraggableMenuButton2({
         event.preventDefault();
       }
     },
-    items && onSelect ? /* @__PURE__ */ React26.createElement(
+    items && onSelect ? /* @__PURE__ */ React27.createElement(
       DropdownMenu,
       {
         open,
@@ -6293,23 +6664,23 @@ var DraggableMenuButton = memo13(function DraggableMenuButton2({
         onSelect,
         shouldBindKeyboardShortcuts: false
       },
-      /* @__PURE__ */ React26.createElement(Trigger5, null, /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React27.createElement(Trigger5, null, /* @__PURE__ */ React27.createElement(
         DragHandleDots2Icon,
         {
-          color: isVisible || open ? "var(--icon)" : "transparent"
+          color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
-    ) : /* @__PURE__ */ React26.createElement(
+    ) : /* @__PURE__ */ React27.createElement(
       DragHandleDots2Icon,
       {
-        color: isVisible || open ? "var(--icon)" : "transparent"
+        color: isVisible || open ? cssVars.colors.icon : "transparent"
       }
     )
   );
 });
 // src/components/FillInputField.tsx
-import React29, { forwardRef as forwardRef12, memo as memo16 } from "react";
+import React30, { forwardRef as forwardRef13, memo as memo17 } from "react";
 // ../noya-file-format/src/types.ts
 var types_exports = {};
@@ -6634,19 +7005,19 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
 })(ClassValue || {});
 // src/components/FillPreviewBackground.tsx
-import React28, { memo as memo15, useMemo as useMemo14 } from "react";
+import React29, { memo as memo16, useMemo as useMemo14 } from "react";
 // src/contexts/ImageDataContext.tsx
-import React27, {
+import React28, {
   createContext as createContext6,
-  memo as memo14,
+  memo as memo15,
   useContext as useContext6,
   useMemo as useMemo12
 } from "react";
 var ImageDataContext = createContext6(
   void 0
 );
-var ImageDataProvider = memo14(function ImageDataProvider2({
+var ImageDataProvider = memo15(function ImageDataProvider2({
   children: children2,
   getImageData
 }) {
@@ -6654,7 +7025,7 @@ var ImageDataProvider = memo14(function ImageDataProvider2({
     () => ({ getImageData: getImageData ?? (() => void 0) }),
     [getImageData]
   );
-  return /* @__PURE__ */ React27.createElement(ImageDataContext.Provider, { value: contextValue }, children2);
+  return /* @__PURE__ */ React28.createElement(ImageDataContext.Provider, { value: contextValue }, children2);
 });
 function useImageData(ref) {
   const value = useContext6(ImageDataContext);
@@ -6727,8 +7098,10 @@ var dotsHorizontalSvg = (fillColor) => `
     <path d='M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z'></path>
   </svg>
 `;
-var Background = memo15(function Background2({ background: background2 }) {
-  return /* @__PURE__ */ React28.createElement(
+var Background = memo16(function Background2({
+  background: background2
+}) {
+  return /* @__PURE__ */ React29.createElement(
     "span",
     {
       className: cn(
@@ -6750,7 +7123,7 @@ function getPatternSizeAndPosition(fillType, tileScale) {
       return "center / 100% 100%";
   }
 }
-var PatternPreviewBackground = memo15(function PatternPreviewBackground2({
+var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
   fillType,
   tileScale,
   imageRef
@@ -6766,43 +7139,38 @@ var PatternPreviewBackground = memo15(function PatternPreviewBackground2({
     ].join(" "),
     [fillType, size3, url]
   );
-  return /* @__PURE__ */ React28.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React29.createElement(Background, { background: background2 });
 });
-var ColorPreviewBackground = memo15(function ColorPreviewBackground2({
+var ColorPreviewBackground = memo16(function ColorPreviewBackground2({
   color
 }) {
   const background2 = useMemo14(() => sketchColorToRgbaString(color), [color]);
-  return /* @__PURE__ */ React28.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React29.createElement(Background, { background: background2 });
 });
-var GradientPreviewBackground = memo15(function GradientPreviewBackground2({
+var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
   gradient
 }) {
   const background2 = useMemo14(
     () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
     [gradient.gradientType, gradient.stops]
   );
-  return /* @__PURE__ */ React28.createElement(Background, { background: background2 });
+  return /* @__PURE__ */ React29.createElement(Background, { background: background2 });
 });
 var background = `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
-  "var(--placeholder-dots)"
+  cssVars.colors.placeholderDots
 )}") no-repeat`;
-var FillPreviewBackground = memo15(function FillPreviewBackground2({
+var FillPreviewBackground = memo16(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ React28.createElement(
-    Background,
-    {
-      background
-    }
-  );
+  if (!value) return /* @__PURE__ */ React29.createElement(Background, { background });
   switch (value._class) {
     case "color":
-      return /* @__PURE__ */ React28.createElement(ColorPreviewBackground, { color: value });
+      return /* @__PURE__ */ React29.createElement(ColorPreviewBackground, { color: value });
     case "gradient":
-      return /* @__PURE__ */ React28.createElement(GradientPreviewBackground, { gradient: value });
+      return /* @__PURE__ */ React29.createElement(GradientPreviewBackground, { gradient: value });
     case "pattern":
       if (!value.image) return null;
-      return /* @__PURE__ */ React28.createElement(
+      return /* @__PURE__ */ React29.createElement(
         PatternPreviewBackground,
         {
           fillType: value.patternFillType,
@@ -6814,7 +7182,7 @@ var FillPreviewBackground = memo15(function FillPreviewBackground2({
 });
 // src/components/FillInputField.tsx
-var FillButton = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ React29.createElement(
+var FillButton = forwardRef13(({ className, ...props }, ref) => /* @__PURE__ */ React30.createElement(
   "button",
   {
     ref,
@@ -6822,14 +7190,14 @@ var FillButton = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */
     ...props
   }
 ));
-var FillInputField = memo16(
-  forwardRef12(function FillInputField2({ id, value, ...rest }, ref) {
-    return /* @__PURE__ */ React29.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React29.createElement(FillPreviewBackground, { value }));
+var FillInputField = memo17(
+  forwardRef13(function FillInputField2({ id, value, ...rest }, ref) {
+    return /* @__PURE__ */ React30.createElement(FillButton, { ref, id, ...rest }, /* @__PURE__ */ React30.createElement(FillPreviewBackground, { value }));
   })
 );
 // src/components/FloatingWindow.tsx
-import React30, { useCallback as useCallback15, useRef as useRef14, useState as useState17 } from "react";
+import React31, { useCallback as useCallback15, useRef as useRef14, useState as useState17 } from "react";
 var styles2 = {
   noSelect: {
     userSelect: "none",
@@ -6922,7 +7290,7 @@ function defaultRenderToolbar({
   toolbarContent,
   onClose
 }) {
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Small, { className: "flex-1 font-medium text-text" }, title), toolbarContent, /* @__PURE__ */ React31.createElement(
     IconButton,
     {
       iconName: "Cross3Icon",
@@ -7042,7 +7410,7 @@ var FloatingWindow = ({
     setResizeDirection(null);
     toggleGlobalTextSelection(false);
   }, []);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
     return () => {
@@ -7056,7 +7424,7 @@ var FloatingWindow = ({
     if (onClose) onClose();
     floatingWindowManager.closeWindow(currentFloatingWindow.id);
   }, [currentFloatingWindow.id, floatingWindowManager, onClose]);
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -7066,24 +7434,24 @@ var FloatingWindow = ({
         left: position.x,
         width: size3.width,
         height: size3.height,
-        outline: `1px solid var(--divider)`,
-        backgroundColor: "var(--canvas-background)"
+        outline: `1px solid ${cssVars.colors.divider}`,
+        backgroundColor: cssVars.colors.canvasBackground
       }
     },
-    /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(
       "div",
       {
         style: {
           ...styles2.toolbar,
-          backgroundColor: "var(--sidebar-background)"
+          backgroundColor: cssVars.colors.sidebarBackground
         },
         onMouseDown: handleMouseDown
       },
       renderToolbar({ title, toolbarContent, onClose: handleClose })
     ),
-    /* @__PURE__ */ React30.createElement(Divider, null),
-    /* @__PURE__ */ React30.createElement("div", { style: styles2.content }, children2),
-    Object.entries(resizeHandlePositions).map(([direction, style5]) => /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(Divider, null),
+    /* @__PURE__ */ React31.createElement("div", { style: styles2.content }, children2),
+    Object.entries(resizeHandlePositions).map(([direction, style5]) => /* @__PURE__ */ React31.createElement(
       "div",
       {
         key: direction,
@@ -7105,8 +7473,8 @@ import {
   hsvaToRgba,
   rgbaToHsva as rgbaToHsva2
 } from "@noya-app/noya-colorpicker";
-import React31, { memo as memo17, useCallback as useCallback16, useMemo as useMemo15 } from "react";
-var GradientPicker = memo17(function GradientPicker2({
+import React32, { memo as memo18, useCallback as useCallback16, useMemo as useMemo15 } from "react";
+var GradientPicker = memo18(function GradientPicker2({
   value,
   selectedStop,
   onChangeColor,
@@ -7140,14 +7508,14 @@ var GradientPicker = memo17(function GradientPicker2({
     },
     [onAdd]
   );
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     NoyaColorPicker,
     {
       onChange: handleChangeColor,
       colorModel,
       color: rgbaColor
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       Gradient,
       {
         gradients: value,
@@ -7158,20 +7526,20 @@ var GradientPicker = memo17(function GradientPicker2({
         onDelete
       }
     ),
-    /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 10 }),
-    /* @__PURE__ */ React31.createElement(Saturation, null),
-    /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 12 }),
-    /* @__PURE__ */ React31.createElement(Hue, null),
-    /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 5 }),
-    /* @__PURE__ */ React31.createElement(Alpha, null)
+    /* @__PURE__ */ React32.createElement(Spacer.Vertical, { size: 10 }),
+    /* @__PURE__ */ React32.createElement(Saturation, null),
+    /* @__PURE__ */ React32.createElement(Spacer.Vertical, { size: 12 }),
+    /* @__PURE__ */ React32.createElement(Hue, null),
+    /* @__PURE__ */ React32.createElement(Spacer.Vertical, { size: 5 }),
+    /* @__PURE__ */ React32.createElement(Alpha, null)
   );
 });
 // src/components/GridView.tsx
-import React33, {
+import React34, {
   createContext as createContext7,
-  forwardRef as forwardRef13,
-  memo as memo19,
+  forwardRef as forwardRef14,
+  memo as memo20,
   useCallback as useCallback18,
   useContext as useContext7,
   useMemo as useMemo16
@@ -7179,10 +7547,10 @@ import React33, {
 // src/components/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React32, { memo as memo18, useCallback as useCallback17, useState as useState18 } from "react";
-var ScrollArea = memo18(function ScrollArea2({ children: children2 }) {
+import React33, { memo as memo19, useCallback as useCallback17, useState as useState18 } from "react";
+var ScrollArea = memo19(function ScrollArea2({ children: children2 }) {
   const [scrollElementRef, setScrollElementRef] = useState18(null);
-  return /* @__PURE__ */ React32.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React32.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ React33.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React33.createElement(
     RadixScrollArea.Viewport,
     {
       className: "w-full h-full [&>div]:block",
@@ -7192,13 +7560,13 @@ var ScrollArea = memo18(function ScrollArea2({ children: children2 }) {
       )
     },
     typeof children2 === "function" ? scrollElementRef ? children2(scrollElementRef) : null : children2
-  ), /* @__PURE__ */ React32.createElement(
+  ), /* @__PURE__ */ React33.createElement(
     RadixScrollArea.Scrollbar,
     {
       orientation: "vertical",
       className: "scroll-component flex p-[3px] data-[orientation=vertical]:w-[10px]"
     },
-    /* @__PURE__ */ React32.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
+    /* @__PURE__ */ React33.createElement(RadixScrollArea.Thumb, { className: "scroll-component flex-1 rounded-[10px] bg-scrollbar" })
   )));
 });
@@ -7236,7 +7604,7 @@ var sizes = {
   }
 };
 var ItemTitle = ({ showBackground, children: children2 }) => {
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "span",
     {
       className: `font-sans text-heading5 leading-[1] text-text font-medium select-none whitespace-pre overflow-hidden text-ellipsis ${showBackground && "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"}`
@@ -7245,7 +7613,7 @@ var ItemTitle = ({ showBackground, children: children2 }) => {
   );
 };
 var ItemDescription = ({ showBackground, children: children2 }) => {
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "span",
     {
       className: `font-sans text-heading5 font-normal leading-[1] text-[0.7rem] text-text-muted select-none whitespace-pre overflow-hidden text-ellipsis ${showBackground && "bg-sidebar-background border border-dividerSubtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"}`
@@ -7254,7 +7622,7 @@ var ItemDescription = ({ showBackground, children: children2 }) => {
   );
 };
 var SectionTitle = ({ last = false, children: children2 }) => {
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "span",
     {
       className: `font-sans text-heading3 font-medium user-select-none whitespace-pre overflow-hidden text-ellipsis ${last ? "text-text" : "text-text-muted"}`
@@ -7262,7 +7630,7 @@ var SectionTitle = ({ last = false, children: children2 }) => {
     children2
   );
 };
-var GridViewItem = forwardRef13(function GridViewItem2({
+var GridViewItem = forwardRef14(function GridViewItem2({
   id,
   title,
   subtitle,
@@ -7278,7 +7646,7 @@ var GridViewItem = forwardRef13(function GridViewItem2({
   onContextMenu,
   style: style5
 }, forwardedRef) {
-  const [hovered, setHovered] = React33.useState(false);
+  const [hovered, setHovered] = React34.useState(false);
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       onHoverChange?.(isHovering);
@@ -7307,7 +7675,7 @@ var GridViewItem = forwardRef13(function GridViewItem2({
     },
     [onPress]
   );
-  let element = /* @__PURE__ */ React33.createElement(
+  let element = /* @__PURE__ */ React34.createElement(
     "div",
     {
       className: "flex flex-col relative focus:shadow-[0px_0px_0px_1px_var(--sidebar-background),_0px_0px_0px_3px_var(--primary)] focus:outline-none",
@@ -7317,7 +7685,7 @@ var GridViewItem = forwardRef13(function GridViewItem2({
       tabIndex: disabled ? void 0 : 0,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       "div",
       {
         className: cn(
@@ -7334,18 +7702,18 @@ var GridViewItem = forwardRef13(function GridViewItem2({
       },
       children2
     ),
-    textPosition === "below" && /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React33.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ React33.createElement(ItemDescription, null, subtitle || " ")),
-    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React33.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate g-0.5" }, title && /* @__PURE__ */ React33.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React33.createElement(ItemDescription, { showBackground: true }, subtitle)),
-    loading && /* @__PURE__ */ React33.createElement("div", { className: "flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]" }, /* @__PURE__ */ React33.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
+    textPosition === "below" && /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React34.createElement(ItemTitle, null, title || " "), /* @__PURE__ */ React34.createElement(ItemDescription, null, subtitle || " ")),
+    textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React34.createElement("div", { className: "absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate g-0.5" }, title && /* @__PURE__ */ React34.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React34.createElement(ItemDescription, { showBackground: true }, subtitle)),
+    loading && /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]" }, /* @__PURE__ */ React34.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
   );
   if (menuItems && onSelectMenuItem) {
-    element = /* @__PURE__ */ React33.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
+    element = /* @__PURE__ */ React34.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
   }
   if (textPosition === "toolip") {
-    element = /* @__PURE__ */ React33.createElement(
+    element = /* @__PURE__ */ React34.createElement(
       Tooltip,
       {
-        content: /* @__PURE__ */ React33.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React33.createElement(ItemTitle, null, title), /* @__PURE__ */ React33.createElement(ItemDescription, null, subtitle))
+        content: /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React34.createElement(ItemTitle, null, title), /* @__PURE__ */ React34.createElement(ItemDescription, null, subtitle))
       },
       element
     );
@@ -7384,7 +7752,7 @@ function GridViewRoot({
     }),
     [bordered, disabled, size3, textPosition]
   );
-  return /* @__PURE__ */ React33.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React33.createElement("div", { onClick: handleClick, className: `flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}` }, scrollable ? /* @__PURE__ */ React33.createElement(ScrollArea, null, children2) : children2));
+  return /* @__PURE__ */ React34.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React34.createElement("div", { onClick: handleClick, className: `flex flex-col ${scrollable ? "flex-1" : "flex-[0_0_auto]"}` }, scrollable ? /* @__PURE__ */ React34.createElement(ScrollArea, null, children2) : children2));
 }
 function GridViewSection({
   children: children2,
@@ -7392,28 +7760,28 @@ function GridViewSection({
 }) {
   const { size: size3 } = useContext7(GridViewContext);
   const gapStyle = { gap: `${sizes[size3].gap}px` };
-  return /* @__PURE__ */ React33.createElement("div", { className: cn(className, "text-text grid", `grid-cols-[auto-fill,_minmax(${sizes[size3].itemWidth}px,_1fr)]`), style: gapStyle }, children2);
+  return /* @__PURE__ */ React34.createElement("div", { className: cn(className, "text-text grid", `grid-cols-[auto-fill,_minmax(${sizes[size3].itemWidth}px,_1fr)]`), style: gapStyle }, children2);
 }
 function GridViewSectionHeader({ title }) {
   const grouped = title.split("/");
-  return /* @__PURE__ */ React33.createElement("div", { className: "px-5" }, /* @__PURE__ */ React33.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
-    grouped.map((title2, index) => /* @__PURE__ */ React33.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
-    /* @__PURE__ */ React33.createElement(SectionTitle, null, " / ")
+  return /* @__PURE__ */ React34.createElement("div", { className: "px-5" }, /* @__PURE__ */ React34.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
+    grouped.map((title2, index) => /* @__PURE__ */ React34.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
+    /* @__PURE__ */ React34.createElement(SectionTitle, null, " / ")
   ));
 }
 var GridView;
 ((GridView2) => {
-  GridView2.Root = memo19(GridViewRoot);
-  GridView2.Item = memo19(GridViewItem);
-  GridView2.Section = memo19(GridViewSection);
-  GridView2.SectionHeader = memo19(GridViewSectionHeader);
+  GridView2.Root = memo20(GridViewRoot);
+  GridView2.Item = memo20(GridViewItem);
+  GridView2.Section = memo20(GridViewSection);
+  GridView2.SectionHeader = memo20(GridViewSectionHeader);
 })(GridView || (GridView = {}));
 // src/components/InputFieldWithCompletions.tsx
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import React57, {
-  forwardRef as forwardRef15,
-  memo as memo22,
+import React58, {
+  forwardRef as forwardRef16,
+  memo as memo23,
   useCallback as useCallback21,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle3,
@@ -7496,12 +7864,12 @@ function mergeRanges(ranges) {
 // src/components/ListView.tsx
 import { range } from "@noya-app/noya-utils";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React56, {
+import React57, {
   Children as Children4,
   createContext as createContext9,
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   isValidElement as isValidElement3,
-  memo as memo21,
+  memo as memo22,
   useCallback as useCallback20,
   useContext as useContext9,
   useImperativeHandle as useImperativeHandle2,
@@ -7518,7 +7886,7 @@ var import_getPrototypeOf2 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized2 = __toESM(require_assertThisInitialized());
 var import_inherits2 = __toESM(require_inherits());
 var import_defineProperty4 = __toESM(require_defineProperty());
-import * as React36 from "react";
+import * as React37 from "react";
 // ../../node_modules/react-lifecycles-compat/react-lifecycles-compat.es.js
 function componentWillMount() {
@@ -7615,7 +7983,7 @@ var import_getPrototypeOf = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized = __toESM(require_assertThisInitialized());
 var import_inherits = __toESM(require_inherits());
 var import_defineProperty3 = __toESM(require_defineProperty());
-import * as React35 from "react";
+import * as React36 from "react";
 // ../../node_modules/clsx/dist/clsx.m.js
 function r(e) {
@@ -7654,7 +8022,7 @@ var import_createClass = __toESM(require_createClass());
 var import_defineProperty = __toESM(require_defineProperty());
 // ../../node_modules/react-virtualized/dist/es/Grid/types.js
-import * as React34 from "react";
+import * as React35 from "react";
 var import_prop_types = __toESM(require_prop_types());
 var bpfrpt_proptype_CellPosition = process.env.NODE_ENV === "production" ? null : {
   "columnIndex": import_prop_types.default.number.isRequired,
@@ -8814,7 +9182,7 @@ var Grid = (_temp = _class = /* @__PURE__ */ function(_React$PureComponent) {
       gridStyle.overflowY = totalRowsHeight + horizontalScrollBarSize <= height ? "hidden" : "auto";
       var childrenToDisplay = this._childrenToDisplay;
       var showNoContentRenderer = childrenToDisplay.length === 0 && height > 0 && width > 0;
-      return React35.createElement("div", (0, import_extends.default)({
+      return React36.createElement("div", (0, import_extends.default)({
         ref: this._setScrollingContainerRef
       }, containerProps, {
         "aria-label": this.props["aria-label"],
@@ -8825,7 +9193,7 @@ var Grid = (_temp = _class = /* @__PURE__ */ function(_React$PureComponent) {
         role,
         style: _objectSpread({}, gridStyle, {}, style5),
         tabIndex
-      }), childrenToDisplay.length > 0 && React35.createElement("div", {
+      }), childrenToDisplay.length > 0 && React36.createElement("div", {
         className: "ReactVirtualized__Grid__innerScrollContainer",
         role: containerRole,
         style: _objectSpread({
@@ -9283,7 +9651,7 @@ var Grid = (_temp = _class = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return Grid2;
-}(React35.PureComponent), (0, import_defineProperty3.default)(_class, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React36.PureComponent), (0, import_defineProperty3.default)(_class, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "aria-label": import_prop_types3.default.string.isRequired,
   "aria-readonly": import_prop_types3.default.bool,
   /**
@@ -9589,7 +9957,7 @@ var ArrowKeyStepper = (_temp2 = _class2 = /* @__PURE__ */ function(_React$PureCo
     value: function render() {
       var _this$props2 = this.props, className = _this$props2.className, children2 = _this$props2.children;
       var _this$_getScrollState3 = this._getScrollState(), scrollToColumn = _this$_getScrollState3.scrollToColumn, scrollToRow = _this$_getScrollState3.scrollToRow;
-      return React36.createElement("div", {
+      return React37.createElement("div", {
         className,
         onKeyDown: this._onKeyDown
       }, children2({
@@ -9641,7 +10009,7 @@ var ArrowKeyStepper = (_temp2 = _class2 = /* @__PURE__ */ function(_React$PureCo
     }
   }]);
   return ArrowKeyStepper2;
-}(React36.PureComponent), (0, import_defineProperty4.default)(_class2, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React37.PureComponent), (0, import_defineProperty4.default)(_class2, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "children": import_prop_types5.default.func.isRequired,
   "className": import_prop_types5.default.string,
   "columnCount": import_prop_types5.default.number.isRequired,
@@ -9670,7 +10038,7 @@ var import_getPrototypeOf3 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized3 = __toESM(require_assertThisInitialized());
 var import_inherits3 = __toESM(require_inherits());
 var import_defineProperty5 = __toESM(require_defineProperty());
-import * as React37 from "react";
+import * as React38 from "react";
 // ../../node_modules/react-virtualized/dist/es/vendor/detectElementResize.js
 function createDetectElementResize(nonce, hostWindow) {
@@ -9949,7 +10317,7 @@ var AutoSizer3 = (_temp3 = _class3 = /* @__PURE__ */ function(_React$Component)
         outerStyle.width = 0;
         childParams.width = width;
       }
-      return React37.createElement("div", {
+      return React38.createElement("div", {
         className,
         ref: this._setRef,
         style: _objectSpread3({}, outerStyle, {}, style5)
@@ -9957,7 +10325,7 @@ var AutoSizer3 = (_temp3 = _class3 = /* @__PURE__ */ function(_React$Component)
     }
   }]);
   return AutoSizer4;
-}(React37.Component), (0, import_defineProperty5.default)(_class3, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React38.Component), (0, import_defineProperty5.default)(_class3, "propTypes", process.env.NODE_ENV === "production" ? null : {
   /** Function responsible for rendering children.*/
   "children": import_prop_types6.default.func.isRequired,
   /** Optional custom CSS class name to attach to root AutoSizer element.  */
@@ -9993,7 +10361,7 @@ var import_getPrototypeOf4 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized4 = __toESM(require_assertThisInitialized());
 var import_inherits4 = __toESM(require_inherits());
 var import_defineProperty6 = __toESM(require_defineProperty());
-import * as React38 from "react";
+import * as React39 from "react";
 import { findDOMNode } from "react-dom";
 // ../../node_modules/react-virtualized/dist/es/CellMeasurer/types.js
@@ -10115,7 +10483,7 @@ var CellMeasurer = (_temp4 = _class4 = /* @__PURE__ */ function(_React$PureCompo
     }
   }]);
   return CellMeasurer2;
-}(React38.PureComponent), (0, import_defineProperty6.default)(_class4, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React39.PureComponent), (0, import_defineProperty6.default)(_class4, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "cache": function cache() {
     return (typeof bpfrpt_proptype_CellMeasureCache === "function" ? bpfrpt_proptype_CellMeasureCache.isRequired ? bpfrpt_proptype_CellMeasureCache.isRequired : bpfrpt_proptype_CellMeasureCache : import_prop_types8.default.shape(bpfrpt_proptype_CellMeasureCache).isRequired).apply(this, arguments);
   },
@@ -10148,7 +10516,7 @@ var import_assertThisInitialized6 = __toESM(require_assertThisInitialized());
 var import_inherits6 = __toESM(require_inherits());
 var import_defineProperty9 = __toESM(require_defineProperty());
 var import_prop_types11 = __toESM(require_prop_types());
-import * as React40 from "react";
+import * as React41 from "react";
 // ../../node_modules/react-virtualized/dist/es/Collection/CollectionView.js
 var import_classCallCheck8 = __toESM(require_classCallCheck());
@@ -10159,7 +10527,7 @@ var import_assertThisInitialized5 = __toESM(require_assertThisInitialized());
 var import_inherits5 = __toESM(require_inherits());
 var import_defineProperty8 = __toESM(require_defineProperty());
 var import_prop_types9 = __toESM(require_prop_types());
-import * as React39 from "react";
+import * as React40 from "react";
 function ownKeys4(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -10379,7 +10747,7 @@ var CollectionView = /* @__PURE__ */ function(_React$PureComponent) {
       var horizontalScrollBarSize = totalWidth > width ? this._scrollbarSize : 0;
       collectionStyle.overflowX = totalWidth + verticalScrollBarSize <= width ? "hidden" : "auto";
       collectionStyle.overflowY = totalHeight + horizontalScrollBarSize <= height ? "hidden" : "auto";
-      return React39.createElement("div", {
+      return React40.createElement("div", {
         ref: this._setScrollingContainerRef,
         "aria-label": this.props["aria-label"],
         className: clsx_m_default("ReactVirtualized__Collection", className),
@@ -10388,7 +10756,7 @@ var CollectionView = /* @__PURE__ */ function(_React$PureComponent) {
         role: "grid",
         style: _objectSpread4({}, collectionStyle, {}, style5),
         tabIndex: 0
-      }, cellCount > 0 && React39.createElement("div", {
+      }, cellCount > 0 && React40.createElement("div", {
         className: "ReactVirtualized__Collection__innerScrollContainer",
         style: {
           height: totalHeight,
@@ -10483,7 +10851,7 @@ var CollectionView = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return CollectionView2;
-}(React39.PureComponent);
+}(React40.PureComponent);
 (0, import_defineProperty8.default)(CollectionView, "defaultProps", {
   "aria-label": "grid",
   horizontalOverscanSize: 0,
@@ -10826,7 +11194,7 @@ var Collection = /* @__PURE__ */ function(_React$PureComponent) {
     key: "render",
     value: function render() {
       var props = (0, import_extends2.default)({}, this.props);
-      return React40.createElement(CollectionView_default, (0, import_extends2.default)({
+      return React41.createElement(CollectionView_default, (0, import_extends2.default)({
         cellLayoutManager: this,
         isScrollingChange: this._isScrollingChange,
         ref: this._setCollectionViewRef
@@ -10934,7 +11302,7 @@ var Collection = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return Collection2;
-}(React40.PureComponent);
+}(React41.PureComponent);
 (0, import_defineProperty9.default)(Collection, "defaultProps", {
   "aria-label": "grid",
   cellGroupRenderer: defaultCellGroupRenderer
@@ -11008,7 +11376,7 @@ var import_getPrototypeOf7 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized7 = __toESM(require_assertThisInitialized());
 var import_inherits7 = __toESM(require_inherits());
 var import_prop_types12 = __toESM(require_prop_types());
-import * as React41 from "react";
+import * as React42 from "react";
 var ColumnSizer = /* @__PURE__ */ function(_React$PureComponent) {
   (0, import_inherits7.default)(ColumnSizer2, _React$PureComponent);
   function ColumnSizer2(props, context) {
@@ -11061,7 +11429,7 @@ var ColumnSizer = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return ColumnSizer2;
-}(React41.PureComponent);
+}(React42.PureComponent);
 ColumnSizer.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Function responsible for rendering a virtualized Grid.
@@ -11093,7 +11461,7 @@ var import_assertThisInitialized8 = __toESM(require_assertThisInitialized());
 var import_inherits8 = __toESM(require_inherits());
 var import_defineProperty10 = __toESM(require_defineProperty());
 var import_prop_types13 = __toESM(require_prop_types());
-import * as React42 from "react";
+import * as React43 from "react";
 var InfiniteLoader = /* @__PURE__ */ function(_React$PureComponent) {
   (0, import_inherits8.default)(InfiniteLoader2, _React$PureComponent);
   function InfiniteLoader2(props, context) {
@@ -11185,7 +11553,7 @@ var InfiniteLoader = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return InfiniteLoader2;
-}(React42.PureComponent);
+}(React43.PureComponent);
 (0, import_defineProperty10.default)(InfiniteLoader, "defaultProps", {
   minimumBatchSize: 10,
   rowCount: 0,
@@ -11306,11 +11674,11 @@ var import_getPrototypeOf9 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized9 = __toESM(require_assertThisInitialized());
 var import_inherits9 = __toESM(require_inherits());
 var import_defineProperty11 = __toESM(require_defineProperty());
-import * as React44 from "react";
+import * as React45 from "react";
 // ../../node_modules/react-virtualized/dist/es/List/types.js
 var import_prop_types14 = __toESM(require_prop_types());
-import * as React43 from "react";
+import * as React44 from "react";
 var bpfrpt_proptype_RowRendererParams = process.env.NODE_ENV === "production" ? null : {
   "index": import_prop_types14.default.number.isRequired,
   "isScrolling": import_prop_types14.default.bool.isRequired,
@@ -11481,7 +11849,7 @@ var List = (_temp5 = _class5 = /* @__PURE__ */ function(_React$PureComponent) {
     value: function render() {
       var _this$props = this.props, className = _this$props.className, noRowsRenderer4 = _this$props.noRowsRenderer, scrollToIndex = _this$props.scrollToIndex, width = _this$props.width;
       var classNames = clsx_m_default("ReactVirtualized__List", className);
-      return React44.createElement(Grid_default, (0, import_extends3.default)({}, this.props, {
+      return React45.createElement(Grid_default, (0, import_extends3.default)({}, this.props, {
         autoContainerWidth: true,
         cellRenderer: this._cellRenderer,
         className: classNames,
@@ -11496,7 +11864,7 @@ var List = (_temp5 = _class5 = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return List2;
-}(React44.PureComponent), (0, import_defineProperty11.default)(_class5, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React45.PureComponent), (0, import_defineProperty11.default)(_class5, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "aria-label": import_prop_types15.default.string,
   /**
    * Removes fixed height from the scrollingContainer so that the total height
@@ -11582,7 +11950,7 @@ var import_getPrototypeOf10 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized10 = __toESM(require_assertThisInitialized());
 var import_inherits10 = __toESM(require_inherits());
 var import_defineProperty13 = __toESM(require_defineProperty());
-import * as React45 from "react";
+import * as React46 from "react";
 // ../../node_modules/react-virtualized/dist/es/Masonry/PositionCache.js
 var import_slicedToArray = __toESM(require_slicedToArray());
@@ -12357,7 +12725,7 @@ var Masonry = (_temp6 = _class6 = /* @__PURE__ */ function(_React$PureComponent)
       }
       this._startIndex = startIndex;
       this._stopIndex = stopIndex;
-      return React45.createElement("div", {
+      return React46.createElement("div", {
         ref: this._setScrollingContainerRef,
         "aria-label": this.props["aria-label"],
         className: clsx_m_default("ReactVirtualized__Masonry", className),
@@ -12376,7 +12744,7 @@ var Masonry = (_temp6 = _class6 = /* @__PURE__ */ function(_React$PureComponent)
           willChange: "transform"
         }, style5),
         tabIndex
-      }, React45.createElement("div", {
+      }, React46.createElement("div", {
         className: "ReactVirtualized__Masonry__innerScrollContainer",
         style: {
           width: "100%",
@@ -12466,7 +12834,7 @@ var Masonry = (_temp6 = _class6 = /* @__PURE__ */ function(_React$PureComponent)
     }
   }]);
   return Masonry2;
-}(React45.PureComponent), (0, import_defineProperty13.default)(_class6, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React46.PureComponent), (0, import_defineProperty13.default)(_class6, "propTypes", process.env.NODE_ENV === "production" ? null : {
   "autoHeight": import_prop_types16.default.bool.isRequired,
   "cellCount": import_prop_types16.default.number.isRequired,
   "cellMeasurerCache": function cellMeasurerCache() {
@@ -12540,7 +12908,7 @@ var import_assertThisInitialized11 = __toESM(require_assertThisInitialized());
 var import_inherits11 = __toESM(require_inherits());
 var import_defineProperty15 = __toESM(require_defineProperty());
 var import_prop_types17 = __toESM(require_prop_types());
-import * as React46 from "react";
+import * as React47 from "react";
 // ../../node_modules/react-virtualized/dist/es/MultiGrid/CellMeasurerCacheDecorator.js
 var import_classCallCheck17 = __toESM(require_classCallCheck());
@@ -12683,7 +13051,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
       var rowIndex = _ref.rowIndex, rest = (0, import_objectWithoutProperties2.default)(_ref, ["rowIndex"]);
       var _this$props = _this.props, cellRenderer3 = _this$props.cellRenderer, fixedRowCount = _this$props.fixedRowCount, rowCount = _this$props.rowCount;
       if (rowIndex === rowCount - fixedRowCount) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           key: rest.key,
           style: _objectSpread6({}, rest.style, {
             height: SCROLLBAR_SIZE_BUFFER
@@ -12709,7 +13077,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
       var columnIndex = _ref3.columnIndex, rest = (0, import_objectWithoutProperties2.default)(_ref3, ["columnIndex"]);
       var _this$props3 = _this.props, cellRenderer3 = _this$props3.cellRenderer, columnCount = _this$props3.columnCount, fixedColumnCount = _this$props3.fixedColumnCount;
       if (columnIndex === columnCount - fixedColumnCount) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           key: rest.key,
           style: _objectSpread6({}, rest.style, {
             width: SCROLLBAR_SIZE_BUFFER
@@ -12898,14 +13266,14 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         return null;
       }
       var _this$state4 = this.state, scrollLeft = _this$state4.scrollLeft, scrollTop = _this$state4.scrollTop;
-      return React46.createElement("div", {
+      return React47.createElement("div", {
         style: this._containerOuterStyle
-      }, React46.createElement("div", {
+      }, React47.createElement("div", {
         style: this._containerTopStyle
       }, this._renderTopLeftGrid(rest), this._renderTopRightGrid(_objectSpread6({}, rest, {
         onScroll: onScroll7,
         scrollLeft
-      }))), React46.createElement("div", {
+      }))), React47.createElement("div", {
         style: this._containerBottomStyle
       }, this._renderBottomLeftGrid(_objectSpread6({}, rest, {
         onScroll: onScroll7,
@@ -13087,7 +13455,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         return null;
       }
       var additionalRowCount = showVerticalScrollbar ? 1 : 0, height = this._getBottomGridHeight(props), width = this._getLeftGridWidth(props), scrollbarSize2 = this.state.showVerticalScrollbar ? this.state.scrollbarSize : 0, gridWidth = hideBottomLeftGridScrollbar ? width + scrollbarSize2 : width;
-      var bottomLeftGrid = React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      var bottomLeftGrid = React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         cellRenderer: this._cellRendererBottomLeftGrid,
         className: this.props.classNameBottomLeftGrid,
         columnCount: fixedColumnCount,
@@ -13102,7 +13470,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         width: gridWidth
       }));
       if (hideBottomLeftGridScrollbar) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           className: "BottomLeftGrid_ScrollWrapper",
           style: _objectSpread6({}, this._bottomLeftGridStyle, {
             height,
@@ -13117,7 +13485,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
     key: "_renderBottomRightGrid",
     value: function _renderBottomRightGrid(props) {
       var columnCount = props.columnCount, fixedColumnCount = props.fixedColumnCount, fixedRowCount = props.fixedRowCount, rowCount = props.rowCount, scrollToColumn = props.scrollToColumn, scrollToRow = props.scrollToRow;
-      return React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      return React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         cellRenderer: this._cellRendererBottomRightGrid,
         className: this.props.classNameBottomRightGrid,
         columnCount: Math.max(0, columnCount - fixedColumnCount),
@@ -13142,7 +13510,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
       if (!fixedColumnCount || !fixedRowCount) {
         return null;
       }
-      return React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      return React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         className: this.props.classNameTopLeftGrid,
         columnCount: fixedColumnCount,
         height: this._getTopGridHeight(props),
@@ -13169,7 +13537,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
           left: 0
         });
       }
-      var topRightGrid = React46.createElement(Grid_default, (0, import_extends4.default)({}, props, {
+      var topRightGrid = React47.createElement(Grid_default, (0, import_extends4.default)({}, props, {
         cellRenderer: this._cellRendererTopRightGrid,
         className: this.props.classNameTopRightGrid,
         columnCount: Math.max(0, columnCount - fixedColumnCount) + additionalColumnCount,
@@ -13185,7 +13553,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
         width
       }));
       if (hideTopRightGridScrollbar) {
-        return React46.createElement("div", {
+        return React47.createElement("div", {
           className: "TopRightGrid_ScrollWrapper",
           style: _objectSpread6({}, this._topRightGridStyle, {
             height,
@@ -13209,7 +13577,7 @@ var MultiGrid = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return MultiGrid2;
-}(React46.PureComponent);
+}(React47.PureComponent);
 (0, import_defineProperty15.default)(MultiGrid, "defaultProps", {
   classNameBottomLeftGrid: "",
   classNameBottomRightGrid: "",
@@ -13257,7 +13625,7 @@ var import_getPrototypeOf12 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized12 = __toESM(require_assertThisInitialized());
 var import_inherits12 = __toESM(require_inherits());
 var import_prop_types18 = __toESM(require_prop_types());
-import * as React47 from "react";
+import * as React48 from "react";
 var ScrollSync = /* @__PURE__ */ function(_React$PureComponent) {
   (0, import_inherits12.default)(ScrollSync2, _React$PureComponent);
   function ScrollSync2(props, context) {
@@ -13305,7 +13673,7 @@ var ScrollSync = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return ScrollSync2;
-}(React47.PureComponent);
+}(React48.PureComponent);
 ScrollSync.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Function responsible for rendering 2 or more virtualized components.
@@ -13405,11 +13773,11 @@ function defaultCellRenderer(_ref) {
 }
 // ../../node_modules/react-virtualized/dist/es/Table/defaultHeaderRowRenderer.js
-import * as React48 from "react";
+import * as React49 from "react";
 var import_prop_types20 = __toESM(require_prop_types());
 function defaultHeaderRowRenderer(_ref) {
   var className = _ref.className, columns = _ref.columns, style5 = _ref.style;
-  return React48.createElement("div", {
+  return React49.createElement("div", {
     className,
     role: "row",
     style: style5
@@ -13418,11 +13786,11 @@ function defaultHeaderRowRenderer(_ref) {
 defaultHeaderRowRenderer.propTypes = process.env.NODE_ENV === "production" ? null : bpfrpt_proptype_HeaderRowRendererParams === import_prop_types20.default.any ? {} : bpfrpt_proptype_HeaderRowRendererParams;
 // ../../node_modules/react-virtualized/dist/es/Table/defaultHeaderRenderer.js
-import * as React50 from "react";
+import * as React51 from "react";
 // ../../node_modules/react-virtualized/dist/es/Table/SortIndicator.js
 var import_prop_types21 = __toESM(require_prop_types());
-import * as React49 from "react";
+import * as React50 from "react";
 // ../../node_modules/react-virtualized/dist/es/Table/SortDirection.js
 var SortDirection = {
@@ -13446,16 +13814,16 @@ function SortIndicator(_ref) {
     "ReactVirtualized__Table__sortableHeaderIcon--ASC": sortDirection === SortDirection_default.ASC,
     "ReactVirtualized__Table__sortableHeaderIcon--DESC": sortDirection === SortDirection_default.DESC
   });
-  return React49.createElement("svg", {
+  return React50.createElement("svg", {
     className: classNames,
     width: 18,
     height: 18,
     viewBox: "0 0 24 24"
-  }, sortDirection === SortDirection_default.ASC ? React49.createElement("path", {
+  }, sortDirection === SortDirection_default.ASC ? React50.createElement("path", {
     d: "M7 14l5-5 5 5z"
-  }) : React49.createElement("path", {
+  }) : React50.createElement("path", {
     d: "M7 10l5 5 5-5z"
-  }), React49.createElement("path", {
+  }), React50.createElement("path", {
     d: "M0 0h24v24H0z",
     fill: "none"
   }));
@@ -13469,13 +13837,13 @@ var import_prop_types22 = __toESM(require_prop_types());
 function defaultHeaderRenderer(_ref) {
   var dataKey = _ref.dataKey, label = _ref.label, sortBy = _ref.sortBy, sortDirection = _ref.sortDirection;
   var showSortIndicator = sortBy === dataKey;
-  var children2 = [React50.createElement("span", {
+  var children2 = [React51.createElement("span", {
     className: "ReactVirtualized__Table__headerTruncatedText",
     key: "label",
     title: typeof label === "string" ? label : null
   }, label)];
   if (showSortIndicator) {
-    children2.push(React50.createElement(SortIndicator, {
+    children2.push(React51.createElement(SortIndicator, {
       key: "SortIndicator",
       sortDirection
     }));
@@ -13486,7 +13854,7 @@ defaultHeaderRenderer.propTypes = process.env.NODE_ENV === "production" ? null :
 // ../../node_modules/react-virtualized/dist/es/Table/defaultRowRenderer.js
 var import_extends5 = __toESM(require_extends());
-import * as React51 from "react";
+import * as React52 from "react";
 var import_prop_types23 = __toESM(require_prop_types());
 function defaultRowRenderer(_ref) {
   var className = _ref.className, columns = _ref.columns, index = _ref.index, key = _ref.key, onRowClick = _ref.onRowClick, onRowDoubleClick = _ref.onRowDoubleClick, onRowMouseOut = _ref.onRowMouseOut, onRowMouseOver = _ref.onRowMouseOver, onRowRightClick = _ref.onRowRightClick, rowData4 = _ref.rowData, style5 = _ref.style;
@@ -13542,7 +13910,7 @@ function defaultRowRenderer(_ref) {
       };
     }
   }
-  return React51.createElement("div", (0, import_extends5.default)({}, a11yProps, {
+  return React52.createElement("div", (0, import_extends5.default)({}, a11yProps, {
     className,
     key,
     role: "row",
@@ -13558,7 +13926,7 @@ var import_getPrototypeOf13 = __toESM(require_getPrototypeOf());
 var import_inherits13 = __toESM(require_inherits());
 var import_defineProperty16 = __toESM(require_defineProperty());
 var import_prop_types24 = __toESM(require_prop_types());
-import * as React52 from "react";
+import * as React53 from "react";
 var Column = /* @__PURE__ */ function(_React$Component) {
   (0, import_inherits13.default)(Column3, _React$Component);
   function Column3() {
@@ -13566,7 +13934,7 @@ var Column = /* @__PURE__ */ function(_React$Component) {
     return (0, import_possibleConstructorReturn13.default)(this, (0, import_getPrototypeOf13.default)(Column3).apply(this, arguments));
   }
   return Column3;
-}(React52.Component);
+}(React53.Component);
 (0, import_defineProperty16.default)(Column, "defaultProps", {
   cellDataGetter: defaultCellDataGetter,
   cellRenderer: defaultCellRenderer,
@@ -13636,7 +14004,7 @@ var import_assertThisInitialized13 = __toESM(require_assertThisInitialized());
 var import_inherits14 = __toESM(require_inherits());
 var import_defineProperty17 = __toESM(require_defineProperty());
 var import_prop_types25 = __toESM(require_prop_types());
-import * as React53 from "react";
+import * as React54 from "react";
 import { findDOMNode as findDOMNode2 } from "react-dom";
 function ownKeys7(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -13804,16 +14172,16 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
         index: -1
       }) : rowStyle;
       this._cachedColumnStyles = [];
-      React53.Children.toArray(children2).forEach(function(column, index) {
+      React54.Children.toArray(children2).forEach(function(column, index) {
         var flexStyles = _this2._getFlexStyleForColumn(column, column.props.style);
         _this2._cachedColumnStyles[index] = _objectSpread7({
           overflow: "hidden"
         }, flexStyles);
       });
-      return React53.createElement("div", {
+      return React54.createElement("div", {
         "aria-label": this.props["aria-label"],
         "aria-labelledby": this.props["aria-labelledby"],
-        "aria-colcount": React53.Children.toArray(children2).length,
+        "aria-colcount": React54.Children.toArray(children2).length,
         "aria-rowcount": this.props.rowCount,
         className: clsx_m_default("ReactVirtualized__Table", className),
         id,
@@ -13828,7 +14196,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
           paddingRight: scrollbarWidth,
           width
         }, rowStyleObject)
-      }), React53.createElement(Grid_default, (0, import_extends6.default)({}, this.props, {
+      }), React54.createElement(Grid_default, (0, import_extends6.default)({}, this.props, {
         "aria-readonly": null,
         autoContainerWidth: true,
         className: clsx_m_default("ReactVirtualized__Table__Grid", gridClassName),
@@ -13879,7 +14247,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
       };
       var style5 = this._cachedColumnStyles[columnIndex];
       var title = typeof renderedCell === "string" ? renderedCell : null;
-      return React53.createElement("div", {
+      return React54.createElement("div", {
         "aria-colindex": columnIndex + 1,
         "aria-describedby": id,
         className: clsx_m_default("ReactVirtualized__Table__rowColumn", className),
@@ -13940,7 +14308,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
       if (sortBy === dataKey) {
         headerAriaSort = sortDirection === SortDirection_default.ASC ? "ascending" : "descending";
       }
-      return React53.createElement("div", {
+      return React54.createElement("div", {
         "aria-label": headerAriaLabel,
         "aria-sort": headerAriaSort,
         className: classNames,
@@ -13969,7 +14337,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
       var rowData4 = rowGetter({
         index
       });
-      var columns = React53.Children.toArray(children2).map(function(column, columnIndex) {
+      var columns = React54.Children.toArray(children2).map(function(column, columnIndex) {
         return _this3._createColumn({
           column,
           columnIndex,
@@ -14027,7 +14395,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
     value: function _getHeaderColumns() {
       var _this4 = this;
       var _this$props4 = this.props, children2 = _this$props4.children, disableHeader = _this$props4.disableHeader;
-      var items = disableHeader ? [] : React53.Children.toArray(children2);
+      var items = disableHeader ? [] : React54.Children.toArray(children2);
       return items.map(function(column, index) {
         return _this4._createHeader({
           column,
@@ -14081,7 +14449,7 @@ var Table = /* @__PURE__ */ function(_React$PureComponent) {
     }
   }]);
   return Table2;
-}(React53.PureComponent);
+}(React54.PureComponent);
 (0, import_defineProperty17.default)(Table, "defaultProps", {
   disableHeader: false,
   estimatedRowSize: 30,
@@ -14117,7 +14485,7 @@ Table.propTypes = process.env.NODE_ENV !== "production" ? {
   autoHeight: import_prop_types25.default.bool,
   /** One or more Columns describing the data displayed in this row */
   children: function children(props) {
-    var children2 = React53.Children.toArray(props.children);
+    var children2 = React54.Children.toArray(props.children);
     for (var i = 0; i < children2.length; i++) {
       var childType = children2[i].type;
       if (childType !== Column && !(childType.prototype instanceof Column)) {
@@ -14284,7 +14652,7 @@ var import_getPrototypeOf15 = __toESM(require_getPrototypeOf());
 var import_assertThisInitialized14 = __toESM(require_assertThisInitialized());
 var import_inherits15 = __toESM(require_inherits());
 var import_defineProperty18 = __toESM(require_defineProperty());
-import * as React54 from "react";
+import * as React55 from "react";
 import * as ReactDOM from "react-dom";
 // ../../node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
@@ -14604,7 +14972,7 @@ var WindowScroller = (_temp7 = _class7 = /* @__PURE__ */ function(_React$PureCom
     }
   }]);
   return WindowScroller2;
-}(React54.PureComponent), (0, import_defineProperty18.default)(_class7, "propTypes", process.env.NODE_ENV === "production" ? null : {
+}(React55.PureComponent), (0, import_defineProperty18.default)(_class7, "propTypes", process.env.NODE_ENV === "production" ? null : {
   /**
    * Function responsible for rendering children.
    * This function should implement the following signature:
@@ -14679,9 +15047,9 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
-import React55, {
+import React56, {
   createContext as createContext8,
-  memo as memo20,
+  memo as memo21,
   useCallback as useCallback19,
   useContext as useContext8,
   useEffect as useEffect13,
@@ -14819,7 +15187,7 @@ function SortableRoot({
   useEffect13(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     SortableItemContext.Provider,
     {
       value: useMemo17(
@@ -14833,7 +15201,7 @@ function SortableRoot({
         [acceptsDrop, axis, keys, position, setActivatorEvent]
       )
     },
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       DndContext,
       {
         sensors,
@@ -14842,9 +15210,9 @@ function SortableRoot({
         onDragMove: handleDragMove,
         onDragEnd: handleDragEnd
       },
-      /* @__PURE__ */ React55.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children2),
+      /* @__PURE__ */ React56.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children2),
       mounted && renderOverlay && createPortal2(
-        /* @__PURE__ */ React55.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
+        /* @__PURE__ */ React56.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
         document.body
       )
     )
@@ -14852,8 +15220,8 @@ function SortableRoot({
 }
 var Sortable;
 ((Sortable2) => {
-  Sortable2.Item = memo20(SortableItem);
-  Sortable2.Root = memo20(SortableRoot);
+  Sortable2.Item = memo21(SortableItem);
+  Sortable2.Root = memo21(SortableRoot);
 })(Sortable || (Sortable = {}));
 // src/components/ListView.tsx
@@ -14881,7 +15249,7 @@ var ListViewRowTitle = ({
   className,
   children: children2,
   ...props
-}) => /* @__PURE__ */ React56.createElement(
+}) => /* @__PURE__ */ React57.createElement(
   "span",
   {
     className: `flex-1 overflow-hidden text-ellipsis whitespace-pre ${className ?? ""}`,
@@ -14889,8 +15257,8 @@ var ListViewRowTitle = ({
   },
   children2
 );
-var ListViewEditableRowTitleElement = forwardRef14(
-  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ React56.createElement(
+var ListViewEditableRowTitleElement = forwardRef15(
+  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ React57.createElement(
     InputField.Input,
     {
       ref: forwardedRef,
@@ -14914,7 +15282,7 @@ function ListViewEditableRowTitle({
       element.select();
     }, 0);
   }, [autoFocus]);
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     ListViewEditableRowTitleElement,
     {
       ref: inputRef,
@@ -14932,22 +15300,7 @@ function getPositionMargin(marginType) {
     bottom: marginType === "bottom" || marginType === "vertical" ? 8 : 0
   };
 }
-var theme = {
-  colors: {
-    textMuted: "var(--text-muted)",
-    listView: {
-      raisedBackground: "var(--listview-raised-background)"
-    },
-    secondary: "var(--secondary)",
-    primary: "var(--primary)",
-    textDisabled: "var(--text-disabled)",
-    primaryLight: "var(--primary-light)",
-    secondaryLight: "var(--secondary-light)",
-    activeBackground: "var(--active-background)",
-    dividerSubtle: "var(--divider-subtle)"
-  }
-};
-var RowContainer = forwardRef14(
+var RowContainer = forwardRef15(
   ({
     className,
     $marginType,
@@ -14964,10 +15317,12 @@ var RowContainer = forwardRef14(
     $gap,
     $backgroundColor,
     style: style5,
+    "aria-describedby": _,
+    // Causes hydration warning
     ...props
   }, ref) => {
     const margin = getPositionMargin($marginType);
-    return /* @__PURE__ */ React56.createElement(
+    return /* @__PURE__ */ React57.createElement(
       "div",
       {
         ref,
@@ -14991,19 +15346,19 @@ var RowContainer = forwardRef14(
               marginBottom: `${margin.bottom}px`
             }
           },
-          color: theme.colors.textMuted,
+          color: cssVars.colors.textMuted,
           ...$isSectionHeader && {
-            backgroundColor: theme.colors.listView.raisedBackground,
+            backgroundColor: cssVars.colors.listviewRaisedBackground,
             ...$sectionHeaderVariant === "label" && {
-              color: theme.colors.textDisabled
+              color: cssVars.colors.textDisabled
             }
           },
           ...$disabled && {
-            color: theme.colors.textDisabled
+            color: cssVars.colors.textDisabled
           },
           ...$selected && {
             color: "white",
-            backgroundColor: theme.colors[$colorScheme]
+            backgroundColor: cssVars.colors[$colorScheme]
           },
           display: "flex",
           alignItems: "center",
@@ -15017,15 +15372,15 @@ var RowContainer = forwardRef14(
           },
           position: "relative",
           ...$hovered && {
-            boxShadow: `0 0 0 1px ${theme.colors[$colorScheme]} inset`
+            boxShadow: `0 0 0 1px ${cssVars.colors[$colorScheme]} inset`
           },
           ...$showsActiveState && {
             "&:active": {
-              backgroundColor: $selected ? $colorScheme === "secondary" ? theme.colors.secondaryLight : theme.colors.primaryLight : theme.colors.activeBackground
+              backgroundColor: $selected ? $colorScheme === "secondary" ? cssVars.colors.secondaryLight : cssVars.colors.primaryLight : cssVars.colors.activeBackground
             }
           },
           ...$divider && {
-            borderBottom: `1px solid ${theme.colors.dividerSubtle}`
+            borderBottom: `1px solid ${cssVars.colors.dividerSubtle}`
           },
           ...$backgroundColor && {
             backgroundColor: $backgroundColor,
@@ -15043,7 +15398,7 @@ var RowContainer = forwardRef14(
     );
   }
 );
-var ListViewDragIndicatorElement = forwardRef14(
+var ListViewDragIndicatorElement = forwardRef15(
   ({
     className,
     $relativeDropPosition,
@@ -15053,7 +15408,7 @@ var ListViewDragIndicatorElement = forwardRef14(
     style: style5,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React56.createElement(
+    return /* @__PURE__ */ React57.createElement(
       "div",
       {
         ref,
@@ -15065,14 +15420,14 @@ var ListViewDragIndicatorElement = forwardRef14(
           borderRadius: "3px",
           ...$relativeDropPosition === "inside" ? {
             inset: 2,
-            boxShadow: `0 0 0 1px var(--sidebar-background), 0 0 0 3px ${$colorScheme === "secondary" ? "var(--secondary)" : "var(--drag-outline)"}`
+            boxShadow: `0 0 0 1px ${cssVars.colors.sidebarBackground}, 0 0 0 3px ${$colorScheme === "secondary" ? cssVars.colors.secondary : cssVars.colors.dragOutline}`
           } : {
             top: $relativeDropPosition === "above" ? -(3 + $gap / 2) : void 0,
             bottom: $relativeDropPosition === "below" ? -(3 + $gap / 2) : void 0,
             left: $offsetLeft,
             right: 0,
             height: 6,
-            backgroundColor: $colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)",
+            backgroundColor: $colorScheme === "secondary" ? cssVars.colors.secondary : cssVars.colors.primary,
             border: `2px solid white`,
             boxShadow: "0 0 2px rgba(0,0,0,0.5)"
           },
@@ -15082,7 +15437,7 @@ var ListViewDragIndicatorElement = forwardRef14(
     );
   }
 );
-var ListViewRow = forwardRef14(function ListViewRow2({
+var ListViewRow = forwardRef15(function ListViewRow2({
   id,
   tabIndex = 0,
   gap,
@@ -15150,7 +15505,7 @@ var ListViewRow = forwardRef14(function ListViewRow2({
     ...renderProps
   }, ref) => {
     const Component3 = RowContainer;
-    const element = /* @__PURE__ */ React56.createElement(
+    const element = /* @__PURE__ */ React57.createElement(
       Component3,
       {
         ref,
@@ -15182,7 +15537,7 @@ var ListViewRow = forwardRef14(function ListViewRow2({
         tabIndex,
         className
       },
-      relativeDropPosition && /* @__PURE__ */ React56.createElement(
+      relativeDropPosition && /* @__PURE__ */ React57.createElement(
         ListViewDragIndicatorElement,
         {
           $colorScheme: colorScheme,
@@ -15196,11 +15551,11 @@ var ListViewRow = forwardRef14(function ListViewRow2({
           }) : dragIndicatorStyle
         }
       ),
-      depth > 0 && /* @__PURE__ */ React56.createElement(Spacer.Horizontal, { size: depth * indentation }),
+      depth > 0 && /* @__PURE__ */ React57.createElement(Spacer.Horizontal, { size: depth * indentation }),
       children2
     );
     if (menuItems && onSelectMenuItem) {
-      return /* @__PURE__ */ React56.createElement(
+      return /* @__PURE__ */ React57.createElement(
         ContextMenu,
         {
           items: menuItems,
@@ -15213,7 +15568,7 @@ var ListViewRow = forwardRef14(function ListViewRow2({
     return element;
   };
   if (sortable && id) {
-    return /* @__PURE__ */ React56.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
+    return /* @__PURE__ */ React57.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(
       sortableProps,
       composeRefs2(sortableRef, forwardedRef)
     ));
@@ -15224,14 +15579,14 @@ var RenderItemContext = createContext9(
   () => null
 );
 RenderItemContext.displayName = "RenderItemContext";
-var VirtualizedListRow = memo21(function VirtualizedListRow2({
+var VirtualizedListRow = memo22(function VirtualizedListRow2({
   index,
   style: style5
 }) {
   const renderItem = useContext9(RenderItemContext);
-  return /* @__PURE__ */ React56.createElement("div", { key: index, style: style5 }, renderItem(index));
+  return /* @__PURE__ */ React57.createElement("div", { key: index, style: style5 }, renderItem(index));
 });
-var VirtualizedListInner = forwardRef14(function VirtualizedListInner2({
+var VirtualizedListInner = forwardRef15(function VirtualizedListInner2({
   size: size3,
   scrollElement,
   items,
@@ -15260,7 +15615,7 @@ var VirtualizedListInner = forwardRef14(function VirtualizedListInner2({
     }),
     []
   );
-  return /* @__PURE__ */ React56.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React57.createElement(
     WindowScroller,
     {
       scrollElement,
@@ -15271,7 +15626,7 @@ var VirtualizedListInner = forwardRef14(function VirtualizedListInner2({
         registerChild,
         onChildScroll,
         scrollTop
-      }) => /* @__PURE__ */ React56.createElement("div", { ref: registerChild }, /* @__PURE__ */ React56.createElement(
+      }) => /* @__PURE__ */ React57.createElement("div", { ref: registerChild }, /* @__PURE__ */ React57.createElement(
         VariableSizeList,
         {
           ref: listRef,
@@ -15301,10 +15656,10 @@ var VirtualizedListInner = forwardRef14(function VirtualizedListInner2({
     )
   ));
 });
-var VirtualizedList = memo21(
+var VirtualizedList = memo22(
   VirtualizedListInner
 );
-var ListViewRootInner = forwardRef14(function ListViewRootInner2({
+var ListViewRootInner = forwardRef15(function ListViewRootInner2({
   id,
   className,
   style: style5,
@@ -15423,7 +15778,7 @@ var ListViewRootInner = forwardRef14(function ListViewRootInner2({
     [indentation]
   );
   const renderOverlay = useCallback20(
-    (index) => /* @__PURE__ */ React56.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React56.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
+    (index) => /* @__PURE__ */ React57.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React57.createElement(ListViewDraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
     [draggingContextOverlayValue, renderItem, data]
   );
   const renderWrappedChild = useCallback20(
@@ -15431,12 +15786,12 @@ var ListViewRootInner = forwardRef14(function ListViewRootInner2({
       const contextValue = getItemContextValue(index);
       const current = renderChild(index);
       if (!contextValue || !isValidElement3(current)) return null;
-      return /* @__PURE__ */ React56.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
+      return /* @__PURE__ */ React57.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
     },
     [getItemContextValue, renderChild]
   );
   const ids = useMemo18(() => data.map(keyExtractor), [keyExtractor, data]);
-  const withSortable = (children2) => sortable ? /* @__PURE__ */ React56.createElement(
+  const withSortable = (children2) => sortable ? /* @__PURE__ */ React57.createElement(
     Sortable.Root,
     {
       onMoveItem,
@@ -15446,7 +15801,7 @@ var ListViewRootInner = forwardRef14(function ListViewRootInner2({
     },
     children2
   ) : children2;
-  const withScrollable = (children2) => scrollable ? /* @__PURE__ */ React56.createElement(ScrollArea, null, children2) : children2(null);
+  const withScrollable = (children2) => scrollable ? /* @__PURE__ */ React57.createElement(ScrollArea, null, children2) : children2(null);
   const getItemHeight = useCallback20(
     (index) => {
       const child = getItemContextValue(index);
@@ -15462,7 +15817,7 @@ var ListViewRootInner = forwardRef14(function ListViewRootInner2({
   );
   const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
   const gapStyle = useMemo18(() => ({ gap: `${gap}px` }), [gap]);
-  return /* @__PURE__ */ React56.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(ListViewDraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React57.createElement(
     "div",
     {
       id,
@@ -15474,7 +15829,7 @@ var ListViewRootInner = forwardRef14(function ListViewRootInner2({
     },
     withScrollable(
       (scrollElementRef) => withSortable(
-        virtualized ? /* @__PURE__ */ React56.createElement(
+        virtualized ? /* @__PURE__ */ React57.createElement(
           VirtualizedList,
           {
             ref: forwardedRef,
@@ -15490,15 +15845,15 @@ var ListViewRootInner = forwardRef14(function ListViewRootInner2({
     )
   ));
 });
-var ListViewRoot = memo21(ListViewRootInner);
-var ChildrenListViewInner = forwardRef14(function ChildrenListViewInner2({ children: children2, ...rest }, forwardedRef) {
+var ListViewRoot = memo22(ListViewRootInner);
+var ChildrenListViewInner = forwardRef15(function ChildrenListViewInner2({ children: children2, ...rest }, forwardedRef) {
   const items = useMemo18(
     () => Children4.toArray(children2).flatMap(
       (child) => isValidElement3(child) ? [child] : []
     ),
     [children2]
   );
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     ListViewRoot,
     {
       ref: forwardedRef,
@@ -15512,20 +15867,20 @@ var ChildrenListViewInner = forwardRef14(function ChildrenListViewInner2({ child
     }
   );
 });
-var ChildrenListView = memo21(ChildrenListViewInner);
-var SimpleListViewInner = forwardRef14(function SimpleListViewInner2(props, forwardedRef) {
+var ChildrenListView = memo22(ChildrenListViewInner);
+var SimpleListViewInner = forwardRef15(function SimpleListViewInner2(props, forwardedRef) {
   if ("children" in props) {
-    return /* @__PURE__ */ React56.createElement(ChildrenListView, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React57.createElement(ChildrenListView, { ref: forwardedRef, ...props });
   } else {
-    return /* @__PURE__ */ React56.createElement(ListViewRoot, { ref: forwardedRef, ...props });
+    return /* @__PURE__ */ React57.createElement(ListViewRoot, { ref: forwardedRef, ...props });
   }
 });
-var SimpleListView = memo21(SimpleListViewInner);
+var SimpleListView = memo22(SimpleListViewInner);
 var ListView;
 ((ListView2) => {
-  ListView2.RowTitle = memo21(ListViewRowTitle);
-  ListView2.EditableRowTitle = memo21(ListViewEditableRowTitle);
-  ListView2.Row = memo21(ListViewRow);
+  ListView2.RowTitle = memo22(ListViewRowTitle);
+  ListView2.EditableRowTitle = memo22(ListViewEditableRowTitle);
+  ListView2.Row = memo22(ListViewRow);
   ListView2.Root = SimpleListView;
   ListView2.RowContext = ListRowContext;
   ListView2.DragIndicator = ListViewDragIndicatorElement;
@@ -15562,15 +15917,15 @@ function filterWithGroupedSections(items, query) {
     return [...headers, ...newItems];
   });
 }
-var CompletionMenu = memo22(
-  forwardRef15(function CompletionMenu2({
+var CompletionMenu = memo23(
+  forwardRef16(function CompletionMenu2({
     items,
     selectedIndex,
     onSelectItem,
     onHoverIndex,
     listSize
   }, forwardedRef) {
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React58.createElement(
       ListView.Root,
       {
         ref: forwardedRef,
@@ -15582,13 +15937,13 @@ var CompletionMenu = memo22(
         sectionHeaderVariant: "label",
         renderItem: (item, i) => {
           if (item.type === "sectionHeader") {
-            return /* @__PURE__ */ React57.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
+            return /* @__PURE__ */ React58.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
           }
           const tokens = fuzzyTokenize({
             item: item.name,
             itemScore: item
           });
-          return /* @__PURE__ */ React57.createElement(
+          return /* @__PURE__ */ React58.createElement(
             ListView.Row,
             {
               key: item.id,
@@ -15600,7 +15955,7 @@ var CompletionMenu = memo22(
                 }
               }
             },
-            tokens.map((token, j) => /* @__PURE__ */ React57.createElement(
+            tokens.map((token, j) => /* @__PURE__ */ React58.createElement(
               "span",
               {
                 key: j,
@@ -15608,15 +15963,15 @@ var CompletionMenu = memo22(
               },
               token.text
             )),
-            item.icon && /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(Spacer.Horizontal, null), item.icon)
+            item.icon && /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Spacer.Horizontal, null), item.icon)
           );
         }
       }
     );
   })
 );
-var InputFieldWithCompletions = memo22(
-  forwardRef15(function InputFieldWithCompletions2({
+var InputFieldWithCompletions = memo23(
+  forwardRef16(function InputFieldWithCompletions2({
     loading,
     initialValue = "",
     placeholder,
@@ -15676,7 +16031,7 @@ var InputFieldWithCompletions = memo22(
       updateState({ filter: initialValue });
     }, [initialValue, updateState]);
     const { filter, selectedIndex } = state;
-    const listRef = React57.useRef(null);
+    const listRef = React58.useRef(null);
     const filteredItems = useMemo19(
       () => filterWithGroupedSections(items, filter),
       [items, filter]
@@ -15811,13 +16166,13 @@ var InputFieldWithCompletions = memo22(
         ref.current?.setSelectionRange(0, ref.current.value.length);
       }
     }));
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React58.createElement(
       InputField.Root,
       {
         size: size3,
         renderPopoverContent: ({ width }) => {
           const listSize = { width, height };
-          return /* @__PURE__ */ React57.createElement(
+          return /* @__PURE__ */ React58.createElement(
             "div",
             {
               className: `flex flex-col ${!filter && hideMenuWhenEmptyValue ? "none" : "flex"}`,
@@ -15825,7 +16180,7 @@ var InputFieldWithCompletions = memo22(
                 flex: `0 0 ${height}px`
               }
             },
-            filteredItems.length > 0 ? /* @__PURE__ */ React57.createElement(
+            filteredItems.length > 0 ? /* @__PURE__ */ React58.createElement(
               CompletionMenu,
               {
                 ref: listRef,
@@ -15835,11 +16190,11 @@ var InputFieldWithCompletions = memo22(
                 onHoverIndex: handleIndexChange,
                 listSize
               }
-            ) : /* @__PURE__ */ React57.createElement("div", { className: "flex flex-col h-[100px] p-5 items-center justify-center" }, /* @__PURE__ */ React57.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading" : "No results"))
+            ) : /* @__PURE__ */ React58.createElement("div", { className: "flex flex-col h-[100px] p-5 items-center justify-center" }, /* @__PURE__ */ React58.createElement(Small, { className: "text-text-disabled" }, loading ? "Loading" : "No results"))
           );
         }
       },
-      /* @__PURE__ */ React57.createElement(
+      /* @__PURE__ */ React58.createElement(
         InputField.Input,
         {
           ref,
@@ -15863,9 +16218,9 @@ var InputFieldWithCompletions = memo22(
           "aria-controls": "component-listbox"
         }
       ),
-      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React57.createElement(InputField.Typeahead, { value: typeaheadValue, prefix: filter }),
+      filter && typeaheadValue && typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && /* @__PURE__ */ React58.createElement(InputField.Typeahead, { value: typeaheadValue, prefix: filter }),
       (!isFocused || !hideChildrenWhenFocused) && children2,
-      loading && isFocused && /* @__PURE__ */ React57.createElement(InputField.Label, null, /* @__PURE__ */ React57.createElement(ActivityIndicator, null))
+      loading && isFocused && /* @__PURE__ */ React58.createElement(InputField.Label, null, /* @__PURE__ */ React58.createElement(ActivityIndicator, null))
     );
   })
 );
@@ -15885,9 +16240,9 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
 }
 // src/components/InspectorContainer.tsx
-import React58, { forwardRef as forwardRef16, memo as memo23 } from "react";
-var InspectorContainer = memo23(
-  forwardRef16(function InspectorContainer2({
+import React59, { forwardRef as forwardRef17, memo as memo24 } from "react";
+var InspectorContainer = memo24(
+  forwardRef17(function InspectorContainer2({
     header,
     children: children2,
     fallback,
@@ -15896,7 +16251,7 @@ var InspectorContainer = memo23(
     className,
     style: style5
   }, forwardedRef) {
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React59.createElement(
       "div",
       {
         ref: forwardedRef,
@@ -15906,44 +16261,49 @@ var InspectorContainer = memo23(
           display: "flex",
           flexDirection: "column",
           position: "relative",
-          background: "var(--sidebar-background)",
+          background: cssVars.colors.sidebarBackground,
           ...style5
         }
       },
       header,
-      children2 ? /* @__PURE__ */ React58.createElement(ScrollArea, null, /* @__PURE__ */ React58.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children2, /* @__PURE__ */ React58.createElement(Divider, null)) : children2)) : fallback ? /* @__PURE__ */ React58.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
+      children2 ? /* @__PURE__ */ React59.createElement(ScrollArea, null, /* @__PURE__ */ React59.createElement("div", { className: "flex flex-col relative" }, showDividers ? withSeparatorElements(children2, /* @__PURE__ */ React59.createElement(Divider, null)) : children2)) : fallback ? /* @__PURE__ */ React59.createElement("div", { className: "flex flex-col relative h-full" }, fallback) : null
     );
   })
 );
 // src/components/Label.tsx
-import React59, { memo as memo24 } from "react";
-function LabelRoot({ label, children: children2 }) {
-  return /* @__PURE__ */ React59.createElement("span", { className: `flex-none relative outline-none border-0 min-w-0 text-left flex flex-col items-center` }, children2, label && /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React59.createElement("span", { className: `${textStyles.small} text-text-muted text-xs flex-none min-w-0 tracking-[0.4px] whitespace-pre` }, label)));
-}
-var Label;
-((Label2) => {
-  Label2.Root = memo24(LabelRoot);
-})(Label || (Label = {}));
+import React60, { forwardRef as forwardRef18, memo as memo25 } from "react";
+var Label = memo25(
+  forwardRef18(function Label2({ className, ...props }, ref) {
+    return /* @__PURE__ */ React60.createElement(
+      "label",
+      {
+        ref,
+        className: `font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted z-label ${className ?? ""}`,
+        ...props
+      }
+    );
+  })
+);
 // src/components/LabeledElementView.tsx
 import * as kiwi from "kiwi.js";
-import React60, {
+import React61, {
   Children as Children5,
   createRef,
-  Fragment,
+  Fragment as Fragment2,
   isValidElement as isValidElement4,
-  memo as memo25,
+  memo as memo26,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo20,
   useRef as useRef18
 } from "react";
-var LabeledElementView = memo25(function LabeledElementView2({
+var LabeledElementView = memo26(function LabeledElementView2({
   children: children2,
   renderLabel
 }) {
   const elementIds = Children5.toArray(children2).flatMap(
-    (child) => isValidElement4(child) && child.type === Fragment ? child.props.children : [child]
+    (child) => isValidElement4(child) && child.type === Fragment2 ? child.props.children : [child]
   ).map(
     (child) => isValidElement4(child) && "id" in child.props ? child.props.id : null
   ).filter((id) => !!id);
@@ -15955,7 +16315,7 @@ var LabeledElementView = memo25(function LabeledElementView2({
     );
   }, [serializedIds]);
   const labelElements = useMemo20(() => {
-    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React60.createElement(
+    return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React61.createElement(
       "span",
       {
         key: id,
@@ -16030,13 +16390,13 @@ var LabeledElementView = memo25(function LabeledElementView2({
       `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
-  return /* @__PURE__ */ React60.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React60.createElement("div", { className: "flex flex-1 items-center" }, children2), /* @__PURE__ */ React60.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
+  return /* @__PURE__ */ React61.createElement("div", { className: "flex flex-1 flex-col relative", ref: containerRef }, /* @__PURE__ */ React61.createElement("div", { className: "flex flex-1 items-center" }, children2), /* @__PURE__ */ React61.createElement("div", { className: "relative overflow-hidden select-none" }, labelElements));
 });
 // src/components/Progress.tsx
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import React61, { useMemo as useMemo21 } from "react";
+import React62, { useMemo as useMemo21 } from "react";
 function Progress({
   value,
   variant = "normal",
@@ -16046,14 +16406,14 @@ function Progress({
   const transformStyles = useMemo21(() => ({
     transform: `translateX(-${100 - clampedValue}%)`
   }), [clampedValue]);
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     ProgressPrimitive.Root,
     {
       className: `relative hidden bg-input-background h-[5px] ${className ?? ""}`,
       style: { transform: "translateZ(0)" },
       value: clampedValue
     },
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(
       ProgressPrimitive.Indicator,
       {
         className: cn(variant === "primary" ? "bg-primary" : variant === "secondary" ? "bg-secondary" : variant === "warning" ? "bg-warning" : "bg-text", "transition-[transform_660ms_cubic-bezier(0.65,0,0.35,1)", "w-full h-full"),
@@ -16065,27 +16425,27 @@ function Progress({
 // src/components/RadioGroup.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React62, {
+import React63, {
   createContext as createContext10,
-  forwardRef as forwardRef17,
-  memo as memo26,
+  forwardRef as forwardRef19,
+  memo as memo27,
   useCallback as useCallback22,
   useContext as useContext10,
   useMemo as useMemo22
 } from "react";
-var ToggleGroupItem = forwardRef17(function ToggleGroupItem2({ value, tooltip, children: children2, disabled = false }, forwardedRef) {
+var ToggleGroupItem = forwardRef19(function ToggleGroupItem2({ value, tooltip, children: children2, disabled = false }, forwardedRef) {
   const { colorScheme } = useContext10(RadioGroupContext);
-  const itemElement = /* @__PURE__ */ React62.createElement(
+  const itemElement = /* @__PURE__ */ React63.createElement(
     ToggleGroupPrimitive.Item,
     {
       ref: forwardedRef,
       value,
       disabled,
-      className: `font-sans text-heading5 font-normal relative flex-1 appearance-none border-none bg-none text-radio-group-item p-0 m-0 rounded inline-flex items-center justify-center align-middle focus:outline-none focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] aria-checked:bg-${colorScheme ? colorScheme : "radio-group-background"} aria-checked:text-${colorScheme ? "radio-group-background" : "text"} aria-checked:shadow-${colorScheme ? "none" : "0_1px_1px_rgba(0,0,0,0.1)"}`
+      className: `font-sans text-heading5 font-normal relative flex-1 appearance-none border-none bg-none text-radio-group-item p-0 m-0 rounded inline-flex items-center justify-center align-middle focus:outline-none focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] aria-checked:bg-${colorScheme ? colorScheme : "radio-group-background"} aria-checked:text-${colorScheme ? "radio-group-background" : "text"} aria-checked:shadow-${colorScheme ? "none" : "0_1px_1px_rgba(0,0,0,0.1)"} focus:z-interactable`
     },
     children2
   );
-  return tooltip ? /* @__PURE__ */ React62.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
+  return tooltip ? /* @__PURE__ */ React63.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
 });
 var RadioGroupContext = createContext10({
   colorScheme: "primary"
@@ -16106,7 +16466,7 @@ function ToggleGroupRoot({
     },
     [allowEmpty, onValueChange]
   );
-  return /* @__PURE__ */ React62.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React63.createElement(
     ToggleGroupPrimitive.Root,
     {
       id,
@@ -16120,23 +16480,33 @@ function ToggleGroupRoot({
 }
 var RadioGroup;
 ((RadioGroup2) => {
-  RadioGroup2.Root = memo26(ToggleGroupRoot);
-  RadioGroup2.Item = memo26(ToggleGroupItem);
+  RadioGroup2.Root = memo27(ToggleGroupRoot);
+  RadioGroup2.Item = memo27(ToggleGroupItem);
 })(RadioGroup || (RadioGroup = {}));
 // src/components/SelectMenu.tsx
-import { DropdownChevronIcon } from "@noya-app/noya-icons";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  DropdownChevronIcon
+} from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React63, { memo as memo27, useMemo as useMemo23 } from "react";
+import React64, { memo as memo28, useMemo as useMemo23 } from "react";
 var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
 };
-var textStyle = {
-  fontSize: "0.85rem"
-};
-var labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] absolute inset-0 font-bold text-[60%] pointer-events-none flex items-center justify-end pr-6`;
-var SelectMenu = memo27(function SelectMenu2({
+var labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center mr-1.5 z-label`;
+var scrollButtonStyles = `
+  flex
+  items-center
+  justify-center
+  h-[25px]
+  cursor-default
+  text-text-muted
+  hover:text-text
+`;
+var SelectMenu = memo28(function SelectMenu2({
   id,
   style: style5,
   className,
@@ -16154,68 +16524,71 @@ var SelectMenu = memo27(function SelectMenu2({
   );
   const icon = selectedItem?.icon;
   const readOnlyButton = useMemo23(
-    () => /* @__PURE__ */ React63.createElement(
+    () => /* @__PURE__ */ React64.createElement(
       Button,
       {
         id,
         style: style5,
         contentStyle: readOnlyStyle,
-        className: `${className ?? ""} flex-1`,
+        className: `${className ?? ""} flex-1 focus:z-interactable`,
         disabled
       },
-      icon && /* @__PURE__ */ React63.createElement(React63.Fragment, null, renderIcon(icon), /* @__PURE__ */ React63.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
-      /* @__PURE__ */ React63.createElement("span", { style: { ...textStyle }, className: "flex flex-1" }, selectedItem?.title ?? value)
+      icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ React64.createElement("span", { className: "flex flex-1" }, selectedItem?.title ?? value)
     ),
     [icon, id, style5, className, disabled, value, selectedItem]
   );
   const trigger = useMemo23(
-    () => /* @__PURE__ */ React63.createElement(Select.SelectTrigger, { asChild: true }, /* @__PURE__ */ React63.createElement(
+    () => /* @__PURE__ */ React64.createElement(Select.SelectTrigger, { asChild: true }, /* @__PURE__ */ React64.createElement(
       Button,
       {
         id,
-        style: { ...textStyle, ...style5 },
-        className: `${className ?? "w-full"} flex-1`,
+        style: style5,
+        className: `${className ?? "w-full"} flex-1 focus:z-interactable`,
         disabled
       },
-      icon && /* @__PURE__ */ React63.createElement(React63.Fragment, null, renderIcon(icon), /* @__PURE__ */ React63.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
-      /* @__PURE__ */ React63.createElement("span", { className: "flex flex-1" }, /* @__PURE__ */ React63.createElement(Select.Value, { placeholder })),
-      /* @__PURE__ */ React63.createElement(Spacer.Horizontal, { inline: true, size: 6 }),
-      /* @__PURE__ */ React63.createElement(DropdownChevronIcon, null)
+      icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
+      /* @__PURE__ */ React64.createElement("span", { className: "flex flex-1 mr-1.5" }, /* @__PURE__ */ React64.createElement(Select.Value, { placeholder })),
+      label && /* @__PURE__ */ React64.createElement("span", { className: labelStyles }, label),
+      /* @__PURE__ */ React64.createElement(DropdownChevronIcon, null)
     )),
-    [icon, id, style5, className, disabled, placeholder]
+    [id, style5, className, disabled, icon, placeholder, label]
   );
   if (readOnly) {
-    return label ? /* @__PURE__ */ React63.createElement("div", { className: "flex flex-col relative" }, readOnlyButton, /* @__PURE__ */ React63.createElement(
-      "label",
-      {
-        className: labelStyles,
-        htmlFor: id
-      },
-      label
-    )) : readOnlyButton;
+    return label ? /* @__PURE__ */ React64.createElement("div", { className: "flex flex-col relative" }, readOnlyButton, /* @__PURE__ */ React64.createElement("label", { className: labelStyles, htmlFor: id }, label)) : readOnlyButton;
   }
-  return /* @__PURE__ */ React63.createElement(Select.Root, { value, onValueChange: onSelect, open }, label ? /* @__PURE__ */ React63.createElement("div", { className: "flex-1 flex-col relative" }, trigger, label && /* @__PURE__ */ React63.createElement("label", { className: labelStyles, htmlFor: id }, label)) : trigger, /* @__PURE__ */ React63.createElement(Select.Portal, null, /* @__PURE__ */ React63.createElement(Select.Content, { className: styles.contentStyle }, /* @__PURE__ */ React63.createElement(Select.Viewport, null, menuItems.map((menuItem) => {
+  return /* @__PURE__ */ React64.createElement(Select.Root, { value, onValueChange: onSelect, open }, trigger, /* @__PURE__ */ React64.createElement(Select.Portal, null, /* @__PURE__ */ React64.createElement(Select.Content, { className: styles.contentStyle }, /* @__PURE__ */ React64.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React64.createElement(ChevronUpIcon, null)), /* @__PURE__ */ React64.createElement(Select.Viewport, null, menuItems.map((menuItem) => {
     if (typeof menuItem === "string") {
-      return /* @__PURE__ */ React63.createElement(Select.Separator, { className: styles.separatorStyle });
+      return /* @__PURE__ */ React64.createElement(Select.Separator, { className: styles.separatorStyle });
     }
     const value2 = menuItem.value ?? "";
-    return /* @__PURE__ */ React63.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
-  })))));
+    return /* @__PURE__ */ React64.createElement(SelectItem, { key: value2, value: value2, icon: menuItem.icon }, menuItem.title ?? value2);
+  })), /* @__PURE__ */ React64.createElement(Select.ScrollDownButton, { className: scrollButtonStyles }, /* @__PURE__ */ React64.createElement(ChevronDownIcon, null)))));
 });
-var SelectItem = React63.forwardRef(
+var SelectItem = React64.forwardRef(
   ({
     children: children2,
     icon,
     disabled,
     ...props
   }, forwardedRef) => {
-    return /* @__PURE__ */ React63.createElement(Select.Item, { className: styles.itemStyle({ disabled }), disabled, ...props, ref: forwardedRef }, icon && /* @__PURE__ */ React63.createElement(React63.Fragment, null, renderIcon(icon), /* @__PURE__ */ React63.createElement(Spacer.Horizontal, { size: 8 })), /* @__PURE__ */ React63.createElement(Select.ItemText, { style: textStyle }, children2));
+    return /* @__PURE__ */ React64.createElement(
+      Select.Item,
+      {
+        className: styles.itemStyle({ disabled }),
+        disabled,
+        ...props,
+        ref: forwardedRef
+      },
+      icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { size: 8 })),
+      /* @__PURE__ */ React64.createElement(Select.ItemText, null, children2)
+    );
   }
 );
 // src/components/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import React64, { useCallback as useCallback23, useMemo as useMemo24 } from "react";
+import React65, { useCallback as useCallback23, useMemo as useMemo24 } from "react";
 var Slider = function Slider2({
   id,
   value,
@@ -16233,7 +16606,7 @@ var Slider = function Slider2({
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     RadixSlider.Root,
     {
       min,
@@ -16243,36 +16616,38 @@ var Slider = function Slider2({
       onValueChange: handleValueChange,
       className: "flex-1 flex relative items-center select-none touch-none h-4"
     },
-    /* @__PURE__ */ React64.createElement(RadixSlider.Track, { className: "bg-divider relative flex-grow h-[2px]" }, /* @__PURE__ */ React64.createElement(RadixSlider.Range, { className: "absolute bg-primary rounded-full h-full" })),
-    /* @__PURE__ */ React64.createElement(RadixSlider.Thumb, { className: "block w-3 h-3 bg-slider-background border border-solid border-slider-border rounded-[20px] focus:outline-none" })
+    /* @__PURE__ */ React65.createElement(RadixSlider.Track, { className: "bg-divider relative flex-grow h-[2px]" }, /* @__PURE__ */ React65.createElement(RadixSlider.Range, { className: "absolute bg-primary rounded-full h-full" })),
+    /* @__PURE__ */ React65.createElement(RadixSlider.Thumb, { className: "block w-3 h-3 bg-slider-background border border-solid border-slider-border rounded-[20px] focus:outline-none" })
   );
 };
 // src/components/Switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React65 from "react";
+import React66 from "react";
 var Switch = function Switch2({
+  id,
   value,
   onChange,
   colorScheme = "normal",
   disabled
 }) {
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     SwitchPrimitive.Root,
     {
+      id,
       checked: value,
       disabled,
       onCheckedChange: (newValue) => {
         onChange(newValue);
       },
-      className: `all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:outline-primary focus:ring-offset-[1px] data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"}`
+      className: `all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary ${colorScheme === "secondary" && "data-[state=checked]:bg-secondary"} focus:z-interactable`
     },
-    /* @__PURE__ */ React65.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
+    /* @__PURE__ */ React66.createElement(SwitchPrimitive.Thumb, { className: "block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" })
   );
 };
 // src/components/TextArea.tsx
-import React66, { forwardRef as forwardRef18, memo as memo28, useCallback as useCallback24, useEffect as useEffect15, useRef as useRef19 } from "react";
+import React67, { forwardRef as forwardRef20, memo as memo29, useCallback as useCallback24, useEffect as useEffect15, useRef as useRef19 } from "react";
 var useAutoResize = (value) => {
   const textareaRef = useRef19(null);
   useEffect15(() => {
@@ -16282,8 +16657,8 @@ var useAutoResize = (value) => {
   }, [value]);
   return textareaRef;
 };
-var AutoResizingTextArea = memo28(
-  forwardRef18(function AutoResizingTextArea2({
+var AutoResizingTextArea = memo29(
+  forwardRef20(function AutoResizingTextArea2({
     value,
     onChangeText,
     className,
@@ -16301,10 +16676,10 @@ var AutoResizingTextArea = memo28(
       },
       [ref, forwardedRef]
     );
-    return /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React67.createElement(
       "textarea",
       {
-        className: `font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary focus:z-10 read-only:text-text-disabled ${className ?? ""}`,
+        className: `font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable ${className ?? ""}`,
         ref: handleRef,
         ...rest,
         onChange: handleChange,
@@ -16315,13 +16690,13 @@ var AutoResizingTextArea = memo28(
 );
 // src/components/TreeView.tsx
-import React67, {
-  forwardRef as forwardRef19,
-  memo as memo29,
+import React68, {
+  forwardRef as forwardRef21,
+  memo as memo30,
   useCallback as useCallback25,
   useContext as useContext11
 } from "react";
-var TreeRow = forwardRef19(function TreeRow2({
+var TreeRow = forwardRef21(function TreeRow2({
   icon,
   expanded,
   onClickChevron,
@@ -16336,27 +16711,27 @@ var TreeRow = forwardRef19(function TreeRow2({
     },
     [onClickChevron]
   );
-  return /* @__PURE__ */ React67.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React67.createElement(React67.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React67.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React68.createElement(React68.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React68.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React68.createElement(
     IconButton,
     {
       iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React67.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React67.createElement(React67.Fragment, null, renderIcon(icon), /* @__PURE__ */ React67.createElement(Spacer.Horizontal, { size: 10 })), children2);
+  ), /* @__PURE__ */ React68.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React68.createElement(React68.Fragment, null, renderIcon(icon), /* @__PURE__ */ React68.createElement(Spacer.Horizontal, { size: 10 })), children2);
 });
 var TreeView;
 ((TreeView2) => {
   TreeView2.Root = ListView.Root;
   TreeView2.RowTitle = ListView.RowTitle;
   TreeView2.EditableRowTitle = ListView.EditableRowTitle;
-  TreeView2.Row = memo29(TreeRow);
+  TreeView2.Row = memo30(TreeRow);
 })(TreeView || (TreeView = {}));
 // src/components/WorkspaceLayout.tsx
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
-import React69, {
-  forwardRef as forwardRef20,
+import React70, {
+  forwardRef as forwardRef22,
   useCallback as useCallback26,
   useImperativeHandle as useImperativeHandle4,
   useRef as useRef21,
@@ -16501,7 +16876,7 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
+var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
   autoSavePrefix,
   leftSidebarContent: leftPanelContent,
   children: centerPanelContent,
@@ -16595,19 +16970,19 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
     }
   });
   const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       id,
       className,
       style: {
-        backgroundColor: "var(--canvas-background)",
+        backgroundColor: cssVars.colors.canvasBackground,
         display: "flex",
         flexDirection: "row",
         ...style5
       }
     },
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       PanelGroup,
       {
         ref: panelGroupRef,
@@ -16616,7 +16991,7 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
         autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
         style: { flex: "1" }
       },
-      hasLeftSidebar && /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(
+      hasLeftSidebar && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(
         Panel,
         {
           id: LEFT_SIDEBAR_ID,
@@ -16633,18 +17008,18 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
           }
         },
         internalLayoutState?.leftSidebarCollapsed ? null : leftPanelContent
-      ), /* @__PURE__ */ React69.createElement(
+      ), /* @__PURE__ */ React70.createElement(
         PanelResizeHandle,
         {
           style: {
             cursor: "col-resize",
             width: "1px",
             height: "100%",
-            backgroundColor: "var(--divider)"
+            backgroundColor: cssVars.colors.divider
           }
         }
       )),
-      /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React70.createElement(
         Panel,
         {
           id: CONTENT_AREA_ID,
@@ -16659,17 +17034,17 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
         },
         centerPanelContent
       ),
-      hasRightSidebar && /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(
+      hasRightSidebar && /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(
         PanelResizeHandle,
         {
           style: {
             cursor: "col-resize",
             width: "1px",
             height: "100%",
-            backgroundColor: "var(--divider)"
+            backgroundColor: cssVars.colors.divider
           }
         }
-      ), /* @__PURE__ */ React69.createElement(
+      ), /* @__PURE__ */ React70.createElement(
         Panel,
         {
           id: RIGHT_SIDEBAR_ID,
@@ -16689,8 +17064,8 @@ var WorkspaceLayoutWithTheme = forwardRef20(function WorkspaceLayoutWithTheme2({
     )
   );
 });
-var WorkspaceLayout = forwardRef20(function WorkspaceLayout2(props, forwardedRef) {
-  return /* @__PURE__ */ React69.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef });
+var WorkspaceLayout = forwardRef22(function WorkspaceLayout2(props, forwardedRef) {
+  return /* @__PURE__ */ React70.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef });
 });
 // src/hooks/usePlatform.ts
@@ -16761,11 +17136,11 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
 // src/components/DimensionInput.tsx
 import { round } from "@noya-app/noya-utils";
-import React70, { memo as memo30, useCallback as useCallback27 } from "react";
+import React71, { memo as memo31, useCallback as useCallback27 } from "react";
 function getNewValue(value, mode, delta) {
   return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
 }
-var DimensionInput = memo30(function DimensionInput2({
+var DimensionInput = memo31(function DimensionInput2({
   id,
   value,
   onSetValue,
@@ -16783,7 +17158,7 @@ var DimensionInput = memo30(function DimensionInput2({
     (value2) => onSetValue(value2, "replace"),
     [onSetValue]
   );
-  return /* @__PURE__ */ React70.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(InputField.Root, { id, width: size3 }, /* @__PURE__ */ React71.createElement(
     InputField.NumberInput,
     {
       value: value === void 0 ? value : round(value, 2),
@@ -16792,13 +17167,13 @@ var DimensionInput = memo30(function DimensionInput2({
       disabled,
       ...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
     }
-  ), label && /* @__PURE__ */ React70.createElement(InputField.Label, null, label));
+  ), label && /* @__PURE__ */ React71.createElement(InputField.Label, null, label));
 });
 // src/components/InspectorPrimitives.tsx
 var InspectorPrimitives_exports = {};
 __export(InspectorPrimitives_exports, {
-  Checkbox: () => Checkbox,
+  Checkbox: () => Checkbox3,
   Column: () => Column2,
   HorizontalSeparator: () => HorizontalSeparator,
   LabeledRow: () => LabeledRow,
@@ -16810,8 +17185,11 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React71, { memo as memo31, forwardRef as forwardRef21 } from "react";
-var Section2 = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
+import React72, {
+  forwardRef as forwardRef23,
+  memo as memo32
+} from "react";
+var Section2 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React72.createElement(
   "div",
   {
     ref,
@@ -16819,8 +17197,8 @@ var Section2 = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ Re
     ...props
   }
 ));
-var SectionHeader = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement("div", { ref, className: cn("flex items-center", className), ...props }));
-var Title3 = forwardRef21(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React71.createElement(
+var SectionHeader = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React72.createElement("div", { ref, className: cn("flex items-center", className), ...props }));
+var Title3 = forwardRef23(({ className, $textStyle, ...props }, ref) => /* @__PURE__ */ React72.createElement(
   "div",
   {
     ref,
@@ -16828,7 +17206,7 @@ var Title3 = forwardRef21(({ className, $textStyle, ...props }, ref) => /* @__PU
     ...props
   }
 ));
-var Row = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
+var Row = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React72.createElement(
   "div",
   {
     ref,
@@ -16836,7 +17214,7 @@ var Row = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React71
     ...props
   }
 ));
-var Column2 = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
+var Column2 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React72.createElement(
   "div",
   {
     ref,
@@ -16844,16 +17222,16 @@ var Column2 = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ Rea
     ...props
   }
 ));
-var Checkbox = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
+var Checkbox3 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React72.createElement(
   "input",
   {
     ref,
     type: "checkbox",
-    className: cn("m-0", className),
+    className: cn("m-0 focus:z-interactable", className),
     ...props
   }
 ));
-var Text3 = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React71.createElement(
+var Text3 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React72.createElement(
   "span",
   {
     ref,
@@ -16861,19 +17239,23 @@ var Text3 = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ React
     ...props
   }
 ));
-var VerticalSeparator = () => /* @__PURE__ */ React71.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
-var HorizontalSeparator = () => /* @__PURE__ */ React71.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
-var RowLabel = forwardRef21(function RowLabel2({ className, $textStyle, ...props }, ref) {
-  return /* @__PURE__ */ React71.createElement(
-    "span",
+var VerticalSeparator = () => /* @__PURE__ */ React72.createElement(Spacer.Vertical, { size: "inspector-v-separator" });
+var HorizontalSeparator = () => /* @__PURE__ */ React72.createElement(Spacer.Horizontal, { size: "inspector-h-separator" });
+var RowLabel = forwardRef23(function RowLabel2({
+  className,
+  $textStyle,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ React72.createElement(
+    "label",
     {
       ref,
-      className: `font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle ${$textStyle && textStyles[$textStyle]} ${className ?? ""}`,
+      className: `font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle z-label ${$textStyle ? textStyles[$textStyle] : ""} ${className ?? ""}`,
       ...props
     }
   );
 });
-var LabeledRow = memo31(function LabeledRow2({
+var LabeledRow = memo32(function LabeledRow2({
   id,
   children: children2,
   label,
@@ -16881,7 +17263,7 @@ var LabeledRow = memo31(function LabeledRow2({
   right,
   className
 }) {
-  return /* @__PURE__ */ React71.createElement(Row, { id, className: className ?? "" }, /* @__PURE__ */ React71.createElement(Column2, null, /* @__PURE__ */ React71.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React71.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React71.createElement(Row, null, children2)));
+  return /* @__PURE__ */ React72.createElement(Row, { id, className: className ?? "" }, /* @__PURE__ */ React72.createElement(Column2, null, /* @__PURE__ */ React72.createElement(RowLabel, { $textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React72.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React72.createElement(Row, null, children2)));
 });
 export {
   ActivityIndicator,
@@ -16891,6 +17273,7 @@ export {
   Body,
   Button,
   CONTENT_AREA_ID,
+  Checkbox,
   Chip,
   CompletionMenu,
   ContextMenu,
@@ -16952,6 +17335,7 @@ export {
   WorkspaceLayout,
   cn,
   createSectionedMenu,
+  cssVars,
   fuzzyFilter,
   fuzzyScore,
   fuzzyTokenize,