@ncds/ui-admin 0.0.31 → 0.0.33

package/dist/cjs/constant/color.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.COLOR = void 0;
 var COLOR = exports.COLOR = {
+  gray100: '#EAECF0',
   gray200: '#D0D5DD',
   gray300: '#98A2B3',
   gray400: '#667085',

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

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Badge = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-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");
+var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -21,6 +18,10 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+/**
+ * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
+ */
+var BADGE_ICON_SIZE = 12;
 var Badge = function (_a) {
   var label = _a.label,
     _b = _a.type,
@@ -32,32 +33,20 @@ 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 (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-        name: slot.icon,
-        height: (_a = slot.size) !== null && _a !== void 0 ? _a : _button.svgSize[size],
-        width: (_b = slot.size) !== null && _b !== void 0 ? _b : _button.svgSize[size],
-        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({
     className: (0, _classnames.default)('ncua-badge', "ncua-badge--".concat(type), "ncua-badge--".concat(color), "ncua-badge--".concat(size), className)
   }, {
-    children: [leadingIcon && sideSlotRender(leadingIcon), (0, _jsxRuntime.jsx)("span", __assign({
+    children: [leadingIcon && (0, _utils.sideSlotRender)({
+      slot: leadingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    }), (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-badge__label"
     }, {
       children: label
-    })), trailingIcon && sideSlotRender(trailingIcon)]
+    })), trailingIcon && (0, _utils.sideSlotRender)({
+      slot: trailingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    })]
   }));
 };
 exports.Badge = Badge;

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeGroup = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ = require(".");
+var _utils = require("./utils");
+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 DEFAULT_GROUP_ICON_SIZE = 14;
+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 (0, _jsxRuntime.jsxs)("a", __assign({
+    className: (0, _classnames.default)('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName),
+    href: href,
+    target: target
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_.Badge, __assign({
+      type: "pill-dark-color",
+      color: color,
+      size: size
+    }, props)), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-badge-group__label"
+    }, {
+      children: groupLabel
+    })), groupIcon && (0, _utils.sideSlotRender)({
+      slot: groupIcon,
+      defaultIconSize: DEFAULT_GROUP_ICON_SIZE
+    })]
+  }));
+};
+exports.BadgeGroup = BadgeGroup;

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

@@ -13,4 +13,15 @@ Object.keys(_Badge).forEach(function (key) {
       return _Badge[key];
     }
   });
+});
+var _BadgeGroup = require("./BadgeGroup");
+Object.keys(_BadgeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BadgeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BadgeGroup[key];
+    }
+  });
 });

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sideSlotRender = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _color = require("../../../constant/color");
+var _Dot = require("../dot/Dot");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DEFAULT_DOT_COLOR = 'neutral';
+var sideSlotRender = function (_a) {
+  var _b, _c, _d, _e;
+  var slot = _a.slot,
+    defaultIconSize = _a.defaultIconSize;
+  if (slot.type === 'icon') {
+    return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      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.COLOR[slot.color] : undefined
+    });
+  }
+  if (slot.type === 'dot') {
+    return (0, _jsxRuntime.jsx)(_Dot.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;
+};
+exports.sideSlotRender = sideSlotRender;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonCloseX = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+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 svgSize = {
+  xs: 16,
+  sm: 20,
+  md: 20,
+  lg: 24
+};
+var ButtonCloseX = function (_a) {
+  var size = _a.size,
+    _b = _a.theme,
+    theme = _b === void 0 ? 'light' : _b,
+    className = _a.className,
+    onClick = _a.onClick;
+  return (0, _jsxRuntime.jsx)("button", __assign({
+    className: (0, _classnames.default)('ncua-button-close-x', "ncua-button-close-x--".concat(size), "ncua-button-close-x--".concat(theme), className),
+    onClick: onClick
+  }, {
+    children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      name: "x-close",
+      width: svgSize[size],
+      height: svgSize[size]
+    })
+  }));
+};
+exports.ButtonCloseX = ButtonCloseX;

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

@@ -30,7 +30,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-var DatePicker = function (_a) {
+var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
@@ -39,7 +39,6 @@ var DatePicker = function (_a) {
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
-  var ref = (0, _react.useRef)(null);
   var onChangeDateHandler = function (dateTimeStamp, dateStr) {
     return onChangeDate(dateStr);
   };
@@ -59,7 +58,7 @@ var DatePicker = function (_a) {
     })
   }, {
     children: [(0, _jsxRuntime.jsx)(_reactFlatpickr.default, __assign({}, attrs, {
-      ref: ref,
+      ref: ref || undefined,
       className: (0, _classnames.default)('ncua-date-picker__input'),
       options: options,
       value: currentDate
@@ -83,5 +82,5 @@ var DatePicker = function (_a) {
       }))
     }))]
   }));
-};
-exports.DatePicker = DatePicker;
+});
+DatePicker.displayName = 'DatePicker';

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

@@ -21,7 +21,7 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-var RangeDatePicker = function (_a) {
+var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
@@ -45,6 +45,7 @@ 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;
@@ -85,7 +86,7 @@ var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('start', !isValidPeriod);
     }
-  }, [startDateOptions.currentDate]);
+  }, [startDateOptions.currentDate, endDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   (0, _react.useEffect)(function () {
     var _a;
     var needResetDate = validateDateType(endDateOptions.currentDate) && !(0, _lodash.isNil)((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
@@ -108,11 +109,16 @@ var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('end', !isValidPeriod);
     }
-  }, [endDateOptions.currentDate]);
+  }, [endDateOptions.currentDate, startDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: "ncua-range-date-picker"
+    className: "ncua-range-date-picker",
+    ref: ref || undefined
   }, {
-    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions)), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions))]
+    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
+      ref: undefined
+    })), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
+      ref: undefined
+    }))]
   }));
-};
-exports.RangeDatePicker = RangeDatePicker;
+});
+RangeDatePicker.displayName = 'RangeDatePicker';

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

@@ -24,10 +24,16 @@ var Dropdown = function (_a) {
     align = _b === void 0 ? 'left' : _b,
     header = _a.header,
     groups = _a.groups,
-    className = _a.className;
-  var _c = (0, _react.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 = (0, _react.useState)(opened),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
   var dropdownRef = (0, _react.useRef)(null);
   var toggleDropdown = function () {
     setIsOpen(!isOpen);
@@ -40,15 +46,19 @@ var Dropdown = function (_a) {
   var handleClickItem = function (item) {
     if (!item.disabled && item.onClick) {
       item.onClick();
-      setIsOpen(false);
+      if (closeOnClickItem) {
+        setIsOpen(false);
+      }
     }
   };
   (0, _react.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/cjs/src/components/modal/Modal.js

@@ -8,8 +8,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _ButtonCloseX = require("../button/ButtonCloseX");
 var _featuredIcon = require("../featured-icon");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -112,14 +112,12 @@ Modal.Header = function (_a) {
         }, {
           children: subtitle
         }))]
-      })), children, !hideCloseButton && (0, _jsxRuntime.jsx)("button", __assign({
+      })), children, !hideCloseButton && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
         className: "ncua-modal__close-button",
+        size: "sm",
+        theme: "light",
         onClick: onClose
-      }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-          name: "x"
-        })
-      }))]
+      })]
     })), showDivider && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-modal__header-divider"
     })]

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

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FloatingNotification = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _breakpoint = require("../../constant/breakpoint");
+var _useMediaQuery = require("../../hooks/useMediaQuery");
+var _button = require("../button");
+var _ButtonCloseX = require("../button/ButtonCloseX");
+var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -37,22 +40,25 @@ var iconNameMap = {
 var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.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 = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
+    onMatched: onClose
+  });
   return (0, _jsxRuntime.jsxs)("div", __assign({
     ref: ref,
-    className: (0, _classnames.default)('ncua-floating-notification', "ncua-floating-notification--".concat(variant), className),
+    className: (0, _classnames.default)('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: [(0, _jsxRuntime.jsx)("div", __assign({
@@ -61,14 +67,9 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
       children: (0, _jsxRuntime.jsxs)("div", __assign({
         className: "ncua-floating-notification__container"
       }, {
-        children: [iconNameMap[variant] && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
-            className: "ncua-floating-notification__pc-icon"
-          })), (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
-            size: "md",
-            className: "ncua-floating-notification__mobile-icon"
-          }))]
-        }), (0, _jsxRuntime.jsxs)("div", __assign({
+        children: [iconNameMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+          size: isMobile ? 'md' : 'sm'
+        })), (0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-floating-notification__text-container"
         }, {
           children: [(0, _jsxRuntime.jsx)("div", __assign({
@@ -86,19 +87,22 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
           })), actions && (0, _jsxRuntime.jsx)("div", __assign({
             className: "ncua-floating-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return (0, _jsxRuntime.jsx)(_button.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 && (0, _jsxRuntime.jsx)("button", __assign({
-      type: "button",
+    })), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+      theme: "light",
       className: "ncua-floating-notification__close-button",
-      onClick: onClose,
-      "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
-    }, {
-      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-        name: "x"
-      })
-    }))]
+      size: isMobile ? 'sm' : 'xs',
+      onClick: onClose
+    })]
   }));
 });

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

@@ -43,19 +43,19 @@ var iconColorMap = {
 var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _react.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 (0, _jsxRuntime.jsx)("div", __assign({
     ref: ref,
-    className: (0, _classnames.default)('ncua-full-width-notification', "ncua-full-width-notification--".concat(variant), className),
+    className: (0, _classnames.default)('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: (0, _jsxRuntime.jsx)("div", __assign({
@@ -68,10 +68,10 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
           className: "ncua-full-width-notification__content-wrapper"
         }, {
           children: [(0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-            name: iconNameMap[variant],
+            name: iconNameMap[color],
             width: 16,
             height: 16,
-            color: _color.COLOR[iconColorMap[variant]],
+            color: _color.COLOR[iconColorMap[color]],
             className: "ncua-full-width-notification__icon"
           }), (0, _jsxRuntime.jsxs)("div", __assign({
             className: "ncua-full-width-notification__text-container"
@@ -92,7 +92,14 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
           children: [actions && (0, _jsxRuntime.jsx)("div", __assign({
             className: "ncua-full-width-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return (0, _jsxRuntime.jsx)("button", __assign({
+                onClick: action.onClick,
+                className: (0, _classnames.default)('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link'))
+              }, {
+                children: action.label
+              }), "".concat(action.label, "-").concat(action.hierarchy));
+            })
           })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
             type: "button",
             className: "ncua-full-width-notification__close-button",
@@ -102,7 +109,7 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
             children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, __assign({
               name: "x-close"
             }, closeIconSize, {
-              color: _color.COLOR[iconColorMap[variant]]
+              color: _color.COLOR[iconColorMap[color]]
             }))
           }))]
         }))]

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

@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.Notification = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
-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++) {
@@ -31,35 +29,16 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var Notification = exports.Notification = /*#__PURE__*/(0, _react.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 ? (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: actions.map(function (action, index) {
-      return (0, _jsxRuntime.jsx)("button", __assign({
-        onClick: action.onClick,
-        className: (0, _classnames.default)('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' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({}, sharedProps, {
+    _c = _a.color,
+    color = _c === void 0 ? 'neutral' : _c,
+    rest = __rest(_a, ["type", "color"]);
+  return type === 'floating' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
-  })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({}, sharedProps, {
+  })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
   }));
 });

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

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _Notification = require("./Notification");
+Object.keys(_Notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Notification[key];
+    }
+  });
+});
 var _FloatingNotification = require("./FloatingNotification");
 Object.keys(_FloatingNotification).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,15 +35,4 @@ Object.keys(_FullWidthNotification).forEach(function (key) {
       return _FullWidthNotification[key];
     }
   });
-});
-var _Notification = require("./Notification");
-Object.keys(_Notification).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Notification[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Notification[key];
-    }
-  });
 });

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MEDIA_QUERY = exports.BREAKPOINT = void 0;
+var BREAKPOINT = exports.BREAKPOINT = {
+  mobile: '768px'
+};
+var MEDIA_QUERY = exports.MEDIA_QUERY = {
+  mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")")
+};