@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/cjs/src/components/input-base/InputBase.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputBase = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _color = require("../../../constant/color");
+var _HintText = require("../shared/hintText/HintText");
+var _Label = require("../shared/label/Label");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const validationSvgSize = {
+  xs: 14,
+  sm: 16
+};
+const generalSvgSize = {
+  xs: 14,
+  sm: 20
+};
+const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size = 'xs',
+    required,
+    label,
+    hintText,
+    disabled,
+    fullWidth = false,
+    validation,
+    destructive,
+    leadingElement,
+    trailingElement,
+    showHelpIcon,
+    maxLength,
+    showTextCount,
+    className,
+    ...props
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  const [textCount, setTextCount] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (inputRef.current && showTextCount) {
+      setTextCount(inputRef.current.value.length);
+      const handleInput = () => {
+        setTextCount(inputRef.current?.value.length ?? 0);
+      };
+      inputRef.current.addEventListener('input', handleInput);
+      return () => {
+        inputRef.current?.removeEventListener('input', handleInput);
+      };
+    }
+  }, [showTextCount]);
+  const renderOutsideSlot = slot => {
+    if (slot.type === 'custom' && slot.placement !== 'outside') {
+      return null;
+    }
+    switch (slot.type) {
+      case 'button':
+        return (0, _jsxRuntime.jsx)("button", {
+          type: slot.isSubmit ? 'submit' : 'button',
+          className: (0, _classnames.default)('ncua-input__button', `ncua-input__button--${size}`),
+          onClick: slot.onClick,
+          children: slot.label
+        });
+      case 'text':
+        return (0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)('ncua-input__leading-text', `ncua-input__leading-text--${size}`),
+          children: slot.text
+        });
+      case 'custom':
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  const renderInsideSlot = (slot, position) => {
+    switch (slot.type) {
+      case 'icon':
+        {
+          const SlotIcon = slot.icon;
+          return (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-input__icon-wrap",
+            children: (0, _jsxRuntime.jsx)(SlotIcon, {
+              className: (0, _classnames.default)(`ncua-input__${position}-icon`, slot.className),
+              color: slot.color ? _color.COLOR[slot.color] : undefined,
+              width: slot.size ?? generalSvgSize[size],
+              height: slot.size ?? generalSvgSize[size]
+            })
+          });
+        }
+      case 'custom':
+        if (slot.placement !== 'inside') {
+          return null;
+        }
+        return slot.children;
+      default:
+        return null;
+    }
+  };
+  const renderClearButton = () => {
+    if (!props.clearText) return null;
+    return (0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
+      onClick: props.onClearText,
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
+        className: "ncua-input__clear-icon",
+        width: validationSvgSize[size],
+        height: validationSvgSize[size]
+      })
+    });
+  };
+  const renderStatusIcon = () => {
+    if (destructive) {
+      return (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-input__icon-wrap ncua-input__right-icon",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.InfoCircle, {
+          className: "ncua-input__destructive-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      });
+    }
+    if (validation) {
+      return (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-input__icon-wrap ncua-input__right-icon",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.CheckCircle, {
+          className: "ncua-input__validation-icon",
+          width: validationSvgSize[size],
+          height: validationSvgSize[size]
+        })
+      });
+    }
+    return null;
+  };
+  const renderLabel = () => {
+    if (!label) return null;
+    return (0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('ncua-input__label', `ncua-input__label--${size}`),
+      children: [(0, _jsxRuntime.jsx)(_Label.Label, {
+        isRequired: required,
+        htmlFor: props.id,
+        children: label
+      }), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+        className: "ncua-input__help-icon"
+      })]
+    });
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-input', `ncua-input--${size}`, {
+      destructive: destructive,
+      'is-disabled': disabled,
+      'full-width': fullWidth,
+      'ncua-input__trailing-button': trailingElement?.type === 'button',
+      'ncua-input__leading-text-wrap': leadingElement?.type === 'text'
+    }, className),
+    children: [renderLabel(), (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-input__content-wrap",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-input__content",
+        children: [leadingElement && renderOutsideSlot(leadingElement), (0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)('ncua-input__field', `ncua-input__field--${size}`),
+          children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsx)("input", {
+            ref: node => {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+              inputRef.current = node;
+            },
+            type: "text",
+            disabled: disabled,
+            maxLength: maxLength,
+            ...props
+          }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
+        }), trailingElement && renderOutsideSlot(trailingElement)]
+      }), showTextCount && maxLength && (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-input__field-text-count",
+        children: [(0, _jsxRuntime.jsx)("output", {
+          className: "ncua-input__field-text-count-current",
+          children: textCount
+        }), (0, _jsxRuntime.jsxs)("span", {
+          children: ["/", maxLength]
+        })]
+      })]
+    }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+      className: "ncua-input__hint-text",
+      destructive: destructive,
+      children: hintText
+    })]
+  });
+});

package/dist/cjs/src/components/input-base/index.js

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

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

@@ -11,45 +11,26 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _ButtonCloseX = require("../button/ButtonCloseX");
 var _featuredIcon = require("../featured-icon");
 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 Modal = function (_a) {
-  var isOpen = _a.isOpen,
-    onClose = _a.onClose,
-    children = _a.children,
-    _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
-    _c = _a.closeOnBackdropClick,
-    closeOnBackdropClick = _c === void 0 ? false : _c,
-    _d = _a.closeOnEsc,
-    closeOnEsc = _d === void 0 ? true : _d,
-    className = _a.className,
-    zIndex = _a.zIndex,
-    restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className", "zIndex"]);
-  var modalRef = (0, _react.useRef)(null);
-  var handleBackdropClick = function (e) {
+const Modal = _ref => {
+  let {
+    isOpen,
+    onClose,
+    children,
+    size = 'md',
+    closeOnBackdropClick = false,
+    closeOnEsc = true,
+    className,
+    zIndex,
+    ...restProps
+  } = _ref;
+  const modalRef = (0, _react.useRef)(null);
+  const handleBackdropClick = e => {
     if (closeOnBackdropClick && e.target === e.currentTarget) {
       onClose();
     }
   };
-  (0, _react.useEffect)(function () {
-    var handleKeyDown = function (e) {
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = e => {
       if (isOpen && closeOnEsc && e.key === 'Escape') {
         onClose();
       }
@@ -58,83 +39,78 @@ var Modal = function (_a) {
       document.addEventListener('keydown', handleKeyDown);
       document.body.style.overflow = 'hidden';
     }
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handleKeyDown);
       document.body.style.overflow = '';
     };
   }, [isOpen, closeOnEsc, onClose]);
   if (!isOpen) return null;
-  var modalContent = (0, _jsxRuntime.jsx)("div", __assign({
+  const modalContent = (0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)('ncua-modal-backdrop', className),
     onClick: handleBackdropClick,
     ref: modalRef,
     style: zIndex ? {
-      zIndex: zIndex
-    } : undefined
-  }, restProps, {
-    children: (0, _jsxRuntime.jsx)("div", __assign({
-      className: (0, _classnames.default)('ncua-modal', "ncua-modal--".concat(size))
-    }, {
+      zIndex
+    } : undefined,
+    ...restProps,
+    children: (0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('ncua-modal', `ncua-modal--${size}`),
       children: children
-    }))
-  }));
+    })
+  });
   return /*#__PURE__*/_reactDom.default.createPortal(modalContent, document.body);
 };
 exports.Modal = Modal;
-Modal.Header = function (_a) {
-  var children = _a.children,
-    onClose = _a.onClose,
-    featuredIcon = _a.featuredIcon,
-    title = _a.title,
-    subtitle = _a.subtitle,
-    _b = _a.align,
-    align = _b === void 0 ? 'left' : _b,
-    _c = _a.showDivider,
-    showDivider = _c === void 0 ? false : _c,
-    _d = _a.hideCloseButton,
-    hideCloseButton = _d === void 0 ? false : _d;
+Modal.Header = _ref2 => {
+  let {
+    children,
+    onClose,
+    featuredIcon,
+    title,
+    subtitle,
+    align = 'left',
+    showDivider = false,
+    hideCloseButton = false
+  } = _ref2;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("header", __assign({
-      className: (0, _classnames.default)('ncua-modal__header', "ncua-modal__header--".concat(align), {
+    children: [(0, _jsxRuntime.jsxs)("header", {
+      className: (0, _classnames.default)('ncua-modal__header', `ncua-modal__header--${align}`, {
         'ncua-modal__header--close-button': !hideCloseButton
-      })
-    }, {
+      }),
       children: [featuredIcon && (0, _jsxRuntime.jsx)(_featuredIcon.FeaturedIcon, {
         icon: featuredIcon.icon,
         color: featuredIcon.color,
         theme: featuredIcon.theme,
         size: "sm"
-      }), (0, _jsxRuntime.jsxs)("div", __assign({
-        className: "ncua-modal__title"
-      }, {
-        children: [(0, _jsxRuntime.jsx)("div", __assign({
-          className: "ncua-modal__title-text"
-        }, {
+      }), (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-modal__title",
+        children: [(0, _jsxRuntime.jsx)("div", {
+          className: "ncua-modal__title-text",
           children: title
-        })), subtitle && (0, _jsxRuntime.jsx)("div", __assign({
-          className: "ncua-modal__title-subtitle"
-        }, {
+        }), subtitle && (0, _jsxRuntime.jsx)("div", {
+          className: "ncua-modal__title-subtitle",
           children: subtitle
-        }))]
-      })), children, !hideCloseButton && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+        })]
+      }), children, !hideCloseButton && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
         className: "ncua-modal__close-button",
         size: "sm",
         theme: "light",
         onClick: onClose
       })]
-    })), showDivider && (0, _jsxRuntime.jsx)("div", {
+    }), showDivider && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-modal__header-divider"
     })]
   });
 };
-Modal.Content = function (_a) {
-  var children = _a.children,
-    className = _a.className;
-  return (0, _jsxRuntime.jsx)("div", __assign({
-    className: (0, _classnames.default)('ncua-modal__content', className)
-  }, {
+Modal.Content = _ref3 => {
+  let {
+    children,
+    className
+  } = _ref3;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-modal__content', className),
     children: children
-  }));
+  });
 };
 /**
  * Modal.Actions - The actions area of the modal
@@ -164,37 +140,32 @@ Modal.Content = function (_a) {
  *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
  * </Modal.Actions>
  */
-Modal.Actions = function (_a) {
-  var children = _a.children,
-    _b = _a.layout,
-    layout = _b === void 0 ? 'vertical' : _b,
-    _c = _a.showDivider,
-    showDivider = _c === void 0 ? false : _c,
-    _d = _a.align,
-    align = _d === void 0 ? 'stretch' : _d,
-    checkboxContent = _a.checkboxContent,
-    className = _a.className;
+Modal.Actions = _ref4 => {
+  let {
+    children,
+    layout = 'vertical',
+    showDivider = false,
+    align = 'stretch',
+    checkboxContent,
+    className
+  } = _ref4;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [showDivider && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-modal__actions-divider"
-    }), (0, _jsxRuntime.jsxs)("div", __assign({
+    }), (0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('ncua-modal__actions-wrapper', className, {
         'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
-      })
-    }, {
-      children: [layout === 'checkbox' && (0, _jsxRuntime.jsx)("div", __assign({
-        className: "ncua-modal__actions-checkbox"
-      }, {
-        children: (0, _jsxRuntime.jsx)("div", __assign({
-          className: "ncua-modal__actions-checkbox-content"
-        }, {
+      }),
+      children: [layout === 'checkbox' && (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-modal__actions-checkbox",
+        children: (0, _jsxRuntime.jsx)("div", {
+          className: "ncua-modal__actions-checkbox-content",
           children: checkboxContent
-        }))
-      })), (0, _jsxRuntime.jsx)("div", __assign({
-        className: (0, _classnames.default)('ncua-modal__actions', "ncua-modal__actions--".concat(layout), "ncua-modal__actions--".concat(align))
-      }, {
+        })
+      }), (0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`),
         children: children
-      }))]
-    }))]
+      })]
+    })]
   });
 };

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

@@ -14,61 +14,41 @@ 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) {
-    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 iconMap = {
+const iconMap = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle
   // info는 floating에서는 지원하지 않음
 };
-var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
-  var title = _a.title,
-    supportingText = _a.supportingText,
-    _b = _a.color,
-    color = _b === void 0 ? 'neutral' : _b,
-    onClose = _a.onClose,
-    className = _a.className,
-    actions = _a.actions,
-    _c = _a.autoClose,
-    autoClose = _c === void 0 ? 0 : _c,
-    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose"]);
-  var _d = (0, _react.useState)(false),
-    shouldRemove = _d[0],
-    setShouldRemove = _d[1];
-  var iconColor = color;
-  var featuredIconProps = {
+const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    title,
+    supportingText,
+    color = 'neutral',
+    onClose,
+    className,
+    actions,
+    autoClose = 0,
+    ...rest
+  } = _ref;
+  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  const iconColor = color;
+  const featuredIconProps = {
     icon: iconMap[color] || _uiAdminIcon.Pin02,
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
   };
-  var isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
+  const isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
     onMatched: onClose
   });
   // autoClose 타이머 관리
-  var timerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+  const timerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
     // autoClose가 0보다 크면 무조건 타이머 설정
     if (autoClose > 0) {
-      timerRef.current = setTimeout(function () {
+      timerRef.current = setTimeout(() => {
         if (onClose) {
           onClose();
         }
@@ -77,7 +57,7 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
       }, autoClose);
     }
     // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-    return function () {
+    return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
@@ -88,53 +68,45 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
   if (shouldRemove) {
     return null;
   }
-  return (0, _jsxRuntime.jsxs)("div", __assign({
+  return (0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
-    role: "alert"
-  }, rest, {
-    children: [(0, _jsxRuntime.jsx)("div", __assign({
-      className: "ncua-floating-notification__content"
-    }, {
-      children: (0, _jsxRuntime.jsxs)("div", __assign({
-        className: "ncua-floating-notification__container"
-      }, {
-        children: [iconMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+    className: (0, _classnames.default)('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
+    role: "alert",
+    ...rest,
+    children: [(0, _jsxRuntime.jsx)("div", {
+      className: "ncua-floating-notification__content",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-floating-notification__container",
+        children: [iconMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
+          ...featuredIconProps,
           size: isMobile ? 'md' : 'sm'
-        })), (0, _jsxRuntime.jsxs)("div", __assign({
-          className: "ncua-floating-notification__text-container"
-        }, {
-          children: [(0, _jsxRuntime.jsx)("div", __assign({
-            className: "ncua-floating-notification__title-wrapper"
-          }, {
-            children: (0, _jsxRuntime.jsx)("span", __assign({
-              className: "ncua-floating-notification__title"
-            }, {
+        }), (0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-floating-notification__text-container",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: "ncua-floating-notification__title-wrapper",
+            children: (0, _jsxRuntime.jsx)("span", {
+              className: "ncua-floating-notification__title",
               children: title
-            }))
-          })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
-            className: "ncua-floating-notification__supporting-text"
-          }, {
-            children: supportingText
-          })), actions && (0, _jsxRuntime.jsx)("div", __assign({
-            className: "ncua-floating-notification__actions"
-          }, {
-            children: actions.map(function (action) {
-              return (0, _jsxRuntime.jsx)(_button.Button, {
-                size: "xs",
-                hierarchy: action.hierarchy || 'text',
-                label: action.label,
-                onClick: action === null || action === void 0 ? void 0 : action.onClick
-              }, "".concat(action.label, "-").concat(action.hierarchy));
             })
-          }))]
-        }))]
-      }))
-    })), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+          }), supportingText && (0, _jsxRuntime.jsx)("span", {
+            className: "ncua-floating-notification__supporting-text",
+            children: supportingText
+          }), actions && (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-floating-notification__actions",
+            children: actions.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
+              size: "xs",
+              hierarchy: action.hierarchy || 'text',
+              label: action.label,
+              onClick: action?.onClick
+            }, `${action.label}-${action.hierarchy}`))
+          })]
+        })]
+      })
+    }), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
       theme: "light",
       className: "ncua-floating-notification__close-button",
       size: isMobile ? 'sm' : 'xs',
       onClick: onClose
     })]
-  }));
+  });
 });