@refinn/core-ui 0.1.16 → 0.1.18

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,
@@ -553,6 +553,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
     const descColorClass = isPage ? pageIsDark ? "text-alert-text-secondary" : "text-alert-text-secondary-inverse" : "text-alert-text-secondary";
     const linkColorClass = isPage ? pageIsDark ? "text-alert-text-primary" : "text-white-100" : "text-enabled";
     const closeButtonSurface = isPage ? "dark" : "default";
+    const hasIcon = Boolean(icon) || variant !== "none";
     const containerClasses = [
       "flex font-sans",
       isStacked ? "flex-col items-start gap-8" : "items-center gap-24",
@@ -561,7 +562,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: containerClasses }, rest), { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex w-full items-start gap-8 ${isStacked ? "" : "flex-1 min-w-0"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex w-full gap-8 ${isStacked ? "items-start" : "items-center flex-1 min-w-0"}`, children: [
         icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DefaultIcon, { className: `h-20 w-20 shrink-0 ${iconColorClass}` }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-2", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: `text-label-medium ${titleColorClass}`, children: title }),
@@ -580,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,
@@ -590,7 +591,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
           }
         )
       ] }),
-      isStacked && buttonAction && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex w-full items-start gap-12 pl-28", children: isPage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      isStacked && buttonAction && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `flex w-full items-start gap-12 ${hasIcon ? "pl-28" : ""}`, children: isPage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "a",
         {
           href: buttonAction.href,
@@ -910,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,
@@ -1205,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: [
@@ -1602,7 +1603,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
@@ -1623,7 +1624,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!"
@@ -1633,7 +1634,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!"
@@ -1727,6 +1728,7 @@ var Drawer = (0, import_react14.forwardRef)(
       dismiss,
       secondary,
       confirm,
+      noPadding = false,
       className = ""
     } = _b, rest = __objRest(_b, [
       "open",
@@ -1742,6 +1744,7 @@ var Drawer = (0, import_react14.forwardRef)(
       "dismiss",
       "secondary",
       "confirm",
+      "noPadding",
       "className"
     ]);
     const { mounted, animate } = useMountTransition2(open);
@@ -1793,12 +1796,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: [
@@ -1810,7 +1813,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!"
@@ -1820,7 +1823,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!"
@@ -1829,24 +1832,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" }),
@@ -1860,7 +1863,7 @@ var Drawer = (0, import_react14.forwardRef)(
                       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
                     ] })
                   }
-                )
+                ) })
               ]
             })
           )
@@ -1968,7 +1971,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 || "");
@@ -2385,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__ */ (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, {
@@ -2404,7 +2401,7 @@ var Link = (0, import_react18.forwardRef)(
       linkStyle = "brand",
       text,
       href,
-      icon = true,
+      icon,
       className = "",
       children
     } = _b, rest = __objRest(_b, [
@@ -2417,6 +2414,7 @@ var Link = (0, import_react18.forwardRef)(
       "className",
       "children"
     ]);
+    var _a2;
     const styleClass = linkStyleClasses[linkStyle];
     const variantClass = linkVariantClasses[variant];
     const iconClass = iconVariantClasses[variant];
@@ -2427,9 +2425,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}`
+      })
     ] }));
   }
 );
@@ -2962,7 +2962,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,
@@ -510,6 +510,7 @@ var AlertBanner = forwardRef5(
     const descColorClass = isPage ? pageIsDark ? "text-alert-text-secondary" : "text-alert-text-secondary-inverse" : "text-alert-text-secondary";
     const linkColorClass = isPage ? pageIsDark ? "text-alert-text-primary" : "text-white-100" : "text-enabled";
     const closeButtonSurface = isPage ? "dark" : "default";
+    const hasIcon = Boolean(icon) || variant !== "none";
     const containerClasses = [
       "flex font-sans",
       isStacked ? "flex-col items-start gap-8" : "items-center gap-24",
@@ -518,7 +519,7 @@ var AlertBanner = forwardRef5(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs4("div", __spreadProps(__spreadValues({ ref, role: "alert", className: containerClasses }, rest), { children: [
-      /* @__PURE__ */ jsxs4("div", { className: `flex w-full items-start gap-8 ${isStacked ? "" : "flex-1 min-w-0"}`, children: [
+      /* @__PURE__ */ jsxs4("div", { className: `flex w-full gap-8 ${isStacked ? "items-start" : "items-center flex-1 min-w-0"}`, children: [
         icon != null ? icon : /* @__PURE__ */ jsx5(DefaultIcon, { className: `h-20 w-20 shrink-0 ${iconColorClass}` }),
         /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0 flex flex-col gap-2", children: [
           title && /* @__PURE__ */ jsx5("p", { className: `text-label-medium ${titleColorClass}`, children: title }),
@@ -537,7 +538,7 @@ var AlertBanner = forwardRef5(
         onClose && /* @__PURE__ */ jsx5(
           IconButton,
           {
-            size: "s",
+            size: "sm",
             surface: closeButtonSurface,
             transparent: true,
             onClick: onClose,
@@ -547,7 +548,7 @@ var AlertBanner = forwardRef5(
           }
         )
       ] }),
-      isStacked && buttonAction && /* @__PURE__ */ jsx5("div", { className: "flex w-full items-start gap-12 pl-28", children: isPage ? /* @__PURE__ */ jsx5(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ jsxs4(
+      isStacked && buttonAction && /* @__PURE__ */ jsx5("div", { className: `flex w-full items-start gap-12 ${hasIcon ? "pl-28" : ""}`, children: isPage ? /* @__PURE__ */ jsx5(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ jsxs4(
         "a",
         {
           href: buttonAction.href,
@@ -873,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,
@@ -1183,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: [
@@ -1584,7 +1585,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
@@ -1605,7 +1606,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!"
@@ -1615,7 +1616,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!"
@@ -1713,6 +1714,7 @@ var Drawer = forwardRef14(
       dismiss,
       secondary,
       confirm,
+      noPadding = false,
       className = ""
     } = _b, rest = __objRest(_b, [
       "open",
@@ -1728,6 +1730,7 @@ var Drawer = forwardRef14(
       "dismiss",
       "secondary",
       "confirm",
+      "noPadding",
       "className"
     ]);
     const { mounted, animate } = useMountTransition2(open);
@@ -1779,12 +1782,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: [
@@ -1796,7 +1799,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!"
@@ -1806,7 +1809,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!"
@@ -1815,24 +1818,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" }),
@@ -1846,7 +1849,7 @@ var Drawer = forwardRef14(
                       /* @__PURE__ */ jsx14(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
                     ] })
                   }
-                )
+                ) })
               ]
             })
           )
@@ -1960,7 +1963,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 || "");
@@ -2360,7 +2363,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",
@@ -2377,17 +2380,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, {
@@ -2396,7 +2393,7 @@ var Link = forwardRef18(
       linkStyle = "brand",
       text,
       href,
-      icon = true,
+      icon,
       className = "",
       children
     } = _b, rest = __objRest(_b, [
@@ -2409,6 +2406,7 @@ var Link = forwardRef18(
       "className",
       "children"
     ]);
+    var _a2;
     const styleClass = linkStyleClasses[linkStyle];
     const variantClass = linkVariantClasses[variant];
     const iconClass = iconVariantClasses[variant];
@@ -2419,9 +2417,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}`
+      })
     ] }));
   }
 );
@@ -2965,7 +2965,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.16",
+  "version": "0.1.18",
   "description": "Refinn Design System — UI components + Tailwind v4 theme preset",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",