@ncds/ui-admin 0.0.31 → 0.0.33

package/dist/cjs/src/hooks/useMediaQuery.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMediaQuery = void 0;
+var _react = require("react");
+var useMediaQuery = function (query, options) {
+  var _a = (0, _react.useState)(false),
+    matches = _a[0],
+    setMatches = _a[1];
+  (0, _react.useEffect)(function () {
+    var mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    var handleChange = function (e) {
+      var _a;
+      setMatches(e.matches);
+      if (e.matches) {
+        (_a = options === null || options === void 0 ? void 0 : options.onMatched) === null || _a === void 0 ? void 0 : _a.call(options);
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query, options === null || options === void 0 ? void 0 : options.onMatched]);
+  return matches;
+};
+exports.useMediaQuery = useMediaQuery;

package/dist/esm/constant/color.js

@@ -1,4 +1,5 @@
 export var COLOR = {
+  gray100: '#EAECF0',
   gray200: '#D0D5DD',
   gray300: '#98A2B3',
   gray400: '#667085',

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

@@ -9,11 +9,12 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
-import { svgSize } from '../button';
 import classNames from 'classnames';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { sideSlotRender } from './utils';
+/**
+ * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
+ */
+var BADGE_ICON_SIZE = 12;
 export var Badge = function (_a) {
   var label = _a.label,
     _b = _a.type,
@@ -25,31 +26,19 @@ export var Badge = function (_a) {
     trailingIcon = _a.trailingIcon,
     _d = _a.size,
     size = _d === void 0 ? 'sm' : _d;
-  var sideSlotRender = function (slot) {
-    var _a, _b, _c, _d;
-    if (slot.type === 'icon') {
-      return _jsx(Icon, {
-        name: slot.icon,
-        height: (_a = slot.size) !== null && _a !== void 0 ? _a : svgSize[size],
-        width: (_b = slot.size) !== null && _b !== void 0 ? _b : svgSize[size],
-        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({
     className: classNames('ncua-badge', "ncua-badge--".concat(type), "ncua-badge--".concat(color), "ncua-badge--".concat(size), className)
   }, {
-    children: [leadingIcon && sideSlotRender(leadingIcon), _jsx("span", __assign({
+    children: [leadingIcon && sideSlotRender({
+      slot: leadingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    }), _jsx("span", __assign({
       className: "ncua-badge__label"
     }, {
       children: label
-    })), trailingIcon && sideSlotRender(trailingIcon)]
+    })), trailingIcon && sideSlotRender({
+      slot: trailingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    })]
   }));
 };

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

@@ -0,0 +1,54 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Badge } from '.';
+import { sideSlotRender } from './utils';
+var DEFAULT_GROUP_ICON_SIZE = 14;
+export var BadgeGroup = function (_a) {
+  var groupLabel = _a.groupLabel,
+    groupIcon = _a.groupIcon,
+    groupClassName = _a.groupClassName,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
+    href = _a.href,
+    _d = _a.target,
+    target = _d === void 0 ? '_blank' : _d,
+    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size", "href", "target"]);
+  return _jsxs("a", __assign({
+    className: classNames('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName),
+    href: href,
+    target: target
+  }, {
+    children: [_jsx(Badge, __assign({
+      type: "pill-dark-color",
+      color: color,
+      size: size
+    }, props)), _jsx("span", __assign({
+      className: "ncua-badge-group__label"
+    }, {
+      children: groupLabel
+    })), groupIcon && sideSlotRender({
+      slot: groupIcon,
+      defaultIconSize: DEFAULT_GROUP_ICON_SIZE
+    })]
+  }));
+};

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

@@ -1 +1,2 @@
-export * from './Badge';
+export * from './Badge';
+export * from './BadgeGroup';

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot/Dot';
+var DEFAULT_DOT_COLOR = 'neutral';
+export var sideSlotRender = function (_a) {
+  var _b, _c, _d, _e;
+  var slot = _a.slot,
+    defaultIconSize = _a.defaultIconSize;
+  if (slot.type === 'icon') {
+    return _jsx(Icon, {
+      name: slot.icon,
+      height: (_b = slot.size) !== null && _b !== void 0 ? _b : defaultIconSize,
+      width: (_c = slot.size) !== null && _c !== void 0 ? _c : defaultIconSize,
+      color: slot.color ? COLOR[slot.color] : undefined
+    });
+  }
+  if (slot.type === 'dot') {
+    return _jsx(Dot, {
+      color: (_d = slot.color) !== null && _d !== void 0 ? _d : DEFAULT_DOT_COLOR,
+      size: (_e = slot.size) !== null && _e !== void 0 ? _e : 'sm'
+    });
+  }
+  return slot.children;
+};

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

@@ -0,0 +1,36 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classnames from 'classnames';
+var svgSize = {
+  xs: 16,
+  sm: 20,
+  md: 20,
+  lg: 24
+};
+export var ButtonCloseX = function (_a) {
+  var size = _a.size,
+    _b = _a.theme,
+    theme = _b === void 0 ? 'light' : _b,
+    className = _a.className,
+    onClick = _a.onClick;
+  return _jsx("button", __assign({
+    className: classnames('ncua-button-close-x', "ncua-button-close-x--".concat(size), "ncua-button-close-x--".concat(theme), className),
+    onClick: onClick
+  }, {
+    children: _jsx(Icon, {
+      name: "x-close",
+      width: svgSize[size],
+      height: svgSize[size]
+    })
+  }));
+};

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

@@ -20,10 +20,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import 'flatpickr/dist/flatpickr.css';
 import { Korean } from 'flatpickr/dist/l10n/ko';
-import { useRef } from 'react';
+import { forwardRef } from 'react';
 import Flatpickr from 'react-flatpickr';
 import { COLOR } from '../../../constant/color';
-export var DatePicker = function (_a) {
+export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
@@ -32,7 +32,6 @@ export var DatePicker = function (_a) {
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
-  var ref = useRef(null);
   var onChangeDateHandler = function (dateTimeStamp, dateStr) {
     return onChangeDate(dateStr);
   };
@@ -52,7 +51,7 @@ export var DatePicker = function (_a) {
     })
   }, {
     children: [_jsx(Flatpickr, __assign({}, attrs, {
-      ref: ref,
+      ref: ref || undefined,
       className: classNames('ncua-date-picker__input'),
       options: options,
       value: currentDate
@@ -76,4 +75,5 @@ export var DatePicker = function (_a) {
       }))
     }))]
   }));
-};
+});
+DatePicker.displayName = 'DatePicker';

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

@@ -9,12 +9,12 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, forwardRef } from 'react';
 import { isNil } from 'lodash';
 import moment from 'moment';
 import { DatePicker } from './DatePicker';
 import { getDateFormat } from './utils';
-export var RangeDatePicker = function (_a) {
+export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
@@ -38,6 +38,7 @@ export var RangeDatePicker = function (_a) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) return;
     var _a = validationOption.setting,
       unit = _a.unit,
       period = _a.period;
@@ -78,7 +79,7 @@ export var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('start', !isValidPeriod);
     }
-  }, [startDateOptions.currentDate]);
+  }, [startDateOptions.currentDate, endDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   useEffect(function () {
     var _a;
     var needResetDate = validateDateType(endDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
@@ -101,10 +102,16 @@ export var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('end', !isValidPeriod);
     }
-  }, [endDateOptions.currentDate]);
+  }, [endDateOptions.currentDate, startDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   return _jsxs("div", __assign({
-    className: "ncua-range-date-picker"
+    className: "ncua-range-date-picker",
+    ref: ref || undefined
   }, {
-    children: [_jsx(DatePicker, __assign({}, startDateOptions)), "-", _jsx(DatePicker, __assign({}, endDateOptions))]
+    children: [_jsx(DatePicker, __assign({}, startDateOptions, {
+      ref: undefined
+    })), "-", _jsx(DatePicker, __assign({}, endDateOptions, {
+      ref: undefined
+    }))]
   }));
-};
+});
+RangeDatePicker.displayName = 'RangeDatePicker';

package/dist/esm/src/components/dropdown/Dropdown.js

@@ -17,10 +17,16 @@ export var Dropdown = function (_a) {
     align = _b === void 0 ? 'left' : _b,
     header = _a.header,
     groups = _a.groups,
-    className = _a.className;
-  var _c = useState(false),
-    isOpen = _c[0],
-    setIsOpen = _c[1];
+    className = _a.className,
+    _c = _a.opened,
+    opened = _c === void 0 ? false : _c,
+    _d = _a.closeOnClickItem,
+    closeOnClickItem = _d === void 0 ? true : _d,
+    _e = _a.closeOnClickOutside,
+    closeOnClickOutside = _e === void 0 ? true : _e;
+  var _f = useState(opened),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
   var dropdownRef = useRef(null);
   var toggleDropdown = function () {
     setIsOpen(!isOpen);
@@ -33,15 +39,19 @@ export var Dropdown = function (_a) {
   var handleClickItem = function (item) {
     if (!item.disabled && item.onClick) {
       item.onClick();
-      setIsOpen(false);
+      if (closeOnClickItem) {
+        setIsOpen(false);
+      }
     }
   };
   useEffect(function () {
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+    if (closeOnClickOutside) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [closeOnClickOutside]);
   var renderTrigger = function () {
     switch (trigger.type) {
       case 'custom':

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

@@ -20,8 +20,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
+import { ButtonCloseX } from '../button/ButtonCloseX';
 import { FeaturedIcon } from '../featured-icon';
-import Icon from '@ncds/ui-admin-icon';
 export var Modal = function (_a) {
   var isOpen = _a.isOpen,
     onClose = _a.onClose,
@@ -104,14 +104,12 @@ Modal.Header = function (_a) {
         }, {
           children: subtitle
         }))]
-      })), children, !hideCloseButton && _jsx("button", __assign({
+      })), children, !hideCloseButton && _jsx(ButtonCloseX, {
         className: "ncua-modal__close-button",
+        size: "sm",
+        theme: "light",
         onClick: onClose
-      }, {
-        children: _jsx(Icon, {
-          name: "x"
-        })
-      }))]
+      })]
     })), showDivider && _jsx("div", {
       className: "ncua-modal__header-divider"
     })]

package/dist/esm/src/components/notification/FloatingNotification.js

@@ -16,11 +16,14 @@ 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 { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-import Icon from '@ncds/ui-admin-icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
+import { MEDIA_QUERY } from '../../constant/breakpoint';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
+import { Button } from '../button';
+import { ButtonCloseX } from '../button/ButtonCloseX';
+import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
 var iconNameMap = {
   neutral: 'pin-02',
   error: 'alert-triangle',
@@ -30,22 +33,25 @@ var iconNameMap = {
 export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'neutral' : _b,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
-  var iconColor = variant;
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+  var iconColor = color;
   var featuredIconProps = {
-    name: iconNameMap[variant],
+    name: iconNameMap[color],
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
   };
+  var isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
+    onMatched: onClose
+  });
   return _jsxs("div", __assign({
     ref: ref,
-    className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(variant), className),
+    className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: [_jsx("div", __assign({
@@ -54,14 +60,9 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
       children: _jsxs("div", __assign({
         className: "ncua-floating-notification__container"
       }, {
-        children: [iconNameMap[variant] && _jsxs(_Fragment, {
-          children: [_jsx(FeaturedIcon, __assign({}, featuredIconProps, {
-            className: "ncua-floating-notification__pc-icon"
-          })), _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
-            size: "md",
-            className: "ncua-floating-notification__mobile-icon"
-          }))]
-        }), _jsxs("div", __assign({
+        children: [iconNameMap[color] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+          size: isMobile ? 'md' : 'sm'
+        })), _jsxs("div", __assign({
           className: "ncua-floating-notification__text-container"
         }, {
           children: [_jsx("div", __assign({
@@ -79,19 +80,22 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
           })), actions && _jsx("div", __assign({
             className: "ncua-floating-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return _jsx(Button, {
+                size: "xs",
+                hierarchy: action.hierarchy || 'link',
+                label: action.label,
+                onClick: action === null || action === void 0 ? void 0 : action.onClick
+              }, "".concat(action.label, "-").concat(action.hierarchy));
+            })
           }))]
         }))]
       }))
-    })), onClose && _jsx("button", __assign({
-      type: "button",
+    })), onClose && _jsx(ButtonCloseX, {
+      theme: "light",
       className: "ncua-floating-notification__close-button",
-      onClick: onClose,
-      "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
-    }, {
-      children: _jsx(Icon, {
-        name: "x"
-      })
-    }))]
+      size: isMobile ? 'sm' : 'xs',
+      onClick: onClose
+    })]
   }));
 });

package/dist/esm/src/components/notification/FullWidthNotification.js

@@ -36,19 +36,19 @@ var iconColorMap = {
 export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'neutral' : _b,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
   var closeIconSize = {
     width: 20,
     height: 20
   };
   return _jsx("div", __assign({
     ref: ref,
-    className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(variant), className),
+    className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: _jsx("div", __assign({
@@ -61,10 +61,10 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
           className: "ncua-full-width-notification__content-wrapper"
         }, {
           children: [_jsx(Icon, {
-            name: iconNameMap[variant],
+            name: iconNameMap[color],
             width: 16,
             height: 16,
-            color: COLOR[iconColorMap[variant]],
+            color: COLOR[iconColorMap[color]],
             className: "ncua-full-width-notification__icon"
           }), _jsxs("div", __assign({
             className: "ncua-full-width-notification__text-container"
@@ -85,7 +85,14 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
           children: [actions && _jsx("div", __assign({
             className: "ncua-full-width-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return _jsx("button", __assign({
+                onClick: action.onClick,
+                className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link'))
+              }, {
+                children: action.label
+              }), "".concat(action.label, "-").concat(action.hierarchy));
+            })
           })), onClose && _jsx("button", __assign({
             type: "button",
             className: "ncua-full-width-notification__close-button",
@@ -95,7 +102,7 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: _jsx(Icon, __assign({
               name: "x-close"
             }, closeIconSize, {
-              color: COLOR[iconColorMap[variant]]
+              color: COLOR[iconColorMap[color]]
             }))
           }))]
         }))]

package/dist/esm/src/components/notification/Notification.js

@@ -16,43 +16,23 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import classNames from 'classnames';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
 export var Notification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.type,
     type = _b === void 0 ? 'floating' : _b,
-    title = _a.title,
-    supportingText = _a.supportingText,
-    _c = _a.variant,
-    variant = _c === void 0 ? 'neutral' : _c,
-    onClose = _a.onClose,
-    className = _a.className,
-    actions = _a.actions,
-    rest = __rest(_a, ["type", "title", "supportingText", "variant", "onClose", "className", "actions"]);
-  var actionsContent = actions && actions.length > 0 ? _jsx(_Fragment, {
-    children: actions.map(function (action, index) {
-      return _jsx("button", __assign({
-        onClick: action.onClick,
-        className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link-gray'))
-      }, {
-        children: action.label
-      }), index);
-    })
-  }) : null;
-  var sharedProps = __assign({
-    title: title,
-    supportingText: supportingText,
-    variant: variant,
-    onClose: onClose,
-    className: className,
-    actions: actionsContent
-  }, rest);
-  return type === 'floating' ? _jsx(FloatingNotification, __assign({}, sharedProps, {
+    _c = _a.color,
+    color = _c === void 0 ? 'neutral' : _c,
+    rest = __rest(_a, ["type", "color"]);
+  return type === 'floating' ? _jsx(FloatingNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
-  })) : _jsx(FullWidthNotification, __assign({}, sharedProps, {
+  })) : _jsx(FullWidthNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
   }));
 });

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

@@ -1,3 +1,3 @@
+export * from './Notification';
 export * from './FloatingNotification';
-export * from './FullWidthNotification';
-export * from './Notification';
+export * from './FullWidthNotification';

package/dist/esm/src/constant/breakpoint.js

@@ -0,0 +1,6 @@
+export var BREAKPOINT = {
+  mobile: '768px'
+};
+export var MEDIA_QUERY = {
+  mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")")
+};

package/dist/esm/src/hooks/useMediaQuery.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+export var useMediaQuery = function (query, options) {
+  var _a = useState(false),
+    matches = _a[0],
+    setMatches = _a[1];
+  useEffect(function () {
+    var mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    var handleChange = function (e) {
+      var _a;
+      setMatches(e.matches);
+      if (e.matches) {
+        (_a = options === null || options === void 0 ? void 0 : options.onMatched) === null || _a === void 0 ? void 0 : _a.call(options);
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query, options === null || options === void 0 ? void 0 : options.onMatched]);
+  return matches;
+};

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

@@ -1,4 +1,5 @@
 export declare const COLOR: {
+    gray100: string;
     gray200: string;
     gray300: string;
     gray400: string;

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

@@ -0,0 +1,17 @@
+import { ColorTone } from 'ui-admin/constant/color';
+import { BadgeProps } from '.';
+import { Size } from '../../../constant/size';
+import { SideSlotType } from '../../types/side-slot';
+export type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
+export type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
+export type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
+    groupLabel: string;
+    groupIcon?: SideSlotType;
+    groupClassName?: string;
+    size?: BadgeGroupSize;
+    color?: BadgeGroupColor;
+    href?: string;
+    target?: string;
+};
+export declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, href, target, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BadgeGroup.d.ts.map