customer-module-frontend 1.0.1-beta.1 → 1.0.1

package/src/components/Contacts/index.tsx

@@ -1,171 +0,0 @@
-import { useState } from "react";
-import { Dialog, Button, TextField } from "hiver-ui-kit-extended";
-import { mockContacts } from "./constants";
-import Avatar from "../Avatar";
-import closeIcon from "../../assets/close.svg";
-import Icon from "../Icon";
-
-type DialogState = "add-primary-contact" | "primary-contact-confirmation";
-
-interface Contact {
-  id: string;
-  name: string;
-  email: string;
-  isSelected?: boolean;
-}
-
-const PrimaryContactsDialog = () => {
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [dialogState, setDialogState] = useState<DialogState>("add-primary-contact");
-  const [searchValue, setSearchValue] = useState("");
-  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
-
-  const handleClick = () => {
-    setDialogOpen(true);
-  };
-
-  const handleClose = () => {
-    setDialogOpen(false);
-    setDialogState("add-primary-contact");
-    setSearchValue("");
-    setSelectedContact(null);
-  };
-
-  const filteredContacts = mockContacts.filter(
-    (contact) =>
-      contact.name.toLowerCase().includes(searchValue.toLowerCase()) ||
-      contact.email.toLowerCase().includes(searchValue.toLowerCase())
-  );
-
-  const handleContactSelect = (contact: Contact) => {
-    setSelectedContact(contact);
-    setDialogState("primary-contact-confirmation");
-  };
-
-  const renderHeader = () => {
-    if (dialogState === "add-primary-contact") {
-      return (
-        <div className="flex items-center justify-between w-full">
-          <div>Change Primary Contact</div>
-          <Button
-            onClick={handleClose}
-            variant="text"
-            icon={closeIcon}
-            size="small"
-            color="primary"
-            className="p-0"
-          />
-        </div>
-      );
-    }
-    return <div>Primary Contact Confirmation</div>;
-  };
-
-  const renderContent = () => {
-    if (dialogState === "primary-contact-confirmation") {
-      return (
-        <div className="w-[380px]" onClick={(e) => e.stopPropagation()}>
-          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-5 text-sm text-[var(--slate-text-subtle,#64758b)] m-0 w-full mb-4">
-            Are you sure you want to change the contact to {selectedContact?.name}? This will replace
-            the existing contact for this conversation.
-          </p>
-          <div className="flex gap-3 items-center justify-end w-full">
-            <Button
-              variant="outlined"
-              size="medium"
-              onClick={() => setDialogState("add-primary-contact")}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={() => {
-                alert("Contact changed!");
-                handleClose();
-              }}
-              size="medium"
-            >
-              Change
-            </Button>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="w-[380px]" onClick={(e) => e.stopPropagation()}>
-        <div className="w-full mb-4">
-          <TextField
-            placeholder="Search name or email"
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-          />
-        </div>
-        <div className="flex flex-col gap-2 items-start w-full">
-          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-5 text-sm text-[#64758b]">
-            Contacts from this conversation
-          </p>
-          <div className="flex flex-col items-start w-full gap-0">
-            {filteredContacts.map((contact: Contact) => (
-              <ContactItem
-                key={contact.id}
-                contact={contact}
-                onSelect={() => handleContactSelect(contact)}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div>
-
-      <Icon name="edit" size={16} type="active" color="#0F172A" onClick={handleClick} />
-      <Dialog
-        open={dialogOpen}
-        variant="confirmation"
-        onClose={handleClose}
-        onBack={() => setDialogState("add-primary-contact")}
-        maxWidth="sm"
-        title={renderHeader()}
-      >
-        {renderContent()}
-      </Dialog>
-    </div>
-  );
-};
-
-export default PrimaryContactsDialog;
-
-const ContactItem = ({
-  contact,
-  onSelect,
-}: {
-  contact: Contact;
-  onSelect: () => void;
-}) => {
-  return (
-    <div
-      className="bg-white flex gap-3 items-center px-0 py-2 rounded-lg w-full cursor-pointer hover:bg-gray-50 transition-colors"
-      onClick={onSelect}
-    >
-      <div className="flex gap-3 items-center flex-1 min-w-0">
-        <Avatar name={contact.name} labelName={contact.name} />
-        <div className="flex flex-col items-start justify-center flex-1 min-w-0">
-          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-5 text-sm text-[#334155] truncate w-full">
-            {contact.name}
-          </p>
-          <p className="font-['Hanken_Grotesk',sans-serif] font-normal leading-[18px] text-xs text-[#64758b] truncate w-full">
-            {contact.email}
-          </p>
-        </div>
-      </div>
-      {contact.isSelected && (
-        <div className="overflow-clip relative shrink-0 w-3.5 h-3.5">
-          <i className="pi pi-check text-[#276cf0] text-sm"></i>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/ConversationBox/constants.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import type { ConversationStatus, ConversationBoxSize } from "./types";
-import statusOpenIcon from '../../assets/status_open.svg';
-import statusPendingIcon from '../../assets/status-snoozed.svg';
-import statusClosedIcon from '../../assets/status-resolved.svg';
-import conversationIcon from '../../assets/conversation.svg';
-import emailIcon from '../../assets/email.svg';
-import sharedMailboxIcon from '../../assets/sm_inbox.svg';
-
-// Status configuration with colors and icons
-export const statusConfig: Record<ConversationStatus, { label: string; color: string; iconColor: string; icon: string }> = {
-    open: { label: 'Open', color: '#E37144', iconColor: '#E3692C', icon: statusOpenIcon },
-    pending: { label: 'Pending', color: '#5398CF', iconColor: '#EC8A54', icon: statusPendingIcon },
-    closed: { label: 'Closed', color: '#2DBB6D', iconColor: '#276CF0', icon: statusClosedIcon },
-};
-
-// Size configuration
-export const sizeConfig: Record<ConversationBoxSize, {
-    padding: { email: string; chat: string };
-    gap: string;
-    iconSize: string;
-    fontSize: { title: string; body: string; timestamp: string };
-    avatarSize: string;
-    avatarText: string;
-    maxWidth: string;
-    dividerHeight: string;
-}> = {
-    default: {
-        padding: {
-            email: 'cm:px-5 cm:py-4',
-            chat: 'cm:px-5 cm:py-4',
-        },
-        gap: 'cm:gap-1.5',
-        iconSize: 'cm:w-3.5 cm:h-3.5',
-        fontSize: {
-            title: 'cm:text-sm',
-            body: 'cm:text-sm',
-            timestamp: 'cm:text-[13px]',
-        },
-        avatarSize: 'cm:w-4 cm:h-4',
-        avatarText: 'cm:text-[9px]',
-        maxWidth: 'cm:max-w-[914px]',
-        dividerHeight: 'cm:h-4',
-    },
-    small: {
-        padding: {
-            email: 'cm:p-4',
-            chat: 'cm:p-4',
-        },
-        gap: 'cm:gap-1',
-        iconSize: 'cm:w-3 cm:h-3',
-        fontSize: {
-            title: 'cm:text-xs',
-            body: 'cm:text-xs',
-            timestamp: 'cm:text-xs',
-        },
-        avatarSize: 'cm:w-3 cm:h-3',
-        avatarText: 'cm:text-[8px]',
-        maxWidth: 'cm:max-w-[330px]',
-        dividerHeight: 'cm:h-3',
-    },
-};
-
-// Icon components
-interface IconProps {
-    iconSize: string;
-}
-
-export const ChatIcon: React.FC<IconProps> = ({ iconSize }) => (
-    <img
-        src={conversationIcon}
-        alt="Chat"
-        className={iconSize}
-    />
-);
-
-export const EnvelopeIcon: React.FC<IconProps> = ({ iconSize }) => (
-    <img
-        src={emailIcon}
-        alt="Email"
-        className={iconSize}
-    />
-);
-
-export const SharedMailboxIcon: React.FC<IconProps> = ({ iconSize }) => (
-    <img
-        src={sharedMailboxIcon}
-        alt="Shared Mailbox"
-        className={iconSize}
-    />
-);
-
-export const StatusIcon: React.FC<IconProps & { icon: string; label: string }> = ({ iconSize, icon, label }) => (
-    <img
-        src={icon}
-        alt={label}
-        className={iconSize}
-    />
-);

package/src/components/ConversationBox/index.tsx

@@ -1,147 +0,0 @@
-import React, { useState } from 'react';
-import type { ConversationBoxProps } from './types';
-import { statusConfig, sizeConfig, ChatIcon, EnvelopeIcon, SharedMailboxIcon, StatusIcon } from './constants';
-import Avatar from '../Avatar';
-import openInANewTab from '../../assets/open_in_a_new_tab.svg';
-
-
-const ConversationBox: React.FC<ConversationBoxProps> = ({
-  type,
-  status,
-  size = 'default',
-  senderName,
-  timestamp,
-  messagePreview,
-  heading,
-  mailboxName,
-  assignedAgent,
-  onClick,
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const statusInfo = statusConfig[status];
-  const sizeStyles = sizeConfig[size];
-
-  // Divider line (vertical)
-  const Divider = () => (
-    <div className={`${sizeStyles.dividerHeight} cm:w-px cm:bg-slate-border-light cm:shrink-0`} />
-  );
-
-  const handleActionClick = (e: React.MouseEvent) => {
-    e.stopPropagation(); // Prevent triggering the onClick handler
-    // Handle action button click (e.g., show menu)
-    console.log('Action button clicked');
-  };
-
-  return (
-    <div
-      className={`cm:border cm:p-3.5 cm:border-slate-border-light cm:rounded-[10px] cm:flex cm:flex-col ${sizeStyles.gap} cm:w-full ${sizeStyles.maxWidth} cm:cursor-pointer hover:cm:bg-slate-surface-subtle_100 cm:transition-colors cm:relative ${type === 'email' ? sizeStyles.padding.email : sizeStyles.padding.chat
-        }`}
-      onClick={onClick}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      {/* Top row: Sender, Status, Timestamp */}
-      <div className={`cm:flex ${size === 'small' ? 'cm:gap-2' : 'cm:gap-2.5'} cm:items-center cm:w-full`}>
-        <div className={`cm:flex-1 cm:flex ${size === 'small' ? 'cm:gap-2' : 'cm:gap-2.5'} cm:items-center cm:min-w-0`}>
-          {/* Icon and Sender Name */}
-          <div className={`cm:flex ${size === 'small' ? 'cm:gap-1.5' : 'cm:gap-2'} cm:items-center cm:shrink-0`}>
-            <div className={`${sizeStyles.iconSize} cm:shrink-0 cm:flex cm:items-center cm:justify-center cm:text-slate-icons-subtle`}>
-              {type === 'chat' ? <ChatIcon iconSize={sizeStyles.iconSize} /> : <EnvelopeIcon iconSize={sizeStyles.iconSize} />}
-            </div>
-            <div className="cm:flex cm:gap-1 cm:items-center">
-              <p className={`cm:font-medium cm:leading-5 ${sizeStyles.fontSize.title} cm:text-slate-text-title cm:whitespace-nowrap`}>
-                {senderName}
-              </p>
-            </div>
-          </div>
-
-          {/* Divider */}
-          <Divider />
-
-          {/* Status Chip */}
-          <div className={`cm:flex ${size === 'small' ? 'cm:gap-1.5' : 'cm:gap-2'} cm:items-center cm:justify-center cm:rounded-2xl cm:shrink-0`}>
-            <div className={`${sizeStyles.iconSize} cm:shrink-0 cm:flex cm:items-center cm:justify-center`}>
-              <StatusIcon iconSize={sizeStyles.iconSize} icon={statusInfo.icon} label={statusInfo.label} />
-            </div>
-          </div>
-        </div>
-
-        {/* Timestamp or Action Button - fixed width container to prevent layout shift */}
-        <div className="cm:relative cm:shrink-0 cm:min-w-[100px] cm:flex cm:items-center cm:justify-end">
-          {/* Timestamp - always rendered but hidden on hover */}
-          <p 
-            className={`cm:font-normal cm:leading-[18px] ${sizeStyles.fontSize.timestamp} cm:text-slate-text-subtle cm:whitespace-nowrap cm:text-right cm:transition-opacity ${
-              isHovered ? 'cm:opacity-0' : 'cm:opacity-100'
-            }`}
-          >
-            {timestamp}
-          </p>
-          
-          {/* Action Button - absolutely positioned, shown on hover */}
-          <button
-            onClick={handleActionClick}
-            className={`cm:absolute cm:right-0 cm:bg-slate-surface-white cm:border cm:border-slate-border-light cm:rounded-[6px] cm:flex cm:items-center cm:justify-center cm:p-1.5 cm:w-7 cm:h-7 cm:hover:bg-slate-surface-subtle cm:transition-all ${
-              isHovered ? 'cm:opacity-100 cm:pointer-events-auto' : 'cm:opacity-0 cm:pointer-events-none'
-            }`}
-            aria-label="Open in a new tab"
-          >
-            <div className="cm:w-3.5 cm:h-3.5 cm:flex cm:items-center cm:justify-center">
-              <img src={openInANewTab} alt="Open in a new tab" className="cm:w-3.5 cm:h-3.5" />
-            </div>
-          </button>
-        </div>
-      </div>
-
-      {/* Content Section */}
-      <div className="cm:flex cm:flex-col cm:items-start cm:w-full">
-        {/* Heading (only for email) */}
-        {type === 'email' && heading && (
-          <div className={`cm:flex ${size === 'small' ? 'cm:gap-2' : 'cm:gap-3'} cm:items-center cm:w-full`}>
-            <div className={`cm:flex-1 cm:flex cm:flex-col cm:font-normal cm:justify-center cm:leading-none cm:overflow-hidden ${sizeStyles.fontSize.body} cm:text-slate-text-body`}>
-              <p className="cm:leading-5 cm:text-left cm:overflow-ellipsis cm:overflow-hidden">
-                {heading}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* Message Preview and Footer */}
-        <div className={`cm:flex ${size === 'small' ? 'cm:flex-col cm:gap-1' : 'cm:flex-row cm:items-center cm:justify-between'} cm:w-full`}>
-          <p className={`cm:font-normal cm:leading-5 cm:overflow-ellipsis cm:overflow-hidden ${sizeStyles.fontSize.body} cm:text-slate-text-subtle cm:whitespace-nowrap ${size === 'small' ? 'cm:w-full' : 'cm:max-w-[560px]'}`}>
-            {messagePreview}
-          </p>
-
-          {/* MailboxName and Assigned Agent */}
-          <div className={`cm:flex ${size === 'small' ? 'cm:gap-2 cm:w-full' : 'cm:gap-2.5'} cm:items-center cm:shrink-0`}>
-            {/* mailboxName */}
-            {mailboxName && (
-              <>
-                <div className="cm:flex cm:gap-1 cm:items-center cm:justify-center cm:py-0.5 cm:rounded cm:shrink-0">
-                  <div className={`${sizeStyles.iconSize} cm:overflow-hidden cm:shrink-0 cm:flex cm:items-center cm:justify-center cm:text-slate-icons-subtle`}>
-                    <SharedMailboxIcon iconSize={sizeStyles.iconSize} />
-                  </div>
-                  <p className={`cm:font-normal cm:leading-5 ${sizeStyles.fontSize.body} cm:text-slate-text-subtle cm:whitespace-nowrap`}>
-                    {mailboxName}
-                  </p>
-                </div>
-                <Divider />
-              </>
-            )}
-
-            {/* Assigned Agent */}
-            {assignedAgent && (
-              <div className={`cm:flex ${size === 'small' ? 'cm:gap-1' : 'cm:gap-1.5'} cm:items-center cm:shrink-0`}>
-                <Avatar name={assignedAgent.name} size={size} />
-                <p className={`cm:font-normal cm:leading-5 ${sizeStyles.fontSize.body} cm:text-slate-text-subtle cm:whitespace-nowrap`}>
-                  {assignedAgent.name}
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ConversationBox;

package/src/components/ConversationBox/types.ts

@@ -1,20 +0,0 @@
-export type ConversationType = 'chat' | 'email';
-export type ConversationStatus = 'open' | 'pending' | 'closed';
-export type ConversationBoxSize = 'default' | 'small';
-
-export interface ConversationBoxProps {
-    type: ConversationType;
-    status: ConversationStatus;
-    size?: ConversationBoxSize;
-    senderName: string;
-    timestamp: string;
-    messagePreview: string;
-    heading?: string; // Only used for email type
-    mailboxName?: string;
-    assignedAgent?: {
-      name: string;
-      avatarColor?: string;
-      avatarInitial?: string;
-    };
-    onClick?: () => void;
-  }

package/src/components/CustomersLayout/index.tsx

@@ -1,20 +0,0 @@
-import { Outlet, useLocation } from "react-router-dom";
-import Header from "../Header";
-import TabsSection from "../TabsSection";
-import BreadcrumbsSection from "../BreadcrumbsSection";
-
-export default function CustomersLayout() {
-    const location = useLocation();
-    const isDetailsPage = location.pathname.includes("/accounts/") ||
-        location.pathname.includes("/contacts/");
-
-        console.log('isDetailsPage', isDetailsPage);
-    return (
-        <Header>
-            <div className="cm:pt-2 cm:px-12">
-            {isDetailsPage ? <BreadcrumbsSection /> : <TabsSection />}
-            </div>
-            <Outlet />
-        </Header>
-    );
-}

package/src/components/DetailsCard/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import type { DetailsCardProps } from './types';
-
-const DetailsCard: React.FC<DetailsCardProps> = ({ 
-  header, 
-  children, 
-  className = '',
-  maxWidth = 'cm:max-w-[360px]',
-  maxHeight = 'cm:h-full'
-}) => {
-  return (
-    <div
-      className={`cm:bg-slate-surface-white cm:border cm:border-slate-border-light cm:rounded-[12px] cm:relative cm:w-full ${maxWidth} ${maxHeight} ${className}`}
-    >
-      <div className="cm:flex cm:flex-col cm:items-start cm:overflow-clip cm:relative cm:rounded-[inherit] cm:w-full">
-        {/* Header Section */}
-        <div className="cm:border-b cm:border-slate-border-mild cm:box-border cm:flex cm:h-12 cm:items-center cm:pl-[21px] cm:pr-[25px] cm:py-[14px] cm:relative cm:shrink-0 cm:w-full">
-          {header}
-        </div>
-        
-        {/* Content Section */}
-        <div className="cm:box-border cm:flex cm:flex-col cm:items-start cm:overflow-clip cm:px-[21px] cm:py-5 cm:relative cm:shrink-0 cm:w-full">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DetailsCard;
-

package/src/components/DetailsCard/types.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface DetailsCardProps {
-  header: ReactNode;
-  children: ReactNode;
-  className?: string;
-  maxWidth?: string;
-  maxHeight?: string;
-}
-

package/src/components/EmptyData/NoDataFound.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import NoDataImage from '../../assets/no-data.svg';
-
-export interface NoDataFoundProps {
-  title: string;
-  description: string;
-}
-
-const NoDataFound: React.FC<NoDataFoundProps> = ({ title, description }) => {
-  return (
-    <div className="cm:flex cm:flex-col cm:items-center cm:justify-center cm:w-full cm:h-full cm:py-12">
-      <div className="cm:flex cm:flex-col cm:items-center cm:gap-3">
-        <img
-          src={NoDataImage}
-          alt="No data"
-          className="cm:w-[100px] cm:h-[100px]"
-        />
-        <div className="cm:flex cm:flex-col cm:items-center cm:gap-1">
-          <p className="cm:text-body-sm cm:text-slate-text-title cm:text-center">
-            {title}
-          </p>
-          <p className="cm:text-body-meduim cm:text-slate-text-subtle cm:text-center">
-            {description}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NoDataFound;

package/src/components/Header/index.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import type { ReactNode } from "react";
-import SearchDialog from "../Search/SearchDialog";
-import { TextField } from "hiver-ui-kit-extended";
-import searchIcon from "@assets/search.svg";
-import Icon from "../Icon";
-interface LayoutProps {
-  children: ReactNode;
-}
-
-const Layout: React.FC<LayoutProps> = ({ children }) => {
-  const [isSearchDialogOpen, setIsSearchDialogOpen] = React.useState(false);
-
-  return (
-    <div className="cm:min-h-screen cm:bg-slate-surface-white">
-      {/* Header */}
-      <header className="cm:border-b cm:border-slate-border-light cm:bg-white cm:px-12 cm:h-14 cm:flex cm:items-center cm:justify-between">
-        {/* Right: Search Bar */}
-
-        <div className="cm:flex cm:items-center cm:gap-3">
-          <div className="cm:text-label-medium cm:text-slate-text-title">
-            Customers
-          </div>
-          <Icon
-            name="customers"
-            size={16}
-            type="active"
-            color="#0F172A"
-          />
-        </div>
-
-        <div className="cm:w-[300px]" onClick={()=> setIsSearchDialogOpen(true)}>
-          <TextField
-            size="small"
-            onChange={()=>setIsSearchDialogOpen(true)}
-            placeholder="Search"
-            icon={searchIcon}
-            iconPosition="left"
-          />
-
-
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main>{children}</main>
-      <SearchDialog
-        open={isSearchDialogOpen}
-        onClose={() => setIsSearchDialogOpen(false)}
-      />
-    </div>
-  );
-};
-
-export default Layout;

package/src/components/Icon/index.tsx

@@ -1,93 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { IconProps } from './types';
-
-const icons = import.meta.glob('/src/assets/**/*.svg', {
-  query: '?raw',
-  import: 'default',
-});
-
-const strokeWidths: Record<string, string> = { '14': '1.1', '16': '1.3' };
-
-const Icon: React.FC<IconProps> = ({
-  name,
-  size = 16,
-  type = 'active',
-  folder = '',
-  disabled = false,
-  color,
-  fill,
-  className,
-  onClick,
-}) => {
-  const [svgContent, setSvgContent] = useState<string>('');
-
-  useEffect(() => {
-    const loadIcon = async () => {
-      try {
-        const basePath = folder
-          ? `/src/assets/${folder}/${name}.svg`
-          : `/src/assets/${name}.svg`;
-
-        const loader = icons[basePath];
-        if (!loader) {
-          console.error(`[Icon] Icon '${name}' not found at ${basePath}`);
-          return;
-        }
-
-        const raw = (await loader()) as string;
-        const sizeStr = String(size);
-        const stroke = color ?? `var(--p-slate-icons-${disabled ? 'disabled' : type})`;
-        const strokeWidth = strokeWidths[sizeStr] || '1.3';
-
-        let processed = raw
-          .replace(/stroke=".*?"/g, `stroke="${stroke}"`)
-          .replace(/stroke-width=".*?"/g, `stroke-width="${strokeWidth}"`)
-          .replace(/<svg([^>]*?)>/, (_, attrs: string) => {
-            let newAttrs = attrs;
-            
-            // Update or add width
-            if (/width=".*?"/.test(newAttrs)) {
-              newAttrs = newAttrs.replace(/width=".*?"/, `width="${sizeStr}"`);
-            } else {
-              newAttrs = `${newAttrs} width="${sizeStr}"`;
-            }
-            
-            // Update or add height
-            if (/height=".*?"/.test(newAttrs)) {
-              newAttrs = newAttrs.replace(/height=".*?"/, `height="${sizeStr}"`);
-            } else {
-              newAttrs = `${newAttrs} height="${sizeStr}"`;
-            }
-
-            return `<svg${newAttrs} style="max-width: ${sizeStr}px;">`;
-          });
-
-        // Handle fill for rect elements
-        if (fill) {
-          processed = processed.replace(/<rect([^>]*?)\/?>/g, (_match, rectAttrs: string) => {
-            if (/fill="/.test(rectAttrs)) {
-              return `<rect${rectAttrs.replace(/fill=".*?"/, `fill="${fill}"`)} />`;
-            }
-            return `<rect${rectAttrs} fill="${fill}" />`;
-          });
-        }
-
-        setSvgContent(processed);
-      } catch (error) {
-        console.error(`[Icon] Error loading icon '${name}':`, error);
-      }
-    };
-
-    loadIcon();
-  }, [name, size, type, disabled, color, fill, folder]);
-
-  return (
-    <span
-      className={`cm:flex cm:items-center cm:justify-center cm:w-max ${disabled ? 'cm:cursor-not-allowed' : 'cm:cursor-inherit'} ${className || ''}`}
-      onClick={onClick}
-      dangerouslySetInnerHTML={{ __html: svgContent }}
-    />
-  );
-};
-
-export default Icon;