@aurora-ds/components 1.1.3 → 1.1.4

package/dist/esm/index.js

@@ -2346,14 +2346,23 @@ const VARIANT_ICONS = {
     warning: AlertWarningIcon,
     info: AlertInfoIcon,
 };
+/** Returns true if value is a React component type (function/class), false if it is a rendered node. */
+const isSvgComponent = (value) => typeof value === 'function';
 /**
  * Alert title row: renders the variant icon alongside the title text.
  * Must be used inside an `<Alert>` component.
  */
-const AlertTitle = ({ children }) => {
+const AlertTitle = ({ children, icon }) => {
     const { variant, accentColor } = useAlertContext();
-    const IconComponent = VARIANT_ICONS[variant];
-    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [IconComponent && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: jsx(IconComponent, { width: 20, height: 20 }) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
+    // Resolve which icon to render:
+    // - custom icon prop always takes precedence over the built-in variant icon
+    // - for "default" variant there is no built-in icon; custom icon adds one
+    const builtInIcon = VARIANT_ICONS[variant];
+    // Must be capitalised for JSX to treat it as a component (not an HTML tag)
+    const ResolvedIcon = icon && isSvgComponent(icon) ? icon : (icon === undefined ? (builtInIcon ?? null) : null);
+    const customNode = icon && !isSvgComponent(icon) ? icon : null;
+    const hasIcon = ResolvedIcon !== null || customNode !== null;
+    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
 };
 AlertTitle.displayName = 'Alert.Title';
 
@@ -2387,9 +2396,9 @@ const VARIANT_ARIA_LIVE = {
  *   <Alert.Body>Your changes have been saved successfully.</Alert.Body>
  * </Alert>
  */
-const AlertBase = ({ variant = 'default', children, width = '100%' }) => {
+const AlertBase = ({ variant = 'default', children, width = '100%', outline = false, shadow = 'none', }) => {
     const { backgroundColor, borderColor, accentColor } = VARIANT_TOKENS[variant];
-    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: 'alert', "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: borderColor, borderWidth: '1px', borderStyle: 'solid', width: width, children: children }) }));
+    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: 'alert', "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: outline ? borderColor : undefined, borderWidth: outline ? '1px' : undefined, borderStyle: outline ? 'solid' : undefined, boxShadow: shadow, width: width, children: children }) }));
 };
 AlertBase.displayName = 'Alert';
 const Alert = AlertBase;