@undefine-ui/design-system 3.4.2 → 3.5.0

package/dist/index.cjs

@@ -5915,7 +5915,7 @@ var MuiTextField = {
         maxWidth: "100%",
         lineHeight: 1.153,
         position: "relative",
-        fontSize: theme.typography.h8.fontSize,
+        fontSize: `${theme.typography.h8.fontSize} !important`,
         fontWeight: `${theme.typography.fontWeightMedium} !important`,
         marginBottom: theme.spacing(1),
         color: `${theme.vars.palette.icon.black} !important`,
@@ -9341,105 +9341,100 @@ var baseStyles3 = {
   borderColor: "border.mute",
   borderBottomWidth: "1.5px"
 };
-var ToolbarSearchField = ({
-  placeholder = "Search",
-  className,
-  sx,
-  value,
-  onFocus,
-  onBlur,
-  onClear,
-  ...props
-}) => {
-  const [isFocused, setIsFocused] = (0, import_react18.useState)(false);
-  const hasValue = Boolean(value && String(value).length > 0);
-  const handleFocus = (0, import_react18.useCallback)(
-    (event) => {
-      setIsFocused(true);
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
-  const handleBlur = (0, import_react18.useCallback)(
-    (event) => {
-      setIsFocused(false);
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
-  const handleClear = (0, import_react18.useCallback)(() => {
-    onClear?.();
-  }, [onClear]);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
-    import_Box17.default,
-    {
-      className: toolbarClasses.searchField.concat(
-        isFocused ? ` ${toolbarClasses.searchFieldFocused}` : "",
-        className ? ` ${className}` : ""
-      ),
-      sx: {
-        ...baseStyles3,
-        borderRadius: (theme) => theme.radius["radius-md"],
-        ...isFocused && {
-          boxShadow: (theme) => `0px 0px 0px 1.6px white, 0px 0px 0px 3.2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
-        },
-        ...sx
+var ToolbarSearchField = (0, import_react18.forwardRef)(
+  ({ placeholder = "Search", className, sx, value, onFocus, onBlur, onClear, inputRef, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, import_react18.useState)(false);
+    const hasValue = Boolean(value && String(value).length > 0);
+    const handleFocus = (0, import_react18.useCallback)(
+      (event) => {
+        setIsFocused(true);
+        onFocus?.(event);
       },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-          Icon,
-          {
-            icon: "Search",
-            className: toolbarClasses.searchIcon,
-            sx: { width: 16, height: 16, color: "icon.black", flexShrink: 0 }
-          }
+      [onFocus]
+    );
+    const handleBlur = (0, import_react18.useCallback)(
+      (event) => {
+        setIsFocused(false);
+        onBlur?.(event);
+      },
+      [onBlur]
+    );
+    const handleClear = (0, import_react18.useCallback)(() => {
+      onClear?.();
+    }, [onClear]);
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+      import_Box17.default,
+      {
+        ref,
+        className: toolbarClasses.searchField.concat(
+          isFocused ? ` ${toolbarClasses.searchFieldFocused}` : "",
+          className ? ` ${className}` : ""
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-          import_InputBase3.default,
-          {
-            placeholder,
-            className: toolbarClasses.searchInput,
-            value,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            sx: {
-              flex: 1,
-              minWidth: 0,
-              height: 22,
-              "& .MuiInputBase-input": {
-                p: 0,
-                fontSize: 14,
-                lineHeight: "22px",
-                color: "text.header",
-                "&::placeholder": {
-                  color: "text.body",
-                  opacity: 1
+        sx: {
+          ...baseStyles3,
+          borderRadius: (theme) => theme.radius["radius-md"],
+          ...isFocused && {
+            boxShadow: (theme) => `0px 0px 0px 1.6px white, 0px 0px 0px 3.2px ${varAlpha(theme.vars.palette.primary["300Channel"], 1)}`
+          },
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            Icon,
+            {
+              icon: "Search",
+              className: toolbarClasses.searchIcon,
+              sx: { width: 16, height: 16, color: "icon.black", flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            import_InputBase3.default,
+            {
+              inputRef,
+              placeholder,
+              className: toolbarClasses.searchInput,
+              value,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: {
+                flex: 1,
+                minWidth: 0,
+                height: 22,
+                "& .MuiInputBase-input": {
+                  p: 0,
+                  fontSize: 14,
+                  lineHeight: "22px",
+                  color: "text.header",
+                  "&::placeholder": {
+                    color: "text.body",
+                    opacity: 1
+                  }
                 }
-              }
-            },
-            ...props
-          }
-        ),
-        hasValue && onClear && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-          import_ButtonBase3.default,
-          {
-            onClick: handleClear,
-            className: toolbarClasses.searchClearButton,
-            sx: {
-              p: 0.25,
-              borderRadius: "50%",
-              flexShrink: 0,
-              "&:hover": {
-                bgcolor: "grey.100"
-              }
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon, { icon: "XMark", sx: { width: 14, height: 14, color: "icon.mute" } })
-          }
-        )
-      ]
-    }
-  );
-};
+              },
+              ...props
+            }
+          ),
+          hasValue && onClear && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            import_ButtonBase3.default,
+            {
+              onClick: handleClear,
+              className: toolbarClasses.searchClearButton,
+              sx: {
+                p: 0.25,
+                borderRadius: "50%",
+                flexShrink: 0,
+                "&:hover": {
+                  bgcolor: "grey.100"
+                }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon, { icon: "XMark", sx: { width: 14, height: 14, color: "icon.mute" } })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 
 // src/components/Toolbar/ToolbarViewSwitcher.tsx
 var import_Box18 = __toESM(require("@mui/material/Box"), 1);