react-restyle-components 0.4.11 → 0.4.13

package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.d.ts

@@ -36,6 +36,6 @@ export declare const AccordionDivider: import("styled-components/dist/types").IS
 }, never>> & string;
 export declare const RotatingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../Icon/Icon").IconProps, {
     $rotateIcon: boolean;
-}>> & string & Omit<({ nameIcon, ...props }: import("../../Icon/Icon").IconProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
+}>> & string & Omit<({ nameIcon, classNames, styles, ...props }: import("../../Icon/Icon").IconProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};
 //# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/AccordionSection/elements.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAUnE,eAAO,MAAM,gBAAgB;cACjB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;YAepD,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;aAC1C,OAAO;YAYjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;YAoCzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAUhC,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,aAAa;aACf,OAAO;yBACK,MAAM;+BACA,MAAM;YAQlC,CAAC;AAmBF,eAAO,MAAM,8BAA8B;aAChC,OAAO;yBACK,MAAM;+BACA,MAAM;YAWlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iQASnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;YAejC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;mBAE5B,CAAC;AAEF,eAAO,MAAM,YAAY;iBACV,OAAO;gJAMrB,CAAC"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/AccordionSection/elements.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,gBAAgB,EAA2B,MAAM,SAAS,CAAC;AAUnE,eAAO,MAAM,gBAAgB;cACjB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;YAepD,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;aAC1C,OAAO;YAYjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;YAoCzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAUhC,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,aAAa;aACf,OAAO;yBACK,MAAM;+BACA,MAAM;YAQlC,CAAC;AAmBF,eAAO,MAAM,8BAA8B;aAChC,OAAO;yBACK,MAAM;+BACA,MAAM;YAWlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iQASnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;YAejC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;mBAE5B,CAAC;AAEF,eAAO,MAAM,YAAY;iBACV,OAAO;oKAMrB,CAAC"}

package/lib/src/core-components/src/components/Accordion/collapsible/collapsible.component.d.ts

@@ -1,12 +1,32 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+export interface CollapsibleClassNames {
+    /** Custom className for the root container */
+    container?: string;
+    /** Custom className for the toggle button */
+    button?: string;
+    /** Custom className for the content area */
+    content?: string;
+}
+export interface CollapsibleStyles {
+    /** Custom style for the root container */
+    container?: CSSProperties;
+    /** Custom style for the toggle button */
+    button?: CSSProperties;
+    /** Custom style for the content area */
+    content?: CSSProperties;
+}
 interface CollapsibleProps {
     label: string;
     labelClassName?: string;
     className?: string;
+    /** Custom classNames for component parts */
+    classNames?: CollapsibleClassNames;
+    /** Custom inline styles for component parts */
+    styles?: CollapsibleStyles;
     onExpand?: (label: string) => void;
     onCollapse?: (label: string) => void;
     children: React.ReactNode;
 }
-export declare const Collapsible: ({ label, labelClassName, className, onExpand, onCollapse, children, }: CollapsibleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsible: ({ label, labelClassName, className, classNames, styles, onExpand, onCollapse, children, }: CollapsibleProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=collapsible.component.d.ts.map

package/lib/src/core-components/src/components/Accordion/collapsible/collapsible.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/collapsible/collapsible.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,WAAW,0EAOrB,gBAAgB,4CAkDlB,CAAC"}
+{"version":3,"file":"collapsible.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Accordion/collapsible/collapsible.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,aAAa,EAAC,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,qBAAqB;IACpC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yCAAyC;IACzC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wCAAwC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,WAAW,8FASrB,gBAAgB,4CAsDlB,CAAC"}

package/lib/src/core-components/src/components/Accordion/collapsible/collapsible.component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const Collapsible = ({ label, labelClassName, className, onExpand, onCollapse, children, }) => {
+export const Collapsible = ({ label, labelClassName, className, classNames = {}, styles = {}, onExpand, onCollapse, children, }) => {
     const [open, setOPen] = useState(false);
     const toggle = () => {
         if (open) {
@@ -13,5 +13,5 @@ export const Collapsible = ({ label, labelClassName, className, onExpand, onColl
         }
         setOPen(!open);
     };
-    return (_jsxs("div", { className: cn(s.flx, s['flx-col'], s['w-full']), children: [_jsx("button", { className: cn(s.flx, s['items-center'], s['w-full'], s['p-1'], s['my-1'], s['text-base'], s['text-left'], s['bg-gray-200'], s['border-0'], s['transition'], s['focus:outline-none'], s['rounded-sm'], s['rounded-b-none'], labelClassName), type: "button", onClick: toggle, children: label?.toUpperCase() }), open && (_jsx("div", { className: cn(s['p-2'], s['bg-gray-200'], s['-my-2'], s['mb-1'], className), children: children }))] }));
+    return (_jsxs("div", { className: cn(s.flx, s['flx-col'], s['w-full'], classNames.container), style: styles.container, children: [_jsx("button", { className: cn(s.flx, s['items-center'], s['w-full'], s['p-1'], s['my-1'], s['text-base'], s['text-left'], s['bg-gray-200'], s['border-0'], s['transition'], s['focus:outline-none'], s['rounded-sm'], s['rounded-b-none'], labelClassName, classNames.button), style: styles.button, type: "button", onClick: toggle, children: label?.toUpperCase() }), open && (_jsx("div", { className: cn(s['p-2'], s['bg-gray-200'], s['-my-2'], s['mb-1'], className, classNames.content), style: styles.content, children: children }))] }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts

@@ -1,3 +1,56 @@
+import { CSSProperties } from 'react';
+export interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayClassNames {
+    /** Custom className for the root container */
+    container?: string;
+    /** Custom className for the input wrapper (contains input + icon) */
+    inputWrapper?: string;
+    /** Custom className for the input field */
+    input?: string;
+    /** Custom className for the dropdown container */
+    dropdown?: string;
+    /** Custom className for the dropdown list (ul element) */
+    list?: string;
+    /** Custom className for each list item (li element) */
+    listItem?: string;
+    /** Custom className for the label wrapper */
+    label?: string;
+    /** Custom className for the checkbox */
+    checkbox?: string;
+    /** Custom className for the item text/span */
+    itemText?: string;
+    /** Custom className for the empty state container */
+    emptyState?: string;
+    /** Custom className for the empty state text */
+    emptyStateText?: string;
+    /** Custom className for the chevron icon */
+    icon?: string;
+}
+export interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayStyles {
+    /** Custom style for the root container */
+    container?: CSSProperties;
+    /** Custom style for the input wrapper (contains input + icon) */
+    inputWrapper?: CSSProperties;
+    /** Custom style for the input field */
+    input?: CSSProperties;
+    /** Custom style for the dropdown container */
+    dropdown?: CSSProperties;
+    /** Custom style for the dropdown list (ul element) */
+    list?: CSSProperties;
+    /** Custom style for each list item (li element) */
+    listItem?: CSSProperties;
+    /** Custom style for the label wrapper */
+    label?: CSSProperties;
+    /** Custom style for the checkbox */
+    checkbox?: CSSProperties;
+    /** Custom style for the item text/span */
+    itemText?: CSSProperties;
+    /** Custom style for the empty state container */
+    emptyState?: CSSProperties;
+    /** Custom style for the empty state text */
+    emptyStateText?: CSSProperties;
+    /** Custom style for the chevron icon wrapper */
+    icon?: CSSProperties;
+}
 export interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
     uniqueField?: string;
     isSelectedStringArray?: boolean;
@@ -8,10 +61,14 @@ export interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
     disable?: boolean;
     isUpperCase?: boolean;
     name?: string;
+    /** Custom classNames for component parts */
+    classNames?: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayClassNames;
+    /** Custom inline styles for component parts */
+    styles?: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayStyles;
     onFilter?: (value: string) => void;
     onUpdate: (item: any) => void;
     onSelect: (item: any) => any;
     onBlur?: (e: any) => void;
 }
-export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, classNames, styles, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts.map

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,0DAA0D;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,qDAAqD,mJAc/D,0DAA0D,4CAuM5D,CAAC"}
+{"version":3,"file":"auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AACA,OAAc,EAA8B,aAAa,EAAC,MAAM,OAAO,CAAC;AAMxE,MAAM,WAAW,+DAA+D;IAC9E,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,2DAA2D;IAC1E,0CAA0C;IAC1C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,iEAAiE;IACjE,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uCAAuC;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,sDAAsD;IACtD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,yCAAyC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,iDAAiD;IACjD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,gDAAgD;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,0DAA0D;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,UAAU,CAAC,EAAE,+DAA+D,CAAC;IAC7E,+CAA+C;IAC/C,MAAM,CAAC,EAAE,2DAA2D,CAAC;IACrE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,qDAAqD,uKAgB/D,0DAA0D,4CAoP5D,CAAC"}

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js

@@ -5,7 +5,7 @@ import { Icon } from '../../Icon/Icon';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
 import { debounce } from '@techabl/core-utils';
-export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, }) => {
+export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, classNames = {}, styles = {}, onFilter, onUpdate, onSelect, onBlur, }) => {
     const [value, setValue] = useState('');
     const [options, setOptions] = useState();
     const [originalOptions, setOriginalOptions] = useState();
@@ -77,22 +77,22 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
             });
         }
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], classNames.container), style: styles.container, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
                         [s['border-red']]: hasError,
                         [s['border-gray-300']]: !hasError,
-                    }), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
+                    }, classNames.inputWrapper), style: styles.inputWrapper, children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
                                 ? data?.selected?.length > 0
                                     ? `${(data.selected && data.selected.length) || 0} Items`
                                     : value
                                 : isUpperCase
                                     ? value?.toUpperCase()
-                                    : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                                size: 16,
-                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                                color: '#000000',
-                                size: 16,
-                            } }))] }), options && isListOpen ? (options?.length > 0 ? (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['rounded-sm'], s['bg-gray-200'], s['z-500'], s['p-2'], s['w-full']), style: { zIndex: 80 }, children: _jsx("ul", { children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-1']), children: _jsxs("label", { className: cn(s['flex'], s['items-center']), children: [_jsx("input", { id: index?.toString(), className: cn(s['flex'], s['h-4'], s['w-4']), type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }), ' ', _jsx("span", { className: cn(s['flex'], s['ml-2']), children: data.displayKey
-                                                .map((key) => `${item[key]}
+                                    : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], classNames.input), style: styles.input, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }), _jsx("span", { className: classNames.icon, style: styles.icon, children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                    size: 16,
+                                } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                    color: '#000000',
+                                    size: 16,
+                                } })) })] }), options && isListOpen ? (options?.length > 0 ? (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['rounded-sm'], s['bg-gray-200'], s['z-500'], s['p-2'], s['w-full'], classNames.dropdown), style: { zIndex: 80, ...styles.dropdown }, children: _jsx("ul", { className: classNames.list, style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-1'], classNames.listItem), style: styles.listItem, children: _jsxs("label", { className: cn(s['flex'], s['items-center'], classNames.label), style: styles.label, children: [_jsx("input", { id: index?.toString(), className: cn(s['flex'], s['h-4'], s['w-4'], classNames.checkbox), style: styles.checkbox, type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }), ' ', _jsx("span", { className: cn(s['flex'], s['ml-2'], classNames.itemText), style: styles.itemText, children: data.displayKey
+                                            .map((key) => `${item[key]}
                               `)
-                                                .join(' - ') })] }) }, index) }))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-200'], s['p-2'], s['rounded-sm']), style: { zIndex: 80, width: '100%' }, children: _jsx("span", { children: "Not Found Result!!" }) }))) : null] }) }));
+                                            .join(' - ') })] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-200'], s['p-2'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx("span", { className: classNames.emptyStateText, style: styles.emptyStateText, children: "Not Found Result!!" }) }))) : null] }) }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.d.ts

@@ -1,3 +1,26 @@
+import { CSSProperties } from 'react';
+export interface AutoCompleteFilterSingleSelectClassNames {
+    container?: string;
+    inputWrapper?: string;
+    input?: string;
+    icon?: string;
+    dropdown?: string;
+    list?: string;
+    listItem?: string;
+    itemLabel?: string;
+    emptyState?: string;
+}
+export interface AutoCompleteFilterSingleSelectStyles {
+    container?: CSSProperties;
+    inputWrapper?: CSSProperties;
+    input?: CSSProperties;
+    icon?: CSSProperties;
+    dropdown?: CSSProperties;
+    list?: CSSProperties;
+    listItem?: CSSProperties;
+    itemLabel?: CSSProperties;
+    emptyState?: CSSProperties;
+}
 interface AutoCompleteFilterSingleSelectProps {
     loader?: boolean;
     disable?: boolean;
@@ -5,9 +28,11 @@ interface AutoCompleteFilterSingleSelectProps {
     placeholder?: string;
     data: any;
     hasError?: boolean;
+    classNames?: AutoCompleteFilterSingleSelectClassNames;
+    styles?: AutoCompleteFilterSingleSelectStyles;
     onFilter: (item: any) => void;
     onSelect: (item: any) => any;
 }
-export declare const AutoCompleteFilterSingleSelect: ({ disable, loader, displayValue, placeholder, data, hasError, onFilter, onSelect, }: AutoCompleteFilterSingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterSingleSelect: ({ disable, loader, displayValue, placeholder, data, hasError, classNames, styles, onFilter, onSelect, }: AutoCompleteFilterSingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=auto-complete-filter-single-select.component.d.ts.map

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-complete-filter-single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.tsx"],"names":[],"mappings":"AAOA,UAAU,mCAAmC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,8BAA8B,wFASxC,mCAAmC,4CAkJrC,CAAC"}
+{"version":3,"file":"auto-complete-filter-single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.tsx"],"names":[],"mappings":"AACA,OAAc,EAA8B,aAAa,EAAC,MAAM,OAAO,CAAC;AAMxE,MAAM,WAAW,wCAAwC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oCAAoC;IACnD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,UAAU,mCAAmC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,wCAAwC,CAAC;IACtD,MAAM,CAAC,EAAE,oCAAoC,CAAC;IAC9C,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,8BAA8B,4GAWxC,mCAAmC,4CA0JrC,CAAC"}

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js

@@ -5,7 +5,7 @@ import { Icon } from '../../Icon/Icon';
 import { debounce } from '@techabl/core-utils';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, onFilter, onSelect, }) => {
+export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, classNames = {}, styles = {}, onFilter, onSelect, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState();
     const [isListOpen, setIsListOpen] = useState(false);
@@ -40,16 +40,16 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
             onFilter(search);
         });
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], classNames.container), style: styles.container, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
                         [s['border-red']]: hasError,
                         [s['border-gray-300']]: !hasError,
-                    }), children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onChange: handleInputChange, onClick: () => setIsListOpen(true), disabled: disable }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                                size: 16,
-                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                                size: 16,
-                            } }))] }), options && isListOpen ? (options.length > 0 ? (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['z-50']), style: { zIndex: 80, width: '100%' }, children: _jsx("ul", { children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
-                                    setValue(item[data.displayKey]);
-                                    setIsListOpen(false);
-                                    onSelect(item);
-                                }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), children: item[data.displayKey] }) }, index) }))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm']), style: { zIndex: 80, width: '100%' }, children: _jsx("span", { children: "Not Found Result!!" }) }))) : null] }) }));
+                    }, classNames.inputWrapper), style: styles.inputWrapper, children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], classNames.input), style: styles.input, onChange: handleInputChange, onClick: () => setIsListOpen(true), disabled: disable }), _jsx("span", { className: classNames.icon, style: styles.icon, children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                    size: 16,
+                                } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                    size: 16,
+                                } })) })] }), options && isListOpen ? (options.length > 0 ? (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['z-50'], classNames.dropdown), style: { zIndex: 80, width: '100%', ...styles.dropdown }, children: _jsx("ul", { className: classNames.list, style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center'], classNames.listItem), style: styles.listItem, onClick: () => {
+                                setValue(item[data.displayKey]);
+                                setIsListOpen(false);
+                                onSelect(item);
+                            }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black'], classNames.itemLabel), style: styles.itemLabel, children: item[data.displayKey] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx("span", { children: "Not Found Result!!" }) }))) : null] }) }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts

@@ -1,3 +1,28 @@
+import { CSSProperties } from 'react';
+export interface AutoCompleteFilterSingleSelectMultiFieldsDisplayClassNames {
+    container?: string;
+    inputWrapper?: string;
+    input?: string;
+    icon?: string;
+    dropdown?: string;
+    list?: string;
+    listItem?: string;
+    itemLabel?: string;
+    emptyState?: string;
+    loadingContainer?: string;
+}
+export interface AutoCompleteFilterSingleSelectMultiFieldsDisplayStyles {
+    container?: CSSProperties;
+    inputWrapper?: CSSProperties;
+    input?: CSSProperties;
+    icon?: CSSProperties;
+    dropdown?: CSSProperties;
+    list?: CSSProperties;
+    listItem?: CSSProperties;
+    itemLabel?: CSSProperties;
+    emptyState?: CSSProperties;
+    loadingContainer?: CSSProperties;
+}
 interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     loader?: boolean;
     disable?: boolean;
@@ -8,10 +33,12 @@ interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     className?: string;
     posstion?: string;
     keyboard?: string;
+    classNames?: AutoCompleteFilterSingleSelectMultiFieldsDisplayClassNames;
+    styles?: AutoCompleteFilterSingleSelectMultiFieldsDisplayStyles;
     onFilter?: (item: any) => void;
     onSelect?: (item: any) => any;
     onBlur?: (item: any) => any;
 }
-export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, keyboard, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, keyboard, classNames: customClassNames, styles: customStyles, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAsIA,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,4CAsWvD,CAAC"}
+{"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAsIA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,0DAA0D;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,sDAAsD;IACrE,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gBAAgB,CAAC,EAAE,aAAa,CAAC;CAClC;AAED,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,0DAA0D,CAAC;IACxE,MAAM,CAAC,EAAE,sDAAsD,CAAC;IAChE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,mLAe1D,qDAAqD,4CA4WvD,CAAC"}

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js

@@ -112,7 +112,7 @@ const SkeletonItem = ({ delay = 0 }) => (_jsxs("div", { style: {
             } })] }));
 // Loading spinner component
 const LoadingSpinner = () => (_jsx("div", { style: animationStyles.spinner, role: "status", "aria-label": "Loading" }));
-export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', onFilter, onSelect, onBlur, }) => {
+export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', classNames: customClassNames = {}, styles: customStyles = {}, onFilter, onSelect, onBlur, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState(data.list);
     const [isListOpen, setIsListOpen] = useState(false);
@@ -258,13 +258,14 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
     }, [data.displayKey, onSelect, handleCloseDropdown]);
     // Show loading state
     const isLoading = loader || isFiltering;
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], s['transition-all'], s['duration-200'], {
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], customClassNames.container), style: customStyles.container, children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], s['transition-all'], s['duration-200'], {
                         [s['border-red']]: hasError,
                         [s['border-gray-300']]: !hasError,
                         [s['dark:text-black']]: true,
-                    }), style: {
+                    }, customClassNames.inputWrapper), style: {
                         transition: 'border-color 200ms ease, box-shadow 200ms ease',
-                    }, children: [_jsx("input", { ref: inputRef, placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className), onKeyUp: onKeyUp, onChange: onChange, onClick: handleOpenDropdown, disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), _jsxs("div", { style: {
+                        ...customStyles.inputWrapper,
+                    }, children: [_jsx("input", { ref: inputRef, placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className, customClassNames.input), style: customStyles.input, onKeyUp: onKeyUp, onChange: onChange, onClick: handleOpenDropdown, disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), _jsxs("div", { style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: '8px',
@@ -273,7 +274,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
                                         transform: isListOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                                     }, children: _jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
                                             size: 16,
-                                        } }) })] })] }), isListOpen && (_jsx("div", { className: cn(s['absolute'], s['w-full'], s['bg-white'], s['rounded-md'], s['shadow-lg'], s['overflow-hidden']), style: {
+                                        } }) })] })] }), isListOpen && (_jsx("div", { className: cn(s['absolute'], s['w-full'], s['bg-white'], s['rounded-md'], s['shadow-lg'], s['overflow-hidden'], customClassNames.dropdown), style: {
                         ...animationStyles.dropdown.base,
                         ...(showDropdown
                             ? animationStyles.dropdown.entering
@@ -281,6 +282,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
                         zIndex: 500,
                         marginTop: '4px',
                         border: '1px solid #e5e7eb',
+                        ...customStyles.dropdown,
                     }, children: _jsx("div", { className: cn(s['overflow-y-auto'], s['p-1']), style: {
                             maxHeight: `${calculateMaxHeight()}px`,
                             ...animationStyles.fadeContent.base,

package/lib/src/core-components/src/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 declare const sizeMap: {
     readonly sm: "2rem";
     readonly md: "2.5rem";
@@ -7,6 +7,26 @@ declare const sizeMap: {
     readonly xxl: "5rem";
 };
 export type AvatarSize = keyof typeof sizeMap;
+export interface AvatarClassNames {
+    /** Custom className for the container */
+    container?: string;
+    /** Custom className for the image */
+    image?: string;
+    /** Custom className for the initials text */
+    initials?: string;
+    /** Custom className for the icon wrapper */
+    iconWrapper?: string;
+}
+export interface AvatarStyles {
+    /** Custom style for the container */
+    container?: CSSProperties;
+    /** Custom style for the image */
+    image?: CSSProperties;
+    /** Custom style for the initials text */
+    initials?: CSSProperties;
+    /** Custom style for the icon wrapper */
+    iconWrapper?: CSSProperties;
+}
 export interface AvatarProps {
     /** Full name to extract initials from */
     name?: string;
@@ -26,6 +46,10 @@ export interface AvatarProps {
     iconName?: string;
     /** Custom className */
     className?: string;
+    /** Custom classNames for component parts */
+    classNames?: AvatarClassNames;
+    /** Custom inline styles for component parts */
+    styles?: AvatarStyles;
     /** Click handler */
     onClick?: () => void;
 }

package/lib/src/core-components/src/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,OAAO;;;;;;CAMH,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAE9C,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA8JD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2ExC,CAAC;AAGF,eAAO,MAAM,YAAY,uCAAuC,CAAC;AAGjE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAK3C,QAAA,MAAM,OAAO;;;;;;CAMH,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA8JD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgFxC,CAAC;AAGF,eAAO,MAAM,YAAY,uCAAuC,CAAC;AAGjE,eAAe,MAAM,CAAC"}

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

@@ -147,7 +147,7 @@ const getContrastColor = (backgroundColor) => {
     return darkColors.includes(backgroundColor) ? '#ffffff' : '#ffffff';
 };
 // Main Avatar component
-export const Avatar = ({ name = '', initials, src, alt, size = 'md', backgroundColor, textColor, iconName = 'FaUser', className, onClick, }) => {
+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 ||
@@ -155,14 +155,14 @@ export const Avatar = ({ name = '', initials, src, alt, size = 'md', backgroundC
     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, onClick: onClick, title: name || alt, children: _jsx(AvatarImage, { src: src, alt: alt || name || 'Avatar' }) }));
+        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, onClick: onClick, title: name || `${displayInitials} Avatar`, children: _jsx(InitialsText, { "$size": size, children: 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, onClick: onClick, title: "User Avatar", children: _jsx(IconWrapper, { "$size": size, children: _jsx(Icon, { nameIcon: iconName, propsIcon: {
+    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%',
                 } }) }) }));

package/lib/src/core-components/src/components/Badge/Badge.d.ts

@@ -1,9 +1,23 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { BadgeProps } from './types';
-export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export interface BadgeClassNames {
+    /** Custom className for the badge container */
+    container?: string;
+}
+export interface BadgeStyles {
+    /** Custom style for the badge container */
+    container?: CSSProperties;
+}
+export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps & {
+    classNames?: BadgeClassNames | undefined;
+    styles?: BadgeStyles | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }> & {
-    readonly type: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+    readonly type: React.ForwardRefExoticComponent<BadgeProps & {
+        classNames?: BadgeClassNames | undefined;
+        styles?: BadgeStyles | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
 } & {
     Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
         children?: React.ReactNode;

package/lib/src/core-components/src/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAqDnC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEhB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,aAAa,EAAC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAKnC,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;AAoDD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEhB,CAAC"}

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

@@ -9,7 +9,7 @@ const BadgeContainer = styled.div `
   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, ...props }, ref) => {
+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)
@@ -20,7 +20,7 @@ const BadgeComponent = React.forwardRef(({ size = 'hint', overlap = 'circular',
             return `${count} notifications`;
         return undefined;
     }, [ariaLabel, count]);
-    return (_jsxs(BadgeContainer, { ref: ref, "data-aui": "badge", ...props, children: [_jsx(InnerBadge, { position: position, size: size, overlap: overlap, variant: variant, iconSrc: iconSrc, count: count, "aria-label": badgeAriaLabel }), children] }));
+    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), {

package/lib/src/core-components/src/components/Button1/button.component.d.ts

@@ -1,4 +1,15 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { ButtonProps } from './types';
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export interface ButtonClassNames {
+    /** Custom className for the button element */
+    button?: string;
+}
+export interface ButtonStyles {
+    /** Custom style for the button element */
+    button?: CSSProperties;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    classNames?: ButtonClassNames | undefined;
+    styles?: ButtonStyles | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=button.component.d.ts.map

package/lib/src/core-components/src/components/Button1/button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Button1/button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAKpC,eAAO,MAAM,MAAM,uIA0DlB,CAAC"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Button1/button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAKpC,MAAM,WAAW,gBAAgB;IAC/B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,eAAO,MAAM,MAAM;;;2CAiElB,CAAC"}

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

@@ -3,11 +3,11 @@ import { forwardRef } from 'react';
 import { Tooltip } from '../Tooltip/tooltip.component';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
-export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, children, ...args }, ref) => {
+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), type: type, disabled: disabled, children: children }));
+    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 });
     }