react-restyle-components 0.4.37 → 0.4.39

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

@@ -1,7 +1,4 @@
-import { styled, css, keyframes } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-// Animations
-const fadeIn = keyframes `
+"use strict";import{styled as t,css as n,keyframes as a}from"styled-components";import{tokens as e}from"../../utils/designTokens";const s=a`
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -10,44 +7,38 @@ const fadeIn = keyframes `
     opacity: 1;
     transform: translateY(0);
   }
-`;
-const shimmer = keyframes `
+`,x=a`
   0% {
     background-position: -200% 0;
   }
   100% {
     background-position: 200% 0;
   }
-`;
-export const MasonryContainer = styled.div `
+`;export const MasonryContainer=t.div`
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  gap: ${({ $gutter }) => $gutter}px;
-`;
-export const MasonryColumn = styled.div `
+  gap: ${({$gutter:o})=>o}px;
+`,MasonryColumn=t.div`
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  gap: ${({ $gutter }) => $gutter}px;
-`;
-export const MasonryItemWrapper = styled.div `
+  gap: ${({$gutter:o})=>o}px;
+`,MasonryItemWrapper=t.div`
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
   
-  ${({ $minHeight }) => $minHeight &&
-    css `
-      min-height: ${$minHeight}px;
+  ${({$minHeight:o})=>o&&n`
+      min-height: ${o}px;
     `}
   
   /* Animation */
-  ${({ $animated, $animationDuration, $staggerIndex, $staggerDelay }) => $animated &&
-    css `
+  ${({$animated:o,$animationDuration:i,$staggerIndex:r,$staggerDelay:p})=>o&&n`
       opacity: 0;
-      animation: ${fadeIn} ${$animationDuration}ms ease-out forwards;
-      animation-delay: ${$staggerIndex * $staggerDelay}ms;
+      animation: ${s} ${i}ms ease-out forwards;
+      animation-delay: ${r*p}ms;
     `}
   
   /* Reduce motion */
@@ -55,41 +46,37 @@ export const MasonryItemWrapper = styled.div `
     animation: none;
     opacity: 1;
   }
-`;
-export const MasonryImage = styled.img `
+`,MasonryImage=t.img`
   width: 100%;
   height: auto;
   display: block;
-  object-fit: ${({ $objectFit }) => $objectFit};
-  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
+  object-fit: ${({$objectFit:o})=>o};
+  border-radius: ${({$borderRadius:o})=>typeof o=="number"?`${o}px`:o};
   transition: opacity 0.3s ease;
   
-  ${({ $isLoading }) => $isLoading &&
-    css `
+  ${({$isLoading:o})=>o&&n`
       opacity: 0;
     `}
-`;
-export const ImagePlaceholder = styled.div `
+`,ImagePlaceholder=t.div`
   width: 100%;
-  height: ${({ $height }) => $height ? (typeof $height === 'number' ? `${$height}px` : $height) : '200px'};
+  height: ${({$height:o})=>o?typeof o=="number"?`${o}px`:o:"200px"};
   background: linear-gradient(
     90deg,
-    ${tokens.surface || '#f0f0f0'} 25%,
-    ${tokens.outlineSoft || '#e5e5e5'} 50%,
-    ${tokens.surface || '#f0f0f0'} 75%
+    ${e.surface||"#f0f0f0"} 25%,
+    ${e.outlineSoft||"#e5e5e5"} 50%,
+    ${e.surface||"#f0f0f0"} 75%
   );
   background-size: 400% 100%;
-  animation: ${shimmer} 1.5s ease-in-out infinite;
-  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
-`;
-export const EmptyState = styled.div `
+  animation: ${x} 1.5s ease-in-out infinite;
+  border-radius: ${({$borderRadius:o})=>typeof o=="number"?`${o}px`:o};
+`,EmptyState=t.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
   text-align: center;
-  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6b7280'};
+  color: ${e.onSurface?`${e.onSurface}80`:"#6b7280"};
   font-size: 14px;
   
   svg {
@@ -98,11 +85,9 @@ export const EmptyState = styled.div `
     margin-bottom: 16px;
     opacity: 0.5;
   }
-`;
-// Card style for default item rendering
-export const MasonryCard = styled.div `
+`,MasonryCard=t.div`
   background: white;
-  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
+  border-radius: ${({$borderRadius:o})=>typeof o=="number"?`${o}px`:o};
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
@@ -111,12 +96,10 @@ export const MasonryCard = styled.div `
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
   }
-`;
-export const MasonryCardImage = styled.img `
+`,MasonryCardImage=t.img`
   width: 100%;
   height: auto;
   display: block;
-`;
-export const MasonryCardContent = styled.div `
+`,MasonryCardContent=t.div`
   padding: 12px 16px;
 `;

package/lib/src/core-components/src/components/Masonry/hooks.js

@@ -1,100 +1 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-// Breakpoint values in pixels
-const BREAKPOINT_VALUES = {
-    xs: 0,
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
-};
-/**
- * Hook to get responsive value based on current viewport width
- */
-export function useResponsiveValue(value, defaultValue) {
-    const [currentValue, setCurrentValue] = useState(() => {
-        if (typeof value === 'number')
-            return value;
-        return getResponsiveValue(value, defaultValue, typeof window !== 'undefined' ? window.innerWidth : 1024);
-    });
-    useEffect(() => {
-        if (typeof value === 'number') {
-            setCurrentValue(value);
-            return;
-        }
-        const handleResize = () => {
-            const width = window.innerWidth;
-            setCurrentValue(getResponsiveValue(value, defaultValue, width));
-        };
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [value, defaultValue]);
-    return currentValue;
-}
-function getResponsiveValue(breakpoints, defaultValue, width) {
-    const sortedBreakpoints = Object.entries(BREAKPOINT_VALUES)
-        .sort(([, a], [, b]) => b - a);
-    for (const [key, breakpointWidth] of sortedBreakpoints) {
-        if (width >= breakpointWidth && breakpoints[key] !== undefined) {
-            return breakpoints[key];
-        }
-    }
-    return defaultValue;
-}
-/**
- * Hook to distribute items into columns
- */
-export function useColumnDistribution(items, columnCount, sequential = false) {
-    return useMemo(() => {
-        const columns = Array.from({ length: columnCount }, () => []);
-        if (sequential) {
-            // Sequential: place items in order, filling columns one by one
-            items.forEach((item, index) => {
-                const columnIndex = item.column !== undefined
-                    ? Math.min(item.column, columnCount - 1)
-                    : index % columnCount;
-                columns[columnIndex].push(item);
-            });
-        }
-        else {
-            // Balanced: distribute items to shortest column
-            const columnHeights = Array(columnCount).fill(0);
-            items.forEach((item) => {
-                let targetColumn;
-                if (item.column !== undefined) {
-                    // Respect specified column
-                    targetColumn = Math.min(item.column, columnCount - 1);
-                }
-                else {
-                    // Find shortest column
-                    targetColumn = columnHeights.indexOf(Math.min(...columnHeights));
-                }
-                columns[targetColumn].push(item);
-                // Increment height (use 1 as placeholder, actual heights vary)
-                columnHeights[targetColumn]++;
-            });
-        }
-        return columns;
-    }, [items, columnCount, sequential]);
-}
-/**
- * Hook to track image loading states
- */
-export function useImageLoading() {
-    const [loadingStates, setLoadingStates] = useState({});
-    const [loadedImages, setLoadedImages] = useState(new Set());
-    const setLoading = useCallback((id, isLoading) => {
-        setLoadingStates(prev => ({ ...prev, [id]: isLoading }));
-        if (!isLoading) {
-            setLoadedImages(prev => new Set(prev).add(id));
-        }
-    }, []);
-    const isLoading = useCallback((id) => {
-        return loadingStates[id] ?? true;
-    }, [loadingStates]);
-    const isLoaded = useCallback((id) => {
-        return loadedImages.has(id);
-    }, [loadedImages]);
-    return { setLoading, isLoading, isLoaded };
-}
+"use strict";import{useState as c,useEffect as m,useCallback as f,useMemo as w}from"react";const g={xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536};export function useResponsiveValue(n,t){const[s,o]=c(()=>typeof n=="number"?n:h(n,t,typeof window<"u"?window.innerWidth:1024));return m(()=>{if(typeof n=="number"){o(n);return}const e=()=>{const r=window.innerWidth;o(h(n,t,r))};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[n,t]),s}function h(n,t,s){const o=Object.entries(g).sort(([,e],[,r])=>r-e);for(const[e,r]of o)if(s>=r&&n[e]!==void 0)return n[e];return t}export function useColumnDistribution(n,t,s=!1){return w(()=>{const o=Array.from({length:t},()=>[]);if(s)n.forEach((e,r)=>{const i=e.column!==void 0?Math.min(e.column,t-1):r%t;o[i].push(e)});else{const e=Array(t).fill(0);n.forEach(r=>{let i;r.column!==void 0?i=Math.min(r.column,t-1):i=e.indexOf(Math.min(...e)),o[i].push(r),e[i]++})}return o},[n,t,s])}export function useImageLoading(){const[n,t]=c({}),[s,o]=c(new Set),e=f((d,a)=>{t(u=>({...u,[d]:a})),a||o(u=>new Set(u).add(d))},[]),r=f(d=>n[d]??!0,[n]),i=f(d=>s.has(d),[s]);return{setLoading:e,isLoading:r,isLoaded:i}}

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

@@ -1,3 +1 @@
-export { Masonry, MasonryImageComponent as MasonryImage } from './Masonry';
-export * from './types';
-export { useResponsiveValue, useColumnDistribution, useImageLoading } from './hooks';
+"use strict";export{Masonry,MasonryImageComponent as MasonryImage}from"./Masonry";export*from"./types";export{useResponsiveValue,useColumnDistribution,useImageLoading}from"./hooks";

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

@@ -1 +1 @@
-export {};
+"use strict";export{};

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.js

@@ -1,116 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import s from '../../../tc.module.css';
-import { cn } from '../../../utils';
-export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
-    const [showModal, setShowModal] = useState(visible);
-    const [isAnimating, setIsAnimating] = useState(false);
-    useEffect(() => {
-        if (visible) {
-            setShowModal(true);
-            setTimeout(() => setIsAnimating(true), 10);
-        }
-        else {
-            setIsAnimating(false);
-            setTimeout(() => setShowModal(false), animationDuration);
-        }
-    }, [visible, animationDuration]);
-    useEffect(() => {
-        if (showModal && isAutoClose) {
-            const delay = typeof isAutoClose === 'number' ? isAutoClose : autoCloseDelay;
-            const timer = setTimeout(() => {
-                onClose && onClose();
-            }, delay);
-            return () => clearTimeout(timer);
-        }
-    }, [showModal, isAutoClose, autoCloseDelay, onClose]);
-    useEffect(() => {
-        if (!closeOnEscape || !showModal)
-            return;
-        const handleEscape = (e) => {
-            if (e.key === 'Escape') {
-                onClose && onClose();
-            }
-        };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-    }, [showModal, closeOnEscape, onClose]);
-    const handleOverlayClick = (e) => {
-        if (closeOnOverlayClick && e.target === e.currentTarget) {
-            onClose && onClose();
-        }
-    };
-    const handleClose = () => {
-        onClose && onClose();
-    };
-    const sizeMaxWidths = {
-        sm: '28rem',
-        md: '32rem',
-        lg: '42rem',
-        xl: '56rem',
-        full: '95%',
-    };
-    const positionClasses = {
-        center: s['items-center'],
-        top: s['items-start'],
-        bottom: s['items-end'],
-    };
-    const modalMaxWidth = maxWidth || (size !== 'full' ? sizeMaxWidths[size] : '95%');
-    if (!showModal)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: {
-                    opacity: isAnimating ? overlayOpacity : 0,
-                    transition: `opacity ${animationDuration}ms ease-in-out`,
-                    backgroundColor: overlayColor || undefined,
-                    ...styles.overlay,
-                }, onClick: handleOverlayClick }), _jsx("div", { className: cn(s['flex'], s['justify-center'], positionClasses[position], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], className, classNames.container), style: {
-                    ...style,
-                    transition: `opacity ${animationDuration}ms ease-in-out`,
-                    opacity: isAnimating ? 1 : 0,
-                    ...styles.container,
-                }, onClick: handleOverlayClick, children: _jsx("div", { className: cn(s['relative'], s['w-full'], s['my-5'], s['mx-auto'], classNames.wrapper), style: {
-                        maxWidth: modalMaxWidth,
-                        marginLeft: size === 'full' ? '1rem' : undefined,
-                        marginRight: size === 'full' ? '1rem' : undefined,
-                        transform: isAnimating
-                            ? position === 'center'
-                                ? 'scale(1)'
-                                : position === 'top'
-                                    ? 'translateY(0)'
-                                    : 'translateY(0)'
-                            : position === 'center'
-                                ? 'scale(0.95)'
-                                : position === 'top'
-                                    ? 'translateY(-20px)'
-                                    : 'translateY(20px)',
-                        transition: `transform ${animationDuration}ms ease-out, opacity ${animationDuration}ms ease-out`,
-                        opacity: isAnimating ? 1 : 0,
-                        ...styles.wrapper,
-                    }, onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(s['border-0'], s['shadow-xl'], s['relative'], s['flex'], s['flex-col'], s['bg-white'], s['outline-none'], s['focus:outline-none'], contentClassName, classNames.content), style: {
-                            borderRadius,
-                            ...contentStyle,
-                            ...styles.content,
-                        }, children: [showHeader && (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['border-b'], s['border-solid'], s['border-gray-200'], headerClassName, classNames.header), style: {
-                                    padding: headerPadding,
-                                    backgroundColor: headerBgColor,
-                                    borderTopLeftRadius: borderRadius,
-                                    borderTopRightRadius: borderRadius,
-                                    borderBottom: title || showCloseButton ? undefined : 'none',
-                                    ...styles.header,
-                                }, children: [title && (_jsx("h3", { className: cn(s['text-xl'], s['font-semibold'], s['m-0'], s['flex-1'], classNames.title), style: { color: headerTextColor, ...styles.title }, children: title })), showCloseButton && (_jsx("button", { type: "button", className: cn(s['p-1'], s['ml-4'], s['border-0'], s['bg-transparent'], s['cursor-pointer'], s['outline-none'], s['focus:outline-none'], s['transition-colors'], s['hover:bg-gray-100'], s['rounded'], classNames.closeButton), onClick: handleClose, "aria-label": "Close modal", style: {
-                                            marginLeft: title ? '1rem' : 0,
-                                            marginRight: title ? 0 : 'auto',
-                                            ...styles.closeButton,
-                                        }, children: closeButton || (_jsx("span", { className: cn(s['block'], s['text-2xl'], s['leading-none'], s['font-light']), style: {
-                                                color: headerTextColor || '#1f2937',
-                                                height: '1.5rem',
-                                                width: '1.5rem',
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                lineHeight: 1,
-                                            }, children: "\u00D7" })) }))] })), _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['h-auto'], s['overflow-y-auto'], classNames.body), style: {
-                                    padding: contentPadding,
-                                    ...styles.body,
-                                }, children: children })] }) }) })] }));
-};
+"use strict";import{jsx as a,jsxs as y,Fragment as Q}from"react/jsx-runtime";import{useEffect as x,useState as M}from"react";import e from"../../../tc.module.css";import{cn as r}from"../../../utils";export const Modal=({visible:h,title:d="",className:E="",contentClassName:Y="",headerClassName:$="",style:R={},contentStyle:W={},onClose:t,isAutoClose:s=!1,autoCloseDelay:b=1e3,size:f="md",position:c="center",showCloseButton:v=!0,closeButton:_,overlayOpacity:B=.5,overlayColor:F,closeOnOverlayClick:I=!0,closeOnEscape:w=!0,showHeader:N=!0,headerBgColor:S,headerTextColor:k,borderRadius:p="0.5rem",maxWidth:H,contentPadding:P="1rem",headerPadding:q="1rem",animationDuration:i=300,classNames:n={},styles:o={},children:z})=>{const[m,j]=M(h),[u,T]=M(!1);x(()=>{h?(j(!0),setTimeout(()=>T(!0),10)):(T(!1),setTimeout(()=>j(!1),i))},[h,i]),x(()=>{if(m&&s){const g=setTimeout(()=>{t&&t()},typeof s=="number"?s:b);return()=>clearTimeout(g)}},[m,s,b,t]),x(()=>{if(!w||!m)return;const l=g=>{g.key==="Escape"&&t&&t()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[m,w,t]);const L=l=>{I&&l.target===l.currentTarget&&t&&t()},G=()=>{t&&t()},J={sm:"28rem",md:"32rem",lg:"42rem",xl:"56rem",full:"95%"},K={center:e["items-center"],top:e["items-start"],bottom:e["items-end"]},O=H||(f!=="full"?J[f]:"95%");return m?y(Q,{children:[a("div",{className:r(e.fixed,e["inset-0"],e["z-40"],e["bg-black"],n.overlay),style:{opacity:u?B:0,transition:`opacity ${i}ms ease-in-out`,backgroundColor:F||void 0,...o.overlay},onClick:L}),a("div",{className:r(e.flex,e["justify-center"],K[c],e["overflow-x-hidden"],e["overflow-y-auto"],e.fixed,e["inset-0"],e["z-50"],e["outline-none"],e["focus:outline-none"],E,n.container),style:{...R,transition:`opacity ${i}ms ease-in-out`,opacity:u?1:0,...o.container},onClick:L,children:a("div",{className:r(e.relative,e["w-full"],e["my-5"],e["mx-auto"],n.wrapper),style:{maxWidth:O,marginLeft:f==="full"?"1rem":void 0,marginRight:f==="full"?"1rem":void 0,transform:u?c==="center"?"scale(1)":"translateY(0)":c==="center"?"scale(0.95)":c==="top"?"translateY(-20px)":"translateY(20px)",transition:`transform ${i}ms ease-out, opacity ${i}ms ease-out`,opacity:u?1:0,...o.wrapper},onClick:l=>l.stopPropagation(),children:y("div",{className:r(e["border-0"],e["shadow-xl"],e.relative,e.flex,e["flex-col"],e["bg-white"],e["outline-none"],e["focus:outline-none"],Y,n.content),style:{borderRadius:p,...W,...o.content},children:[N&&y("div",{className:r(e.flex,e["items-center"],e["justify-between"],e["border-b"],e["border-solid"],e["border-gray-200"],$,n.header),style:{padding:q,backgroundColor:S,borderTopLeftRadius:p,borderTopRightRadius:p,borderBottom:d||v?void 0:"none",...o.header},children:[d&&a("h3",{className:r(e["text-xl"],e["font-semibold"],e["m-0"],e["flex-1"],n.title),style:{color:k,...o.title},children:d}),v&&a("button",{type:"button",className:r(e["p-1"],e["ml-4"],e["border-0"],e["bg-transparent"],e["cursor-pointer"],e["outline-none"],e["focus:outline-none"],e["transition-colors"],e["hover:bg-gray-100"],e.rounded,n.closeButton),onClick:G,"aria-label":"Close modal",style:{marginLeft:d?"1rem":0,marginRight:d?0:"auto",...o.closeButton},children:_||a("span",{className:r(e.block,e["text-2xl"],e["leading-none"],e["font-light"]),style:{color:k||"#1f2937",height:"1.5rem",width:"1.5rem",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1},children:"\xD7"})})]}),a("div",{className:r(e.flex,e["flex-col"],e["w-full"],e["h-auto"],e["overflow-y-auto"],n.body),style:{padding:P,...o.body},children:z})]})})})]}):null};

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

@@ -1,2 +1 @@
-export * from './BasicModal/modal.component';
-export * from './modal-confirm/modal-confirm.component';
+"use strict";export*from"./BasicModal/modal.component";export*from"./modal-confirm/modal-confirm.component";

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.js

@@ -1,147 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useCallback } from 'react';
-import { Container } from 'reactstrap';
-import s from '../../../tc.module.css';
-import { cn } from '../../../utils';
-export const ModalConfirm = ({ visible = false, title = 'Confirm', message, submitTitle = 'Send', closeTitle = 'Close', isClick = true, isClose = true, animationDuration = 200, classNames = {}, styles = {}, onClick, onClose, }) => {
-    const [showModal, setShowModal] = useState(false);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [isClosing, setIsClosing] = useState(false);
-    useEffect(() => {
-        if (visible) {
-            setShowModal(true);
-            // Trigger animation after mount
-            requestAnimationFrame(() => {
-                setIsAnimating(true);
-            });
-        }
-        else if (showModal) {
-            handleCloseAnimation();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
-    const handleCloseAnimation = useCallback(() => {
-        setIsClosing(true);
-        setIsAnimating(false);
-        setTimeout(() => {
-            setShowModal(false);
-            setIsClosing(false);
-        }, animationDuration);
-    }, [animationDuration]);
-    const handleClose = useCallback(() => {
-        handleCloseAnimation();
-        setTimeout(() => {
-            onClose && onClose();
-        }, animationDuration);
-    }, [handleCloseAnimation, onClose, animationDuration]);
-    const handleSubmit = useCallback(() => {
-        handleCloseAnimation();
-        setTimeout(() => {
-            onClick && onClick();
-        }, animationDuration);
-    }, [handleCloseAnimation, onClick, animationDuration]);
-    // Animation styles
-    const overlayAnimationStyle = {
-        opacity: isAnimating ? 1 : 0,
-        transition: `opacity ${animationDuration}ms ease-out`,
-        backdropFilter: isAnimating ? 'blur(4px)' : 'blur(0px)',
-        WebkitBackdropFilter: isAnimating ? 'blur(4px)' : 'blur(0px)',
-    };
-    const contentAnimationStyle = {
-        opacity: isAnimating ? 1 : 0,
-        transform: isAnimating
-            ? 'scale(1) translateY(0)'
-            : 'scale(0.95) translateY(-10px)',
-        transition: `opacity ${animationDuration}ms ease-out, transform ${animationDuration}ms ease-out`,
-    };
-    return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: {
-                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                            ...overlayAnimationStyle,
-                            ...styles.overlay,
-                        }, onClick: handleClose }), _jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], s['p-4'], classNames.container), style: styles.container, children: _jsx("div", { className: cn(s['relative'], s['w-full'], classNames.wrapper), style: {
-                                maxWidth: '28rem',
-                                ...contentAnimationStyle,
-                                ...styles.wrapper,
-                            }, children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-full'], s['bg-white'], s['outline-none'], s['focus:outline-none'], classNames.content), style: {
-                                    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-                                    borderRadius: '16px',
-                                    ...styles.content,
-                                }, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-4'], s['border-b'], s['border-solid'], s['border-gray-300'], classNames.header), style: {
-                                            borderTopLeftRadius: '16px',
-                                            borderTopRightRadius: '16px',
-                                            background: 'linear-gradient(to right, #f8fafc, #f1f5f9)',
-                                            ...styles.header,
-                                        }, children: [_jsx("h3", { className: cn(s['text-xl'], s['font-semibold'], classNames.title), style: {
-                                                    color: '#1e293b',
-                                                    margin: 0,
-                                                    ...styles.title,
-                                                }, children: title }), _jsx("button", { className: cn(s['flex'], s['items-center'], s['justify-center'], s['border-0'], s['outline-none'], s['focus:outline-none'], classNames.closeButton), style: {
-                                                    width: '32px',
-                                                    height: '32px',
-                                                    borderRadius: '8px',
-                                                    backgroundColor: 'transparent',
-                                                    color: '#64748b',
-                                                    fontSize: '24px',
-                                                    lineHeight: 1,
-                                                    cursor: 'pointer',
-                                                    transition: 'all 0.15s ease',
-                                                    ...styles.closeButton,
-                                                }, onMouseEnter: (e) => {
-                                                    e.currentTarget.style.backgroundColor = '#fee2e2';
-                                                    e.currentTarget.style.color = '#dc2626';
-                                                }, onMouseLeave: (e) => {
-                                                    e.currentTarget.style.backgroundColor = 'transparent';
-                                                    e.currentTarget.style.color = '#64748b';
-                                                }, onClick: handleClose, "aria-label": "Close modal", children: _jsx("span", { style: { marginTop: '-2px' }, children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-4'], classNames.body), style: {
-                                            padding: '24px',
-                                            ...styles.body,
-                                        }, children: _jsx("div", { className: cn(s['flex'], s['w-full']), children: typeof message === 'string' ? (_jsx("span", { style: {
-                                                    color: '#475569',
-                                                    fontSize: '15px',
-                                                    lineHeight: 1.6,
-                                                }, children: message })) : (message) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-4'], s['border-t'], s['border-solid'], s['border-gray-300'], classNames.footer), style: {
-                                            borderBottomLeftRadius: '16px',
-                                            borderBottomRightRadius: '16px',
-                                            backgroundColor: '#f8fafc',
-                                            gap: '12px',
-                                            flexWrap: 'wrap',
-                                            ...styles.footer,
-                                        }, children: [isClose && (_jsx("button", { className: cn(classNames.cancelButton), type: "button", style: {
-                                                    backgroundColor: '#e2e8f0',
-                                                    color: '#475569',
-                                                    fontWeight: 600,
-                                                    fontSize: '14px',
-                                                    padding: '10px 20px',
-                                                    borderRadius: '8px',
-                                                    border: 'none',
-                                                    cursor: 'pointer',
-                                                    transition: 'all 0.15s ease',
-                                                    minWidth: '100px',
-                                                    ...styles.cancelButton,
-                                                }, onMouseEnter: (e) => {
-                                                    e.currentTarget.style.backgroundColor = '#cbd5e1';
-                                                }, onMouseLeave: (e) => {
-                                                    e.currentTarget.style.backgroundColor = '#e2e8f0';
-                                                }, onClick: handleClose, children: closeTitle })), isClick && (_jsx("button", { className: cn(classNames.submitButton), type: "button", style: {
-                                                    background: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
-                                                    color: 'white',
-                                                    fontWeight: 600,
-                                                    fontSize: '14px',
-                                                    padding: '10px 20px',
-                                                    borderRadius: '8px',
-                                                    border: 'none',
-                                                    cursor: 'pointer',
-                                                    transition: 'all 0.15s ease',
-                                                    boxShadow: '0 4px 12px rgba(34, 197, 94, 0.3)',
-                                                    minWidth: '100px',
-                                                    ...styles.submitButton,
-                                                }, onMouseEnter: (e) => {
-                                                    e.currentTarget.style.transform = 'translateY(-1px)';
-                                                    e.currentTarget.style.boxShadow =
-                                                        '0 6px 16px rgba(34, 197, 94, 0.4)';
-                                                }, onMouseLeave: (e) => {
-                                                    e.currentTarget.style.transform = 'translateY(0)';
-                                                    e.currentTarget.style.boxShadow =
-                                                        '0 4px 12px rgba(34, 197, 94, 0.3)';
-                                                }, onClick: handleSubmit, children: submitTitle }))] })] }) }) })] })) }) }));
-};
+"use strict";import{jsx as t,jsxs as d,Fragment as C}from"react/jsx-runtime";import{useEffect as W,useState as b,useCallback as x}from"react";import{Container as z}from"reactstrap";import e from"../../../tc.module.css";import{cn as o}from"../../../utils";export const ModalConfirm=({visible:g=!1,title:k="Confirm",message:c,submitTitle:v="Send",closeTitle:T="Close",isClick:S=!0,isClose:R=!0,animationDuration:a=200,classNames:n={},styles:l={},onClick:u,onClose:p})=>{const[h,m]=b(!1),[i,y]=b(!1),[A,w]=b(!1);W(()=>{g?(m(!0),requestAnimationFrame(()=>{y(!0)})):h&&s()},[g]);const s=x(()=>{w(!0),y(!1),setTimeout(()=>{m(!1),w(!1)},a)},[a]),f=x(()=>{s(),setTimeout(()=>{p&&p()},a)},[s,p,a]),B=x(()=>{s(),setTimeout(()=>{u&&u()},a)},[s,u,a]),M={opacity:i?1:0,transition:`opacity ${a}ms ease-out`,backdropFilter:i?"blur(4px)":"blur(0px)",WebkitBackdropFilter:i?"blur(4px)":"blur(0px)"},j={opacity:i?1:0,transform:i?"scale(1) translateY(0)":"scale(0.95) translateY(-10px)",transition:`opacity ${a}ms ease-out, transform ${a}ms ease-out`};return t(C,{children:t(z,{children:h&&d(C,{children:[t("div",{className:o(e.fixed,e["inset-0"],e["z-40"],e["bg-black"],n.overlay),style:{backgroundColor:"rgba(0, 0, 0, 0.5)",...M,...l.overlay},onClick:f}),t("div",{className:o(e.flex,e["justify-center"],e["items-center"],e["overflow-x-hidden"],e["overflow-y-auto"],e.fixed,e["inset-0"],e["z-50"],e["outline-none"],e["focus:outline-none"],e["p-4"],n.container),style:l.container,children:t("div",{className:o(e.relative,e["w-full"],n.wrapper),style:{maxWidth:"28rem",...j,...l.wrapper},children:d("div",{className:o(e["border-0"],e["rounded-lg"],e["shadow-lg"],e.relative,e.flex,e["flex-col"],e["w-full"],e["bg-white"],e["outline-none"],e["focus:outline-none"],n.content),style:{boxShadow:"0 25px 50px -12px rgba(0, 0, 0, 0.25)",borderRadius:"16px",...l.content},children:[d("div",{className:o(e.flex,e["items-center"],e["justify-between"],e["p-4"],e["border-b"],e["border-solid"],e["border-gray-300"],n.header),style:{borderTopLeftRadius:"16px",borderTopRightRadius:"16px",background:"linear-gradient(to right, #f8fafc, #f1f5f9)",...l.header},children:[t("h3",{className:o(e["text-xl"],e["font-semibold"],n.title),style:{color:"#1e293b",margin:0,...l.title},children:k}),t("button",{className:o(e.flex,e["items-center"],e["justify-center"],e["border-0"],e["outline-none"],e["focus:outline-none"],n.closeButton),style:{width:"32px",height:"32px",borderRadius:"8px",backgroundColor:"transparent",color:"#64748b",fontSize:"24px",lineHeight:1,cursor:"pointer",transition:"all 0.15s ease",...l.closeButton},onMouseEnter:r=>{r.currentTarget.style.backgroundColor="#fee2e2",r.currentTarget.style.color="#dc2626"},onMouseLeave:r=>{r.currentTarget.style.backgroundColor="transparent",r.currentTarget.style.color="#64748b"},onClick:f,"aria-label":"Close modal",children:t("span",{style:{marginTop:"-2px"},children:"\xD7"})})]}),t("div",{className:o(e.flex,e["p-4"],n.body),style:{padding:"24px",...l.body},children:t("div",{className:o(e.flex,e["w-full"]),children:typeof c=="string"?t("span",{style:{color:"#475569",fontSize:"15px",lineHeight:1.6},children:c}):c})}),d("div",{className:o(e.flex,e["items-center"],e["justify-end"],e["p-4"],e["border-t"],e["border-solid"],e["border-gray-300"],n.footer),style:{borderBottomLeftRadius:"16px",borderBottomRightRadius:"16px",backgroundColor:"#f8fafc",gap:"12px",flexWrap:"wrap",...l.footer},children:[R&&t("button",{className:o(n.cancelButton),type:"button",style:{backgroundColor:"#e2e8f0",color:"#475569",fontWeight:600,fontSize:"14px",padding:"10px 20px",borderRadius:"8px",border:"none",cursor:"pointer",transition:"all 0.15s ease",minWidth:"100px",...l.cancelButton},onMouseEnter:r=>{r.currentTarget.style.backgroundColor="#cbd5e1"},onMouseLeave:r=>{r.currentTarget.style.backgroundColor="#e2e8f0"},onClick:f,children:T}),S&&t("button",{className:o(n.submitButton),type:"button",style:{background:"linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",color:"white",fontWeight:600,fontSize:"14px",padding:"10px 20px",borderRadius:"8px",border:"none",cursor:"pointer",transition:"all 0.15s ease",boxShadow:"0 4px 12px rgba(34, 197, 94, 0.3)",minWidth:"100px",...l.submitButton},onMouseEnter:r=>{r.currentTarget.style.transform="translateY(-1px)",r.currentTarget.style.boxShadow="0 6px 16px rgba(34, 197, 94, 0.4)"},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(0)",r.currentTarget.style.boxShadow="0 4px 12px rgba(34, 197, 94, 0.3)"},onClick:B,children:v})]})]})})})]})})})};

package/lib/src/core-components/src/components/Picker/color-picker/color-picker.component.js

@@ -1,12 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
-import { HexColorPicker } from 'react-colorful';
-import { useClickOutside } from '../../../hooks';
-import './color-picker.css';
-export const ColorPicker = ({ color, onChange, classNames = {}, styles = {} }) => {
-    const popover = useRef();
-    const [isOpen, toggle] = useState(false);
-    const close = useCallback(() => toggle(false), []);
-    useClickOutside(popover, close);
-    return (_jsxs("div", { className: `picker ${classNames.container || ''}`, style: styles.container, children: [_jsx("div", { className: `swatch ${classNames.swatch || ''}`, style: { backgroundColor: color, ...styles.swatch }, onClick: () => toggle(true) }), isOpen && (_jsx("div", { className: `popover ${classNames.popover || ''}`, style: styles.popover, ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }))] }));
-};
+"use strict";import{jsx as r,jsxs as p}from"react/jsx-runtime";import{useCallback as l,useRef as m,useState as f}from"react";import{HexColorPicker as u}from"react-colorful";import{useClickOutside as d}from"../../../hooks";import"./color-picker.css";export const ColorPicker=({color:s,onChange:i,classNames:o={},styles:e={}})=>{const t=m(),[a,c]=f(!1),n=l(()=>c(!1),[]);return d(t,n),p("div",{className:`picker ${o.container||""}`,style:e.container,children:[r("div",{className:`swatch ${o.swatch||""}`,style:{backgroundColor:s,...e.swatch},onClick:()=>c(!0)}),a&&r("div",{className:`popover ${o.popover||""}`,style:e.popover,ref:t,children:r(u,{color:s,onChange:i})})]})};

package/lib/src/core-components/src/components/Picker/color-picker-modal/color-picker-modal.component.js

@@ -1,40 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useRef, useState, useEffect } from 'react';
-import { HexColorPicker } from 'react-colorful';
-import { useClickOutside } from '../../../hooks';
-import { TooltipProvider, Tooltip } from '../../Tooltip';
-import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, STANDARD_COLORS, } from '../../../helpers/constants';
-import './color-picker-modal.css';
-export const ColorPickerModal = ({ color, isVisible = false, testId = 'color-picker', tooltip = '', tooltipSide = 'bottom', onChange, onNoFill, onClose, }) => {
-    const popover = useRef();
-    const [currentColor, setCurrentColor] = useState(color);
-    const [isOpen, toggle] = useState(isVisible);
-    const close = useCallback(() => {
-        if (isOpen) {
-            toggle(false);
-            onClose && onClose(currentColor);
-        }
-    }, [isOpen, onClose, currentColor]);
-    useClickOutside(popover, close);
-    useEffect(() => {
-        if (!isOpen) {
-            setCurrentColor(color || DEFAULT_BG_COLOR);
-        }
-    }, [color, isOpen]);
-    const handleColorChange = useCallback((color) => {
-        setCurrentColor(color);
-        onChange(color);
-    }, [onChange]);
-    const handleStandardColorClick = useCallback((color) => {
-        setCurrentColor(color);
-        onChange(color);
-        close();
-    }, [onChange, close]);
-    const handleNoFillClick = useCallback(() => {
-        onNoFill && onNoFill(DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR);
-        setCurrentColor(DEFAULT_BG_COLOR);
-        onChange(DEFAULT_BG_COLOR);
-        close();
-    }, [onNoFill, onChange, close]);
-    return (_jsxs("div", { className: "picker-modal", "data-testid": testId, children: [_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: tooltip, className: 'text-white bg-black p-2', side: tooltipSide, children: _jsx("div", { "data-testid": "swatch", className: `${currentColor !== '' ? 'swatch-modal' : 'swatch-modal diagonal-line'} z-10`, style: { backgroundColor: currentColor }, onClick: () => toggle(true) }) }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ", children: _jsx("div", { className: "relative w-auto h-auto mx-auto my-auto bg-white rounded-md", children: _jsx("div", { className: "border-0 rounded-lg  relative flex flex-col w-full outline-none focus:outline-none", children: _jsxs("div", { className: "flex flex-col  w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal", ref: popover, children: [_jsx(HexColorPicker, { "data-testid": "colorPicker", color: currentColor, onChange: handleColorChange }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("span", { className: "font-serif", children: "Standard Colors" }), _jsx("div", { className: "flex gap-2 mt-2", children: STANDARD_COLORS?.map((color) => (_jsx("div", { className: "rounded-full w-8 h-8 cursor-pointer gap-2", style: { backgroundColor: color }, onClick: () => handleStandardColorClick(color), "data-testid": `standard-color-${color}` }, color))) })] }), _jsx("div", { className: "flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer", onClick: handleNoFillClick, "data-testid": "no-fill", children: _jsx("span", { className: "font-serif", children: "No Fill" }) })] }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }))] }));
-};
+"use strict";import{jsx as e,jsxs as s,Fragment as w}from"react/jsx-runtime";import{useCallback as d,useRef as y,useState as h,useEffect as O}from"react";import{HexColorPicker as _}from"react-colorful";import{useClickOutside as j}from"../../../hooks";import{TooltipProvider as T,Tooltip as L}from"../../Tooltip";import{DEFAULT_BG_COLOR as c,DEFAULT_TEXT_COLOR as R,STANDARD_COLORS as S}from"../../../helpers/constants";import"./color-picker-modal.css";export const ColorPickerModal=({color:n,isVisible:x=!1,testId:v="color-picker",tooltip:k="",tooltipSide:g="bottom",onChange:l,onNoFill:m,onClose:f})=>{const u=y(),[o,r]=h(n),[a,p]=h(x),i=d(()=>{a&&(p(!1),f&&f(o))},[a,f,o]);j(u,i),O(()=>{a||r(n||c)},[n,a]);const C=d(t=>{r(t),l(t)},[l]),N=d(t=>{r(t),l(t),i()},[l,i]),b=d(()=>{m&&m(c,R),r(c),l(c),i()},[m,l,i]);return s("div",{className:"picker-modal","data-testid":v,children:[e(T,{children:e(L,{content:k,className:"text-white bg-black p-2",side:g,children:e("div",{"data-testid":"swatch",className:`${o!==""?"swatch-modal":"swatch-modal diagonal-line"} z-10`,style:{backgroundColor:o},onClick:()=>p(!0)})})}),a&&s(w,{children:[e("div",{className:"flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ",children:e("div",{className:"relative w-auto h-auto mx-auto my-auto bg-white rounded-md",children:e("div",{className:"border-0 rounded-lg  relative flex flex-col w-full outline-none focus:outline-none",children:s("div",{className:"flex flex-col  w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal",ref:u,children:[e(_,{"data-testid":"colorPicker",color:o,onChange:C}),s("div",{className:"flex flex-col mt-4",children:[e("span",{className:"font-serif",children:"Standard Colors"}),e("div",{className:"flex gap-2 mt-2",children:S?.map(t=>e("div",{className:"rounded-full w-8 h-8 cursor-pointer gap-2",style:{backgroundColor:t},onClick:()=>N(t),"data-testid":`standard-color-${t}`},t))})]}),e("div",{className:"flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer",onClick:b,"data-testid":"no-fill",children:e("span",{className:"font-serif",children:"No Fill"})})]})})})}),e("div",{className:"opacity-25 fixed inset-0 z-40 bg-black"})]})]})};

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

@@ -1,2 +1 @@
-export * from './color-picker/color-picker.component';
-export * from './color-picker-modal/color-picker-modal.component';
+"use strict";export*from"./color-picker/color-picker.component";export*from"./color-picker-modal/color-picker-modal.component";

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

@@ -1,4 +1 @@
-export * from './multi-select/multi-select.component';
-export * from './multi-select-with-field/multi-select-with-field.component';
-export * from './multi-selection-dropdown/multi-selection-dropdown.component';
-export * from './single-select/single-select.component';
+"use strict";export*from"./multi-select/multi-select.component";export*from"./multi-select-with-field/multi-select-with-field.component";export*from"./multi-selection-dropdown/multi-selection-dropdown.component";export*from"./single-select/single-select.component";