@ringcentral/spring-ui 1.12.0 → 1.13.0

package/Accordion.js

@@ -1,64 +1,120 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useCallback, useMemo } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useClasses, useControlled, useId, useEver } from '@ringcentral/spring-base';
-import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
-import './chunks/Icon.js';
-import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
-import { A as AccordionContext } from './chunks/AccordionContext.js';
-export { u as useAccordionContext } from './chunks/AccordionContext.js';
-import './chunks/usePrefersReducedMotion.js';
-
-var Accordion$1 = {"sui-accordion-root":"sui-accordion-root","sui-accordion-panel-wrapper":"sui-accordion-panel-wrapper","sui-accordion-panel-inner-wrapper":"sui-accordion-panel-inner-wrapper"};
-
-const Accordion = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Accordion' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useClasses, useControlled, useEver, useId } from "@ringcentral/spring-base";
+import { motionTransition, useThemeProps } from "@ringcentral/spring-theme";
+import "./chunks/4476.js";
+import { AccordionContext } from "./chunks/8467.js";
+import { useMotionSafeTransition } from "./chunks/1294.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Accordion = ({"sui-accordion-root":"sui-accordion-root","sui-accordion-panel-wrapper":"sui-accordion-panel-wrapper","sui-accordion-panel-inner-wrapper":"sui-accordion-panel-inner-wrapper"});
+
+
+
+
+
+
+
+
+const Accordion_Accordion = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Accordion'
+    });
     const { header, classes, className, children, defaultExpanded = false, expanded: expandedProp, onChange, keepMounted, ...rest } = props;
     const cls = useClasses('accordion', classes, className);
     const [expanded, setExpandedState] = useControlled({
         controlled: expandedProp,
         default: defaultExpanded,
         name: 'SuiAccordion',
-        state: 'expanded',
+        state: 'expanded'
     });
-    const handleChange = useCallback((event) => {
-        setExpandedState((expanded) => !expanded);
+    const handleChange = useCallback((event)=>{
+        setExpandedState((expanded)=>!expanded);
         if (onChange) {
             onChange(event, !expanded);
         }
-    }, [expanded, onChange, setExpandedState]);
-    const expandedTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
-    const collapsedTransition = useMotionSafeTransition(motionTransition['spring-01-slow']);
-    const collapsedHeightTransition = useMotionSafeTransition(motionTransition['haste-01-slow']);
+    }, [
+        expanded,
+        onChange,
+        setExpandedState
+    ]);
+    const expandedTransition = useMotionSafeTransition(motionTransition["spring-01-fast"]);
+    const collapsedTransition = useMotionSafeTransition(motionTransition["spring-01-slow"]);
+    const collapsedHeightTransition = useMotionSafeTransition(motionTransition["haste-01-slow"]);
     const ARIA_CONTROLS = 'aria-controls';
     const accordionHeader = header;
     const accordionHeaderId = useId(accordionHeader.props?.id);
     const accordionPanelId = useId(accordionHeader.props?.[ARIA_CONTROLS]);
-    const contextValue = useMemo(() => ({
-        id: accordionHeaderId,
-        ariaControls: accordionPanelId,
+    const contextValue = useMemo(()=>({
+            id: accordionHeaderId,
+            ariaControls: accordionPanelId,
+            expanded,
+            toggle: handleChange
+        }), [
+        accordionHeaderId,
+        accordionPanelId,
         expanded,
-        toggle: handleChange,
-    }), [accordionHeaderId, accordionPanelId, expanded, handleChange]);
+        handleChange
+    ]);
     const isEverShown = useEver(expanded);
     const keepAlive = keepMounted && isEverShown;
     const motionVariants = {
         expanded: {
             transition: expandedTransition,
             opacity: 1,
-            height: 'auto',
+            height: 'auto'
         },
         collapsed: {
             transition: {
                 ...collapsedTransition,
-                height: collapsedHeightTransition,
+                height: collapsedHeightTransition
             },
             opacity: 0,
-            height: 0,
-        },
+            height: 0
+        }
     };
-    return (jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [jsx(AccordionContext.Provider, { value: contextValue, children: header }), jsx(AnimatePresence, { initial: false, children: (expanded || keepAlive) && (jsx(motion.div, { "aria-labelledby": accordionHeaderId, id: accordionPanelId, className: cls('panel-wrapper'), initial: "collapsed", animate: expanded ? 'expanded' : 'collapsed', exit: "collapsed", variants: motionVariants, children: jsx("div", { className: cls('panel-inner-wrapper'), children: children }) })) })] }));
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx(AccordionContext.Provider, {
+                value: contextValue,
+                children: header
+            }),
+            /*#__PURE__*/ jsx(AnimatePresence, {
+                initial: false,
+                children: (expanded || keepAlive) && /*#__PURE__*/ jsx(motion.div, {
+                    "aria-labelledby": accordionHeaderId,
+                    id: accordionPanelId,
+                    className: cls('panel-wrapper'),
+                    initial: "collapsed",
+                    animate: expanded ? 'expanded' : 'collapsed',
+                    exit: "collapsed",
+                    variants: motionVariants,
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: cls('panel-inner-wrapper'),
+                        children: children
+                    })
+                })
+            })
+        ]
+    });
 });
-Accordion.displayName = 'SuiAccordion';
+Accordion_Accordion.displayName = 'SuiAccordion';
+
+
+
+
+
+
 
-export { Accordion, AccordionContext, Accordion$1 as accordionStyles };
+export { Accordion as accordionStyles, Accordion_Accordion as Accordion };
+export { AccordionContext, useAccordionContext } from "./chunks/8467.js";

package/AccordionHeader.js

@@ -1,23 +1,33 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses, useFocusVisible, useForkRef, getTitle } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { h as hasContent } from './chunks/hasContent.js';
-import '@mui/utils';
-import { u as useAccordionContext } from './chunks/AccordionContext.js';
-import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-
-var AccordionHeader$1 = {"sui-accordion-header-root":"sui-accordion-header-root","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-accordion-header-content":"sui-accordion-header-content","sui-accordion-header-primary-text":"sui-accordion-header-primary-text","sui-accordion-header-secondary-slot":"sui-accordion-header-secondary-slot","sui-accordion-header-expand-icon":"sui-accordion-header-expand-icon"};
-
-const AccordionHeader = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'AccordionHeader' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getTitle, useClasses, useFocusVisible, useForkRef } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useAccordionContext } from "./chunks/8467.js";
+import { ExpandCollapseCaret as ExpandCollapseCaret_ExpandCollapseCaret } from "./chunks/1294.js";
+import { hasContent } from "./chunks/5047.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var AccordionHeader = ({"sui-accordion-header-root":"sui-accordion-header-root","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-accordion-header-content":"sui-accordion-header-content","sui-accordion-header-primary-text":"sui-accordion-header-primary-text","sui-accordion-header-secondary-slot":"sui-accordion-header-secondary-slot","sui-accordion-header-expand-icon":"sui-accordion-header-expand-icon"});
+
+
+
+
+
+
+
+
+const AccordionHeader_AccordionHeader = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'AccordionHeader'
+    });
     const { classes, className, children, onClick, secondarySlot, disabled, expandIcon = true, ExpandCollapseCaretProps, id: idProp, 'aria-controls': ariaControlsProp, ...rest } = props;
     const { id, ariaControls, expanded, toggle } = useAccordionContext();
-    const handleChange = (event) => {
+    const handleChange = (event)=>{
         if (toggle) {
             toggle(event);
         }
@@ -28,8 +38,48 @@ const AccordionHeader = forwardRef((inProps, ref) => {
     const cls = useClasses('accordion-header', classes, className);
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
     const buttonRef = useForkRef(ref, focusVisibleRef);
-    return (jsxs("button", { className: cls('root', { focusVisible, disabled }), "aria-expanded": expanded, disabled: disabled, ...rest, type: "button", id: id ?? idProp, "aria-controls": ariaControls ?? ariaControlsProp, ref: buttonRef, onClick: handleChange, ...focusVisibleHandlers, children: [jsxs("span", { className: cls('content'), children: [jsx("span", { className: cls('primary-text'), title: getTitle(children), children: children }), hasContent(secondarySlot) && (jsx("span", { className: cls('secondary-slot'), children: secondarySlot }))] }), expandIcon && (jsx(ExpandCollapseCaret, { expanded: !!expanded, orientation: 'vertical', ...ExpandCollapseCaretProps }))] }));
+    return /*#__PURE__*/ jsxs("button", {
+        className: cls('root', {
+            focusVisible,
+            disabled
+        }),
+        "aria-expanded": expanded,
+        disabled: disabled,
+        ...rest,
+        type: "button",
+        id: id ?? idProp,
+        "aria-controls": ariaControls ?? ariaControlsProp,
+        ref: buttonRef,
+        onClick: handleChange,
+        ...focusVisibleHandlers,
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                className: cls('content'),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: cls('primary-text'),
+                        title: getTitle(children),
+                        children: children
+                    }),
+                    hasContent(secondarySlot) && /*#__PURE__*/ jsx("span", {
+                        className: cls('secondary-slot'),
+                        children: secondarySlot
+                    })
+                ]
+            }),
+            expandIcon && /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                expanded: !!expanded,
+                orientation: 'vertical',
+                ...ExpandCollapseCaretProps
+            })
+        ]
+    });
 });
-AccordionHeader.displayName = 'SuiAccordionHeader';
+AccordionHeader_AccordionHeader.displayName = 'SuiAccordionHeader';
+
+
+
+
+
 
-export { AccordionHeader, AccordionHeader$1 as accordionHeaderStyles };
+export { AccordionHeader as accordionHeaderStyles, AccordionHeader_AccordionHeader as AccordionHeader };

package/Alert.js

@@ -1,28 +1,120 @@
-export { a as Alert, A as AlertTitle } from './chunks/Alert.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-icon';
-import '@ringcentral/spring-theme';
-import 'clsx';
-import './chunks/Icon.js';
-import '@ringcentral/spring-base';
-import './chunks/IconButtonLabel.js';
-import '@mui/base';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import 'framer-motion';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-
-var Alert = {"sui-alert-root":"sui-alert-root","sui-alert-icon":"sui-alert-icon","sui-alert-body":"sui-alert-body","sui-alert-content":"sui-alert-content","sui-alert-action":"sui-alert-action","sui-alert-close":"sui-alert-close","sui-alert-info":"sui-alert-info","sui-alert-info-icon":"sui-alert-info-icon","sui-alert-error":"sui-alert-error","sui-alert-error-icon":"sui-alert-error-icon","sui-alert-warning":"sui-alert-warning","sui-alert-warning-icon":"sui-alert-warning-icon","sui-alert-success":"sui-alert-success","sui-alert-success-icon":"sui-alert-success-icon","sui-alert-neutral":"sui-alert-neutral","sui-alert-neutral-icon":"sui-alert-neutral-icon","sui-compact":"sui-compact"};
-
-var AlertTitle = {"sui-alert-title-root":"sui-alert-title-root","sui-compact":"sui-compact"};
-
-export { Alert as alertStyles, AlertTitle as alertTitleStyles };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useMemo } from "react";
+import { AlertMd, InfoMd, SuccessMd, Xmd } from "@ringcentral/spring-icon";
+import { useClassesWithMode, useMode, useThemeProps } from "@ringcentral/spring-theme";
+import clsx from "clsx";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Alert = ({"sui-alert-root":"sui-alert-root","sui-alert-icon":"sui-alert-icon","sui-alert-body":"sui-alert-body","sui-alert-content":"sui-alert-content","sui-alert-action":"sui-alert-action","sui-alert-close":"sui-alert-close","sui-alert-info":"sui-alert-info","sui-alert-info-icon":"sui-alert-info-icon","sui-alert-error":"sui-alert-error","sui-alert-error-icon":"sui-alert-error-icon","sui-alert-warning":"sui-alert-warning","sui-alert-warning-icon":"sui-alert-warning-icon","sui-alert-success":"sui-alert-success","sui-alert-success-icon":"sui-alert-success-icon","sui-alert-neutral":"sui-alert-neutral","sui-alert-neutral-icon":"sui-alert-neutral-icon","sui-compact":"sui-compact"});
+// extracted by css-extract-rspack-plugin
+/* export default */ var AlertTitle = ({"sui-alert-title-root":"sui-alert-title-root","sui-compact":"sui-compact"});
+
+
+
+
+
+
+
+
+
+const DEFAULT_ICON_MAP = {
+    info: InfoMd,
+    error: AlertMd,
+    success: SuccessMd,
+    warning: AlertMd,
+    neutral: InfoMd
+};
+const Alert_Alert = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Alert'
+    });
+    const { action, classes, className, component: AlertRoot = 'div', closeText = 'close', children, icon: iconProp, startSlot, onClose, severity = 'info', CloseButtonProps, contentProps, ...rest } = props;
+    const cls = useClassesWithMode('alert', classes, className);
+    const { mode } = useMode();
+    const iconSize = useMemo(()=>mode === 'compact' ? 'small' : 'medium', [
+        mode
+    ]);
+    const renderIcon = (icon, severity)=>{
+        return /*#__PURE__*/ jsx("div", {
+            className: cls('icon', `${severity}-icon`),
+            children: /*#__PURE__*/ isValidElement(icon) ? icon : /*#__PURE__*/ jsx(Icon_Icon, {
+                size: iconSize,
+                symbol: icon
+            })
+        });
+    };
+    let startSlotContent = null;
+    if (startSlot) {
+        startSlotContent = renderIcon(startSlot, severity);
+    } else if (iconProp) {
+        const iconComponent = iconProp === true ? DEFAULT_ICON_MAP[severity] : iconProp;
+        startSlotContent = renderIcon(iconComponent, severity);
+    }
+    let closeSlot = null;
+    if (onClose) {
+        closeSlot = /*#__PURE__*/ jsx(IconButton_IconButton, {
+            symbol: Xmd,
+            variant: "icon",
+            shape: 'squircle',
+            color: 'secondary',
+            size: iconSize,
+            background: false,
+            title: closeText,
+            "aria-label": closeText,
+            onClick: onClose,
+            ...CloseButtonProps,
+            className: clsx(cls('close'), CloseButtonProps?.className)
+        });
+    }
+    let actionSlot = null;
+    if (action) {
+        actionSlot = /*#__PURE__*/ jsx("div", {
+            className: cls('action'),
+            children: action
+        });
+    }
+    return /*#__PURE__*/ jsxs(AlertRoot, {
+        ...rest,
+        ref: ref,
+        className: cls('root', severity),
+        children: [
+            startSlotContent,
+            /*#__PURE__*/ jsxs("div", {
+                className: cls('body'),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: cls('content'),
+                        role: "alert",
+                        ...contentProps,
+                        children: children
+                    }),
+                    actionSlot
+                ]
+            }),
+            closeSlot
+        ]
+    });
+});
+const Alert_AlertTitle = ({ className, classes, ...rest })=>{
+    const cls = useClassesWithMode('alert-title', classes, className);
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest
+    });
+};
+
+
+
+
+
+
+
+export { Alert as alertStyles, AlertTitle as alertTitleStyles, Alert_Alert as Alert, Alert_AlertTitle as AlertTitle };

package/Animation.js

@@ -1,47 +1,3 @@
-export { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
-import { jsx } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
-import '@ringcentral/spring-theme';
-import { g as getFade } from './chunks/getFade.js';
-import { g as getGrow } from './chunks/getGrow.js';
-export { a as getTransformOriginStringForPlacement } from './chunks/getGrow.js';
-export { S as ShowHideEye } from './chunks/ShowHideEye.js';
-export { S as SlideIn } from './chunks/SlideIn.js';
-export { g as getSlideIn } from './chunks/getSlideIn.js';
-export { S as SortableArrow } from './chunks/SortableArrow.js';
-export { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
-import '@ringcentral/spring-base';
-import './chunks/Icon.js';
-import 'react';
 
-var ExpandCollapseCaret = {"sui-expand-collapse-caret-root":"sui-expand-collapse-caret-root","sui-expand-collapse-caret-vertical":"sui-expand-collapse-caret-vertical","sui-expand-collapse-caret-horizontal":"sui-expand-collapse-caret-horizontal"};
-
-const Fade = (props) => {
-    const { toggle, toggleOffTransition, toggleOnTransition, children, ...rest } = props;
-    const prefersReducedMotion = usePrefersReducedMotion();
-    return (jsx(motion.div, { ...getFade({
-            toggle,
-            toggleOffTransition,
-            toggleOnTransition,
-            prefersReducedMotion,
-        }), ...rest, children: children }));
-};
-
-const Grow = (props) => {
-    const { toggle, toggleOffTransition, toggleOnTransition, children, transformOrigin, direction = 'both', style, ...rest } = props;
-    const prefersReducedMotion = usePrefersReducedMotion();
-    const growProps = getGrow({
-        toggle,
-        direction,
-        prefersReducedMotion,
-        toggleOffTransition,
-        toggleOnTransition,
-        transformOrigin,
-    });
-    return (jsx(motion.div, { ...growProps, ...rest, style: { ...growProps.style, ...style }, children: children }));
-};
-
-var ShowHideEye = {"sui-show-hide-eye-root":"sui-show-hide-eye-root"};
-
-export { Fade, Grow, ExpandCollapseCaret as expandCollapseCaretStyles, getFade, getGrow, ShowHideEye as showHideEyeStyles, usePrefersReducedMotion };
+export { ExpandCollapseCaret, expandCollapseCaretStyles, useMotionSafeTransition, usePrefersReducedMotion } from "./chunks/1294.js";
+export { Fade, Grow, ShowHideEye, SlideIn, SortableArrow, getFade, getGrow, getSlideIn, getTransformOriginStringForPlacement, showHideEyeStyles } from "./chunks/4476.js";

package/Announcement.js

@@ -1,50 +1,61 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { InfoMd, AlertMd, SuccessMd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { a as Alert } from './chunks/Alert.js';
-import 'clsx';
-import './chunks/Icon.js';
-import './chunks/IconButtonLabel.js';
-import '@mui/base';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import 'framer-motion';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-
-var Announcement$1 = {"sui-announcement-icon":"sui-announcement-icon","sui-announcement-close":"sui-announcement-close","sui-announcement-action":"sui-announcement-action","sui-announcement-root":"sui-announcement-root","sui-announcement-neutral":"sui-announcement-neutral","sui-announcement-info":"sui-announcement-info","sui-announcement-error":"sui-announcement-error","sui-announcement-success":"sui-announcement-success","sui-announcement-warning":"sui-announcement-warning","sui-announcement-body":"sui-announcement-body","sui-announcement-content":"sui-announcement-content","sui-compact":"sui-compact"};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { AlertMd, InfoMd, SuccessMd } from "@ringcentral/spring-icon";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Alert as Alert_Alert } from "./Alert.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Announcement = ({"sui-announcement-icon":"sui-announcement-icon","sui-announcement-close":"sui-announcement-close","sui-announcement-action":"sui-announcement-action","sui-announcement-root":"sui-announcement-root","sui-announcement-neutral":"sui-announcement-neutral","sui-announcement-info":"sui-announcement-info","sui-announcement-error":"sui-announcement-error","sui-announcement-success":"sui-announcement-success","sui-announcement-warning":"sui-announcement-warning","sui-announcement-body":"sui-announcement-body","sui-announcement-content":"sui-announcement-content","sui-compact":"sui-compact"});
+
+
+
+
+
+
 
 const DEFAULT_ICON_MAP = {
     info: InfoMd,
     error: AlertMd,
     success: SuccessMd,
     warning: AlertMd,
-    neutral: InfoMd,
+    neutral: InfoMd
 };
-const Announcement = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Announcement' });
-    const { classes, className, severity = 'neutral', icon, startSlot = icon === undefined || icon === true
-        ? DEFAULT_ICON_MAP[severity]
-        : icon || null, CloseButtonProps, ...rest } = props;
+const Announcement_Announcement = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Announcement'
+    });
+    const { classes, className, severity = 'neutral', icon, startSlot = icon === undefined || icon === true ? DEFAULT_ICON_MAP[severity] : icon || null, CloseButtonProps, ...rest } = props;
     const cls = useClasses('announcement', classes, className);
-    return (jsx(Alert, { ref: ref, ...rest, startSlot: startSlot, CloseButtonProps: { variant: 'inverted', ...CloseButtonProps }, classes: {
+    return /*#__PURE__*/ jsx(Alert_Alert, {
+        ref: ref,
+        ...rest,
+        startSlot: startSlot,
+        CloseButtonProps: {
+            variant: 'inverted',
+            ...CloseButtonProps
+        },
+        classes: {
             root: cls('root', severity),
             body: cls('body'),
             icon: cls('icon'),
             close: cls('close'),
             action: cls('action'),
-            content: cls('content'),
-        } }));
+            content: cls('content')
+        }
+    });
 });
-Announcement.displayName = 'SuiAnnouncement';
+Announcement_Announcement.displayName = 'SuiAnnouncement';
+
+
+
+
+
 
-export { Announcement, Announcement$1 as announcementStyles };
+export { Announcement as announcementStyles, Announcement_Announcement as Announcement };