@x-plat/design-system 0.5.62 → 0.5.63

package/dist/components/Button/index.cjs

@@ -45,6 +45,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -53,7 +54,7 @@ var Button = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children

package/dist/components/Button/index.d.cts

@@ -4,7 +4,7 @@ import { B as ButtonAttributes } from '../../attributes-DJIWir_0.cjs';
 
 type ButtonType = "primary" | "secondary" | "danger" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends Omit<ButtonAttributes, "className"> {
+interface ButtonProps extends Omit<ButtonAttributes, "style"> {
     children: React.ReactNode;
     type?: ButtonType;
     size?: ButtonSize;

package/dist/components/Button/index.d.ts

@@ -4,7 +4,7 @@ import { B as ButtonAttributes } from '../../attributes-DJIWir_0.js';
 
 type ButtonType = "primary" | "secondary" | "danger" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends Omit<ButtonAttributes, "className"> {
+interface ButtonProps extends Omit<ButtonAttributes, "style"> {
     children: React.ReactNode;
     type?: ButtonType;
     size?: ButtonSize;

package/dist/components/Button/index.js

@@ -19,6 +19,7 @@ import { jsx } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -27,7 +28,7 @@ var Button = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children

package/dist/components/ChatInput/index.cjs

@@ -58,6 +58,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -66,7 +67,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon

package/dist/components/ChatInput/index.js

@@ -22,6 +22,7 @@ import { jsx } from "react/jsx-runtime";
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -30,7 +31,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon

package/dist/components/CheckBox/index.cjs

@@ -951,6 +951,7 @@ var import_jsx_runtime295 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
+    className,
     label,
     onChange,
     disabled,
@@ -965,7 +966,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
       "input",
       {

package/dist/components/CheckBox/index.d.cts

@@ -4,7 +4,7 @@ import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
 type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
-interface CheckBoxProps extends Omit<InputAttributes, "size" | "className"> {
+interface CheckBoxProps extends Omit<InputAttributes, "size"> {
     label?: string;
     checked?: boolean;
     size?: CheckBoxSize;

package/dist/components/CheckBox/index.d.ts

@@ -4,7 +4,7 @@ import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
 type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
-interface CheckBoxProps extends Omit<InputAttributes, "size" | "className"> {
+interface CheckBoxProps extends Omit<InputAttributes, "size"> {
     label?: string;
     checked?: boolean;
     size?: CheckBoxSize;

package/dist/components/CheckBox/index.js

@@ -925,6 +925,7 @@ import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     checked,
+    className,
     label,
     onChange,
     disabled,
@@ -939,7 +940,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs189("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+  return /* @__PURE__ */ jsxs189("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
     /* @__PURE__ */ jsx295(
       "input",
       {

package/dist/components/DatePicker/index.cjs

@@ -61,6 +61,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -69,7 +70,7 @@ var Button = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children
@@ -284,6 +285,7 @@ var parseValue = (type, value) => {
 var Input = import_react.default.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -307,7 +309,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {

package/dist/components/DatePicker/index.js

@@ -22,6 +22,7 @@ import { jsx } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -30,7 +31,7 @@ var Button = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children
@@ -245,6 +246,7 @@ var parseValue = (type, value) => {
 var Input = React.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -268,7 +270,7 @@ var Input = React.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {

package/dist/components/IconButton/index.cjs

@@ -45,6 +45,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -53,7 +54,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon

package/dist/components/IconButton/index.d.cts

@@ -4,7 +4,7 @@ import { B as ButtonAttributes } from '../../attributes-DJIWir_0.cjs';
 
 type IconButtonType = "primary" | "secondary" | "danger" | "ghost";
 type IconButtonSize = "sm" | "md" | "lg";
-interface IconButtonProps extends Omit<ButtonAttributes, "className" | "children"> {
+interface IconButtonProps extends Omit<ButtonAttributes, "children"> {
     icon: React.ReactNode;
     type?: IconButtonType;
     size?: IconButtonSize;

package/dist/components/IconButton/index.d.ts

@@ -4,7 +4,7 @@ import { B as ButtonAttributes } from '../../attributes-DJIWir_0.js';
 
 type IconButtonType = "primary" | "secondary" | "danger" | "ghost";
 type IconButtonSize = "sm" | "md" | "lg";
-interface IconButtonProps extends Omit<ButtonAttributes, "className" | "children"> {
+interface IconButtonProps extends Omit<ButtonAttributes, "children"> {
     icon: React.ReactNode;
     type?: IconButtonType;
     size?: IconButtonSize;

package/dist/components/IconButton/index.js

@@ -19,6 +19,7 @@ import { jsx } from "react/jsx-runtime";
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -27,7 +28,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon

package/dist/components/Input/index.cjs

@@ -256,6 +256,7 @@ var parseValue = (type, value) => {
 var Input = import_react.default.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -279,7 +280,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {

package/dist/components/Input/index.d.cts

@@ -2,7 +2,7 @@ import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
 
 type InputSize$1 = "sm" | "md" | "lg";
-interface InputProps extends Omit<InputAttributes, "size" | "className"> {
+interface InputProps extends Omit<InputAttributes, "size"> {
     type?: "text" | "number" | "email" | "password" | "tel";
     size?: InputSize$1;
     validations?: {
@@ -14,7 +14,7 @@ interface InputProps extends Omit<InputAttributes, "size" | "className"> {
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 type InputSize = "sm" | "md" | "lg";
-interface PasswordInputProps extends Omit<InputAttributes, "size" | "className"> {
+interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: {
         status: "error" | "warning" | "success" | "default";
         message: string;

package/dist/components/Input/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
 
 type InputSize$1 = "sm" | "md" | "lg";
-interface InputProps extends Omit<InputAttributes, "size" | "className"> {
+interface InputProps extends Omit<InputAttributes, "size"> {
     type?: "text" | "number" | "email" | "password" | "tel";
     size?: InputSize$1;
     validations?: {
@@ -14,7 +14,7 @@ interface InputProps extends Omit<InputAttributes, "size" | "className"> {
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 type InputSize = "sm" | "md" | "lg";
-interface PasswordInputProps extends Omit<InputAttributes, "size" | "className"> {
+interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: {
         status: "error" | "warning" | "success" | "default";
         message: string;

package/dist/components/Input/index.js

@@ -219,6 +219,7 @@ var parseValue = (type, value) => {
 var Input = React.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -242,7 +243,7 @@ var Input = React.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {

package/dist/components/Radio/index.cjs

@@ -66,6 +66,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
+    className,
     value,
     size: sizeProp,
     type = "brand",
@@ -87,7 +88,8 @@ var Radio = (props) => {
         "lib-xplat-radio",
         size,
         type,
-        localChecked ? "checked" : void 0
+        localChecked ? "checked" : void 0,
+        className
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),

package/dist/components/Radio/index.d.cts

@@ -4,7 +4,7 @@ import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
 type RadioType = "brand" | "success" | "error" | "warning" | "info";
-interface RadioProps extends Omit<InputAttributes, "size" | "className"> {
+interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
      * 단일 사용시 name 필수 작성

package/dist/components/Radio/index.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
 type RadioType = "brand" | "success" | "error" | "warning" | "info";
-interface RadioProps extends Omit<InputAttributes, "size" | "className"> {
+interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
      * 단일 사용시 name 필수 작성

package/dist/components/Radio/index.js

@@ -29,6 +29,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
+    className,
     value,
     size: sizeProp,
     type = "brand",
@@ -50,7 +51,8 @@ var Radio = (props) => {
         "lib-xplat-radio",
         size,
         type,
-        localChecked ? "checked" : void 0
+        localChecked ? "checked" : void 0,
+        className
       ),
       children: [
         /* @__PURE__ */ jsx("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),

package/dist/components/TextArea/index.cjs

@@ -57,7 +57,7 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var TextArea = import_react.default.forwardRef(
   (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
+    const { value, className, onChange, disabled, ...textareaProps } = props;
     const localRef = import_react.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -85,7 +85,7 @@ var TextArea = import_react.default.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         className: clsx_default(

package/dist/components/TextArea/index.d.cts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
 
-type TextareaProps = Omit<TextareaAttributes, "className">;
-declare const TextArea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<TextareaAttributes & React.RefAttributes<HTMLTextAreaElement>>;
 
 export { TextArea };

package/dist/components/TextArea/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
 
-type TextareaProps = Omit<TextareaAttributes, "className">;
-declare const TextArea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<TextareaAttributes & React.RefAttributes<HTMLTextAreaElement>>;
 
 export { TextArea };

package/dist/components/TextArea/index.js

@@ -21,7 +21,7 @@ var clsx_default = clsx;
 import { jsx } from "react/jsx-runtime";
 var TextArea = React.forwardRef(
   (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
+    const { value, className, onChange, disabled, ...textareaProps } = props;
     const localRef = React.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -49,7 +49,7 @@ var TextArea = React.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ jsx("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx(
       "div",
       {
         className: clsx_default(

package/dist/components/index.cjs

@@ -1674,6 +1674,7 @@ var import_jsx_runtime301 = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -1682,7 +1683,7 @@ var Button = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children
@@ -2790,6 +2791,7 @@ var import_jsx_runtime306 = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -2798,7 +2800,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon
@@ -2902,6 +2904,7 @@ var import_jsx_runtime308 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
+    className,
     label,
     onChange,
     disabled,
@@ -2916,7 +2919,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
       "input",
       {
@@ -3057,6 +3060,7 @@ var parseValue = (type, value) => {
 var Input = import_react7.default.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -3080,7 +3084,7 @@ var Input = import_react7.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
@@ -5066,6 +5070,7 @@ var import_jsx_runtime332 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
+    className,
     value,
     size: sizeProp,
     type = "brand",
@@ -5087,7 +5092,8 @@ var Radio = (props) => {
         "lib-xplat-radio",
         size,
         type,
-        localChecked ? "checked" : void 0
+        localChecked ? "checked" : void 0,
+        className
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
@@ -5990,7 +5996,7 @@ var import_react39 = __toESM(require("react"), 1);
 var import_jsx_runtime347 = require("react/jsx-runtime");
 var TextArea = import_react39.default.forwardRef(
   (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
+    const { value, className, onChange, disabled, ...textareaProps } = props;
     const localRef = import_react39.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -6018,7 +6024,7 @@ var TextArea = import_react39.default.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       "div",
       {
         className: clsx_default(

package/dist/components/index.js

@@ -1583,6 +1583,7 @@ import { jsx as jsx301 } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -1591,7 +1592,7 @@ var Button = (props) => {
   return /* @__PURE__ */ jsx301(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children
@@ -2699,6 +2700,7 @@ import { jsx as jsx306 } from "react/jsx-runtime";
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -2707,7 +2709,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ jsx306(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon
@@ -2811,6 +2813,7 @@ import { jsx as jsx308, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     checked,
+    className,
     label,
     onChange,
     disabled,
@@ -2825,7 +2828,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+  return /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
     /* @__PURE__ */ jsx308(
       "input",
       {
@@ -2966,6 +2969,7 @@ var parseValue = (type, value) => {
 var Input = React7.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -2989,7 +2993,7 @@ var Input = React7.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ jsxs200("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ jsxs200(
       "div",
       {
@@ -4975,6 +4979,7 @@ import { jsx as jsx332, jsxs as jsxs215 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
+    className,
     value,
     size: sizeProp,
     type = "brand",
@@ -4996,7 +5001,8 @@ var Radio = (props) => {
         "lib-xplat-radio",
         size,
         type,
-        localChecked ? "checked" : void 0
+        localChecked ? "checked" : void 0,
+        className
       ),
       children: [
         /* @__PURE__ */ jsx332("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
@@ -5899,7 +5905,7 @@ import React38 from "react";
 import { jsx as jsx347 } from "react/jsx-runtime";
 var TextArea = React38.forwardRef(
   (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
+    const { value, className, onChange, disabled, ...textareaProps } = props;
     const localRef = React38.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -5927,7 +5933,7 @@ var TextArea = React38.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ jsx347("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx347(
+    return /* @__PURE__ */ jsx347("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx347(
       "div",
       {
         className: clsx_default(

package/dist/index.cjs

@@ -6073,6 +6073,7 @@ var import_jsx_runtime301 = require("react/jsx-runtime");
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -6081,7 +6082,7 @@ var Button = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children
@@ -7189,6 +7190,7 @@ var import_jsx_runtime306 = require("react/jsx-runtime");
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -7197,7 +7199,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon
@@ -7314,6 +7316,7 @@ var import_jsx_runtime308 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
     checked,
+    className,
     label,
     onChange,
     disabled,
@@ -7328,7 +7331,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
       "input",
       {
@@ -7469,6 +7472,7 @@ var parseValue = (type, value) => {
 var Input = import_react7.default.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -7492,7 +7496,7 @@ var Input = import_react7.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
@@ -9478,6 +9482,7 @@ var import_jsx_runtime332 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
+    className,
     value,
     size: sizeProp,
     type = "brand",
@@ -9499,7 +9504,8 @@ var Radio = (props) => {
         "lib-xplat-radio",
         size,
         type,
-        localChecked ? "checked" : void 0
+        localChecked ? "checked" : void 0,
+        className
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime332.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
@@ -10402,7 +10408,7 @@ var import_react39 = __toESM(require("react"), 1);
 var import_jsx_runtime347 = require("react/jsx-runtime");
 var TextArea = import_react39.default.forwardRef(
   (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
+    const { value, className, onChange, disabled, ...textareaProps } = props;
     const localRef = import_react39.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -10430,7 +10436,7 @@ var TextArea = import_react39.default.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       "div",
       {
         className: clsx_default(

package/dist/index.js

@@ -5673,6 +5673,7 @@ import { jsx as jsx301 } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     children,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -5681,7 +5682,7 @@ var Button = (props) => {
   return /* @__PURE__ */ jsx301(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size),
+      className: clsx_default("lib-xplat-button", type, size, className),
       disabled,
       ...rest,
       children
@@ -6789,6 +6790,7 @@ import { jsx as jsx306 } from "react/jsx-runtime";
 var IconButton = (props) => {
   const {
     icon,
+    className,
     type = "primary",
     size = "md",
     disabled,
@@ -6797,7 +6799,7 @@ var IconButton = (props) => {
   return /* @__PURE__ */ jsx306(
     "button",
     {
-      className: clsx_default("lib-xplat-icon-button", type, size),
+      className: clsx_default("lib-xplat-icon-button", type, size, className),
       disabled,
       ...rest,
       children: icon
@@ -6914,6 +6916,7 @@ import { jsx as jsx308, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
     checked,
+    className,
     label,
     onChange,
     disabled,
@@ -6928,7 +6931,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
+  return /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
     /* @__PURE__ */ jsx308(
       "input",
       {
@@ -7069,6 +7072,7 @@ var parseValue = (type, value) => {
 var Input = React7.forwardRef((props, ref) => {
   const {
     value,
+    className,
     onChange,
     type = "text",
     size = "md",
@@ -7092,7 +7096,7 @@ var Input = React7.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-input-wrap", children: [
+  return /* @__PURE__ */ jsxs200("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ jsxs200(
       "div",
       {
@@ -9078,6 +9082,7 @@ import { jsx as jsx332, jsxs as jsxs215 } from "react/jsx-runtime";
 var Radio = (props) => {
   const {
     label,
+    className,
     value,
     size: sizeProp,
     type = "brand",
@@ -9099,7 +9104,8 @@ var Radio = (props) => {
         "lib-xplat-radio",
         size,
         type,
-        localChecked ? "checked" : void 0
+        localChecked ? "checked" : void 0,
+        className
       ),
       children: [
         /* @__PURE__ */ jsx332("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
@@ -10002,7 +10008,7 @@ import React38 from "react";
 import { jsx as jsx347 } from "react/jsx-runtime";
 var TextArea = React38.forwardRef(
   (props, ref) => {
-    const { value, onChange, disabled, ...textareaProps } = props;
+    const { value, className, onChange, disabled, ...textareaProps } = props;
     const localRef = React38.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -10030,7 +10036,7 @@ var TextArea = React38.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ jsx347("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx347(
+    return /* @__PURE__ */ jsx347("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx347(
       "div",
       {
         className: clsx_default(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.62",
+  "version": "0.5.63",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",