@lotte-innovate/ui-component-test 0.2.72 → 0.2.74

package/dist/lib/components/Dialog/DialogTrigger.mjs

@@ -1,2 +1,3 @@
+"use client";
 import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Dialog as t}from"@radix-ui/themes";var n=function(){return n=Object.assign||function(r){for(var e,t=1,n=arguments.length;t<n;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},n.apply(this,arguments)},o=function(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(t[n[o]]=r[n[o]])}return t},a=e((function(e,a){var i=e.children,c=e.className,l=o(e,["children","className"]);return r(t.Trigger,n({ref:a,className:c},l,{children:i}))}));a.displayName="Dialog.Trigger";export{a as DialogTrigger};
 //# sourceMappingURL=DialogTrigger.mjs.map

package/dist/lib/components/Dialog/DialogTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTrigger.mjs","sources":["../../../lib/components/Dialog/DialogTrigger.js"],"sourcesContent":["var __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef } from 'react';\nimport { Dialog as DialogTheme } from '@radix-ui/themes';\nexport var DialogTrigger = forwardRef(function (_a, ref) {\n    var children = _a.children, className = _a.className, props = __rest(_a, [\"children\", \"className\"]);\n    return (_jsx(DialogTheme.Trigger, __assign({ ref: ref, className: className }, props, { children: children })));\n});\nDialogTrigger.displayName = 'Dialog.Trigger';\n"],"names":["__assign","Object","assign","t","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","this","__rest","e","indexOf","getOwnPropertySymbols","propertyIsEnumerable","DialogTrigger","forwardRef","_a","ref","children","className","props","_jsx","DialogTheme","Trigger","displayName"],"mappings":"qHAAA,IAAIA,EAAsC,WAStC,OARAA,EAAWC,OAAOC,QAAU,SAASC,GACjC,IAAK,IAAIC,EAAGC,EAAI,EAAGC,EAAIC,UAAUC,OAAQH,EAAIC,EAAGD,IAE5C,IAAK,IAAII,KADTL,EAAIG,UAAUF,GACOJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,KACzDN,EAAEM,GAAKL,EAAEK,IAEjB,OAAON,CACf,EACWH,EAASa,MAAMC,KAAMP,UAChC,EACIQ,EAAkC,SAAUX,EAAGY,GAC/C,IAAIb,EAAI,CAAA,EACR,IAAK,IAAIM,KAAKL,EAAOH,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,IAAMO,EAAEC,QAAQR,GAAK,IAC9EN,EAAEM,GAAKL,EAAEK,IACb,GAAS,MAALL,GAAqD,mBAAjCH,OAAOiB,sBACtB,KAAIb,EAAI,EAAb,IAAgBI,EAAIR,OAAOiB,sBAAsBd,GAAIC,EAAII,EAAED,OAAQH,IAC3DW,EAAEC,QAAQR,EAAEJ,IAAM,GAAKJ,OAAOS,UAAUS,qBAAqBP,KAAKR,EAAGK,EAAEJ,MACvEF,EAAEM,EAAEJ,IAAMD,EAAEK,EAAEJ,IAF4B,CAItD,OAAOF,CACX,EAIWiB,EAAgBC,GAAW,SAAUC,EAAIC,GAChD,IAAIC,EAAWF,EAAGE,SAAUC,EAAYH,EAAGG,UAAWC,EAAQX,EAAOO,EAAI,CAAC,WAAY,cACtF,OAAQK,EAAKC,EAAYC,QAAS7B,EAAS,CAAEuB,IAAKA,EAAKE,UAAWA,GAAaC,EAAO,CAAEF,SAAUA,IACtG,IACAJ,EAAcU,YAAc"}
+{"version":3,"file":"DialogTrigger.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/lib/components/Dialog/index.js

@@ -1,19 +1,19 @@
-import { DialogRoot } from './DialogRoot';
-import { DialogTrigger } from './DialogTrigger';
-import { DialogContent } from './DialogContent';
-import { DialogTitle } from './DialogTitle';
-import { DialogDescription } from './DialogDescription';
-import { DialogSlot } from './DialogSlot';
-import { DialogCancel } from './DialogCancel';
-import { DialogAction } from './DialogAction';
+import { DialogRoot as Root } from './DialogRoot';
+import { DialogTrigger as Trigger } from './DialogTrigger';
+import { DialogContent as Content } from './DialogContent';
+import { DialogTitle as Title } from './DialogTitle';
+import { DialogDescription as Description } from './DialogDescription';
+import { DialogSlot as Slot } from './DialogSlot';
+import { DialogCancel as Cancel } from './DialogCancel';
+import { DialogAction as Action } from './DialogAction';
 var Dialog = {
-    Root: DialogRoot,
-    Trigger: DialogTrigger,
-    Content: DialogContent,
-    Title: DialogTitle,
-    Description: DialogDescription,
-    Slot: DialogSlot,
-    Cancel: DialogCancel,
-    Action: DialogAction,
+    Root: Root,
+    Trigger: Trigger,
+    Content: Content,
+    Title: Title,
+    Description: Description,
+    Slot: Slot,
+    Cancel: Cancel,
+    Action: Action,
 };
 export default Dialog;

package/dist/lib/components/Dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../lib/components/Dialog/index.js"],"sourcesContent":["import { DialogRoot } from './DialogRoot';\nimport { DialogTrigger } from './DialogTrigger';\nimport { DialogContent } from './DialogContent';\nimport { DialogTitle } from './DialogTitle';\nimport { DialogDescription } from './DialogDescription';\nimport { DialogSlot } from './DialogSlot';\nimport { DialogCancel } from './DialogCancel';\nimport { DialogAction } from './DialogAction';\nvar Dialog = {\n    Root: DialogRoot,\n    Trigger: DialogTrigger,\n    Content: DialogContent,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Slot: DialogSlot,\n    Cancel: DialogCancel,\n    Action: DialogAction,\n};\nexport default Dialog;\n"],"names":["Dialog","Root","DialogRoot","Trigger","DialogTrigger","Content","DialogContent","Title","DialogTitle","Description","DialogDescription","Slot","DialogSlot","Cancel","DialogCancel","Action","DialogAction"],"mappings":"oZAQG,IAACA,EAAS,CACTC,KAAMC,EACNC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,YAAaC,EACbC,KAAMC,EACNC,OAAQC,EACRC,OAAQC"}
+{"version":3,"file":"index.mjs","sources":["../../../lib/components/Dialog/index.js"],"sourcesContent":["import { DialogRoot as Root } from './DialogRoot';\nimport { DialogTrigger as Trigger } from './DialogTrigger';\nimport { DialogContent as Content } from './DialogContent';\nimport { DialogTitle as Title } from './DialogTitle';\nimport { DialogDescription as Description } from './DialogDescription';\nimport { DialogSlot as Slot } from './DialogSlot';\nimport { DialogCancel as Cancel } from './DialogCancel';\nimport { DialogAction as Action } from './DialogAction';\nvar Dialog = {\n    Root: Root,\n    Trigger: Trigger,\n    Content: Content,\n    Title: Title,\n    Description: Description,\n    Slot: Slot,\n    Cancel: Cancel,\n    Action: Action,\n};\nexport default Dialog;\n"],"names":["Dialog","Root","Trigger","Content","Title","Description","Slot","Cancel","Action"],"mappings":"oZAQG,IAACA,EAAS,CACTC,KAAMA,EACNC,QAASA,EACTC,QAASA,EACTC,MAAOA,EACPC,YAAaA,EACbC,KAAMA,EACNC,OAAQA,EACRC,OAAQA"}

package/dist/lib/components/DoughnutChart/index.d.ts

@@ -7,10 +7,12 @@ export interface DoughnutChartProps extends VariantProps<typeof doughnutVariants
     className?: string;
     title?: IChartTitle;
     legend?: IChartLegend;
-    datasets: IChartDatasets[] & {
+    datasets: (IChartDatasets & {
         data: number[];
-    }[];
+    })[];
     datalabels?: IChartDataLabels;
+    width?: number;
+    height?: number;
 }
 declare const doughnutVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;

package/dist/lib/components/DoughnutChart/index.js

@@ -52,7 +52,7 @@ var DoughnutChart = function (_a) {
         }
     };
     datasets.forEach(function (dataset, index) {
-        datasets[index] = __assign(__assign({}, dataset), { backgroundColor: getChartColor(isColorMixed, appearance), borderColor: getChartColor(isColorMixed, 'solid') });
+        datasets[index] = __assign({ backgroundColor: getChartColor(isColorMixed, appearance), borderColor: getChartColor(isColorMixed, 'solid') }, dataset);
     });
     return (_jsx(Doughnut, __assign({ data: { labels: labels, datasets: datasets }, options: {
             plugins: {

package/dist/lib/components/DoughnutChart/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime";import{Doughnut as a}from"react-chartjs-2";import{Chart as r,ArcElement as e,Tooltip as o,Legend as s,plugins as l}from"chart.js/auto";import i from"chartjs-plugin-datalabels";import{cn as n}from"../../utils/utils.mjs";import{cva as c}from"class-variance-authority";import{scalingVariants as p}from"../../constants.mjs";import{chartColorList as d,chartAlphaColorList as m}from"../../color/constants.mjs";var f=function(){return f=Object.assign||function(t){for(var a,r=1,e=arguments.length;r<e;r++)for(var o in a=arguments[r])Object.prototype.hasOwnProperty.call(a,o)&&(t[o]=a[o]);return t},f.apply(this,arguments)},u=function(t,a){var r={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&a.indexOf(e)<0&&(r[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(e=Object.getOwnPropertySymbols(t);o<e.length;o++)a.indexOf(e[o])<0&&Object.prototype.propertyIsEnumerable.call(t,e[o])&&(r[e[o]]=t[e[o]])}return r};r.register(e,o,s,l,i),r.defaults.set("plugins.datalabels",{display:!1});var g=c("",{variants:{scaling:f({},p)},defaultVariants:{scaling:"100%"}}),b=function(r){var e=r.labels,o=r.title,s=r.legend,l=r.datasets,i=r.datalabels,c=r.scaling,p=r.className,b=r.appearance,y=void 0===b?"solid":b,j=r.isColorMixed,v=void 0===j||j,h=u(r,["labels","title","legend","datasets","datalabels","scaling","className","appearance","isColorMixed"]),O=function(t,a){return"solid"===a?t?d.mixed:d.sorting:"soft"===a?t?m.mixed:m.sorting:void 0};return l.forEach((function(t,a){l[a]=f(f({},t),{backgroundColor:O(v,y),borderColor:O(v,"solid")})})),t(a,f({data:{labels:e,datasets:l},options:{plugins:{title:o,legend:s,datalabels:i}},className:n(g({scaling:c}),p)},h))};b.displayName="DoughnutChart";export{b as default};
+import{jsx as t}from"react/jsx-runtime";import{Doughnut as a}from"react-chartjs-2";import{Chart as r,ArcElement as e,Tooltip as o,Legend as s,plugins as l}from"chart.js/auto";import i from"chartjs-plugin-datalabels";import{cn as n}from"../../utils/utils.mjs";import{cva as c}from"class-variance-authority";import{scalingVariants as p}from"../../constants.mjs";import{chartColorList as d,chartAlphaColorList as m}from"../../color/constants.mjs";var f=function(){return f=Object.assign||function(t){for(var a,r=1,e=arguments.length;r<e;r++)for(var o in a=arguments[r])Object.prototype.hasOwnProperty.call(a,o)&&(t[o]=a[o]);return t},f.apply(this,arguments)},u=function(t,a){var r={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&a.indexOf(e)<0&&(r[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(e=Object.getOwnPropertySymbols(t);o<e.length;o++)a.indexOf(e[o])<0&&Object.prototype.propertyIsEnumerable.call(t,e[o])&&(r[e[o]]=t[e[o]])}return r};r.register(e,o,s,l,i),r.defaults.set("plugins.datalabels",{display:!1});var g=c("",{variants:{scaling:f({},p)},defaultVariants:{scaling:"100%"}}),b=function(r){var e=r.labels,o=r.title,s=r.legend,l=r.datasets,i=r.datalabels,c=r.scaling,p=r.className,b=r.appearance,y=void 0===b?"solid":b,j=r.isColorMixed,v=void 0===j||j,h=u(r,["labels","title","legend","datasets","datalabels","scaling","className","appearance","isColorMixed"]),O=function(t,a){return"solid"===a?t?d.mixed:d.sorting:"soft"===a?t?m.mixed:m.sorting:void 0};return l.forEach((function(t,a){l[a]=f({backgroundColor:O(v,y),borderColor:O(v,"solid")},t)})),t(a,f({data:{labels:e,datasets:l},options:{plugins:{title:o,legend:s,datalabels:i}},className:n(g({scaling:c}),p)},h))};b.displayName="DoughnutChart";export{b as default};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/components/Editor/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { IAllProps } from '@tinymce/tinymce-react';
 import { VariantProps } from 'class-variance-authority';
-import 'tinymce/skins/ui/oxide/skin.css';
 export interface EditorProps extends VariantProps<typeof editorVariants> {
     language?: 'ko_KR' | 'zh_CN' | 'ja' | 'it' | 'vi';
 }

package/dist/lib/components/Editor/index.js

@@ -10,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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)
@@ -21,18 +57,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, forwardRef, useEffect, useRef, } from 'react';
 import { Editor as EditorUI } from '@tinymce/tinymce-react';
 import { cva } from 'class-variance-authority';
 import { loadTinymce } from '../../../lib/utils/useLoadTinyMCE';
+import { useDarkMode } from '../../../lib/utils/useDarkMode';
 import { scalingVariants, radiusVariants } from '../../../lib/constants';
+import { Spinner } from '../../../lib/components/Spinner/index';
 import { cn } from '../../../lib/utils/utils';
 import { useTheme } from '../../../lib/theme';
 import { marked } from 'marked';
-import 'tinymce/skins/ui/oxide/skin.css';
+// import 'tinymce/skins/ui/oxide/skin.css';
+// import 'tinymce/skins/ui/oxide-dark/skin.css';
 import contentUiSkinCss from '!!raw-loader!tinymce/skins/ui/oxide/content.css';
 import contentCss from '!!raw-loader!tinymce/skins/content/default/content.css';
+import contentUiDarkSkinCss from '!!raw-loader!tinymce/skins/ui/oxide-dark/content.css';
+import contentDarkCss from '!!raw-loader!tinymce/skins/content/dark/content.css';
 var editorVariants = cva('', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -52,13 +93,45 @@ var editorVariants = cva('', {
 export var Editor = forwardRef(function (_a, ref) {
     var className = _a.className, size = _a.size, scaling = _a.scaling, radius = _a.radius, init = _a.init, _b = _a.language, language = _b === void 0 ? 'en' : _b, props = __rest(_a, ["className", "size", "scaling", "radius", "init", "language"]);
     var _c = useState(false), isClient = _c[0], setIsClient = _c[1];
+    var _d = useDarkMode(), isDark = _d[0], defaultScales = _d[1];
     var editorRef = useRef(null);
+    var _e = useState(0), editorKey = _e[0], setEditorKey = _e[1];
+    var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
+    var _g = useState(false), isEditorInit = _g[0], setIsEditorInit = _g[1];
     var theme = useTheme().theme;
     var editorStyle = {
         radius: radius !== null && radius !== void 0 ? radius : theme.themeRadius,
         scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
         size: size,
     };
+    useEffect(function () {
+        var loadSkin = function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!isDark) return [3 /*break*/, 2];
+                        return [4 /*yield*/, import('tinymce/skins/ui/oxide-dark/skin.css')];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, import('tinymce/skins/ui/oxide/skin.css')];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4:
+                        // 에디터를 다시 로드하기 위해 key 변경
+                        setEditorKey(function (prevKey) { return prevKey + 1; });
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadSkin();
+    }, [isDark]);
+    var getContentStyle = function () {
+        var baseStyle = "".concat(contentUiSkinCss, "\n").concat(contentCss, "\n body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }");
+        var darkStyle = "".concat(contentUiDarkSkinCss, "\n").concat(contentDarkCss, "\n body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }");
+        return isDark ? baseStyle : baseStyle;
+    };
     var radiusTheme = '8px';
     if (editorStyle.radius === 'none')
         radiusTheme = '0px';
@@ -84,32 +157,37 @@ export var Editor = forwardRef(function (_a, ref) {
     if (!isClient) {
         return null;
     }
-    return (_jsx("div", { className: cn(editorVariants(editorStyle), className), ref: ref, children: _jsx(EditorUI, __assign({ onInit: function (evt, editor) { return (editorRef.current = editor); }, init: __assign({ language: language, width: '100%', height: '100%', promotion: false, plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap accordion', menubar: 'file edit view insert format tools table', toolbar: 'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl', autosave_ask_before_unload: true, autosave_interval: '30s', autosave_restore_when_empty: false, autosave_retention: '2m', image_advtab: true, image_caption: true, quickbars_selection_toolbar: '', toolbar_mode: 'sliding', skin: false, content_css: false, content_style: "".concat(contentUiSkinCss, "\n").concat(contentCss, "\n body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }"), setup: function (editor) {
-                    editor.ui.registry.addButton('inlinecode', {
-                        icon: 'sourcecode',
-                        tooltip: 'Inline code',
-                        onAction: function () {
-                            editor.formatter.toggle('code');
-                        },
-                    });
-                    editor.on('init', function () {
-                        editor.formatter.register('code', {
-                            inline: 'code',
-                            remove: 'all',
+    var handleEditorInit = function (evt, editor) {
+        editorRef.current = editor;
+        setIsLoading(false);
+        setIsEditorInit(true);
+    };
+    return (_jsxs("div", { className: cn(editorVariants(editorStyle), 'flex items-center justify-center', className), ref: ref, children: [isLoading && _jsx(Spinner, {}), isEditorInit && (_jsx(EditorUI, __assign({ onInit: handleEditorInit, init: __assign({ language: language, width: '100%', height: '100%', promotion: false, plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap accordion', menubar: 'file edit view insert format tools table', toolbar: 'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl', autosave_ask_before_unload: true, autosave_interval: '30s', autosave_restore_when_empty: false, autosave_retention: '2m', image_advtab: true, image_caption: true, quickbars_selection_toolbar: '', toolbar_mode: 'sliding', skin: false, content_css: false, content_style: getContentStyle(), setup: function (editor) {
+                        editor.ui.registry.addButton('inlinecode', {
+                            icon: 'sourcecode',
+                            tooltip: 'Inline code',
+                            onAction: function () {
+                                editor.formatter.toggle('code');
+                            },
+                        });
+                        editor.on('init', function () {
+                            editor.formatter.register('code', {
+                                inline: 'code',
+                                remove: 'all',
+                            });
+                        });
+                        editor.ui.registry.addButton('markdown', {
+                            text: 'Markdown',
+                            onAction: function () {
+                                var content = editor.getContent({ format: 'text' });
+                                var html = marked(content);
+                                editor.setContent(html);
+                            },
+                        });
+                        editor.on('init', function () {
+                            editor.getContainer().style.borderRadius = radiusTheme;
                         });
-                    });
-                    editor.ui.registry.addButton('markdown', {
-                        text: 'Markdown',
-                        onAction: function () {
-                            var content = editor.getContent({ format: 'text' });
-                            var html = marked(content);
-                            editor.setContent(html);
-                        },
-                    });
-                    editor.on('init', function () {
-                        editor.getContainer().style.borderRadius = radiusTheme;
-                    });
-                } }, init) }, props)) }));
+                    } }, init) }, props), editorKey))] }));
 });
 Editor.displayName = 'Editor';
 export default Editor;

package/dist/lib/components/Editor/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as n,useRef as i,useEffect as o}from"react";import{Editor as r}from"@tinymce/tinymce-react";import{cva as a}from"class-variance-authority";import{loadTinymce as s}from"../../utils/useLoadTinyMCE.mjs";import{radiusVariants as l,scalingVariants as c}from"../../constants.mjs";import{cn as u}from"../../utils/utils.mjs";import{useTheme as m}from"../../theme/ThemeProvider.mjs";import{marked as d}from"marked";import"tinymce/skins/ui/oxide/skin.css";import p from"!!raw-loader!tinymce/skins/ui/oxide/content.css";import f from"!!raw-loader!tinymce/skins/content/default/content.css";var g=function(){return g=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},g.apply(this,arguments)},v=function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++)t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}return n},b=a("",{variants:{radius:g({},l.base),scaling:g({},c),size:{small:"w-[650px] h-[350px]",medium:"w-[700px] h-[400px]",large:"w-[750px] h-[450px]"}},defaultVariants:{radius:"medium",scaling:"100%",size:"medium"}}),h=t((function(t,a){var l=t.className,c=t.size,h=t.scaling,y=t.radius,k=t.init,x=t.language,w=void 0===x?"en":x,_=v(t,["className","size","scaling","radius","init","language"]),O=n(!1),j=O[0],N=O[1],z=i(null),C=m().theme,P={radius:null!=y?y:C.themeRadius,scaling:null!=h?h:C.themeScaling,size:c},S="8px";return"none"===P.radius&&(S="0px"),"small"===P.radius&&(S="4px"),"large"===P.radius&&(S="12px"),"full"===P.radius&&(S="16px"),o((function(){s().then((function(){N(!0)}))}),[]),o((function(){if(z.current){var e=z.current.getContainer();e&&(e.style.borderRadius="".concat(S))}}),[S]),j?e("div",{className:u(b(P),l),ref:a,children:e(r,g({onInit:function(e,t){return z.current=t},init:g({language:w,width:"100%",height:"100%",promotion:!1,plugins:"preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap accordion",menubar:"file edit view insert format tools table",toolbar:"undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",autosave_ask_before_unload:!0,autosave_interval:"30s",autosave_restore_when_empty:!1,autosave_retention:"2m",image_advtab:!0,image_caption:!0,quickbars_selection_toolbar:"",toolbar_mode:"sliding",skin:!1,content_css:!1,content_style:"".concat(p,"\n").concat(f,"\n body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }"),setup:function(e){e.ui.registry.addButton("inlinecode",{icon:"sourcecode",tooltip:"Inline code",onAction:function(){e.formatter.toggle("code")}}),e.on("init",(function(){e.formatter.register("code",{inline:"code",remove:"all"})})),e.ui.registry.addButton("markdown",{text:"Markdown",onAction:function(){var t=e.getContent({format:"text"}),n=d(t);e.setContent(n)}}),e.on("init",(function(){e.getContainer().style.borderRadius=S}))}},k)},_))}):null}));h.displayName="Editor";export{h as Editor,h as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,useState as r,useRef as i,useEffect as o}from"react";import{Editor as a}from"@tinymce/tinymce-react";import{cva as s}from"class-variance-authority";import{loadTinymce as c}from"../../utils/useLoadTinyMCE.mjs";import{useDarkMode as l}from"../../utils/useDarkMode.mjs";import{radiusVariants as u,scalingVariants as m}from"../../constants.mjs";import{Spinner as d}from"../Spinner/index.mjs";import{cn as f}from"../../utils/utils.mjs";import{useTheme as p}from"../../theme/ThemeProvider.mjs";import{marked as h}from"marked";import y from"!!raw-loader!tinymce/skins/ui/oxide/content.css";import b from"!!raw-loader!tinymce/skins/content/default/content.css";import"!!raw-loader!tinymce/skins/ui/oxide-dark/content.css";import"!!raw-loader!tinymce/skins/content/dark/content.css";var v=function(){return v=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},v.apply(this,arguments)},g=function(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((r=r.apply(e,t||[])).next())}))},k=function(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(s){return function(c){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;o&&(o=0,s[0]&&(a=0)),a;)try{if(n=1,r&&(i=2&s[0]?r.return:s[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,s[1])).done)return i;switch(r=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,r=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(6===s[0]&&a.label<i[1]){a.label=i[1],i=s;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(s);break}i[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(e){s=[6,e],r=0}finally{n=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}},w=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n},x=s("",{variants:{radius:v({},u.base),scaling:v({},m),size:{small:"w-[650px] h-[350px]",medium:"w-[700px] h-[400px]",large:"w-[750px] h-[450px]"}},defaultVariants:{radius:"medium",scaling:"100%",size:"medium"}}),_=n((function(n,s){var u=n.className,m=n.size,_=n.scaling,j=n.radius,O=n.init,S=n.language,N=void 0===S?"en":S,z=w(n,["className","size","scaling","radius","init","language"]),P=r(!1),C=P[0],E=P[1],R=l()[0],I=i(null),M=r(0),T=M[0],A=M[1],B=r(!0),H=B[0],q=B[1],D=r(!1),G=D[0],K=D[1],L=p().theme,V={radius:null!=j?j:L.themeRadius,scaling:null!=_?_:L.themeScaling,size:m};o((function(){g(void 0,void 0,void 0,(function(){return k(this,(function(e){switch(e.label){case 0:return R?[4,import("tinymce/skins/ui/oxide-dark/skin.css")]:[3,2];case 1:return e.sent(),[3,4];case 2:return[4,import("tinymce/skins/ui/oxide/skin.css")];case 3:e.sent(),e.label=4;case 4:return A((function(e){return e+1})),[2]}}))}))}),[R]);var F="8px";if("none"===V.radius&&(F="0px"),"small"===V.radius&&(F="4px"),"large"===V.radius&&(F="12px"),"full"===V.radius&&(F="16px"),o((function(){c().then((function(){E(!0)}))}),[]),o((function(){if(I.current){var e=I.current.getContainer();e&&(e.style.borderRadius="".concat(F))}}),[F]),!C)return null;var J;return e("div",{className:f(x(V),"flex items-center justify-center",u),ref:s,children:[H&&t(d,{}),G&&t(a,v({onInit:function(e,t){I.current=t,q(!1),K(!0)},init:v({language:N,width:"100%",height:"100%",promotion:!1,plugins:"preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap accordion",menubar:"file edit view insert format tools table",toolbar:"undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",autosave_ask_before_unload:!0,autosave_interval:"30s",autosave_restore_when_empty:!1,autosave_retention:"2m",image_advtab:!0,image_caption:!0,quickbars_selection_toolbar:"",toolbar_mode:"sliding",skin:!1,content_css:!1,content_style:(J="".concat(y,"\n").concat(b,"\n body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }"),J),setup:function(e){e.ui.registry.addButton("inlinecode",{icon:"sourcecode",tooltip:"Inline code",onAction:function(){e.formatter.toggle("code")}}),e.on("init",(function(){e.formatter.register("code",{inline:"code",remove:"all"})})),e.ui.registry.addButton("markdown",{text:"Markdown",onAction:function(){var t=e.getContent({format:"text"}),n=h(t);e.setContent(n)}}),e.on("init",(function(){e.getContainer().style.borderRadius=F}))}},O)},z),T)]})}));_.displayName="Editor";export{_ as Editor,_ as default};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/components/Gnb/GnbLogo.mjs

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useContext as t}from"react";import{cva as a}from"class-variance-authority";import{GnbContext as o}from"./GnbRoot.mjs";import{cn as n}from"../../utils/utils.mjs";import"../../Typography/Header/index.mjs";import i from"../../Typography/Text/index.mjs";var s=function(){return s=Object.assign||function(r){for(var e,t=1,a=arguments.length;t<a;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},s.apply(this,arguments)},l=function(r,e){var t={};for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&e.indexOf(a)<0&&(t[a]=r[a]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(r);o<a.length;o++)e.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(r,a[o])&&(t[a[o]]=r[a[o]])}return t},p=a("mr-4 flex items-center text-slate-12 dark:text-slateDark-12",{variants:{size:{small:"text-xs w-[140px] h-[15px]",medium:"text-sm w-[150px] h-[20px]",large:"text-base w-[160px] h-[25px]"}},defaultVariants:{size:"medium"}}),m=e((function(e,a){var m=e.children,c=e.className,f=e.href,x=l(e,["children","className","href"]),u=t(o).size;return r("a",s({href:f,className:n(p({size:u}),c)},x,{children:null!=m?m:r(i,{children:"LOGO 영역"})}))}));m.displayName="Gnb.Logo";export{m as GnbLogo};
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e,useContext as t}from"react";import{cva as a}from"class-variance-authority";import{GnbContext as o}from"./GnbRoot.mjs";import{cn as n}from"../../utils/utils.mjs";import"../../Typography/Header/index.mjs";import{Text as i}from"../../Typography/Text/index.mjs";var s=function(){return s=Object.assign||function(r){for(var e,t=1,a=arguments.length;t<a;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},s.apply(this,arguments)},l=function(r,e){var t={};for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&e.indexOf(a)<0&&(t[a]=r[a]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(r);o<a.length;o++)e.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(r,a[o])&&(t[a[o]]=r[a[o]])}return t},p=a("mr-4 flex items-center text-slate-12 dark:text-slateDark-12",{variants:{size:{small:"text-xs w-[140px] h-[15px]",medium:"text-sm w-[150px] h-[20px]",large:"text-base w-[160px] h-[25px]"}},defaultVariants:{size:"medium"}}),m=e((function(e,a){var m=e.children,c=e.className,f=e.href,x=l(e,["children","className","href"]),u=t(o).size;return r("a",s({href:f,className:n(p({size:u}),c)},x,{children:null!=m?m:r(i,{children:"LOGO 영역"})}))}));m.displayName="Gnb.Logo";export{m as GnbLogo};
 //# sourceMappingURL=GnbLogo.mjs.map

package/dist/lib/components/Gnb/GnbLogo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GnbLogo.mjs","sources":["../../../lib/components/Gnb/GnbLogo.js"],"sourcesContent":["var __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useContext } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { GnbContext } from './GnbRoot';\nimport { cn } from '../../../lib/utils/utils';\nimport { Text } from '../../../lib/Typography';\nvar gnbLogoVariants = cva('mr-4 flex items-center text-slate-12 dark:text-slateDark-12', {\n    variants: {\n        size: {\n            small: 'text-xs w-[140px] h-[15px]',\n            medium: 'text-sm w-[150px] h-[20px]',\n            large: 'text-base w-[160px] h-[25px]',\n        },\n    },\n    defaultVariants: {\n        size: 'medium',\n    },\n});\nexport var GnbLogo = forwardRef(function (_a, ref) {\n    var children = _a.children, className = _a.className, href = _a.href, props = __rest(_a, [\"children\", \"className\", \"href\"]);\n    var size = useContext(GnbContext).size;\n    return (_jsx(\"a\", __assign({ href: href, className: cn(gnbLogoVariants({ size: size }), className) }, props, { children: children !== null && children !== void 0 ? children : _jsx(Text, { children: \"LOGO \\uC601\\uC5ED\" }) })));\n});\nGnbLogo.displayName = 'Gnb.Logo';\n"],"names":["__assign","Object","assign","t","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","this","__rest","e","indexOf","getOwnPropertySymbols","propertyIsEnumerable","gnbLogoVariants","cva","variants","size","small","medium","large","defaultVariants","GnbLogo","forwardRef","_a","ref","children","className","href","props","useContext","GnbContext","_jsx","cn","Text","displayName"],"mappings":"yTAAA,IAAIA,EAAsC,WAStC,OARAA,EAAWC,OAAOC,QAAU,SAASC,GACjC,IAAK,IAAIC,EAAGC,EAAI,EAAGC,EAAIC,UAAUC,OAAQH,EAAIC,EAAGD,IAE5C,IAAK,IAAII,KADTL,EAAIG,UAAUF,GACOJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,KACzDN,EAAEM,GAAKL,EAAEK,IAEjB,OAAON,CACf,EACWH,EAASa,MAAMC,KAAMP,UAChC,EACIQ,EAAkC,SAAUX,EAAGY,GAC/C,IAAIb,EAAI,CAAA,EACR,IAAK,IAAIM,KAAKL,EAAOH,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,IAAMO,EAAEC,QAAQR,GAAK,IAC9EN,EAAEM,GAAKL,EAAEK,IACb,GAAS,MAALL,GAAqD,mBAAjCH,OAAOiB,sBACtB,KAAIb,EAAI,EAAb,IAAgBI,EAAIR,OAAOiB,sBAAsBd,GAAIC,EAAII,EAAED,OAAQH,IAC3DW,EAAEC,QAAQR,EAAEJ,IAAM,GAAKJ,OAAOS,UAAUS,qBAAqBP,KAAKR,EAAGK,EAAEJ,MACvEF,EAAEM,EAAEJ,IAAMD,EAAEK,EAAEJ,IAF4B,CAItD,OAAOF,CACX,EAOIiB,EAAkBC,EAAI,8DAA+D,CACrFC,SAAU,CACNC,KAAM,CACFC,MAAO,6BACPC,OAAQ,6BACRC,MAAO,iCAGfC,gBAAiB,CACbJ,KAAM,YAGHK,EAAUC,GAAW,SAAUC,EAAIC,GAC1C,IAAIC,EAAWF,EAAGE,SAAUC,EAAYH,EAAGG,UAAWC,EAAOJ,EAAGI,KAAMC,EAAQpB,EAAOe,EAAI,CAAC,WAAY,YAAa,SAC/GP,EAAOa,EAAWC,GAAYd,KAClC,OAAQe,EAAK,IAAKtC,EAAS,CAAEkC,KAAMA,EAAMD,UAAWM,EAAGnB,EAAgB,CAAEG,KAAMA,IAASU,IAAcE,EAAO,CAAEH,SAAUA,QAA2CA,EAAWM,EAAKE,EAAM,CAAER,SAAU,cAC1M,IACAJ,EAAQa,YAAc"}
+{"version":3,"file":"GnbLogo.mjs","sources":["../../../lib/components/Gnb/GnbLogo.js"],"sourcesContent":["var __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { forwardRef, useContext } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { GnbContext } from './GnbRoot';\nimport { cn } from '../../../lib/utils/utils';\nimport { Text } from '../../../lib/Typography';\nvar gnbLogoVariants = cva('mr-4 flex items-center text-slate-12 dark:text-slateDark-12', {\n    variants: {\n        size: {\n            small: 'text-xs w-[140px] h-[15px]',\n            medium: 'text-sm w-[150px] h-[20px]',\n            large: 'text-base w-[160px] h-[25px]',\n        },\n    },\n    defaultVariants: {\n        size: 'medium',\n    },\n});\nexport var GnbLogo = forwardRef(function (_a, ref) {\n    var children = _a.children, className = _a.className, href = _a.href, props = __rest(_a, [\"children\", \"className\", \"href\"]);\n    var size = useContext(GnbContext).size;\n    return (_jsx(\"a\", __assign({ href: href, className: cn(gnbLogoVariants({ size: size }), className) }, props, { children: children !== null && children !== void 0 ? children : _jsx(Text, { children: \"LOGO \\uC601\\uC5ED\" }) })));\n});\nGnbLogo.displayName = 'Gnb.Logo';\n"],"names":["__assign","Object","assign","t","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","this","__rest","e","indexOf","getOwnPropertySymbols","propertyIsEnumerable","gnbLogoVariants","cva","variants","size","small","medium","large","defaultVariants","GnbLogo","forwardRef","_a","ref","children","className","href","props","useContext","GnbContext","_jsx","cn","Text","displayName"],"mappings":"iUAAA,IAAIA,EAAsC,WAStC,OARAA,EAAWC,OAAOC,QAAU,SAASC,GACjC,IAAK,IAAIC,EAAGC,EAAI,EAAGC,EAAIC,UAAUC,OAAQH,EAAIC,EAAGD,IAE5C,IAAK,IAAII,KADTL,EAAIG,UAAUF,GACOJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,KACzDN,EAAEM,GAAKL,EAAEK,IAEjB,OAAON,CACf,EACWH,EAASa,MAAMC,KAAMP,UAChC,EACIQ,EAAkC,SAAUX,EAAGY,GAC/C,IAAIb,EAAI,CAAA,EACR,IAAK,IAAIM,KAAKL,EAAOH,OAAOS,UAAUC,eAAeC,KAAKR,EAAGK,IAAMO,EAAEC,QAAQR,GAAK,IAC9EN,EAAEM,GAAKL,EAAEK,IACb,GAAS,MAALL,GAAqD,mBAAjCH,OAAOiB,sBACtB,KAAIb,EAAI,EAAb,IAAgBI,EAAIR,OAAOiB,sBAAsBd,GAAIC,EAAII,EAAED,OAAQH,IAC3DW,EAAEC,QAAQR,EAAEJ,IAAM,GAAKJ,OAAOS,UAAUS,qBAAqBP,KAAKR,EAAGK,EAAEJ,MACvEF,EAAEM,EAAEJ,IAAMD,EAAEK,EAAEJ,IAF4B,CAItD,OAAOF,CACX,EAOIiB,EAAkBC,EAAI,8DAA+D,CACrFC,SAAU,CACNC,KAAM,CACFC,MAAO,6BACPC,OAAQ,6BACRC,MAAO,iCAGfC,gBAAiB,CACbJ,KAAM,YAGHK,EAAUC,GAAW,SAAUC,EAAIC,GAC1C,IAAIC,EAAWF,EAAGE,SAAUC,EAAYH,EAAGG,UAAWC,EAAOJ,EAAGI,KAAMC,EAAQpB,EAAOe,EAAI,CAAC,WAAY,YAAa,SAC/GP,EAAOa,EAAWC,GAAYd,KAClC,OAAQe,EAAK,IAAKtC,EAAS,CAAEkC,KAAMA,EAAMD,UAAWM,EAAGnB,EAAgB,CAAEG,KAAMA,IAASU,IAAcE,EAAO,CAAEH,SAAUA,QAA2CA,EAAWM,EAAKE,EAAM,CAAER,SAAU,cAC1M,IACAJ,EAAQa,YAAc"}

package/dist/lib/components/Gnb/GnbRoot.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import { VariantProps } from 'class-variance-authority';
+import { IColor } from '../../../lib/types';
 export interface GnbProps extends VariantProps<typeof GnbVariants> {
+    color?: IColor;
 }
 declare const GnbVariants: (props?: ({
     scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
+    color?: string | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const GnbContext: React.Context<GnbProps>;
 export declare const Gnb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & GnbProps & React.RefAttributes<HTMLElement>>;

package/dist/lib/components/Gnb/GnbRoot.js

@@ -24,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, createContext } from 'react';
 import { cva } from 'class-variance-authority';
-import { scalingVariants } from '../../../lib/constants';
+import { scalingVariants, bgColorStyle } from '../../../lib/constants';
 import { cn } from '../../../lib/utils/utils';
 import { useTheme } from '../../../lib/theme';
 var GnbVariants = cva('sticky top-0 z-50 w-full px-8 backdrop-blur flex items-center', {
@@ -35,6 +35,7 @@ var GnbVariants = cva('sticky top-0 z-50 w-full px-8 backdrop-blur flex items-ce
             medium: 'text-sm h-14',
             large: 'text-base h-16',
         },
+        color: bgColorStyle(),
     },
     defaultVariants: {
         scaling: '100%',
@@ -45,9 +46,13 @@ export var GnbContext = createContext({
     size: 'medium',
 });
 export var Gnb = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, size = _a.size, scaling = _a.scaling, props = __rest(_a, ["children", "className", "size", "scaling"]);
+    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 theme = useTheme().theme;
-    var contextValue = { size: size, scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling };
+    var contextValue = {
+        size: size,
+        scaling: scaling !== null && scaling !== void 0 ? scaling : theme.themeScaling,
+        color: color !== null && color !== void 0 ? color : theme.themeColor,
+    };
     return (_jsx(GnbContext.Provider, { value: contextValue, children: _jsx("header", __assign({ className: cn(GnbVariants(contextValue), className), ref: ref }, props, { children: children })) }));
 });
 Gnb.displayName = 'Gnb.Root';

package/dist/lib/components/Gnb/GnbRoot.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import{createContext as r,forwardRef as t}from"react";import{cva as i}from"class-variance-authority";import{scalingVariants as a}from"../../constants.mjs";import{cn as n}from"../../utils/utils.mjs";import{useTheme as o}from"../../theme/ThemeProvider.mjs";var s=function(){return s=Object.assign||function(e){for(var r,t=1,i=arguments.length;t<i;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},s.apply(this,arguments)},l=function(e,r){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&r.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(e);a<i.length;a++)r.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(e,i[a])&&(t[i[a]]=e[i[a]])}return t},m=i("sticky top-0 z-50 w-full px-8 backdrop-blur flex items-center",{variants:{scaling:s({},a),size:{small:"text-xs h-12",medium:"text-sm h-14",large:"text-base h-16"}},defaultVariants:{scaling:"100%",size:"medium"}}),c=r({size:"medium"}),p=t((function(r,t){var i=r.children,a=r.className,p=r.size,f=r.scaling,u=l(r,["children","className","size","scaling"]),h=o().theme,d={size:p,scaling:null!=f?f:h.themeScaling};return e(c.Provider,{value:d,children:e("header",s({className:n(m(d),a),ref:t},u,{children:i}))})}));p.displayName="Gnb.Root";export{p as Gnb,c as GnbContext};
+import{jsx as e}from"react/jsx-runtime";import{createContext as r,forwardRef as t}from"react";import{cva as o}from"class-variance-authority";import{scalingVariants as i,bgColorStyle as l}from"../../constants.mjs";import{cn as a}from"../../utils/utils.mjs";import{useTheme as n}from"../../theme/ThemeProvider.mjs";var s=function(){return s=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var i in r=arguments[t])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e},s.apply(this,arguments)},c=function(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)r.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(t[o[i]]=e[o[i]])}return t},m=o("sticky top-0 z-50 w-full px-8 backdrop-blur flex items-center",{variants:{scaling:s({},i),size:{small:"text-xs h-12",medium:"text-sm h-14",large:"text-base h-16"},color:l()},defaultVariants:{scaling:"100%",size:"medium"}}),p=r({size:"medium"}),u=t((function(r,t){var o=r.children,i=r.className,l=r.size,u=r.scaling,f=r.color,h=c(r,["children","className","size","scaling","color"]),d=n().theme,y={size:l,scaling:null!=u?u:d.themeScaling,color:null!=f?f:d.themeColor};return e(p.Provider,{value:y,children:e("header",s({className:a(m(y),i),ref:t},h,{children:o}))})}));u.displayName="Gnb.Root";export{u as Gnb,p as GnbContext};
 //# sourceMappingURL=GnbRoot.mjs.map

package/dist/lib/components/Grid/NumberingPagination.js

@@ -19,10 +19,11 @@ import Button from '../Button';
 import TextField from '../TextField';
 import Text from '../../Typography/Text';
 function NumberingPagination(_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var table = _a.table;
-    var _d = useState('1'), nowPage = _d[0], setNowPage = _d[1];
+    var _e = useState('1'), nowPage = _e[0], setNowPage = _e[1];
     var color = (_b = table.options.color) !== null && _b !== void 0 ? _b : MAIN_COLOR;
+    var radius = (_c = table.options.radius) !== null && _c !== void 0 ? _c : 'medium';
     var size = table.options.size == 'x-small' ? 'small' : table.options.size;
     var currentPage = table.options.pagination
         ? table.options.pagination.pageIndex
@@ -40,7 +41,7 @@ function NumberingPagination(_a) {
                             table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: i }));
                         setNowPage(String(i + 1));
                     }
-                }, color: currentInx === i ? color : 'slate', children: i + 1 }, i));
+                }, color: currentInx === i ? color : 'slate', radius: radius, children: i + 1 }, i));
         };
         for (var i = 0; i < table.getPageCount(); i++) {
             _loop_1(i);
@@ -53,13 +54,13 @@ function NumberingPagination(_a) {
                         table.options.setPagination &&
                             table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: 0 }));
                         setNowPage('1');
-                    }, color: currentInx === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }));
+                    }, color: currentInx === 0 ? color : 'slate', radius: radius, children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }));
                 pageNumbers.push(_jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }), _jsx(Button, { size: size, appearance: "ghost", onClick: function () {
                         table.setPageIndex(table.getPageCount() - 1);
                         table.options.setPagination &&
                             table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: table.getPageCount() - 1 }));
                         setNowPage(String(table.getPageCount()));
-                    }, color: currentInx === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));
+                    }, color: currentInx === table.getPageCount() - 1 ? color : 'slate', radius: radius, children: table.getPageCount() }, table.getPageCount() - 1));
             }
             else if (currentInx - 3 <= 0) {
                 pageNumbers = pageNumbers.slice(0, 7);
@@ -68,7 +69,7 @@ function NumberingPagination(_a) {
                         table.options.setPagination &&
                             table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: table.getPageCount() - 1 }));
                         setNowPage(String(table.getPageCount()));
-                    }, color: currentInx === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));
+                    }, color: currentInx === table.getPageCount() - 1 ? color : 'slate', radius: radius, children: table.getPageCount() }, table.getPageCount() - 1));
             }
             else {
                 pageNumbers = pageNumbers.slice(table.getPageCount() - 7, table.getPageCount());
@@ -77,12 +78,12 @@ function NumberingPagination(_a) {
                         table.options.setPagination &&
                             table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: 0 }));
                         setNowPage('1');
-                    }, color: currentInx === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }));
+                    }, color: currentInx === 0 ? color : 'slate', radius: radius, children: 1 }, 0), _jsx(Button, { appearance: "ghost", disabled: true, size: size, children: "..." }));
             }
         }
         return pageNumbers;
     };
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsxs(Select.Root, { size: size, color: color, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsxs(Select.Root, { size: size, color: color, radius: radius, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {
                             table.options.setPagination &&
                                 table.options.setPagination({
                                     pageIndex: 0,
@@ -91,28 +92,28 @@ function NumberingPagination(_a) {
                             table.setPageSize(Number(e));
                             setNowPage('1');
                             table.setPageIndex(0);
-                        }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 50, 100].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { size: size, appearance: "ghost", className: "rounded border p-1", color: color, onClick: function () {
+                        }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 50, 100].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { size: size, appearance: "ghost", className: "border p-1", color: color, radius: radius, onClick: function () {
                                     table.firstPage();
                                     table.options.setPagination &&
                                         table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: 0 }));
                                     setNowPage('1');
-                                }, disabled: currentPage === 0, children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { size: size, appearance: "ghost", className: "rounded border p-1", color: color, onClick: function () {
+                                }, disabled: currentPage === 0, children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { size: size, appearance: "ghost", className: "border p-1", color: color, radius: radius, onClick: function () {
                                     table.previousPage();
                                     setNowPage(String(table.getState().pagination.pageIndex));
                                     table.options.setPagination &&
                                         table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: table.options.pagination.pageIndex - 1 }));
-                                }, disabled: currentPage === 0, children: _jsx(ChevronLeftIcon, {}) })] }), _jsx("div", { children: renderPageNumbers() }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { size: size, appearance: "ghost", className: "rounded border p-1", color: color, onClick: function () {
+                                }, disabled: currentPage === 0, children: _jsx(ChevronLeftIcon, {}) })] }), _jsx("div", { children: renderPageNumbers() }), _jsxs("div", { className: "flex gap-2", children: [_jsx(IconButton, { size: size, appearance: "ghost", className: "border p-1", color: color, radius: radius, onClick: function () {
                                     table.nextPage();
                                     setNowPage(String(table.getState().pagination.pageIndex + 2));
                                     table.options.setPagination &&
                                         table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: table.options.pagination.pageIndex + 1 }));
-                                }, disabled: currentPage === table.getPageCount() - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { size: size, appearance: "ghost", className: "rounded border p-1", color: color, onClick: function () {
+                                }, disabled: currentPage === table.getPageCount() - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { size: size, appearance: "ghost", className: "border p-1", color: color, radius: radius, onClick: function () {
                                     table.lastPage();
                                     setNowPage(String(table.getPageCount()));
                                     table.options.setPagination &&
                                         table.options.setPagination(__assign(__assign({}, table.options.pagination), { pageIndex: table.getPageCount() - 1 }));
-                                }, disabled: currentPage === table.getPageCount() - 1, children: _jsx(DoubleArrowRightIcon, {}) })] })] }), !((_c = table.options) === null || _c === void 0 ? void 0 : _c.disableInputPagination) && (_jsxs("div", { className: "mt-4 flex items-center justify-center gap-2", children: [_jsx(TextField.Root, { size: size, type: "number", color: color, min: "1", max: table.getPageCount(), value: nowPage, onChange: function (e) {
+                                }, disabled: currentPage === table.getPageCount() - 1, children: _jsx(DoubleArrowRightIcon, {}) })] })] }), !((_d = table.options) === null || _d === void 0 ? void 0 : _d.disableInputPagination) && (_jsxs("div", { className: "mt-4 flex items-center justify-center gap-2", children: [_jsx(TextField.Root, { size: size, type: "number", color: color, radius: radius, min: "1", max: table.getPageCount(), value: nowPage, onChange: function (e) {
                             setNowPage(e.target.value);
-                        }, className: "w-[50px] rounded border" }), _jsxs(Text, { children: ["/ ", table.getPageCount()] }), _jsx(Button, { size: size, onClick: function () { return table.setPageIndex(nowPage ? Number(nowPage) - 1 : 0); }, children: "\uC774\uB3D9" })] }))] }));
+                        }, className: "w-[50px] border" }), _jsxs(Text, { children: ["/ ", table.getPageCount()] }), _jsx(Button, { size: size, onClick: function () { return table.setPageIndex(nowPage ? Number(nowPage) - 1 : 0); }, color: color, radius: radius, children: "\uC774\uB3D9" })] }))] }));
 }
 export default NumberingPagination;

package/dist/lib/components/Grid/NumberingPagination.mjs

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useState as t}from"react";import{IconButton as o}from"../IconButton/index.mjs";import{DoubleArrowLeftIcon as i,ChevronLeftIcon as a,ChevronRightIcon as s,DoubleArrowRightIcon as g}from"@radix-ui/react-icons";import p from"../Select/index.mjs";import{MAIN_COLOR as r}from"../../color/constants.mjs";import{Button as c}from"../Button/index.mjs";import l from"../TextField/index.mjs";import d from"../../Typography/Text/index.mjs";var u=function(){return u=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},u.apply(this,arguments)};function P(P){var h,m,x=P.table,f=t("1"),C=f[0],I=f[1],z=null!==(h=x.options.color)&&void 0!==h?h:r,b="x-small"==x.options.size?"small":x.options.size,S=x.options.pagination?x.options.pagination.pageIndex:x.getState().pagination.pageIndex;return e("div",{children:[e("div",{className:"flex items-center justify-center gap-2",children:[e(p.Root,{size:b,color:z,value:String(x.getState().pagination.pageSize),defaultValue:String(x.getState().pagination.pageSize),onValueChange:function(e){x.options.setPagination&&x.options.setPagination({pageIndex:0,pageSize:Number(e)}),x.setPageSize(Number(e)),I("1"),x.setPageIndex(0)},children:[n(p.Trigger,{}),n(p.Content,{children:[10,20,30,50,100].map((function(e){return n(p.Item,{value:String(e),children:e},e)}))})]}),e("div",{className:"flex gap-2",children:[n(o,{size:b,appearance:"ghost",className:"rounded border p-1",color:z,onClick:function(){x.firstPage(),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:0})),I("1")},disabled:0===S,children:n(i,{})}),n(o,{size:b,appearance:"ghost",className:"rounded border p-1",color:z,onClick:function(){x.previousPage(),I(String(x.getState().pagination.pageIndex)),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:x.options.pagination.pageIndex-1}))},disabled:0===S,children:n(a,{})})]}),n("div",{children:function(){for(var e=[],t=x.options.pagination?x.options.pagination.pageIndex:x.getState().pagination.pageIndex,o=function(o){e.push(n(c,{size:b,appearance:"ghost",onClick:function(){t!==o&&(x.setPageIndex(o),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:o})),I(String(o+1)))},color:t===o?z:"slate",children:o+1},o))},i=0;i<x.getPageCount();i++)o(i);return e.length>10&&(t-3>0&&t+3<x.getPageCount()?((e=e.slice(t-2,t+3)).unshift(n(c,{size:b,appearance:"ghost",onClick:function(){x.setPageIndex(0),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:0})),I("1")},color:0===t?z:"slate",children:1},0),n(c,{appearance:"ghost",disabled:!0,size:b,children:"..."})),e.push(n(c,{appearance:"ghost",disabled:!0,size:b,children:"..."}),n(c,{size:b,appearance:"ghost",onClick:function(){x.setPageIndex(x.getPageCount()-1),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:x.getPageCount()-1})),I(String(x.getPageCount()))},color:t===x.getPageCount()-1?z:"slate",children:x.getPageCount()},x.getPageCount()-1))):t-3<=0?(e=e.slice(0,7)).push(n(c,{appearance:"ghost",disabled:!0,size:b,children:"..."}),n(c,{size:b,appearance:"ghost",onClick:function(){x.setPageIndex(x.getPageCount()-1),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:x.getPageCount()-1})),I(String(x.getPageCount()))},color:t===x.getPageCount()-1?z:"slate",children:x.getPageCount()},x.getPageCount()-1)):(e=e.slice(x.getPageCount()-7,x.getPageCount())).unshift(n(c,{size:b,appearance:"ghost",onClick:function(){x.setPageIndex(0),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:0})),I("1")},color:0===t?z:"slate",children:1},0),n(c,{appearance:"ghost",disabled:!0,size:b,children:"..."}))),e}()}),e("div",{className:"flex gap-2",children:[n(o,{size:b,appearance:"ghost",className:"rounded border p-1",color:z,onClick:function(){x.nextPage(),I(String(x.getState().pagination.pageIndex+2)),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:x.options.pagination.pageIndex+1}))},disabled:S===x.getPageCount()-1,children:n(s,{})}),n(o,{size:b,appearance:"ghost",className:"rounded border p-1",color:z,onClick:function(){x.lastPage(),I(String(x.getPageCount())),x.options.setPagination&&x.options.setPagination(u(u({},x.options.pagination),{pageIndex:x.getPageCount()-1}))},disabled:S===x.getPageCount()-1,children:n(g,{})})]})]}),!(null===(m=x.options)||void 0===m?void 0:m.disableInputPagination)&&e("div",{className:"mt-4 flex items-center justify-center gap-2",children:[n(l.Root,{size:b,type:"number",color:z,min:"1",max:x.getPageCount(),value:C,onChange:function(e){I(e.target.value)},className:"w-[50px] rounded border"}),e(d,{children:["/ ",x.getPageCount()]}),n(c,{size:b,onClick:function(){return x.setPageIndex(C?Number(C)-1:0)},children:"이동"})]})]})}export{P as default};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useState as t}from"react";import{IconButton as i}from"../IconButton/index.mjs";import{DoubleArrowLeftIcon as a,ChevronLeftIcon as o,ChevronRightIcon as s,DoubleArrowRightIcon as g}from"@radix-ui/react-icons";import r from"../Select/index.mjs";import{MAIN_COLOR as p}from"../../color/constants.mjs";import{Button as c}from"../Button/index.mjs";import l from"../TextField/index.mjs";import{Text as d}from"../../Typography/Text/index.mjs";var u=function(){return u=Object.assign||function(e){for(var n,t=1,i=arguments.length;t<i;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e},u.apply(this,arguments)};function P(P){var h,m,x,f=P.table,C=t("1"),I=C[0],z=C[1],b=null!==(h=f.options.color)&&void 0!==h?h:p,v=null!==(m=f.options.radius)&&void 0!==m?m:"medium",S="x-small"==f.options.size?"small":f.options.size,N=f.options.pagination?f.options.pagination.pageIndex:f.getState().pagination.pageIndex;return e("div",{children:[e("div",{className:"flex items-center justify-center gap-2",children:[e(r.Root,{size:S,color:b,radius:v,value:String(f.getState().pagination.pageSize),defaultValue:String(f.getState().pagination.pageSize),onValueChange:function(e){f.options.setPagination&&f.options.setPagination({pageIndex:0,pageSize:Number(e)}),f.setPageSize(Number(e)),z("1"),f.setPageIndex(0)},children:[n(r.Trigger,{}),n(r.Content,{children:[10,20,30,50,100].map((function(e){return n(r.Item,{value:String(e),children:e},e)}))})]}),e("div",{className:"flex gap-2",children:[n(i,{size:S,appearance:"ghost",className:"border p-1",color:b,radius:v,onClick:function(){f.firstPage(),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:0})),z("1")},disabled:0===N,children:n(a,{})}),n(i,{size:S,appearance:"ghost",className:"border p-1",color:b,radius:v,onClick:function(){f.previousPage(),z(String(f.getState().pagination.pageIndex)),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:f.options.pagination.pageIndex-1}))},disabled:0===N,children:n(o,{})})]}),n("div",{children:function(){for(var e=[],t=f.options.pagination?f.options.pagination.pageIndex:f.getState().pagination.pageIndex,i=function(i){e.push(n(c,{size:S,appearance:"ghost",onClick:function(){t!==i&&(f.setPageIndex(i),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:i})),z(String(i+1)))},color:t===i?b:"slate",radius:v,children:i+1},i))},a=0;a<f.getPageCount();a++)i(a);return e.length>10&&(t-3>0&&t+3<f.getPageCount()?((e=e.slice(t-2,t+3)).unshift(n(c,{size:S,appearance:"ghost",onClick:function(){f.setPageIndex(0),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:0})),z("1")},color:0===t?b:"slate",radius:v,children:1},0),n(c,{appearance:"ghost",disabled:!0,size:S,children:"..."})),e.push(n(c,{appearance:"ghost",disabled:!0,size:S,children:"..."}),n(c,{size:S,appearance:"ghost",onClick:function(){f.setPageIndex(f.getPageCount()-1),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:f.getPageCount()-1})),z(String(f.getPageCount()))},color:t===f.getPageCount()-1?b:"slate",radius:v,children:f.getPageCount()},f.getPageCount()-1))):t-3<=0?(e=e.slice(0,7)).push(n(c,{appearance:"ghost",disabled:!0,size:S,children:"..."}),n(c,{size:S,appearance:"ghost",onClick:function(){f.setPageIndex(f.getPageCount()-1),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:f.getPageCount()-1})),z(String(f.getPageCount()))},color:t===f.getPageCount()-1?b:"slate",radius:v,children:f.getPageCount()},f.getPageCount()-1)):(e=e.slice(f.getPageCount()-7,f.getPageCount())).unshift(n(c,{size:S,appearance:"ghost",onClick:function(){f.setPageIndex(0),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:0})),z("1")},color:0===t?b:"slate",radius:v,children:1},0),n(c,{appearance:"ghost",disabled:!0,size:S,children:"..."}))),e}()}),e("div",{className:"flex gap-2",children:[n(i,{size:S,appearance:"ghost",className:"border p-1",color:b,radius:v,onClick:function(){f.nextPage(),z(String(f.getState().pagination.pageIndex+2)),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:f.options.pagination.pageIndex+1}))},disabled:N===f.getPageCount()-1,children:n(s,{})}),n(i,{size:S,appearance:"ghost",className:"border p-1",color:b,radius:v,onClick:function(){f.lastPage(),z(String(f.getPageCount())),f.options.setPagination&&f.options.setPagination(u(u({},f.options.pagination),{pageIndex:f.getPageCount()-1}))},disabled:N===f.getPageCount()-1,children:n(g,{})})]})]}),!(null===(x=f.options)||void 0===x?void 0:x.disableInputPagination)&&e("div",{className:"mt-4 flex items-center justify-center gap-2",children:[n(l.Root,{size:S,type:"number",color:b,radius:v,min:"1",max:f.getPageCount(),value:I,onChange:function(e){z(e.target.value)},className:"w-[50px] border"}),e(d,{children:["/ ",f.getPageCount()]}),n(c,{size:S,onClick:function(){return f.setPageIndex(I?Number(I)-1:0)},color:b,radius:v,children:"이동"})]})]})}export{P as default};
 //# sourceMappingURL=NumberingPagination.mjs.map