react-restyle-components 0.2.43 → 0.2.45

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -24,6 +24,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "rm -rf docs-build && storybook build -o docs-build",
     "deploy-storybook": "gh-pages -d docs-build",
+    "serve-storybook": "npm run build-storybook -- -o ./docs-build && npx http-server ./docs-build",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "prettier": "prettier --write '**/*.{js,jsx}'",
@@ -45,7 +46,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.113",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "buffer": "^6.0.3",
@@ -83,13 +84,13 @@
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.9",
     "@testing-library/react": "^16.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-c8": "^0.31.4",
     "@vitest/ui": "^0.31.4",
     "autoprefixer": "^10.4.19",
     "copyfiles": "^2.4.1",
     "craco-alias": "^3.0.1",
     "css-loader": "^7.1.2",
-    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.14.0",
     "eslint-plugin-storybook": "^0.8.0",
     "gh-pages": "^3.2.3",
@@ -102,11 +103,11 @@
     "sass": "^1.77.5",
     "sass-loader": "^14.2.1",
     "storybook": "^8.0.6",
+    "storybook-css-modules": "^1.0.8",
     "storybook-multilevel-sort": "^2.0.1",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
-    "webpack": "^5.72.0",
     "vite": "^5.0.11",
     "vite-plugin-css-injected-by-js": "^3.1.1",
     "vite-plugin-dts": "^2.3.0",
@@ -115,7 +116,8 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.31.4",
-    "vitest-dom": "^0.1.0"
+    "vitest-dom": "^0.1.0",
+    "webpack": "^5.72.0"
   },
   "eslintConfig": {
     "extends": [

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

@@ -1,7 +1,4 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
-/**
- * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
- */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=button.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/button/button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAI3C;;GAEG;AACH,eAAO,MAAM,MAAM,uIA0DlB,CAAC"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/button/button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAK3C,eAAO,MAAM,MAAM,uIA0DlB,CAAC"}

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

@@ -3,14 +3,11 @@ import { forwardRef } from 'react';
 import { Tooltip } from '../tooltip/tooltip.component';
 import s from '../../../tc.module.css';
 import { cn } from '../../../core-utils';
-/**
- * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
- */
 export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, children, ...args }, ref) => {
     const buttonColorClass = variant === 'solid'
         ? cn(s['text-white'], s['bg-[#007BFF]'], s['hover:bg-[#007BFF]'], s['hover:shadow-lg'], s['text-white'])
         : cn(s['dark:text-white'], s['text-black'], s['border'], s['border-gray-400'], s['hover:shadow-lg']);
-    const button = (_jsx("button", { ref: ref, ...args, className: cn(s['rounded-100px'], s['px-3'], s['py-1'], s['text-md'], buttonColorClass, s['pt-2'], s['pb-2'], s['font-nunitoSansRegular'], disabled ? s['opacity-50'] : s['opacity-100'], className), type: type, disabled: disabled, children: children }));
+    const button = (_jsx("button", { ref: ref, ...args, className: cn(s['rounded-100px'], s['px-3'], s['py-1'], s['text-md'], s['pt-2'], s['pb-2'], s['font-nunitoSansRegular'], disabled ? s['opacity-50'] : s['opacity-100'], buttonColorClass, className), type: type, disabled: disabled, children: children }));
     if (tooltip) {
         return _jsx(Tooltip, { content: tooltip, children: button });
     }

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import '../../../../tc.module.css';
 export declare const ButtonGroup: ({ children, orientation, className, }: {
     children: ReactNode;
     orientation?: "horizontal" | "vertical" | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/atoms/button/buttonGroup/buttonGroup.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,eAAO,MAAM,WAAW;cAKZ,SAAS;;;6CASpB,CAAC"}
+{"version":3,"file":"buttonGroup.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/atoms/button/buttonGroup/buttonGroup.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,eAAO,MAAM,WAAW;cAKZ,SAAS;;;6CAepB,CAAC"}

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.js

@@ -1,3 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import '../../../../tc.module.css';
-export const ButtonGroup = ({ children, orientation = 'horizontal', className, }) => (_jsx("div", { className: `flex ${orientation == 'horizontal' ? 'flex-row' : 'flex-col'} w-fit gap-2 ${className}`, children: children }));
+import s from '../../../../tc.module.css';
+import { cn } from '../../../../core-utils';
+export const ButtonGroup = ({ children, orientation = 'horizontal', className, }) => (_jsx("div", { className: cn(s.flex, orientation == 'horizontal' ? s['flex-row'] : s['flex-col'], s['w-fit'], s['gap-2'], className), children: children }));

package/lib/src/core-components/atoms/check-box/checkBox.component.d.ts

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 interface CheckBoxProps {
     title: string;
     data: Array<any>;

package/lib/src/core-components/atoms/check-box/checkBox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkBox.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/check-box/checkBox.component.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC;AAMhC,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,0CAKlB,aAAa,4CAqCf,CAAC"}
+{"version":3,"file":"checkBox.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/check-box/checkBox.component.tsx"],"names":[],"mappings":"AAMA,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,0CAKlB,aAAa,4CAmCf,CAAC"}

package/lib/src/core-components/atoms/check-box/checkBox.component.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 import { UnCheckbox, CheckedBox } from '../../../library/assets/svg';
-// import UnCheckbox from '../../../library/assets/svg/UnCheckbox.svg?react';
-// import CheckedBox from '../../../library/assets/svg/CheckedBox.svg?react';
 import { InputWrapper } from '../form/form.component';
 export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked: false }], className, onChange, }) => {
     const [list, setList] = useState(data);
     const width = 20;
-    return (_jsx(InputWrapper, { label: title, children: list?.map((item, index) => (_jsxs("div", { className: `${className} flex flex-row  items-center `, onClick: () => {
+    return (_jsx(InputWrapper, { label: title, children: list?.map((item, index) => (_jsxs("div", { className: `${cn(s.flex, s['flex-row'], s['items-center'])} ${className}`, onClick: () => {
                 const result = list?.map((e, i) => {
                     if (i === index)
                         return { ...e, checked: !item.checked };
@@ -17,5 +16,5 @@ export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked
                 });
                 setList(result);
                 onChange(result?.filter((item) => item.checked));
-            }, children: [_jsx("div", { className: "flex mt-1", children: item.checked ? (_jsx(CheckedBox, { width: width, height: width, fill: "#E7503D", stroke: "E7503D" })) : (_jsx(UnCheckbox, { width: width, height: width })) }), _jsx("span", { children: item?.title })] }, index))) }));
+            }, children: [_jsx("div", { className: cn(s.flex, s['mt-1']), children: item.checked ? (_jsx(CheckedBox, { width: width, height: width, fill: "#E7503D", stroke: "E7503D" })) : (_jsx(UnCheckbox, { width: width, height: width })) }), _jsx("span", { children: item?.title })] }, index))) }));
 };

package/lib/src/core-components/atoms/date-picker/date-picker.component.d.ts

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 import 'react-datepicker/dist/react-datepicker.css';
 interface DatePickerProps {
     title: string;

package/lib/src/core-components/atoms/date-picker/date-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/date-picker/date-picker.component.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,4CAA4C,CAAC;AAKpD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,mEAOxB,eAAe,4CAoCjB,CAAC"}
+{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/date-picker/date-picker.component.tsx"],"names":[],"mappings":"AAEA,OAAO,4CAA4C,CAAC;AAOpD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,mEAOxB,eAAe,4CAkDjB,CAAC"}

package/lib/src/core-components/atoms/date-picker/date-picker.component.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, forwardRef } from 'react';
-import '../../../tc.module.css';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { DatePickerSvg } from '../../../library/assets/svg';
 import dayjs from 'dayjs';
 import { InputWrapper } from '../form/form.component';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const DatePickerComp = ({ title = 'Title', className, disable, value, showFormat = 'yyyy-MM-dd', placeholder = 'Select Date', }) => {
     const [pickedDate, setPickedDate] = useState(value && dayjs(value).toDate());
     const CustomInput = forwardRef((props, ref) => {
-        return (_jsxs("div", { onClick: !disable && props.onClick, ref: ref, className: " border-gray-light place-items-center  border rounded-md px-2 flex ", children: [_jsx("label", { className: "mr-3 font-arimaRegular text-primaryCharcoal text-lg", children: props.value || props.placeholder }), _jsx(DatePickerSvg, { width: 15, height: 15 })] }));
+        return (_jsxs("div", { onClick: !disable && props.onClick, ref: ref, className: cn(s['border-gray-light'], s['place-items-center'], s['border'], s['rounded-md'], s['px-2'], s.flex), children: [_jsx("label", { className: cn(s['mr-3'], s['font-arimaRegular'], s['text-primaryCharcoal'], s['text-lg']), children: props.value || props.placeholder }), _jsx(DatePickerSvg, { width: 15, height: 15 })] }));
     });
     CustomInput.displayName = 'CustomInput';
     const handleChanges = (date) => {
         setPickedDate(date);
     };
-    return (_jsx(InputWrapper, { label: title, children: _jsx("div", { className: `${className} flex zIndex-999`, children: _jsx(DatePicker, { selected: pickedDate || new Date(), dateFormat: showFormat, placeholder: placeholder, onChange: handleChanges, customInput: _jsx(CustomInput, {}) }) }) }));
+    return (_jsx(InputWrapper, { label: title, children: _jsx("div", { className: cn(s.flex, s['zIndex-999'], className), children: _jsx(DatePicker, { selected: pickedDate || new Date(), dateFormat: showFormat, placeholder: placeholder, onChange: handleChanges, customInput: _jsx(CustomInput, {}) }) }) }));
 };

package/lib/src/core-components/atoms/form/form.component.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../../tc.module.css';
 interface LabelProps {
     htmlFor: string;
     hasError?: boolean;
@@ -96,6 +95,5 @@ interface ToggleProps extends InputWrapperProps {
     style?: any;
 }
 export declare const Toggle: (props: ToggleProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DeliveryScheduleToggle: (props: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=form.component.d.ts.map

package/lib/src/core-components/atoms/form/form.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/form/form.component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"form.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/form/form.component.tsx"],"names":[],"mappings":"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"}

package/lib/src/core-components/atoms/form/form.component.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import '../../../tc.module.css';
-export const Label = (props) => (_jsx(_Fragment, { children: _jsx("label", { htmlFor: props.htmlFor, className: `${props.hasError ? 'text-red-400' : 'text-current'} block text-3xs font-medium  mb-1`, style: { ...props.style }, children: props.children }) }));
-export const InputWrapper = (props) => (_jsxs("div", { className: props.className, ref: props.ref, children: [_jsx(Label, { htmlFor: props.id || '', hasError: props.hasError, style: { ...props.style }, children: _jsx("span", { className: "dark:text-white w-10", children: props.label }) }), props.children] }));
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
+export const Label = (props) => (_jsx(_Fragment, { children: _jsx("label", { htmlFor: props.htmlFor, className: cn(s['block'], s['text-3xs'], s['font-medium'], s['mb-1'], {
+            [s['text-red-400']]: props.hasError,
+            [s['text-current']]: !props.hasError,
+        }), style: { ...props.style }, children: props.children }) }));
+export const InputWrapper = (props) => (_jsxs("div", { className: cn(props.className), ref: props.ref, children: [_jsx(Label, { htmlFor: props.id || '', hasError: props.hasError, style: { ...props.style }, children: _jsx("span", { className: cn(s['dark:text-white'], s['w-10']), children: props.label }) }), props.children] }));
 export const Input = React.forwardRef((props, ref) => {
     const handleKeyPress = (e) => {
         const key = e.key;
@@ -12,7 +16,10 @@ export const Input = React.forwardRef((props, ref) => {
             e.preventDefault();
         }
     };
-    return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), onKeyPress: (e) => handleKeyPress(e), className: `${props.className} leading-4 p-2  dark:bg-boxdark  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md `, onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }) }));
+    return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), onKeyPress: (e) => handleKeyPress(e), className: cn(props.className, s['leading-4'], s['p-2'], s['dark:bg-boxdark'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], {
+                [s['border-red']]: props.hasError,
+                [s['border-gray-300']]: !props.hasError,
+            }), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }) }));
 });
 export const InputPassword = React.forwardRef((props, ref) => {
     const [showPassword, setShowPassword] = useState(false);
@@ -22,9 +29,10 @@ export const InputPassword = React.forwardRef((props, ref) => {
     const handleMouseUp = () => {
         setShowPassword(false);
     };
-    return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsxs("div", { className: "flex items-center relative", children: [_jsx("input", { type: showPassword ? 'text' : 'password', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), 
-                    // onKeyPress={e => handleKeyPress(e)}
-                    className: `${props.className} leading-4 p-2  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md dark:bg-boxdark`, onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }), _jsx("div", { className: "flex absolute right-3", children: _jsx("svg", { className: "h-6 dark:bg-boxdark", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: showPassword ? (_jsx("path", { fill: "currentColor", d: "M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" })) : (_jsx("path", { fill: "currentColor", d: "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z" })) }) })] }) }));
+    return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['relative']), children: [_jsx("input", { type: showPassword ? 'text' : 'password', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), className: cn(props.className, s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], s['dark:bg-boxdark'], {
+                        [s['border-red']]: props.hasError,
+                        [s['border-gray-300']]: !props.hasError,
+                    }), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), onKeyDown: props.onKeyDown && props.onKeyDown }), _jsx("div", { className: cn(s['flex'], s['absolute'], s['right-3']), children: _jsx("svg", { className: cn(s['h-6'], s['dark:bg-boxdark']), fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: showPassword ? (_jsx("path", { fill: "currentColor", d: "M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" })) : (_jsx("path", { fill: "currentColor", d: "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z" })) }) })] }) }));
 });
 export const Input1 = React.forwardRef((props, ref) => {
     const handleKeyPress = (e) => {
@@ -34,7 +42,10 @@ export const Input1 = React.forwardRef((props, ref) => {
             e.preventDefault();
         }
     };
-    return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), onKeyPress: (e) => handleKeyPress(e), className: `${props.className} leading-4 p-2  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md dark:text-black`, onBlur: (e) => props.onBlur && props.onBlur(e), onKeyDown: props.onKeyDown }) }));
+    return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => props.onChange && props.onChange(e.target.value), onKeyPress: (e) => handleKeyPress(e), className: cn(props.className, s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], s['dark:text-black'], {
+                [s['border-red']]: props.hasError,
+                [s['border-gray-300']]: !props.hasError,
+            }), onBlur: (e) => props.onBlur && props.onBlur(e), onKeyDown: props.onKeyDown }) }));
 });
 export const Input2 = React.forwardRef((props, ref) => {
     const [isBlur, setIsBlur] = useState(true);
@@ -51,7 +62,10 @@ export const Input2 = React.forwardRef((props, ref) => {
     return (_jsx(InputWrapper, { label: props.label, id: props.id, hasError: props.hasError, style: props.wrapperStyle, className: props.labelClassName, children: _jsx("input", { type: props.type || 'text', id: props.id, ref: props.inputRef, "data-testid": "INPT", autoFocus: props?.isAutoFocus || false, name: props.name, style: props.style, defaultValue: props.defaultValue, placeholder: props.placeholder, required: props.required || false, disabled: props.disabled || false, autoComplete: "given-name", maxLength: props.maxLength, value: props.value, onChange: (e) => {
                 setIsBlur(true);
                 props.onChange && props.onChange(e.target.value);
-            }, onKeyPress: (e) => handleKeyPress(e), className: `${props.className} leading-4 p-2  focus:outline-none focus:ring  block w-full shadow-sm sm:text-base  border-2  ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md dark:text-black`, onKeyDown: (e) => {
+            }, onKeyPress: (e) => handleKeyPress(e), className: cn(props.className, s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], s['dark:text-black'], {
+                [s['border-red']]: props.hasError,
+                [s['border-gray-300']]: !props.hasError,
+            }), onKeyDown: (e) => {
                 if (e.keyCode == 13) {
                     setIsBlur(false);
                     props.onBlur && props.onBlur(e.target.value);
@@ -61,15 +75,24 @@ export const Input2 = React.forwardRef((props, ref) => {
                 handleBlur(e.target.value);
             } }) }));
 });
-export const MultilineInput = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, className: props.className, children: _jsx("textarea", { id: props.id, autoComplete: "given-name", value: props.value, disabled: props.disabled, style: props.style, rows: props.rows, onKeyUp: props.onKeyUp && props.onKeyUp, placeholder: props.placeholder, onChange: (e) => props.onChange && props.onChange(e.target.value), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), className: `leading-4 p-2 focus:outline-none focus:ring block w-full shadow-sm sm:text-base border-2 ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md dark:bg-boxdark`, defaultValue: props.defaultValue }) }));
-export const InputRadio = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.labelStyle, children: props.values?.map((item, key) => (_jsxs("div", { className: "flex items-center gap-2", onClick: () => {
+export const MultilineInput = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, className: props.className, children: _jsx("textarea", { id: props.id, autoComplete: "given-name", value: props.value, disabled: props.disabled, style: props.style, rows: props.rows, onKeyUp: props.onKeyUp && props.onKeyUp, placeholder: props.placeholder, onChange: (e) => props.onChange && props.onChange(e.target.value), onBlur: (e) => props.onBlur && props.onBlur(e.target.value), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], s['dark:bg-boxdark'], {
+            [s['border-red']]: props.hasError,
+            [s['border-gray-300']]: !props.hasError,
+        }), defaultValue: props.defaultValue }) }));
+export const InputRadio = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.labelStyle, children: props.values?.map((item, key) => (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), onClick: () => {
             props.onChange && props.onChange(item.value);
-        }, children: [_jsx("input", { type: "radio", id: props.id, name: props.name, value: item.value, checked: item.value == props.value ? true : false, onChange: () => props.onChange && props.onChange(item.value), className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" }, key), _jsx(Label, { htmlFor: props.id || '', style: { marginTop: 6 }, children: item.label })] }, key))) }));
-export const InputDate = ({ name, value, placeholder, use12Hours = true, label, id, hasError, disabled, format, onChange, onFocusRemove, }) => (_jsx(InputWrapper, { label: label, id: id, hasError: hasError, children: _jsx("input", { type: "date", id: id, name: name, disabled: disabled || false, value: value, onChange: (e) => onChange && onChange(e), className: `leading-4 p-2 focus:outline-none focus:ring block w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red ' : 'border-gray-300'} rounded-md` }) }));
+        }, children: [_jsx("input", { type: "radio", id: props.id, name: props.name, value: item.value, checked: item.value == props.value ? true : false, onChange: () => props.onChange && props.onChange(item.value), className: cn(s['w-4'], s['h-4'], s['text-blue-600'], s['bg-gray-100'], s['border-gray-300'], s['focus:ring-blue-500'], s['dark:focus:ring-blue-600'], s['dark:ring-offset-gray-800'], s['focus:ring-2'], s['dark:bg-gray-700'], s['dark:border-gray-600']) }, key), _jsx(Label, { htmlFor: props.id || '', style: { marginTop: 6 }, children: item.label })] }, key))) }));
+export const InputDate = ({ name, value, placeholder, use12Hours = true, label, id, hasError, disabled, format, onChange, onFocusRemove, }) => (_jsx(InputWrapper, { label: label, id: id, hasError: hasError, children: _jsx("input", { type: "date", id: id, name: name, disabled: disabled || false, value: value, onChange: (e) => onChange && onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], {
+            [s['border-red']]: hasError,
+            [s['border-gray-300']]: !hasError,
+        }) }) }));
 export const CheckBox = (props) => {
     return (_jsxs("div", { children: [_jsx("input", { onClick: props.handleCheckChieldElement, type: "checkbox", checked: props.isChecked, value: props.value }, props.id), ' ', props.value] }));
 };
-export const InputFile = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, children: _jsx("input", { type: "file", id: props.id, name: props.name, disabled: props.disabled || false, accept: props.accept, value: props.value, onChange: (e) => props.onChange && props.onChange(e), className: `leading-4 p-2 focus:outline-none focus:ring block w-full shadow-sm sm:text-base border-2 ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md`, multiple: props.multiple }) }));
+export const InputFile = (props) => (_jsx(InputWrapper, { label: props.label, id: props.id, children: _jsx("input", { type: "file", id: props.id, name: props.name, disabled: props.disabled || false, accept: props.accept, value: props.value, onChange: (e) => props.onChange && props.onChange(e), className: cn(s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['block'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], s['rounded-md'], {
+            [s['border-red']]: props.hasError,
+            [s['border-gray-300']]: !props.hasError,
+        }), multiple: props.multiple }) }));
 export const Toggle = (props) => {
     const [toggle, setToggle] = useState(props.value);
     const { onChange, disabled, className, isToggleLabel = true } = props;
@@ -89,28 +112,11 @@ export const Toggle = (props) => {
         'wrg-toggle--checked': toggle,
         'wrg-toggle--disabled': disabled,
     }, className);
-    return (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.style, children: _jsxs("div", { onClick: triggerToggle, className: toggleClasses, children: [_jsx("div", { className: 'wrg-toggle-container ' +
-                        (toggle ? 'bg-green-700' : 'bg-black dark:bg-white'), children: isToggleLabel && (_jsxs(_Fragment, { children: [_jsx("div", { className: "wrg-toggle-check", children: _jsx("span", { className: "text-white ml-1", children: "Yes" }) }), _jsx("div", { className: "wrg-toggle-uncheck", children: _jsx("span", { className: "dark:text-black", children: "No" }) })] })) }), _jsx("div", { className: `wrg-toggle-circle  dark:bg-black ${toggle ? 'ml-1' : 'mr-1'}  ` }), _jsx("input", { type: "checkbox", "aria-label": "Toggle Button", className: "wrg-toggle-input" })] }) }));
-};
-export const DeliveryScheduleToggle = (props) => {
-    const [toggle, setToggle] = useState(props.value);
-    const { onChange, disabled, className, isToggleLabel = true } = props;
-    useEffect(() => {
-        setToggle(props.value);
-    }, [props.value]);
-    const triggerToggle = () => {
-        if (disabled) {
-            return;
-        }
-        setToggle(!toggle);
-        if (typeof onChange === 'function') {
-            onChange(!toggle);
-        }
-    };
-    const toggleClasses = classNames('wrg-toggle1 ', {
-        'wrg-toggle--checked1': toggle,
-        'wrg-toggle--disabled1': disabled,
-    }, className);
-    return (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.style, children: _jsxs("div", { onClick: triggerToggle, className: toggleClasses, children: [_jsx("div", { className: 'wrg-toggle-container1 ' +
-                        (toggle ? 'bg-green-700' : 'bg-black dark:bg-white'), children: isToggleLabel && (_jsxs(_Fragment, { children: [_jsx("div", { className: "wrg-toggle-check1", children: _jsx("span", { className: "text-white ml-1", children: "Departments" }) }), _jsx("div", { className: "wrg-toggle-uncheck1", children: _jsx("span", { className: "dark:text-black", children: "Patients" }) })] })) }), _jsx("div", { className: `wrg-toggle-circle1  dark:bg-black ${toggle ? 'ml-1' : 'mr-1'}  ` }), _jsx("input", { type: "checkbox", "aria-label": "Toggle Button", className: "wrg-toggle-input1" })] }) }));
+    return (_jsx(InputWrapper, { label: props.label, id: props.id, style: props.style, children: _jsxs("div", { onClick: triggerToggle, className: toggleClasses, children: [_jsx("div", { className: cn(s['wrg-toggle-container'], {
+                        'bg-green-700': toggle,
+                        'bg-black dark:bg-white': !toggle,
+                    }), children: isToggleLabel && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['wrg-toggle-check']), children: _jsx("span", { className: cn(s['text-white'], s['ml-1']), children: "Yes" }) }), _jsx("div", { className: cn(s['wrg-toggle-uncheck']), children: _jsx("span", { className: cn(s['dark:text-black']), children: "No" }) })] })) }), _jsx("div", { className: cn(s['wrg-toggle-circle'], s['dark:bg-black'], {
+                        'ml-1': toggle,
+                        'mr-1': !toggle,
+                    }) }), _jsx("input", { type: "checkbox", "aria-label": "Toggle Button", className: cn(s['wrg-toggle-input']) })] }) }));
 };

package/lib/src/core-components/atoms/grid/grid.component.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../../tc.module.css';
 interface GridProps {
     cols?: number;
     children?: React.ReactNode;

package/lib/src/core-components/atoms/grid/grid.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/grid/grid.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAInD,CAAC"}
+{"version":3,"file":"grid.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/grid/grid.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAInD,CAAC"}

package/lib/src/core-components/atoms/grid/grid.component.js

@@ -1,3 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import '../../../tc.module.css';
-export const Grid = (props) => (_jsx("div", { className: `xl:grid sm:inline-block grid-cols-${props.cols || 1} gap-3`, children: props.children }));
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
+export const Grid = (props) => (_jsx("div", { className: cn(s[`xl:grid`], s[`sm:inline-block`], s[`grid-cols-${props.cols || 1}`], s[`gap-3`]), children: props.children }));

package/lib/src/core-components/atoms/icons/icons.component.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { IconBaseProps } from 'react-icons/lib';
-import '../../../tc.module.css';
 interface IconProps {
     nameIcon: string;
     propsIcon?: IconBaseProps;

package/lib/src/core-components/atoms/icons/icons.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,wBAAwB,CAAC;AAEhC,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,eAAO,MAAM,IAAI,0DAMd,SAAS,KAAG,WA2Cd,CAAC"}
+{"version":3,"file":"icons.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/icons/icons.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAI9C,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,eAAO,MAAM,IAAI,0DAMd,SAAS,KAAG,WA4Cd,CAAC"}

package/lib/src/core-components/atoms/icons/icons.component.js

@@ -3,7 +3,8 @@ import { Suspense } from 'react';
 import _ from 'lodash';
 import { Tooltip } from '../tooltip/tooltip.component';
 import loadable from '@loadable/component';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 let lib = 'md';
 export const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onClick, }) => {
     try {
@@ -24,10 +25,10 @@ export const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onC
             ElementIcon = loadable(() => import('react-icons/fa'), {
                 resolveComponent: (el) => el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
             });
-        return (_jsx("div", { onClick: () => {
+        return (_jsx("div", { className: cn(s.iconContainer), onClick: () => {
                 if (!isDisable)
                     onClick && onClick();
-            }, children: !_.isEmpty(tooltip) ? (_jsx(Tooltip, { content: tooltip, children: _jsx(ElementIcon, { ...iconProps }) })) : (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ElementIcon, { ...iconProps }) })) }));
+            }, children: !_.isEmpty(tooltip) ? (_jsx(Tooltip, { content: tooltip, children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon) }) })) : (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon) }) })) }));
     }
     catch (error) {
         return _jsx(_Fragment, {});

package/lib/src/core-components/atoms/input/input-otp.component.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import './input-otp.styles.css';
-import '../../../tc.module.css';
 interface PinInputGridProps {
     title?: string;
     hasError?: boolean;

package/lib/src/core-components/atoms/input/input-otp.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input-otp.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,wBAAwB,CAAC;AAChC,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAE/B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyFhD,CAAC"}
+{"version":3,"file":"input-otp.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input-otp.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAE/B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkHhD,CAAC"}

package/lib/src/core-components/atoms/input/input-otp.component.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable no-console */
 import { useEffect, useRef } from 'react';
-import './input-otp.styles.css';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const InputOtp = ({ className, pin, onPinChanged, }) => {
     const pinLength = 6;
     const Pin_Min_Value = 0;
@@ -45,7 +45,7 @@ export const InputOtp = ({ className, pin, onPinChanged, }) => {
             onPinChanged(undefined, index);
         }
     };
-    return (_jsx("div", { className: `${className} relative`, children: _jsx("div", { className: "flex space-x-1 bg-background-secondary rounded-lg outline-offset-8", children: Array.from({ length: pinLength }, (_, index) => (_jsx("input", { "data-testid": "onPinChanged", className: "pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none  font-arimaRegular", onKeyDown: (event) => onKeyDown(event, index), onMouseUp: () => {
+    return (_jsx("div", { className: cn(className, s['relative']), children: _jsx("div", { className: cn(s['flex'], s['space-x-1'], s['bg-background-secondary'], s['rounded-lg'], s['outline-offset-8']), children: Array.from({ length: pinLength }, (_, index) => (_jsx("input", { "data-testid": "onPinChanged", className: cn(s['pt-3'], s['pb-2'], s['block'], s['w-full'], s['px-0'], s['text-5xl'], s['font-extrabold'], s['border-b-0'], s['text-orange'], s['mt-0'], s['bg-transparent'], s['text-center'], s['z-20'], s['appearance-none'], s['focus:outline-none'], s['font-arimaRegular']), onKeyDown: (event) => onKeyDown(event, index), onMouseUp: () => {
                     if (pin.join('').length <= 0) {
                         changePinFocus(0);
                     }

package/lib/src/core-components/atoms/input/input-pin.component.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import './input.styles.css';
-import '../../../tc.module.css';
 interface PinInputGridProps {
     title: string;
     hasError?: any;

package/lib/src/core-components/atoms/input/input-pin.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-pin.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input-pin.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAE5B,OAAO,wBAAwB,CAAC;AAEhC,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+HhD,CAAC"}
+{"version":3,"file":"input-pin.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input-pin.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0KhD,CAAC"}

package/lib/src/core-components/atoms/input/input-pin.component.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable */
 import { useRef, useState } from 'react';
 import './input.styles.css';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, hasError, onPinChanged, }) => {
     const pin = useRef([]);
     const [reload, setReload] = useState(false);
@@ -59,7 +60,7 @@ export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, h
             onPinChanged(undefined, index);
         }
     };
-    return (_jsxs("div", { className: `${className} relative`, children: [_jsx("label", { className: "duration-300  -z-1 origin-0 text-gray-dark-secondary font-arimaRegular text-md", children: title }), _jsx("div", { className: "flex  space-x-1", children: Array.from({ length: pinLength }, (_, index) => (_jsxs("div", { className: "flex space-x-1 max-w-full items-stretch", children: [_jsx("input", { "data-testid": "inputElementPin", type: "tel", className: "pb-2 block  w-4  px-0 mt-0 bg-transparent text-center border-0 border-b z-20 appearance-none rounded-none focus:outline-none  focus:ring-0 focus:border-gray-secondary border-gray-secondary font-arimaRegular ", onKeyUp: (event) => onKeyDown(event, index), onMouseUp: () => {
+    return (_jsxs("div", { className: cn(className, s.relative), children: [_jsx("label", { className: cn(s['duration-300'], s['-z-1'], s['origin-0'], s['text-gray-dark-secondary'], s['font-arimaRegular'], s['text-md']), children: title }), _jsx("div", { className: cn(s.flex, s['space-x-1']), children: Array.from({ length: pinLength }, (_, index) => (_jsxs("div", { className: cn(s.flex, s['space-x-1'], s['max-w-full'], s['items-stretch']), children: [_jsx("input", { "data-testid": "inputElementPin", type: "tel", className: cn(s['pb-2'], s.block, s['w-4'], s['px-0'], s['mt-0'], s['bg-transparent'], s['text-center'], s['border-0'], s['border-b'], s['z-20'], s['appearance-none'], s['rounded-none'], s['focus:outline-none'], s['focus:ring-0'], s['focus:border-gray-secondary'], s['border-gray-secondary'], s['font-arimaRegular']), onKeyUp: (event) => onKeyDown(event, index), onMouseUp: () => {
                                 if (pin.current.join('').length <= 0) {
                                     changePinFocus(0);
                                 }
@@ -71,5 +72,5 @@ export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, h
                                 if (el) {
                                     inputRefs.current[index] = el;
                                 }
-                            }, onChange: (event) => onChange(event, index), value: pin.current[index]?.toString() || '' }, index), _jsx("div", { className: "invisible", children: (index + 1) % 4 === 0 ? 'ss' : null })] }, index))) }), hasError && hasError?.type !== 'required' && (_jsx("span", { className: "text-sm text-red text-4xs font-arimaRegular", id: "error", children: `${errorMsg || ''}` })), (!hasError || hasError?.type === 'required') && (_jsx("span", { className: "text-sm text-4xs font-arimaRegular", id: "error", children: `${defaultMsg || ''}` }))] }));
+                            }, onChange: (event) => onChange(event, index), value: pin.current[index]?.toString() || '' }, index), _jsx("div", { className: s.invisible, children: (index + 1) % 4 === 0 ? 'ss' : null })] }, index))) }), hasError && hasError?.type !== 'required' && (_jsx("span", { className: cn(s['text-sm'], s['text-red'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: `${errorMsg || ''}` })), (!hasError || hasError?.type === 'required') && (_jsx("span", { className: cn(s['text-sm'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: `${defaultMsg || ''}` }))] }));
 };

package/lib/src/core-components/atoms/input/input.component.d.ts

@@ -1,5 +1,4 @@
 import './input.styles.css';
-import '../../../tc.module.css';
 interface InputProps {
     title: string;
     defaultValue: string;

package/lib/src/core-components/atoms/input/input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input.component.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,wBAAwB,CAAC;AAChC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,KAAK,wIAaf,UAAU,4CAyCZ,CAAC"}
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input.component.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAI5B,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,KAAK,wIAaf,UAAU,4CAyCZ,CAAC"}

package/lib/src/core-components/atoms/input/input.component.js

@@ -2,14 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-console */
 import { useState } from 'react';
 import './input.styles.css';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const Input = ({ title, defaultValue, className, disable, hasError, errorMsg, defaultMsg, inputStyle, autoComplete, maxlength = 40, onChange, onBlur, }) => {
     const [value, setValue] = useState(defaultValue);
     const onKeyUpValue = (event) => {
         onChange(event.target.value);
     };
-    return (_jsxs("div", { className: `${className} relative`, children: [_jsx("input", { "data-testid": "inputElement", type: "text", name: "name", value: value, placeholder: " ", disabled: disable, className: `pt-3 pb-2 bg-transparent block w-full px-0 mt-0  rounded-none  border-0 border-b appearance-none focus:outline-none focus:ring-0 focus:border-gray-secondary border-gray-secondary font-arimaRegular ${inputStyle}`, onChange: (e) => {
+    return (_jsxs("div", { className: cn(className, s.relative), children: [_jsx("input", { "data-testid": "inputElement", type: "text", name: "name", value: value, placeholder: " ", disabled: disable, className: cn(s['pt-3'], s['pb-2'], s['bg-transparent'], s['block'], s['w-full'], s['px-0'], s['mt-0'], s['rounded-none'], s['border-0'], s['border-b'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['focus:border-gray-secondary'], s['border-gray-secondary'], s['font-arimaRegular'], inputStyle), onChange: (e) => {
                     setValue(e.target.value);
                     onChange && onChange(e.target.value);
-                }, onKeyUp: onKeyUpValue, onBlur: (e) => onBlur && onBlur(e.target.value), autoComplete: autoComplete, maxLength: maxlength }), _jsx("label", { className: "absolute duration-300 top-3 -z-1 origin-0 text-gray-dark-secondary font-arimaRegular text-md", children: title }), hasError && hasError?.type !== 'required' && (_jsx("span", { className: "text-sm text-red text-4xs", id: "error", children: `${errorMsg || ''}` })), (!hasError || hasError?.type === 'required') && (_jsx("span", { className: "text-sm text-4xs", id: "error", children: `${defaultMsg || ''}` }))] }));
+                }, onKeyUp: onKeyUpValue, onBlur: (e) => onBlur && onBlur(e.target.value), autoComplete: autoComplete, maxLength: maxlength }), _jsx("label", { className: cn(s['absolute'], s['duration-300'], s['top-3'], s['-z-1'], s['origin-0'], s['text-gray-dark-secondary'], s['font-arimaRegular'], s['text-md']), children: title }), hasError && hasError?.type !== 'required' && (_jsx("span", { className: cn(s['text-sm'], s['text-red'], s['text-4xs']), id: "error", children: `${errorMsg || ''}` })), (!hasError || hasError?.type === 'required') && (_jsx("span", { className: cn(s['text-sm'], s['text-4xs']), id: "error", children: `${defaultMsg || ''}` }))] }));
 };

package/lib/src/core-components/atoms/input-dropdown/input-dropdown.component.d.ts

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 interface InputDropdownProps {
     title: string;
     items: Array<string>;

package/lib/src/core-components/atoms/input-dropdown/input-dropdown.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input-dropdown/input-dropdown.component.tsx"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC;AAChC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,aAAa,qDAMvB,kBAAkB,4CA0EpB,CAAC"}
+{"version":3,"file":"input-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input-dropdown/input-dropdown.component.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,aAAa,qDAMvB,kBAAkB,4CAuHpB,CAAC"}

package/lib/src/core-components/atoms/input-dropdown/input-dropdown.component.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { UpArrow, DownArrow } from '../../../library/assets/svg';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState('');
@@ -22,10 +23,10 @@ export const InputDropdown = ({ items, className, hasError, title, onChange, })
     };
     const wrapperRef = useRef(null);
     useOutsideAlerter(wrapperRef);
-    return (_jsxs("div", { className: `${className} relative`, children: [_jsxs("div", { className: "flex flex-row items-center ", children: [_jsx("input", { type: "text", name: "name", placeholder: title, value: value, className: " pt-3 pb-2  w-full px-0 mt-0 bg-transparent border-gray-secondary border-0 border-b appearance-none focus:outline-none focus:ring-0 font-arimaRegular text-md", onClick: () => {
+    return (_jsxs("div", { className: cn(className, s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center']), children: [_jsx("input", { type: "text", name: "name", placeholder: title, value: value, className: cn(s['pt-3'], s['pb-2'], s['w-full'], s['px-0'], s['mt-0'], s['bg-transparent'], s['border-gray-secondary'], s['border-0'], s['border-b'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['font-arimaRegular'], s['text-md']), onClick: () => {
                             setIsOpen(!isOpen);
-                        }, onChange: (event) => onChange && onChange(event.target.value) }), !isOpen && (_jsx("img", { src: UpArrow, className: "absolute h-4 w-4 right-0" })), isOpen && (_jsx("img", { src: DownArrow, className: "absolute h-4 w-4 right-0" }))] }), isOpen && (_jsx("div", { className: "z-10  w-full absolute text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700", ref: wrapperRef, children: _jsx("ul", { className: "py-1", children: items.map((item, index) => (_jsx("li", { className: "block py-2 px-4 text-md  hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200   font-arimaRegular", onClick: () => {
+                        }, onChange: (event) => onChange && onChange(event.target.value) }), !isOpen && (_jsx("img", { src: UpArrow, className: cn(s['absolute'], s['h-4'], s['w-4'], s['right-0']) })), isOpen && (_jsx("img", { src: DownArrow, className: cn(s['absolute'], s['h-4'], s['w-4'], s['right-0']) }))] }), isOpen && (_jsx("div", { className: cn(s['z-10'], s['w-full'], s['absolute'], s['text-base'], s['list-none'], s['bg-white'], s['rounded'], s['divide-y'], s['divide-gray-100'], s['shadow'], s['dark:bg-gray-700']), ref: wrapperRef, children: _jsx("ul", { className: s['py-1'], children: items.map((item, index) => (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular']), onClick: () => {
                             setValue(item);
                             setIsOpen(!isOpen);
-                        }, children: item }, index))) }) })), hasError && (_jsx("span", { className: "text-primaryCharcoal text-4xs", id: "error", children: `${title} is required` }))] }));
+                        }, children: item }, index))) }) })), hasError && (_jsx("span", { className: cn(s['text-primaryCharcoal'], s['text-4xs']), id: "error", children: `${title} is required` }))] }));
 };

package/lib/src/core-components/atoms/list/list.component.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../../tc.module.css';
 interface ListProps {
     direction?: 'row' | 'col';
     space?: number;

package/lib/src/core-components/atoms/list/list.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/list/list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAwBnD,CAAC"}
+{"version":3,"file":"list.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/list/list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CA+BnD,CAAC"}

package/lib/src/core-components/atoms/list/list.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const List = (props) => {
     const spacingClass = props.space
         ? `space-${props.direction === 'col' ? 'y' : 'x'}-${props.space}`
@@ -11,5 +12,5 @@ export const List = (props) => {
         ? `items-${props.justify}`
         : 'items-center';
     const fillClass = props.fill ? 'flex-1' : '';
-    return (_jsx("span", { className: `flex flex-${props.direction || 'row'} ${spacingClass} ${paddingClass} ${backgroundClass} ${alignClass} ${fillClass} ${justifyClass}`, children: props.children }));
+    return (_jsx("span", { className: cn(s.flex, `flex-${props.direction || 'row'}`, spacingClass, paddingClass, backgroundClass, alignClass, fillClass, justifyClass), children: props.children }));
 };

package/lib/src/core-components/atoms/loader/loader.component.d.ts

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 export declare const Loader: () => import("react/jsx-runtime").JSX.Element;
 export declare const ModalLoader: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=loader.component.d.ts.map

package/lib/src/core-components/atoms/loader/loader.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/loader/loader.component.tsx"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC;AAEhC,eAAO,MAAM,MAAM,+CAMlB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAkEvB,CAAC"}
+{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/loader/loader.component.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM,+CAalB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAiHvB,CAAC"}

package/lib/src/core-components/atoms/loader/loader.component.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Container, Row, Spinner } from 'reactstrap';
-import '../../../tc.module.css';
-export const Loader = () => (_jsx(Container, { fluid: true, className: "vh-50 d-flex", children: _jsx(Row, { className: "justify-content-center align-self-center w-100 text-center", children: _jsx(Spinner, { color: "primary" }) }) }));
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
+export const Loader = () => (_jsx(Container, { fluid: true, className: cn(s['vh-50'], s['d-flex']), children: _jsx(Row, { className: cn(s['justify-content-center'], s['align-self-center'], s['w-100'], s['text-center']), children: _jsx(Spinner, { color: "primary" }) }) }));
 export const ModalLoader = () => {
-    return (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsx("div", { className: "justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none", children: _jsx("div", { className: "relative  mx-auto ", children: _jsx("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none", children: _jsxs("div", { className: "relative p-2 flex-auto flex flex-col items-center", children: [_jsx("style", { children: `
+    return (_jsx(_Fragment, { children: _jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['justify-center'], s['items-center'], s['flex'], 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['mx-auto']), children: _jsx("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-full'], s['bg-white'], s['outline-none'], s['focus:outline-none']), children: _jsxs("div", { className: cn(s['relative'], s['p-2'], s['flex-auto'], s['flex'], s['flex-col'], s['items-center']), children: [_jsx("style", { children: `
     .spinner .background {
       fill: #555;
     }
@@ -35,5 +36,5 @@ export const ModalLoader = () => {
         transform: rotate(360deg);
       }
     }
-    ` }), _jsxs("svg", { className: "spinner", width: "100", height: "100", viewBox: "0 0 100 100", children: [_jsx("circle", { className: "background", cx: "0", cy: "0" }), _jsx("path", { className: "line", d: "M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50" })] }), ' ', _jsx("span", { style: { marginTop: -15 }, children: "loading ..." })] }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }) }));
+    ` }), _jsxs("svg", { className: cn(s['spinner']), width: "100", height: "100", viewBox: "0 0 100 100", children: [_jsx("circle", { className: cn(s['background']), cx: "0", cy: "0" }), _jsx("path", { className: cn(s['line']), d: "M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50" })] }), ' ', _jsx("span", { style: { marginTop: -15 }, children: "loading ..." })] }) }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black']) })] }) }));
 };

package/lib/src/core-components/atoms/radio/radio.component.d.ts

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 interface RadioProps {
     title: string;
     data: Array<any>;

package/lib/src/core-components/atoms/radio/radio.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/radio/radio.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAChC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,0CAKf,UAAU,4CAgCZ,CAAC"}
+{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/radio/radio.component.tsx"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,0CAKf,UAAU,4CAuCZ,CAAC"}

package/lib/src/core-components/atoms/radio/radio.component.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { CheckedRadio, UncheckRadio } from '../../../library/assets/svg';
 import { InputWrapper } from '../form/form.component';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const Radio = ({ title = 'Source', data = [], className, onChange, }) => {
     const [list, setList] = useState(data);
     const width = 20;
-    return (_jsx(_Fragment, { children: _jsx(InputWrapper, { label: title, children: list?.map((item, index) => (_jsx("div", { className: `${className} flex items-center mb-1`, onClick: () => {
+    return (_jsx(_Fragment, { children: _jsx(InputWrapper, { label: title, children: list?.map((item, index) => (_jsx("div", { className: cn(className, s['flex'], s['items-center'], s['mb-1']), onClick: () => {
                     const result = list?.map((e, i) => {
                         if (i == index)
                             return { ...e, checked: true };
@@ -15,5 +16,5 @@ export const Radio = ({ title = 'Source', data = [], className, onChange, }) =>
                     });
                     setList(result);
                     onChange(result?.find((item) => item.checked));
-                }, children: _jsxs("div", { className: "flex flex-row gap-1 items-center", children: [item.checked ? (_jsx(CheckedRadio, { width: width, height: width })) : (_jsx(UncheckRadio, { width: width, height: width })), _jsx("span", { className: "text-4xs", children: item?.title })] }) }, index))) }) }));
+                }, children: _jsxs("div", { className: cn(s['flex'], s['flex-row'], s['gap-1'], s['items-center']), children: [item.checked ? (_jsx(CheckedRadio, { width: width, height: width })) : (_jsx(UncheckRadio, { width: width, height: width })), _jsx("span", { className: cn(s['text-4xs']), children: item?.title })] }) }, index))) }) }));
 };

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

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 interface StepperProps {
     className?: string;
     steps: Array<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/stepper/stepper.component.tsx"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAEhC,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,WAAW,KAAA,EAAE,KAAK,KAAA,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oDAKjB,YAAY,4CAyDd,CAAC"}
+{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/stepper/stepper.component.tsx"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,WAAW,KAAA,EAAE,KAAK,KAAA,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oDAKjB,YAAY,4CA0Hd,CAAC"}

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

@@ -1,29 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }) => {
-    const finalClass = `${className} w-full px-4 sm:px-8`;
-    const progressClass = 'absolute my-4 top-1/2 left-0 h-0.5  transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500';
+    const finalClass = cn(className, s['w-full'], s['px-4'], s['sm:px-8']);
+    const progressClass = cn(s['absolute'], s['my-4'], s['top-1/2'], s['left-0'], s['h-0.5'], s['transform'], s['-translate-y-1/2'], s['bg-orange'], s['transition-width'], s['ease-in-out'], s['duration-500']);
     const Steps = steps?.map((step, index) => {
-        let stepClass = 'inline-block transform -translate-x-1/2 pt-1 w-8 h-8 rounded-full text-center';
+        let stepClass = cn(s['inline-block'], s['transform'], s['-translate-x-1/2'], s['pt-1'], s['w-8'], s['h-8'], s['rounded-full'], s['text-center']);
         if (index < currentStep)
-            stepClass +=
-                ' font-medium border border-orange  bg-background-secondary text-gray';
+            stepClass = cn(stepClass, s['font-medium'], s['border'], s['border-orange'], s['bg-background-secondary'], s['text-gray']);
         else if (index > currentStep)
-            stepClass +=
-                ' font-medium border border-gray-dark-secondary text-gray bg-background-secondary';
+            stepClass = cn(stepClass, s['font-medium'], s['border'], s['border-gray-dark-secondary'], s['text-gray'], s['bg-background-secondary']);
         else if (currentStep === index)
-            stepClass += ' font-medium bg-orange text-white';
+            stepClass = cn(stepClass, s['font-medium'], s['bg-orange'], s['text-white']);
         if (typeof onStepClick === 'function')
-            stepClass += ' cursor-pointer';
-        return (_jsx("div", { style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: "absolute", children: _jsx("span", { className: `${stepClass} font-arimaRegular  text-4xs text-center`, onClick: () => {
+            stepClass = cn(stepClass, s['cursor-pointer']);
+        return (_jsx("div", { style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: cn(s['absolute']), children: _jsx("span", { className: cn(stepClass, s['font-arimaRegular'], s['text-4xs'], s['text-center']), onClick: () => {
                     if (typeof onStepClick === 'function')
                         onStepClick(index + 1, step);
                 }, children: step }) }, step));
     });
-    return (_jsxs("div", { className: finalClass, children: [_jsxs("div", { className: "w-full relative", children: [_jsx("div", { className: progressClass, style: {
+    return (_jsxs("div", { className: finalClass, children: [_jsxs("div", { className: cn(s['w-full'], s['relative']), children: [_jsx("div", { className: progressClass, style: {
                             width: `${(currentStep / (steps.length - 1)) * 100}%`,
-                        }, children: _jsx("div", { className: "w-3 h-3 bg-orange rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2" }) }), _jsx("div", { className: 'absolute h-0.5 my-4 top-1/2 left-0 transform -translate-y-1/2 bg-gray-dark-secondary transition-width ease-in-out duration-500', style: {
+                        }, children: _jsx("div", { className: cn(s['w-3'], s['h-3'], s['bg-orange'], s['rounded-full'], s['absolute'], s['right-0'], s['top-1/2'], s['transform'], s['translate-x-1/2'], s['-translate-y-1/2']) }) }), _jsx("div", { className: cn(s['absolute'], s['h-0.5'], s['my-4'], s['top-1/2'], s['left-0'], s['transform'], s['-translate-y-1/2'], s['bg-gray-dark-secondary'], s['transition-width'], s['ease-in-out'], s['duration-500']), style: {
                             marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
                             width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
-                        } })] }), _jsx("div", { className: "relative sm:block", children: Steps })] }));
+                        } })] }), _jsx("div", { className: cn(s['relative'], s['sm:block']), children: Steps })] }));
 };

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

@@ -10,8 +10,9 @@ export interface TabsProps {
         content?: React.JSX.Element;
         inActive?: boolean;
     }>;
+    onSelect?: (item: any, index: number) => void;
     children: React.JSX.Element[];
 }
-export declare const Tabs: ({ options, children }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ options, onSelect, children }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=tabs.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/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,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;CAC/B;AAED,eAAO,MAAM,IAAI,0BAAyB,SAAS,4CAoDlD,CAAC"}
+{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/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,GAAG,CAAC,OAAO,EAAE,CAAC;CAC/B;AAED,eAAO,MAAM,IAAI,oCAAmC,SAAS,4CAqD5D,CAAC"}

package/lib/src/core-components/atoms/tabs/tabs.component.js

@@ -5,12 +5,13 @@ import { cn } from '../../../core-utils';
 export const Tab = ({ title, children }) => {
     return (_jsx("div", { className: cn(s.flex), children: children }, title));
 };
-export const Tabs = ({ options, children }) => {
+export const Tabs = ({ options, onSelect, children }) => {
     const [activeTab, setActiveTab] = useState(0);
     const [selected, setSelected] = useState(options[0].title);
     const tabs = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
     return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s.flex, s['flex-col'], s['w-full']), children: [_jsx("div", { className: cn(s.flex, s['border-b']), children: options?.map((tab, index) => (_jsx("button", { type: "button", className: cn(s['py-2'], s['px-4'], s['mr-1'], s['border-none'], s['rounded-t-md'], s['shadow-inner'], s['cursor-pointer'], activeTab === index && s['bg-blue-500'], activeTab === index && s['border-none'], activeTab === index && s['text-white']), onClick: () => {
                             setSelected(tab?.title);
+                            onSelect && onSelect(tab, index);
                             !tab.inActive && setActiveTab(index);
                         }, disabled: tab.inActive, children: tab.title }, index))) }), _jsx("div", { className: cn(s['p-2'], s.border, s['border-solid'], s['border-slate-600'], s['rounded-b-md']), children: options[activeTab]?.content
                         ? options[activeTab]?.content

package/lib/src/core-components/atoms/timer/timer.component.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../../tc.module.css';
 interface TimerProps {
     onClear: () => void;
 }

package/lib/src/core-components/atoms/timer/timer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timer.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/timer/timer.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,wBAAwB,CAAC;AAEhC,UAAU,UAAU;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAGD,eAAO,MAAM,KAAK,wEA8EjB,CAAC"}
+{"version":3,"file":"timer.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/timer/timer.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAK3E,UAAU,UAAU;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAGD,eAAO,MAAM,KAAK,wEA8EjB,CAAC"}

package/lib/src/core-components/atoms/timer/timer.component.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import React, { useEffect, useState, useImperativeHandle } from 'react';
 import { TimerSVG } from '../../../library/assets/svg';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 // eslint-disable-next-line react/display-name
 export const Timer = React.forwardRef(({ onClear }, ref) => {
     const width = 15;
@@ -71,5 +72,5 @@ export const Timer = React.forwardRef(({ onClear }, ref) => {
             };
         },
     }));
-    return (_jsxs("div", { className: "flex flex-row items-center", children: [_jsx(TimerSVG, { width: width, height: width, fill: "#E7503D" }), _jsxs("div", { className: "ml-2 flex flex-row", children: [_jsxs("span", { children: [minute, ":"] }), _jsx("span", { children: second })] })] }));
+    return (_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center']), children: [_jsx(TimerSVG, { width: width, height: width, fill: "#E7503D" }), _jsxs("div", { className: cn(s['ml-2'], s['flex'], s['flex-row']), children: [_jsxs("span", { children: [minute, ":"] }), _jsx("span", { children: second })] })] }));
 });

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

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
     uniqueField?: string;
     isSelectedStringArray?: boolean;

package/lib/src/core-components/molecules/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/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC;AAEhC,UAAU,0DAA0D;IAClE,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,4CA4J5D,CAAC"}
+{"version":3,"file":"auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAMA,UAAU,0DAA0D;IAClE,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,4CA0L5D,CAAC"}

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

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable  */
 import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
-import '../../../tc.module.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../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, }) => {
     const [value, setValue] = useState('');
     const [options, setOptions] = useState();
@@ -71,20 +72,20 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
             onFilter && onFilter(search);
         }
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: `flex items-center leading-4 p-2 focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red' : 'border-gray-300'} rounded-md`, children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
+    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-2'], hasError ? s['border-red'] : s['border-gray-300'], s['rounded-md']), 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: `w-full focus:outline-none bg-none`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                    : 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: {
                                 color: '#000000',
                                 size: 22,
                             } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
                                 color: '#000000',
                                 size: 22,
                             } }))] }), options && isListOpen
-                    ? options?.length > 0 && (_jsx("div", { className: "flex mt-1  absolute  rounded-sm z-500 w-full", style: { zIndex: 80 }, children: _jsx("ul", { className: "flex  flex-col gap-2  bg-gray-200 p-2 w-full", children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: 'flex gap-4 p-2"', children: _jsxs("label", { className: "flex", children: [_jsx("input", { id: index?.toString(), className: "flex h-4 w-4", type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }), ' ', _jsx("span", { className: "flex h-4 ml-2", children: data.displayKey
+                    ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['rounded-sm'], s['z-500'], s['w-full']), style: { zIndex: 80 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-2'], s['bg-gray-200'], s['p-2'], s['w-full']), children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: cn(s['flex'], s['gap-4'], s['p-2']), children: _jsxs("label", { className: cn(s['flex']), 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['h-4'], s['ml-2']), children: data.displayKey
                                                     .map((key) => `${item[key]}
                               `)
                                                     .join(' - ') })] }) }, index) }))) }) }))

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

@@ -8,10 +8,11 @@ interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     hasError?: boolean;
     className?: string;
     posstion?: string;
+    keyboard?: string;
     onFilter?: (item: any) => void;
     onSelect?: (item: any) => any;
     onBlur?: (item: any) => any;
 }
-export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, keyboard, 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/molecules/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/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAEhC,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,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,qHAY1D,qDAAqD,4CA8JvD,CAAC"}
+{"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAEhC,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,4CA8JvD,CAAC"}

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
 import '../../../tc.module.css';
-export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', onFilter, onSelect, onBlur, }) => {
+export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', onFilter, onSelect, onBlur, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState(data.list);
     const [isListOpen, setIsListOpen] = useState(false);
@@ -55,7 +55,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
             }
         }
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: `flex items-center leading-4 p-2 focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red' : 'border-gray-300'} rounded-md dark:text-black`, children: [_jsx("input", { placeholder: placeholder, value: value, className: `${className} w-full focus:outline-none bg-none dark:text-black`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: `flex items-center leading-4 p-2 focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red' : 'border-gray-300'} rounded-md dark:text-black`, children: [_jsx("input", { placeholder: placeholder, type: keyboard, value: value, className: `${className} w-full focus:outline-none bg-none dark:text-black`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
                                 color: '#000000',
                                 size: 22,
                             } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts

@@ -1,4 +1,3 @@
-import '../../../tc.module.css';
 interface AutocompleteGroupByProps {
     data: any[];
     onChange?: (item: any, children: any) => void;

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-complete-group-by.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAChC,UAAU,wBAAwB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,4CA2MlE,CAAC"}
+{"version":3,"file":"auto-complete-group-by.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,4CA2MlE,CAAC"}

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable  */
 import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
-// import PerfectScrollbar from 'react-perfect-scrollbar';
-import '../../../tc.module.css';
 export const AutocompleteGroupBy = (props) => {
     //const [userRouter, setUserRouter] = useState<any>()
     const [value, setValue] = useState(props.displayValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.43",
+  "version": "0.2.45",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -24,6 +24,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "rm -rf docs-build && storybook build -o docs-build",
     "deploy-storybook": "gh-pages -d docs-build",
+    "serve-storybook": "npm run build-storybook -- -o ./docs-build && npx http-server ./docs-build",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "prettier": "prettier --write '**/*.{js,jsx}'",
@@ -45,7 +46,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.113",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "buffer": "^6.0.3",
@@ -83,13 +84,13 @@
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.9",
     "@testing-library/react": "^16.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-c8": "^0.31.4",
     "@vitest/ui": "^0.31.4",
     "autoprefixer": "^10.4.19",
     "copyfiles": "^2.4.1",
     "craco-alias": "^3.0.1",
     "css-loader": "^7.1.2",
-    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.14.0",
     "eslint-plugin-storybook": "^0.8.0",
     "gh-pages": "^3.2.3",
@@ -102,11 +103,11 @@
     "sass": "^1.77.5",
     "sass-loader": "^14.2.1",
     "storybook": "^8.0.6",
+    "storybook-css-modules": "^1.0.8",
     "storybook-multilevel-sort": "^2.0.1",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
-    "webpack": "^5.72.0",
     "vite": "^5.0.11",
     "vite-plugin-css-injected-by-js": "^3.1.1",
     "vite-plugin-dts": "^2.3.0",
@@ -115,7 +116,8 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.31.4",
-    "vitest-dom": "^0.1.0"
+    "vitest-dom": "^0.1.0",
+    "webpack": "^5.72.0"
   },
   "eslintConfig": {
     "extends": [