@ncds/ui-admin 0.0.27 → 0.0.29

package/dist/cjs/src/components/badge/Badge.js

@@ -9,6 +9,7 @@ var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _button = require("../button");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _color = require("../../../constant/color");
+var _dot = require("../dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -32,7 +33,7 @@ var Badge = function (_a) {
     _d = _a.size,
     size = _d === void 0 ? 'sm' : _d;
   var sideSlotRender = function (slot) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (slot.type === 'icon') {
       return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
         name: slot.icon,
@@ -41,6 +42,12 @@ var Badge = function (_a) {
         color: slot.color ? _color.COLOR[slot.color] : undefined
       });
     }
+    if (slot.type === 'dot') {
+      return (0, _jsxRuntime.jsx)(_dot.Dot, {
+        color: (_c = slot.color) !== null && _c !== void 0 ? _c : color,
+        size: (_d = slot.size) !== null && _d !== void 0 ? _d : 'sm'
+      });
+    }
     return slot.children;
   };
   return (0, _jsxRuntime.jsxs)("span", __assign({

package/dist/cjs/src/components/button/Button.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.svgSize = exports.iconOnlySvgSize = exports.Button = void 0;
+exports.svgSize = exports.iconOnlySvgSize = exports.dotSize = exports.Button = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _color = require("../../../constant/color");
+var _dot = require("../dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -40,6 +41,12 @@ var iconOnlySvgSize = exports.iconOnlySvgSize = {
   sm: 20,
   md: 20
 };
+var dotSize = exports.dotSize = {
+  xxs: 'sm',
+  xs: 'sm',
+  sm: 'md',
+  md: 'md'
+};
 var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // NOTE: 엘리먼트 종류에 따라 props의 타입이 달라지므로 분리
   var _a = props.as,
@@ -78,7 +85,7 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     }
   };
   var sideSlotRender = function (slot) {
-    var _a, _b;
+    var _a, _b, _c;
     if (slot.type === 'icon') {
       var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
       return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
@@ -88,6 +95,12 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
         color: slot.color ? _color.COLOR[slot.color] : undefined
       });
     }
+    if (slot.type === 'dot') {
+      return (0, _jsxRuntime.jsx)(_dot.Dot, {
+        color: slot.color,
+        size: (_c = slot.size) !== null && _c !== void 0 ? _c : dotSize[size]
+      });
+    }
     return slot.children;
   };
   (0, _react.useEffect)(function () {

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -9,6 +9,7 @@ var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../../constant/color");
+var _dot = require("../dot");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -36,6 +37,12 @@ var svgSize = {
   md: 16,
   lg: 20
 };
+var dotSize = {
+  xs: 'sm',
+  sm: 'sm',
+  md: 'md',
+  lg: 'md'
+};
 var ButtonGroup = function (_a) {
   var children = _a.children,
     className = _a.className,
@@ -70,7 +77,8 @@ ButtonGroup.Item = function (_a) {
   var _c = _a.as,
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
-    size = _a.size,
+    _d = _a.size,
+    size = _d === void 0 ? 'md' : _d,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,
@@ -78,16 +86,22 @@ ButtonGroup.Item = function (_a) {
     isCurrent = _a.isCurrent,
     props = __rest(_a, ["as", "label", "size", "onlyIcon", "icon", "disabled", "children", "isCurrent"]);
   var renderIcon = function () {
-    var _a, _b;
+    var _a, _b, _c;
     if (!icon) return null;
     if (icon.type === 'icon') {
       return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
         name: icon.icon,
-        width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size !== null && size !== void 0 ? size : 'md'],
-        height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size !== null && size !== void 0 ? size : 'md'],
+        width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size],
+        height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size],
         color: icon.color ? _color.COLOR[icon.color] : 'currentColor'
       });
     }
+    if (icon.type === 'dot') {
+      return (0, _jsxRuntime.jsx)(_dot.Dot, {
+        color: icon.color,
+        size: (_c = icon.size) !== null && _c !== void 0 ? _c : dotSize[size]
+      });
+    }
     return icon.children;
   };
   var position = (_b = icon === null || icon === void 0 ? void 0 : icon.position) !== null && _b !== void 0 ? _b : 'leading';

package/dist/cjs/src/components/divider/Divider.js

@@ -18,15 +18,19 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
 var Divider = exports.Divider = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var className = _a.className,
     type = _a.type,
     _b = _a.style,
     style = _b === void 0 ? 'single-line' : _b,
     children = _a.children;
-  var componentClassName = (0, _classnames.default)('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className);
   return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: componentClassName,
+    className: (0, _classnames.default)('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className),
     ref: ref
   }, {
     children: [style === 'single-line' && (0, _jsxRuntime.jsx)("div", {

package/dist/cjs/src/components/dot/Dot.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dot = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 Dot = exports.Dot = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var _b = _a.color,
+    color = _b === void 0 ? 'success' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
+    className = _a.className,
+    props = __rest(_a, ["color", "size", "className"]);
+  return (0, _jsxRuntime.jsx)("span", __assign({
+    ref: ref,
+    className: (0, _classnames.default)('ncua-dot', "ncua-dot--".concat(color), "ncua-dot--".concat(size), className)
+  }, props));
+});
+Dot.displayName = 'Dot';

package/dist/cjs/src/components/dot/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Dot = require("./Dot");
+Object.keys(_Dot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Dot[key];
+    }
+  });
+});

package/dist/cjs/src/components/index.js

@@ -80,6 +80,17 @@ Object.keys(_divider).forEach(function (key) {
     }
   });
 });
+var _dot = require("./dot");
+Object.keys(_dot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dot[key];
+    }
+  });
+});
 var _dropdown = require("./dropdown");
 Object.keys(_dropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/modal/Modal.js

@@ -91,12 +91,15 @@ Modal.Header = function (_a) {
     hideCloseButton = _d === void 0 ? false : _d;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("header", __assign({
-      className: (0, _classnames.default)('ncua-modal__header', "ncua-modal__header--".concat(align))
+      className: (0, _classnames.default)('ncua-modal__header', "ncua-modal__header--".concat(align), {
+        'ncua-modal__header--close-button': !hideCloseButton
+      })
     }, {
       children: [featuredIcon && (0, _jsxRuntime.jsx)(_featuredIcon.FeaturedIcon, {
         name: featuredIcon.name,
         color: featuredIcon.color,
-        theme: featuredIcon.theme
+        theme: featuredIcon.theme,
+        size: "sm"
       }), (0, _jsxRuntime.jsxs)("div", __assign({
         className: "ncua-modal__title"
       }, {
@@ -137,14 +140,14 @@ Modal.Content = function (_a) {
  *
  * 1. Vertical layout (buttons stacked):
  * <Modal.Actions layout="vertical" align="stretch">
- *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
- *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
  * </Modal.Actions>
  *
  * 2. Horizontal layout (buttons side by side):
  * <Modal.Actions layout="horizontal" align="stretch">
- *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
- *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
  * </Modal.Actions>
  *
  * 3. Checkbox layout (checkbox on left, buttons on right):
@@ -154,8 +157,8 @@ Modal.Content = function (_a) {
  *     <a href="#">Settings</a>
  *   </>
  * }>
- *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
- *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
  * </Modal.Actions>
  */
 Modal.Actions = function (_a) {

package/dist/cjs/src/components/tag/Tag.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _color = require("../../../constant/color");
+var _dot = require("../dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -31,17 +32,28 @@ var Tag = function (_a) {
     sm: 14,
     md: 16
   };
+  var sideSlotRender = function (slot) {
+    var _a;
+    if (slot.type === 'icon') {
+      return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        name: slot.icon,
+        width: iconSize[size],
+        height: iconSize[size],
+        color: slot.color
+      });
+    }
+    if (slot.type === 'dot') {
+      return (0, _jsxRuntime.jsx)(_dot.Dot, {
+        color: slot.color,
+        size: (_a = slot.size) !== null && _a !== void 0 ? _a : 'sm'
+      });
+    }
+    return slot.children;
+  };
   return (0, _jsxRuntime.jsxs)("span", __assign({
-    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size), {
-      'ncua-tag--dot': (icon === null || icon === void 0 ? void 0 : icon.name) === 'dot'
-    })
+    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size))
   }, {
-    children: [icon && icon.name !== 'dot' && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-      name: icon.name,
-      width: iconSize[size],
-      height: iconSize[size],
-      color: icon.color
-    }), (0, _jsxRuntime.jsx)("span", __assign({
+    children: [icon && sideSlotRender(icon), (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-tag__text"
     }, {
       children: text

package/dist/esm/src/components/badge/Badge.js

@@ -13,6 +13,7 @@ import Icon from '@ncds/ui-admin-icon';
 import { svgSize } from '../button';
 import classNames from 'classnames';
 import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
 export var Badge = function (_a) {
   var label = _a.label,
     _b = _a.type,
@@ -25,7 +26,7 @@ export var Badge = function (_a) {
     _d = _a.size,
     size = _d === void 0 ? 'sm' : _d;
   var sideSlotRender = function (slot) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (slot.type === 'icon') {
       return _jsx(Icon, {
         name: slot.icon,
@@ -34,6 +35,12 @@ export var Badge = function (_a) {
         color: slot.color ? COLOR[slot.color] : undefined
       });
     }
+    if (slot.type === 'dot') {
+      return _jsx(Dot, {
+        color: (_c = slot.color) !== null && _c !== void 0 ? _c : color,
+        size: (_d = slot.size) !== null && _d !== void 0 ? _d : 'sm'
+      });
+    }
     return slot.children;
   };
   return _jsxs("span", __assign({

package/dist/esm/src/components/button/Button.js

@@ -17,10 +17,11 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import classnames from 'classnames';
 import { createElement, forwardRef, useEffect, useState } from 'react';
-import { COLOR } from '../../../constant/color';
+import classnames from 'classnames';
 import Icon from '@ncds/ui-admin-icon';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
 export var svgSize = {
   xxs: 12,
   xs: 14,
@@ -33,6 +34,12 @@ export var iconOnlySvgSize = {
   sm: 20,
   md: 20
 };
+export var dotSize = {
+  xxs: 'sm',
+  xs: 'sm',
+  sm: 'md',
+  md: 'md'
+};
 export var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   // NOTE: 엘리먼트 종류에 따라 props의 타입이 달라지므로 분리
   var _a = props.as,
@@ -71,7 +78,7 @@ export var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
   var sideSlotRender = function (slot) {
-    var _a, _b;
+    var _a, _b, _c;
     if (slot.type === 'icon') {
       var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
       return _jsx(Icon, {
@@ -81,6 +88,12 @@ export var Button = /*#__PURE__*/forwardRef(function (props, ref) {
         color: slot.color ? COLOR[slot.color] : undefined
       });
     }
+    if (slot.type === 'dot') {
+      return _jsx(Dot, {
+        color: slot.color,
+        size: (_c = slot.size) !== null && _c !== void 0 ? _c : dotSize[size]
+      });
+    }
     return slot.children;
   };
   useEffect(function () {

package/dist/esm/src/components/button/ButtonGroup.js

@@ -21,12 +21,19 @@ import Icon from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import React, { createElement } from 'react';
 import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
 var svgSize = {
   xs: 12,
   sm: 16,
   md: 16,
   lg: 20
 };
+var dotSize = {
+  xs: 'sm',
+  sm: 'sm',
+  md: 'md',
+  lg: 'md'
+};
 export var ButtonGroup = function (_a) {
   var children = _a.children,
     className = _a.className,
@@ -60,7 +67,8 @@ ButtonGroup.Item = function (_a) {
   var _c = _a.as,
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
-    size = _a.size,
+    _d = _a.size,
+    size = _d === void 0 ? 'md' : _d,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,
@@ -68,16 +76,22 @@ ButtonGroup.Item = function (_a) {
     isCurrent = _a.isCurrent,
     props = __rest(_a, ["as", "label", "size", "onlyIcon", "icon", "disabled", "children", "isCurrent"]);
   var renderIcon = function () {
-    var _a, _b;
+    var _a, _b, _c;
     if (!icon) return null;
     if (icon.type === 'icon') {
       return _jsx(Icon, {
         name: icon.icon,
-        width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size !== null && size !== void 0 ? size : 'md'],
-        height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size !== null && size !== void 0 ? size : 'md'],
+        width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size],
+        height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size],
         color: icon.color ? COLOR[icon.color] : 'currentColor'
       });
     }
+    if (icon.type === 'dot') {
+      return _jsx(Dot, {
+        color: icon.color,
+        size: (_c = icon.size) !== null && _c !== void 0 ? _c : dotSize[size]
+      });
+    }
     return icon.children;
   };
   var position = (_b = icon === null || icon === void 0 ? void 0 : icon.position) !== null && _b !== void 0 ? _b : 'leading';

package/dist/esm/src/components/divider/Divider.js

@@ -11,15 +11,19 @@ var __assign = this && this.__assign || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
 export var Divider = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
     type = _a.type,
     _b = _a.style,
     style = _b === void 0 ? 'single-line' : _b,
     children = _a.children;
-  var componentClassName = classNames('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className);
   return _jsxs("div", __assign({
-    className: componentClassName,
+    className: classNames('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className),
     ref: ref
   }, {
     children: [style === 'single-line' && _jsx("div", {

package/dist/esm/src/components/dot/Dot.js

@@ -0,0 +1,34 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+export var Dot = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.color,
+    color = _b === void 0 ? 'success' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
+    className = _a.className,
+    props = __rest(_a, ["color", "size", "className"]);
+  return _jsx("span", __assign({
+    ref: ref,
+    className: classNames('ncua-dot', "ncua-dot--".concat(color), "ncua-dot--".concat(size), className)
+  }, props));
+});
+Dot.displayName = 'Dot';

package/dist/esm/src/components/dot/index.js

@@ -0,0 +1 @@
+export * from './Dot';

package/dist/esm/src/components/index.js

@@ -5,6 +5,7 @@ export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
 export * from './divider';
+export * from './dot';
 export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';

package/dist/esm/src/components/modal/Modal.js

@@ -83,12 +83,15 @@ Modal.Header = function (_a) {
     hideCloseButton = _d === void 0 ? false : _d;
   return _jsxs(_Fragment, {
     children: [_jsxs("header", __assign({
-      className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align))
+      className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align), {
+        'ncua-modal__header--close-button': !hideCloseButton
+      })
     }, {
       children: [featuredIcon && _jsx(FeaturedIcon, {
         name: featuredIcon.name,
         color: featuredIcon.color,
-        theme: featuredIcon.theme
+        theme: featuredIcon.theme,
+        size: "sm"
       }), _jsxs("div", __assign({
         className: "ncua-modal__title"
       }, {
@@ -129,14 +132,14 @@ Modal.Content = function (_a) {
  *
  * 1. Vertical layout (buttons stacked):
  * <Modal.Actions layout="vertical" align="stretch">
- *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
- *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
  * </Modal.Actions>
  *
  * 2. Horizontal layout (buttons side by side):
  * <Modal.Actions layout="horizontal" align="stretch">
- *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
- *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
  * </Modal.Actions>
  *
  * 3. Checkbox layout (checkbox on left, buttons on right):
@@ -146,8 +149,8 @@ Modal.Content = function (_a) {
  *     <a href="#">Settings</a>
  *   </>
  * }>
- *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
- *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
  * </Modal.Actions>
  */
 Modal.Actions = function (_a) {

package/dist/esm/src/components/tag/Tag.js

@@ -12,6 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
 export var Tag = function (_a) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -24,17 +25,28 @@ export var Tag = function (_a) {
     sm: 14,
     md: 16
   };
+  var sideSlotRender = function (slot) {
+    var _a;
+    if (slot.type === 'icon') {
+      return _jsx(Icon, {
+        name: slot.icon,
+        width: iconSize[size],
+        height: iconSize[size],
+        color: slot.color
+      });
+    }
+    if (slot.type === 'dot') {
+      return _jsx(Dot, {
+        color: slot.color,
+        size: (_a = slot.size) !== null && _a !== void 0 ? _a : 'sm'
+      });
+    }
+    return slot.children;
+  };
   return _jsxs("span", __assign({
-    className: classNames('ncua-tag', "ncua-tag--".concat(size), {
-      'ncua-tag--dot': (icon === null || icon === void 0 ? void 0 : icon.name) === 'dot'
-    })
+    className: classNames('ncua-tag', "ncua-tag--".concat(size))
   }, {
-    children: [icon && icon.name !== 'dot' && _jsx(Icon, {
-      name: icon.name,
-      width: iconSize[size],
-      height: iconSize[size],
-      color: icon.color
-    }), _jsx("span", __assign({
+    children: [icon && sideSlotRender(icon), _jsx("span", __assign({
       className: "ncua-tag__text"
     }, {
       children: text

package/dist/types/constant/color.d.ts

@@ -31,4 +31,5 @@ export declare const COLOR: {
     'secondary-gray-blue-700': string;
 };
 export type ColorKeyType = keyof typeof COLOR;
+export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'violet' | 'disabled';
 //# sourceMappingURL=color.d.ts.map

package/dist/types/src/components/badge/Badge.d.ts

@@ -1,7 +1,8 @@
-import { SideSlotType } from '../button';
+import { ColorTone } from '../../../constant/color';
 import { Size } from '../../../constant/size';
+import { SideSlotType } from '../../types/side-slot';
 export type BadgeType = 'pill-outline' | 'pill-dark-color';
-export type BadgeColor = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled';
+export type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 export type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 export type BadgeProps = {
     label: string;

package/dist/types/src/components/button/Button.d.ts

@@ -1,19 +1,8 @@
 import { ComponentProps, ReactNode } from 'react';
-import { COLOR } from '../../../constant/color';
 import { Size } from '../../../constant/size';
-import { IconName } from '@ncds/ui-admin-icon';
+import { SideSlotType } from '../../types/side-slot';
+import { DotProps } from '../dot';
 export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'link' | 'destructive';
-export type IconSlotType = {
-    type: 'icon';
-    icon: IconName;
-    color?: keyof typeof COLOR;
-    size?: number | string;
-};
-export type CustomSlotType = {
-    type: 'custom';
-    children: ReactNode;
-};
-export type SideSlotType = IconSlotType | CustomSlotType;
 export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
     label: string;
@@ -39,6 +28,7 @@ type AnchorElementProps = CommonButtonProps<'a'> & {
 export type ButtonProps = ButtonElementProps | AnchorElementProps;
 export declare const svgSize: Record<ButtonSize, number>;
 export declare const iconOnlySvgSize: Record<ButtonSize, number>;
+export declare const dotSize: Record<ButtonSize, DotProps['size']>;
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -1,26 +1,15 @@
-import { IconName } from '@ncds/ui-admin-icon';
 import React, { ComponentProps } from 'react';
-import { ColorKeyType } from '../../../constant/color';
 import { Size } from '../../../constant/size';
+import { SideSlotType } from 'ui-admin/src/types/side-slot';
 export type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
 }
-interface SideIcon {
-    type: 'icon';
-    icon: IconName;
-    size?: number;
-    color?: ColorKeyType;
-}
-interface SideCustom {
-    type: 'custom';
-    children: React.ReactNode;
-}
-type SideSlotType = SideCommon & (SideIcon | SideCustom);
+type SideSlot = SideCommon & SideSlotType;
 interface ButtonGroupItemCommonProps {
     label?: string;
     size?: ButtonGroupSize;
-    icon?: SideSlotType;
+    icon?: SideSlot;
     children?: React.ReactNode;
     onlyIcon?: boolean;
     disabled?: boolean;
@@ -68,7 +57,7 @@ export declare const ButtonGroup: {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -103,13 +92,13 @@ export declare const ButtonGroup: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -119,17 +108,17 @@ export declare const ButtonGroup: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "move" | "none" | "copy" | "execute" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "link" | "move" | "copy" | "execute" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
@@ -347,7 +336,7 @@ export declare const ButtonGroup: {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -382,13 +371,13 @@ export declare const ButtonGroup: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -398,17 +387,17 @@ export declare const ButtonGroup: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "move" | "none" | "copy" | "execute" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "link" | "move" | "copy" | "execute" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;

package/dist/types/src/components/divider/Divider.d.ts

@@ -7,5 +7,10 @@ export interface DividerProps {
     style?: DividerStyle;
     children: ReactNode;
 }
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
 export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Divider.d.ts.map

package/dist/types/src/components/dot/Dot.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { Size } from '../../../constant/size';
+import { ColorTone } from '../../../constant/color';
+export type DotColor = ColorTone;
+export type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+export interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /**
+     * The color of the dot
+     * @default 'success'
+     */
+    color?: DotColor;
+    /**
+     * The size of the dot
+     * @default 'md'
+     */
+    size?: DotSize;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+export declare const Dot: import("react").ForwardRefExoticComponent<DotProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Dot.d.ts.map

package/dist/types/src/components/dot/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dot';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
 export * from './divider';
+export * from './dot';
 export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';

package/dist/types/src/components/modal/Modal.d.ts

@@ -25,14 +25,14 @@ export declare const Modal: {
      *
      * 1. Vertical layout (buttons stacked):
      * <Modal.Actions layout="vertical" align="stretch">
-     *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
-     *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
      * </Modal.Actions>
      *
      * 2. Horizontal layout (buttons side by side):
      * <Modal.Actions layout="horizontal" align="stretch">
-     *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
-     *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
      * </Modal.Actions>
      *
      * 3. Checkbox layout (checkbox on left, buttons on right):
@@ -42,8 +42,8 @@ export declare const Modal: {
      *     <a href="#">Settings</a>
      *   </>
      * }>
-     *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
-     *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
      * </Modal.Actions>
      */
     Actions({ children, layout, showDivider, align, checkboxContent, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/tag/Tag.d.ts

@@ -1,19 +1,15 @@
-import { IconName } from '@ncds/ui-admin-icon';
-import { FC, MouseEventHandler } from 'react';
-import { COLOR } from '../../../constant/color';
+import { MouseEventHandler } from 'react';
 import { Size } from '../../../constant/size';
-type TagIcon = {
-    name: IconName | 'dot';
-    color?: keyof typeof COLOR;
-};
+import { SideSlotType } from '../../types/side-slot';
 interface TagProps {
     size?: Extract<Size, 'sm' | 'md'>;
-    icon?: TagIcon;
+    icon?: SideSlotType;
     text: string;
     count?: string;
     close?: boolean;
+    children?: React.ReactNode;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
 }
-export declare const Tag: FC<TagProps>;
+export declare const Tag: ({ size, icon, text, count, close, onButtonClick }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tag.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -51,6 +51,14 @@
   --orange-500: #e4501e;
   --orange-600: #b93815;
   --orange-700: #772917;
+  --violet-50: #fbfaff;
+  --violet-100: #ece9fe;
+  --violet-200: #ddd6fe;
+  --violet-300: #c3b5fd;
+  --violet-400: #a48afb;
+  --violet-500: #6927da;
+  --violet-600: #5720b7;
+  --violet-700: #3e1486;
   --focus-ring-4px-primary-100: 0px 0px 0px 3px #ffeaee;
   --focus-ring-4px-gray-100: 0px 0px 0px 3px #f2f4f7;
   --focus-ring-4px-error-100: 0px 0px 0px 3px #fee4e2;
@@ -532,9 +540,11 @@ button {
   color: var(--gray-600);
 }
 :where(.ncua-button-group.has-border) {
-  outline: 1px solid var(--gray-200);
   box-shadow: var(--shadow-xs);
 }
+:where(.ncua-button-group.has-border) .ncua-button-group__item {
+  border: 1px solid var(--gray-200);
+}
 :where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
   background-color: var(--gray-50);
 }
@@ -546,7 +556,7 @@ button {
   background-color: var(--gray-50);
 }
 :where(.ncua-button-group.has-border) .ncua-button-group__item:nth-child(n+2) {
-  border-left: 1px solid var(--gray-200);
+  border-inline-start-width: 0;
 }
 :where(.ncua-button-group.has-border) .ncua-button-group__item svg {
   display: block;
@@ -567,7 +577,7 @@ button {
   background-color: var(--gray-200);
 }
 .ncua-button-group--xs .ncua-button-group__item {
-  padding: 5px 12px;
+  padding: 4px 12px;
   font-size: var(--font-size-xxxs);
   line-height: var(--line-heights-xxxs);
   font-weight: var(--font-weights-commerce-sans-1);
@@ -575,12 +585,17 @@ button {
 .ncua-button-group--xs .ncua-button-group__item.is-only-icon {
   padding: 6px;
 }
-:where(.ncua-button-group--xs.has-border) {
-  border-radius: 4px;
+:where(.ncua-button-group--xs.has-border) .ncua-button-group__item:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+:where(.ncua-button-group--xs.has-border) .ncua-button-group__item:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .ncua-button-group--sm .ncua-button-group__item {
-  padding: 5px 16px;
+  padding: 4px 16px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
@@ -588,8 +603,13 @@ button {
 .ncua-button-group--sm .ncua-button-group__item.is-only-icon {
   padding: 6px;
 }
-:where(.ncua-button-group--sm.has-border) {
-  border-radius: 6px;
+:where(.ncua-button-group--sm.has-border) .ncua-button-group__item:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+:where(.ncua-button-group--sm.has-border) .ncua-button-group__item:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 
 .ncua-button-group--md .ncua-button-group__item {
@@ -601,12 +621,17 @@ button {
 .ncua-button-group--md .ncua-button-group__item.is-only-icon {
   padding: 10px;
 }
-:where(.ncua-button-group--md.has-border) {
-  border-radius: 6px;
+:where(.ncua-button-group--md.has-border) .ncua-button-group__item:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+:where(.ncua-button-group--md.has-border) .ncua-button-group__item:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 
 .ncua-button-group--lg .ncua-button-group__item {
-  padding: 9px 16px;
+  padding: 8px 16px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
@@ -614,8 +639,13 @@ button {
 .ncua-button-group--lg .ncua-button-group__item.is-only-icon {
   padding: 10px;
 }
-:where(.ncua-button-group--lg.has-border) {
-  border-radius: 8px;
+:where(.ncua-button-group--lg.has-border) .ncua-button-group__item:first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+:where(.ncua-button-group--lg.has-border) .ncua-button-group__item:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
 
 .ncua-btn-close {
@@ -917,9 +947,9 @@ button {
   border-radius: 8px;
 }
 .ncua-divider--text {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-1);
-  line-height: var(--line-heights-sm);
+  line-height: var(--line-heights-xs);
   color: var(--gray-500);
 }
 .ncua-divider--heading {
@@ -929,6 +959,48 @@ button {
   color: var(--gray-700);
 }
 
+.ncua-dot {
+  display: inline-block;
+  border-radius: 50%;
+  margin: 1px;
+}
+.ncua-dot--sm {
+  width: 6px;
+  height: 6px;
+}
+.ncua-dot--md {
+  width: 8px;
+  height: 8px;
+}
+.ncua-dot--lg {
+  width: 10px;
+  height: 10px;
+}
+.ncua-dot--neutral {
+  background-color: var(--gray-500);
+}
+.ncua-dot--error {
+  background-color: var(--primary-red-500);
+}
+.ncua-dot--warning {
+  background-color: var(--orange-500);
+}
+.ncua-dot--success {
+  background-color: var(--green-500);
+}
+.ncua-dot--blue {
+  background-color: var(--blue-500);
+}
+.ncua-dot--pink {
+  background-color: var(--pink-500);
+}
+.ncua-dot--violet {
+  background-color: var(--violet-500);
+}
+.ncua-dot--disabled {
+  background-color: var(--gray-300);
+}
+
 .ncua-dropdown {
   position: relative;
   display: inline-block;
@@ -1512,6 +1584,9 @@ button {
 .ncua-modal__header--horizontal .ncua-modal__title {
   flex: 1;
 }
+.ncua-modal__header--close-button.ncua-modal__header--left {
+  padding: 20px 56px 20px 16px;
+}
 
 .ncua-modal__title {
   display: flex;
@@ -1534,22 +1609,21 @@ button {
 
 .ncua-modal__close-button {
   position: absolute;
-  top: 16px;
-  right: 20px;
-  width: 24px;
-  height: 24px;
+  top: 10px;
+  right: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: 0;
+  padding: 8px;
   color: var(--gray-400);
   border-radius: 8px;
 }
-.ncua-modal__close-button:hover {
-  background-color: var(--gray-50);
+.ncua-modal__close-button svg {
+  width: 20px;
+  height: 20px;
 }
 
 .ncua-modal__content {
@@ -2093,24 +2167,9 @@ button {
   white-space: nowrap;
   word-wrap: break-word;
 }
-.ncua-tag > svg {
+.ncua-tag > svg, .ncua-tag > .ncua-dot {
   margin-right: 4px;
 }
-.ncua-tag--dot .ncua-tag__text {
-  position: relative;
-  padding-left: 12px;
-}
-.ncua-tag--dot .ncua-tag__text::before {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  content: "";
-  transform: translateY(-50%);
-  width: 6px;
-  height: 6px;
-  background-color: var(--primary-red-500);
-  border-radius: 50%;
-}
 .ncua-tag__count {
   display: inline-flex;
   align-items: center;
@@ -2891,15 +2950,21 @@ button {
 .ncua-date-picker .flatpickr-day.today {
   border-color: var(--gray-600);
 }
-.ncua-date-picker--sm .flatpickr-wrapper {
+.ncua-date-picker--sm {
   width: 138px;
   height: 28px;
+}
+.ncua-date-picker--sm .flatpickr-wrapper {
+  height: 100%;
   padding: 5px 10px;
   font-size: var(--font-size-xs);
 }
-.ncua-date-picker--md .flatpickr-wrapper {
+.ncua-date-picker--md {
   width: 156px;
   height: 36px;
+}
+.ncua-date-picker--md .flatpickr-wrapper {
+  height: 100%;
   padding: 7px 12px;
   font-size: var(--font-size-sm);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",