react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/components/Accordion/Collapsible/Collapsible2.component.js

@@ -1 +1,249 @@
-"use strict";import{jsx as n,jsxs as C}from"react/jsx-runtime";import{useState as u,useRef as F,useEffect as M}from"react";const W=({isOpen:s,duration:a,variant:r})=>{const i=(()=>{switch(r){case"elevated":return{bg:"rgba(255,255,255,0.2)",stroke:"#ffffff"};case"glass":return{bg:"rgba(99,102,241,0.15)",stroke:"#6366f1"};case"bordered":return{bg:"#f3f4f6",stroke:"#374151"};case"minimal":return{bg:"transparent",stroke:"#6b7280"};default:return{bg:"#e0e7ff",stroke:"#4f46e5"}}})();return n("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:"50%",backgroundColor:i.bg,transition:`all ${a}ms cubic-bezier(0.4, 0, 0.2, 1)`,transform:s?"rotate(180deg)":"rotate(0deg)",flexShrink:0},children:n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:i.stroke,strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:n("polyline",{points:"6 9 12 15 18 9"})})})},A=(s,a)=>{const r={display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",padding:"16px 20px",fontSize:"15px",fontWeight:600,textAlign:"left",border:"none",cursor:"pointer",outline:"none",gap:"12px"},e={padding:"20px"};switch(s){case"bordered":return{container:{borderRadius:16,border:"1px solid #e5e7eb",overflow:"hidden",backgroundColor:"#ffffff"},button:{...r,backgroundColor:"#ffffff",color:"#1f2937",borderBottom:a?"1px solid #e5e7eb":"none"},content:{...e,backgroundColor:"#fafafa"}};case"elevated":return{container:{borderRadius:20,overflow:"hidden",boxShadow:"0 10px 40px -10px rgba(99, 102, 241, 0.4)"},button:{...r,background:"linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%)",color:"#ffffff"},content:{...e,backgroundColor:"#ffffff"}};case"minimal":return{container:{borderRadius:12},button:{...r,backgroundColor:"transparent",color:"#374151",padding:"12px 16px"},content:{...e,backgroundColor:"transparent",padding:"12px 16px"}};case"glass":return{container:{borderRadius:20,overflow:"hidden",backgroundColor:"rgba(255, 255, 255, 0.7)",backdropFilter:"blur(20px)",border:"1px solid rgba(255, 255, 255, 0.3)",boxShadow:"0 8px 32px rgba(99, 102, 241, 0.15)"},button:{...r,backgroundColor:"transparent",color:"#1f2937"},content:{...e,backgroundColor:"rgba(249, 250, 251, 0.5)"}};default:return{container:{borderRadius:16,overflow:"hidden",backgroundColor:"#ffffff",boxShadow:"0 4px 20px -4px rgba(0, 0, 0, 0.1)",border:"1px solid #f3f4f6"},button:{...r,backgroundColor:"#f8fafc",color:"#1e293b",borderBottom:a?"1px solid #e2e8f0":"none"},content:{...e,backgroundColor:"#ffffff"}}}};export const Collapsible=({label:s,labelClassName:a,className:r,classNames:e={},styles:i={},variant:l="default",animationDuration:c=300,defaultOpen:m=!1,isOpen:g,hideIcon:w=!1,icon:y,onExpand:j,onCollapse:z,children:p})=>{const h=g!==void 0,[H,R]=u(m),t=h?g:H,x=F(null),[S,B]=u(0),[I,f]=u(!1);M(()=>{const o=x.current;if(!o)return;const b=()=>{if(o){const L=o.scrollHeight;B(L)}};b();const k=new ResizeObserver(()=>{b()});k.observe(o);const v=new MutationObserver(()=>{requestAnimationFrame(b)});return v.observe(o,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),()=>{k.disconnect(),v.disconnect()}},[p]);const O=()=>{const o=typeof s=="string"?s:"";t?z?.(o):j?.(o),h||R(!t)},d=A(l,t),$=()=>{if(!I)return{};switch(l){case"elevated":return{filter:"brightness(1.1)"};case"bordered":return{backgroundColor:"#f9fafb"};case"minimal":return{backgroundColor:"#f3f4f6"};case"glass":return{backgroundColor:"rgba(99, 102, 241, 0.05)"};default:return{backgroundColor:"#f1f5f9"}}};return C("div",{className:e.container,style:{display:"flex",flexDirection:"column",width:"100%",transition:`all ${c}ms cubic-bezier(0.4, 0, 0.2, 1)`,...d.container,...i.container},children:[C("button",{className:[a,e.button].filter(Boolean).join(" "),style:{...d.button,...$(),transition:`all ${c}ms cubic-bezier(0.4, 0, 0.2, 1)`,...i.button},type:"button",onClick:O,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),onFocus:()=>f(!0),onBlur:()=>f(!1),"aria-expanded":t,children:[n("span",{style:{flex:1,lineHeight:1.5},children:s}),!w&&n("div",{className:e.iconWrapper,children:y||n(W,{isOpen:t,duration:c,variant:l})})]}),n("div",{style:{height:t?S:0,overflow:"hidden",transition:`height ${c}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${c}ms cubic-bezier(0.4, 0, 0.2, 1)`,opacity:t?1:0},children:n("div",{ref:x,className:[r,e.content].filter(Boolean).join(" "),style:{...d.content,transform:t?"translateY(0)":"translateY(-10px)",transition:`transform ${c}ms cubic-bezier(0.4, 0, 0.2, 1)`,...i.content},children:p})})]})};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+// Beautiful chevron icon with circle background
+const ChevronIcon = ({ isOpen, duration, variant }) => {
+    const getIconColors = () => {
+        switch (variant) {
+            case 'elevated':
+                return { bg: 'rgba(255,255,255,0.2)', stroke: '#ffffff' };
+            case 'glass':
+                return { bg: 'rgba(99,102,241,0.15)', stroke: '#6366f1' };
+            case 'bordered':
+                return { bg: '#f3f4f6', stroke: '#374151' };
+            case 'minimal':
+                return { bg: 'transparent', stroke: '#6b7280' };
+            default:
+                return { bg: '#e0e7ff', stroke: '#4f46e5' };
+        }
+    };
+    const colors = getIconColors();
+    return (_jsx("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 32,
+            height: 32,
+            borderRadius: '50%',
+            backgroundColor: colors.bg,
+            transition: `all ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+            flexShrink: 0,
+        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: colors.stroke, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }) }));
+};
+// Variant style configurations
+const getVariantStyles = (variant, isOpen) => {
+    const baseButton = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        padding: '16px 20px',
+        fontSize: '15px',
+        fontWeight: 600,
+        textAlign: 'left',
+        border: 'none',
+        cursor: 'pointer',
+        outline: 'none',
+        gap: '12px',
+    };
+    const baseContent = {
+        padding: '20px',
+    };
+    switch (variant) {
+        case 'bordered':
+            return {
+                container: {
+                    borderRadius: 16,
+                    border: '1px solid #e5e7eb',
+                    overflow: 'hidden',
+                    backgroundColor: '#ffffff',
+                },
+                button: {
+                    ...baseButton,
+                    backgroundColor: '#ffffff',
+                    color: '#1f2937',
+                    borderBottom: isOpen ? '1px solid #e5e7eb' : 'none',
+                },
+                content: {
+                    ...baseContent,
+                    backgroundColor: '#fafafa',
+                },
+            };
+        case 'elevated':
+            return {
+                container: {
+                    borderRadius: 20,
+                    overflow: 'hidden',
+                    boxShadow: '0 10px 40px -10px rgba(99, 102, 241, 0.4)',
+                },
+                button: {
+                    ...baseButton,
+                    background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%)',
+                    color: '#ffffff',
+                },
+                content: {
+                    ...baseContent,
+                    backgroundColor: '#ffffff',
+                },
+            };
+        case 'minimal':
+            return {
+                container: {
+                    borderRadius: 12,
+                },
+                button: {
+                    ...baseButton,
+                    backgroundColor: 'transparent',
+                    color: '#374151',
+                    padding: '12px 16px',
+                },
+                content: {
+                    ...baseContent,
+                    backgroundColor: 'transparent',
+                    padding: '12px 16px',
+                },
+            };
+        case 'glass':
+            return {
+                container: {
+                    borderRadius: 20,
+                    overflow: 'hidden',
+                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                    backdropFilter: 'blur(20px)',
+                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                    boxShadow: '0 8px 32px rgba(99, 102, 241, 0.15)',
+                },
+                button: {
+                    ...baseButton,
+                    backgroundColor: 'transparent',
+                    color: '#1f2937',
+                },
+                content: {
+                    ...baseContent,
+                    backgroundColor: 'rgba(249, 250, 251, 0.5)',
+                },
+            };
+        default: // 'default'
+            return {
+                container: {
+                    borderRadius: 16,
+                    overflow: 'hidden',
+                    backgroundColor: '#ffffff',
+                    boxShadow: '0 4px 20px -4px rgba(0, 0, 0, 0.1)',
+                    border: '1px solid #f3f4f6',
+                },
+                button: {
+                    ...baseButton,
+                    backgroundColor: '#f8fafc',
+                    color: '#1e293b',
+                    borderBottom: isOpen ? '1px solid #e2e8f0' : 'none',
+                },
+                content: {
+                    ...baseContent,
+                    backgroundColor: '#ffffff',
+                },
+            };
+    }
+};
+export const Collapsible = ({ label, labelClassName, className, classNames = {}, styles = {}, variant = 'default', animationDuration = 300, defaultOpen = false, isOpen: controlledOpen, hideIcon = false, icon, onExpand, onCollapse, children, }) => {
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = isControlled ? controlledOpen : internalOpen;
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    // Measure content height - always observe for dynamic content changes
+    useEffect(() => {
+        const element = contentRef.current;
+        if (!element)
+            return;
+        // Function to update height
+        const updateHeight = () => {
+            if (element) {
+                // Use scrollHeight for accurate measurement including all children
+                const newHeight = element.scrollHeight;
+                setContentHeight(newHeight);
+            }
+        };
+        // Initial measurement
+        updateHeight();
+        // ResizeObserver for size changes (window resize, content reflow)
+        const resizeObserver = new ResizeObserver(() => {
+            updateHeight();
+        });
+        resizeObserver.observe(element);
+        // MutationObserver for DOM changes (dynamic content)
+        const mutationObserver = new MutationObserver(() => {
+            // Use requestAnimationFrame to ensure DOM has settled
+            requestAnimationFrame(updateHeight);
+        });
+        mutationObserver.observe(element, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [children]);
+    const toggle = () => {
+        const labelText = typeof label === 'string' ? label : '';
+        if (open) {
+            onCollapse?.(labelText);
+        }
+        else {
+            onExpand?.(labelText);
+        }
+        if (!isControlled) {
+            setInternalOpen(!open);
+        }
+    };
+    const variantStyles = getVariantStyles(variant, open);
+    // Hover styles per variant
+    const getHoverButtonStyle = () => {
+        if (!isHovered)
+            return {};
+        switch (variant) {
+            case 'elevated':
+                return { filter: 'brightness(1.1)' };
+            case 'bordered':
+                return { backgroundColor: '#f9fafb' };
+            case 'minimal':
+                return { backgroundColor: '#f3f4f6' };
+            case 'glass':
+                return { backgroundColor: 'rgba(99, 102, 241, 0.05)' };
+            default:
+                return { backgroundColor: '#f1f5f9' };
+        }
+    };
+    return (_jsxs("div", { className: classNames.container, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            transition: `all ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+            ...variantStyles.container,
+            ...styles.container,
+        }, children: [_jsxs("button", { className: [labelClassName, classNames.button]
+                    .filter(Boolean)
+                    .join(' '), style: {
+                    ...variantStyles.button,
+                    ...getHoverButtonStyle(),
+                    transition: `all ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+                    ...styles.button,
+                }, type: "button", onClick: toggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsHovered(true), onBlur: () => setIsHovered(false), "aria-expanded": open, children: [_jsx("span", { style: {
+                            flex: 1,
+                            lineHeight: 1.5,
+                        }, children: label }), !hideIcon && (_jsx("div", { className: classNames.iconWrapper, children: icon || (_jsx(ChevronIcon, { isOpen: open, duration: animationDuration, variant: variant })) }))] }), _jsx("div", { style: {
+                    height: open ? contentHeight : 0,
+                    overflow: 'hidden',
+                    transition: `height ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+                    opacity: open ? 1 : 0,
+                }, children: _jsx("div", { ref: contentRef, className: [className, classNames.content].filter(Boolean).join(' '), style: {
+                        ...variantStyles.content,
+                        transform: open ? 'translateY(0)' : 'translateY(-10px)',
+                        transition: `transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+                        ...styles.content,
+                    }, children: children }) })] }));
+};

package/lib/src/core-components/src/components/Action/types.js

@@ -1 +1,8 @@
-"use strict";export const ACTION_SIZE=["sm","md","lg"],ACTION_VARIANT=["filled","tonal","outline","flat"],ACTION_STATE=["enabled","disabled","loading","readonly"];
+export const ACTION_SIZE = ['sm', 'md', 'lg'];
+export const ACTION_VARIANT = ['filled', 'tonal', 'outline', 'flat'];
+export const ACTION_STATE = [
+    'enabled',
+    'disabled',
+    'loading',
+    'readonly',
+];

package/lib/src/core-components/src/components/AlertBanner/AlertBanner.js

@@ -1 +1,45 @@
-"use strict";"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{forwardRef as W,useEffect as A,useCallback as x}from"react";import{AlertBannerContainer as z,IconWrapper as b,ContentWrapper as D,Title as j,Message as L,ActionsWrapper as M,ActionButton as N,DismissButton as T}from"./elements";const h=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),E=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e("polyline",{points:"22 4 12 14.01 9 11.01"})]}),O=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),_=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]}),R=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),S=a=>{switch(a){case"info":return e(h,{});case"success":return e(E,{});case"warning":return e(O,{});case"error":return e(_,{});default:return e(h,{})}};export const AlertBanner=W(function(y,p){const{children:f,type:i="info",variant:m="inline",size:o="medium",isOpen:s=!0,onClose:r,hideDismissButton:C=!1,icon:k,showIcon:v=!0,action:t,title:d,autoDismiss:l,animated:B=!0,className:$,...I}=y;A(()=>{if(l&&s&&r){const c=setTimeout(()=>{r()},l);return()=>clearTimeout(c)}},[l,s,r]);const g=x(c=>{r?.(c)},[r]),w=x(()=>{t?.onClick?.()},[t]),u=k||(v?S(i):null);return n(z,{ref:p,$type:i,$variant:m,$size:o,$isOpen:s,$animated:B,role:"alert","aria-live":"polite","data-aui":"alert-banner",className:$,...I,children:[u&&e(b,{$type:i,$size:o,"aria-hidden":"true",children:u}),n(D,{children:[d&&e(j,{$size:o,children:d}),e(L,{children:f})]}),n(M,{children:[t&&e(N,{$type:i,onClick:w,"aria-label":t.ariaLabel||t.text,children:t.text}),!C&&r&&e(T,{$type:i,$size:o,onClick:g,"aria-label":"Dismiss alert",children:e(R,{})})]})]})});AlertBanner.displayName="AlertBanner";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useCallback } from 'react';
+import { AlertBannerContainer, IconWrapper, ContentWrapper, Title, Message, ActionsWrapper, ActionButton, DismissButton, } from './elements';
+// Default icons for each type
+const InfoIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] }));
+const SuccessIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] }));
+const WarningIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }));
+const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }));
+const CloseIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+const getDefaultIcon = (type) => {
+    switch (type) {
+        case 'info':
+            return _jsx(InfoIcon, {});
+        case 'success':
+            return _jsx(SuccessIcon, {});
+        case 'warning':
+            return _jsx(WarningIcon, {});
+        case 'error':
+            return _jsx(ErrorIcon, {});
+        default:
+            return _jsx(InfoIcon, {});
+    }
+};
+export const AlertBanner = forwardRef(function AlertBannerComponent(props, ref) {
+    const { children, type = 'info', variant = 'inline', size = 'medium', isOpen = true, onClose, hideDismissButton = false, icon, showIcon = true, action, title, autoDismiss, animated = true, className, ...rest } = props;
+    // Auto dismiss
+    useEffect(() => {
+        if (autoDismiss && isOpen && onClose) {
+            const timer = setTimeout(() => {
+                onClose();
+            }, autoDismiss);
+            return () => clearTimeout(timer);
+        }
+    }, [autoDismiss, isOpen, onClose]);
+    const handleClose = useCallback((e) => {
+        onClose?.(e);
+    }, [onClose]);
+    const handleAction = useCallback(() => {
+        action?.onClick?.();
+    }, [action]);
+    const displayIcon = icon || (showIcon ? getDefaultIcon(type) : null);
+    return (_jsxs(AlertBannerContainer, { ref: ref, "$type": type, "$variant": variant, "$size": size, "$isOpen": isOpen, "$animated": animated, role: "alert", "aria-live": "polite", "data-aui": "alert-banner", className: className, ...rest, children: [displayIcon && (_jsx(IconWrapper, { "$type": type, "$size": size, "aria-hidden": "true", children: displayIcon })), _jsxs(ContentWrapper, { children: [title && _jsx(Title, { "$size": size, children: title }), _jsx(Message, { children: children })] }), _jsxs(ActionsWrapper, { children: [action && (_jsx(ActionButton, { "$type": type, onClick: handleAction, "aria-label": action.ariaLabel || action.text, children: action.text })), !hideDismissButton && onClose && (_jsx(DismissButton, { "$type": type, "$size": size, onClick: handleClose, "aria-label": "Dismiss alert", children: _jsx(CloseIcon, {}) }))] })] }));
+});
+AlertBanner.displayName = 'AlertBanner';

package/lib/src/core-components/src/components/AlertBanner/elements.js

@@ -1,4 +1,8 @@
-"use strict";import{styled as o,css as n,keyframes as a}from"styled-components";import{tokens as r}from"../../utils/designTokens";import{breakpoints as s}from"../../utils/abstracts";const f=a`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+import { breakpoints } from '../../utils/abstracts';
+// Animations
+const slideIn = keyframes `
   from {
     opacity: 0;
     transform: translateY(-100%);
@@ -7,7 +11,8 @@
     opacity: 1;
     transform: translateY(0);
   }
-`,c=a`
+`;
+const slideOut = keyframes `
   from {
     opacity: 1;
     transform: translateY(0);
@@ -16,35 +21,96 @@
     opacity: 0;
     transform: translateY(-100%);
   }
-`,t={info:{bg:"#e7f3ff",border:"#3b82f6",text:"#1e40af",icon:"#3b82f6"},success:{bg:"#ecfdf5",border:"#10b981",text:"#065f46",icon:"#10b981"},warning:{bg:"#fffbeb",border:"#f59e0b",text:"#92400e",icon:"#f59e0b"},error:{bg:"#fef2f2",border:"#ef4444",text:"#991b1b",icon:"#ef4444"},default:{bg:r.surface||"#f8f9fa",border:r.outline||"#e9ecef",text:r.onSurface||"#1a1a2e",icon:r.primary||"#454cbf"},dark:{bg:"#1f2937",border:"#374151",text:"#f9fafb",icon:"#9ca3af"}},i={small:{padding:"0.5rem 0.75rem",fontSize:"0.8125rem",iconSize:"16px"},medium:{padding:"0.75rem 1rem",fontSize:"0.875rem",iconSize:"20px"},large:{padding:"1rem 1.25rem",fontSize:"1rem",iconSize:"24px"}};export const AlertBannerContainer=o.div`
-  display: ${({$isOpen:e})=>e?"flex":"none"};
+`;
+// Type colors
+const typeStyles = {
+    info: {
+        bg: '#e7f3ff',
+        border: '#3b82f6',
+        text: '#1e40af',
+        icon: '#3b82f6',
+    },
+    success: {
+        bg: '#ecfdf5',
+        border: '#10b981',
+        text: '#065f46',
+        icon: '#10b981',
+    },
+    warning: {
+        bg: '#fffbeb',
+        border: '#f59e0b',
+        text: '#92400e',
+        icon: '#f59e0b',
+    },
+    error: {
+        bg: '#fef2f2',
+        border: '#ef4444',
+        text: '#991b1b',
+        icon: '#ef4444',
+    },
+    default: {
+        bg: tokens.surface || '#f8f9fa',
+        border: tokens.outline || '#e9ecef',
+        text: tokens.onSurface || '#1a1a2e',
+        icon: tokens.primary || '#454cbf',
+    },
+    dark: {
+        bg: '#1f2937',
+        border: '#374151',
+        text: '#f9fafb',
+        icon: '#9ca3af',
+    },
+};
+// Size styles
+const sizeStyles = {
+    small: {
+        padding: '0.5rem 0.75rem',
+        fontSize: '0.8125rem',
+        iconSize: '16px',
+    },
+    medium: {
+        padding: '0.75rem 1rem',
+        fontSize: '0.875rem',
+        iconSize: '20px',
+    },
+    large: {
+        padding: '1rem 1.25rem',
+        fontSize: '1rem',
+        iconSize: '24px',
+    },
+};
+export const AlertBannerContainer = styled.div `
+  display: ${({ $isOpen }) => ($isOpen ? 'flex' : 'none')};
   align-items: flex-start;
-  gap: ${r.spacing100||"0.5rem"};
+  gap: ${tokens.spacing100 || '0.5rem'};
   width: 100%;
   box-sizing: border-box;
   
   /* Type colors */
-  background: ${({$type:e})=>t[e].bg};
-  border: 1px solid ${({$type:e})=>t[e].border};
-  color: ${({$type:e})=>t[e].text};
+  background: ${({ $type }) => typeStyles[$type].bg};
+  border: 1px solid ${({ $type }) => typeStyles[$type].border};
+  color: ${({ $type }) => typeStyles[$type].text};
   
   /* Size styles */
-  padding: ${({$size:e})=>i[e].padding};
-  font-size: ${({$size:e})=>i[e].fontSize};
+  padding: ${({ $size }) => sizeStyles[$size].padding};
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
   
   /* Variant styles */
-  ${({$variant:e})=>e==="banner"&&n`
+  ${({ $variant }) => $variant === 'banner' &&
+    css `
       border-radius: 0;
       border-left: none;
       border-right: none;
     `}
   
-  ${({$variant:e})=>e==="inline"&&n`
-      border-radius: ${r.borderRadius100||"8px"};
+  ${({ $variant }) => $variant === 'inline' &&
+    css `
+      border-radius: ${tokens.borderRadius100 || '8px'};
     `}
   
-  ${({$variant:e})=>e==="floating"&&n`
-      border-radius: ${r.borderRadius100||"8px"};
+  ${({ $variant }) => $variant === 'floating' &&
+    css `
+      border-radius: ${tokens.borderRadius100 || '8px'};
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       position: fixed;
       top: 1rem;
@@ -53,64 +119,72 @@
       max-width: calc(100% - 2rem);
       z-index: 1000;
       
-      ${s.md} {
+      ${breakpoints.md} {
         max-width: 600px;
       }
     `}
   
   /* Animation */
-  ${({$animated:e,$isOpen:d})=>e&&n`
-      animation: ${d?f:c} 0.3s ease-out;
+  ${({ $animated, $isOpen }) => $animated &&
+    css `
+      animation: ${$isOpen ? slideIn : slideOut} 0.3s ease-out;
     `}
   
   /* Responsive */
-  ${s.xs} {
+  ${breakpoints.xs} {
     flex-direction: column;
     align-items: stretch;
   }
-`,IconWrapper=o.span`
+`;
+export const IconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: ${({$type:e})=>t[e].icon};
-  width: ${({$size:e})=>i[e].iconSize};
-  height: ${({$size:e})=>i[e].iconSize};
+  color: ${({ $type }) => typeStyles[$type].icon};
+  width: ${({ $size }) => sizeStyles[$size].iconSize};
+  height: ${({ $size }) => sizeStyles[$size].iconSize};
   
   svg {
     width: 100%;
     height: 100%;
   }
-`,ContentWrapper=o.div`
+`;
+export const ContentWrapper = styled.div `
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: ${r.spacing050||"0.25rem"};
+  gap: ${tokens.spacing050 || '0.25rem'};
   min-width: 0;
-`,Title=o.strong`
+`;
+export const Title = styled.strong `
   font-weight: 600;
-  font-size: ${({$size:e})=>e==="small"?"0.875rem":e==="large"?"1.125rem":"1rem"};
+  font-size: ${({ $size }) => $size === 'small' ? '0.875rem' :
+    $size === 'large' ? '1.125rem' : '1rem'};
   line-height: 1.4;
-`,Message=o.div`
+`;
+export const Message = styled.div `
   line-height: 1.5;
-`,ActionsWrapper=o.div`
+`;
+export const ActionsWrapper = styled.div `
   display: flex;
   align-items: center;
-  gap: ${r.spacing100||"0.5rem"};
+  gap: ${tokens.spacing100 || '0.5rem'};
   flex-shrink: 0;
   margin-left: auto;
   
-  ${s.xs} {
+  ${breakpoints.xs} {
     margin-left: 0;
-    margin-top: ${r.spacing100||"0.5rem"};
+    margin-top: ${tokens.spacing100 || '0.5rem'};
     justify-content: flex-end;
   }
-`,ActionButton=o.button`
+`;
+export const ActionButton = styled.button `
   background: transparent;
-  border: 1px solid ${({$type:e})=>t[e].border};
-  color: ${({$type:e})=>t[e].text};
+  border: 1px solid ${({ $type }) => typeStyles[$type].border};
+  color: ${({ $type }) => typeStyles[$type].text};
   padding: 0.375rem 0.75rem;
-  border-radius: ${r.borderRadius050||"4px"};
+  border-radius: ${tokens.borderRadius050 || '4px'};
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -118,36 +192,37 @@
   white-space: nowrap;
   
   &:hover {
-    background: ${({$type:e})=>t[e].border}20;
+    background: ${({ $type }) => typeStyles[$type].border}20;
   }
   
   &:focus-visible {
-    outline: 2px solid ${({$type:e})=>t[e].border};
+    outline: 2px solid ${({ $type }) => typeStyles[$type].border};
     outline-offset: 2px;
   }
-`,DismissButton=o.button`
+`;
+export const DismissButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
-  color: ${({$type:e})=>t[e].text};
+  color: ${({ $type }) => typeStyles[$type].text};
   padding: 0.25rem;
-  border-radius: ${r.borderRadius050||"4px"};
+  border-radius: ${tokens.borderRadius050 || '4px'};
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
   flex-shrink: 0;
-  width: ${({$size:e})=>i[e].iconSize};
-  height: ${({$size:e})=>i[e].iconSize};
+  width: ${({ $size }) => sizeStyles[$size].iconSize};
+  height: ${({ $size }) => sizeStyles[$size].iconSize};
   
   &:hover {
     opacity: 1;
-    background: ${({$type:e})=>t[e].border}20;
+    background: ${({ $type }) => typeStyles[$type].border}20;
   }
   
   &:focus-visible {
-    outline: 2px solid ${({$type:e})=>t[e].border};
+    outline: 2px solid ${({ $type }) => typeStyles[$type].border};
     outline-offset: 2px;
   }
   

package/lib/src/core-components/src/components/AlertBanner/index.js

@@ -1 +1,2 @@
-"use strict";export{AlertBanner}from"./AlertBanner";export*from"./types";
+export { AlertBanner } from './AlertBanner';
+export * from './types';

package/lib/src/core-components/src/components/AlertBanner/types.js

@@ -1 +1,10 @@
-"use strict";export const ALERT_BANNER_TYPES=["info","success","warning","error","default","dark"],ALERT_BANNER_VARIANTS=["banner","inline","floating"],ALERT_BANNER_SIZES=["small","medium","large"];
+export const ALERT_BANNER_TYPES = [
+    'info',
+    'success',
+    'warning',
+    'error',
+    'default',
+    'dark',
+];
+export const ALERT_BANNER_VARIANTS = ['banner', 'inline', 'floating'];
+export const ALERT_BANNER_SIZES = ['small', 'medium', 'large'];