react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,173 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from 'styled-components';
-import { Icon } from '../Icon/Icon';
-// Avatar size configuration
-const sizeMap = {
-    sm: '2rem',
-    md: '2.5rem',
-    lg: '3rem',
-    xl: '4rem',
-    xxl: '5rem', // 80px
-};
-// Styled components
-const AvatarContainer = styled.div `
-  width: ${({ $size }) => sizeMap[$size]};
-  height: ${({ $size }) => sizeMap[$size]};
+"use strict";import{jsx as a}from"react/jsx-runtime";import{styled as u}from"styled-components";import{Icon as b}from"../Icon/Icon";const h={sm:"2rem",md:"2.5rem",lg:"3rem",xl:"4rem",xxl:"5rem"},p=u.div`
+  width: ${({$size:e})=>h[e]};
+  height: ${({$size:e})=>h[e]};
   border-radius: 50%;
-  background-color: ${({ $backgroundColor }) => $backgroundColor};
-  color: ${({ $textColor }) => $textColor};
+  background-color: ${({$backgroundColor:e})=>e};
+  color: ${({$textColor:e})=>e};
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   position: relative;
   user-select: none;
-  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  cursor: ${({$clickable:e})=>e?"pointer":"default"};
   transition: all 0.2s ease-in-out;
 
   &:hover {
-    ${({ $clickable }) => $clickable &&
-    `
+    ${({$clickable:e})=>e&&`
       transform: scale(1.05);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     `}
   }
-`;
-const AvatarImage = styled.img `
+`,C=u.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
-`;
-const InitialsText = styled.span `
+`,A=u.span`
   font-weight: 600;
-  font-size: ${({ $size }) => {
-    switch ($size) {
-        case 'sm':
-            return '0.75rem'; // 12px
-        case 'md':
-            return '0.875rem'; // 14px
-        case 'lg':
-            return '1rem'; // 16px
-        case 'xl':
-            return '1.25rem'; // 20px
-        case 'xxl':
-            return '1.5rem'; // 24px
-        default:
-            return '0.875rem';
-    }
-}};
+  font-size: ${({$size:e})=>{switch(e){case"sm":return"0.75rem";case"md":return"0.875rem";case"lg":return"1rem";case"xl":return"1.25rem";case"xxl":return"1.5rem";default:return"0.875rem"}}};
   line-height: 1;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-`;
-const IconWrapper = styled.div `
+`,v=u.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({ $size }) => {
-    switch ($size) {
-        case 'sm':
-            return '1rem';
-        case 'md':
-            return '1.25rem';
-        case 'lg':
-            return '1.5rem';
-        case 'xl':
-            return '2rem';
-        case 'xxl':
-            return '2.5rem';
-        default:
-            return '1.25rem';
-    }
-}};
-  height: ${({ $size }) => {
-    switch ($size) {
-        case 'sm':
-            return '1rem';
-        case 'md':
-            return '1.25rem';
-        case 'lg':
-            return '1.5rem';
-        case 'xl':
-            return '2rem';
-        case 'xxl':
-            return '2.5rem';
-        default:
-            return '1.25rem';
-    }
-}};
-`;
-// Utility functions
-const getInitials = (name) => {
-    if (!name)
-        return '';
-    const nameParts = name.trim().split(/\s+/);
-    if (nameParts.length === 1) {
-        return nameParts[0].charAt(0).toUpperCase();
-    }
-    // Take first letter of first name and first letter of last name
-    const firstInitial = nameParts[0].charAt(0).toUpperCase();
-    const lastInitial = nameParts[nameParts.length - 1].charAt(0).toUpperCase();
-    return firstInitial + lastInitial;
-};
-const generateBackgroundColor = (text) => {
-    // Generate a consistent color based on text
-    const colors = [
-        '#f56565',
-        '#ed8936',
-        '#ecc94b',
-        '#48bb78',
-        '#38b2ac',
-        '#4299e1',
-        '#667eea',
-        '#9f7aea',
-        '#ed64a6',
-        '#f687b3',
-        '#fc8181',
-        '#f6ad55',
-        '#fbd38d',
-        '#68d391',
-        '#4fd1c7',
-        '#63b3ed',
-        '#7c3aed',
-        '#a78bfa',
-        '#f093fb',
-        '#fbb6ce',
-    ];
-    let hash = 0;
-    for (let i = 0; i < text.length; i++) {
-        hash = text.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return colors[Math.abs(hash) % colors.length];
-};
-const getContrastColor = (backgroundColor) => {
-    // Simple contrast calculation
-    const darkColors = ['#f56565', '#ed8936', '#667eea', '#9f7aea', '#7c3aed'];
-    return darkColors.includes(backgroundColor) ? '#ffffff' : '#ffffff';
-};
-// Main Avatar component
-export const Avatar = ({ name = '', initials, src, alt, size = 'md', backgroundColor, textColor, iconName = 'FaUser', className, classNames = {}, styles = {}, onClick, }) => {
-    // Determine what to display
-    const displayInitials = initials || getInitials(name);
-    const defaultBgColor = backgroundColor ||
-        generateBackgroundColor(displayInitials || name || 'User');
-    const defaultTextColor = textColor || getContrastColor(defaultBgColor);
-    // Render image if src is provided
-    if (src) {
-        return (_jsx(AvatarContainer, { "$size": size, "$backgroundColor": defaultBgColor, "$textColor": defaultTextColor, "$clickable": !!onClick, className: `${className || ''} ${classNames.container || ''}`, style: styles.container, onClick: onClick, title: name || alt, children: _jsx(AvatarImage, { src: src, alt: alt || name || 'Avatar', className: classNames.image, style: styles.image }) }));
-    }
-    // Render initials if name or initials are provided
-    if (displayInitials) {
-        return (_jsx(AvatarContainer, { "$size": size, "$backgroundColor": defaultBgColor, "$textColor": defaultTextColor, "$clickable": !!onClick, className: `${className || ''} ${classNames.container || ''}`, style: styles.container, onClick: onClick, title: name || `${displayInitials} Avatar`, children: _jsx(InitialsText, { "$size": size, className: classNames.initials, style: styles.initials, children: displayInitials }) }));
-    }
-    // Render icon as fallback
-    return (_jsx(AvatarContainer, { "$size": size, "$backgroundColor": defaultBgColor, "$textColor": defaultTextColor, "$clickable": !!onClick, className: `${className || ''} ${classNames.container || ''}`, style: styles.container, onClick: onClick, title: "User Avatar", children: _jsx(IconWrapper, { "$size": size, className: classNames.iconWrapper, style: styles.iconWrapper, children: _jsx(Icon, { nameIcon: iconName, propsIcon: {
-                    color: defaultTextColor,
-                    size: '100%',
-                } }) }) }));
-};
-// Export size constants for external use
-export const AVATAR_SIZES = Object.keys(sizeMap);
-// Default export
-export default Avatar;
+  width: ${({$size:e})=>{switch(e){case"sm":return"1rem";case"md":return"1.25rem";case"lg":return"1.5rem";case"xl":return"2rem";case"xxl":return"2.5rem";default:return"1.25rem"}}};
+  height: ${({$size:e})=>{switch(e){case"sm":return"1rem";case"md":return"1.25rem";case"lg":return"1.5rem";case"xl":return"2rem";case"xxl":return"2.5rem";default:return"1.25rem"}}};
+`,I=e=>{if(!e)return"";const r=e.trim().split(/\s+/);if(r.length===1)return r[0].charAt(0).toUpperCase();const t=r[0].charAt(0).toUpperCase(),n=r[r.length-1].charAt(0).toUpperCase();return t+n},k=e=>{const r=["#f56565","#ed8936","#ecc94b","#48bb78","#38b2ac","#4299e1","#667eea","#9f7aea","#ed64a6","#f687b3","#fc8181","#f6ad55","#fbd38d","#68d391","#4fd1c7","#63b3ed","#7c3aed","#a78bfa","#f093fb","#fbb6ce"];let t=0;for(let n=0;n<e.length;n++)t=e.charCodeAt(n)+((t<<5)-t);return r[Math.abs(t)%r.length]},w=e=>(["#f56565","#ed8936","#667eea","#9f7aea","#7c3aed"].includes(e),"#ffffff");export const Avatar=({name:e="",initials:r,src:t,alt:n,size:s="md",backgroundColor:g,textColor:$,iconName:x="FaUser",className:m,classNames:o={},styles:c={},onClick:i})=>{const l=r||I(e),d=g||k(l||e||"User"),f=$||w(d);return t?a(p,{$size:s,$backgroundColor:d,$textColor:f,$clickable:!!i,className:`${m||""} ${o.container||""}`,style:c.container,onClick:i,title:e||n,children:a(C,{src:t,alt:n||e||"Avatar",className:o.image,style:c.image})}):l?a(p,{$size:s,$backgroundColor:d,$textColor:f,$clickable:!!i,className:`${m||""} ${o.container||""}`,style:c.container,onClick:i,title:e||`${l} Avatar`,children:a(A,{$size:s,className:o.initials,style:c.initials,children:l})}):a(p,{$size:s,$backgroundColor:d,$textColor:f,$clickable:!!i,className:`${m||""} ${o.container||""}`,style:c.container,onClick:i,title:"User Avatar",children:a(v,{$size:s,className:o.iconWrapper,style:c.iconWrapper,children:a(b,{nameIcon:x,propsIcon:{color:f,size:"100%"}})})})},AVATAR_SIZES=Object.keys(h);export default Avatar;

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

@@ -1,28 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { memo, useMemo } from 'react';
-import { attachSubComponents } from '../../utils';
-import { InnerBadge } from './InnerBadge/InnerBadge';
-import { styled } from 'styled-components';
-import { InlineBadge } from './InnerBadge/Inline';
-const BadgeContainer = styled.div `
+"use strict";import{jsx as g,jsxs as b}from"react/jsx-runtime";import B,{memo as u,useMemo as y}from"react";import{attachSubComponents as h}from"../../utils";import{InnerBadge as x}from"./InnerBadge/InnerBadge";import{styled as j}from"styled-components";import{InlineBadge as v}from"./InnerBadge/Inline";const C=j.div`
   position: relative;
   width: min-content;
   display: inline-block;
-`;
-const BadgeComponent = React.forwardRef(({ size = 'hint', overlap = 'circular', children, position = 'bottom-right', variant = 'notification', iconSrc, count, 'aria-label': ariaLabel, classNames = {}, styles = {}, ...props }, ref) => {
-    // Generate accessible label for the badge
-    const badgeAriaLabel = useMemo(() => {
-        if (ariaLabel)
-            return ariaLabel;
-        if (typeof count === 'number')
-            return `${count} notifications`;
-        if (typeof count === 'string' && count)
-            return `${count} notifications`;
-        return undefined;
-    }, [ariaLabel, count]);
-    return (_jsxs(BadgeContainer, { ref: ref, "data-aui": "badge", className: classNames.container, style: styles.container, ...props, children: [_jsx(InnerBadge, { position: position, size: size, overlap: overlap, variant: variant, iconSrc: iconSrc, count: count, "aria-label": badgeAriaLabel }), children] }));
-});
-BadgeComponent.displayName = 'Badge';
-export const Badge = attachSubComponents('Badge', memo(BadgeComponent), {
-    Inline: InlineBadge,
-});
+`,t=B.forwardRef(({size:n="hint",overlap:r="circular",children:o,position:a="bottom-right",variant:s="notification",iconSrc:m,count:e,"aria-label":i,classNames:d={},styles:f={},...l},p)=>{const c=y(()=>{if(i)return i;if(typeof e=="number")return`${e} notifications`;if(typeof e=="string"&&e)return`${e} notifications`},[i,e]);return b(C,{ref:p,"data-aui":"badge",className:d.container,style:f.container,...l,children:[g(x,{position:a,size:n,overlap:r,variant:s,iconSrc:m,count:e,"aria-label":c}),o]})});t.displayName="Badge";export const Badge=h("Badge",u(t),{Inline:v});

package/lib/src/core-components/src/components/Badge/InnerBadge/Inline.js

@@ -1,25 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef, useMemo } from 'react';
-import { StyledIcon, StyledText, StyledInline } from './elements';
-import { Icon } from '../../Icon/Icon';
-export const InlineBadge = React.memo(forwardRef(({ size = 'md', variant = 'positive', iconSrc, count, children, ...props }, ref) => {
-    const childElement = useMemo(() => {
-        if (size === 'hint') {
-            return null;
-        }
-        if (iconSrc) {
-            return (_jsx(StyledIcon, { "$size": size, children: _jsx(Icon, { nameIcon: iconSrc, propsIcon: {
-                        size: size === 'sm' ? '0.625rem' : '0.75rem',
-                        color: 'currentColor',
-                    } }) }));
-        }
-        if (count !== undefined && count !== null && count !== '') {
-            const displayCount = typeof count === 'number' && count > 99 ? '99+' : count;
-            return _jsx(StyledText, { "$size": size, children: displayCount });
-        }
-        // Render children as text content when no iconSrc or count
-        return children || null;
-    }, [size, iconSrc, count, children]);
-    return (_jsx(StyledInline, { "data-aui": "inline-badge", ref: ref, "$size": size, "$variant": variant, "$hasIcon": !!iconSrc, role: "status", ...props, children: childElement }));
-}));
-InlineBadge.displayName = 'InlineBadge';
+"use strict";import{jsx as l}from"react/jsx-runtime";import s,{forwardRef as f,useMemo as p}from"react";import{StyledIcon as u,StyledText as I,StyledInline as y}from"./elements";import{Icon as h}from"../../Icon/Icon";export const InlineBadge=s.memo(f(({size:r="md",variant:o="positive",iconSrc:n,count:e,children:t,...i},m)=>{const a=p(()=>{if(r==="hint")return null;if(n)return l(u,{$size:r,children:l(h,{nameIcon:n,propsIcon:{size:r==="sm"?"0.625rem":"0.75rem",color:"currentColor"}})});if(e!=null&&e!==""){const d=typeof e=="number"&&e>99?"99+":e;return l(I,{$size:r,children:d})}return t||null},[r,n,e,t]);return l(y,{"data-aui":"inline-badge",ref:m,$size:r,$variant:o,$hasIcon:!!n,role:"status",...i,children:a})}));InlineBadge.displayName="InlineBadge";

package/lib/src/core-components/src/components/Badge/InnerBadge/InnerBadge.js

@@ -1,25 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import { StyledIcon, StyledText, StyledBadge } from './elements';
-import { Icon } from '../../Icon/Icon';
-export const InnerBadge = React.memo(({ position = 'top-right', size = 'md', overlap = 'circular', variant = 'notification', iconSrc, count, ...props }) => {
-    const childElement = useMemo(() => {
-        if (size === 'hint') {
-            return null;
-        }
-        if (iconSrc) {
-            return (_jsx(StyledIcon, { "$size": size, children: _jsx(Icon, { nameIcon: iconSrc, propsIcon: {
-                        size: size === 'sm' ? '0.625rem' : '0.75rem',
-                        color: 'currentColor',
-                    } }) }));
-        }
-        if (count !== undefined && count !== null && count !== '') {
-            // Format count display: show 99+ for numbers > 99
-            const displayCount = typeof count === 'number' && count > 99 ? '99+' : count;
-            return _jsx(StyledText, { "$size": size, children: displayCount });
-        }
-        return null;
-    }, [size, iconSrc, count]);
-    return (_jsx(StyledBadge, { "$position": position, "$size": size, "$overlap": overlap, "$variant": variant, "$hasIcon": !!iconSrc, role: "status", "aria-live": "polite", ...props, children: childElement }));
-});
-InnerBadge.displayName = 'InnerBadge';
+"use strict";import{jsx as t}from"react/jsx-runtime";import p,{useMemo as s}from"react";import{StyledIcon as f,StyledText as u,StyledBadge as h}from"./elements";import{Icon as I}from"../../Icon/Icon";export const InnerBadge=p.memo(({position:o="top-right",size:r="md",overlap:l="circular",variant:i="notification",iconSrc:n,count:e,...m})=>{const a=s(()=>{if(r==="hint")return null;if(n)return t(f,{$size:r,children:t(I,{nameIcon:n,propsIcon:{size:r==="sm"?"0.625rem":"0.75rem",color:"currentColor"}})});if(e!=null&&e!==""){const d=typeof e=="number"&&e>99?"99+":e;return t(u,{$size:r,children:d})}return null},[r,n,e]);return t(h,{$position:o,$size:r,$overlap:l,$variant:i,$hasIcon:!!n,role:"status","aria-live":"polite",...m,children:a})});InnerBadge.displayName="InnerBadge";

package/lib/src/core-components/src/components/Badge/InnerBadge/elements.js

@@ -1,111 +1,65 @@
-import { styled, css } from 'styled-components';
-import { sizeMap, } from '../types';
-const getTransform = (overlap, position) => {
-    const [vertical, horizontal] = position.split('-');
-    let verticalTranslate, horizontalTranslate;
-    vertical === 'top'
-        ? (verticalTranslate = '-50%')
-        : (verticalTranslate = '50%');
-    horizontal === 'right'
-        ? (horizontalTranslate = '50%')
-        : (horizontalTranslate = '-50%');
-    if (overlap === 'square') {
-        return css `
-      transform: translate(${horizontalTranslate}, ${verticalTranslate});
-      ${vertical}: 0;
-      ${horizontal}: 0;
-    `;
-    }
-    return css `
-    transform: translate(${horizontalTranslate}, ${verticalTranslate});
-    ${vertical}: 14%;
-    ${horizontal}: 14%;
-  `;
-};
-const getColor = (variant) => {
-    switch (variant) {
-        case 'alert':
-            return css `
+"use strict";import{styled as n,css as r}from"styled-components";import{sizeMap as l}from"../types";const u=(t,e)=>{const[o,s]=e.split("-");let a,i;return o==="top"?a="-50%":a="50%",s==="right"?i="50%":i="-50%",t==="square"?r`
+      transform: translate(${i}, ${a});
+      ${o}: 0;
+      ${s}: 0;
+    `:r`
+    transform: translate(${i}, ${a});
+    ${o}: 14%;
+    ${s}: 14%;
+  `},d=t=>{switch(t){case"alert":return r`
         background-color: var(--aui-status-error);
         color: var(--aui-status-on-error);
-      `;
-        case 'warn':
-            return css `
+      `;case"warn":return r`
         background-color: var(--aui-status-warning);
         color: var(--aui-status-on-warning);
-      `;
-        case 'positive':
-            return css `
+      `;case"positive":return r`
         background-color: var(--aui-status-success);
         color: var(--aui-status-on-success);
-      `;
-        case 'neutral':
-            return css `
+      `;case"neutral":return r`
         background-color: var(--aui-neutral-soft);
         color: var(--aui-on-neutral-soft);
         border: 1px solid var(--aui-outline);
-      `;
-        default:
-            return css `
+      `;default:return r`
         background-color: var(--aui-primary);
         color: var(--aui-on-primary);
-      `;
-    }
-};
-const getPadding = (size, hasIcon) => {
-    if (size === 'sm' && !hasIcon) {
-        return css `
+      `}},g=(t,e)=>t==="sm"&&!e?r`
       padding: 0 var(--aui-spacing-050);
-    `;
-    }
-    else if (size === 'md' && !hasIcon) {
-        return css `
+    `:t==="md"&&!e?r`
       padding: 0 var(--aui-spacing-075);
-    `;
-    }
-    else {
-        return css `
+    `:r`
       padding: 0;
-    `;
-    }
-};
-const getSharedStyles = (props) => css `
+    `,c=t=>r`
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   border-radius: 1rem;
   width: fit-content;
-  min-height: ${sizeMap[props.$size]};
-  min-width: ${sizeMap[props.$size]};
-  ${props.$size === 'hint' &&
-    css `
+  min-height: ${l[t.$size]};
+  min-width: ${l[t.$size]};
+  ${t.$size==="hint"&&r`
     outline: 2px solid var(--aui-surface);
   `}
-  ${getColor(props.$variant)};
-  ${getPadding(props.$size, props.$hasIcon)}
-`;
-export const StyledBadge = styled.div `
+  ${d(t.$variant)};
+  ${g(t.$size,t.$hasIcon)}
+`;export const StyledBadge=n.div`
   position: absolute;
-  ${getSharedStyles}
-  ${(props) => getTransform(props.$overlap, props.$position)};
-`;
-export const StyledInline = styled.div `
-  ${getSharedStyles}
-`;
-export const StyledText = styled.span `
-  font-size: ${({ $size }) => ($size === 'sm' ? '0.75rem' : '0.875rem')};
+  ${c}
+  ${t=>u(t.$overlap,t.$position)};
+`,StyledInline=n.div`
+  ${c}
+`,StyledText=n.span`
+  font-size: ${({$size:t})=>t==="sm"?"0.75rem":"0.875rem"};
   font-weight: 700;
   line-height: 1rem;
   vertical-align: middle;
   font-variant-numeric: tabular-nums lining-nums;
-`;
-export const StyledIcon = styled.div `
+`,StyledIcon=n.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({ $size }) => ($size === 'sm' ? '0.625rem' : '0.75rem')};
-  height: ${({ $size }) => ($size === 'sm' ? '0.625rem' : '0.75rem')};
+  width: ${({$size:t})=>t==="sm"?"0.625rem":"0.75rem"};
+  height: ${({$size:t})=>t==="sm"?"0.625rem":"0.75rem"};
 
   .iconContainer {
     width: 100%;

package/lib/src/core-components/src/components/Badge/InnerBadge/index.js

@@ -1 +1 @@
-export { InnerBadge } from './InnerBadge';
+"use strict";export{InnerBadge}from"./InnerBadge";

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

@@ -1 +1 @@
-export * from './Badge';
+"use strict";export*from"./Badge";

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

@@ -1,5 +1 @@
-export const sizeMap = {
-    hint: '0.5rem',
-    sm: '1rem',
-    md: '1.25rem',
-};
+"use strict";export const sizeMap={hint:"0.5rem",sm:"1rem",md:"1.25rem"};

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

@@ -1,83 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, useMemo, useRef, useState, useCallback, } from 'react';
-import { useCombinedRefs } from '../../utils/hooks';
-import { Container, BreadcrumbList, Item, Separator, SeparatorText, OverflowDots, IconWrapper, DropdownMenu, DropdownItem, } from './elements';
-const ChevronIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }));
-const HomeIconSvg = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }));
-const getSeparatorContent = (type, size) => {
-    switch (type) {
-        case 'chevron':
-            return _jsx(ChevronIcon, {});
-        case 'slash':
-            return _jsx(SeparatorText, { "$size": size, children: "/" });
-        case 'arrow':
-            return _jsx(SeparatorText, { "$size": size, children: "\u2192" });
-        case 'dot':
-            return _jsx(SeparatorText, { "$size": size, children: "\u2022" });
-        default:
-            return _jsx(ChevronIcon, {});
-    }
-};
-export const Breadcrumb = forwardRef(function BreadcrumbComponent({ children, maxItems, showOverflowDots = false, variant = 'default', size = 'medium', separatorType = 'chevron', customSeparator, showHomeIcon = false, collapsedItems, onCollapsedToggle, ariaLabel, ...rest }, fRef) {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(fRef, innerRef);
-    const [isCollapsedOpen, setIsCollapsedOpen] = useState(false);
-    const dropdownRef = useRef(null);
-    // Ensure collapsedItems is always an array
-    const safeCollapsedItems = collapsedItems ?? [];
-    // Handle collapsed items
-    const handleCollapsedToggle = useCallback(() => {
-        const newState = !isCollapsedOpen;
-        setIsCollapsedOpen(newState);
-        onCollapsedToggle?.(newState);
-    }, [isCollapsedOpen, onCollapsedToggle]);
-    // Close dropdown when clicking outside
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsCollapsedOpen(false);
-            }
-        };
-        if (isCollapsedOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isCollapsedOpen]);
-    // Process children with maxItems limit
-    const breadcrumbChildren = useMemo(() => {
-        const childArray = React.Children.toArray(children);
-        if (maxItems && childArray.length > maxItems) {
-            return childArray.slice(-maxItems);
-        }
-        return childArray;
-    }, [children, maxItems]);
-    // Scroll to last item on mount
-    useEffect(() => {
-        if (innerRef.current) {
-            const lastElementChild = innerRef.current.querySelector('ol')
-                ?.lastElementChild;
-            if (lastElementChild) {
-                innerRef.current.scroll?.(lastElementChild.offsetLeft, 0);
-            }
-        }
-    }, []);
-    const separatorContent = customSeparator || getSeparatorContent(separatorType, size);
-    const childCount = React.Children.count(breadcrumbChildren);
-    return (_jsx(Container, { "data-aui": "breadcrumb", "aria-label": ariaLabel || rest['aria-label'] || 'Breadcrumb navigation', ref: combinedRef, "$variant": variant, "$size": size, role: "navigation", ...rest, children: _jsxs(BreadcrumbList, { "$variant": variant, "$size": size, children: [showOverflowDots &&
-                    maxItems &&
-                    React.Children.count(children) > maxItems && (_jsxs(Item, { "$variant": variant, "$size": size, "$isActive": false, "$isCollapsed": true, "aria-hidden": "true", children: [_jsx(OverflowDots, { "$size": size, onClick: handleCollapsedToggle, role: "button", tabIndex: 0, onKeyDown: (e) => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    handleCollapsedToggle();
-                                }
-                            }, children: "\u2022\u2022\u2022" }), safeCollapsedItems.length > 0 && (_jsx(DropdownMenu, { ref: dropdownRef, "$isOpen": isCollapsedOpen, children: safeCollapsedItems.map((item, idx) => (_jsxs(DropdownItem, { href: item.href || '#', children: [item.icon && (_jsx(IconWrapper, { "$size": size, children: item.icon })), item.label] }, idx))) })), _jsx(Separator, { "$type": separatorType, "$size": size, "aria-hidden": "true", children: separatorContent })] })), React.Children.map(breadcrumbChildren, (child, index) => {
-                    const isLast = index === childCount - 1;
-                    const isFirst = index === 0;
-                    return (_jsxs(Item, { "$variant": variant, "$size": size, "$isActive": isLast, "$isCollapsed": false, "aria-current": isLast ? 'page' : undefined, children: [showHomeIcon && isFirst && (_jsx(IconWrapper, { "$size": size, children: _jsx(HomeIconSvg, {}) })), child, !isLast && (_jsx(Separator, { "$type": separatorType, "$size": size, "aria-hidden": "true", children: separatorContent }))] }, index));
-                })] }) }));
-});
-Breadcrumb.displayName = 'Breadcrumb';
+"use strict";"use client";import{jsx as r,jsxs as a}from"react/jsx-runtime";import d,{forwardRef as z,useEffect as y,useMemo as F,useRef as L,useState as H,useCallback as _}from"react";import{useCombinedRefs as q}from"../../utils/hooks";import{Container as K,BreadcrumbList as N,Item as B,Separator as R,SeparatorText as p,OverflowDots as G,IconWrapper as S,DropdownMenu as J,DropdownItem as P}from"./elements";const j=()=>r("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:r("polyline",{points:"9 18 15 12 9 6"})}),Q=()=>a("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[r("path",{d:"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}),r("polyline",{points:"9 22 9 12 15 12 15 22"})]}),U=(C,t)=>{switch(C){case"chevron":return r(j,{});case"slash":return r(p,{$size:t,children:"/"});case"arrow":return r(p,{$size:t,children:"\u2192"});case"dot":return r(p,{$size:t,children:"\u2022"});default:return r(j,{})}};export const Breadcrumb=z(function({children:t,maxItems:i,showOverflowDots:E=!1,variant:l="default",size:n="medium",separatorType:u="chevron",customSeparator:D,showHomeIcon:O=!1,collapsedItems:A,onCollapsedToggle:$,ariaLabel:I,...m},M){const c=L(null),W=q(M,c),[s,v]=H(!1),h=L(null),b=A??[],w=_(()=>{const e=!s;v(e),$?.(e)},[s,$]);y(()=>{const e=o=>{h.current&&!h.current.contains(o.target)&&v(!1)};return s&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[s]);const k=F(()=>{const e=d.Children.toArray(t);return i&&e.length>i?e.slice(-i):e},[t,i]);y(()=>{if(c.current){const e=c.current.querySelector("ol")?.lastElementChild;e&&c.current.scroll?.(e.offsetLeft,0)}},[]);const g=D||U(u,n),x=d.Children.count(k);return r(K,{"data-aui":"breadcrumb","aria-label":I||m["aria-label"]||"Breadcrumb navigation",ref:W,$variant:l,$size:n,role:"navigation",...m,children:a(N,{$variant:l,$size:n,children:[E&&i&&d.Children.count(t)>i&&a(B,{$variant:l,$size:n,$isActive:!1,$isCollapsed:!0,"aria-hidden":"true",children:[r(G,{$size:n,onClick:w,role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),w())},children:"\u2022\u2022\u2022"}),b.length>0&&r(J,{ref:h,$isOpen:s,children:b.map((e,o)=>a(P,{href:e.href||"#",children:[e.icon&&r(S,{$size:n,children:e.icon}),e.label]},o))}),r(R,{$type:u,$size:n,"aria-hidden":"true",children:g})]}),d.Children.map(k,(e,o)=>{const f=o===x-1;return a(B,{$variant:l,$size:n,$isActive:f,$isCollapsed:!1,"aria-current":f?"page":void 0,children:[O&&o===0&&r(S,{$size:n,children:r(Q,{})}),e,!f&&r(R,{$type:u,$size:n,"aria-hidden":"true",children:g})]},o)})]})})});Breadcrumb.displayName="Breadcrumb";