@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/components/ui/feedback/alert.d.ts

@@ -1,154 +1,5 @@
-// Simple icon components
-const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-  </svg>
-);
-
-const ExclamationTriangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-  </svg>
-);
-
-const XCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-  </svg>
-);
-
-const InformationCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-  </svg>
-);
-
-const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-  </svg>
-);
-
-// Get icon for alert type
-const getAlertIcon = (type: AlertProps['type'], className: string) => {
-  switch (type) {
-    case 'success':
-      return <CheckCircleIcon className={className} />;
-    case 'warning':
-      return <ExclamationTriangleIcon className={className} />;
-    case 'error':
-      return <XCircleIcon className={className} />;
-    case 'info':
-      return <InformationCircleIcon className={className} />;
-    default:
-      return null;
-  }
-};
-
-// Alert Action Button Component
-const AlertActionButton: React.FC<AlertAction & { theme: string }> = ({
-  label,
-  onClick,
-  variant = 'primary'
-}) => {
-  return (
-    <button
-      type="button"
-      className={`alert__action-button alert__action-button--${variant}`}
-      onClick={onClick}
-    >
-      {label}
-    </button>
-  );
-};
-
-// Main Alert Component
-export const Alert: React.FC<AlertProps> = ({
-  title,
-  message,
-  type = 'info',
-  dismissible = false,
-  onDismiss,
-  icon,
-  actions = [],
-  showIcon = true,
-  closable = false,
-  persistent = false,
-  className = '',
-  theme = 'stan-design',
-  size = 'md',
-  variant = 'default'
-}) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // Note: colors not needed as we're using semantic CSS classes
-
-  const [isVisible, setIsVisible] = useState(true);
-
-  const handleDismiss = useCallback(() => {
-    if (onDismiss) {
-      onDismiss();
-    }
-    if (!persistent) {
-      setIsVisible(false);
-    }
-  }, [onDismiss, persistent]);
-
-  const shouldShowIcon = showIcon && (icon || type);
-  const shouldShowClose = (closable || dismissible) && !persistent;
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <div
-      className={`alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`}
-      role="alert"
-      aria-live="polite"
-    >
-      {shouldShowIcon && (
-        <div className={`alert__icon alert__icon--${type}`}>
-          {icon || getAlertIcon(type, 'alert__icon')}
-        </div>
-      )}
-
-      <div className="alert__content">
-        {title && (
-          <h3 className="alert__title">
-            {title}
-          </h3>
-        )}
-
-        <div className={`alert__message ${!title ? 'alert__message--only' : ''}`}>
-          {message}
-        </div>
-
-        {actions.length > 0 && (
-          <div className="alert__actions">
-            {actions.map((action, index) => (
-              <AlertActionButton
-                key={index}
-                {...action}
-                theme={theme}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {shouldShowClose && (
-        <button
-          type="button"
-          className="alert__close-button"
-          onClick={handleDismiss}
-          aria-label="Close alert"
-        >
-          <XMarkIcon className="alert__close-icon" />
-        </button>
-      )}
-    </div>
-  );
-};
-
+import React from 'react';
+import { AlertProps } from './types';
+export declare const Alert: React.FC<AlertProps>;
 export default Alert;
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/ui/feedback/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/feedback/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,UAAU,EAAe,MAAM,SAAS,CAAC;AAmElD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsFtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/ui/feedback/alert.esm.js

@@ -1,157 +1,49 @@
-import React, { useState, useCallback } from 'react';
-import { AlertProps, AlertAction } from './types';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
 // Simple icon components
-const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-  </svg>
-);
-
-const ExclamationTriangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-  </svg>
-);
-
-const XCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-  </svg>
-);
-
-const InformationCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-  </svg>
-);
-
-const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-  </svg>
-);
-
+const CheckCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }));
+const ExclamationTriangleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
+const XCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }));
+const InformationCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }));
+const XMarkIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }));
 // Get icon for alert type
-const getAlertIcon = (type: AlertProps['type'], className: string) => {
-  switch (type) {
-    case 'success':
-      return <CheckCircleIcon className={className} />;
-    case 'warning':
-      return <ExclamationTriangleIcon className={className} />;
-    case 'error':
-      return <XCircleIcon className={className} />;
-    case 'info':
-      return <InformationCircleIcon className={className} />;
-    default:
-      return null;
-  }
+const getAlertIcon = (type, className) => {
+    switch (type) {
+        case 'success':
+            return _jsx(CheckCircleIcon, { className: className });
+        case 'warning':
+            return _jsx(ExclamationTriangleIcon, { className: className });
+        case 'error':
+            return _jsx(XCircleIcon, { className: className });
+        case 'info':
+            return _jsx(InformationCircleIcon, { className: className });
+        default:
+            return null;
+    }
 };
-
 // Alert Action Button Component
-const AlertActionButton: React.FC<AlertAction & { theme: string }> = ({
-  label,
-  onClick,
-  variant = 'primary'
-}) => {
-  return (
-    <button
-      type="button"
-      className={`alert__action-button alert__action-button--${variant}`}
-      onClick={onClick}
-    >
-      {label}
-    </button>
-  );
+const AlertActionButton = ({ label, onClick, variant = 'primary' }) => {
+    return (_jsx("button", { type: "button", className: `alert__action-button alert__action-button--${variant}`, onClick: onClick, children: label }));
 };
-
 // Main Alert Component
-export const Alert: React.FC<AlertProps> = ({
-  title,
-  message,
-  type = 'info',
-  dismissible = false,
-  onDismiss,
-  icon,
-  actions = [],
-  showIcon = true,
-  closable = false,
-  persistent = false,
-  className = '',
-  theme = 'stan-design',
-  size = 'md',
-  variant = 'default'
-}) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // Note: colors not needed as we're using semantic CSS classes
-  
-  const [isVisible, setIsVisible] = useState(true);
-
-  const handleDismiss = useCallback(() => {
-    if (onDismiss) {
-      onDismiss();
-    }
-    if (!persistent) {
-      setIsVisible(false);
+export const Alert = ({ title, message, type = 'info', dismissible = false, onDismiss, icon, actions = [], showIcon = true, closable = false, persistent = false, className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // Note: colors not needed as we're using semantic CSS classes
+    const [isVisible, setIsVisible] = useState(true);
+    const handleDismiss = useCallback(() => {
+        if (onDismiss) {
+            onDismiss();
+        }
+        if (!persistent) {
+            setIsVisible(false);
+        }
+    }, [onDismiss, persistent]);
+    const shouldShowIcon = showIcon && (icon || type);
+    const shouldShowClose = (closable || dismissible) && !persistent;
+    if (!isVisible) {
+        return null;
     }
-  }, [onDismiss, persistent]);
-
-  const shouldShowIcon = showIcon && (icon || type);
-  const shouldShowClose = (closable || dismissible) && !persistent;
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <div
-      className={`alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`}
-      role="alert"
-      aria-live="polite"
-    >
-      {shouldShowIcon && (
-        <div className={`alert__icon alert__icon--${type}`}>
-          {icon || getAlertIcon(type, 'alert__icon')}
-        </div>
-      )}
-
-      <div className="alert__content">
-        {title && (
-          <h3 className="alert__title">
-            {title}
-          </h3>
-        )}
-
-        <div className={`alert__message ${!title ? 'alert__message--only' : ''}`}>
-          {message}
-        </div>
-
-        {actions.length > 0 && (
-          <div className="alert__actions">
-            {actions.map((action, index) => (
-              <AlertActionButton
-                key={index}
-                {...action}
-                theme={theme}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {shouldShowClose && (
-        <button
-          type="button"
-          className="alert__close-button"
-          onClick={handleDismiss}
-          aria-label="Close alert"
-        >
-          <XMarkIcon className="alert__close-icon" />
-        </button>
-      )}
-    </div>
-  );
+    return (_jsxs("div", { className: `alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`, role: "alert", "aria-live": "polite", children: [shouldShowIcon && (_jsx("div", { className: `alert__icon alert__icon--${type}`, children: icon || getAlertIcon(type, 'alert__icon') })), _jsxs("div", { className: "alert__content", children: [title && (_jsx("h3", { className: "alert__title", children: title })), _jsx("div", { className: `alert__message ${!title ? 'alert__message--only' : ''}`, children: message }), actions.length > 0 && (_jsx("div", { className: "alert__actions", children: actions.map((action, index) => (_jsx(AlertActionButton, { ...action, theme: theme }, index))) }))] }), shouldShowClose && (_jsx("button", { type: "button", className: "alert__close-button", onClick: handleDismiss, "aria-label": "Close alert", children: _jsx(XMarkIcon, { className: "alert__close-icon" }) }))] }));
 };
-
 export default Alert;

package/dist/components/ui/feedback/alert.js

@@ -1,157 +1,49 @@
-import React, { useState, useCallback } from 'react';
-import { AlertProps, AlertAction } from './types';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
 // Simple icon components
-const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-  </svg>
-);
-
-const ExclamationTriangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-  </svg>
-);
-
-const XCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-  </svg>
-);
-
-const InformationCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-  </svg>
-);
-
-const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-    <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-  </svg>
-);
-
+const CheckCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }));
+const ExclamationTriangleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
+const XCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }));
+const InformationCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }));
+const XMarkIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }));
 // Get icon for alert type
-const getAlertIcon = (type: AlertProps['type'], className: string) => {
-  switch (type) {
-    case 'success':
-      return <CheckCircleIcon className={className} />;
-    case 'warning':
-      return <ExclamationTriangleIcon className={className} />;
-    case 'error':
-      return <XCircleIcon className={className} />;
-    case 'info':
-      return <InformationCircleIcon className={className} />;
-    default:
-      return null;
-  }
+const getAlertIcon = (type, className) => {
+    switch (type) {
+        case 'success':
+            return _jsx(CheckCircleIcon, { className: className });
+        case 'warning':
+            return _jsx(ExclamationTriangleIcon, { className: className });
+        case 'error':
+            return _jsx(XCircleIcon, { className: className });
+        case 'info':
+            return _jsx(InformationCircleIcon, { className: className });
+        default:
+            return null;
+    }
 };
-
 // Alert Action Button Component
-const AlertActionButton: React.FC<AlertAction & { theme: string }> = ({
-  label,
-  onClick,
-  variant = 'primary'
-}) => {
-  return (
-    <button
-      type="button"
-      className={`alert__action-button alert__action-button--${variant}`}
-      onClick={onClick}
-    >
-      {label}
-    </button>
-  );
+const AlertActionButton = ({ label, onClick, variant = 'primary' }) => {
+    return (_jsx("button", { type: "button", className: `alert__action-button alert__action-button--${variant}`, onClick: onClick, children: label }));
 };
-
 // Main Alert Component
-export const Alert: React.FC<AlertProps> = ({
-  title,
-  message,
-  type = 'info',
-  dismissible = false,
-  onDismiss,
-  icon,
-  actions = [],
-  showIcon = true,
-  closable = false,
-  persistent = false,
-  className = '',
-  theme = 'stan-design',
-  size = 'md',
-  variant = 'default'
-}) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // Note: colors not needed as we're using semantic CSS classes
-  
-  const [isVisible, setIsVisible] = useState(true);
-
-  const handleDismiss = useCallback(() => {
-    if (onDismiss) {
-      onDismiss();
-    }
-    if (!persistent) {
-      setIsVisible(false);
+export const Alert = ({ title, message, type = 'info', dismissible = false, onDismiss, icon, actions = [], showIcon = true, closable = false, persistent = false, className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // Note: colors not needed as we're using semantic CSS classes
+    const [isVisible, setIsVisible] = useState(true);
+    const handleDismiss = useCallback(() => {
+        if (onDismiss) {
+            onDismiss();
+        }
+        if (!persistent) {
+            setIsVisible(false);
+        }
+    }, [onDismiss, persistent]);
+    const shouldShowIcon = showIcon && (icon || type);
+    const shouldShowClose = (closable || dismissible) && !persistent;
+    if (!isVisible) {
+        return null;
     }
-  }, [onDismiss, persistent]);
-
-  const shouldShowIcon = showIcon && (icon || type);
-  const shouldShowClose = (closable || dismissible) && !persistent;
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
-    <div
-      className={`alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`}
-      role="alert"
-      aria-live="polite"
-    >
-      {shouldShowIcon && (
-        <div className={`alert__icon alert__icon--${type}`}>
-          {icon || getAlertIcon(type, 'alert__icon')}
-        </div>
-      )}
-
-      <div className="alert__content">
-        {title && (
-          <h3 className="alert__title">
-            {title}
-          </h3>
-        )}
-
-        <div className={`alert__message ${!title ? 'alert__message--only' : ''}`}>
-          {message}
-        </div>
-
-        {actions.length > 0 && (
-          <div className="alert__actions">
-            {actions.map((action, index) => (
-              <AlertActionButton
-                key={index}
-                {...action}
-                theme={theme}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {shouldShowClose && (
-        <button
-          type="button"
-          className="alert__close-button"
-          onClick={handleDismiss}
-          aria-label="Close alert"
-        >
-          <XMarkIcon className="alert__close-icon" />
-        </button>
-      )}
-    </div>
-  );
+    return (_jsxs("div", { className: `alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`, role: "alert", "aria-live": "polite", children: [shouldShowIcon && (_jsx("div", { className: `alert__icon alert__icon--${type}`, children: icon || getAlertIcon(type, 'alert__icon') })), _jsxs("div", { className: "alert__content", children: [title && (_jsx("h3", { className: "alert__title", children: title })), _jsx("div", { className: `alert__message ${!title ? 'alert__message--only' : ''}`, children: message }), actions.length > 0 && (_jsx("div", { className: "alert__actions", children: actions.map((action, index) => (_jsx(AlertActionButton, { ...action, theme: theme }, index))) }))] }), shouldShowClose && (_jsx("button", { type: "button", className: "alert__close-button", onClick: handleDismiss, "aria-label": "Close alert", children: _jsx(XMarkIcon, { className: "alert__close-icon" }) }))] }));
 };
-
 export default Alert;