@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/src/hooks/useTriggerToggle.ts

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseTriggerToggleOptions {
+  /**
+   * Called when an interaction outside the popup occurs.
+   * Return false to prevent the component from closing.
+   */
+  shouldCloseOnInteractOutside?: (event: PointerEvent) => boolean;
+}
+
+/**
+ * Hook that provides toggle behavior for trigger-based components (Popover, Drawer, etc.)
+ *
+ * When a component is open and the user clicks the trigger, this hook ensures:
+ * 1. The component closes (normal behavior)
+ * 2. The immediate reopen attempt from the same click is blocked
+ * 3. Subsequent clicks work normally
+ *
+ * @param isOpen - Whether the component is currently open
+ * @param setIsOpen - Function to update the open state
+ * @param options - Optional configuration
+ * @returns Object with anchorElement state, popupRef, and handleOpenChange
+ */
+export function useTriggerToggle(
+  isOpen: boolean,
+  setIsOpen: (open: boolean) => void,
+  options: UseTriggerToggleOptions = {}
+) {
+  const { shouldCloseOnInteractOutside } = options;
+
+  const [anchorElement, setAnchorElement] = useState<Element | null>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  // Track whether a close was just initiated (to prevent immediate reopen from same click)
+  const closeInitiatedRef = useRef(false);
+  // Track whether the next close should be prevented based on shouldCloseOnInteractOutside
+  const shouldPreventCloseRef = useRef(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      // Check if click is outside the popup content for shouldCloseOnInteractOutside
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node)
+      ) {
+        if (shouldCloseOnInteractOutside) {
+          const shouldClose = shouldCloseOnInteractOutside(event);
+          shouldPreventCloseRef.current = !shouldClose;
+        }
+      }
+    };
+
+    // Use capture phase to intercept before Base UI's handler
+    document.addEventListener("pointerdown", handlePointerDown, true);
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [isOpen, anchorElement, shouldCloseOnInteractOutside]);
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      // If closing and we should prevent it, skip
+      if (!newOpen && shouldPreventCloseRef.current) {
+        shouldPreventCloseRef.current = false;
+        return;
+      }
+
+      // When closing, set flag and clear it on next macrotask
+      // This detects if open is called within the same event loop cycle (same click)
+      if (!newOpen) {
+        closeInitiatedRef.current = true;
+        setTimeout(() => {
+          closeInitiatedRef.current = false;
+        }, 0);
+      }
+
+      // Block immediate reopen from the same click that closed the component
+      if (newOpen && closeInitiatedRef.current) {
+        return;
+      }
+
+      setIsOpen(newOpen);
+    },
+    [setIsOpen]
+  );
+
+  return {
+    anchorElement,
+    setAnchorElement,
+    popupRef,
+    handleOpenChange,
+  };
+}

package/src/index.css

@@ -109,6 +109,8 @@
   --n-inspector-v-separator: 10px;
   --n-dialog-padding: 32px;
   --n-input-height: 27px;
+  --n-input-padding-x: 8px;
+  --n-input-padding-y: 4px;
   --n-icon: var(--n-indigo-300);
   --n-icon-selected: rgb(220, 220, 220);
   --n-warning: rgb(251, 211, 0);

package/src/index.tsx

@@ -26,11 +26,13 @@ export * from "./components/DraggableMenuButton";
 export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
+export * from "./components/EmojiPicker";
 export * from "./components/Fade";
 export * from "./components/file-explorer/FileExplorerLayout";
 export * from "./components/FileUploadIndicator";
 export * from "./components/FloatingWindow";
 export * from "./components/Grid";
+export * from "./components/GridBackground";
 export * from "./components/GridView";
 export * from "./components/IconButton";
 export * from "./components/Icons";
@@ -42,7 +44,6 @@ export type {
   MenuItem,
   SelectableMenuItem,
 } from "./components/internal/Menu";
-export * from "./components/internal/MenuViewport";
 export * from "./components/IVirtualizedList";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
@@ -62,7 +63,6 @@ export * from "./components/ResizableContainer";
 export * from "./components/RingProgress";
 export * from "./components/ScrollableSidebar";
 export * from "./components/ScrollArea";
-export * from "./components/ScrollArea2";
 export * from "./components/SearchCompletionMenu";
 export * from "./components/Section";
 export * from "./components/SegmentedControl";
@@ -128,5 +128,6 @@ export * from "./components/DimensionInput";
 export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
+export * from "./components/OverlayToolbar";
 export * from "./components/Toolbar";
 export * from "./components/ToolbarDrawer";

package/src/theme/proseTheme.ts

@@ -1,2 +1,24 @@
 export const proseTheme =
   "n-prose n-prose-sm n-max-w-none [[data-theme='dark']_&]:n-prose-invert prose-a:n-text-blue-600";
+
+export const whiteboardProseTheme = (isDark: boolean) =>
+  [
+    "n-prose",
+    "n-prose-sm",
+    "n-max-w-none",
+    isDark ? "n-prose-invert n-text-white" : "",
+    "prose-p:n-m-0",
+    "prose-ul:n-m-0",
+    "prose-ol:n-m-0",
+    "prose-li:n-m-0",
+    "prose-li:n-p-0",
+    "prose-a:n-text-inherit",
+    "prose-pre:n-my-1",
+    "prose-pre:n-text-inherit",
+    "prose-strong:n-text-inherit",
+    "prose-em:n-italic",
+    "prose-ol:n-list-inside",
+    "prose-ul:n-list-inside",
+    "prose-ol:n-pl-0",
+    "prose-ul:n-pl-0",
+  ].join(" ");

package/src/utils/mergeProps.ts

@@ -0,0 +1,57 @@
+import React from "react";
+
+/**
+ * Merges trigger props with child element props, composing event handlers
+ * instead of overwriting them. This ensures that when a component like
+ * Tooltip wraps a Button with an onClick, both handlers get called.
+ *
+ * @param triggerProps - Props from the trigger component (e.g., Base UI's Trigger render prop)
+ * @param childProps - Props from the child element being wrapped
+ * @returns Merged props with composed event handlers
+ */
+export function mergePropsWithEventComposition(
+  triggerProps: Record<string, unknown>,
+  childProps: Record<string, unknown>
+): Record<string, unknown> {
+  const mergedProps: Record<string, unknown> = { ...triggerProps };
+
+  // Compose event handlers to preserve child's handlers
+  for (const key of Object.keys(triggerProps)) {
+    if (
+      key.startsWith("on") &&
+      typeof triggerProps[key] === "function" &&
+      typeof childProps[key] === "function"
+    ) {
+      const triggerHandler = triggerProps[key] as (...args: unknown[]) => void;
+      const childHandler = childProps[key] as (...args: unknown[]) => void;
+      mergedProps[key] = (...args: unknown[]) => {
+        childHandler(...args);
+        triggerHandler(...args);
+      };
+    }
+  }
+
+  return mergedProps;
+}
+
+/**
+ * Clones a React element with trigger props, composing event handlers.
+ * If the element is not a valid React element, wraps it in a span.
+ *
+ * @param element - The element to clone (trigger child)
+ * @param triggerProps - Props from the trigger component
+ * @returns Cloned element with merged props
+ */
+export function cloneElementWithMergedProps(
+  element: React.ReactNode,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  triggerProps: any
+): React.ReactElement {
+  const props = triggerProps as Record<string, unknown>;
+  if (React.isValidElement(element)) {
+    const childProps = element.props as Record<string, unknown>;
+    const mergedProps = mergePropsWithEventComposition(props, childProps);
+    return React.cloneElement(element, mergedProps);
+  }
+  return React.createElement("span", props, element);
+}

package/src/utils/skinTone.ts

@@ -0,0 +1,90 @@
+// Fitzpatrick skin tone modifiers
+export const SKIN_TONES = {
+  default: "",
+  light: "\u{1F3FB}", // 🏻 Type 1-2
+  "medium-light": "\u{1F3FC}", // 🏼 Type 3
+  medium: "\u{1F3FD}", // 🏽 Type 4
+  "medium-dark": "\u{1F3FE}", // 🏾 Type 5
+  dark: "\u{1F3FF}", // 🏿 Type 6
+} as const;
+
+export type SkinTone = keyof typeof SKIN_TONES;
+
+// Display emojis for the skin tone picker (using hand as example)
+export const SKIN_TONE_DISPLAY: Record<SkinTone, string> = {
+  default: "✋",
+  light: "✋🏻",
+  "medium-light": "✋🏼",
+  medium: "✋🏽",
+  "medium-dark": "✋🏾",
+  dark: "✋🏿",
+};
+
+// Emoji presentation selector - takes the same place as skin tone modifier
+// https://unicode.org/reports/tr51/#composing_zwj_seq
+const EMOJI_PRESENTATION_SELECTOR = "\u{FE0F}";
+
+// Emojis that don't render correctly with skin tones on some platforms
+// - Family emojis with 2 people (to distinguish from couple, handshake, etc.)
+// - Multi-person activity emojis (don't render correctly on macOS)
+const SKIN_TONE_EXCLUDED_EMOJIS = new Set([
+  "👩‍👦",
+  "👩‍👧",
+  "👨‍👧",
+  "👨‍👦",
+  "👯", // dancers
+  "👯‍♂️", // dancing_men
+  "👯‍♀️", // dancing_women
+  "🤼", // wrestling
+  "🤼‍♂️", // men_wrestling
+  "🤼‍♀️", // women_wrestling
+]);
+
+// Regex to match emoji modifier base characters (characters that can have skin tone applied)
+const EMOJI_MODIFIER_BASE_REGEX = /\p{Emoji_Modifier_Base}/gu;
+
+// Apply skin tone modifier to an emoji
+// Based on https://github.com/sindresorhus/skin-tone (MIT)
+export function applySkinTone(emoji: string, skinTone: SkinTone): string {
+  if (skinTone === "default") {
+    return emoji;
+  }
+
+  // Remove any existing skin tone modifiers
+  const cleanEmoji = emoji.replaceAll(/[\u{1F3FB}-\u{1F3FF}]/gu, "");
+
+  // Count how many modifiable components the emoji has
+  const modifiableCount =
+    cleanEmoji.match(EMOJI_MODIFIER_BASE_REGEX)?.length ?? 0;
+
+  // Skip if:
+  // - No modifiable components
+  // - More than 2 modifiable components (family emojis with 3+ people)
+  // - Excluded emoji (family emojis, dancers that don't render correctly)
+  if (
+    modifiableCount === 0 ||
+    modifiableCount > 2 ||
+    SKIN_TONE_EXCLUDED_EMOJIS.has(cleanEmoji)
+  ) {
+    return emoji;
+  }
+
+  const tone = SKIN_TONES[skinTone];
+  let result = "";
+
+  for (const codePoint of cleanEmoji) {
+    // Skip emoji presentation selector (it's replaced by skin tone modifier)
+    if (codePoint === EMOJI_PRESENTATION_SELECTOR) {
+      continue;
+    }
+
+    result += codePoint;
+
+    // Apply skin tone after each modifiable component
+    if (EMOJI_MODIFIER_BASE_REGEX.test(codePoint)) {
+      result += tone;
+    }
+  }
+
+  return result;
+}

package/tailwind.config.ts

@@ -7,7 +7,12 @@ const config = {
   ...noyaConfig,
   prefix: "n-",
   plugins: [containerQueries, typography],
-  safelist: [...noyaConfig.safelist, "dark:n-prose-invert"],
+  safelist: [
+    ...noyaConfig.safelist,
+    "n-prose-invert",
+    "dark:n-prose-invert",
+    "prose-p:n-m-0",
+  ],
 } satisfies Config;
 
 export default config;

package/tsup.config.ts

@@ -6,7 +6,7 @@ const execAsync = promisify(exec);
 
 // "build": "tsup src/index.tsx --format cjs,esm --dts --sourcemap",
 export default defineConfig({
-  entry: ["./src/index.tsx"],
+  entry: ["./src/index.tsx", "./src/emojis.ts"],
   format: ["cjs", "esm"],
   dts: true,
   sourcemap: true,

package/src/__tests__/workspaceLayout.test.ts

@@ -1,281 +0,0 @@
-import { expect, it } from "bun:test";
-import { MockClientStorage } from "../../../noya-react-utils/src/__tests__/MockClientStorage";
-import {
-  CONTENT_AREA_ID,
-  LEFT_SIDEBAR_ID,
-  RIGHT_SIDEBAR_ID,
-} from "../components/workspace/constants";
-import {
-  getInitialLayout,
-  getLayoutCollapsedState,
-  getLayoutIds,
-  getPropertyKey,
-  getStorageKey,
-  mapWorkspaceLayoutState,
-  setInitialLayout,
-  toPercentageSize,
-  toPixelSize,
-} from "../components/workspace/panelStorage";
-import { WorkspaceLayoutState } from "../components/workspace/types";
-
-const TEST_WINDOW_WIDTH = 1000;
-
-it("gets layout ids", () => {
-  expect(
-    getLayoutIds({
-      hasLeftPanel: true,
-      hasRightPanel: false,
-      hasCenterPanel: true,
-    })
-  ).toEqual([LEFT_SIDEBAR_ID, CONTENT_AREA_ID]);
-});
-
-it("gets layout ids with all panels", () => {
-  expect(
-    getLayoutIds({
-      hasLeftPanel: true,
-      hasRightPanel: true,
-      hasCenterPanel: true,
-    })
-  ).toEqual([LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID]);
-});
-
-it("gets layout ids with no panels", () => {
-  expect(
-    getLayoutIds({
-      hasLeftPanel: false,
-      hasRightPanel: false,
-      hasCenterPanel: false,
-    })
-  ).toEqual([]);
-});
-
-it("converts to pixel size", () => {
-  expect(toPixelSize(25, TEST_WINDOW_WIDTH)).toBe(250); // 25% of 1000px = 250px
-  expect(toPixelSize(50, TEST_WINDOW_WIDTH)).toBe(500); // 50% of 1000px = 500px
-  expect(toPixelSize(75, TEST_WINDOW_WIDTH)).toBe(750); // 75% of 1000px = 750px
-});
-
-it("converts to percentage size", () => {
-  expect(toPercentageSize(250, TEST_WINDOW_WIDTH)).toBe(25); // 250px of 1000px = 25%
-  expect(toPercentageSize(500, TEST_WINDOW_WIDTH)).toBe(50); // 500px of 1000px = 50%
-  expect(toPercentageSize(750, TEST_WINDOW_WIDTH)).toBe(75); // 750px of 1000px = 75%
-});
-
-it("maps workspace layout state", () => {
-  const layout: WorkspaceLayoutState = {
-    "left,center": {
-      layout: [20, 80],
-      expandToSizes: { left: 30, center: 70 },
-    },
-    "left,center,right": {
-      layout: [20, 60, 20],
-      expandToSizes: { left: 25, center: 50, right: 25 },
-    },
-  };
-
-  const mapped = mapWorkspaceLayoutState(layout, (size) => size * 2);
-
-  expect(mapped).toEqual({
-    "left,center": {
-      layout: [40, 160],
-      expandToSizes: { left: 60, center: 140 },
-    },
-    "left,center,right": {
-      layout: [40, 120, 40],
-      expandToSizes: { left: 50, center: 100, right: 50 },
-    },
-  });
-});
-
-it("gets property key", () => {
-  expect(getPropertyKey([LEFT_SIDEBAR_ID, CONTENT_AREA_ID])).toBe(
-    [CONTENT_AREA_ID, LEFT_SIDEBAR_ID].sort().join(",")
-  );
-});
-
-it("gets storage key", () => {
-  expect(getStorageKey("test-workspace")).toBe(
-    "react-resizable-panels:test-workspace"
-  );
-});
-
-it("gets initial layout with left panel only", () => {
-  const result = getInitialLayout({
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID],
-    leftSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    rightSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    centerPanelPercentage: 80,
-    hasLeftPanel: true,
-    hasRightPanel: false,
-    hasCenterPanel: true,
-    windowWidth: TEST_WINDOW_WIDTH,
-  });
-
-  expect(result).toEqual([200, 800]); // 20% and 80% of 1000px
-});
-
-it("gets initial layout with collapsed left panel", () => {
-  const result = getInitialLayout({
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID],
-    leftSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: true,
-    },
-    rightSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    centerPanelPercentage: 80,
-    hasLeftPanel: true,
-    hasRightPanel: false,
-    hasCenterPanel: true,
-    windowWidth: TEST_WINDOW_WIDTH,
-  });
-
-  expect(result).toEqual([0, 1000]); // Collapsed left panel, center takes full width
-});
-
-it("gets initial layout with all panels", () => {
-  const result = getInitialLayout({
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID],
-    leftSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    rightSidebarOptions: {
-      initialSize: 20,
-      defaultCollapsed: false,
-    },
-    centerPanelPercentage: 60,
-    hasLeftPanel: true,
-    hasRightPanel: true,
-    hasCenterPanel: true,
-    windowWidth: TEST_WINDOW_WIDTH,
-  });
-
-  expect(result).toEqual([200, 600, 200]); // 20%, 60%, 20% of 1000px
-});
-
-it("sets initial layout in storage", () => {
-  const mockStorage = new MockClientStorage();
-
-  setInitialLayout({
-    storageKey: "test-key",
-    propertyKey: "left,center",
-    calculateLayout: () => [200, 800],
-    storage: mockStorage,
-  });
-
-  expect(mockStorage.hasItem("test-key")).toBe(true);
-  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual({
-    "left,center": {
-      layout: [200, 800],
-      expandToSizes: {},
-    },
-  });
-});
-
-it("does not update existing layout property in storage", () => {
-  const existingLayout: WorkspaceLayoutState = {
-    center: {
-      layout: [1000],
-      expandToSizes: {},
-    },
-    // Already has the property we're trying to set
-    "left,center": {
-      layout: [100, 900],
-      expandToSizes: {},
-    },
-  };
-
-  const mockStorage = new MockClientStorage();
-  mockStorage.setItem("test-key", JSON.stringify(existingLayout));
-
-  setInitialLayout({
-    storageKey: "test-key",
-    propertyKey: "left,center",
-    calculateLayout: () => [200, 800],
-    storage: mockStorage,
-  });
-
-  // setInitialLayout doesn't update existing properties, so the layout should remain unchanged
-  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual(
-    existingLayout
-  );
-});
-
-it("adds new layout property to existing storage", () => {
-  const existingLayout: WorkspaceLayoutState = {
-    center: {
-      layout: [1000],
-      expandToSizes: {},
-    },
-  };
-
-  const mockStorage = new MockClientStorage();
-  mockStorage.setItem("test-key", JSON.stringify(existingLayout));
-
-  // The propertyId should be sorted
-  const sortedPropertyId = [LEFT_SIDEBAR_ID, CONTENT_AREA_ID].sort().join(",");
-
-  setInitialLayout({
-    storageKey: "test-key",
-    propertyKey: sortedPropertyId,
-    calculateLayout: () => [200, 800],
-    storage: mockStorage,
-  });
-
-  expect(mockStorage.getItemParsed<WorkspaceLayoutState>("test-key")).toEqual({
-    center: {
-      layout: [1000],
-      expandToSizes: {},
-    },
-    [sortedPropertyId]: {
-      layout: [200, 800],
-      expandToSizes: {},
-    },
-  });
-});
-
-it("gets layout collapsed state", () => {
-  const layoutGroup = {
-    layout: [0, 800, 200],
-    expandToSizes: {},
-  };
-
-  const result = getLayoutCollapsedState({
-    layoutGroup,
-    propertyKey: "left,center,right",
-    layoutIds: [LEFT_SIDEBAR_ID, CONTENT_AREA_ID, RIGHT_SIDEBAR_ID],
-    hasLeftPanel: true,
-    hasRightPanel: true,
-  });
-
-  expect(result.leftSidebarCollapsed).toBe(true); // size is 0
-  expect(result.rightSidebarCollapsed).toBe(false); // size is 200
-});
-
-it("handles panels that don't exist", () => {
-  const layoutGroup = {
-    layout: [1000],
-    expandToSizes: {},
-  };
-
-  const result = getLayoutCollapsedState({
-    layoutGroup,
-    propertyKey: "center",
-    layoutIds: [CONTENT_AREA_ID],
-    hasLeftPanel: false,
-    hasRightPanel: false,
-  });
-
-  expect(result.leftSidebarCollapsed).toBe(false); // Panel doesn't exist
-  expect(result.rightSidebarCollapsed).toBe(false); // Panel doesn't exist
-});

package/src/components/ScrollArea2.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { ScrollArea } from "@base-ui-components/react/scroll-area";
-import * as React from "react";
-import { cx } from "../utils/classNames";
-
-const SCROLLBAR_STATE_CLASSES =
-  "scroll-component n-opacity-0 n-transition-opacity n-delay-300 n-pointer-events-none data-[hovering]:n-opacity-100 data-[hovering]:n-delay-0 data-[hovering]:n-duration-75 data-[hovering]:n-pointer-events-auto data-[scrolling]:n-opacity-100 data-[scrolling]:n-delay-0 data-[scrolling]:n-duration-75 data-[scrolling]:n-pointer-events-auto";
-
-const SCROLLBAR_TRACK_VERTICAL =
-  "n-m-1 n-w-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
-const SCROLLBAR_TRACK_HORIZONTAL =
-  "n-m-1 n-h-1 flex n-justify-center n-rounded-md n-bg-divider-subtle";
-
-const SCROLLBAR_THUMB_VERTICAL =
-  "scroll-component n-w-full n-rounded n-bg-scrollbar";
-const SCROLLBAR_THUMB_HORIZONTAL =
-  "scroll-component n-h-full n-rounded n-bg-scrollbar";
-
-type ScrollAreaViewportProps = React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.Ref<HTMLDivElement>;
-};
-
-export function ScrollArea2({
-  children,
-  className,
-  viewportClassName,
-  orientation = "vertical",
-  style,
-  viewportProps,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  viewportClassName?: string;
-  orientation?: "vertical" | "horizontal" | "both";
-  style?: React.CSSProperties;
-  viewportProps?: ScrollAreaViewportProps;
-}) {
-  const {
-    className: viewportPropsClassName,
-    ref: viewportRef,
-    ...viewportRest
-  } = viewportProps ?? {};
-
-  return (
-    <ScrollArea.Root className={cx("n-relative", className)} style={style}>
-      <ScrollArea.Viewport
-        ref={viewportRef}
-        className={cx(
-          "n-h-full n-overscroll-contain",
-          viewportClassName,
-          viewportPropsClassName
-        )}
-        {...viewportRest}
-      >
-        {children}
-      </ScrollArea.Viewport>
-      {(orientation === "vertical" || orientation === "both") && (
-        <ScrollArea.Scrollbar
-          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_VERTICAL)}
-        >
-          <ScrollArea.Thumb className={SCROLLBAR_THUMB_VERTICAL} />
-        </ScrollArea.Scrollbar>
-      )}
-      {(orientation === "horizontal" || orientation === "both") && (
-        <ScrollArea.Scrollbar
-          orientation="horizontal"
-          className={cx(SCROLLBAR_STATE_CLASSES, SCROLLBAR_TRACK_HORIZONTAL)}
-        >
-          <ScrollArea.Thumb className={SCROLLBAR_THUMB_HORIZONTAL} />
-        </ScrollArea.Scrollbar>
-      )}
-      {orientation === "both" && <ScrollArea.Corner />}
-    </ScrollArea.Root>
-  );
-}