react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,14 +1,8 @@
-import { styled, css } from 'styled-components';
-import { breakpoints, getFontSize } from '../../utils/abstracts';
-import { tokens } from '../../utils/designTokens';
-// Simple Text component for internal use (basic span)
-export const Text = styled.span `
+"use strict";import{styled as a,css as n}from"styled-components";import{breakpoints as o,getFontSize as s}from"../../utils/abstracts";import{tokens as e}from"../../utils/designTokens";export const Text=a.span`
   font-size: inherit;
   color: inherit;
   line-height: inherit;
-`;
-// CurrentPage component for the active/last breadcrumb item
-export const CurrentPage = styled.span `
+`,CurrentPage=a.span`
   font-size: inherit;
   line-height: inherit;
   font-weight: 600;
@@ -17,39 +11,16 @@ export const CurrentPage = styled.span `
   align-items: center;
 
   /* Enhanced styling for pills variant */
-  ${({ $variant }) => $variant === 'pills' &&
-    css `
+  ${({$variant:i})=>i==="pills"&&n`
       font-weight: 700;
       letter-spacing: 0.02em;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     `}
-`;
-// Size configurations
-const sizeStyles = {
-    small: {
-        fontSize: getFontSize(0),
-        padding: `${tokens.spacing050} ${tokens.spacing100}`,
-        gap: tokens.spacing050,
-        iconSize: '12px',
-    },
-    medium: {
-        fontSize: getFontSize(1),
-        padding: `${tokens.spacing075} ${tokens.spacing150}`,
-        gap: tokens.spacing075,
-        iconSize: '14px',
-    },
-    large: {
-        fontSize: getFontSize(2),
-        padding: `${tokens.spacing100} ${tokens.spacing200}`,
-        gap: tokens.spacing100,
-        iconSize: '16px',
-    },
-};
-export const Container = styled.nav `
+`;const r={small:{fontSize:s(0),padding:`${e.spacing050} ${e.spacing100}`,gap:e.spacing050,iconSize:"12px"},medium:{fontSize:s(1),padding:`${e.spacing075} ${e.spacing150}`,gap:e.spacing075,iconSize:"14px"},large:{fontSize:s(2),padding:`${e.spacing100} ${e.spacing200}`,gap:e.spacing100,iconSize:"16px"}};export const Container=a.nav`
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: ${({ $size }) => sizeStyles[$size].gap};
+  gap: ${({$size:i})=>r[i].gap};
   width: 100%;
   overflow-x: auto;
   -ms-overflow-style: none;
@@ -60,64 +31,56 @@ export const Container = styled.nav `
   }
 
   /* Variant: contained */
-  ${({ $variant }) => $variant === 'contained' &&
-    css `
+  ${({$variant:i})=>i==="contained"&&n`
       background: linear-gradient(
         135deg,
-        ${tokens.surface || '#f8f9fa'} 0%,
+        ${e.surface||"#f8f9fa"} 0%,
         #f1f3f5 100%
       );
-      border: 1px solid ${tokens.outline || '#e9ecef'};
-      border-radius: ${tokens.borderRadius100 || '8px'};
-      padding: ${tokens.spacing100} ${tokens.spacing200};
+      border: 1px solid ${e.outline||"#e9ecef"};
+      border-radius: ${e.borderRadius100||"8px"};
+      padding: ${e.spacing100} ${e.spacing200};
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     `}
 
   /* Variant: pills */
-  ${({ $variant }) => $variant === 'pills' &&
-    css `
+  ${({$variant:i})=>i==="pills"&&n`
       background: transparent;
-      gap: ${tokens.spacing050};
+      gap: ${e.spacing050};
     `}
 
   /* Responsive: allow wrapping on larger screens */
-  ${breakpoints.md} {
+  ${o.md} {
     flex-wrap: wrap;
   }
 
   /* Smooth scroll behavior */
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
-`;
-export const BreadcrumbList = styled.ol `
+`,BreadcrumbList=a.ol`
   all: unset;
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: ${({ $size }) => sizeStyles[$size].gap};
+  gap: ${({$size:i})=>r[i].gap};
   list-style: none;
   margin: 0;
   padding: 0;
 
-  ${breakpoints.md} {
+  ${o.md} {
     flex-wrap: wrap;
   }
-`;
-export const Item = styled.li `
+`,Item=a.li`
   display: flex;
   align-items: center;
-  gap: ${({ $size }) => sizeStyles[$size].gap};
+  gap: ${({$size:i})=>r[i].gap};
   position: relative;
   transition: all 0.2s ease;
 
   /* Base text styles */
-  color: ${({ $isActive }) => $isActive
-    ? tokens.onSurface || '#1a1a2e'
-    : tokens.onSurface
-        ? `${tokens.onSurface}99`
-        : '#6c757d'};
-  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
-  font-weight: ${({ $isActive }) => ($isActive ? 600 : 400)};
+  color: ${({$isActive:i})=>i?e.onSurface||"#1a1a2e":e.onSurface?`${e.onSurface}99`:"#6c757d"};
+  font-size: ${({$size:i})=>r[i].fontSize};
+  font-weight: ${({$isActive:i})=>i?600:400};
   line-height: 1.5;
   white-space: nowrap;
 
@@ -125,46 +88,33 @@ export const Item = styled.li `
   [data-aui='link'],
   [data-aui='action.inline'],
   a {
-    color: ${tokens.primary || '#454cbf'};
+    color: ${e.primary||"#454cbf"};
     text-decoration: none;
     transition: all 0.2s ease;
-    padding: ${({ $size }) => $size === 'small'
-    ? `${tokens.spacing025} ${tokens.spacing050}`
-    : $size === 'large'
-        ? `${tokens.spacing075} ${tokens.spacing100}`
-        : `${tokens.spacing050} ${tokens.spacing075}`};
-    border-radius: ${tokens.borderRadius050 || '4px'};
+    padding: ${({$size:i})=>i==="small"?`${e.spacing025} ${e.spacing050}`:i==="large"?`${e.spacing075} ${e.spacing100}`:`${e.spacing050} ${e.spacing075}`};
+    border-radius: ${e.borderRadius050||"4px"};
 
     &:hover {
-      color: ${tokens.primary || '#454cbf'};
-      background: ${tokens.primary
-    ? `${tokens.primary}10`
-    : 'rgba(69, 76, 191, 0.08)'};
+      color: ${e.primary||"#454cbf"};
+      background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
       text-decoration: underline;
     }
 
     &:focus-visible {
-      outline: 2px solid ${tokens.primary || '#454cbf'};
+      outline: 2px solid ${e.primary||"#454cbf"};
       outline-offset: 2px;
     }
   }
 
   /* Pills variant styling */
-  ${({ $variant, $isActive, $size }) => $variant === 'pills' &&
-    css `
-      background: ${$isActive
-        ? `linear-gradient(135deg, ${tokens.primary || '#454cbf'} 0%, ${tokens.primary ? tokens.primary + 'dd' : '#5a61c9'} 100%)`
-        : tokens.surface || '#f8f9fa'};
-      color: ${$isActive
-        ? tokens.white || '#ffffff'
-        : tokens.onSurface || '#1a1a2e'};
-      padding: ${sizeStyles[$size].padding};
-      border-radius: ${tokens.borderRadius200 || '16px'};
+  ${({$variant:i,$isActive:t,$size:p})=>i==="pills"&&n`
+      background: ${t?`linear-gradient(135deg, ${e.primary||"#454cbf"} 0%, ${e.primary?e.primary+"dd":"#5a61c9"} 100%)`:e.surface||"#f8f9fa"};
+      color: ${t?e.white||"#ffffff":e.onSurface||"#1a1a2e"};
+      padding: ${r[p].padding};
+      border-radius: ${e.borderRadius200||"16px"};
       border: 1px solid
-        ${$isActive ? 'transparent' : tokens.outline || '#e9ecef'};
-      box-shadow: ${$isActive
-        ? '0 2px 8px rgba(69, 76, 191, 0.3)'
-        : '0 1px 2px rgba(0, 0, 0, 0.05)'};
+        ${t?"transparent":e.outline||"#e9ecef"};
+      box-shadow: ${t?"0 2px 8px rgba(69, 76, 191, 0.3)":"0 1px 2px rgba(0, 0, 0, 0.05)"};
       transition: all 0.25s ease;
 
       &:hover:not(:last-child) {
@@ -187,89 +137,79 @@ export const Item = styled.li `
     `}
 
   /* Collapsed item (ellipsis) */
-  ${({ $isCollapsed }) => $isCollapsed &&
-    css `
+  ${({$isCollapsed:i})=>i&&n`
       cursor: pointer;
-      padding: ${tokens.spacing050} ${tokens.spacing075};
-      border-radius: ${tokens.borderRadius050 || '4px'};
-      background: ${tokens.surface || '#f8f9fa'};
-      border: 1px solid ${tokens.outline || '#e9ecef'};
+      padding: ${e.spacing050} ${e.spacing075};
+      border-radius: ${e.borderRadius050||"4px"};
+      background: ${e.surface||"#f8f9fa"};
+      border: 1px solid ${e.outline||"#e9ecef"};
 
       &:hover {
-        background: ${tokens.primary
-        ? `${tokens.primary}10`
-        : 'rgba(69, 76, 191, 0.08)'};
-        border-color: ${tokens.primary || '#454cbf'};
+        background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
+        border-color: ${e.primary||"#454cbf"};
       }
     `}
 
   /* Hide on mobile for collapsed items */
-  ${({ $isCollapsed }) => $isCollapsed &&
-    css `
-      ${breakpoints.xs} {
+  ${({$isCollapsed:i})=>i&&n`
+      ${o.xs} {
         display: none;
       }
     `}
-`;
-export const Separator = styled.span `
+`,Separator=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${tokens.onSurface ? `${tokens.onSurface}66` : '#adb5bd'};
+  color: ${e.onSurface?`${e.onSurface}66`:"#adb5bd"};
   flex-shrink: 0;
   transition: color 0.2s ease;
 
   /* Icon styling */
   [data-aui='icon'] {
     color: inherit;
-    width: ${({ $size }) => sizeStyles[$size].iconSize};
-    height: ${({ $size }) => sizeStyles[$size].iconSize};
+    width: ${({$size:i})=>r[i].iconSize};
+    height: ${({$size:i})=>r[i].iconSize};
   }
 
   /* Hide separator on last item via CSS */
   ${Item}:last-child & {
     display: none;
   }
-`;
-export const SeparatorText = styled.span `
-  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+`,SeparatorText=a.span`
+  font-size: ${({$size:i})=>r[i].fontSize};
   color: inherit;
   user-select: none;
-`;
-export const OverflowDots = styled.span `
+`,OverflowDots=a.span`
   display: none;
-  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
+  color: ${e.onSurface?`${e.onSurface}80`:"#6c757d"};
   font-weight: 500;
   letter-spacing: 2px;
-  padding: ${tokens.spacing050} ${tokens.spacing075};
-  border-radius: ${tokens.borderRadius050 || '4px'};
-  background: ${tokens.surface || '#f8f9fa'};
-  border: 1px solid ${tokens.outline || '#e9ecef'};
+  padding: ${e.spacing050} ${e.spacing075};
+  border-radius: ${e.borderRadius050||"4px"};
+  background: ${e.surface||"#f8f9fa"};
+  border: 1px solid ${e.outline||"#e9ecef"};
   cursor: pointer;
   transition: all 0.2s ease;
-  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  font-size: ${({$size:i})=>r[i].fontSize};
 
   &:hover {
-    background: ${tokens.primary
-    ? `${tokens.primary}10`
-    : 'rgba(69, 76, 191, 0.08)'};
-    border-color: ${tokens.primary || '#454cbf'};
-    color: ${tokens.primary || '#454cbf'};
+    background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
+    border-color: ${e.primary||"#454cbf"};
+    color: ${e.primary||"#454cbf"};
   }
 
-  ${breakpoints.md} {
+  ${o.md} {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-`;
-export const HomeIcon = styled.span `
+`,HomeIcon=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({ $size }) => sizeStyles[$size].iconSize};
-  height: ${({ $size }) => sizeStyles[$size].iconSize};
-  color: ${tokens.primary || '#454cbf'};
+  width: ${({$size:i})=>r[i].iconSize};
+  height: ${({$size:i})=>r[i].iconSize};
+  color: ${e.primary||"#454cbf"};
   transition: all 0.2s ease;
 
   [data-aui='icon'] {
@@ -281,90 +221,78 @@ export const HomeIcon = styled.span `
   &:hover {
     transform: scale(1.1);
   }
-`;
-export const IconWrapper = styled.span `
+`,IconWrapper=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({ $size }) => $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
-  height: ${({ $size }) => $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
+  width: ${({$size:i})=>i==="small"?"16px":i==="large"?"24px":"20px"};
+  height: ${({$size:i})=>i==="small"?"16px":i==="large"?"24px":"20px"};
 
   [data-aui='icon'],
   svg {
     width: 100%;
     height: 100%;
   }
-`;
-export const MobileMenuButton = styled.button `
+`,MobileMenuButton=a.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${tokens.surface || '#f8f9fa'};
-  border: 1px solid ${tokens.outline || '#e9ecef'};
-  border-radius: ${tokens.borderRadius050 || '4px'};
-  padding: ${({ $size }) => $size === 'small'
-    ? tokens.spacing050
-    : $size === 'large'
-        ? tokens.spacing100
-        : tokens.spacing075};
+  background: ${e.surface||"#f8f9fa"};
+  border: 1px solid ${e.outline||"#e9ecef"};
+  border-radius: ${e.borderRadius050||"4px"};
+  padding: ${({$size:i})=>i==="small"?e.spacing050:i==="large"?e.spacing100:e.spacing075};
   cursor: pointer;
   transition: all 0.2s ease;
-  color: ${tokens.onSurface || '#1a1a2e'};
+  color: ${e.onSurface||"#1a1a2e"};
 
   &:hover {
-    background: ${tokens.primary
-    ? `${tokens.primary}10`
-    : 'rgba(69, 76, 191, 0.08)'};
-    border-color: ${tokens.primary || '#454cbf'};
+    background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
+    border-color: ${e.primary||"#454cbf"};
   }
 
   &:focus-visible {
-    outline: 2px solid ${tokens.primary || '#454cbf'};
+    outline: 2px solid ${e.primary||"#454cbf"};
     outline-offset: 2px;
   }
 
   /* Only show on mobile */
-  ${breakpoints.sm} {
+  ${o.sm} {
     display: none;
   }
-`;
-export const DropdownMenu = styled.div `
+`,DropdownMenu=a.div`
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 100;
   min-width: 200px;
-  background: ${tokens.surface || '#ffffff'};
-  border: 1px solid ${tokens.outline || '#e9ecef'};
-  border-radius: ${tokens.borderRadius100 || '8px'};
+  background: ${e.surface||"#ffffff"};
+  border: 1px solid ${e.outline||"#e9ecef"};
+  border-radius: ${e.borderRadius100||"8px"};
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  padding: ${tokens.spacing050};
-  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
-  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
-  transform: ${({ $isOpen }) => $isOpen ? 'translateY(4px)' : 'translateY(-8px)'};
+  padding: ${e.spacing050};
+  opacity: ${({$isOpen:i})=>i?1:0};
+  visibility: ${({$isOpen:i})=>i?"visible":"hidden"};
+  transform: ${({$isOpen:i})=>i?"translateY(4px)":"translateY(-8px)"};
   transition: all 0.2s ease;
-`;
-export const DropdownItem = styled.a `
+`,DropdownItem=a.a`
   display: flex;
   align-items: center;
-  gap: ${tokens.spacing100};
-  padding: ${tokens.spacing100} ${tokens.spacing150};
-  color: ${tokens.onSurface || '#1a1a2e'};
+  gap: ${e.spacing100};
+  padding: ${e.spacing100} ${e.spacing150};
+  color: ${e.onSurface||"#1a1a2e"};
   text-decoration: none;
-  border-radius: ${tokens.borderRadius050 || '4px'};
+  border-radius: ${e.borderRadius050||"4px"};
   transition: all 0.15s ease;
-  font-size: ${getFontSize(1)};
+  font-size: ${s(1)};
 
   &:hover {
-    background: ${tokens.primary
-    ? `${tokens.primary}10`
-    : 'rgba(69, 76, 191, 0.08)'};
-    color: ${tokens.primary || '#454cbf'};
+    background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
+    color: ${e.primary||"#454cbf"};
   }
 
   &:focus-visible {
-    outline: 2px solid ${tokens.primary || '#454cbf'};
+    outline: 2px solid ${e.primary||"#454cbf"};
     outline-offset: -2px;
   }
 `;

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

@@ -1,3 +1 @@
-export * from './Breadcrumb';
-export * from './types';
-export { Text, CurrentPage } from './elements';
+"use strict";export*from"./Breadcrumb";export*from"./types";export{Text,CurrentPage}from"./elements";

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

@@ -1,3 +1 @@
-export const BREADCRUMB_VARIANTS = ['default', 'contained', 'pills'];
-export const BREADCRUMB_SIZES = ['small', 'medium', 'large'];
-export const BREADCRUMB_SEPARATOR_TYPES = ['chevron', 'slash', 'arrow', 'dot'];
+"use strict";export const BREADCRUMB_VARIANTS=["default","contained","pills"],BREADCRUMB_SIZES=["small","medium","large"],BREADCRUMB_SEPARATOR_TYPES=["chevron","slash","arrow","dot"];

package/lib/src/core-components/src/components/Button/button.component.js

@@ -1,18 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Tooltip } from '../Tooltip';
-import s from '../../tc.module.css';
-import { cn } from '../../utils';
-export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, classNames = {}, styles = {}, children, ...args }, ref) => {
-    const buttonColorClass = variant === 'solid'
-        ? cn(s['text-white'], s['bg-[#007BFF]'], s['hover:bg-[#007BFF]'], s['hover:shadow-lg'], s['text-white'])
-        : cn(s['dark:text-white'], s['text-black'], s['border'], s['border-gray-400'], s['hover:shadow-lg']);
-    const button = (_jsx("button", { ref: ref, ...args, className: cn(s['rounded-100px'], s['px-3'], s['py-1'], s['text-md'], s['pt-2'], s['pb-2'], s['font-nunitoSansRegular'], disabled ? s['opacity-50'] : s['opacity-100'], buttonColorClass, className, classNames.button), style: styles.button, type: type, disabled: disabled, children: children }));
-    if (tooltip) {
-        return _jsx(Tooltip, { content: tooltip, children: button });
-    }
-    else {
-        return button;
-    }
-});
-Button.displayName = 'Button';
+"use strict";import{jsx as s}from"react/jsx-runtime";import{forwardRef as f}from"react";import{Tooltip as h}from"../Tooltip";import t from"../../tc.module.css";import{cn as o}from"../../utils";export const Button=f(({variant:a="solid",tooltip:r,disabled:e=!1,type:i="button",className:l,classNames:p={},styles:d={},children:m,...u},b)=>{const c=a==="solid"?o(t["text-white"],t["bg-[#007BFF]"],t["hover:bg-[#007BFF]"],t["hover:shadow-lg"],t["text-white"]):o(t["dark:text-white"],t["text-black"],t.border,t["border-gray-400"],t["hover:shadow-lg"]),n=s("button",{ref:b,...u,className:o(t["rounded-100px"],t["px-3"],t["py-1"],t["text-md"],t["pt-2"],t["pb-2"],t["font-nunitoSansRegular"],e?t["opacity-50"]:t["opacity-100"],c,l,p.button),style:d.button,type:i,disabled:e,children:m});return r?s(h,{content:r,children:n}):n});Button.displayName="Button";

package/lib/src/core-components/src/components/Button/buttonGroup/buttonGroup.component.js

@@ -1,4 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import s from '../../../tc.module.css';
-import { cn } from '../../../utils';
-export const ButtonGroup = ({ children, orientation = 'horizontal', className, classNames = {}, styles = {}, }) => (_jsx("div", { className: cn(s.flex, orientation == 'horizontal' ? s['flex-row'] : s['flex-col'], s['w-fit'], s['gap-2'], className, classNames.container), style: styles.container, children: children }));
+"use strict";import{jsx as l}from"react/jsx-runtime";import o from"../../../tc.module.css";import{cn as a}from"../../../utils";export const ButtonGroup=({children:r,orientation:t="horizontal",className:i,classNames:n={},styles:e={}})=>l("div",{className:a(o.flex,t=="horizontal"?o["flex-row"]:o["flex-col"],o["w-fit"],o["gap-2"],i,n.container),style:e.container,children:r});

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

@@ -1,2 +1 @@
-export * from './button.component';
-export * from './buttonGroup/buttonGroup.component';
+"use strict";export*from"./button.component";export*from"./buttonGroup/buttonGroup.component";

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

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

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

@@ -1,64 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback } from 'react';
-import { ChipElement, ChipLabel, IconWrapper, AvatarWrapper, DeleteButton, ChipGroupElement, } from './elements';
-// Default icons
-const CheckIcon = () => (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("polyline", { points: "3 8 6 11 13 4" }) }));
-const CloseIcon = () => (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "4", y1: "4", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "4", x2: "4", y2: "12" })] }));
-export const Chip = forwardRef(function ChipComponent(props, ref) {
-    const { label, variant = 'soft', size = 'medium', color = 'default', chipType = 'button', selected = false, disabled = false, iconLeft, iconRight, deletable = false, onDelete, onClick, avatar, className, ...rest } = props;
-    const handleClick = useCallback((e) => {
-        if (disabled)
-            return;
-        onClick?.(e);
-    }, [disabled, onClick]);
-    const handleDelete = useCallback((e) => {
-        e.stopPropagation();
-        if (disabled)
-            return;
-        onDelete?.();
-    }, [disabled, onDelete]);
-    // Determine left icon based on chip type
-    const renderLeftIcon = () => {
-        if (avatar) {
-            return _jsx(AvatarWrapper, { "$size": size, children: avatar });
-        }
-        if (iconLeft) {
-            return (_jsx(IconWrapper, { "$size": size, "$side": "left", children: iconLeft }));
-        }
-        // Show checkmark for selection chips when selected
-        if (chipType === 'selection' && selected) {
-            return (_jsx(IconWrapper, { "$size": size, "$side": "left", children: _jsx(CheckIcon, {}) }));
-        }
-        return null;
-    };
-    // Determine right icon based on chip type
-    const renderRightIcon = () => {
-        // Filter chips show close icon when selected
-        if (chipType === 'filter' && selected) {
-            return (_jsx(DeleteButton, { "$size": size, onClick: handleDelete, role: "button", "aria-label": "Remove filter", children: _jsx(CloseIcon, {}) }));
-        }
-        // Deletable chips show close icon
-        if (deletable) {
-            return (_jsx(DeleteButton, { "$size": size, onClick: handleDelete, role: "button", "aria-label": "Delete", children: _jsx(CloseIcon, {}) }));
-        }
-        if (iconRight) {
-            return (_jsx(IconWrapper, { "$size": size, "$side": "right", children: iconRight }));
-        }
-        return null;
-    };
-    const getRole = () => {
-        if (chipType === 'selection')
-            return 'checkbox';
-        if (chipType === 'filter')
-            return 'checkbox';
-        return 'button';
-    };
-    return (_jsxs(ChipElement, { ref: ref, "$variant": variant, "$size": size, "$color": color, "$selected": selected, "$disabled": disabled, disabled: disabled, onClick: handleClick, role: getRole(), "aria-checked": chipType === 'selection' || chipType === 'filter' ? selected : undefined, "aria-pressed": chipType === 'button' ? selected : undefined, "data-aui": "chip", className: className, type: "button", ...rest, children: [renderLeftIcon(), _jsx(ChipLabel, { children: label }), renderRightIcon()] }));
-});
-Chip.displayName = 'Chip';
-export const ChipGroup = forwardRef(function ChipGroupComponent(props, ref) {
-    const { children, gap = '8px', wrap = true, scrollable = false, direction = 'row', className, ...rest } = props;
-    return (_jsx(ChipGroupElement, { ref: ref, "$gap": gap, "$wrap": wrap, "$scrollable": scrollable, "$direction": direction, "data-aui": "chip-group", className: className, role: "group", ...rest, children: children }));
-});
-ChipGroup.displayName = 'ChipGroup';
+"use strict";"use client";import{jsx as e,jsxs as $}from"react/jsx-runtime";import{forwardRef as x,useCallback as k}from"react";import{ChipElement as D,ChipLabel as G,IconWrapper as p,AvatarWrapper as W,DeleteButton as g,ChipGroupElement as B}from"./elements";const L=()=>e("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",children:e("polyline",{points:"3 8 6 11 13 4"})}),v=()=>$("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("line",{x1:"4",y1:"4",x2:"12",y2:"12"}),e("line",{x1:"12",y1:"4",x2:"4",y2:"12"})]});export const Chip=x(function(l,o){const{label:s,variant:c="soft",size:r="medium",color:a="default",chipType:t="button",selected:n=!1,disabled:i=!1,iconLeft:u,iconRight:f,deletable:z=!1,onDelete:h,onClick:C,avatar:b,className:w,...N}=l,R=k(d=>{i||C?.(d)},[i,C]),m=k(d=>{d.stopPropagation(),!i&&h?.()},[i,h]),I=()=>b?e(W,{$size:r,children:b}):u?e(p,{$size:r,$side:"left",children:u}):t==="selection"&&n?e(p,{$size:r,$side:"left",children:e(L,{})}):null,j=()=>t==="filter"&&n?e(g,{$size:r,onClick:m,role:"button","aria-label":"Remove filter",children:e(v,{})}):z?e(g,{$size:r,onClick:m,role:"button","aria-label":"Delete",children:e(v,{})}):f?e(p,{$size:r,$side:"right",children:f}):null;return $(D,{ref:o,$variant:c,$size:r,$color:a,$selected:n,$disabled:i,disabled:i,onClick:R,role:t==="selection"||t==="filter"?"checkbox":"button","aria-checked":t==="selection"||t==="filter"?n:void 0,"aria-pressed":t==="button"?n:void 0,"data-aui":"chip",className:w,type:"button",...N,children:[I(),e(G,{children:s}),j()]})});Chip.displayName="Chip";export const ChipGroup=x(function(l,o){const{children:s,gap:c="8px",wrap:r=!0,scrollable:a=!1,direction:t="row",className:n,...i}=l;return e(B,{ref:o,$gap:c,$wrap:r,$scrollable:a,$direction:t,"data-aui":"chip-group",className:n,role:"group",...i,children:s})});ChipGroup.displayName="ChipGroup";