@oneplatformdev/ui 0.0.1-beta.45 → 0.0.1-beta.47

package/Button/buttonVariants.mjs

@@ -13,8 +13,8 @@ const r = e(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
+        sm: "h-8 rounded-md px-3 text-xs size-4",
+        lg: "h-10 rounded-md px-8 size-5 px-3 py-2",
         icon: "h-9 w-9"
       }
     },

package/Command/Command.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from '@radix-ui/react-dialog';
-import * as React from "react";
+import * as React from 'react';
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {

package/Command/Command.mjs

@@ -3,7 +3,8 @@ import * as m from "react";
 import { Command as o } from "cmdk";
 import { Search as p } from "lucide-react";
 import { cn as r } from "@oneplatformdev/utils";
-import { Dialog as i, DialogContent as c } from "../Dialog/Dialog.mjs";
+import { DialogRoot as i, DialogContent as c } from "../Dialog/DialogRoot.mjs";
+import "../Dialog/Dialog.mjs";
 const n = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   o,
   {
@@ -16,7 +17,7 @@ const n = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   }
 ));
 n.displayName = o.displayName;
-const C = ({ children: e, ...a }) => /* @__PURE__ */ t(i, { ...a, children: /* @__PURE__ */ t(c, { className: "overflow-hidden p-0", children: /* @__PURE__ */ t(n, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: e }) }) }), l = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ s("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+const b = ({ children: e, ...a }) => /* @__PURE__ */ t(i, { ...a, children: /* @__PURE__ */ t(c, { className: "overflow-hidden p-0", children: /* @__PURE__ */ t(n, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: e }) }) }), l = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ s("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ t(p, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ t(
     o.Input,
@@ -98,7 +99,7 @@ const y = ({
 y.displayName = "CommandShortcut";
 export {
   n as Command,
-  C as CommandDialog,
+  b as CommandDialog,
   f as CommandEmpty,
   g as CommandGroup,
   l as CommandInput,

package/Dialog/Dialog.d.ts

@@ -1,19 +1,3 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
-declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
-declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+import { IDialogProps } from './Dialog.types';
+
+export declare const Dialog: import('react').ForwardRefExoticComponent<IDialogProps & import('react').RefAttributes<never>>;

package/Dialog/Dialog.mjs

@@ -1,100 +1,19 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import * as l from "react";
-import * as e from "@radix-ui/react-dialog";
-import { X as c } from "lucide-react";
-import { cn as i } from "@oneplatformdev/utils";
-const b = e.Root, h = e.Trigger, m = e.Portal, v = e.Close, d = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
-  e.Overlay,
-  {
-    ref: s,
-    className: i(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      a
-    ),
-    ...t
-  }
-));
-d.displayName = e.Overlay.displayName;
-const f = l.forwardRef(({ className: a, children: t, ...s }, r) => /* @__PURE__ */ n(m, { children: [
-  /* @__PURE__ */ o(d, {}),
-  /* @__PURE__ */ n(
-    e.Content,
-    {
-      ref: r,
-      className: i(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        a
-      ),
-      ...s,
-      children: [
-        t,
-        /* @__PURE__ */ n(e.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ o(c, { className: "h-4 w-4" }),
-          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-f.displayName = e.Content.displayName;
-const p = ({
-  className: a,
-  ...t
-}) => /* @__PURE__ */ o(
-  "div",
-  {
-    className: i(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      a
-    ),
-    ...t
-  }
-);
-p.displayName = "DialogHeader";
-const g = ({
-  className: a,
-  ...t
-}) => /* @__PURE__ */ o(
-  "div",
-  {
-    className: i(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      a
-    ),
-    ...t
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { DialogRoot as l, DialogContent as n, DialogHeader as a, DialogTitle as s, DialogDescription as c, DialogFooter as m } from "./DialogRoot.mjs";
+const h = t(
+  (e, d) => {
+    const { ...i } = e;
+    return /* @__PURE__ */ o(l, { ...i, children: /* @__PURE__ */ r(n, { className: "sm:max-w-[600px]", children: [
+      /* @__PURE__ */ r(a, { children: [
+        /* @__PURE__ */ o(s, { children: "title" }),
+        /* @__PURE__ */ o(c, { children: "subtitle" })
+      ] }),
+      "Content",
+      /* @__PURE__ */ o(m, { children: "footer" })
+    ] }) });
   }
 );
-g.displayName = "DialogFooter";
-const u = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
-  e.Title,
-  {
-    ref: s,
-    className: i(
-      "text-lg font-semibold leading-none tracking-tight",
-      a
-    ),
-    ...t
-  }
-));
-u.displayName = e.Title.displayName;
-const y = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
-  e.Description,
-  {
-    ref: s,
-    className: i("text-sm text-muted-foreground", a),
-    ...t
-  }
-));
-y.displayName = e.Description.displayName;
 export {
-  b as Dialog,
-  v as DialogClose,
-  f as DialogContent,
-  y as DialogDescription,
-  g as DialogFooter,
-  p as DialogHeader,
-  d as DialogOverlay,
-  m as DialogPortal,
-  u as DialogTitle,
-  h as DialogTrigger
+  h as Dialog
 };

package/Dialog/Dialog.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { DialogRoot } from './DialogRoot';
+
+export interface IDialogProps extends ComponentPropsWithoutRef<typeof DialogRoot> {
+    children: ReactNode;
+}

package/Dialog/DialogRoot.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const DialogRoot: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { DialogRoot, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/Dialog/DialogRoot.mjs

@@ -0,0 +1,100 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import * as l from "react";
+import * as e from "@radix-ui/react-dialog";
+import { X as c } from "lucide-react";
+import { cn as i } from "@oneplatformdev/utils";
+const b = e.Root, h = e.Trigger, m = e.Portal, v = e.Close, d = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+  e.Overlay,
+  {
+    ref: s,
+    className: i(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      a
+    ),
+    ...t
+  }
+));
+d.displayName = e.Overlay.displayName;
+const f = l.forwardRef(({ className: a, children: t, ...s }, r) => /* @__PURE__ */ n(m, { children: [
+  /* @__PURE__ */ o(d, {}),
+  /* @__PURE__ */ n(
+    e.Content,
+    {
+      ref: r,
+      className: i(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        a
+      ),
+      ...s,
+      children: [
+        t,
+        /* @__PURE__ */ n(e.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ o(c, { className: "h-4 w-4" }),
+          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+f.displayName = e.Content.displayName;
+const p = ({
+  className: a,
+  ...t
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: i(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      a
+    ),
+    ...t
+  }
+);
+p.displayName = "DialogHeader";
+const g = ({
+  className: a,
+  ...t
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: i(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      a
+    ),
+    ...t
+  }
+);
+g.displayName = "DialogFooter";
+const u = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+  e.Title,
+  {
+    ref: s,
+    className: i(
+      "text-lg font-semibold leading-none tracking-tight",
+      a
+    ),
+    ...t
+  }
+));
+u.displayName = e.Title.displayName;
+const y = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+  e.Description,
+  {
+    ref: s,
+    className: i("text-sm text-muted-foreground", a),
+    ...t
+  }
+));
+y.displayName = e.Description.displayName;
+export {
+  v as DialogClose,
+  f as DialogContent,
+  y as DialogDescription,
+  g as DialogFooter,
+  p as DialogHeader,
+  d as DialogOverlay,
+  m as DialogPortal,
+  b as DialogRoot,
+  u as DialogTitle,
+  h as DialogTrigger
+};

package/Dialog/index.d.ts

@@ -1 +1,2 @@
+export * from './DialogRoot';
 export * from './Dialog';

package/Dialog/index.mjs

@@ -1,13 +1,15 @@
-import { Dialog as l, DialogClose as a, DialogContent as g, DialogDescription as D, DialogFooter as e, DialogHeader as r, DialogOverlay as t, DialogPortal as n, DialogTitle as p, DialogTrigger as s } from "./Dialog.mjs";
+import { DialogClose as l, DialogContent as a, DialogDescription as g, DialogFooter as D, DialogHeader as e, DialogOverlay as r, DialogPortal as t, DialogRoot as n, DialogTitle as p, DialogTrigger as f } from "./DialogRoot.mjs";
+import { Dialog as s } from "./Dialog.mjs";
 export {
-  l as Dialog,
-  a as DialogClose,
-  g as DialogContent,
-  D as DialogDescription,
-  e as DialogFooter,
-  r as DialogHeader,
-  t as DialogOverlay,
-  n as DialogPortal,
+  s as Dialog,
+  l as DialogClose,
+  a as DialogContent,
+  g as DialogDescription,
+  D as DialogFooter,
+  e as DialogHeader,
+  r as DialogOverlay,
+  t as DialogPortal,
+  n as DialogRoot,
   p as DialogTitle,
-  s as DialogTrigger
+  f as DialogTrigger
 };

package/Select/Select.mjs

@@ -1,65 +1,67 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { Button as f } from "../Button/Button.mjs";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { createElement as f } from "react";
+import { Button as g } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
-import { SelectRoot as g, SelectContent as p, SelectTrigger as h, SelectValue as v, SelectItem as u } from "./SelectRoot.mjs";
-import { isValidReactElement as c } from "@oneplatformdev/utils";
-const S = (o) => {
-  const { placeholder: l, renderTrigger: e, slotProps: t } = o, n = /* @__PURE__ */ a(h, { ...(t == null ? void 0 : t.triggerProps) || {}, children: /* @__PURE__ */ a(v, { placeholder: l }) });
-  return e && typeof e == "function" && c(e(o, n)) ? e(o, n) : n;
-}, C = (o) => {
-  const { renderOption: l, option: e, index: t, options: n, ...i } = o, r = /* @__PURE__ */ a(u, { value: e.value, children: e.label }, e.value);
-  return l && typeof l == "function" && c(l(
+import { SelectRoot as p, SelectContent as h, SelectTrigger as v, SelectValue as S, SelectItem as u } from "./SelectRoot.mjs";
+import { isValidReactElement as i } from "@oneplatformdev/utils";
+const C = (r) => {
+  const { placeholder: l, renderTrigger: e, slotProps: n } = r, t = /* @__PURE__ */ c(v, { ...(n == null ? void 0 : n.triggerProps) || {}, children: /* @__PURE__ */ c(S, { placeholder: l }) });
+  return e && typeof e == "function" && i(e(r, t)) ? e(r, t) : t;
+}, x = (r) => {
+  const { renderOption: l, option: e, index: n, options: t, ...a } = r, o = /* @__PURE__ */ c(u, { value: e.value, children: e.label }, e.value);
+  return l && typeof l == "function" && i(l(
     e,
-    t,
     n,
-    { ...i, options: n },
-    r
-  )) ? c(l(
-    e,
     t,
-    n,
-    { ...i, options: n },
-    r
-  ), u) ? c(l(
+    { ...a, options: t },
+    o
+  )) ? i(l(
     e,
-    t,
     n,
-    { ...i, options: n },
-    r
-  )) : /* @__PURE__ */ a(u, { value: e.value, children: l(
+    t,
+    { ...a, options: t },
+    o
+  ), u) ? i(l(
     e,
+    n,
     t,
+    { ...a, options: t },
+    o
+  )) : /* @__PURE__ */ c(u, { value: e.value, children: l(
+    e,
     n,
-    { ...i, options: n },
-    r
-  ) }, e.value) : r;
-}, T = (o) => {
+    t,
+    { ...a, options: t },
+    o
+  ) }, e.value) : o;
+}, j = (r) => {
   const {
     value: l,
     options: e,
-    onChange: t,
-    nullable: n = !1,
-    clearLabel: i = "Clear",
-    disabled: r
-  } = o;
+    onChange: n,
+    nullable: t = !1,
+    clearLabel: a = "Clear",
+    disabled: o
+  } = r;
   return /* @__PURE__ */ d(
-    g,
+    p,
     {
       value: l,
-      onValueChange: t,
-      disabled: r,
+      onValueChange: n,
+      disabled: o,
       children: [
-        /* @__PURE__ */ a(S, { ...o }),
-        /* @__PURE__ */ d(p, { children: [
-          n && /* @__PURE__ */ a(f, { className: "w-full px-2", variant: "secondary", size: "sm", onClick: () => {
-            t("");
-          }, children: i }),
-          e.map((s, m) => /* @__PURE__ */ a(
-            C,
+        /* @__PURE__ */ c(C, { ...r }),
+        /* @__PURE__ */ d(h, { children: [
+          t && /* @__PURE__ */ c(g, { className: "w-full px-2", variant: "secondary", size: "sm", onClick: () => {
+            n("");
+          }, children: a }),
+          e.map((m, s) => /* @__PURE__ */ f(
+            x,
             {
-              ...o,
-              option: s,
-              index: m
+              ...r,
+              key: m.value,
+              option: m,
+              index: s
             }
           ))
         ] })
@@ -68,5 +70,5 @@ const S = (o) => {
   );
 };
 export {
-  T as Select
+  j as Select
 };

package/Textarea/Textarea.mjs

@@ -1,4 +1,4 @@
-import { jsxs as u, Fragment as p, jsx as h } from "react/jsx-runtime";
+import { jsxs as u, Fragment as h, jsx as p } from "react/jsx-runtime";
 import * as v from "react";
 import { useId as w, useRef as z, useState as A, useImperativeHandle as N, useEffect as y } from "react";
 import { cn as d } from "@oneplatformdev/utils";
@@ -31,8 +31,8 @@ const T = v.forwardRef(
       minHeight: o
     })), y(() => {
       b(r);
-    }, [e == null ? void 0 : e.defaultValue, r]), /* @__PURE__ */ u(p, { children: [
-      /* @__PURE__ */ h(
+    }, [e == null ? void 0 : e.defaultValue, r]), /* @__PURE__ */ u(h, { children: [
+      /* @__PURE__ */ p(
         "textarea",
         {
           id: n || a,
@@ -43,7 +43,7 @@ const T = v.forwardRef(
             "flex min-h-10 w-full px-3 py-2 text-base relative",
             "rounded-md border border-input bg-transparent shadow-sm",
             "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            g ? "resize" : "resize-none",
+            g ? "resize" : "resize-none !overflow-hidden",
             s && "pb-2",
             f
           )