@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/Divider.tsx

@@ -20,12 +20,12 @@ export const Divider = memo(function Divider({
   return (
     <div
       className={cx(
-        `h-px min-h-px self-stretch`,
+        `n-h-px n-min-h-px n-self-stretch`,
         variant === "strong"
-          ? "bg-divider-strong"
+          ? "n-bg-divider-strong"
           : variant === "subtle"
-            ? "bg-divider-subtle"
-            : "bg-divider",
+            ? "n-bg-divider-subtle"
+            : "n-bg-divider",
         className
       )}
       style={{
@@ -50,12 +50,12 @@ export const DividerVertical = memo(function DividerVertical({
   return (
     <div
       className={cx(
-        `w-px min-w-px self-stretch`,
+        `n-w-px n-min-w-px n-self-stretch`,
         variant === "strong"
-          ? "bg-divider-strong"
+          ? "n-bg-divider-strong"
           : variant === "subtle"
-            ? "bg-divider-subtle"
-            : "bg-divider",
+            ? "n-bg-divider-subtle"
+            : "n-bg-divider",
         className
       )}
       style={{

package/src/components/DraggableMenuButton.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { DragHandleDots2Icon } from "@noya-app/noya-icons";
 import {
   memoGeneric,
   useControlledOrUncontrolled,
@@ -9,6 +8,7 @@ import React, { useCallback, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { DropdownMenu } from "./DropdownMenu";
+import { Icon, IconName } from "./Icons";
 import { MenuItem } from "./internal/Menu";
 
 /**
@@ -25,6 +25,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   isVisible = true,
   className,
   style,
+  iconName = "DragHandleDots2Icon",
   ...rest
 }: {
   open?: boolean;
@@ -35,6 +36,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   isVisible?: boolean;
   className?: string;
   style?: React.CSSProperties;
+  iconName?: IconName;
 } & Omit<
   React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
   "onSelect"
@@ -95,7 +97,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
     <div
       {...rest}
       className={cx(
-        "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
+        "n-cursor-pointer n-rounded n-flex n-items-center n-justify-center n-py-[2px] hover:n-bg-input-background-light active:n-bg-active-background",
         className
       )}
       style={style}
@@ -115,14 +117,16 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
           onSelect={onSelect}
           shouldBindKeyboardShortcuts={false}
         >
-          <div className="pointer-events-none h-[15px]">
-            <DragHandleDots2Icon
+          <div className="n-pointer-events-none n-h-[15px]">
+            <Icon
+              name={iconName}
               color={isVisible || open ? cssVars.colors.icon : "transparent"}
             />
           </div>
         </DropdownMenu>
       ) : (
-        <DragHandleDots2Icon
+        <Icon
+          name={iconName}
           color={isVisible || open ? cssVars.colors.icon : "transparent"}
         />
       )}

package/src/components/Drawer.tsx

@@ -66,8 +66,8 @@ export const Drawer = React.memo(
       <>
         <Dialog.Overlay
           className={cx(
-            "inset-0 bg-black/50",
-            positioning === "absolute" ? "absolute" : "fixed",
+            "n-inset-0 n-bg-black/50",
+            positioning === "absolute" ? "n-absolute" : "n-fixed",
             overlayClassName
           )}
           style={overlayStyle}
@@ -76,9 +76,9 @@ export const Drawer = React.memo(
           id={id}
           style={style}
           className={cx(
-            `top-0 bottom-0 z-50 overflow-y-auto bg-sidebar-background rounded-none max-h-none max-w-none sm:!max-w-sm w-full border-divider-strong`,
-            positioning === "absolute" ? "absolute" : "fixed",
-            side === "left" ? "left-0 border-r" : "right-0 border-l",
+            `n-top-0 n-bottom-0 n-z-50 n-overflow-y-auto n-bg-sidebar-background n-rounded-none n-max-h-none n-max-w-none sm:!n-max-w-sm n-w-full n-border-divider-strong`,
+            positioning === "absolute" ? "n-absolute" : "n-fixed",
+            side === "left" ? "n-left-0 n-border-r" : "n-right-0 n-border-l",
             className
           )}
         >

package/src/components/DropdownMenu.tsx

@@ -18,7 +18,7 @@ import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
-import Button, { ButtonProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 import { MenuProps } from "./ContextMenu";
 import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";

package/src/components/EditableText.tsx

@@ -151,7 +151,7 @@ export const EditableText = memo(
     });
 
     const input = (
-      <div className="flex absolute inset-0 -mx-1.5 -my-1">
+      <div className="n-flex n-absolute n-inset-0 -mx-1.5 -n-my-1">
         <InputField.Root onFocusChange={setFocused}>
           <InputField.Input
             ref={inputRef}
@@ -198,7 +198,7 @@ export const EditableText = memo(
     );
 
     return (
-      <div className={cx("flex relative", className)} style={style}>
+      <div className={cx("n-flex n-relative", className)} style={style}>
         {preview}
         {focused && !readOnly && input}
       </div>

package/src/components/Fade.tsx

@@ -27,29 +27,29 @@ export const Fade = ({
   position = "front",
 }: FadeProps) => {
   const gradientDirection = {
-    left: "to-l",
-    right: "to-r",
-    top: "to-t",
-    bottom: "to-b",
+    left: "n-bg-gradient-to-l",
+    right: "n-bg-gradient-to-r",
+    top: "n-bg-gradient-to-t",
+    bottom: "n-bg-gradient-to-b",
   }[direction];
 
   const positionClasses = {
-    left: "left-0 top-0 bottom-0",
-    right: "right-0 top-0 bottom-0",
-    top: "left-0 right-0 top-0",
-    bottom: "left-0 right-0 bottom-0",
+    left: "n-left-0 n-top-0 n-bottom-0",
+    right: "n-right-0 n-top-0 n-bottom-0",
+    top: "n-left-0 n-right-0 n-top-0",
+    bottom: "n-left-0 n-right-0 n-bottom-0",
   }[direction];
 
   return (
-    <div className={cx("relative", className)} style={{ height }}>
+    <div className={cx("n-relative", className)} style={{ height }}>
       {position === "front" ? children : null}
       <div
         className={cx(
-          "absolute pointer-events-none",
+          "n-absolute n-pointer-events-none",
           positionClasses,
-          `bg-gradient-${gradientDirection}`,
-          "from-transparent to-background",
-          zIndex && `z-[${zIndex}]`
+          gradientDirection,
+          "n-from-transparent n-to-background",
+          zIndex && `n-z-[${zIndex}]`
         )}
         style={{
           width: width ?? "100%",

package/src/components/FileUploadIndicator.tsx

@@ -24,24 +24,24 @@ export function FileUploadIndicator({
   const value = typeof percent === "number" ? Math.round(percent) : 0;
 
   return (
-    <div className="flex items-center gap-2">
-      <div className="w-12 h-12 bg-background rounded-md overflow-hidden">
+    <div className="n-flex n-items-center n-gap-2">
+      <div className="n-w-12 n-h-12 n-bg-background n-rounded-md n-overflow-hidden">
         <MediaThumbnail
           size="medium"
           fileName={name}
           contentType={contentType}
         />
       </div>
-      <div className="flex flex-col flex-1 justify-center gap-1 min-w-0">
+      <div className="n-flex n-flex-col n-flex-1 n-justify-center n-gap-1 n-min-w-0">
         {name && (
-          <Small color="text" className="truncate leading-none">
+          <Small color="text" className="n-truncate n-leading-none">
             {name}
           </Small>
         )}
         {typeof total === "number" && typeof percent === "number" && (
           <Small
             color="textSubtle"
-            className="leading-none"
+            className="n-leading-none"
             style={{ fontSize: "11px" }}
           >
             {formatByteSize(Math.round((percent / 100) * total))} /{" "}
@@ -52,23 +52,23 @@ export function FileUploadIndicator({
           <Progress
             value={value}
             style={{ marginTop: "3px", height: "3px" }}
-            className="rounded-sm"
+            className="n-rounded-sm"
             colorScheme="secondary"
           />
         )}
       </div>
-      <div className="flex items-center justify-center gap-2">
+      <div className="n-flex n-items-center n-justify-center n-gap-2">
         {typeof value === "number" && (
           <Small
             color="textSubtle"
             style={{ lineHeight: "1", fontSize: "13px" }}
-            className="tabular-nums text-right w-10"
+            className="n-tabular-nums n-text-right n-w-10"
           >
             {value}%
           </Small>
         )}
         {done ? (
-          <div className="w-[15px] h-[15px] bg-secondary rounded-full flex items-center justify-center text-white">
+          <div className="n-w-[15px] n-h-[15px] n-bg-secondary n-rounded-full n-flex n-items-center n-justify-center n-text-white">
             <Checkmark />
           </div>
         ) : (
@@ -86,13 +86,13 @@ export function FileUploadList({
 }) {
   return (
     <>
-      <div className="flex items-center gap-2 py-2 px-4">
+      <div className="n-flex n-items-center n-gap-2 n-py-2 n-px-4">
         <Heading5>
           Uploading {uploads.length} {uploads.length === 1 ? "asset" : "assets"}
         </Heading5>
       </div>
       <Divider />
-      <div className="flex flex-col gap-3 max-h-[500px] overflow-y-auto overflow-x-hidden py-4 px-4">
+      <div className="n-flex n-flex-col n-gap-3 n-max-h-[500px] n-overflow-y-auto n-overflow-x-hidden n-py-4 n-px-4">
         {uploads.map((upload) => (
           <FileUploadIndicator
             key={upload.id}

package/src/components/FloatingWindow.tsx

@@ -127,11 +127,11 @@ function defaultRenderToolbar({
 }) {
   return (
     <>
-      <Small className="flex-1 font-medium text-text">{title}</Small>
+      <Small className="n-flex-1 n-font-medium n-text-text">{title}</Small>
       {toolbarContent}
       <IconButton
         iconName="Cross3Icon"
-        className="h-8 w-8 rounded-full"
+        className="n-h-8 n-w-8 n-rounded-full"
         onClick={onClose}
         size={20}
         style={{

package/src/components/Grid.tsx

@@ -84,6 +84,7 @@ export const Grid = memoGeneric(
       renderThumbnail,
       renderAction,
       renderDetail,
+      renderRight,
       onSelectionChange,
       selectedIds = emptyArray,
       //   itemRoleDescription = "clickable item",
@@ -159,10 +160,10 @@ export const Grid = memoGeneric(
         aria-multiselectable={true}
         minColumnWidth={minColumnWidth}
         scrollable={items.length > 0 && scrollable}
-        contentClassName={cx(items.length === 0 && "flex flex-1")}
+        contentClassName={cx(items.length === 0 && "n-flex n-flex-1")}
         gap={gap}
         className={cx(
-          isDropTargetActive && "bg-selected-list-item-background",
+          isDropTargetActive && "n-bg-selected-list-item-background",
           className
         )}
         {...dropTargetProps}
@@ -212,12 +213,14 @@ export const Grid = memoGeneric(
 
               const subtitle = (
                 <span
-                  className={cx(isSelected && "text-selected-list-item-text")}
+                  className={cx(isSelected && "n-text-selected-list-item-text")}
                 >
                   {renderDetail?.(item, isSelected)}
                 </span>
               );
 
+              const right = renderRight?.(item, isSelected);
+
               return (
                 <GridView.Item<M>
                   key={id}
@@ -232,9 +235,12 @@ export const Grid = memoGeneric(
                     setHoveredId(isHovering ? id : undefined);
                   }}
                   title={
-                    <div className="flex items-center gap-2 flex-row">
+                    <div className="n-flex n-items-center n-gap-2 n-flex-row">
                       <EditableText
-                        className={cx(detailPosition === "end" && "flex-1")}
+                        className={cx(
+                          (detailPosition === "end" || right) && "n-flex-1",
+                          "n-truncate n-select-none"
+                        )}
                         tabIndex={isRenaming ? undefined : -1}
                         value={getName(item)}
                         focused={isRenaming}
@@ -248,20 +254,21 @@ export const Grid = memoGeneric(
                           setRenamingId(undefined);
                         }}
                         // max height ensures preview text and input are one line
-                        textClassName="bg-listview-editing-background max-h-input-height"
+                        textClassName="n-bg-listview-editing-background n-max-h-input-height"
                       >
                         {(props) => (
                           <span
                             {...props}
                             className={cx(
                               isSelected
-                                ? "text-selected-list-item-text"
-                                : "text-text",
-                              "truncate select-none"
+                                ? "n-text-selected-list-item-text"
+                                : "n-text-text",
+                              "n-truncate n-select-none"
                             )}
                           />
                         )}
                       </EditableText>
+                      {right && <div className="n-flex-none">{right}</div>}
                       {detailPosition === "end" && subtitle}
                     </div>
                   }
@@ -295,8 +302,8 @@ export const Grid = memoGeneric(
                   {thumbnail && (
                     <div
                       className={cx(
-                        "rounded overflow-hidden flex-none flex w-full",
-                        isSelected && "text-selected-list-item-text"
+                        "n-rounded n-overflow-hidden n-flex-none n-flex n-w-full",
+                        isSelected && "n-text-selected-list-item-text"
                       )}
                       tabIndex={-1}
                     >

package/src/components/GridView.tsx

@@ -34,9 +34,9 @@ const ItemTitle = ({
   return (
     <span
       className={cx(
-        "font-sans text-heading5 text-text-muted font-medium",
+        "n-font-sans n-text-heading5 n-text-text-muted n-font-medium",
         showBackground &&
-          "bg-sidebar-background border border-divider-subtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+          "n-bg-sidebar-background n-n-border n-border-divider-subtle n-rounded-[2px] n-backdrop-blur-[4px] n-p-[2px_4px]"
       )}
     >
       {children}
@@ -54,9 +54,9 @@ const ItemDescription = ({
   return (
     <span
       className={cx(
-        "font-sans text-sm text-text-muted select-none truncate",
+        "n-font-sans n-text-sm n-text-text-muted n-select-none n-truncate",
         showBackground &&
-          "bg-sidebar-background border border-divider-subtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+          "n-bg-sidebar-background n-n-border n-border-divider-subtle n-rounded-[2px] n-backdrop-blur-[4px] n-p-[2px_4px]"
       )}
     >
       {children}
@@ -73,7 +73,10 @@ const SectionTitle = ({
 }) => {
   return (
     <span
-      className={`font-sans text-heading3 font-medium user-select-none truncate ${last ? "text-text" : "text-text-muted"}`}
+      className={cx(
+        "n-font-sans n-text-heading3 n-font-medium n-user-select-none n-truncate",
+        last ? "n-text-text" : "n-text-text-muted"
+      )}
     >
       {children}
     </span>
@@ -88,7 +91,7 @@ interface ItemProps<MenuItemType extends string = string> {
   loading?: boolean;
   selected?: boolean;
   onClick?: (event: React.MouseEvent) => void;
-  onSelect?: (options: KeyModifiers) => void;
+  onSelect?: (options: KeyModifiers & { stopPropagation(): void }) => void;
   onDoubleClick?: () => void;
   onHoverChange?: (isHovering: boolean) => void;
   children?: ReactNode;
@@ -175,14 +178,14 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     <Component
       {...props}
       className={cx(
-        "flex flex-col relative rounded p-2 -m-2 text-text",
-        "cursor-pointer",
-        "active:opacity-70",
-        selected && "bg-selected-list-item-background",
-        hovered && "bg-list-view-hover-background",
-        disabled && "opacity-50",
-        showInsideDropIndicator && "ring-2 ring-primary ring-inset",
-        "focus:ring-2 focus:ring-primary focus:ring-inset focus:outline-none"
+        "n-flex n-flex-col n-relative n-rounded n-p-2 -n-m-2 n-text-text",
+        "n-cursor-pointer",
+        "active:n-opacity-70",
+        selected && "n-bg-selected-list-item-background",
+        hovered && "n-bg-list-view-hover-background",
+        disabled && "n-opacity-50",
+        showInsideDropIndicator && "n-ring-2 n-ring-primary n-ring-inset",
+        "focus:n-ring-2 focus:n-ring-primary focus:n-ring-inset focus:n-outline-none"
       )}
       id={id}
       href={href}
@@ -196,8 +199,10 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     >
       <div
         className={cx(
-          "flex items-center justify-center rounded",
-          bordered ? "border border-divider" : "border border-transparent"
+          "n-flex n-items-center n-justify-center n-rounded",
+          bordered
+            ? "n-border n-border-divider"
+            : "n-border n-border-transparent"
         )}
         style={style}
       >
@@ -216,7 +221,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
-        <div className="absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5">
+        <div className="n-absolute n-inset-0 n-flex n-flex-col n-justify-end n-items-start n-p-1 n-pointer-events-none n-truncate n-gap-0.5">
           {title && <ItemTitle showBackground>{title}</ItemTitle>}
           {subtitle && (
             <ItemDescription showBackground>{subtitle}</ItemDescription>
@@ -224,12 +229,12 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         </div>
       )}
       {action && (
-        <div className="absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5">
+        <div className="n-absolute n-top-[7px] n-right-[7px] n-flex n-flex-col n-justify-end n-items-start n-p-1 n-truncate n-gap-0.5">
           {action}
         </div>
       )}
       {loading && (
-        <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%]">
+        <div className="n-flex n-flex-col n-justify-start n-items-end n-p-1 n-pointer-events-none n-animate-shimmer n-absolute n-inset-0 n-bg-gradient-to-r n-from-white/0 n-via-[rgb(226,232,240)]/50 n-to-white/0 n-bg-[length:200%_100%]">
           <ActivityIndicator opacity={0.5} size={13} />
         </div>
       )}
@@ -252,7 +257,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     element = (
       <Tooltip
         content={
-          <div className="flex flex-col gap-0.5">
+          <div className="n-flex n-flex-col gap-0.5">
             <ItemTitle>{title}</ItemTitle>
             <ItemDescription>{subtitle}</ItemDescription>
           </div>
@@ -340,8 +345,8 @@ const GridViewRoot = forwardRef(function GridViewRoot(
 
   const mergedClassName = useMemo(() => {
     const baseClassName = cx(
-      "flex flex-col -mx-3",
-      scrollable ? "basis-0 min-h-0" : "flex-none",
+      "n-flex n-flex-col n--mx-3",
+      scrollable ? "n-basis-0 n-min-h-0" : "n-flex-none",
       className
     );
 
@@ -350,7 +355,9 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     });
   }, [className, scrollable]);
 
-  const content = <div className={cx("p-3", contentClassName)}>{children}</div>;
+  const content = (
+    <div className={cx("n-p-3", contentClassName)}>{children}</div>
+  );
 
   return (
     <GridViewContext.Provider value={contextValue}>
@@ -389,7 +396,7 @@ function GridViewSection({
   ) : (
     <div
       role="presentation"
-      className={cx("grid text-text", className)}
+      className={cx("n-grid n-text-text", className)}
       style={styles}
     >
       {children}
@@ -401,7 +408,7 @@ function GridViewSectionHeader({ title }: { title: string }) {
   const grouped = title.split("/");
 
   return (
-    <div className="px-5">
+    <div className="n-px-5">
       <Spacer.Vertical size={24} />
       {withSeparatorElements(
         grouped.map((title, index) => (

package/src/components/IVirtualizedList.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export interface IVirtualizedList {
+  scrollToIndex(index: number): void;
+}

package/src/components/Icons.tsx

@@ -1,18 +1,38 @@
 import * as Icons from "@noya-app/noya-icons";
+import { IconProps } from "@noya-app/noya-icons";
 import * as React from "react";
 
 export type IconName = keyof typeof Icons;
 
 export { Icons };
 
-export function renderIcon(
-  iconName: Exclude<React.ReactNode, string> | IconName
-): React.ReactNode {
+export type IconProp = Exclude<React.ReactNode, string> | IconName;
+
+export function renderIcon(iconName: IconProp): React.ReactNode {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName as IconName];
 
-    return <Icon className="min-h-[15px]" />;
+    return <Icon className="n-min-h-[15px]" />;
   }
 
   return iconName;
 }
+
+const didWarn = new Set<string>();
+
+export function Icon({
+  name,
+  ...props
+}: { name: IconName } & Omit<IconProps, "name">) {
+  const Icon = Icons[name];
+
+  if (!Icon) {
+    if (!didWarn.has(name)) {
+      console.warn(`Icon ${name} not found in @noya-app/noya-icons`);
+      didWarn.add(name);
+    }
+    return null;
+  }
+
+  return <Icon {...props} />;
+}

package/src/components/InputField.tsx

@@ -164,7 +164,7 @@ const InputFieldButton = memo(
         size={size === "medium" ? "normal" : size}
         className={cx(
           className,
-          variant === "floating" && "bg-transparent shadow-none"
+          variant === "floating" && "n-bg-transparent n-shadow-none"
         )}
         {...rest}
       >
@@ -228,21 +228,21 @@ const InputElement = forwardRef(
     });
 
     const inputClassName = cx(
-      "flex w-0 flex-1 relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary placeholder:text-text-disabled transition-all",
+      "n-flex n-w-0 n-flex-1 n-relative n-border-0 n-outline-none n-min-w-0 n-self-stretch n-rounded n-bg-input-background focus:n-ring-2 focus:n-ring-primary placeholder:n-text-text-disabled n-transition-[box-shadow]",
       readOnly
-        ? "text-text-muted"
+        ? "n-text-text-muted"
         : disabled
-          ? "text-text-disabled"
-          : "text-text",
-      "font-sans font-normal",
-      $textAlign && `text-${$textAlign}`,
+          ? "n-text-text-disabled"
+          : "n-text-text",
+      "n-font-sans n-font-normal",
+      $textAlign && `n-text-${$textAlign}`,
       size === "small"
-        ? "text-[11px] leading-[19px] py-[1px]"
+        ? "n-text-[11px] n-leading-[19px] n-py-[1px]"
         : size === "large"
-          ? "py-2.5 text-heading5"
+          ? "n-py-2.5 n-text-heading5"
           : size === "medium"
-            ? "py-1 text-heading5"
-            : $variant === "bare" && "py-1 -m-1",
+            ? "n-py-1 n-text-heading5"
+            : $variant === "bare" && "n-py-1 -n-m-1",
       className
     );
 
@@ -477,7 +477,7 @@ const RootContainer = forwardRef<
 >(({ $width, className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx("flex flex-row relative flex-1", className)}
+    className={cx("n-flex n-flex-row n-relative n-flex-1", className)}
     style={{
       maxWidth: $width || $width === 0 ? `${$width}px` : undefined,
       ...props.style,
@@ -572,7 +572,7 @@ function InputFieldRoot({
 
   const insetLabel = useMemo(
     () => (
-      <Label htmlFor={id} className="!text-text-disabled">
+      <Label htmlFor={id} className="!n-text-text-disabled">
         {labelProp ?? label}
       </Label>
     ),
@@ -590,7 +590,7 @@ function InputFieldRoot({
       {(end || label) && (
         <span
           ref={endRef}
-          className={cx(endStyles, label && end && "gap-1.5", endClassName)}
+          className={cx(endStyles, label && end && "n-gap-1.5", endClassName)}
         >
           {labelProp
             ? insetLabel
@@ -626,7 +626,7 @@ function InputFieldRoot({
         >
           {measuredWidthObject && (
             <div
-              className="flex flex-col overflow-hidden"
+              className="n-flex n-flex-col n-overflow-hidden"
               style={measuredWidthObject}
             >
               {renderPopoverContent(measuredWidthObject)}
@@ -667,12 +667,12 @@ const PrimitiveInputField = ({
       style={memoizedStyles}
       id={id}
       className={cx(
-        "flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 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 transition-all",
+        "n-flex n-w-0 n-flex-1 n-relative n-border-none n-outline-none n-min-w-0 n-self-stretch n-rounded n-py-1 n-bg-input-background n-select-all n-pointer-events-[all] focus:n-ring-2 focus:n-ring-primary n-font-sans n-font-normal n-text-heading5 placeholder:n-text-text-disabled focus:n-z-interactable n-transition-[box-shadow]",
         readOnly
-          ? "text-text-muted"
+          ? "n-text-text-muted"
           : disabled
-            ? "text-text-disabled"
-            : "text-text",
+            ? "n-text-text-disabled"
+            : "n-text-text",
         className
       )}
       {...props}