@ncds/ui-admin 1.8.4 → 1.8.6

package/dist/cjs/src/components/forms-and-input/select-box/SelectBox.js

@@ -8,8 +8,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _reactDom = require("react-dom");
 var _color = require("../../../../constant/color");
 var _dropdown = require("../../../hooks/dropdown");
+var _useFloatingPosition = require("../../../hooks/useFloatingPosition");
+var _usePortalState = require("../../../hooks/usePortalState");
 var _multiSelect = require("../../../utils/dropdown/multiSelect");
 var _tag = require("../../feedback-and-status/tag");
 var _selectDropdown = require("../../select-dropdown");
@@ -61,7 +64,9 @@ function DisplayValue(_ref) {
     })]
   });
 }
-const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
+) => {
   let {
     placeholder = '선택하세요',
     disabledPlaceholder = false,
@@ -75,7 +80,9 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     disabled = false,
     maxHeight = DEFAULT_MAX_HEIGHT,
     multiple = false,
+    maxSelection,
     align = 'left',
+    usePortal,
     id,
     className,
     children,
@@ -86,6 +93,10 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
   } = _ref2;
   const internalRef = (0, _react.useRef)(null);
   const dropdownRef = (0, _react.useRef)(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = (0, _usePortalState.usePortalState)(usePortal);
   const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
   const selectedOption = (0, _react.useMemo)(() => {
     if (multiple) return null;
@@ -99,6 +110,13 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
   }, [multiple, selectedOption, placeholder]);
   const handleOptionSelect = option => {
     if (disabled) return;
+    if (multiple) {
+      const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
+      if (newValue === null) return;
+      onChange?.(newValue);
+      notifyRegister(register, newValue, multiple);
+      return;
+    }
     const newValue = computeNewValue(option, value, multiple);
     onChange?.(newValue);
     notifyRegister(register, newValue, multiple);
@@ -141,8 +159,12 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     buttonText: selectAllButtonText,
     toggleSelectAll,
     getSelectedTagsData,
-    removeTag
-  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems);
+    removeTag,
+    isMaxSelectionActive,
+    tryToggle
+  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems, {
+    maxSelection
+  });
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
@@ -167,13 +189,53 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     }
   };
   (0, _dropdown.useScrollLock)(isOpen, dropdownRef);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: optionItems 변경 시 너비 재계산 필요
   (0, _react.useLayoutEffect)(() => {
     if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
       const dropdownWidth = dropdownRef.current.offsetWidth;
       internalRef.current.style.width = `${dropdownWidth}px`;
     }
   }, [autoWidth, isOpen, optionItems]);
+  const floatingStyle = (0, _useFloatingPosition.useFloatingPosition)({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef: internalRef,
+    floatingRef: dropdownRef,
+    direction: dropdownDirection,
+    align,
+    matchTriggerWidth: true
+  });
+  // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 항상 존재
   (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
+  const selectDropdownNode = (0, _jsxRuntime.jsx)(_selectDropdown.SelectDropdown, {
+    ref: dropdownRef,
+    isOpen: isOpen,
+    direction: dropdownDirection,
+    size: size,
+    options: optionItems,
+    value: value,
+    focusedIndex: focusedIndex,
+    maxHeight: maxHeight,
+    listboxId: `selectbox-options-${id || 'default'}`,
+    multiple: multiple,
+    showFooterButtons: multiple,
+    selectAllButtonText: selectAllButtonText,
+    showSelectAllAction: !isMaxSelectionActive,
+    componentType: "selectbox",
+    isKeyboardNavigation: isKeyboardNavigation,
+    activeDescendantId: activeDescendantId,
+    align: align,
+    className: shouldPortal ? 'ncua-select-dropdown--portal' : undefined,
+    style: shouldPortal && floatingStyle ? floatingStyle : undefined,
+    onOptionSelect: handleDropdownSelect,
+    onMouseMove: handleMouseMove,
+    onOptionHover: handleOptionHover,
+    onSelectAll: handleSelectAll,
+    onEdit: handleEdit,
+    onComplete: handleComplete,
+    children: children
+  });
+  const portaledDropdown = shouldPortal && portalContainer && isOpen ? /*#__PURE__*/(0, _reactDom.createPortal)(selectDropdownNode, portalContainer) : null;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("div", {
       ref: internalRef,
@@ -212,31 +274,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
               'ncua-selectbox__arrow--up': isOpen
             })
           })]
-        }), (0, _jsxRuntime.jsx)(_selectDropdown.SelectDropdown, {
-          ref: dropdownRef,
-          isOpen: isOpen,
-          direction: dropdownDirection,
-          size: size,
-          options: optionItems,
-          value: value,
-          focusedIndex: focusedIndex,
-          maxHeight: maxHeight,
-          listboxId: `selectbox-options-${id || 'default'}`,
-          multiple: multiple,
-          showFooterButtons: multiple,
-          selectAllButtonText: selectAllButtonText,
-          componentType: "selectbox",
-          isKeyboardNavigation: isKeyboardNavigation,
-          activeDescendantId: activeDescendantId,
-          align: align,
-          onOptionSelect: handleDropdownSelect,
-          onMouseMove: handleMouseMove,
-          onOptionHover: handleOptionHover,
-          onSelectAll: handleSelectAll,
-          onEdit: handleEdit,
-          onComplete: handleComplete,
-          children: children
-        })]
+        }), !shouldPortal && selectDropdownNode]
       }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
         destructive: destructive,
         className: "ncua-hint-text",
@@ -254,7 +292,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
         close: true,
         onButtonClick: () => handleRemoveTag(tag.id)
       }, tag.id))
-    })]
+    }), portaledDropdown]
   });
 });
 SelectBox.displayName = 'SelectBox';

package/dist/cjs/src/components/forms-and-input/slider/Slider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Slider = void 0;
+exports.Slider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _slider = require("../../../../assets/scripts/slider");
@@ -57,5 +57,4 @@ const Slider = _ref => {
     className: `ncua-slider ${className || ''}`
   });
 };
-exports.Slider = Slider;
-var _default = exports.default = Slider;
+exports.Slider = Slider;

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

@@ -13,6 +13,9 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _react = require("react");
+var _reactDom = require("react-dom");
+var _useFloatingPosition = require("../../../hooks/useFloatingPosition");
+var _usePortalState = require("../../../hooks/usePortalState");
 var _button = require("../../action/button");
 var _utils = require("./utils");
 const DROPDOWN_ID_RADIX = 36;
@@ -149,6 +152,7 @@ const SortableConfigItem = _ref => {
     })]
   });
 };
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 액션/설정 두 variant 통합 + drag-and-drop 필수 분기
 const Dropdown = props => {
   const {
     trigger,
@@ -157,14 +161,28 @@ const Dropdown = props => {
     groups,
     className,
     opened = false,
-    closeOnClickOutside = true
+    closeOnClickOutside = true,
+    usePortal
   } = props;
   const variant = props.variant ?? 'action';
   const closeOnClickItem = variant === 'action' ? props.closeOnClickItem ?? true : false;
   const [isOpen, setIsOpen] = (0, _react.useState)(opened);
   const dropdownRef = (0, _react.useRef)(null);
   const triggerRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
   const menuItemsRef = (0, _react.useRef)(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = (0, _usePortalState.usePortalState)(usePortal);
+  const floatingStyle = (0, _useFloatingPosition.useFloatingPosition)({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef,
+    floatingRef: menuRef,
+    direction: 'down',
+    align
+  });
   const dropdownIdRef = (0, _react.useRef)(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
   const dropdownId = dropdownIdRef.current;
   (0, _react.useEffect)(() => {
@@ -227,7 +245,10 @@ const Dropdown = props => {
     triggerRef.current?.focus();
   };
   const handleClickOutside = event => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+    const target = event.target;
+    const insideContainer = dropdownRef.current?.contains(target) ?? false;
+    const insidePortaledMenu = menuRef.current?.contains(target) ?? false;
+    if (!insideContainer && !insidePortaledMenu) {
       setIsOpen(false);
     }
   };
@@ -239,6 +260,7 @@ const Dropdown = props => {
       }
     }
   };
+  // biome-ignore lint/correctness/useExhaustiveDependencies: handleClickOutside는 안정적 참조
   (0, _react.useEffect)(() => {
     if (closeOnClickOutside) {
       document.addEventListener('mousedown', handleClickOutside);
@@ -248,6 +270,7 @@ const Dropdown = props => {
     }
   }, [closeOnClickOutside]);
   // ESC 키로 닫고 trigger로 포커스 복귀
+  // biome-ignore lint/correctness/useExhaustiveDependencies: closeAndRestoreFocus는 안정적 참조
   (0, _react.useEffect)(() => {
     if (!isOpen) return;
     const handleEsc = event => {
@@ -428,26 +451,31 @@ const Dropdown = props => {
     });
   };
   const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
+  const menuClasses = ['ncua-dropdown__menu', shouldPortal ? 'ncua-dropdown__menu--portal' : ''].filter(Boolean).join(' ');
+  const menuNode = isOpen ? (0, _jsxRuntime.jsxs)("div", {
+    ref: menuRef,
+    className: menuClasses,
+    role: variant === 'config' ? 'dialog' : 'menu',
+    "aria-label": variant === 'config' ? '설정' : undefined,
+    style: shouldPortal && floatingStyle ? floatingStyle : undefined,
+    children: [renderHeader(), (0, _jsxRuntime.jsx)("div", {
+      ref: menuItemsRef,
+      className: "ncua-dropdown__menu-items",
+      children: groups.map(group => {
+        // config variant uses draft.order to drive the rendered order
+        const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
+        return (0, _jsxRuntime.jsx)("div", {
+          className: "ncua-dropdown__group",
+          children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
+        }, group.items[0]?.id);
+      })
+    }), renderFooter()]
+  }) : null;
+  const portaledMenu = shouldPortal && portalContainer && menuNode ? /*#__PURE__*/(0, _reactDom.createPortal)(menuNode, portalContainer) : null;
   return (0, _jsxRuntime.jsxs)("div", {
     className: dropdownClasses,
     ref: dropdownRef,
-    children: [renderTrigger(), isOpen && (0, _jsxRuntime.jsxs)("div", {
-      className: "ncua-dropdown__menu",
-      role: variant === 'config' ? 'dialog' : 'menu',
-      "aria-label": variant === 'config' ? '설정' : undefined,
-      children: [renderHeader(), (0, _jsxRuntime.jsx)("div", {
-        ref: menuItemsRef,
-        className: "ncua-dropdown__menu-items",
-        children: groups.map(group => {
-          // config variant uses draft.order to drive the rendered order
-          const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
-          return (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-dropdown__group",
-            children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
-          }, group.items[0]?.id);
-        })
-      }), renderFooter()]
-    })]
+    children: [renderTrigger(), !shouldPortal && menuNode, portaledMenu]
   });
 };
 exports.Dropdown = Dropdown;

package/dist/cjs/src/components/overlays/notification/CalloutNotification.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalloutNotification = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CalloutNotification = exports.CalloutNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    color = 'neutral',
+    className,
+    title,
+    ...rest
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)('ncua-callout-notification', `ncua-callout-notification--${color}`, className),
+    ...rest,
+    children: title
+  });
+});
+CalloutNotification.displayName = 'CalloutNotification';

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

@@ -8,19 +8,65 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _reactDom = require("react-dom");
 var _breakpoint = require("../../../constant/breakpoint");
 var _useMediaQuery = require("../../../hooks/useMediaQuery");
 var _button = require("../../action/button");
 var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
+var _host = require("./host");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
+// 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
+
+/**
+ * 색상별 a11y role.
+ *   - error/warning → role="alert"  (implicit aria-live="assertive": 즉시 발화)
+ *   - 그 외       → role="status" (implicit aria-live="polite": 현재 발화 끝난 후 발화)
+ * role 이 implicit live-region 을 가져오므로 호스트 컨테이너에는 aria-live 를 두지 않는다.
+ */
+const ASSERTIVE_COLORS = {
+  error: true,
+  warning: true
+};
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle
-  // info는 floating에서는 지원하지 않음
+  // info 는 full-width 전용이라 floating 아이콘 매핑 없음.
+};
+/**
+ * NotificationColor → FeaturedIconColor 매핑.
+ * `info` 는 FeaturedIconColor 에 존재하지 않으므로 `neutral` 로 안전 fallback.
+ * `satisfies` 가 매핑 누락을 컴파일 타임에 강제하므로 향후 색상이 추가되면 즉시 타입 에러로 잡힌다.
+ */
+const iconColorMap = {
+  neutral: 'neutral',
+  error: 'error',
+  warning: 'warning',
+  success: 'success',
+  info: 'neutral'
 };
+/**
+ * `.ncua-floating-notification-host` 싱글톤을 보장하고 반환하는 훅.
+ *
+ * 이름의 `useMount...` 는 단순 조회가 아닌 **DOM 부수효과** 를 동반함을 신호한다 —
+ * 내부적으로 `mountFloatingNotificationHost()` 를 호출해 document.body 에 호스트를 append 하고
+ * (없으면) 글로벌 scroll/resize/MutationObserver 까지 부착한다. 호스트는 페이지 lifetime
+ * 싱글톤이므로 언마운트 시 제거하지 않는다.
+ *
+ * `mountFloatingNotificationHost` 는 **동기 함수** 이므로 effect 안의 호출 → setHost 가 같은 tick
+ * 에 끝나 cancellation race 가 없다. cancel flag 는 의미 없어 두지 않는다.
+ */
+function useMountFloatingNotificationHost(enabled) {
+  const [host, setHost] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (!enabled) return;
+    setHost((0, _host.mountFloatingNotificationHost)());
+  }, [enabled]);
+  return host;
+}
 const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     title,
@@ -30,49 +76,65 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
     className,
     actions,
     autoClose = 0,
+    portal = false,
     ...rest
   } = _ref;
   const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
-  const iconColor = color;
   const featuredIconProps = {
     icon: iconMap[color] || _uiAdminIcon.Pin02,
     size: 'sm',
-    color: iconColor,
+    color: iconColorMap[color],
     theme: 'dark-circle'
   };
   const isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
     onMatched: onClose
   });
+  // onClose 는 매 렌더 새 함수 ref 일 수 있으므로 ref 로 latest 만 보관.
+  // → autoClose 타이머 effect 의 deps 에서 onClose 를 빼서 타이머 재시작 회피.
+  // render 본문에서 직접 할당 — useEffect 로 미루면 같은 commit 안에서 fire 되는 타이머가 stale onClose 를 볼 위험.
+  const onCloseRef = (0, _react.useRef)(onClose);
+  onCloseRef.current = onClose;
   // autoClose 타이머 관리
   const timerRef = (0, _react.useRef)(null);
+  // onClose 는 onCloseRef 로 latest 만 추적하므로 deps 에서 제외 (의도된 패턴).
   (0, _react.useEffect)(() => {
-    // autoClose가 0보다 크면 무조건 타이머 설정
+    // autoClose 가 0 보다 크면 타이머 설정.
     if (autoClose > 0) {
       timerRef.current = setTimeout(() => {
-        if (onClose) {
-          onClose();
-        }
-        // DOM에서 바로 제거
+        onCloseRef.current?.();
+        // DOM 에서 바로 제거
         setShouldRemove(true);
       }, autoClose);
     }
-    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    // cleanup: 컴포넌트 언마운트 또는 autoClose 변경 시 타이머 정리
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
       }
     };
-  }, [autoClose, onClose]);
+  }, [autoClose]);
+  // portal=true 일 때만 호스트가 필요하다.
+  const host = useMountFloatingNotificationHost(portal);
+  // a11y — 카드 root 의 role 과 제목/본문 ID. 색상에 따라 alert(error/warning) / status(나머지) 로 분기.
+  const reactId = (0, _react.useId)();
+  const titleId = `${reactId}-title`;
+  const descId = `${reactId}-desc`;
+  const role = ASSERTIVE_COLORS[color] ? 'alert' : 'status';
   // DOM에서 완전히 제거
   if (shouldRemove) {
     return null;
   }
-  return (0, _jsxRuntime.jsxs)("div", {
+  const card =
+  // a11y/예측가능성 — caller 가 className/id 등 일부는 덮어쓸 수 있게 {...rest} 를 먼저 펼치고,
+  // role/aria-labelledby/aria-describedby 같은 컴포넌트 본질 prop 은 그 뒤에 두어 우선 적용.
+  (0, _jsxRuntime.jsxs)("div", {
+    ...rest,
     ref: ref,
     className: (0, _classnames.default)('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
-    role: "alert",
-    ...rest,
+    role: role,
+    "aria-labelledby": titleId,
+    "aria-describedby": supportingText ? descId : undefined,
     children: [(0, _jsxRuntime.jsx)("div", {
       className: "ncua-floating-notification__content",
       children: (0, _jsxRuntime.jsxs)("div", {
@@ -85,10 +147,12 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
           children: [(0, _jsxRuntime.jsx)("div", {
             className: "ncua-floating-notification__title-wrapper",
             children: (0, _jsxRuntime.jsx)("span", {
+              id: titleId,
               className: "ncua-floating-notification__title",
               children: title
             })
           }), supportingText && (0, _jsxRuntime.jsx)("span", {
+            id: descId,
             className: "ncua-floating-notification__supporting-text",
             children: supportingText
           }), actions && (0, _jsxRuntime.jsx)("div", {
@@ -109,4 +173,13 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
       onClick: onClose
     })]
   });
+  // 기본은 인라인 렌더 — 부모 JSX 트리에 카드를 그대로 둔다.
+  if (!portal) {
+    return card;
+  }
+  // portal=true 인데 SSR이거나 첫 렌더(호스트 미생성)에서는 null. useEffect 후 host 설정되면 재렌더되어 portal 마운트.
+  if (!host) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)(card, host);
 });

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Notification = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _CalloutNotification = require("./CalloutNotification");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
 var _MessageNotification = require("./MessageNotification");
@@ -36,6 +37,12 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
       ref: ref
     });
   }
+  if (type === 'callout') {
+    return (0, _jsxRuntime.jsx)(_CalloutNotification.CalloutNotification, {
+      color: color,
+      ...rest
+    });
+  }
   return null;
 });
 Notification.displayName = 'Notification';

package/dist/cjs/src/components/overlays/notification/host.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "mountFloatingNotificationHost", {
+  enumerable: true,
+  get: function () {
+    return _notification.mountFloatingNotificationHost;
+  }
+});
+var _notification = require("../../../../assets/scripts/notification");