@lotte-innovate/ui-component-test 0.1.35 → 0.1.37

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

@@ -0,0 +1,69 @@
+"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.aspectRatioVariants = void 0;
+var react_1 = __importStar(require("react"));
+var AspectRatioPrimitive = __importStar(require("@radix-ui/react-aspect-ratio"));
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+exports.aspectRatioVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        scaling: __assign({}, constants_1.scalingVariants),
+    },
+    defaultVariants: {
+        scaling: '100%',
+    },
+});
+var AspectRatio = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.ratio, ratio = _b === void 0 ? 16 / 9 : _b, scaling = _a.scaling, props = __rest(_a, ["children", "className", "ratio", "scaling"]);
+    return (<AspectRatioPrimitive.Root ratio={ratio} ref={ref} {...props} className={(0, utils_1.cn)((0, exports.aspectRatioVariants)({ scaling: scaling }), className)}>
+      {children}
+    </AspectRatioPrimitive.Root>);
+});
+AspectRatio.displayName = 'AspectRatio';
+exports.default = AspectRatio;

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

@@ -0,0 +1,87 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var AvatarPrimitive = __importStar(require("@radix-ui/react-avatar"));
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var AvatarVariants = (0, class_variance_authority_1.cva)('font-medium', {
+    variants: {
+        radius: __assign({}, constants_1.radiusVariants['base']),
+        size: {
+            '1': 'h-[24px] w-[24px] text-[12px]',
+            '2': 'h-[32px] w-[32px] text-[14px]',
+            '3': 'h-[40px] w-[40px] text-[16px]',
+            '4': 'h-[48px] w-[48px] text-[18px]',
+            '5': 'h-[64px] w-[64px] text-[24px]',
+            '6': 'h-[80px] w-[80px] text-[28px]',
+            '7': 'h-[96px] w-[96px] text-[28px]',
+            '8': 'h-[128px] w-[128px] text-[35px]',
+            '9': 'h-[160px] w-[160px] text-[60px]',
+        },
+        scaling: __assign({}, constants_1.scalingVariants),
+        color: (0, constants_1.primaryColorStyle)(),
+    },
+    defaultVariants: {
+        radius: 'full',
+        color: 'red',
+        size: '3',
+    },
+});
+var Avatar = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, fallbackClassName = _a.fallbackClassName, radius = _a.radius, scaling = _a.scaling, size = _a.size, fallbackText = _a.fallbackText, imagePath = _a.imagePath, alt = _a.alt, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, title = _a.title, _d = _a.delayMs, delayMs = _d === void 0 ? 300 : _d, props = __rest(_a, ["className", "fallbackClassName", "radius", "scaling", "size", "fallbackText", "imagePath", "alt", "appearance", "color", "ariaLabel", "ariaLabelledby", "title", "delayMs"]);
+    var imgAltText = alt || ariaLabel || fallbackText || 'Avatar Image';
+    return (<AvatarPrimitive.Root className={(0, utils_1.cn)("inline-flex select-none items-center justify-center overflow-hidden align-middle", AvatarVariants({ radius: radius, scaling: scaling, size: size, color: color }), (0, constants_1.appearanceStyle)(appearance, color, false), className)} {...props} ref={ref} role="img" aria-label={ariaLabel || imgAltText} aria-labelledby={ariaLabelledby} title={title || imgAltText} tabIndex={0}>
+        <AvatarPrimitive.Image className="h-full w-full border-none object-cover" src={imagePath} alt={imgAltText} title={title || imgAltText}/>
+        <AvatarPrimitive.Fallback className={(0, utils_1.cn)("leading-1 flex h-full w-full items-center justify-center", className)} delayMs={delayMs} aria-hidden="true">
+          {fallbackText}
+        </AvatarPrimitive.Fallback>
+      </AvatarPrimitive.Root>);
+});
+Avatar.displayName = 'Avatar';
+exports.default = Avatar;

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

@@ -0,0 +1,80 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var BadgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-center transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 w-fit', {
+    variants: {
+        radius: __assign({}, constants_1.radiusVariants['base']),
+        size: {
+            small: 'text-xs h-[20px] px-1.5 py-0.5',
+            medium: 'text-xs h-[24px] px-2 py-1',
+            large: 'text-sm h-[28px] px-2.5 py-1',
+        },
+        scaling: __assign({}, constants_1.scalingVariants),
+        weight: __assign({}, constants_1.weightVariants),
+        color: (0, constants_1.primaryColorStyle)(),
+    },
+    defaultVariants: {
+        radius: 'medium',
+        size: 'medium',
+        scaling: '100%',
+        weight: 'medium',
+        color: 'red',
+    },
+});
+var Badge = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, children = _a.children, radius = _a.radius, scaling = _a.scaling, weight = _a.weight, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "scaling", "weight", "size", "color", "appearance"]);
+    var badgeClassName = (0, utils_1.cn)(BadgeVariants({ radius: radius, scaling: scaling, weight: weight, size: size, color: color }), (0, constants_1.appearanceStyle)(appearance, color, false), className);
+    return (<div ref={ref} className={badgeClassName} {...props}>
+        {children}
+      </div>);
+});
+Badge.displayName = 'Badge';
+exports.default = Badge;

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

@@ -0,0 +1,64 @@
+"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 __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 });
+var react_chartjs_2_1 = require("react-chartjs-2");
+var auto_1 = require("chart.js/auto");
+var constants_1 = require("lib/constants");
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_2 = require("lib/color/constants");
+var useDarkMode_1 = require("lib/utils/useDarkMode");
+auto_1.Chart.register(auto_1.CategoryScale, auto_1.LinearScale, auto_1.BarElement, auto_1.Tooltip, auto_1.Legend);
+var barChartVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        scaling: __assign({}, constants_1.scalingVariants),
+    },
+    defaultVariants: {
+        scaling: '100%',
+    },
+});
+var BarChart = function (_a) {
+    var className = _a.className, title = _a.title, datasets = _a.datasets, labels = _a.labels, scaling = _a.scaling, legend = _a.legend, width = _a.width, height = _a.height, indexAxis = _a.indexAxis, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "datasets", "labels", "scaling", "legend", "width", "height", "indexAxis", "appearance", "isColorMixed"]);
+    var _d = (0, useDarkMode_1.useDarkMode)(), isDark = _d[0], defaultScales = _d[1];
+    datasets.forEach(function (dataset, index) {
+        if (!dataset.backgroundColor) {
+            if (isColorMixed) {
+                datasets[index] = __assign(__assign({}, dataset), { backgroundColor: appearance === 'solid' ? constants_2.chartColorList.mixed : constants_2.chartAlphaColorList.mixed, borderColor: constants_2.chartColorList.mixed });
+            }
+            else {
+                datasets[index] = __assign(__assign({}, dataset), { backgroundColor: appearance === 'solid' ? constants_2.chartColorList.sorting : constants_2.chartAlphaColorList.sorting, borderColor: constants_2.chartColorList.sorting });
+            }
+        }
+    });
+    return (<react_chartjs_2_1.Bar data={{ labels: labels, datasets: datasets }} options={{
+            plugins: {
+                title: title,
+                legend: legend,
+            },
+            indexAxis: indexAxis,
+            scales: __assign({}, defaultScales.linescale),
+        }} className={(0, utils_1.cn)(barChartVariants({ scaling: scaling }), className)} width={width} height={height} {...props}/>);
+};
+BarChart.displayName = 'BarChart';
+exports.default = BarChart;

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

@@ -0,0 +1,80 @@
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BubbleChart = void 0;
+var react_1 = __importDefault(require("react"));
+var react_chartjs_2_1 = require("react-chartjs-2");
+var auto_1 = require("chart.js/auto");
+var constants_1 = require("lib/constants");
+var class_variance_authority_1 = require("class-variance-authority");
+var constants_2 = require("lib/color/constants");
+var chartjs_plugin_datalabels_1 = __importDefault(require("chartjs-plugin-datalabels"));
+var useDarkMode_1 = require("lib/utils/useDarkMode");
+var utils_1 = require("lib/utils/utils");
+auto_1.Chart.register(auto_1.LinearScale, auto_1.PointElement, auto_1.Tooltip, auto_1.Legend, auto_1.plugins, chartjs_plugin_datalabels_1.default);
+auto_1.Chart.defaults.set('plugins.datalabels', {
+    display: false,
+});
+var bubbleChartVariants = (0, class_variance_authority_1.cva)('', {
+    variants: {
+        scaling: __assign({}, constants_1.scalingVariants),
+    },
+    defaultVariants: {
+        scaling: '100%',
+    },
+});
+var BubbleChart = function (_a) {
+    var className = _a.className, title = _a.title, legend = _a.legend, datalabels = _a.datalabels, datasets = _a.datasets, scaling = _a.scaling, width = _a.width, height = _a.height, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "legend", "datalabels", "datasets", "scaling", "width", "height", "appearance", "isColorMixed"]);
+    var _d = (0, useDarkMode_1.useDarkMode)(), isDark = _d[0], defaultScales = _d[1];
+    var getChartColor = function (isColorMixed, appearance) {
+        if (appearance === 'solid') {
+            return isColorMixed ? constants_2.chartColorList.mixed : constants_2.chartColorList.sorting;
+        }
+        if (appearance === 'soft') {
+            return isColorMixed ? constants_2.chartAlphaColorList.mixed : constants_2.chartAlphaColorList.sorting;
+        }
+    };
+    datasets.forEach(function (dataset, index) {
+        var ChartColor = getChartColor(isColorMixed, appearance);
+        var BorderColor = getChartColor(isColorMixed, 'solid');
+        if (!ChartColor || !BorderColor)
+            return;
+        dataset.backgroundColor = ChartColor[index];
+        dataset.borderColor = BorderColor[index];
+    });
+    return (<react_chartjs_2_1.Bubble data={{ datasets: datasets }} options={{
+            plugins: {
+                title: title,
+                legend: legend,
+                datalabels: datalabels,
+            },
+            scales: __assign({}, defaultScales.linescale),
+        }} className={(0, utils_1.cn)(bubbleChartVariants({ scaling: scaling }), className)} width={width} height={height} {...props}/>);
+};
+exports.BubbleChart = BubbleChart;
+exports.BubbleChart.displayName = 'BubbleChart';
+exports.default = exports.BubbleChart;

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

@@ -0,0 +1,83 @@
+"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.Button = void 0;
+var react_1 = __importStar(require("react"));
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("lib/utils/utils");
+var constants_1 = require("lib/constants");
+var buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center w-fit transition-colors focus:outline-none hover:cursor-pointer\n  disabled:cursor-not-allowed disabled:bg-slate-3 disabled:text-slate-8 justify-center", {
+    variants: {
+        radius: __assign({}, constants_1.radiusVariants['base']),
+        size: {
+            'x-small': 'text-xs min-w-[36px] h-[20px] px-1.5',
+            small: 'text-xs min-w-[40px] h-[24px] px-2',
+            medium: 'text-sm min-w-[50px] h-[32px] px-3',
+            large: 'text-base min-w-[62px] h-[40px] px-4',
+            'x-large': 'text-lg min-w-[82px] h-[48px] px-6',
+        },
+        scaling: __assign({}, constants_1.scalingVariants),
+        weight: __assign({}, constants_1.weightVariants),
+        color: (0, constants_1.primaryColorStyle)(),
+    },
+    defaultVariants: {
+        radius: 'medium',
+        scaling: '100%',
+        weight: 'medium',
+        color: 'red',
+        size: 'medium',
+    },
+});
+exports.Button = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, children = _a.children, radius = _a.radius, scaling = _a.scaling, size = _a.size, weight = _a.weight, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "scaling", "size", "weight", "color", "appearance"]);
+    var buttonClassName = (0, utils_1.cn)(buttonVariants({ radius: radius, scaling: scaling, size: size, weight: weight, color: color }), (0, constants_1.appearanceStyle)(appearance, color, true), className);
+    return (<button ref={ref} className={buttonClassName} {...props}>
+        {children}
+      </button>);
+});
+exports.Button.displayName = 'Button';
+exports.default = exports.Button;

package/dist/cjs/lib/components/Callout/CalloutIcon.jsx

@@ -0,0 +1,88 @@
+"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.CalloutIcon = 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 react_icons_1 = require("@radix-ui/react-icons");
+var constants_1 = require("lib/constants");
+var utils_1 = require("lib/utils/utils");
+var CalloutRoot_1 = require("./CalloutRoot");
+var calloutIconVariants = (0, class_variance_authority_1.cva)('flex items-center text-slate-12 dark:text-slateDark-12', {
+    variants: {
+        scaling: __assign({}, constants_1.scalingVariants),
+        size: {
+            small: 'h-5 mr-2',
+            medium: 'h-5 mr-3',
+            large: 'h-6 mr-4',
+        },
+        color: {
+            danger: 'text-red-11 dark:text-redDark-11',
+            warning: 'text-amber-11 dark:text-amberDark-11',
+            success: 'text-green-11 dark:text-greenDark-11',
+            information: 'text-sky-11 dark:text-skyDark-11',
+        },
+    },
+    defaultVariants: {
+        scaling: '100%',
+        size: 'medium',
+        color: 'information',
+    },
+});
+exports.CalloutIcon = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, iconType = _a.iconType, props = __rest(_a, ["children", "className", "iconType"]);
+    var _b = (0, CalloutRoot_1.useCalloutContext)(), scaling = _b.scaling, size = _b.size, color = _b.color;
+    return (<themes_1.Callout.Icon ref={ref} className={(0, utils_1.cn)(calloutIconVariants({ color: color, size: size, scaling: scaling }), className)} {...props}>
+      {iconType === 'danger' && <react_icons_1.ExclamationTriangleIcon />}
+      {iconType === 'warning' && <react_icons_1.LockClosedIcon />}
+      {iconType === 'success' && <react_icons_1.CheckCircledIcon />}
+      {iconType === 'information' && <react_icons_1.InfoCircledIcon />}
+      {children}
+    </themes_1.Callout.Icon>);
+});
+exports.CalloutIcon.displayName = 'Callout.Icon';

package/dist/cjs/lib/components/Callout/CalloutRoot.jsx

@@ -0,0 +1,102 @@
+"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.CalloutRoot = exports.useCalloutContext = 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 calloutVariants = (0, class_variance_authority_1.cva)('flex w-fit max-w-[600px]', {
+    variants: {
+        radius: __assign({}, constants_1.radiusVariants['large']),
+        size: {
+            small: 'min-h-[44px] p-3',
+            medium: 'min-h-[52px] p-4',
+            large: 'min-h-[72px] p-6',
+        },
+        scaling: __assign({}, constants_1.scalingVariants),
+        color: {
+            danger: 'bg-redA-3 dark:bg-redDarkA-3',
+            warning: 'bg-amberA-3 dark:bg-amberDarkA-3',
+            success: 'bg-greenA-3 dark:bg-greenDarkA-3',
+            information: 'bg-skyA-3 dark:bg-skyDarkA-3',
+        },
+    },
+    defaultVariants: {
+        radius: 'medium',
+        scaling: '100%',
+        color: 'information',
+        size: 'medium',
+    },
+});
+var CalloutContext = (0, react_1.createContext)({
+    size: 'medium',
+    scaling: '100%',
+    color: null,
+});
+var useCalloutContext = function () {
+    return (0, react_1.useContext)(CalloutContext);
+};
+exports.useCalloutContext = useCalloutContext;
+exports.CalloutRoot = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, _b = _a.color, color = _b === void 0 ? 'information' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'soft' : _c, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "color", "appearance"]);
+    var colorMap = {
+        danger: 'red',
+        information: 'sky',
+        success: 'green',
+        warning: 'amber',
+    };
+    var calloutClassName = (0, utils_1.cn)(calloutVariants({ radius: radius, scaling: scaling, size: size, color: color }), (0, constants_1.appearanceStyle)(appearance, colorMap[color], false), className);
+    var contextValue = (0, react_1.useMemo)(function () { return ({ size: size, scaling: scaling, color: color }); }, [size, scaling, color]);
+    return (<CalloutContext.Provider value={contextValue}>
+        <themes_1.Callout.Root ref={ref} {...props} className={calloutClassName}>
+          {children}
+        </themes_1.Callout.Root>
+      </CalloutContext.Provider>);
+});
+exports.CalloutRoot.displayName = 'Callout.Root';