@noya-app/noya-designsystem 0.1.37 → 0.1.39

package/dist/index.mjs

@@ -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,
@@ -4124,11 +4145,12 @@ var colorSchemeStyles = {
   secondary: "text-secondary"
 };
 var Checkbox = memo3(
-  forwardRef4(function Checkbox2({ className, colorScheme = "secondary", ...props }, ref) {
+  forwardRef4(function Checkbox2({ className, style: style5, colorScheme = "secondary", ...props }, ref) {
     return /* @__PURE__ */ React6.createElement(
       "div",
       {
-        className: `relative inline-flex w-[19px] h-[19px] ${colorSchemeStyles[colorScheme]} ${className ?? ""}`
+        className: `relative inline-flex w-[19px] h-[19px] ${colorSchemeStyles[colorScheme]} ${className ?? ""}`,
+        style: style5
       },
       /* @__PURE__ */ React6.createElement(
         "input",
@@ -4140,6 +4162,7 @@ var Checkbox = memo3(
             h-full
             peer
             appearance-none
+            m-0
             rounded
             bg-input-background
             transition-colors
@@ -4150,11 +4173,8 @@ var Checkbox = memo3(
             focus:ring-2
             focus:ring-primary
             focus:ring-offset-1
+            focus:z-interactable
           `,
-          style: {
-            width: "27px",
-            ...props.style
-          },
           ...props
         }
       ),
@@ -4170,10 +4190,9 @@ var Checkbox = memo3(
             stroke-white
             opacity-0
             peer-checked:opacity-100
+            z-label
+            stroke-[1.3px]
           `,
-          style: {
-            strokeWidth: "1.3"
-          },
           viewBox: "0 0 16 16",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg"
@@ -4292,6 +4311,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,
@@ -4312,27 +4569,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") {
@@ -4341,7 +4604,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
       `;
     }
@@ -4394,7 +4657,7 @@ var Chip = memo4(
       onHoverChange: onHoverDeleteChange
     });
     const handleClick = !children2 && !deletable && addable ? onAdd : onClick;
-    const color = colorScheme === "primary" ? "var(--primary)" : colorScheme === "secondary" ? "var(--secondary)" : "var(--text)";
+    const color = colorScheme === "primary" ? cssVars.colors.primary : colorScheme === "secondary" ? cssVars.colors.secondary : cssVars.colors.text;
     return /* @__PURE__ */ React8.createElement(
       "span",
       {
@@ -4519,7 +4782,7 @@ var IconButton = memo5(
     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 }
       }
     ));
@@ -4991,6 +5254,7 @@ import React20, {
   useCallback as useCallback11,
   useContext as useContext2,
   useEffect as useEffect11,
+  useId,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo7,
   useRef as useRef12,
@@ -5214,7 +5478,8 @@ var ReadOnlyTextInput = forwardRef10(function ReadOnlyTextInput2({ onKeyDown, on
       ...rest,
       value,
       onKeyDown,
-      readOnly: true
+      readOnly: true,
+      className: "focus:z-interactable"
     }
   );
 });
@@ -5452,31 +5717,35 @@ var InputFieldContext = createContext2({
   onFocusChange: () => {
   }
 });
-var LabelContainer = forwardRef11(
-  ({ 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__ */ 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 ${$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
-      }
-    );
-  }
-);
+      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({
-    children: children2 = false,
-    pointerEvents = "none",
-    style: style5,
-    className
-  }, forwardedRef) {
-    const { labelPosition, hasDropdown, setLabelWidth, size: size3 } = useContext2(InputFieldContext);
+  forwardRef11(function InputFieldLabel2(props, forwardedRef) {
+    const { labelPosition, hasDropdown, setLabelWidth, size: size3, id } = useContext2(InputFieldContext);
     const ref = useRef12(null);
     useLayoutEffect4(() => {
       if (!setLabelWidth) return;
@@ -5487,18 +5756,16 @@ var InputFieldLabel = memo9(
     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
+      }
     );
   })
 );
@@ -5603,10 +5870,13 @@ var InputElement = forwardRef11(
   }, 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]);
+    const memoizedStyles = useMemo7(
+      () => ({
+        paddingLeft: `${paddingLeft}px`,
+        paddingRight: `${paddingRight}px`
+      }),
+      [paddingLeft, paddingRight]
+    );
     return /* @__PURE__ */ React20.createElement(
       TextInput_default,
       {
@@ -5614,7 +5884,7 @@ var InputElement = forwardRef11(
         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
       }
@@ -5629,7 +5899,8 @@ var InputFieldInput = forwardRef11(function InputFieldInput2({ textAlign, varian
     buttonSize,
     size: size3,
     onFocusChange,
-    setInputRef
+    setInputRef,
+    id
   } = useContext2(InputFieldContext);
   const handleFocusChange = useCallback11(
     (isFocused) => {
@@ -5651,6 +5922,7 @@ var InputFieldInput = forwardRef11(function InputFieldInput2({ textAlign, varian
       $variant: variant,
       $textAlign: textAlign,
       onFocusChange: handleFocusChange,
+      id,
       ...rest
     }
   );
@@ -5765,6 +6037,7 @@ function InputFieldRoot({
   className
 }) {
   const childrenArray = Children.toArray(children2);
+  const randomId = useId();
   const hasDropdown = childrenArray.some(
     (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
   );
@@ -5799,7 +6072,8 @@ function InputFieldRoot({
       inputRef,
       setInputRef,
       setLabelWidth: setMeasuredLabelSize,
-      setButtonWidth: setMeasuredButtonSize
+      setButtonWidth: setMeasuredButtonSize,
+      id: id ?? randomId
     }),
     [
       labelPosition,
@@ -5810,13 +6084,14 @@ function InputFieldRoot({
       size3,
       isFocused,
       handleFocusChange,
-      inputRef
+      inputRef,
+      id,
+      randomId
     ]
   );
   const rootElement = /* @__PURE__ */ React20.createElement(
     RootContainer,
     {
-      id,
       $width: width,
       $flex: flex,
       style: style5,
@@ -5851,7 +6126,7 @@ var PrimitiveInputField = ({
 }) => /* @__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
   }
 );
@@ -6388,13 +6663,13 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
       /* @__PURE__ */ React27.createElement(Trigger5, null, /* @__PURE__ */ React27.createElement(
         DragHandleDots2Icon,
         {
-          color: isVisible || open ? "var(--icon)" : "transparent"
+          color: isVisible || open ? cssVars.colors.icon : "transparent"
         }
       ))
     ) : /* @__PURE__ */ React27.createElement(
       DragHandleDots2Icon,
       {
-        color: isVisible || open ? "var(--icon)" : "transparent"
+        color: isVisible || open ? cssVars.colors.icon : "transparent"
       }
     )
   );
@@ -6819,7 +7094,9 @@ 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 = memo16(function Background2({ background: background2 }) {
+var Background = memo16(function Background2({
+  background: background2
+}) {
   return /* @__PURE__ */ React29.createElement(
     "span",
     {
@@ -6876,17 +7153,12 @@ var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
   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 = memo16(function FillPreviewBackground2({
   value
 }) {
-  if (!value) return /* @__PURE__ */ React29.createElement(
-    Background,
-    {
-      background
-    }
-  );
+  if (!value) return /* @__PURE__ */ React29.createElement(Background, { background });
   switch (value._class) {
     case "color":
       return /* @__PURE__ */ React29.createElement(ColorPreviewBackground, { color: value });
@@ -7158,8 +7430,8 @@ 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__ */ React31.createElement(
@@ -7167,7 +7439,7 @@ var FloatingWindow = ({
       {
         style: {
           ...styles2.toolbar,
-          backgroundColor: "var(--sidebar-background)"
+          backgroundColor: cssVars.colors.sidebarBackground
         },
         onMouseDown: handleMouseDown
       },
@@ -15024,21 +15296,6 @@ 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 = forwardRef15(
   ({
     className,
@@ -15056,6 +15313,8 @@ var RowContainer = forwardRef15(
     $gap,
     $backgroundColor,
     style: style5,
+    "aria-describedby": _,
+    // Causes hydration warning
     ...props
   }, ref) => {
     const margin = getPositionMargin($marginType);
@@ -15083,19 +15342,19 @@ var RowContainer = forwardRef15(
               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",
@@ -15109,15 +15368,15 @@ var RowContainer = forwardRef15(
           },
           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,
@@ -15157,14 +15416,14 @@ var ListViewDragIndicatorElement = forwardRef15(
           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)"
           },
@@ -15998,7 +16257,7 @@ var InspectorContainer = memo24(
           display: "flex",
           flexDirection: "column",
           position: "relative",
-          background: "var(--sidebar-background)",
+          background: cssVars.colors.sidebarBackground,
           ...style5
         }
       },
@@ -16016,7 +16275,7 @@ var Label = memo25(
       "label",
       {
         ref,
-        className: `font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted ${className ?? ""}`,
+        className: `font-sans text-label uppercase flex items-center leading-[19px] select-none font-bold text-text-muted z-label ${className ?? ""}`,
         ...props
       }
     );
@@ -16178,7 +16437,7 @@ var ToggleGroupItem = forwardRef19(function ToggleGroupItem2({ value, tooltip, c
       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
   );
@@ -16233,7 +16492,7 @@ var readOnlyStyle = {
   justifyContent: "flex-start",
   textAlign: "left"
 };
-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`;
+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 
@@ -16267,7 +16526,7 @@ var SelectMenu = memo28(function SelectMenu2({
         id,
         style: style5,
         contentStyle: readOnlyStyle,
-        className: `${className ?? ""} flex-1`,
+        className: `${className ?? ""} flex-1 focus:z-interactable`,
         disabled
       },
       icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
@@ -16281,7 +16540,7 @@ var SelectMenu = memo28(function SelectMenu2({
       {
         id,
         style: style5,
-        className: `${className ?? "w-full"} flex-1`,
+        className: `${className ?? "w-full"} flex-1 focus:z-interactable`,
         disabled
       },
       icon && /* @__PURE__ */ React64.createElement(React64.Fragment, null, renderIcon(icon), /* @__PURE__ */ React64.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
@@ -16377,7 +16636,7 @@ var Switch = function Switch2({
       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:ring-primary focus:ring-offset-[1px] outline-none 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__ */ 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]" })
   );
@@ -16416,7 +16675,7 @@ var AutoResizingTextArea = memo29(
     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,
@@ -16713,7 +16972,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
       id,
       className,
       style: {
-        backgroundColor: "var(--canvas-background)",
+        backgroundColor: cssVars.colors.canvasBackground,
         display: "flex",
         flexDirection: "row",
         ...style5
@@ -16752,7 +17011,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
             cursor: "col-resize",
             width: "1px",
             height: "100%",
-            backgroundColor: "var(--divider)"
+            backgroundColor: cssVars.colors.divider
           }
         }
       )),
@@ -16778,7 +17037,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
             cursor: "col-resize",
             width: "1px",
             height: "100%",
-            backgroundColor: "var(--divider)"
+            backgroundColor: cssVars.colors.divider
           }
         }
       ), /* @__PURE__ */ React70.createElement(
@@ -16922,7 +17181,10 @@ __export(InspectorPrimitives_exports, {
   Title: () => Title3,
   VerticalSeparator: () => VerticalSeparator
 });
-import React72, { memo as memo32, forwardRef as forwardRef23 } from "react";
+import React72, {
+  forwardRef as forwardRef23,
+  memo as memo32
+} from "react";
 var Section2 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React72.createElement(
   "div",
   {
@@ -16961,7 +17223,7 @@ var Checkbox3 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ R
   {
     ref,
     type: "checkbox",
-    className: cn("m-0", className),
+    className: cn("m-0 focus:z-interactable", className),
     ...props
   }
 ));
@@ -16975,12 +17237,16 @@ var Text3 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React
 ));
 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) {
+var RowLabel = forwardRef23(function RowLabel2({
+  className,
+  $textStyle,
+  ...props
+}, ref) {
   return /* @__PURE__ */ React72.createElement(
-    "span",
+    "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
     }
   );
@@ -17065,6 +17331,7 @@ export {
   WorkspaceLayout,
   cn,
   createSectionedMenu,
+  cssVars,
   fuzzyFilter,
   fuzzyScore,
   fuzzyTokenize,