@ncds/ui-admin 0.0.26 → 0.0.28

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';
@@ -99,7 +113,8 @@ ButtonGroup.Item = function (_a) {
     }, {
       'is-current': isCurrent
     }),
-    disabled: disabled
+    disabled: disabled,
+    type: as === 'button' ? 'button' : undefined
   }, props), (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
   }));

package/dist/cjs/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -21,7 +21,9 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var RangeDatePickerWithButtons = function (_a) {
-  var currentButtonId = _a.currentButtonId,
+  var _b = _a.buttonGroupSize,
+    buttonGroupSize = _b === void 0 ? 'sm' : _b,
+    currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
@@ -60,7 +62,7 @@ var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [(0, _jsxRuntime.jsx)(_button.ButtonGroup, __assign({
-      size: "sm"
+      size: buttonGroupSize
     }, {
       children: periodKeys.map(function (key) {
         return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {

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/select/Select.js

@@ -29,7 +29,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 /**
- * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var icon = _a.icon,
@@ -87,14 +87,6 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
             children: item.label
           }), "option-".concat(index));
         }), children]
-      })), destructive && (0, _jsxRuntime.jsx)("div", __assign({
-        className: "ncua-select__destructive-icon"
-      }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-          name: "info-circle",
-          width: 14,
-          height: 14
-        })
       }))]
     })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
       destructive: destructive,

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';
@@ -89,7 +103,8 @@ ButtonGroup.Item = function (_a) {
     }, {
       'is-current': isCurrent
     }),
-    disabled: disabled
+    disabled: disabled,
+    type: as === 'button' ? 'button' : undefined
   }, props), _jsxs(_Fragment, {
     children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
   }));

package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -15,7 +15,9 @@ import { ButtonGroup } from '../button';
 import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
 import { PERIOD_ITEM } from '../../constant/date-picker';
 export var RangeDatePickerWithButtons = function (_a) {
-  var currentButtonId = _a.currentButtonId,
+  var _b = _a.buttonGroupSize,
+    buttonGroupSize = _b === void 0 ? 'sm' : _b,
+    currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
@@ -54,7 +56,7 @@ export var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [_jsx(ButtonGroup, __assign({
-      size: "sm"
+      size: buttonGroupSize
     }, {
       children: periodKeys.map(function (key) {
         return _jsx(ButtonGroup.Item, {

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';