react-restyle-components 0.4.12 → 0.4.14

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;YAkBpD,CAAC;AAEF,eAAO,MAAM,uBAAuB;cACxB,gBAAgB,GAAG,QAAQ,GAAG,WAAW;aAC1C,OAAO;YAoBjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;YAiDzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAchC,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;YAelC,CAAC;AAmBF,eAAO,MAAM,8BAA8B;aAChC,OAAO;yBACK,MAAM;+BACA,MAAM;YAqBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iQAWnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;YAejC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;mBAI5B,CAAC;AAEF,eAAO,MAAM,YAAY;iBACV,OAAO;oKAWrB,CAAC"}

package/lib/src/core-components/src/components/Accordion/AccordionSection/elements.js

@@ -10,13 +10,16 @@ const Divider = styled.hr `
 `;
 export const AccordionElement = styled.div `
   display: flex;
-  justify-content: space-evenly;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: stretch;
   flex-direction: column;
+  gap: ${tokens.spacing050};
   ${({ $variant }) => $variant === 'inline' &&
     css `
       border: 1px solid ${tokens.outline};
       border-radius: ${tokens.borderRadius100};
+      padding: ${tokens.spacing100};
+      background: ${tokens.surface || '#ffffff'};
     `};
   overflow: hidden;
   width: 100%;
@@ -26,8 +29,16 @@ export const AccordionSectionWrapper = styled.div `
   overflow: hidden;
   width: 100%;
   isolation: isolate;
-  ${({ $variant }) => $variant === 'inline' &&
+  transition: all 0.3s ease;
+
+  ${({ $variant, $isOpen }) => $variant === 'inline' &&
     css `
+      border-radius: ${tokens.borderRadius100};
+      margin-bottom: ${$isOpen ? tokens.spacing100 : '0'};
+      box-shadow: ${$isOpen
+        ? '0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1)'
+        : 'none'};
+
       &:last-child ${AccordionDivider} {
         display: none;
       }
@@ -42,32 +53,44 @@ export const ButtonElement = styled.button `
   cursor: pointer;
   width: 100%;
 
-  background-color: ${tokens.darkGray || '#4a4a4a'} !important;
+  background: ${({ $isOpen }) => $isOpen
+    ? `linear-gradient(135deg, ${tokens.darkGray || '#4a4a4a'} 0%, #3a3a3a 100%)`
+    : tokens.darkGray || '#4a4a4a'} !important;
   color: ${tokens.white || '#ffffff'} !important;
 
   display: flex;
   gap: ${tokens.spacing100};
   align-items: center;
-  padding-top: ${tokens.spacing200};
-  padding-right: ${tokens.spacing200};
-  padding-bottom: ${tokens.spacing200};
-  padding-left: ${tokens.spacing200};
+  padding: ${tokens.spacing200} ${tokens.spacing200};
 
-  ${({ $variant }) => $variant === 'inline' &&
+  transition: all 0.25s ease;
+
+  ${({ $variant, $isOpen }) => $variant === 'inline' &&
     css `
-      border-radius: ${tokens.borderRadius100};
+      border-radius: ${$isOpen
+        ? `${tokens.borderRadius100} ${tokens.borderRadius100} 0 0`
+        : tokens.borderRadius100};
     `}
 
-  &:hover:not(:disabled) ${StateLayer} {
-    opacity: ${tokens.stateLayerHover};
+  &:hover:not(:disabled) {
+    background: linear-gradient(135deg, #555555 0%, #3f3f3f 100%) !important;
+
+    ${StateLayer} {
+      opacity: ${tokens.stateLayerHover};
+    }
   }
 
   &:active:not(:disabled) ${StateLayer} {
     opacity: ${tokens.stateLayerPress};
   }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.primary || '#454cbf'};
+    outline-offset: 2px;
+  }
 `;
 export const AccordionSectionText = styled.div `
-  line-height: 1.3;
+  line-height: 1.4;
   flex-grow: 1;
   padding-right: ${tokens.spacing100};
   position: relative;
@@ -76,14 +99,25 @@ export const AccordionSectionText = styled.div `
   flex-direction: column;
   gap: ${tokens.spacing050};
   color: ${tokens.white};
+
+  /* Better text rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 `;
 export const AccordionFade = styled.div `
   z-index: 0;
   position: relative;
-  background: linear-gradient(to bottom, transparent, ${tokens.surface});
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    ${tokens.surface || '#ffffff'}
+  );
   width: 100%;
-  height: ${tokens.spacing150};
-  margin-top: calc(${tokens.spacing150} * -1);
+  height: ${tokens.spacing200};
+  margin-top: calc(${tokens.spacing200} * -1);
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  transition: opacity ${({ $transitionDuration }) => $transitionDuration} ease;
+  pointer-events: none;
 `;
 const getTransitionTimingFunction = (transitionTimingFunction, isOpen) => {
     if (transitionTimingFunction !== 'ease-in' &&
@@ -101,13 +135,23 @@ export const AccordionSectionContentWrapper = styled.div `
   display: grid;
   grid-template-rows: ${({ $isOpen }) => ($isOpen ? '1fr' : '0fr')};
   transition: ${({ $transitionDuration, $transitionTimingFunction, $isOpen }) => `grid-template-rows ${$transitionDuration} ${getTransitionTimingFunction($transitionTimingFunction, $isOpen)}`};
+  background: ${({ $isOpen }) => $isOpen
+    ? `linear-gradient(180deg, rgba(74, 74, 74, 0.05) 0%, transparent 100%)`
+    : 'transparent'};
+  border-left: ${({ $isOpen }) => $isOpen
+    ? `3px solid ${tokens.primary || '#454cbf'}`
+    : '3px solid transparent'};
+  margin-left: ${({ $isOpen }) => ($isOpen ? tokens.spacing100 : '0')};
+  transition: all 0.3s ease;
 `;
 export const AccordionSectionContent = styled.div `
   overflow-y: hidden;
-  transition: ${({ $transitionDuration }) => `opacity ${$transitionDuration} linear`};
-  line-height: 1.3;
+  transition: ${({ $transitionDuration }) => `opacity ${$transitionDuration} linear, transform ${$transitionDuration} ease`};
+  line-height: 1.6;
   opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
-  padding-right: ${tokens.spacing150};
+  transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : 'translateY(-8px)')};
+  padding-top: ${({ $isOpen }) => ($isOpen ? tokens.spacing150 : '0')};
+  padding-right: ${tokens.spacing200};
   padding-left: ${({ $hasLeader }) => $hasLeader ? tokens.spacing600 : tokens.spacing200};
 `;
 export const StyledLeadingTrailing = styled.div `
@@ -125,10 +169,17 @@ export const StyledLeadingTrailing = styled.div `
 `;
 export const AccordionDivider = styled(Divider) `
   border-color: ${tokens.outline};
+  opacity: 0.5;
+  margin: ${tokens.spacing025} 0;
 `;
 export const RotatingIcon = styled(Icon.SSR) `
   overflow: hidden;
   flex-shrink: 0;
-  transition: transform 0.4s ease-in-out;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform: ${({ $rotateIcon }) => `rotate(${$rotateIcon ? -180 : 0}deg)`};
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
 `;

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"}