@noya-app/noya-designsystem 0.1.42 → 0.1.43

package/dist/index.mjs

@@ -13139,29 +13139,59 @@ var Combobox = memo14(
   forwardRef14(function Combobox2({
     id,
     loading,
-    initialValue = "",
     placeholder,
     items,
     size: size3,
-    onChange,
-    onSelectItem,
-    onHoverItem,
-    onFocus,
-    onBlur,
-    onDeleteWhenEmpty,
     style: style5,
     className,
     label,
     children: children2,
     hideMenuWhenEmptyValue = false,
-    allowArbitraryValues = false,
     readOnly = false,
     tabBehavior = "select",
-    openMenuBehavior = "showFilteredItems"
+    openMenuBehavior = "showFilteredItems",
+    onFocus,
+    onDeleteWhenEmpty,
+    ...rest
   }, forwardedRef) {
+    const props = useMemo17(() => {
+      if (rest.mode === "string") {
+        return {
+          mode: rest.mode,
+          initialValue: rest.initialValue,
+          onChange: rest.onChange,
+          onSelectItem: rest.onSelectItem,
+          onHoverItem: rest.onHoverItem,
+          onBlur: rest.onBlur,
+          allowArbitraryValues: rest.allowArbitraryValues
+        };
+      } else {
+        return {
+          mode: rest.mode,
+          initialValue: rest.initialValue,
+          onChange: rest.onChange,
+          onSelectItem: rest.onSelectItem,
+          onHoverItem: rest.onHoverItem,
+          onBlur: rest.onBlur
+        };
+      }
+    }, [
+      rest.mode,
+      rest.initialValue,
+      rest.onChange,
+      rest.onSelectItem,
+      rest.onHoverItem,
+      rest.onBlur,
+      rest.allowArbitraryValues
+    ]);
     const ref = useRef17(null);
+    const initialValueString = typeof props.initialValue === "string" ? props.initialValue : props.initialValue?.name ?? "";
     const [comboboxState] = useState20(
-      () => new ComboboxState(items, initialValue, allowArbitraryValues)
+      () => new ComboboxState(
+        items,
+        initialValueString,
+        props.mode === "string" && (props.allowArbitraryValues ?? false)
+      )
     );
     const state = useComboboxState(comboboxState);
     const [isFocused, setIsFocused] = useState20(false);
@@ -13171,11 +13201,7 @@ var Combobox = memo14(
       comboboxState.setItems(items);
     }, [items, comboboxState]);
     const { filter, selectedIndex, filteredItems } = state;
-    const shouldShowMenu = useMemo17(() => {
-      if (!isFocused) return false;
-      if (hideMenuWhenEmptyValue && filter === "") return false;
-      return true;
-    }, [hideMenuWhenEmptyValue, filter, isFocused]);
+    const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
     useEffect15(() => {
       if (listRef.current) {
         listRef.current.scrollToIndex(selectedIndex);
@@ -13183,15 +13209,28 @@ var Combobox = memo14(
     }, [selectedIndex]);
     const handleBlur = useCallback18(() => {
       ref.current?.blur();
-      comboboxState.reset(initialValue);
-      onBlur?.(state.filter === state.lastSubmittedValue.filter, filter);
+      comboboxState.reset(initialValueString);
+      if (props.mode === "string") {
+        props.onBlur?.(
+          state.filter === state.lastSubmittedValue.filter,
+          filter
+        );
+      } else {
+        const selectedItem = comboboxState.getSelectedItem();
+        if (selectedItem && selectedItem.type !== "sectionHeader") {
+          props.onBlur?.(
+            state.filter === state.lastSubmittedValue.filter,
+            selectedItem
+          );
+        }
+      }
       setIsFocused(false);
-    }, [filter, initialValue, onBlur, state, comboboxState]);
+    }, [filter, initialValueString, props, state, comboboxState]);
     const handleFocus = useCallback18(
       (event) => {
         setIsFocused(true);
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValue
+          openMenuBehavior === "showAllItems" ? "" : initialValueString
         );
         if (ref.current) {
           const length = ref.current.value.length;
@@ -13199,30 +13238,54 @@ var Combobox = memo14(
         }
         onFocus?.(event);
       },
-      [initialValue, onFocus, openMenuBehavior, comboboxState]
+      [initialValueString, onFocus, openMenuBehavior, comboboxState]
     );
     const handleUpdateSelection = useCallback18(
       (item) => {
         if (item.type === "sectionHeader") return;
         const selectedItem = comboboxState.selectCurrentItem(item);
         if (!selectedItem || selectedItem.type === "sectionHeader") return;
-        onSelectItem?.(selectedItem);
-        onHoverItem?.(void 0);
+        if (props.mode === "string") {
+          props.onSelectItem?.(selectedItem.name);
+          props.onHoverItem?.(void 0);
+        } else {
+          props.onSelectItem?.(selectedItem);
+          props.onHoverItem?.(void 0);
+        }
         setShouldBlur(true);
       },
-      [onSelectItem, onHoverItem, comboboxState]
+      [props, comboboxState]
     );
     const handleIndexChange = useCallback18(
       (index) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
         if (item && item.type !== "sectionHeader") {
-          onHoverItem?.(item);
+          if (props.mode === "string") {
+            props.onHoverItem?.(item.name);
+          } else {
+            props.onHoverItem?.(item);
+          }
+        } else {
+          props.onHoverItem?.(void 0);
+        }
+      },
+      [props, comboboxState]
+    );
+    const handleChange = useCallback18(
+      (value) => {
+        if (readOnly) return;
+        comboboxState.setFilter(value);
+        if (props.mode === "string") {
+          props.onChange?.(value);
         } else {
-          onHoverItem?.(void 0);
+          const selectedItem = comboboxState.getSelectedItem();
+          if (selectedItem && selectedItem.type !== "sectionHeader") {
+            props.onChange?.(selectedItem);
+          }
         }
       },
-      [onHoverItem, comboboxState]
+      [readOnly, props, comboboxState]
     );
     const handleKeyDown = useCallback18(
       (event) => {
@@ -13241,7 +13304,7 @@ var Combobox = memo14(
             if (shouldShowMenu) {
               if (item) {
                 handleUpdateSelection(item);
-              } else if (allowArbitraryValues) {
+              } else if (props.mode === "string" && props.allowArbitraryValues) {
                 comboboxState.submitArbitraryFilter(filter);
                 handleBlur();
               } else {
@@ -13271,7 +13334,7 @@ var Combobox = memo14(
                 }
                 handled = true;
               }
-            } else if (allowArbitraryValues && filter !== "") {
+            } else if (props.mode === "string" && props.allowArbitraryValues && filter !== "") {
               comboboxState.submitArbitraryFilter(filter);
               handleBlur();
               handled = true;
@@ -13306,17 +13369,9 @@ var Combobox = memo14(
         shouldShowMenu,
         comboboxState,
         tabBehavior,
-        allowArbitraryValues
+        props
       ]
     );
-    const handleChange = useCallback18(
-      (value) => {
-        if (readOnly) return;
-        comboboxState.setFilter(value);
-        onChange?.(value);
-      },
-      [onChange, readOnly, comboboxState]
-    );
     const typeaheadValue = comboboxState.getTypeaheadValue();
     useImperativeHandle3(forwardedRef, () => ({
       focus: () => {
@@ -13327,7 +13382,11 @@ var Combobox = memo14(
         }
       },
       setValue: (value) => {
-        comboboxState.setFilter(value);
+        if (typeof value === "string") {
+          comboboxState.setFilter(value);
+        } else {
+          comboboxState.setFilter(value.name);
+        }
       },
       selectAllInputText: () => {
         ref.current?.setSelectionRange(0, ref.current.value.length);
@@ -13341,14 +13400,14 @@ var Combobox = memo14(
           return;
         }
         comboboxState.reset(
-          openMenuBehavior === "showAllItems" ? "" : initialValue
+          openMenuBehavior === "showAllItems" ? "" : initialValueString
         );
         ref.current?.focus();
       },
       [
         shouldShowMenu,
         openMenuBehavior,
-        initialValue,
+        initialValueString,
         handleBlur,
         comboboxState
       ]
@@ -15193,46 +15252,56 @@ var Switch = function Switch2({
 };
 
 // src/components/TextArea.tsx
-import React71, { forwardRef as forwardRef21, memo as memo27, useCallback as useCallback25, useEffect as useEffect16, useRef as useRef20 } from "react";
+import React71, {
+  forwardRef as forwardRef21,
+  memo as memo27,
+  useCallback as useCallback25,
+  useEffect as useEffect16,
+  useRef as useRef20
+} from "react";
 var useAutoResize = (value) => {
   const textareaRef = useRef20(null);
   useEffect16(() => {
+    if (value === void 0) return;
     if (!textareaRef.current) return;
     textareaRef.current.style.height = "auto";
     textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
   }, [value]);
   return textareaRef;
 };
-var AutoResizingTextArea = memo27(
-  forwardRef21(function AutoResizingTextArea2({
+var TextArea = memo27(
+  forwardRef21(function TextArea2({
     value,
     onChangeText,
     className,
-    end,
-    endClassName,
     onChange,
+    autoResize = false,
     ...rest
   }, forwardedRef) {
-    const ref = useAutoResize(value || rest.placeholder || "");
+    const autoResizeRef = useAutoResize(
+      autoResize ? value || rest.placeholder || "" : void 0
+    );
     const handleChange = useCallback25(
       (event) => {
-        onChangeText(event.target.value);
+        onChangeText?.(event.target.value);
         onChange?.(event);
       },
       [onChangeText, onChange]
     );
     const handleRef = useCallback25(
       (value2) => {
-        ref.current = value2;
+        if (autoResize) {
+          autoResizeRef.current = value2;
+        }
         assignRef(forwardedRef, value2);
       },
-      [ref, forwardedRef]
+      [autoResize, autoResizeRef, forwardedRef]
     );
-    return /* @__PURE__ */ React71.createElement("div", { className: "relative w-full h-full" }, /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React71.createElement(
       "textarea",
       {
         className: cx(
-          `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-24 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
+          `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-6 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
           className
         ),
         ref: handleRef,
@@ -15240,7 +15309,27 @@ var AutoResizingTextArea = memo27(
         onChange: handleChange,
         value
       }
-    ), /* @__PURE__ */ React71.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end));
+    );
+  })
+);
+var TextAreaRow = memo27(
+  forwardRef21(function TextAreaRow2({
+    className,
+    textAreaClassName,
+    textAreaRef,
+    end,
+    endClassName,
+    ...rest
+  }, forwardedRef) {
+    return /* @__PURE__ */ React71.createElement(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cx("relative w-full h-full", className)
+      },
+      /* @__PURE__ */ React71.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
+      /* @__PURE__ */ React71.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
+    );
   })
 );
 
@@ -15415,6 +15504,7 @@ var UserPointer = memo28(function UserPointer2({
 import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
 import React75, {
   forwardRef as forwardRef22,
+  memo as memo29,
   useCallback as useCallback27,
   useImperativeHandle as useImperativeHandle4,
   useRef as useRef22,
@@ -15559,32 +15649,39 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
 }
 
 // src/components/WorkspaceLayout.tsx
-var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
+var WorkspaceLayout = forwardRef22(function WorkspaceLayout2({
   autoSavePrefix,
-  leftSidebarContent: leftPanelContent,
-  children: centerPanelContent,
-  rightSidebarContent: rightPanelContent,
-  hasLeftSidebar = !!leftPanelContent,
-  hasRightSidebar = !!rightPanelContent,
-  onChangeLayoutState,
-  leftSidebarInitialSize = 280,
-  rightSidebarInitialSize = 400,
-  leftSidebarMinSize,
-  rightSidebarMinSize,
-  leftSidebarCanResize = false,
-  rightSidebarCanResize = false,
+  left,
+  right,
   id,
   className,
-  style: style5
+  style: style5,
+  toolbar,
+  children: children2,
+  onChangeLayoutState,
+  leftOptions: {
+    initialSize: leftInitialSize = 280,
+    minSize: leftMinSize,
+    resizable: leftResizable = true,
+    style: leftStyle,
+    className: leftClassName
+  } = {},
+  rightOptions: {
+    initialSize: rightInitialSize = 280,
+    minSize: rightMinSize,
+    resizable: rightResizable = true,
+    style: rightStyle,
+    className: rightClassName
+  } = {}
 }, forwardedRef) {
   const windowSize = useWindowSize();
   function getPercentage(size3) {
     return typeof size3 === "string" ? parseFloat(size3) : size3 / windowSize.width * 100;
   }
-  const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
-  const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
-  const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
-  const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
+  const leftSidebarPercentage = getPercentage(leftInitialSize);
+  const rightSidebarPercentage = getPercentage(rightInitialSize);
+  const leftSidebarMinPercentage = leftMinSize !== void 0 ? getPercentage(leftMinSize) : void 0;
+  const rightSidebarMinPercentage = rightMinSize !== void 0 ? getPercentage(rightMinSize) : void 0;
   const panelGroupRef = useRef22(null);
   const leftSidebarRef = useRef22(null);
   const rightSidebarRef = useRef22(null);
@@ -15598,21 +15695,21 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
   );
   usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
   useImperativeHandle4(forwardedRef, () => ({
-    setLeftSidebarExpanded: (expanded) => {
+    setLeftExpanded: (expanded) => {
       if (expanded) {
         leftSidebarRef.current?.expand();
       } else {
         leftSidebarRef.current?.collapse();
       }
     },
-    setRightSidebarExpanded: (expanded) => {
+    setRightExpanded: (expanded) => {
       if (expanded) {
         rightSidebarRef.current?.expand();
       } else {
         rightSidebarRef.current?.collapse();
       }
     },
-    toggleAllSidebars: () => {
+    toggleSides: () => {
       const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
       const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
       if (isLeftSidebarExpanded || isRightSidebarExpanded) {
@@ -15623,7 +15720,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
         rightSidebarRef.current?.expand();
       }
     },
-    toggleLeftSidebar: () => {
+    toggleLeft: () => {
       const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
       if (isLeftSidebarExpanded) {
         leftSidebarRef.current?.collapse();
@@ -15631,7 +15728,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
         leftSidebarRef.current?.expand();
       }
     },
-    toggleRightSidebar: () => {
+    toggleRight: () => {
       const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
       if (isRightSidebarExpanded) {
         rightSidebarRef.current?.collapse();
@@ -15653,56 +15750,38 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
       }
     }
   });
-  const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
+  const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
   return /* @__PURE__ */ React75.createElement(
     "div",
     {
       id,
-      className,
-      style: {
-        backgroundColor: cssVars.colors.canvasBackground,
-        display: "flex",
-        flexDirection: "row",
-        ...style5
-      }
+      className: cx("flex flex-col bg-canvas-background", className),
+      style: style5
     },
-    /* @__PURE__ */ React75.createElement(
+    toolbar,
+    /* @__PURE__ */ React75.createElement("div", { className: "flex flex-row flex-1" }, /* @__PURE__ */ React75.createElement(
       PanelGroup,
       {
         ref: panelGroupRef,
         id: EDITOR_PANEL_GROUP_ID,
+        className: "flex-1",
         direction: "horizontal",
-        autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
-        style: { flex: "1" }
+        autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
       },
-      hasLeftSidebar && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
+      left && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
         Panel,
         {
           id: LEFT_SIDEBAR_ID,
+          className: "relative",
           order: 1,
           ref: leftSidebarRef,
           defaultSize: leftSidebarPercentage,
           minSize: leftSidebarMinPercentage ?? leftSidebarPercentage,
-          ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
-          collapsible: true,
-          style: {
-            display: "flex",
-            flexDirection: "row",
-            position: "relative"
-          }
+          ...!leftResizable && { maxSize: leftSidebarPercentage },
+          collapsible: true
         },
-        internalLayoutState?.leftSidebarCollapsed ? null : leftPanelContent
-      ), /* @__PURE__ */ React75.createElement(
-        PanelResizeHandle,
-        {
-          style: {
-            cursor: "col-resize",
-            width: "1px",
-            height: "100%",
-            backgroundColor: cssVars.colors.divider
-          }
-        }
-      )),
+        internalLayoutState?.leftSidebarCollapsed ? null : /* @__PURE__ */ React75.createElement(PanelInner, { style: leftStyle, className: leftClassName }, left)
+      ), /* @__PURE__ */ React75.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
       /* @__PURE__ */ React75.createElement(
         Panel,
         {
@@ -15710,49 +15789,45 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
           order: 2,
           defaultSize: centerPanelPercentage,
           minSize: 10,
-          style: {
-            display: "flex",
-            flexDirection: "row",
-            position: "relative"
-          }
+          className: "flex relative"
         },
-        centerPanelContent
+        children2
       ),
-      hasRightSidebar && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
-        PanelResizeHandle,
-        {
-          style: {
-            cursor: "col-resize",
-            width: "1px",
-            height: "100%",
-            backgroundColor: cssVars.colors.divider
-          }
-        }
-      ), /* @__PURE__ */ React75.createElement(
+      right && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React75.createElement(
         Panel,
         {
           id: RIGHT_SIDEBAR_ID,
+          className: "relative",
           order: 3,
           ref: rightSidebarRef,
           minSize: rightSidebarMinPercentage ?? rightSidebarPercentage,
           defaultSize: rightSidebarPercentage,
-          ...!rightSidebarCanResize && {
+          ...!rightResizable && {
             maxSize: rightSidebarPercentage
           },
-          collapsible: true,
-          style: {
-            display: "flex",
-            flexDirection: "row",
-            position: "relative"
-          }
+          collapsible: true
         },
-        internalLayoutState?.rightSidebarCollapsed ? null : rightPanelContent
+        internalLayoutState?.rightSidebarCollapsed ? null : /* @__PURE__ */ React75.createElement(PanelInner, { style: rightStyle, className: rightClassName }, right)
       ))
-    )
+    ))
   );
 });
-var WorkspaceLayout = forwardRef22(function WorkspaceLayout2(props, forwardedRef) {
-  return /* @__PURE__ */ React75.createElement(WorkspaceLayoutWithTheme, { ...props, ref: forwardedRef });
+var PanelInner = memo29(function PanelInner2({
+  children: children2,
+  style: style5,
+  className
+}) {
+  return /* @__PURE__ */ React75.createElement(
+    "div",
+    {
+      style: style5,
+      className: cx(
+        "absolute inset-0 flex flex-col bg-sidebar-background",
+        className
+      )
+    },
+    children2
+  );
 });
 
 // src/hooks/usePlatform.ts
@@ -15895,7 +15970,7 @@ __export(InspectorPrimitives_exports, {
 });
 import React77, {
   forwardRef as forwardRef23,
-  memo as memo30
+  memo as memo31
 } from "react";
 var Section2 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React77.createElement(
   "div",
@@ -15969,7 +16044,7 @@ var RowLabel = forwardRef23(function RowLabel2({
     }
   );
 });
-var LabeledRow = memo30(function LabeledRow2({
+var LabeledRow = memo31(function LabeledRow2({
   id,
   children: children2,
   label,
@@ -16073,14 +16148,15 @@ function ToolbarMenu({
         Button,
         {
           key: i,
+          disabled: item.disabled,
           onClick: () => {
             if (onSelectMenuItem && item.value) {
               onSelectMenuItem(item.value);
             }
           }
         },
-        item.icon && /* @__PURE__ */ React79.createElement(React79.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { inline: true, size: 6 })),
-        item.title
+        item.title,
+        item.icon && /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { inline: true, size: 6 }), renderIcon(item.icon))
       );
     }
     return /* @__PURE__ */ React79.createElement(
@@ -16094,14 +16170,13 @@ function ToolbarMenu({
           }
         }
       },
-      /* @__PURE__ */ React79.createElement(Button, null, item.icon && /* @__PURE__ */ React79.createElement(React79.Fragment, null, renderIcon(item.icon), /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { size: 6 })), item.title, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React79.createElement(DropdownChevronIcon4, null))
+      /* @__PURE__ */ React79.createElement(Button, { disabled: item.disabled }, item.title, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React79.createElement(DropdownChevronIcon4, null))
     );
   }));
 }
 export {
   ActivityIndicator,
   AnimatePresence,
-  AutoResizingTextArea,
   Avatar,
   AvatarStack,
   BaseToolbar,
@@ -16165,6 +16240,8 @@ export {
   Spacer,
   Switch,
   Text,
+  TextArea,
+  TextAreaRow,
   Toast,
   ToastProvider,
   Toolbar,