react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,249 +1 @@
-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 }) })] }));
-};
+"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})})]})};

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

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

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

@@ -1,45 +1 @@
-'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';
+"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";

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

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

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

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

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

@@ -1,10 +1 @@
-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'];
+"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"];