@lotte-innovate/ui-component-test 0.1.48 → 0.1.50

package/dist/cjs/lib/components/DataList/DataListLabel.jsx

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataListLabel = exports.dataListLabelVariants = void 0;
+var react_1 = __importStar(require("react"));
+var themes_1 = require("@radix-ui/themes");
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var DataListRoot_1 = require("./DataListRoot");
+exports.dataListLabelVariants = (0, class_variance_authority_1.cva)('text-slateA-11 dark:text-slateDarkA-11 w-[120px] mb-1', {
+    variants: {
+        size: {
+            small: 'text-xs mt-[5px]',
+            medium: 'text-sm mt-[3px]',
+            large: 'text-base',
+        },
+        weight: __assign({}, constants_1.weightVariants),
+    },
+    defaultVariants: {
+        weight: 'regular',
+        size: 'medium',
+    },
+});
+exports.DataListLabel = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, weight = _a.weight, color = _a.color, props = __rest(_a, ["children", "className", "weight", "color"]);
+    var size = (0, DataListRoot_1.useDataListContext)().size;
+    return (<themes_1.DataList.Label ref={ref} {...props}>
+      <p className={(0, utils_1.cn)((0, exports.dataListLabelVariants)({ weight: weight, size: size }), className)}>{children}</p>
+    </themes_1.DataList.Label>);
+});
+exports.DataListLabel.displayName = 'DataList.Label';

package/dist/cjs/lib/components/DataList/DataListRoot.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DataList as DataListTheme } from '@radix-ui/themes';
+import { dataListValueVariants } from './DataListValue';
+import { dataListItemVariants } from './DataListItem';
+import { VariantProps } from 'class-variance-authority';
+export interface DataListProps extends VariantProps<typeof dataListVariants>, VariantProps<typeof dataListItemVariants>, VariantProps<typeof dataListValueVariants> {
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const dataListVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const useDataListContext: () => DataListProps;
+export declare const DataListRoot: React.ForwardRefExoticComponent<Omit<DataListTheme.RootProps & React.RefAttributes<HTMLDListElement>, "ref"> & DataListProps & React.RefAttributes<HTMLDListElement>>;
+export default DataListRoot;

package/dist/cjs/lib/components/DataList/DataListRoot.js

@@ -0,0 +1,54 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo, } from 'react';
+import { DataList as DataListTheme } from '@radix-ui/themes';
+import { cva } from 'class-variance-authority';
+import { cn } from 'lib/utils/utils';
+export var dataListVariants = cva('flex flex-col', {
+    variants: {
+        size: {
+            small: 'space-y-3',
+            medium: 'space-y-4',
+            large: 'space-y-5',
+        },
+    },
+    defaultVariants: {
+        size: 'medium',
+    },
+});
+var DataListContext = createContext({
+    size: 'medium',
+    scaling: '100%',
+    color: 'black',
+});
+export var useDataListContext = function () {
+    return useContext(DataListContext);
+};
+export var DataListRoot = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, size = _a.size, scaling = _a.scaling, color = _a.color, props = __rest(_a, ["children", "className", "size", "scaling", "color"]);
+    var contextValue = useMemo(function () { return ({ size: size, scaling: scaling, color: color }); }, [size, scaling, color]);
+    return (_jsx(DataListContext.Provider, { value: contextValue, children: _jsx(DataListTheme.Root, __assign({ ref: ref }, props, { className: cn(dataListVariants({ size: size }), className), children: children })) }));
+});
+DataListRoot.displayName = 'DataList.Root';
+export default DataListRoot;

package/dist/cjs/lib/components/DataList/DataListRoot.jsx

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataListRoot = exports.useDataListContext = exports.dataListVariants = void 0;
+var react_1 = __importStar(require("react"));
+var themes_1 = require("@radix-ui/themes");
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+exports.dataListVariants = (0, class_variance_authority_1.cva)('flex flex-col', {
+    variants: {
+        size: {
+            small: 'space-y-3',
+            medium: 'space-y-4',
+            large: 'space-y-5',
+        },
+    },
+    defaultVariants: {
+        size: 'medium',
+    },
+});
+var DataListContext = (0, react_1.createContext)({
+    size: 'medium',
+    scaling: '100%',
+    color: 'black',
+});
+var useDataListContext = function () {
+    return (0, react_1.useContext)(DataListContext);
+};
+exports.useDataListContext = useDataListContext;
+exports.DataListRoot = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, size = _a.size, scaling = _a.scaling, color = _a.color, props = __rest(_a, ["children", "className", "size", "scaling", "color"]);
+    var contextValue = (0, react_1.useMemo)(function () { return ({ size: size, scaling: scaling, color: color }); }, [size, scaling, color]);
+    return (<DataListContext.Provider value={contextValue}>
+      <themes_1.DataList.Root ref={ref} {...props} className={(0, utils_1.cn)((0, exports.dataListVariants)({ size: size }), className)}>
+        {children}
+      </themes_1.DataList.Root>
+    </DataListContext.Provider>);
+});
+exports.DataListRoot.displayName = 'DataList.Root';
+exports.default = exports.DataListRoot;

package/dist/cjs/lib/components/DataList/DataListValue.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DataList as DataListTheme } from '@radix-ui/themes';
+import { VariantProps } from 'class-variance-authority';
+export interface DataListValueProps extends VariantProps<typeof dataListValueVariants> {
+}
+export declare const dataListValueVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const DataListValue: React.ForwardRefExoticComponent<Omit<DataListTheme.ValueProps & React.RefAttributes<HTMLElement>, "ref"> & DataListValueProps & React.RefAttributes<HTMLElement>>;

package/dist/cjs/lib/components/DataList/DataListValue.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { DataList as DataListTheme } from '@radix-ui/themes';
+import { textColorStyle, weightVariants } from 'lib/constants';
+import { cva } from 'class-variance-authority';
+import { cn } from 'lib/utils/utils';
+import { useDataListContext } from './DataListRoot';
+export var dataListValueVariants = cva('text-slate-12 dark:text-slateDark-12 w-[200px]', {
+    variants: {
+        size: {
+            small: 'text-xs',
+            medium: 'text-sm',
+            large: 'text-base',
+        },
+        weight: __assign({}, weightVariants),
+        color: textColorStyle(),
+    },
+    defaultVariants: {
+        color: 'black',
+        weight: 'regular',
+        size: 'medium',
+    },
+});
+export var DataListValue = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, weight = _a.weight, props = __rest(_a, ["children", "className", "weight"]);
+    var _b = useDataListContext(), size = _b.size, color = _b.color;
+    return (_jsx(DataListTheme.Value, __assign({ ref: ref, className: cn(dataListValueVariants({ weight: weight, size: size, color: color }), className) }, props, { children: children })));
+});
+DataListValue.displayName = 'DataList.Value';

package/dist/cjs/lib/components/DataList/DataListValue.jsx

@@ -0,0 +1,78 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataListValue = exports.dataListValueVariants = void 0;
+var react_1 = __importStar(require("react"));
+var themes_1 = require("@radix-ui/themes");
+var constants_1 = require("lib/constants");
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var DataListRoot_1 = require("./DataListRoot");
+exports.dataListValueVariants = (0, class_variance_authority_1.cva)('text-slate-12 dark:text-slateDark-12 w-[200px]', {
+    variants: {
+        size: {
+            small: 'text-xs',
+            medium: 'text-sm',
+            large: 'text-base',
+        },
+        weight: __assign({}, constants_1.weightVariants),
+        color: (0, constants_1.textColorStyle)(),
+    },
+    defaultVariants: {
+        color: 'black',
+        weight: 'regular',
+        size: 'medium',
+    },
+});
+exports.DataListValue = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, weight = _a.weight, props = __rest(_a, ["children", "className", "weight"]);
+    var _b = (0, DataListRoot_1.useDataListContext)(), size = _b.size, color = _b.color;
+    return (<themes_1.DataList.Value ref={ref} className={(0, utils_1.cn)((0, exports.dataListValueVariants)({ weight: weight, size: size, color: color }), className)} {...props}>
+      {children}
+    </themes_1.DataList.Value>);
+});
+exports.DataListValue.displayName = 'DataList.Value';

package/dist/cjs/lib/components/DataList/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const DataList: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/data-list").RootProps & import("react").RefAttributes<HTMLDListElement>, "ref"> & import("./DataListRoot").DataListProps & import("react").RefAttributes<HTMLDListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/data-list").ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./DataListItem").DataListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/data-list").LabelProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("./DataListLabel").DataListLabelProps & import("react").RefAttributes<HTMLElement>>;
+    Value: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/data-list").ValueProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("./DataListValue").DataListValueProps & import("react").RefAttributes<HTMLElement>>;
+};
+export default DataList;

package/dist/cjs/lib/components/DataList/index.jsx

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var DataListRoot_1 = require("./DataListRoot");
+var DataListItem_1 = require("./DataListItem");
+var DataListLabel_1 = require("./DataListLabel");
+var DataListValue_1 = require("./DataListValue");
+var DataList = { Root: DataListRoot_1.DataListRoot, Item: DataListItem_1.DataListItem, Label: DataListLabel_1.DataListLabel, Value: DataListValue_1.DataListValue };
+exports.default = DataList;

package/dist/cjs/lib/components/Dialog/DialogAction.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Dialog as DialogTheme } from '@radix-ui/themes';
+import { VariantProps } from 'class-variance-authority';
+export interface DialogActionProps extends VariantProps<typeof dialogActionVariants> {
+    color?: any;
+    size?: any;
+}
+export declare const dialogActionVariants: (props?: ({
+    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | null | undefined;
+    color?: string | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const DialogAction: React.ForwardRefExoticComponent<Omit<DialogTheme.CloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & DialogActionProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/lib/components/Dialog/DialogAction.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import { Dialog as DialogTheme } from '@radix-ui/themes';
+import { cva } from 'class-variance-authority';
+import { primaryColorStyle } from 'lib/constants';
+import { DialogContext } from './DialogRoot';
+import { cn } from 'lib/utils/utils';
+export var dialogActionVariants = cva('rounded-md inline-flex font-medium items-center justify-center px-[15px] hover:cursor-pointer', {
+    variants: {
+        radius: {
+            none: 'rounded-none',
+            small: 'rounded-[3px]',
+            medium: 'rounded',
+            large: 'rounded-md',
+            full: 'rounded-full',
+        },
+        size: {
+            small: 'text-xs w-[52px] h-[24px] px-2',
+            medium: 'text-sm w-[66px] h-[32px] px-3',
+            large: 'text-base w-[72px] h-[32px] px-3',
+            'x-large': 'text-lg w-[86px] h-[40px] px-6',
+        },
+        color: primaryColorStyle(),
+    },
+    defaultVariants: {
+        radius: 'medium',
+        size: 'medium',
+        color: 'red',
+    },
+});
+export var DialogAction = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var _b = useContext(DialogContext), radius = _b.radius, size = _b.size, color = _b.color;
+    var buttonClassName = cn(dialogActionVariants({ radius: radius, size: size, color: color }), className);
+    return (_jsx(DialogTheme.Close, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
+});
+DialogAction.displayName = 'Dialog.Action';

package/dist/cjs/lib/components/Dialog/DialogAction.jsx

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogAction = exports.dialogActionVariants = void 0;
+var react_1 = __importStar(require("react"));
+var themes_1 = require("@radix-ui/themes");
+var class_variance_authority_1 = require("class-variance-authority");
+var constants_1 = require("lib/constants");
+var DialogRoot_1 = require("./DialogRoot");
+var utils_1 = require("lib/utils/utils");
+exports.dialogActionVariants = (0, class_variance_authority_1.cva)('rounded-md inline-flex font-medium items-center justify-center px-[15px] hover:cursor-pointer', {
+    variants: {
+        radius: {
+            none: 'rounded-none',
+            small: 'rounded-[3px]',
+            medium: 'rounded',
+            large: 'rounded-md',
+            full: 'rounded-full',
+        },
+        size: {
+            small: 'text-xs w-[52px] h-[24px] px-2',
+            medium: 'text-sm w-[66px] h-[32px] px-3',
+            large: 'text-base w-[72px] h-[32px] px-3',
+            'x-large': 'text-lg w-[86px] h-[40px] px-6',
+        },
+        color: (0, constants_1.primaryColorStyle)(),
+    },
+    defaultVariants: {
+        radius: 'medium',
+        size: 'medium',
+        color: 'red',
+    },
+});
+exports.DialogAction = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var _b = (0, react_1.useContext)(DialogRoot_1.DialogContext), radius = _b.radius, size = _b.size, color = _b.color;
+    var buttonClassName = (0, utils_1.cn)((0, exports.dialogActionVariants)({ radius: radius, size: size, color: color }), className);
+    return (<themes_1.Dialog.Close ref={ref} className={buttonClassName} {...props}>
+      {children}
+    </themes_1.Dialog.Close>);
+});
+exports.DialogAction.displayName = 'Dialog.Action';

package/dist/cjs/lib/components/Dialog/DialogCancel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Dialog as DialogTheme } from '@radix-ui/themes';
+import { VariantProps } from 'class-variance-authority';
+export interface DialogCancelProps extends VariantProps<typeof dialogCancelVariants> {
+    size?: any;
+}
+export declare const dialogCancelVariants: (props?: ({
+    radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const DialogCancel: React.ForwardRefExoticComponent<Omit<DialogTheme.CloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & DialogCancelProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/lib/components/Dialog/DialogCancel.js

@@ -0,0 +1,55 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import { Dialog as DialogTheme } from '@radix-ui/themes';
+import { cva } from 'class-variance-authority';
+import { DialogContext } from './DialogRoot';
+import { cn } from 'lib/utils/utils';
+export var dialogCancelVariants = cva("rounded-md font-medium inline-flex justify-center items-center text-slate-11 bg-slate-3 outline-none border-none\n    dark:text-slateDark-11 dark:bg-slateDark-3 dark:hover:bg-slateDarkA-4\n    active:border-none hover:cursor-pointer hover:bg-slateA-4", {
+    variants: {
+        radius: {
+            none: 'rounded-none',
+            small: 'rounded-[3px]',
+            medium: 'rounded',
+            large: 'rounded-md',
+            full: 'rounded-full',
+        },
+        size: {
+            small: 'text-xs w-[52px] h-[24px] px-2 mr-2',
+            medium: 'text-sm w-[66px] h-[32px] px-3 mr-2',
+            large: 'text-base w-[72px] h-[32px] px-3 mr-3',
+            'x-large': 'text-lg w-[86px] h-[40px] px-6 mr-4',
+        },
+    },
+    defaultVariants: {
+        radius: 'medium',
+        size: 'medium',
+    },
+});
+export var DialogCancel = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var _b = useContext(DialogContext), radius = _b.radius, size = _b.size;
+    return (_jsx(DialogTheme.Close, __assign({ ref: ref, className: cn(dialogCancelVariants({ radius: radius, size: size }), className) }, props, { children: children })));
+});
+DialogCancel.displayName = 'Dialog.Cancel';