react-restyle-components 0.2.54 → 0.2.55

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "private": false,
   "description": "Easy use restyle components",
   "author": {

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

@@ -16,7 +16,7 @@ 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: 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'], {
+    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'], 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 }) }));
@@ -29,19 +29,19 @@ 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: 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'], {
+    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'], 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 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'], {
+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'], 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: 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, 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'], {
+export const InputDate = ({ name, value, 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'], {
             [s['border-red']]: hasError,
             [s['border-gray-300']]: !hasError,
         }) }) }));
@@ -54,7 +54,7 @@ export const InputDateTime = ({ type, id, label, hasError, className, min, onCha
 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: 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'], {
+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'], s['rounded-md'], {
             [s['border-red']]: props.hasError,
             [s['border-gray-300']]: !props.hasError,
         }), multiple: props.multiple }) }));

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

@@ -72,7 +72,7 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
             onFilter && onFilter(search);
         }
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], {
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
                         [s['border-red']]: hasError,
                         [s['border-gray-300']]: !hasError,
                     }, s['rounded-md']), children: [_jsx("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen

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

@@ -40,7 +40,7 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
             onFilter(search);
         });
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, 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'], {
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
                         [s['border-red']]: hasError,
                         [s['border-gray-300']]: !hasError,
                     }, s['rounded-md']), children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onChange: handleInputChange, onClick: () => setIsListOpen(true), disabled: disable }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {

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

@@ -57,7 +57,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, 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: {
+    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 ${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,10 +1,10 @@
 interface AutocompleteGroupByProps {
     data: any[];
-    onChange?: (item: any, children: any) => void;
     hasError?: boolean;
     displayValue?: string;
+    onChange?: (item: any, children: any) => void;
     onClose?: () => void;
 }
-export declare const AutocompleteGroupBy: (props: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteGroupBy: ({ data, hasError, displayValue, onChange, onClose, }: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=auto-complete-group-by.component.d.ts.map

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":"AAMA,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,4CAyPlE,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":"AAMA,UAAU,wBAAwB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,yDAM7B,wBAAwB,4CAqP1B,CAAC"}

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

@@ -4,9 +4,9 @@ import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
 import s from '../../../tc.module.css';
 import { cn } from '../../../core-utils';
-export const AutocompleteGroupBy = (props) => {
+export const AutocompleteGroupBy = ({ data = [], hasError = false, displayValue = '', onChange, onClose, }) => {
     //const [userRouter, setUserRouter] = useState<any>()
-    const [value, setValue] = useState(props.displayValue);
+    const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState();
     const [isListOpen, setIsListOpen] = useState(false);
     const useOutsideAlerter = (ref) => {
@@ -31,11 +31,11 @@ export const AutocompleteGroupBy = (props) => {
     const wrapperRef = useRef(null);
     useOutsideAlerter(wrapperRef);
     useEffect(() => {
-        setValue(props.displayValue);
-    }, [props.displayValue]);
+        setValue(displayValue);
+    }, [displayValue]);
     useEffect(() => {
-        setOptions(props.data || []);
-    }, [props]);
+        setOptions(data || []);
+    }, [data]);
     const uniqByKeepFirst = (a, key) => {
         const seen = new Set();
         return a.filter((item) => {
@@ -74,17 +74,17 @@ export const AutocompleteGroupBy = (props) => {
             setOptions(data);
         }
     };
-    const onChange = (e) => {
+    const onChangeValue = (e) => {
         const search = e.target.value;
         setValue(search);
-        filter(search, props.data);
+        filter(search, data);
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: s['w-full'] + ' ' + s['relative'], children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['bg-white'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border-2'], {
-                        [s['border-red']]: props.hasError,
-                        [s['border-gray-300']]: !props.hasError,
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: s['w-full'] + ' ' + s['relative'], children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['bg-white'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], {
+                        [s['border-red']]: hasError,
+                        [s['border-gray-300']]: !hasError,
                     }, s['rounded-md']), children: [_jsx("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: cn(s['w-full'] + ' ' + s['focus:outline-none']), 
                             // onKeyUp={onKeyUp}
-                            onChange: onChange, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
+                            onChange: onChangeValue, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
                                     e.preventDefault();
                                     // Find the selected item and children
@@ -104,8 +104,8 @@ export const AutocompleteGroupBy = (props) => {
                                         }
                                     }
                                     // Call props.onChange with the selected item and children
-                                    if (props.onChange && selectedItem && selectedChildren) {
-                                        props.onChange(selectedItem, selectedChildren);
+                                    if (onChange && selectedItem && selectedChildren) {
+                                        onChange(selectedItem, selectedChildren);
                                     }
                                     setIsListOpen(false);
                                     setValue(value); // Set the value to what the user entered
@@ -119,8 +119,7 @@ export const AutocompleteGroupBy = (props) => {
                                 size: 22,
                             } }))] }), options && isListOpen
                     ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['z-50'], s['rounded-md'], s['bg-gray-200'], s['w-100'], s['w-full']), children: _jsx("ul", { className: cn(s['flex'], s['p-2'], s['rounded-sm'], s['w-full']), children: _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['overflow-scroll']), style: { height: 'auto', maxHeight: '350px' }, children: options?.map((item, index) => (_jsxs(_Fragment, { children: [_jsx("li", { className: cn(s['flex'] + ' ' + s['text-gray-400']), children: item.title }, index), _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['ml-4'], s['w-full']), children: item?.children?.map((children, childrenIndex) => (_jsx("li", { className: cn(s['flex'], s['hover:bg-gray-200'], s['focus:outline-none'], s['cursor-pointer'], s['w-full']), onClick: async () => {
-                                                    props.onChange &&
-                                                        props.onChange(item, children);
+                                                    onChange && onChange(item, children);
                                                     setIsListOpen(false);
                                                     setValue(children.title);
                                                     setOptions([]);

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

@@ -102,7 +102,7 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
         filteredOptions[0] && onValueChange(filteredOptions[0]);
         // setShouldShowList(true);
     }, []);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col relative", children: [_jsx("div", { className: "flex leading-4 p-2  focus:outline-none focus:ring w-full shadow-sm sm:text-base border-2 rounded-md", children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: "flex focus:outline-none", placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col relative", children: [_jsx("div", { className: "flex leading-4 p-2  focus:outline-none focus:ring w-full shadow-sm sm:text-base border rounded-md", children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: "flex focus:outline-none", placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
                             setShouldShowList(true);
                         } }) }), _jsx("div", { className: "flex", children: renderList() })] }) }));
 };

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

@@ -23,7 +23,7 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
     }, [selectedItems]);
     const wrapperRef = useRef(null);
     useOutsideAlerter(wrapperRef);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border-2'], {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
                 [s['border-red']]: hasError,
                 [s['border-gray-300']]: !hasError,
             }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['mt-1'], s['shadow-sm']), onClick: () => {

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

@@ -25,7 +25,7 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
     }, [selectedItems]);
     const wrapperRef = useRef(null);
     useOutsideAlerter(wrapperRef);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border-2'], {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
                 [s['border-red']]: hasError,
                 [s['border-gray-300']]: !hasError,
             }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['mt-1'], s['shadow-sm']), onClick: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "private": false,
   "description": "Easy use restyle components",
   "author": {