@easypost/easy-ui 1.0.0-alpha.74 → 1.0.0-alpha.76

package/__chunks__/{Notification-fsBr9yzr.js → Notification-B_dzUkJq.js}

@@ -18,21 +18,35 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const React = require("react");
+const mergeRefs = require("./mergeRefs-CQsNYO0P.js");
 const Close = require("./Close-BQ2IlPyf.js");
 const CheckCircle = require("./CheckCircle-lgmtkEe6.js");
 const mergeProps = require("./mergeProps-6pKCnMWU.js");
 const useLocalizedStringFormatter = require("./useLocalizedStringFormatter-C3ZwxPrF.js");
 const ReactDOM = require("react-dom");
+const useFocusVisible = require("./useFocusVisible-CLoIPL6T.js");
+const useFocusWithin = require("./useFocusWithin-T1vqkUYN.js");
+const useHover = require("./useHover-BCKoTdS5.js");
 const index = require("./index-6ObXAT_4.js");
 const Icon = require("./Icon-W8F9w-jS.js");
 const Text = require("./Text-DZ601qf9.js");
 const utilities_css = require("../utilities/css.js");
-const UnstyledButton = require("./UnstyledButton-BNciIRwZ.js");
-const utils = require("./utils-DTjlhnVc.js");
-const useFocusVisible = require("./useFocusVisible-DFYEx6se.js");
-const useFocusWithin = require("./useFocusWithin-B1KKdipT.js");
-const useHover = require("./useHover-NuBBFo1D.js");
+const UnstyledButton = require("./UnstyledButton-d3ChgECf.js");
+const CSSTransition = require("./CSSTransition-BXyX0mUc.js");
+const objectWithoutPropertiesLoose = require("./objectWithoutPropertiesLoose-C4Mip8ZU.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -895,7 +909,7 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
     let removedFocusedToastIndex = allToasts.findIndex((t) => t.i === focusedToast.current && t.isRemoved);
     if (removedFocusedToastIndex > -1) {
       var _lastFocused_current;
-      if (useFocusVisible.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer" && ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected)) utils.$7215afc6de606d6b$export$de79e2c695e052f3(lastFocused.current);
+      if (useFocusVisible.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer" && ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected)) useFocusVisible.$7215afc6de606d6b$export$de79e2c695e052f3(lastFocused.current);
       else {
         let i = 0;
         let nextToast;
@@ -912,8 +926,8 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
           i++;
         }
         if (prevToast === void 0 && nextToast === void 0) prevToast = 0;
-        if (prevToast >= 0 && prevToast < toasts.current.length) utils.$7215afc6de606d6b$export$de79e2c695e052f3(toasts.current[prevToast]);
-        else if (nextToast >= 0 && nextToast < toasts.current.length) utils.$7215afc6de606d6b$export$de79e2c695e052f3(toasts.current[nextToast]);
+        if (prevToast >= 0 && prevToast < toasts.current.length) useFocusVisible.$7215afc6de606d6b$export$de79e2c695e052f3(toasts.current[prevToast]);
+        else if (nextToast >= 0 && nextToast < toasts.current.length) useFocusVisible.$7215afc6de606d6b$export$de79e2c695e052f3(toasts.current[nextToast]);
       }
     }
     prevVisibleToasts.current = state.visibleToasts;
@@ -938,7 +952,7 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
   React.useEffect(() => {
     var _lastFocused_current;
     if (state.visibleToasts.length === 0 && ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected)) {
-      if (useFocusVisible.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") utils.$7215afc6de606d6b$export$de79e2c695e052f3(lastFocused.current);
+      if (useFocusVisible.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") useFocusVisible.$7215afc6de606d6b$export$de79e2c695e052f3(lastFocused.current);
       else lastFocused.current.focus();
       lastFocused.current = null;
     }
@@ -950,7 +964,7 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
     return () => {
       var _lastFocused_current;
       if ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected) {
-        if (useFocusVisible.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") utils.$7215afc6de606d6b$export$de79e2c695e052f3(lastFocused.current);
+        if (useFocusVisible.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer") useFocusVisible.$7215afc6de606d6b$export$de79e2c695e052f3(lastFocused.current);
         else lastFocused.current.focus();
         lastFocused.current = null;
       }
@@ -1107,7 +1121,7 @@ var __spreadValues2 = (a, b) => {
   }
   return a;
 };
-var __objRest = (source, exclude) => {
+var __objRest2 = (source, exclude) => {
   var target = {};
   for (var prop in source) if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
   if (source != null && __getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(source)) {
@@ -1116,7 +1130,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const CurrencyExchange = (_a) => {
-  var _b = _a, { title, titleId } = _b, props = __objRest(_b, ["title", "titleId"]);
+  var _b = _a, { title, titleId } = _b, props = __objRest2(_b, ["title", "titleId"]);
   return React__namespace.createElement("svg", __spreadValues2({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -960 960 960",
@@ -1127,19 +1141,249 @@ const CurrencyExchange = (_a) => {
     d: "M480-60q-117 0-219.65-68.89-102.66-68.88-156.89-166.19v141.23H58.08v-220h220v45.39H136.85q45.61 91.23 142.03 157.15 96.43 65.92 201.12 65.92 75.69 0 142.88-28.26 67.2-28.27 117.73-77.47 50.54-49.19 80.93-115.99 30.38-66.81 32.69-142.89h45.38q-1.92 85.23-35.65 159.85-33.73 74.61-90.46 130.38Q716.77-124 641.19-92 565.61-60 480-60Zm-23.23-142.62v-52.07q-42.31-10.85-72.23-34.85T334-356.46l39.85-14.31q14.3 37.23 44.61 58.46 30.31 21.23 68.16 21.23 39.61 0 68.8-19.88 29.2-19.89 29.2-56.89 0-34.15-23.66-55.88-23.65-21.73-90.27-48.96-62.69-25-91.73-52.46-29.04-27.47-29.04-74.16 0-40.92 28.85-71.15 28.85-30.23 80-37.23v-49.08h43.84v49.08q34.93 3.23 62.16 21.69Q592-667.54 609-635.62L571.38-618Q556-643.69 534-657.31q-22-13.61-52-13.61-40.15 0-64.38 19.92-24.24 19.92-24.24 51.69 0 32.77 22.93 51.39 22.92 18.61 84.77 43 69.77 28.23 98.19 58.3 28.42 30.08 28.42 78.77 0 26.16-9.96 46.77-9.96 20.62-26.85 35.04-16.88 14.42-40.11 22.96-23.23 8.54-50.16 10.39v50.07h-43.84ZM60.39-490q2.69-87.15 36.8-161.96 34.12-74.81 91.23-130.19 57.12-55.39 132.12-86.62Q395.54-900 480-900q115.85 0 219.65 69.08 103.81 69.08 156.89 167.54v-142.77h45.38v220h-220v-45.39h141.23q-44.46-89.3-140.57-156.19-96.12-66.88-202.58-66.88-74.15 0-141.35 27.88-67.19 27.88-117.92 76.69-50.73 48.81-81.69 115.62-30.96 66.8-33.27 144.42H60.39Z"
   }));
 };
-const statusPromotional = "_statusPromotional_dgfcn_4";
-const statusSuccess = "_statusSuccess_dgfcn_9";
-const statusNeutral = "_statusNeutral_dgfcn_14";
-const statusWarning = "_statusWarning_dgfcn_19";
-const statusError = "_statusError_dgfcn_24";
-const typeToast = "_typeToast_dgfcn_29";
-const typeAlert = "_typeAlert_dgfcn_33";
-const Notification$1 = "_Notification_dgfcn_38";
-const iconText = "_iconText_dgfcn_54";
-const closeButton = "_closeButton_dgfcn_60";
-const region = "_region_dgfcn_69";
-const container = "_container_dgfcn_75";
-const styles = {
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function getChildMapping(children, mapFn) {
+  var mapper = function mapper2(child) {
+    return mapFn && React.isValidElement(child) ? mapFn(child) : child;
+  };
+  var result = /* @__PURE__ */ Object.create(null);
+  if (children) React.Children.map(children, function(c) {
+    return c;
+  }).forEach(function(child) {
+    result[child.key] = mapper(child);
+  });
+  return result;
+}
+function mergeChildMappings(prev, next) {
+  prev = prev || {};
+  next = next || {};
+  function getValueForKey(key) {
+    return key in next ? next[key] : prev[key];
+  }
+  var nextKeysPending = /* @__PURE__ */ Object.create(null);
+  var pendingKeys = [];
+  for (var prevKey in prev) {
+    if (prevKey in next) {
+      if (pendingKeys.length) {
+        nextKeysPending[prevKey] = pendingKeys;
+        pendingKeys = [];
+      }
+    } else {
+      pendingKeys.push(prevKey);
+    }
+  }
+  var i;
+  var childMapping = {};
+  for (var nextKey in next) {
+    if (nextKeysPending[nextKey]) {
+      for (i = 0; i < nextKeysPending[nextKey].length; i++) {
+        var pendingNextKey = nextKeysPending[nextKey][i];
+        childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
+      }
+    }
+    childMapping[nextKey] = getValueForKey(nextKey);
+  }
+  for (i = 0; i < pendingKeys.length; i++) {
+    childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+  }
+  return childMapping;
+}
+function getProp(child, prop, props) {
+  return props[prop] != null ? props[prop] : child.props[prop];
+}
+function getInitialChildMapping(props, onExited) {
+  return getChildMapping(props.children, function(child) {
+    return React.cloneElement(child, {
+      onExited: onExited.bind(null, child),
+      in: true,
+      appear: getProp(child, "appear", props),
+      enter: getProp(child, "enter", props),
+      exit: getProp(child, "exit", props)
+    });
+  });
+}
+function getNextChildMapping(nextProps, prevChildMapping, onExited) {
+  var nextChildMapping = getChildMapping(nextProps.children);
+  var children = mergeChildMappings(prevChildMapping, nextChildMapping);
+  Object.keys(children).forEach(function(key) {
+    var child = children[key];
+    if (!React.isValidElement(child)) return;
+    var hasPrev = key in prevChildMapping;
+    var hasNext = key in nextChildMapping;
+    var prevChild = prevChildMapping[key];
+    var isLeaving = React.isValidElement(prevChild) && !prevChild.props.in;
+    if (hasNext && (!hasPrev || isLeaving)) {
+      children[key] = React.cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: true,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    } else if (!hasNext && hasPrev && !isLeaving) {
+      children[key] = React.cloneElement(child, {
+        in: false
+      });
+    } else if (hasNext && hasPrev && React.isValidElement(prevChild)) {
+      children[key] = React.cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: prevChild.props.in,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    }
+  });
+  return children;
+}
+var values = Object.values || function(obj) {
+  return Object.keys(obj).map(function(k) {
+    return obj[k];
+  });
+};
+var defaultProps = {
+  component: "div",
+  childFactory: function childFactory(child) {
+    return child;
+  }
+};
+var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
+  CSSTransition._inheritsLoose(TransitionGroup2, _React$Component);
+  function TransitionGroup2(props, context) {
+    var _this;
+    _this = _React$Component.call(this, props, context) || this;
+    var handleExited = _this.handleExited.bind(_assertThisInitialized(_this));
+    _this.state = {
+      contextValue: {
+        isMounting: true
+      },
+      handleExited,
+      firstRender: true
+    };
+    return _this;
+  }
+  var _proto = TransitionGroup2.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.mounted = true;
+    this.setState({
+      contextValue: {
+        isMounting: false
+      }
+    });
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.mounted = false;
+  };
+  TransitionGroup2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
+    var prevChildMapping = _ref.children, handleExited = _ref.handleExited, firstRender = _ref.firstRender;
+    return {
+      children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
+      firstRender: false
+    };
+  };
+  _proto.handleExited = function handleExited(child, node) {
+    var currentChildMapping = getChildMapping(this.props.children);
+    if (child.key in currentChildMapping) return;
+    if (child.props.onExited) {
+      child.props.onExited(node);
+    }
+    if (this.mounted) {
+      this.setState(function(state) {
+        var children = objectWithoutPropertiesLoose._extends({}, state.children);
+        delete children[child.key];
+        return {
+          children
+        };
+      });
+    }
+  };
+  _proto.render = function render() {
+    var _this$props = this.props, Component = _this$props.component, childFactory2 = _this$props.childFactory, props = objectWithoutPropertiesLoose._objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
+    var contextValue = this.state.contextValue;
+    var children = values(this.state.children).map(childFactory2);
+    delete props.appear;
+    delete props.enter;
+    delete props.exit;
+    if (Component === null) {
+      return /* @__PURE__ */ React.createElement(CSSTransition.TransitionGroupContext.Provider, {
+        value: contextValue
+      }, children);
+    }
+    return /* @__PURE__ */ React.createElement(CSSTransition.TransitionGroupContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React.createElement(Component, props, children));
+  };
+  return TransitionGroup2;
+}(React.Component);
+TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   * If you use React v16+ and would like to avoid a wrapping `<div>` element
+   * you can pass in `component={null}`. This is useful if the wrapping div
+   * borks your css styles.
+   */
+  component: CSSTransition.PropTypes.any,
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them through if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   *
+   * While this component is meant for multiple `Transition` or `CSSTransition`
+   * children, sometimes you may want to have a single transition child with
+   * content that you want to be transitioned out and in when you change it
+   * (e.g. routes, images etc.) In that case you can change the `key` prop of
+   * the transition child as you change its content, this will cause
+   * `TransitionGroup` to transition the child out and back in.
+   */
+  children: CSSTransition.PropTypes.node,
+  /**
+   * A convenience prop that enables or disables appear animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: CSSTransition.PropTypes.bool,
+  /**
+   * A convenience prop that enables or disables enter animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: CSSTransition.PropTypes.bool,
+  /**
+   * A convenience prop that enables or disables exit animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  exit: CSSTransition.PropTypes.bool,
+  /**
+   * You may need to apply reactive updates to a child as it is exiting.
+   * This is generally done by using `cloneElement` however in the case of an exiting
+   * child the element has already been removed and not accessible to the consumer.
+   *
+   * If you do need to update a child as it leaves you can provide a `childFactory`
+   * to wrap every child, even the ones that are leaving.
+   *
+   * @type Function(child: ReactElement) -> ReactElement
+   */
+  childFactory: CSSTransition.PropTypes.func
+} : {};
+TransitionGroup.defaultProps = defaultProps;
+const statusPromotional = "_statusPromotional_1xl7t_4";
+const statusSuccess = "_statusSuccess_1xl7t_9";
+const statusNeutral = "_statusNeutral_1xl7t_14";
+const statusWarning = "_statusWarning_1xl7t_19";
+const statusError = "_statusError_1xl7t_24";
+const typeToast = "_typeToast_1xl7t_29";
+const typeAlert = "_typeAlert_1xl7t_33";
+const Notification$1 = "_Notification_1xl7t_38";
+const iconText = "_iconText_1xl7t_55";
+const closeButtonContainer = "_closeButtonContainer_1xl7t_61";
+const closeButton = "_closeButton_1xl7t_61";
+const region = "_region_1xl7t_74";
+const container = "_container_1xl7t_81";
+const styles$1 = {
   statusPromotional,
   statusSuccess,
   statusNeutral,
@@ -1149,26 +1393,91 @@ const styles = {
   typeAlert,
   Notification: Notification$1,
   iconText,
+  closeButtonContainer,
   closeButton,
   region,
   container
 };
+const appear = "_appear_9o3cj_1";
+const enter = "_enter_9o3cj_2";
+const appearActive = "_appearActive_9o3cj_7";
+const enterActive = "_enterActive_9o3cj_8";
+const exit = "_exit_9o3cj_14";
+const exitActive = "_exitActive_9o3cj_22";
+const styles = {
+  appear,
+  enter,
+  appearActive,
+  enterActive,
+  exit,
+  exitActive
+};
+function NotificationTransition(_a) {
+  var _b = _a, { children, transitionKey, onTransitionPendingChange = () => {
+  } } = _b, transitionGroupProps = __objRest(_b, ["children", "transitionKey", "onTransitionPendingChange"]);
+  const nodeRef = React.useRef(null);
+  const transitionEndListener = React.useCallback((done) => {
+    if (nodeRef.current) {
+      nodeRef.current.addEventListener("transitionend", done, false);
+    }
+  }, []);
+  return React.createElement(CSSTransition.CSSTransition, __spreadProps(__spreadValues({}, transitionGroupProps), {
+    key: transitionKey,
+    appear: true,
+    nodeRef,
+    unmountOnExit: true,
+    addEndListener: transitionEndListener,
+    classNames: {
+      appear: styles.appear,
+      appearActive: styles.appearActive,
+      enter: styles.enter,
+      enterActive: styles.enterActive,
+      exit: styles.exit,
+      exitActive: styles.exitActive
+    },
+    onEnter: () => {
+      onTransitionPendingChange(true);
+    },
+    onExited: () => {
+      onTransitionPendingChange(false);
+    }
+  }), children({
+    nodeRef
+  }));
+}
+function useNotificationTransitionTracking() {
+  const [transitionsPending, setTransitionsPending] = React.useState(0);
+  const onTransitionPendingChange = (isTransitionPending) => {
+    setTransitionsPending((prev) => isTransitionPending ? prev + 1 : prev - 1);
+  };
+  return {
+    isTransitionPending: transitionsPending > 0,
+    onTransitionPendingChange
+  };
+}
 function NotificationRegion(props) {
-  const { state } = props;
+  const { state, onTransitionPendingChange } = props;
   const ref = React.useRef(null);
   const { regionProps } = $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref);
   return React.createElement("div", __spreadProps(__spreadValues({}, regionProps), {
     ref,
-    className: styles.region
-  }), state.visibleToasts.map((toast) => React.createElement(Notification, {
+    className: styles$1.region
+  }), React.createElement(TransitionGroup, {
+    component: null
+  }, state.visibleToasts.map((toast) => React.createElement(NotificationTransition, {
     key: toast.key,
+    transitionKey: toast.key,
+    onTransitionPendingChange
+  }, ({ nodeRef }) => React.createElement(Notification, {
+    ref: nodeRef,
     toast,
     state
-  })));
+  })))));
 }
 function NotificationContainer(props) {
   const { getContainer = null, position = "fixed", offset, state } = props;
-  const showNotifications = state.visibleToasts.length > 0;
+  const { isTransitionPending, onTransitionPendingChange } = useNotificationTransitionTracking();
+  const showNotifications = state.visibleToasts.length > 0 || isTransitionPending;
   let requestFailed = false;
   let container2 = null;
   if (showNotifications && getContainer) {
@@ -1189,10 +1498,11 @@ function NotificationContainer(props) {
   };
   const containerStyles = __spreadValues(__spreadValues({}, positionStyleProps), positionProps);
   return React.createElement(React.Fragment, null, showNotifications ? ReactDOM.createPortal(React.createElement("div", {
-    className: styles.container,
+    className: styles$1.container,
     style: containerStyles
   }, React.createElement(NotificationRegion, {
-    state
+    state,
+    onTransitionPendingChange
   })), container2 != null ? container2 : document.body) : null);
 }
 const TOAST_TIMEOUT_DURATION = 4e3;
@@ -1264,7 +1574,7 @@ function useNotificationState() {
     closeActiveNotification: () => queue.closeActiveNotification()
   });
 }
-function Notification(props) {
+const Notification = React.forwardRef((props, forwardedRef) => {
   const ref = React.useRef(null);
   const { state, toast: notification } = props;
   const { type = "toast", message, status = "success", hasIcon = true, onDismiss } = notification.content;
@@ -1282,22 +1592,25 @@ function Notification(props) {
     onPress: handleDismiss
   });
   return React.createElement("div", __spreadProps(__spreadValues({}, notificationPropsWithAdjustedAriaRole), {
-    ref,
-    className: utilities_css.classNames(styles.Notification, styles[utilities_css.variationName("status", status)], styles[utilities_css.variationName("type", type)])
+    ref: mergeRefs.$5dc95899b306f630$export$c9058316764c140e(ref, forwardedRef),
+    className: utilities_css.classNames(styles$1.Notification, styles$1[utilities_css.variationName("status", status)], styles$1[utilities_css.variationName("type", type)])
   }), React.createElement("div", {
-    className: styles.iconText
+    className: styles$1.iconText
   }, hasIcon && React.createElement(Icon.Icon, {
     size: "lg",
     symbol: getStatusIcon(status)
   }), React.createElement("div", __spreadValues({}, titleProps), React.createElement(Text.Text, {
     weight: "semibold"
-  }, message))), type === "alert" && React.createElement(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, closeButtonPropsWithDismiss), {
-    className: utilities_css.classNames(styles.closeButton)
+  }, message))), type === "alert" && React.createElement("span", {
+    className: styles$1.closeButtonContainer
+  }, React.createElement(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, closeButtonPropsWithDismiss), {
+    className: styles$1.closeButton
   }), React.createElement(Icon.Icon, {
     size: "md",
     symbol: Close.Close
-  })));
-}
+  }))));
+});
+Notification.displayName = "Notification";
 function getStatusIcon(status) {
   switch (status) {
     case "promotional":