@refinn/core-ui 0.1.17 → 0.1.19

package/dist/index.cjs

@@ -376,15 +376,15 @@ var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var sizeClasses2 = {
   xs: "h-24 w-24",
-  s: "h-32 w-32",
-  m: "h-40 w-40",
-  l: "h-48 w-48"
+  sm: "h-32 w-32",
+  md: "h-40 w-40",
+  lg: "h-48 w-48"
 };
 var iconSizeClasses = {
   xs: "h-16 w-16",
-  s: "h-20 w-20",
-  m: "h-24 w-24",
-  l: "h-24 w-24"
+  sm: "h-20 w-20",
+  md: "h-24 w-24",
+  lg: "h-24 w-24"
 };
 var surfaceBackgroundClasses = {
   default: {
@@ -424,7 +424,7 @@ var IconButton = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       icon,
-      size = "s",
+      size = "sm",
       surface = "default",
       transparent = false,
       danger = false,
@@ -581,7 +581,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
         onClose && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           IconButton,
           {
-            size: "s",
+            size: "sm",
             surface: closeButtonSurface,
             transparent: true,
             onClick: onClose,
@@ -911,21 +911,21 @@ function IndeterminateIcon({ className }) {
   );
 }
 var boxSizeClasses = {
-  s: "h-20 w-20",
-  m: "h-24 w-24"
+  sm: "h-20 w-20",
+  md: "h-24 w-24"
 };
 var labelTextClasses = {
-  s: "text-label-medium",
-  m: "text-label-large"
+  sm: "text-label-medium",
+  md: "text-label-large"
 };
 var descriptionPaddingClasses = {
-  s: "pl-24",
-  m: "pl-28"
+  sm: "pl-24",
+  md: "pl-28"
 };
 var Checkbox = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      size = "s",
+      size = "sm",
       label,
       description,
       error = false,
@@ -1206,7 +1206,7 @@ var TextField = (0, import_react11.forwardRef)(
     ]);
     const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
     const isActive = isFocused && !!value;
-    const iconButtonSize = size === "lg" ? "m" : "s";
+    const iconButtonSize = size === "lg" ? "md" : "sm";
     const inputRef = (0, import_react11.useRef)(null);
     (0, import_react11.useImperativeHandle)(ref, () => inputRef.current);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
@@ -1485,19 +1485,23 @@ function useMountTransition(open, duration = 300) {
   (0, import_react13.useEffect)(() => {
     if (open) {
       setMounted(true);
-      let raf2 = 0;
-      const raf1 = requestAnimationFrame(() => {
-        raf2 = requestAnimationFrame(() => setAnimate(true));
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
+      return;
     }
     setAnimate(false);
     const timer = setTimeout(() => setMounted(false), duration);
     return () => clearTimeout(timer);
   }, [open, duration]);
+  (0, import_react13.useEffect)(() => {
+    if (!open || !mounted) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [open, mounted]);
   return { mounted, animate };
 }
 function DialogAction({
@@ -1603,7 +1607,7 @@ var Dialog = (0, import_react13.forwardRef)(
                     IconButton,
                     {
                       icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-24 w-24" }),
-                      size: "m",
+                      size: "md",
                       surface: "dark",
                       "aria-label": "\u0E1B\u0E34\u0E14",
                       onClick: handleClose
@@ -1624,7 +1628,7 @@ var Dialog = (0, import_react13.forwardRef)(
                       IconButton,
                       {
                         icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-20 w-20" }),
-                        size: "s",
+                        size: "sm",
                         "aria-label": "\u0E1B\u0E34\u0E14",
                         onClick: handleClose,
                         className: "lg:hidden!"
@@ -1634,7 +1638,7 @@ var Dialog = (0, import_react13.forwardRef)(
                       IconButton,
                       {
                         icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-24 w-24" }),
-                        size: "m",
+                        size: "md",
                         "aria-label": "\u0E1B\u0E34\u0E14",
                         onClick: handleClose,
                         className: "hidden! lg:inline-flex!"
@@ -1679,19 +1683,23 @@ function useMountTransition2(open, duration = 300) {
   (0, import_react14.useEffect)(() => {
     if (open) {
       setMounted(true);
-      let raf2 = 0;
-      const raf1 = requestAnimationFrame(() => {
-        raf2 = requestAnimationFrame(() => setAnimate(true));
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
+      return;
     }
     setAnimate(false);
     const timer = setTimeout(() => setMounted(false), duration);
     return () => clearTimeout(timer);
   }, [open, duration]);
+  (0, import_react14.useEffect)(() => {
+    if (!open || !mounted) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [open, mounted]);
   return { mounted, animate };
 }
 function DrawerAction({
@@ -1728,6 +1736,7 @@ var Drawer = (0, import_react14.forwardRef)(
       dismiss,
       secondary,
       confirm,
+      noPadding = false,
       className = ""
     } = _b, rest = __objRest(_b, [
       "open",
@@ -1743,6 +1752,7 @@ var Drawer = (0, import_react14.forwardRef)(
       "dismiss",
       "secondary",
       "confirm",
+      "noPadding",
       "className"
     ]);
     const { mounted, animate } = useMountTransition2(open);
@@ -1794,12 +1804,12 @@ var Drawer = (0, import_react14.forwardRef)(
               onMouseDown: (e) => e.stopPropagation()
             }, rest), {
               children: [
-                showHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                showHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col w-full items-center border-b border-border-subtle bg-dialog-background-primary", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                   "div",
                   {
                     className: [
-                      "flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16",
-                      fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-16 lg:pt-20"
+                      "flex shrink-0 items-center gap-8 px-16 pb-12 pt-16 w-full",
+                      fullScreen ? "lg:gap-16 lg:px-0 lg:py-24 lg:max-w-1216" : "lg:px-24 lg:pb-16 lg:pt-20"
                     ].join(" "),
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
@@ -1811,7 +1821,7 @@ var Drawer = (0, import_react14.forwardRef)(
                           IconButton,
                           {
                             icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon3, { className: "h-20 w-20" }),
-                            size: "s",
+                            size: "sm",
                             "aria-label": "\u0E1B\u0E34\u0E14",
                             onClick: handleClose,
                             className: "lg:hidden!"
@@ -1821,7 +1831,7 @@ var Drawer = (0, import_react14.forwardRef)(
                           IconButton,
                           {
                             icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon3, { className: "h-24 w-24" }),
-                            size: fullScreen ? "l" : "m",
+                            size: fullScreen ? "lg" : "md",
                             "aria-label": "\u0E1B\u0E34\u0E14",
                             onClick: handleClose,
                             className: "hidden! lg:inline-flex!"
@@ -1830,24 +1840,24 @@ var Drawer = (0, import_react14.forwardRef)(
                       ] })
                     ]
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "div",
                   {
                     className: [
-                      "flex-1 overflow-y-auto p-16 text-body-regular text-dialog-text-primary",
-                      background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary",
-                      fullScreen ? "lg:px-112 lg:py-24" : "lg:p-24"
+                      "flex-1 overflow-y-auto text-body-regular text-dialog-text-primary",
+                      !noPadding && "p-16",
+                      background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary"
                     ].join(" "),
                     children
                   }
                 ),
-                showFooter && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                showFooter && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `flex shrink-0 w-full flex-col items-center border-t border-border-subtle bg-dialog-background-primary`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "div",
                   {
                     className: [
-                      "flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
-                      fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
+                      "flex shrink-0 flex-col gap-8 px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
+                      fullScreen ? "lg:gap-16 lg:px-0 lg:max-w-1216 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
                     ].join(" "),
                     children: allActions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
@@ -1861,7 +1871,7 @@ var Drawer = (0, import_react14.forwardRef)(
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
                     ] })
                   }
-                )
+                ) })
               ]
             })
           )
@@ -1969,7 +1979,7 @@ var Dropdown = (0, import_react15.forwardRef)(
       "className"
     ]);
     const isCombobox = variant === "combobox";
-    const iconButtonSize = size === "lg" ? "m" : "s";
+    const iconButtonSize = size === "lg" ? "md" : "sm";
     const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
     const [isFocused, setIsFocused] = (0, import_react15.useState)(false);
     const [query, setQuery] = (0, import_react15.useState)(value.label || "");
@@ -2386,17 +2396,11 @@ var linkVariantClasses = {
   lg: "text-link-large gap-4"
 };
 var iconVariantClasses = {
-  xs: "w-20 h-20",
-  sm: "w-20 h-20",
-  md: "w-20 h-20",
-  lg: "w-24 h-24"
+  xs: "w-20 h-20 text-[20px]",
+  sm: "w-20 h-20 text-[20px]",
+  md: "w-20 h-20 text-[20px]",
+  lg: "w-24 h-24 text-[24px]"
 };
-function SuccessIcon3({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] });
-}
 var Link = (0, import_react18.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -2405,7 +2409,7 @@ var Link = (0, import_react18.forwardRef)(
       linkStyle = "brand",
       text,
       href,
-      icon = true,
+      icon,
       className = "",
       children
     } = _b, rest = __objRest(_b, [
@@ -2418,6 +2422,7 @@ var Link = (0, import_react18.forwardRef)(
       "className",
       "children"
     ]);
+    var _a2;
     const styleClass = linkStyleClasses[linkStyle];
     const variantClass = linkVariantClasses[variant];
     const iconClass = iconVariantClasses[variant];
@@ -2428,9 +2433,11 @@ var Link = (0, import_react18.forwardRef)(
       variantClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
-      icon && !isInline ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SuccessIcon3, { className: iconClass }) : null
+      icon && (0, import_react18.cloneElement)(icon, {
+        className: `${(_a2 = icon.props.className) != null ? _a2 : ""} ${iconClass}`
+      })
     ] }));
   }
 );
@@ -2963,7 +2970,7 @@ var TextArea = (0, import_react23.forwardRef)(
             pending ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loading, { size: "sm", className: "shrink-0 absolute right-12 top-12" }) : clearable && isFocused && value ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               IconButton,
               {
-                size: "s",
+                size: "sm",
                 transparent: true,
                 "aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
                 className: "absolute right-6 top-6",

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
 
 interface AccordionItemData {
     id?: string;
@@ -80,7 +80,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-type CheckboxSize = "s" | "m";
+type CheckboxSize = "sm" | "md";
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     size?: CheckboxSize;
     label?: ReactNode;
@@ -182,6 +182,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     dismiss?: DrawerActionProps;
     secondary?: DrawerActionProps;
     confirm?: DrawerActionProps;
+    noPadding?: boolean;
 }
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -233,7 +234,7 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
 }
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
-type IconButtonSize = 'xs' | 's' | 'm' | 'l';
+type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 type IconButtonSurface = 'default' | 'dark' | 'light';
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     icon: ReactNode;
@@ -249,15 +250,17 @@ declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & reac
 
 type LinkVariant = 'xs' | 'sm' | 'md' | 'lg';
 type LinkStyle = 'brand' | 'white' | 'black' | 'brandLooped' | 'whiteLooped' | 'blackLooped';
-interface LinkProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+interface LinkProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'title'> {
     variant?: LinkVariant;
     isInline?: boolean;
     linkStyle?: LinkStyle;
     text?: ReactNode;
     href?: string;
-    icon?: boolean;
+    icon?: ReactElement<{
+        className?: string;
+    }>;
 }
-declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLDivElement>>;
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLSpanElement>>;
 
 type LoadingSize = "sm" | "lg";
 interface LoadingProps extends HTMLAttributes<HTMLDivElement> {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
 
 interface AccordionItemData {
     id?: string;
@@ -80,7 +80,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-type CheckboxSize = "s" | "m";
+type CheckboxSize = "sm" | "md";
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     size?: CheckboxSize;
     label?: ReactNode;
@@ -182,6 +182,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     dismiss?: DrawerActionProps;
     secondary?: DrawerActionProps;
     confirm?: DrawerActionProps;
+    noPadding?: boolean;
 }
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -233,7 +234,7 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
 }
 declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
 
-type IconButtonSize = 'xs' | 's' | 'm' | 'l';
+type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 type IconButtonSurface = 'default' | 'dark' | 'light';
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     icon: ReactNode;
@@ -249,15 +250,17 @@ declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & reac
 
 type LinkVariant = 'xs' | 'sm' | 'md' | 'lg';
 type LinkStyle = 'brand' | 'white' | 'black' | 'brandLooped' | 'whiteLooped' | 'blackLooped';
-interface LinkProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+interface LinkProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'title'> {
     variant?: LinkVariant;
     isInline?: boolean;
     linkStyle?: LinkStyle;
     text?: ReactNode;
     href?: string;
-    icon?: boolean;
+    icon?: ReactElement<{
+        className?: string;
+    }>;
 }
-declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLDivElement>>;
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLSpanElement>>;
 
 type LoadingSize = "sm" | "lg";
 interface LoadingProps extends HTMLAttributes<HTMLDivElement> {

package/dist/index.js

@@ -333,15 +333,15 @@ import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var sizeClasses2 = {
   xs: "h-24 w-24",
-  s: "h-32 w-32",
-  m: "h-40 w-40",
-  l: "h-48 w-48"
+  sm: "h-32 w-32",
+  md: "h-40 w-40",
+  lg: "h-48 w-48"
 };
 var iconSizeClasses = {
   xs: "h-16 w-16",
-  s: "h-20 w-20",
-  m: "h-24 w-24",
-  l: "h-24 w-24"
+  sm: "h-20 w-20",
+  md: "h-24 w-24",
+  lg: "h-24 w-24"
 };
 var surfaceBackgroundClasses = {
   default: {
@@ -381,7 +381,7 @@ var IconButton = forwardRef4(
   (_a, ref) => {
     var _b = _a, {
       icon,
-      size = "s",
+      size = "sm",
       surface = "default",
       transparent = false,
       danger = false,
@@ -538,7 +538,7 @@ var AlertBanner = forwardRef5(
         onClose && /* @__PURE__ */ jsx5(
           IconButton,
           {
-            size: "s",
+            size: "sm",
             surface: closeButtonSurface,
             transparent: true,
             onClick: onClose,
@@ -874,21 +874,21 @@ function IndeterminateIcon({ className }) {
   );
 }
 var boxSizeClasses = {
-  s: "h-20 w-20",
-  m: "h-24 w-24"
+  sm: "h-20 w-20",
+  md: "h-24 w-24"
 };
 var labelTextClasses = {
-  s: "text-label-medium",
-  m: "text-label-large"
+  sm: "text-label-medium",
+  md: "text-label-large"
 };
 var descriptionPaddingClasses = {
-  s: "pl-24",
-  m: "pl-28"
+  sm: "pl-24",
+  md: "pl-28"
 };
 var Checkbox = forwardRef9(
   (_a, ref) => {
     var _b = _a, {
-      size = "s",
+      size = "sm",
       label,
       description,
       error = false,
@@ -1184,7 +1184,7 @@ var TextField = forwardRef11(
     ]);
     const [isFocused, setIsFocused] = useState4(false);
     const isActive = isFocused && !!value;
-    const iconButtonSize = size === "lg" ? "m" : "s";
+    const iconButtonSize = size === "lg" ? "md" : "sm";
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
     return /* @__PURE__ */ jsxs10("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
@@ -1467,19 +1467,23 @@ function useMountTransition(open, duration = 300) {
   useEffect2(() => {
     if (open) {
       setMounted(true);
-      let raf2 = 0;
-      const raf1 = requestAnimationFrame(() => {
-        raf2 = requestAnimationFrame(() => setAnimate(true));
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
+      return;
     }
     setAnimate(false);
     const timer = setTimeout(() => setMounted(false), duration);
     return () => clearTimeout(timer);
   }, [open, duration]);
+  useEffect2(() => {
+    if (!open || !mounted) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [open, mounted]);
   return { mounted, animate };
 }
 function DialogAction({
@@ -1585,7 +1589,7 @@ var Dialog = forwardRef13(
                     IconButton,
                     {
                       icon: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-24 w-24" }),
-                      size: "m",
+                      size: "md",
                       surface: "dark",
                       "aria-label": "\u0E1B\u0E34\u0E14",
                       onClick: handleClose
@@ -1606,7 +1610,7 @@ var Dialog = forwardRef13(
                       IconButton,
                       {
                         icon: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-20 w-20" }),
-                        size: "s",
+                        size: "sm",
                         "aria-label": "\u0E1B\u0E34\u0E14",
                         onClick: handleClose,
                         className: "lg:hidden!"
@@ -1616,7 +1620,7 @@ var Dialog = forwardRef13(
                       IconButton,
                       {
                         icon: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-24 w-24" }),
-                        size: "m",
+                        size: "md",
                         "aria-label": "\u0E1B\u0E34\u0E14",
                         onClick: handleClose,
                         className: "hidden! lg:inline-flex!"
@@ -1665,19 +1669,23 @@ function useMountTransition2(open, duration = 300) {
   useEffect3(() => {
     if (open) {
       setMounted(true);
-      let raf2 = 0;
-      const raf1 = requestAnimationFrame(() => {
-        raf2 = requestAnimationFrame(() => setAnimate(true));
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
+      return;
     }
     setAnimate(false);
     const timer = setTimeout(() => setMounted(false), duration);
     return () => clearTimeout(timer);
   }, [open, duration]);
+  useEffect3(() => {
+    if (!open || !mounted) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setAnimate(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [open, mounted]);
   return { mounted, animate };
 }
 function DrawerAction({
@@ -1714,6 +1722,7 @@ var Drawer = forwardRef14(
       dismiss,
       secondary,
       confirm,
+      noPadding = false,
       className = ""
     } = _b, rest = __objRest(_b, [
       "open",
@@ -1729,6 +1738,7 @@ var Drawer = forwardRef14(
       "dismiss",
       "secondary",
       "confirm",
+      "noPadding",
       "className"
     ]);
     const { mounted, animate } = useMountTransition2(open);
@@ -1780,12 +1790,12 @@ var Drawer = forwardRef14(
               onMouseDown: (e) => e.stopPropagation()
             }, rest), {
               children: [
-                showHeader && /* @__PURE__ */ jsxs12(
+                showHeader && /* @__PURE__ */ jsx14("div", { className: "flex flex-col w-full items-center border-b border-border-subtle bg-dialog-background-primary", children: /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     className: [
-                      "flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16",
-                      fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-16 lg:pt-20"
+                      "flex shrink-0 items-center gap-8 px-16 pb-12 pt-16 w-full",
+                      fullScreen ? "lg:gap-16 lg:px-0 lg:py-24 lg:max-w-1216" : "lg:px-24 lg:pb-16 lg:pt-20"
                     ].join(" "),
                     children: [
                       /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
@@ -1797,7 +1807,7 @@ var Drawer = forwardRef14(
                           IconButton,
                           {
                             icon: /* @__PURE__ */ jsx14(CloseIcon3, { className: "h-20 w-20" }),
-                            size: "s",
+                            size: "sm",
                             "aria-label": "\u0E1B\u0E34\u0E14",
                             onClick: handleClose,
                             className: "lg:hidden!"
@@ -1807,7 +1817,7 @@ var Drawer = forwardRef14(
                           IconButton,
                           {
                             icon: /* @__PURE__ */ jsx14(CloseIcon3, { className: "h-24 w-24" }),
-                            size: fullScreen ? "l" : "m",
+                            size: fullScreen ? "lg" : "md",
                             "aria-label": "\u0E1B\u0E34\u0E14",
                             onClick: handleClose,
                             className: "hidden! lg:inline-flex!"
@@ -1816,24 +1826,24 @@ var Drawer = forwardRef14(
                       ] })
                     ]
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsx14(
                   "div",
                   {
                     className: [
-                      "flex-1 overflow-y-auto p-16 text-body-regular text-dialog-text-primary",
-                      background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary",
-                      fullScreen ? "lg:px-112 lg:py-24" : "lg:p-24"
+                      "flex-1 overflow-y-auto text-body-regular text-dialog-text-primary",
+                      !noPadding && "p-16",
+                      background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary"
                     ].join(" "),
                     children
                   }
                 ),
-                showFooter && /* @__PURE__ */ jsx14(
+                showFooter && /* @__PURE__ */ jsx14("div", { className: `flex shrink-0 w-full flex-col items-center border-t border-border-subtle bg-dialog-background-primary`, children: /* @__PURE__ */ jsx14(
                   "div",
                   {
                     className: [
-                      "flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
-                      fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
+                      "flex shrink-0 flex-col gap-8 px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
+                      fullScreen ? "lg:gap-16 lg:px-0 lg:max-w-1216 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
                     ].join(" "),
                     children: allActions ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
                       /* @__PURE__ */ jsx14(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
@@ -1847,7 +1857,7 @@ var Drawer = forwardRef14(
                       /* @__PURE__ */ jsx14(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
                     ] })
                   }
-                )
+                ) })
               ]
             })
           )
@@ -1961,7 +1971,7 @@ var Dropdown = forwardRef15(
       "className"
     ]);
     const isCombobox = variant === "combobox";
-    const iconButtonSize = size === "lg" ? "m" : "s";
+    const iconButtonSize = size === "lg" ? "md" : "sm";
     const [isOpen, setIsOpen] = useState8(false);
     const [isFocused, setIsFocused] = useState8(false);
     const [query, setQuery] = useState8(value.label || "");
@@ -2361,7 +2371,7 @@ var Icon = forwardRef17(
 Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef18, cloneElement } from "react";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var linkStyleClasses = {
   brand: "font-sans text-link-text-enabled",
@@ -2378,17 +2388,11 @@ var linkVariantClasses = {
   lg: "text-link-large gap-4"
 };
 var iconVariantClasses = {
-  xs: "w-20 h-20",
-  sm: "w-20 h-20",
-  md: "w-20 h-20",
-  lg: "w-24 h-24"
+  xs: "w-20 h-20 text-[20px]",
+  sm: "w-20 h-20 text-[20px]",
+  md: "w-20 h-20 text-[20px]",
+  lg: "w-24 h-24 text-[24px]"
 };
-function SuccessIcon3({ className }) {
-  return /* @__PURE__ */ jsxs15("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx18("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx18("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] });
-}
 var Link = forwardRef18(
   (_a, ref) => {
     var _b = _a, {
@@ -2397,7 +2401,7 @@ var Link = forwardRef18(
       linkStyle = "brand",
       text,
       href,
-      icon = true,
+      icon,
       className = "",
       children
     } = _b, rest = __objRest(_b, [
@@ -2410,6 +2414,7 @@ var Link = forwardRef18(
       "className",
       "children"
     ]);
+    var _a2;
     const styleClass = linkStyleClasses[linkStyle];
     const variantClass = linkVariantClasses[variant];
     const iconClass = iconVariantClasses[variant];
@@ -2420,9 +2425,11 @@ var Link = forwardRef18(
       variantClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs15("div", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
+    return /* @__PURE__ */ jsxs15("span", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
       /* @__PURE__ */ jsx18("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
-      icon && !isInline ? /* @__PURE__ */ jsx18(SuccessIcon3, { className: iconClass }) : null
+      icon && cloneElement(icon, {
+        className: `${(_a2 = icon.props.className) != null ? _a2 : ""} ${iconClass}`
+      })
     ] }));
   }
 );
@@ -2966,7 +2973,7 @@ var TextArea = forwardRef23(
             pending ? /* @__PURE__ */ jsx23(Loading, { size: "sm", className: "shrink-0 absolute right-12 top-12" }) : clearable && isFocused && value ? /* @__PURE__ */ jsx23(
               IconButton,
               {
-                size: "s",
+                size: "sm",
                 transparent: true,
                 "aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
                 className: "absolute right-6 top-6",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinn/core-ui",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Refinn Design System — UI components + Tailwind v4 theme preset",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",