react-restyle-components 0.2.37 → 0.2.39

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.36",
+  "version": "0.2.38",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -71,6 +71,7 @@
     "@storybook/addon-interactions": "^8.0.6",
     "@storybook/addon-links": "^8.0.6",
     "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-themes": "^8.4.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.0.6",

package/lib/src/App.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './App.css';
-import { Tab, Tabs } from './core-components';
+import { Tab, Tabs } from './core-components/atoms/tabs/_tabs.component';
 function App() {
     const [color, setColor] = useState('#aabbcc');
     return (React.createElement("div", { className: "flex flex-col gap-4 p-4" },

package/lib/src/core-components/atoms/button/Button.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TooltipProvider } from '../tooltip/tooltip.component';
-import { Button } from './button.component';
+import { Button } from './_button.component';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
     title: 'Design System/Atoms/Button',

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonProps } from './Button.types';
+import '../../../tc.module.css';
+/**
+ * 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>>;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { forwardRef } from 'react';
+import { Tooltip } from '../tooltip/tooltip.component';
+import '../../../tc.module.css';
+/**
+ * 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'
+        ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
+        : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
+    const button = (React.createElement("button", { ref: ref, ...args, className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disabled ? 'opacity-50' : 'opacity-100'}`, type: type, disabled: disabled }, children));
+    if (tooltip) {
+        return React.createElement(Tooltip, { content: tooltip }, button);
+    }
+    else {
+        return button;
+    }
+});
+Button.displayName = 'Button';

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
-import '../../../tc.css';
 /**
  * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
  */

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

@@ -1,15 +1,16 @@
 import React from 'react';
 import { forwardRef } from 'react';
 import { Tooltip } from '../tooltip/tooltip.component';
-import '../../../tc.css';
+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'
-        ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
-        : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
-    const button = (React.createElement("button", { ref: ref, ...args, className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disabled ? 'opacity-50' : 'opacity-100'}`, type: type, disabled: disabled }, children));
+        ? 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 = (React.createElement("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));
     if (tooltip) {
         return React.createElement(Tooltip, { content: tooltip }, button);
     }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ReactNode } from 'react';
-import '../../../../tc.css';
+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.js

@@ -1,3 +1,3 @@
 import React from 'react';
-import '../../../../tc.css';
+import '../../../../tc.module.css';
 export const ButtonGroup = ({ children, orientation = 'horizontal', className, }) => (React.createElement("div", { className: `flex ${orientation == 'horizontal' ? 'flex-row' : 'flex-col'} w-fit gap-2 ${className}` }, children));

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 import { UnCheckbox, CheckedBox } from '../../../library/assets/svg';
 import { InputWrapper } from '../form/form.component';
 export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked: false }], className, onChange, }) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+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.js

@@ -1,5 +1,5 @@
 import React, { useState, forwardRef } from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { DatePickerSvg } from '../../../library/assets/svg';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface LabelProps {
     htmlFor: string;
     hasError?: boolean;

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Label = (props) => (React.createElement(React.Fragment, null,
     React.createElement("label", { htmlFor: props.htmlFor, className: `${props.hasError ? 'text-red-400' : 'text-current'} block text-3xs font-medium  mb-1`, style: { ...props.style } }, props.children)));
 export const InputWrapper = (props) => (React.createElement("div", { className: props.className, ref: props.ref },

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

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

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Grid = (props) => (React.createElement("div", { className: `xl:grid sm:inline-block grid-cols-${props.cols || 1} gap-3` }, props.children));

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

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

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

@@ -2,7 +2,7 @@ import React, { Suspense } from 'react';
 import _ from 'lodash';
 import { Tooltip } from '../tooltip/tooltip.component';
 import loadable from '@loadable/component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 let lib = 'md';
 export const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onClick, }) => {
     try {

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

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

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useEffect, useRef } from 'react';
 import './input-otp.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const InputOtp = ({ className, pin, onPinChanged, }) => {
     const pinLength = 6;
     const Pin_Min_Value = 0;

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

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

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

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React, { useRef, useState } from 'react';
 import './input.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, hasError, onPinChanged, }) => {
     const pin = useRef([]);
     const [reload, setReload] = useState(false);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './input.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface InputProps {
     title: string;
     defaultValue: string;

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useState } from 'react';
 import './input.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Input = ({ title, defaultValue, className, disable, hasError, errorMsg, defaultMsg, inputStyle, autoComplete, maxlength = 40, onChange, onBlur, }) => {
     const [value, setValue] = useState(defaultValue);
     const onKeyUpValue = (event) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface InputDropdownProps {
     title: string;
     items: Array<string>;

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { UpArrow, DownArrow } from '../../../library/assets/svg';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState('');

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const List = (props) => {
     const spacingClass = props.space
         ? `space-${props.direction === 'col' ? 'y' : 'x'}-${props.space}`

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export declare const Loader: () => React.JSX.Element;
 export declare const ModalLoader: () => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Container, Row, Spinner } from 'reactstrap';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Loader = () => (React.createElement(Container, { fluid: true, className: "vh-50 d-flex" },
     React.createElement(Row, { className: "justify-content-center align-self-center w-100 text-center" },
         React.createElement(Spinner, { color: "primary" }))));

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

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

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { CheckedRadio, UncheckRadio } from '../../../library/assets/svg';
 import { InputWrapper } from '../form/form.component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Radio = ({ title = 'Source', data = [], className, onChange, }) => {
     const [list, setList] = useState(data);
     const width = 20;

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 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';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TabProps {
+    title: string;
+    children: React.JSX.Element;
+}
+export declare const Tab: ({ title, children }: TabProps) => React.JSX.Element;
+export interface TabsProps {
+    options: Array<{
+        title: string;
+        content?: React.JSX.Element;
+        inActive?: boolean;
+    }>;
+    children: React.JSX.Element[];
+}
+export declare const Tabs: ({ options, children }: TabsProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { cn } from '../../../core-utils';
+export const Tab = ({ title, children }) => {
+    return (React.createElement("div", { className: cn('flex'), key: title }, children));
+};
+export const Tabs = ({ options, 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 (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: cn('flex flex-col w-full') },
+            React.createElement("div", { className: cn('flex border-b') }, options?.map((tab, index) => (React.createElement("button", { type: "button", key: index, className: cn('py-2', 'px-4', 'mr-1', 'border-none', 'rounded-t-md', 'shadow-inner', 'cursor-pointer', activeTab === index && 'bg-blue-500', activeTab === index && 'border-none', activeTab === index && 'text-white'), onClick: () => {
+                    setSelected(tab?.title);
+                    !tab.inActive && setActiveTab(index);
+                }, disabled: tab.inActive }, tab.title)))),
+            React.createElement("div", { className: cn('p-2', 'border', 'border-solid', 'border-slate-600', 'rounded-b-md') }, options[activeTab]?.content
+                ? options[activeTab]?.content
+                : tabs[options?.findIndex((item) => item.title === selected)]))));
+};

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

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-// import s from './tabs.module.css';
 import s from '../../../tc.module.css';
 import { cn } from '../../../core-utils';
 export const Tab = ({ title, children }) => {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from './tabs.component';
+import { Tabs } from './_tabs.component';
 declare const meta: Meta<typeof Tabs>;
 export default meta;
 type Story = StoryObj<typeof Tabs>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tabs, Tab } from './tabs.component';
+import { Tabs, Tab } from './_tabs.component';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
     title: 'Design System/Atoms/Tabs',

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

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

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

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import React, { useEffect, useState, useImperativeHandle } from 'react';
 import { TimerSVG } from '../../../library/assets/svg';
-import '../../../tc.css';
+import '../../../tc.module.css';
 // eslint-disable-next-line react/display-name
 export const Timer = React.forwardRef(({ onClear }, ref) => {
     const width = 15;

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

@@ -1 +1,2 @@
+export * from './atoms/button/button.component';
 export * from './atoms/tabs/tabs.component';

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

@@ -1,5 +1,5 @@
 // import * as Form from './atoms/form/form.component';
-// export * from './atoms/button/button.component';
+export * from './atoms/button/button.component';
 // export * from './atoms/button/buttonGroup/buttonGroup.component';
 // export * from './atoms/check-box/checkBox.component';
 // export * from './atoms/date-picker/date-picker.component';

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,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+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.js

@@ -1,7 +1,7 @@
 /* eslint-disable  */
 import React, { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 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();

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     loader?: boolean;
     disable?: boolean;

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

@@ -1,7 +1,7 @@
 /* eslint-disable  */
 import React, { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', onFilter, onSelect, onBlur, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState(data.list);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+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.js

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
 // import PerfectScrollbar from 'react-perfect-scrollbar';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const AutocompleteGroupBy = (props) => {
     //const [userRouter, setUserRouter] = useState<any>()
     const [value, setValue] = useState(props.displayValue);

package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface AutocompleteProps {
     value: string;
     onValueChange: (value: string) => void;

package/lib/src/core-components/molecules/autocomplete/autocomplete.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 // import './autocomplete.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 const LI_ELEMENT_HEIGHT = 34;
 export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
     const [activeOption, setActiveOption] = useState(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './color-picker-modal.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface ColorPickerModalProps {
     color: string;
     onChange: (color: string) => void;

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

@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useClickOutside } from '../../../hooks';
 import './color-picker-modal.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const ColorPickerModal = ({ color, onChange, onClose, }) => {
     const popover = useRef();
     const [isOpen, toggle] = useState(false);

package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface CSSMultilineProps {
     label?: string;
     defaultValue?: string;

package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import * as Form from '../../atoms/form/form.component';
 import { properties as propertiesObj } from './css-properties';
-import '../../../tc.css';
+import '../../../tc.module.css';
 const mapToArray = (arr) => {
     const res = [];
     arr.forEach(function (obj, index) {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface MultiSelectProps {
     options: Array<string>;
     selectedItems?: Array<string>;

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);

package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 export const MultiSelectWithField = ({ displayField = '', options = [], selectedItems = [], hasError = false, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
-    const useOutsideAlerter = ref => {
+    const useOutsideAlerter = (ref) => {
         useEffect(() => {
             function handleClickOutside(event) {
                 if (ref.current && !ref.current.contains(event.target) && isListOpen) {
@@ -24,20 +24,20 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
     useOutsideAlerter(wrapperRef);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `flex dark:bg-boxdark dark:text-white flex-col w-full rounded-md border-2 ${hasError ? 'border-red  ' : 'border-gray-300'}`, ref: wrapperRef },
-            React.createElement("span", { className: 'p-2 mt-1 shadow-sm', onClick: () => {
+            React.createElement("span", { className: "p-2 mt-1 shadow-sm", onClick: () => {
                     setIsListOpen(!isListOpen);
                 } }, selectedOptions?.length > 0
                 ? `${selectedOptions?.length} Items`
                 : 'Select'),
             React.createElement("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}` }, options
-                ? options?.length > 0 && (React.createElement("ul", { className: 'flex flex-col gap-1 p-2' }, options?.map((item, index) => (React.createElement("li", { key: index, className: 'flex items-center' },
-                    React.createElement("input", { className: 'flex bg-black', type: 'checkbox', checked: !_.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                ? options?.length > 0 && (React.createElement("ul", { className: "flex flex-col gap-1 p-2" }, options?.map((item, index) => (React.createElement("li", { key: index, className: "flex items-center" },
+                    React.createElement("input", { className: "flex bg-black", type: "checkbox", checked: !_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
                             item[displayField]?.toUpperCase()))
                             ? true
                             : false, onChange: () => {
-                            if (!_.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                            if (!_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
                                 item[displayField]?.toUpperCase()))) {
-                                setSelectedOptions(selectedOptions?.filter(e => e[displayField]?.toUpperCase() !=
+                                setSelectedOptions(selectedOptions?.filter((e) => e[displayField]?.toUpperCase() !=
                                     item[displayField]?.toUpperCase()));
                             }
                             else {
@@ -53,6 +53,6 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
                                 onSelect(selectedOptions);
                         } }),
                     ' ',
-                    React.createElement("span", { className: 'flex ml-2  dark:text-white text-center' }, item[displayField]))))))
+                    React.createElement("span", { className: "flex ml-2  dark:text-white text-center" }, item[displayField]))))))
                 : null))));
 };