react-restyle-components 0.4.12 → 0.4.14

package/lib/src/core-components/src/components/Modal/index.d.ts

@@ -1,3 +1,4 @@
 export * from './BasicModal/modal.component';
 export * from './modal-confirm/modal-confirm.component';
+export * from './ModalDocxContent/modal-docx-content.component';
 //# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yCAAyC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yCAAyC,CAAC;AACxD,cAAc,iDAAiD,CAAC"}

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

@@ -1,2 +1,3 @@
 export * from './BasicModal/modal.component';
 export * from './modal-confirm/modal-confirm.component';
+export * from './ModalDocxContent/modal-docx-content.component';

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.d.ts

@@ -1,4 +1,52 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+export interface ModalConfirmClassNames {
+    /** Custom className for the overlay */
+    overlay?: string;
+    /** Custom className for the container */
+    container?: string;
+    /** Custom className for the modal wrapper */
+    wrapper?: string;
+    /** Custom className for the content */
+    content?: string;
+    /** Custom className for the header */
+    header?: string;
+    /** Custom className for the title */
+    title?: string;
+    /** Custom className for the close button */
+    closeButton?: string;
+    /** Custom className for the body */
+    body?: string;
+    /** Custom className for the footer */
+    footer?: string;
+    /** Custom className for the cancel button */
+    cancelButton?: string;
+    /** Custom className for the submit button */
+    submitButton?: string;
+}
+export interface ModalConfirmStyles {
+    /** Custom style for the overlay */
+    overlay?: CSSProperties;
+    /** Custom style for the container */
+    container?: CSSProperties;
+    /** Custom style for the modal wrapper */
+    wrapper?: CSSProperties;
+    /** Custom style for the content */
+    content?: CSSProperties;
+    /** Custom style for the header */
+    header?: CSSProperties;
+    /** Custom style for the title */
+    title?: CSSProperties;
+    /** Custom style for the close button */
+    closeButton?: CSSProperties;
+    /** Custom style for the body */
+    body?: CSSProperties;
+    /** Custom style for the footer */
+    footer?: CSSProperties;
+    /** Custom style for the cancel button */
+    cancelButton?: CSSProperties;
+    /** Custom style for the submit button */
+    submitButton?: CSSProperties;
+}
 export interface ModalConfirmProps {
     visible: boolean;
     title?: string;
@@ -7,8 +55,12 @@ export interface ModalConfirmProps {
     closeTitle?: string;
     isClick?: boolean;
     isClose?: boolean;
+    /** Custom classNames for component parts */
+    classNames?: ModalConfirmClassNames;
+    /** Custom inline styles for component parts */
+    styles?: ModalConfirmStyles;
     onClick: () => void;
     onClose: () => void;
 }
-export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, isClick, isClose, onClick, onClose, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, isClick, isClose, classNames, styles, onClick, onClose, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=modal-confirm.component.d.ts.map

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,8FAUtB,iBAAiB,4CA0LnB,CAAC"}
+{"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsB,aAAa,EAAC,MAAM,OAAO,CAAC;AAMhE,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yCAAyC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kCAAkC;IAClC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,yCAAyC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,yCAAyC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,kHAYtB,iBAAiB,4CAwMnB,CAAC"}

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.js

@@ -3,19 +3,19 @@ import { useEffect, useState } from 'react';
 import { Container } from 'reactstrap';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const ModalConfirm = ({ visible = false, title = 'Confirm', message, submitTitle = 'Send', closeTitle = 'Close', isClick = true, isClose = true, onClick, onClose, }) => {
+export const ModalConfirm = ({ visible = false, title = 'Confirm', message, submitTitle = 'Send', closeTitle = 'Close', isClick = true, isClose = true, classNames = {}, styles = {}, onClick, onClose, }) => {
     const [showModal, setShowModal] = useState(visible);
     useEffect(() => {
         setShowModal(visible);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible]);
-    return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none']), children: _jsx("div", { className: cn(s['relative'], s['my-6'], s['mx-auto']), children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-fit'], s['min-w-80'], s['bg-white'], s['outline-none'], s['focus:outline-none']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-2'], s['border-b'], s['border-solid'], s['border-gray-300'], s['rounded-t']), children: [_jsx("h3", { className: cn(s['text-2xl'], s['font-semibold']), children: title }), _jsx("button", { className: cn(s['p-1'], s['border-0'], s['text-black'], s['opacity-1'], s['ml-6'], s['float-right'], s['text-3xl'], s['leading-none'], s['font-semibold'], s['outline-none'], s['focus:outline-none']), onClick: () => {
+    return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], classNames.container), style: styles.container, children: _jsx("div", { className: cn(s['relative'], s['my-6'], s['mx-auto'], classNames.wrapper), style: styles.wrapper, children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-fit'], s['min-w-80'], s['bg-white'], s['outline-none'], s['focus:outline-none'], classNames.content), style: styles.content, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-2'], s['border-b'], s['border-solid'], s['border-gray-300'], s['rounded-t'], classNames.header), style: styles.header, children: [_jsx("h3", { className: cn(s['text-2xl'], s['font-semibold'], classNames.title), style: styles.title, children: title }), _jsx("button", { className: cn(s['p-1'], s['border-0'], s['text-black'], s['opacity-1'], s['ml-6'], s['float-right'], s['text-3xl'], s['leading-none'], s['font-semibold'], s['outline-none'], s['focus:outline-none'], classNames.closeButton), style: styles.closeButton, onClick: () => {
                                                     setShowModal(false);
                                                     onClose && onClose();
-                                                }, children: _jsx("span", { className: cn(s['text-black'], s['h-6'], s['w-6'], s['text-2xl'], s['block'], s['outline-none'], s['focus:outline-none']), children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-2']), children: _jsx("div", { className: cn(s['flex']), children: typeof message === 'string' ? (_jsx("span", { className: cn(s['text-md']), children: message })) : (message) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-2'], s['border-t'], s['border-solid'], s['border-gray-300'], s['rounded-b']), children: [isClose && (_jsx("button", { className: cn(s['text-red-500'], s['background-transparent'], s['font-bold'], s['uppercase'], s['p-2'], s['text-sm'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                                }, children: _jsx("span", { className: cn(s['text-black'], s['h-6'], s['w-6'], s['text-2xl'], s['block'], s['outline-none'], s['focus:outline-none']), children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-2'], classNames.body), style: styles.body, children: _jsx("div", { className: cn(s['flex']), children: typeof message === 'string' ? (_jsx("span", { className: cn(s['text-md']), children: message })) : (message) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-2'], s['border-t'], s['border-solid'], s['border-gray-300'], s['rounded-b'], classNames.footer), style: styles.footer, children: [isClose && (_jsx("button", { className: cn(s['text-red-500'], s['background-transparent'], s['font-bold'], s['uppercase'], s['p-2'], s['text-sm'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1'], classNames.cancelButton), type: "button", style: { transition: 'all .15s ease', ...styles.cancelButton }, onClick: () => {
                                                     setShowModal(false);
                                                     onClose && onClose();
-                                                }, children: closeTitle })), isClick && (_jsx("button", { className: cn(s['bg-green-500'], s['text-white'], s['active:bg-green-600'], s['font-bold'], s['uppercase'], s['text-sm'], s['p-2'], s['rounded'], s['shadow'], s['hover:shadow-lg'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                                }, children: closeTitle })), isClick && (_jsx("button", { className: cn(s['bg-green-500'], s['text-white'], s['active:bg-green-600'], s['font-bold'], s['uppercase'], s['text-sm'], s['p-2'], s['rounded'], s['shadow'], s['hover:shadow-lg'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1'], classNames.submitButton), type: "button", style: { transition: 'all .15s ease', ...styles.submitButton }, onClick: () => {
                                                     onClick();
-                                                }, children: submitTitle }))] })] }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black']) })] })) }) }));
+                                                }, children: submitTitle }))] })] }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: styles.overlay })] })) }) }));
 };

package/lib/src/core-components/src/components/Picker/color-picker/color-picker.component.d.ts

@@ -1,6 +1,28 @@
+import { CSSProperties } from 'react';
 import './color-picker.css';
-export declare const ColorPicker: ({ color, onChange }: {
-    color: any;
-    onChange: any;
-}) => import("react/jsx-runtime").JSX.Element;
+export interface ColorPickerClassNames {
+    /** Custom className for the picker container */
+    container?: string;
+    /** Custom className for the color swatch */
+    swatch?: string;
+    /** Custom className for the popover */
+    popover?: string;
+}
+export interface ColorPickerStyles {
+    /** Custom style for the picker container */
+    container?: CSSProperties;
+    /** Custom style for the color swatch */
+    swatch?: CSSProperties;
+    /** Custom style for the popover */
+    popover?: CSSProperties;
+}
+export interface ColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+    /** Custom classNames for component parts */
+    classNames?: ColorPickerClassNames;
+    /** Custom inline styles for component parts */
+    styles?: ColorPickerStyles;
+}
+export declare const ColorPicker: ({ color, onChange, classNames, styles }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=color-picker.component.d.ts.map

package/lib/src/core-components/src/components/Picker/color-picker/color-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Picker/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW;;;6CAqBvB,CAAC"}
+{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Picker/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgC,aAAa,EAAC,MAAM,OAAO,CAAC;AAG1E,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,qBAAqB;IACpC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,wCAAwC;IACxC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,4CAAqD,gBAAgB,4CAqB5F,CAAC"}

package/lib/src/core-components/src/components/Picker/color-picker/color-picker.component.js

@@ -3,10 +3,10 @@ import { useCallback, useRef, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useClickOutside } from '../../../hooks';
 import './color-picker.css';
-export const ColorPicker = ({ color, onChange }) => {
+export const ColorPicker = ({ color, onChange, classNames = {}, styles = {} }) => {
     const popover = useRef();
     const [isOpen, toggle] = useState(false);
     const close = useCallback(() => toggle(false), []);
     useClickOutside(popover, close);
-    return (_jsxs("div", { className: "picker", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => toggle(true) }), isOpen && (_jsx("div", { className: "popover", ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }))] }));
+    return (_jsxs("div", { className: `picker ${classNames.container || ''}`, style: styles.container, children: [_jsx("div", { className: `swatch ${classNames.swatch || ''}`, style: { backgroundColor: color, ...styles.swatch }, onClick: () => toggle(true) }), isOpen && (_jsx("div", { className: `popover ${classNames.popover || ''}`, style: styles.popover, ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }))] }));
 };

package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.d.ts

@@ -1,9 +1,50 @@
+import { CSSProperties } from 'react';
+export interface MultiSelectClassNames {
+    /** Custom className for the container */
+    container?: string;
+    /** Custom className for the trigger/display span */
+    trigger?: string;
+    /** Custom className for the dropdown container */
+    dropdown?: string;
+    /** Custom className for the list */
+    list?: string;
+    /** Custom className for list items */
+    listItem?: string;
+    /** Custom className for the label */
+    label?: string;
+    /** Custom className for the checkbox */
+    checkbox?: string;
+    /** Custom className for the item text */
+    itemText?: string;
+}
+export interface MultiSelectStyles {
+    /** Custom style for the container */
+    container?: CSSProperties;
+    /** Custom style for the trigger/display span */
+    trigger?: CSSProperties;
+    /** Custom style for the dropdown container */
+    dropdown?: CSSProperties;
+    /** Custom style for the list */
+    list?: CSSProperties;
+    /** Custom style for list items */
+    listItem?: CSSProperties;
+    /** Custom style for the label */
+    label?: CSSProperties;
+    /** Custom style for the checkbox */
+    checkbox?: CSSProperties;
+    /** Custom style for the item text */
+    itemText?: CSSProperties;
+}
 interface MultiSelectProps {
     options: Array<string>;
     selectedItems?: Array<string>;
     hasError?: boolean;
+    /** Custom classNames for component parts */
+    classNames?: MultiSelectClassNames;
+    /** Custom inline styles for component parts */
+    styles?: MultiSelectStyles;
     onSelect: (item: any) => any;
 }
-export declare const MultiSelect: ({ options, selectedItems, hasError, onSelect, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: ({ options, selectedItems, hasError, classNames, styles, onSelect, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=multi-select.component.d.ts.map

package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/multi-select/multi-select.component.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,oDAKrB,gBAAgB,4CA8HlB,CAAC"}
+{"version":3,"file":"multi-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/multi-select/multi-select.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA8B,aAAa,EAAC,MAAM,OAAO,CAAC;AAIxE,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,gDAAgD;IAChD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,wEAOrB,gBAAgB,4CAsIlB,CAAC"}

package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
+export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, classNames = {}, styles = {}, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
     const useOutsideAlerter = (ref) => {
@@ -26,10 +26,10 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
     return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
                 [s['border-red']]: hasError,
                 [s['border-gray-300']]: !hasError,
-            }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['shadow-sm']), onClick: () => {
+            }, classNames.container), style: styles.container, ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['shadow-sm'], classNames.trigger), style: styles.trigger, onClick: () => {
                         setIsListOpen(!isListOpen);
                     }, children: selectedOptions?.length > 0 ? selectedOptions?.join(',') : 'Select' }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
-                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0']), children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2']), children: _jsxs("label", { className: cn(s['flex'], s['gap-2']), children: [_jsx("input", { className: cn(s['flex'], s['h-4'], s['w-4']), type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
+                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full'], classNames.dropdown), style: { zIndex: 999, ...styles.dropdown }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0'], classNames.list), style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], classNames.listItem), style: styles.listItem, children: _jsxs("label", { className: cn(s['flex'], s['gap-2'], classNames.label), style: styles.label, children: [_jsx("input", { className: cn(s['flex'], s['h-4'], s['w-4'], classNames.checkbox), style: styles.checkbox, type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
                                                     if (selectedOptions?.includes(item)) {
                                                         setSelectedOptions(selectedOptions?.filter((e) => e != item));
                                                     }
@@ -44,6 +44,6 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
                                                 }, onBlur: () => {
                                                     if (!isListOpen)
                                                         onSelect(selectedOptions);
-                                                } }), _jsx("span", { className: cn(s['flex'], s['h-4']), children: item })] }) }, index))) }) }))
+                                                } }), _jsx("span", { className: cn(s['flex'], s['h-4'], classNames.itemText), style: styles.itemText, children: item })] }) }, index))) }) }))
                         : null })] }) }));
 };

package/lib/src/core-components/src/components/Selection/single-select/single-select.component.d.ts

@@ -1,4 +1,36 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+export interface SingleSelectClassNames {
+    /** Custom className for the container */
+    container?: string;
+    /** Custom className for the trigger/display span */
+    trigger?: string;
+    /** Custom className for the icon wrapper */
+    icon?: string;
+    /** Custom className for the dropdown container */
+    dropdown?: string;
+    /** Custom className for the list */
+    list?: string;
+    /** Custom className for list items */
+    listItem?: string;
+    /** Custom className for the item text */
+    itemText?: string;
+}
+export interface SingleSelectStyles {
+    /** Custom style for the container */
+    container?: CSSProperties;
+    /** Custom style for the trigger/display span */
+    trigger?: CSSProperties;
+    /** Custom style for the icon wrapper */
+    icon?: CSSProperties;
+    /** Custom style for the dropdown container */
+    dropdown?: CSSProperties;
+    /** Custom style for the list */
+    list?: CSSProperties;
+    /** Custom style for list items */
+    listItem?: CSSProperties;
+    /** Custom style for the item text */
+    itemText?: CSSProperties;
+}
 interface SingleSelectProps {
     options: Array<any>;
     displayKey?: string;
@@ -6,8 +38,12 @@ interface SingleSelectProps {
     hasError?: boolean;
     className?: string;
     style?: React.CSSProperties;
+    /** Custom classNames for component parts */
+    classNames?: SingleSelectClassNames;
+    /** Custom inline styles for component parts */
+    styles?: SingleSelectStyles;
     onSelect: (item: any) => any;
 }
-export declare const SingleSelect: ({ options, displayKey, displayValue, hasError, className, style, onSelect, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelect: ({ options, displayKey, displayValue, hasError, className, style, classNames, styles, onSelect, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=single-select.component.d.ts.map

package/lib/src/core-components/src/components/Selection/single-select/single-select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/single-select/single-select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,iFAQtB,iBAAiB,4CAsLnB,CAAC"}
+{"version":3,"file":"single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/single-select/single-select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8B,aAAa,EAAC,MAAM,OAAO,CAAC;AAKxE,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,gDAAgD;IAChD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,4CAA4C;IAC5C,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,qGAUtB,iBAAiB,4CA8LnB,CAAC"}

package/lib/src/core-components/src/components/Selection/single-select/single-select.component.js

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../Icon/Icon';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const SingleSelect = ({ options = [], displayKey = 'title', displayValue = '', hasError = false, className = '', style = {}, onSelect, }) => {
+export const SingleSelect = ({ options = [], displayKey = 'title', displayValue = '', hasError = false, className = '', style = {}, classNames = {}, styles = {}, onSelect, }) => {
     const [value, setValue] = useState('');
     const [isListOpen, setIsListOpen] = useState(false);
     // Arrow navigation state
@@ -61,10 +61,10 @@ export const SingleSelect = ({ options = [], displayKey = 'title', displayValue
     return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
                 [s['border-red']]: hasError,
                 [s['border-gray-300']]: !hasError,
-            }, className), ref: wrapperRef, style: style, children: [_jsxs("span", { className: cn(s['p-2'], s['shadow-sm'], s['flex'], s['justify-between'], s['items-center']), onClick: () => {
+            }, className, classNames.container), ref: wrapperRef, style: { ...style, ...styles.container }, children: [_jsxs("span", { className: cn(s['p-2'], s['shadow-sm'], s['flex'], s['justify-between'], s['items-center'], classNames.trigger), onClick: () => {
                         setIsListOpen(!isListOpen);
-                    }, tabIndex: 0, style: { cursor: 'pointer' }, children: [value ? value : 'Select', _jsx("span", { children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: { size: 16 } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: { size: 16 } })) })] }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
-                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: {
+                    }, tabIndex: 0, style: { cursor: 'pointer', ...styles.trigger }, children: [value ? value : 'Select', _jsx("span", { className: classNames.icon, style: styles.icon, children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: { size: 16 } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: { size: 16 } })) })] }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
+                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full'], classNames.dropdown), style: {
                                 zIndex: 999,
                                 top: 'calc(100% + 0.5rem)',
                                 left: 0,
@@ -73,13 +73,15 @@ export const SingleSelect = ({ options = [], displayKey = 'title', displayValue
                                 padding: 0,
                                 animation: 'fadeIn 0.15s ease-out',
                                 transformOrigin: 'top',
-                            }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0']), children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], highlightedIndex === index && s['bg-blue-100']), style: {
+                                ...styles.dropdown,
+                            }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0'], classNames.list), style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], highlightedIndex === index && s['bg-blue-100'], classNames.listItem), style: {
                                         cursor: 'pointer',
                                         background: highlightedIndex === index ? '#e0e7ff' : undefined,
+                                        ...styles.listItem,
                                     }, onClick: () => {
                                         setValue(item[displayKey]);
                                         onSelect(item);
                                         setIsListOpen(false);
-                                    }, onMouseEnter: () => setHighlightedIndex(index), children: _jsx("label", { className: cn(s['flex'], s['gap-2']), children: _jsx("span", { className: cn(s['flex'], s['h-4']), children: item[displayKey] }) }) }, index))) }) }))
+                                    }, onMouseEnter: () => setHighlightedIndex(index), children: _jsx("label", { className: cn(s['flex'], s['gap-2']), children: _jsx("span", { className: cn(s['flex'], s['h-4'], classNames.itemText), style: styles.itemText, children: item[displayKey] }) }) }, index))) }) }))
                         : null })] }) }));
 };

package/lib/src/core-components/src/components/Stepper2/stepper.component.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 export type StepperSize = 'sm' | 'md' | 'lg';
 export type StepperStepStatus = 'completed' | 'current' | 'pending';
 export interface StepperStep {
@@ -27,6 +27,38 @@ export interface StepperColors {
     /** Text color for pending steps */
     pendingTextColor?: string;
 }
+export interface StepperClassNames {
+    /** Custom className for the root container */
+    container?: string;
+    /** Custom className for the steps wrapper */
+    stepsWrapper?: string;
+    /** Custom className for the background line */
+    backgroundLine?: string;
+    /** Custom className for the progress line */
+    progressLine?: string;
+    /** Custom className for individual step wrapper */
+    stepWrapper?: string;
+    /** Custom className for the step circle */
+    stepCircle?: string;
+    /** Custom className for the step description */
+    stepDescription?: string;
+}
+export interface StepperStyles {
+    /** Custom style for the root container */
+    container?: CSSProperties;
+    /** Custom style for the steps wrapper */
+    stepsWrapper?: CSSProperties;
+    /** Custom style for the background line */
+    backgroundLine?: CSSProperties;
+    /** Custom style for the progress line */
+    progressLine?: CSSProperties;
+    /** Custom style for individual step wrapper */
+    stepWrapper?: CSSProperties;
+    /** Custom style for the step circle */
+    stepCircle?: CSSProperties;
+    /** Custom style for the step description */
+    stepDescription?: CSSProperties;
+}
 export interface StepperProps {
     /** Additional className for the container */
     className?: string;
@@ -52,6 +84,10 @@ export interface StepperProps {
     style?: React.CSSProperties;
     /** Orientation (horizontal is default) */
     orientation?: 'horizontal' | 'vertical';
+    /** Custom classNames for component parts */
+    classNames?: StepperClassNames;
+    /** Custom inline styles for component parts */
+    styles?: StepperStyles;
 }
-export declare const Stepper: ({ className, steps, currentStep, onStepClick, size, colors, showNumbers, lineThickness, stepSize, clickable, style, orientation, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ className, steps, currentStep, onStepClick, size, colors, showNumbers, lineThickness, stepSize, clickable, style, orientation, classNames: customClassNames, styles: customStyles, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=stepper.component.d.ts.map

package/lib/src/core-components/src/components/Stepper2/stepper.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Stepper2/stepper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IACnC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,CACZ,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GAAG,WAAW,EAC1B,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oBAAoB;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,0CAA0C;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAqBD,eAAO,MAAM,OAAO,uIAajB,YAAY,4CA4Ld,CAAC"}
+{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Stepper2/stepper.component.tsx"],"names":[],"mappings":"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"}

package/lib/src/core-components/src/components/Stepper2/stepper.component.js

@@ -15,12 +15,12 @@ const SIZE_CONFIG = {
     md: { stepSize: 32, fontSize: '0.75rem', padding: 4 },
     lg: { stepSize: 40, fontSize: '0.875rem', padding: 6 },
 };
-export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, size = 'md', colors = {}, showNumbers = true, lineThickness = 2, stepSize, clickable = true, style, orientation = 'horizontal', }) => {
+export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, size = 'md', colors = {}, showNumbers = true, lineThickness = 2, stepSize, clickable = true, style, orientation = 'horizontal', classNames: customClassNames = {}, styles: customStyles = {}, }) => {
     const mergedColors = { ...DEFAULT_COLORS, ...colors };
     const sizeConfig = SIZE_CONFIG[size];
     const finalStepSize = stepSize || sizeConfig.stepSize;
     const linePosition = sizeConfig.padding + finalStepSize / 2;
-    const finalClass = cn(className, s['w-full'], s['px-4'], s['sm:px-8']);
+    const finalClass = cn(className, s['w-full'], s['px-4'], s['sm:px-8'], customClassNames.container);
     // Helper to get step info
     const getStepInfo = (step, index) => {
         if (typeof step === 'string') {
@@ -93,11 +93,12 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, s
         }
         return (_jsxs("div", { style: {
                 left: steps.length > 1 ? `${(index / (steps.length - 1)) * 100}%` : '50%',
-            }, className: cn(s['absolute']), children: [_jsx("span", { className: cn(stepClass, s['font-arimaRegular']), style: stepStyles, onClick: () => {
+                ...customStyles.stepWrapper,
+            }, className: cn(s['absolute'], customClassNames.stepWrapper), children: [_jsx("span", { className: cn(stepClass, s['font-arimaRegular'], customClassNames.stepCircle), style: { ...stepStyles, ...customStyles.stepCircle }, onClick: () => {
                         if (clickable && onStepClick) {
                             onStepClick(stepNumber, step, index);
                         }
-                    }, children: showNumbers ? stepNumber : stepInfo.label }), !showNumbers && stepInfo.description && (_jsx("div", { style: {
+                    }, children: showNumbers ? stepNumber : stepInfo.label }), !showNumbers && stepInfo.description && (_jsx("div", { className: customClassNames.stepDescription, style: {
                         position: 'absolute',
                         top: `${finalStepSize + 8}px`,
                         left: '50%',
@@ -107,6 +108,7 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, s
                             ? mergedColors.activeColor
                             : mergedColors.pendingTextColor,
                         whiteSpace: 'nowrap',
+                        ...customStyles.stepDescription,
                     }, children: stepInfo.description }))] }, `step-${index}-${stepInfo.label}`));
     });
     // Calculate progress width based on current step
@@ -114,21 +116,24 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, s
         ? `${((currentStep - 1) / (steps.length - 1)) * 100}%`
         : '0%';
     const containerHeight = sizeConfig.padding * 2 + finalStepSize;
-    return (_jsx("div", { className: finalClass, style: style, children: _jsxs("div", { className: cn(s['w-full'], s['relative']), style: {
+    return (_jsx("div", { className: finalClass, style: { ...style, ...customStyles.container }, children: _jsxs("div", { className: cn(s['w-full'], s['relative'], customClassNames.stepsWrapper), style: {
                 minHeight: `${containerHeight}px`,
                 paddingTop: `${sizeConfig.padding}px`,
-            }, children: [_jsx("div", { className: cn(s['absolute'], s['left-0'], s['w-full'], s['transition-width'], s['ease-in-out'], s['duration-500']), style: {
+                ...customStyles.stepsWrapper,
+            }, children: [_jsx("div", { className: cn(s['absolute'], s['left-0'], s['w-full'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.backgroundLine), style: {
                         top: `${linePosition}px`,
                         height: `${lineThickness}px`,
                         backgroundColor: mergedColors.lineColor,
                         transform: 'translateY(-50%)',
                         zIndex: 0,
-                    } }), _jsx("div", { className: cn(s['absolute'], s['left-0'], s['transition-width'], s['ease-in-out'], s['duration-500']), style: {
+                        ...customStyles.backgroundLine,
+                    } }), _jsx("div", { className: cn(s['absolute'], s['left-0'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.progressLine), style: {
                         top: `${linePosition}px`,
                         width: progressWidth,
                         height: `${lineThickness}px`,
                         backgroundColor: mergedColors.completedColor,
                         transform: 'translateY(-50%)',
                         zIndex: 1,
+                        ...customStyles.progressLine,
                     } }), _jsx("div", { className: cn(s['relative'], s['sm:block']), style: { zIndex: 2 }, children: Steps })] }) }));
 };

package/lib/src/core-components/src/components/Tabs/tabs.component.d.ts

@@ -1,9 +1,35 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+export interface TabsClassNames {
+    /** Custom className for the root container */
+    container?: string;
+    /** Custom className for the tabs header container */
+    tabsHeader?: string;
+    /** Custom className for individual tab button */
+    tabButton?: string;
+    /** Custom className for active tab button */
+    activeTabButton?: string;
+    /** Custom className for the content container */
+    contentContainer?: string;
+}
+export interface TabsStyles {
+    /** Custom style for the root container */
+    container?: CSSProperties;
+    /** Custom style for the tabs header container */
+    tabsHeader?: CSSProperties;
+    /** Custom style for individual tab button */
+    tabButton?: CSSProperties;
+    /** Custom style for active tab button */
+    activeTabButton?: CSSProperties;
+    /** Custom style for the content container */
+    contentContainer?: CSSProperties;
+}
 interface TabProps {
     title: string;
     children: React.JSX.Element;
+    className?: string;
+    style?: CSSProperties;
 }
-export declare const Tab: ({ title, children }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: ({ title, children, className, style }: TabProps) => import("react/jsx-runtime").JSX.Element;
 export interface TabsProps {
     options: Array<{
         title: string;
@@ -12,7 +38,11 @@ export interface TabsProps {
     }>;
     onSelect?: (item: any, index: number) => void;
     children: React.ReactNode;
+    /** Custom classNames for component parts */
+    classNames?: TabsClassNames;
+    /** Custom inline styles for component parts */
+    styles?: TabsStyles;
 }
-export declare const Tabs: ({ options, onSelect, children }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ options, onSelect, children, classNames, styles }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=tabs.component.d.ts.map

package/lib/src/core-components/src/components/Tabs/tabs.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tabs/tabs.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,GAAG,wBAAuB,QAAQ,4CAM9C,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;QAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,oCAAmC,SAAS,4CAqD5D,CAAC"}
+{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tabs/tabs.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,aAAa,EAAC,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,cAAc;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,iDAAiD;IACjD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yCAAyC;IACzC,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,aAAa,CAAC;CAClC;AAED,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,GAAG,0CAAyC,QAAQ,4CAMhE,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;QAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,wDAAiE,SAAS,4CA6D1F,CAAC"}