react-restyle-components 0.1.59 → 0.1.61

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/input/input.test.js

@@ -10,4 +10,3 @@ it('render Input correctly with error', () => {
     const input = render(React.createElement(Input, { className: "h-1 relative top-1 border-red-600 border-b-0 dummy", title: 'input', hasError: true, defaultValue: '', inputStyle: " border-b-0 invisible ", onChange: () => jest.fn() }));
     expect(input).toMatchSnapshot();
 });
-//# sourceMappingURL=input.test.js.map

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface InputDropdownProps {
+    title: string;
+    items: Array<string>;
+    hasError?: boolean;
+    className?: string;
+    onChange?: (item: string) => void;
+}
+export declare const InputDropdown: ({ items, className, hasError, title, onChange, }: InputDropdownProps) => React.JSX.Element;
+export {};

package/lib/{esm → src}/core-components/atoms/input-dropdown/input-dropdown.component.js

@@ -34,4 +34,3 @@ export const InputDropdown = ({ items, className, hasError, title, onChange, })
                 } }, item)))))),
         hasError && (React.createElement("span", { className: "text-primaryCharcoal text-4xs", id: "error" }, `${title} is required`))));
 };
-//# sourceMappingURL=input-dropdown.component.js.map

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputDropdown } from './input-dropdown.component';
+declare const meta: Meta<typeof InputDropdown>;
+export default meta;
+type Story = StoryObj<typeof InputDropdown>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/atoms/input-dropdown/input-dropdown.stories.js

@@ -15,4 +15,3 @@ export const Primary = {
         hasError: true,
     },
 };
-//# sourceMappingURL=input-dropdown.stories.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/input-dropdown/input-dropdown.test.js

@@ -6,4 +6,3 @@ it('render InputDropdown correctly', () => {
     const inputDropDown = render(React.createElement(InputDropdown, { title: "Source of funds", items: ['Bank account', 'UPI', 'Credit Card'], hasError: true, onChange: () => jest.fn() }));
     expect(inputDropDown).toMatchSnapshot();
 });
-//# sourceMappingURL=input-dropdown.test.js.map

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Loader: () => React.JSX.Element;
+export declare const ModalLoader: () => React.JSX.Element;

package/lib/{esm → src}/core-components/atoms/loader/loader.component.js

@@ -50,4 +50,3 @@ export const ModalLoader = () => {
                             React.createElement("span", { style: { marginTop: -15 } }, "loading ..."))))),
             React.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" }))));
 };
-//# sourceMappingURL=loader.component.js.map

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Loader } from './loader.component';
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof Loader>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/atoms/loader/loader.stories.js

@@ -11,4 +11,3 @@ export default meta;
 export const Primary = {
     args: {},
 };
-//# sourceMappingURL=loader.stories.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/loader/loader.test.js

@@ -6,4 +6,3 @@ it('render Loader correctly', () => {
     const loader = render(React.createElement(Loader, null));
     expect(loader).toMatchSnapshot();
 });
-//# sourceMappingURL=loader.test.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface RadioProps {
+    title: string;
+    data: Array<any>;
+    className?: string;
+    onChange: (item: any) => void;
+}
+export declare const Radio: ({ title, data, className, onChange, }: RadioProps) => React.JSX.Element;
+export {};

package/lib/{esm → src}/core-components/atoms/radio/radio.component.js

@@ -5,18 +5,17 @@ export const Radio = ({ title = 'Source', data = [], className, onChange, }) =>
     const [list, setList] = useState(data);
     const width = 20;
     return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { label: title }, list === null || list === void 0 ? void 0 : list.map((item, index) => (React.createElement("div", { className: `${className} flex items-center mb-1`, onClick: () => {
-                const result = list === null || list === void 0 ? void 0 : list.map((e, i) => {
+        React.createElement(InputWrapper, { label: title }, list?.map((item, index) => (React.createElement("div", { className: `${className} flex items-center mb-1`, onClick: () => {
+                const result = list?.map((e, i) => {
                     if (i == index)
-                        return Object.assign(Object.assign({}, e), { checked: true });
+                        return { ...e, checked: true };
                     else
-                        return Object.assign(Object.assign({}, e), { checked: false });
+                        return { ...e, checked: false };
                 });
                 setList(result);
-                onChange(result === null || result === void 0 ? void 0 : result.find((item) => item.checked));
+                onChange(result?.find((item) => item.checked));
             }, key: index },
             React.createElement("div", { className: "flex flex-row gap-1 items-center" },
                 item.checked ? (React.createElement(CheckedRadio, { width: width, height: width })) : (React.createElement(UncheckRadio, { width: width, height: width })),
-                React.createElement("span", { className: "text-4xs" }, item === null || item === void 0 ? void 0 : item.title))))))));
+                React.createElement("span", { className: "text-4xs" }, item?.title))))))));
 };
-//# sourceMappingURL=radio.component.js.map

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Radio } from './radio.component';
+declare const meta: Meta<typeof Radio>;
+export default meta;
+type Story = StoryObj<typeof Radio>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/atoms/radio/radio.stories.js

@@ -20,4 +20,3 @@ export const Primary = {
         },
     },
 };
-//# sourceMappingURL=radio.stories.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/radio/radio.test.js

@@ -6,4 +6,3 @@ it('render Radio correctly', () => {
     const radio = render(React.createElement(Radio, { title: "Title", data: [], onChange: () => jest.fn() }));
     expect(radio).toMatchSnapshot();
 });
-//# sourceMappingURL=radio.test.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface StepperProps {
+    className?: string;
+    steps: Array<string>;
+    currentStep: number;
+    onStepClick: (currentStep: any, index: any) => void;
+}
+export declare const Stepper: ({ className, steps, currentStep, onStepClick, }: StepperProps) => React.JSX.Element;
+export {};

package/lib/{esm → src}/core-components/atoms/stepper/stepper.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 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 Steps = steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
+    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';
         if (index < currentStep)
             stepClass +=
@@ -32,4 +32,3 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }
                 } })),
         React.createElement("div", { className: "relative sm:block" }, Steps)));
 };
-//# sourceMappingURL=stepper.component.js.map

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Stepper } from './stepper.component';
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/atoms/stepper/stepper.stories.js

@@ -16,4 +16,3 @@ export const Primary = {
         className: 'mt-4',
     },
 };
-//# sourceMappingURL=stepper.stories.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/stepper/stepper.test.js

@@ -5,4 +5,3 @@ it('render Stepper correctly', () => {
     const stepper = render(React.createElement(Stepper, { steps: ['1', '2', '3', '4'], currentStep: 3, onStepClick: () => jest.fn(), className: "mt-4" }));
     expect(stepper).toMatchSnapshot();
 });
-//# sourceMappingURL=stepper.test.js.map

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TabsProps {
+    options: Array<{
+        title: string;
+        icon: string;
+    }>;
+    onSelect: (item: string) => void;
+}
+export declare const Tabs: ({ options, onSelect }: TabsProps) => React.JSX.Element;
+export {};

package/lib/{esm → src}/core-components/atoms/tabs/tabs.component.js

@@ -3,7 +3,7 @@ import { Icon } from '../..';
 export const Tabs = ({ options, onSelect }) => {
     const [selected, setSelected] = useState(options[0].title);
     return (React.createElement("div", { className: "flex justify-center" },
-        React.createElement("ul", { className: "flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2" }, options === null || options === void 0 ? void 0 : options.map((item, index) => (React.createElement("li", { key: index, className: "bg-[#EF4444] rounded-md" },
+        React.createElement("ul", { className: "flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2" }, options?.map((item, index) => (React.createElement("li", { key: index, className: "bg-[#EF4444] rounded-md" },
             React.createElement("div", { className: `inline-flex items-center justify-center p-3 border-b-2 gap-1 ${item.title == selected
                     ? 'text-white font-bold md:text-md  border-primary active'
                     : ' text-gray-200  md:text-md border-transparent'}`, onClick: () => {
@@ -16,4 +16,3 @@ export const Tabs = ({ options, onSelect }) => {
                     } }),
                 item.title)))))));
 };
-//# sourceMappingURL=tabs.component.js.map

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

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

package/lib/{esm → src}/core-components/atoms/tabs/tabs.stories.js

@@ -20,4 +20,3 @@ export const Primary = {
         },
     },
 };
-//# sourceMappingURL=tabs.stories.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/tabs/tabs.test.js

@@ -11,4 +11,3 @@ it('render Tabs correctly', () => {
         } }));
     expect(tabs).toMatchSnapshot();
 });
-//# sourceMappingURL=tabs.test.js.map

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TimerProps {
+    onClear: () => void;
+}
+export declare const Timer: React.ForwardRefExoticComponent<TimerProps & React.RefAttributes<any>>;
+export {};

package/lib/{esm → src}/core-components/atoms/timer/timer.component.js

@@ -77,4 +77,3 @@ export const Timer = React.forwardRef(({ onClear }, ref) => {
                 ":"),
             React.createElement("span", null, second))));
 });
-//# sourceMappingURL=timer.component.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/timer/timer.test.js

@@ -12,4 +12,3 @@ it('render Timer with minute correctly', () => {
     const time = render(React.createElement(TimerComp, { onClear: () => { } }));
     expect(time.findByText('minute')).toBeTruthy();
 });
-//# sourceMappingURL=timer.test.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TooltipProps {
+    tooltipText?: any;
+    position?: 'bottom' | 'left' | 'top';
+    className?: string;
+    children?: any;
+}
+export declare const Tooltip: React.FunctionComponent<TooltipProps>;
+export {};

package/lib/{esm → src}/core-components/atoms/tooltip/tooltip.component.js

@@ -23,4 +23,3 @@ export const Tooltip = ({ tooltipText, position = 'bottom-start', children, }) =
         } },
         React.createElement(Material.Box, { ref: areaRef, onMouseMove: handleMouseMove }, children)));
 };
-//# sourceMappingURL=tooltip.component.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/atoms/tooltip/tooltip.component.test.js

@@ -7,4 +7,3 @@ describe('Tooltip component', () => {
         expect(tooltip).toMatchSnapshot();
     });
 });
-//# sourceMappingURL=tooltip.component.test.js.map

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './tooltip.component';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/atoms/tooltip/tooltip.stories.js

@@ -11,4 +11,3 @@ export default meta;
 export const Primary = {
     args: {},
 };
-//# sourceMappingURL=tooltip.stories.js.map

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

@@ -0,0 +1,19 @@
+import * as Form from './atoms/form/form.component';
+export * from './atoms/buttons/buttons.component';
+export * from './atoms/check-box/checkBox.component';
+export * from './atoms/date-picker/date-picker.component';
+export * from './atoms/input/input-otp.component';
+export * from './atoms/input/input-pin.component';
+export * from './atoms/input/input.component';
+export * from './atoms/input-dropdown/input-dropdown.component';
+export * from './atoms/loader/loader.component';
+export * from './atoms/radio/radio.component';
+export * from './atoms/stepper/stepper.component';
+export * from './atoms/timer/timer.component';
+export * from './atoms/tooltip/tooltip.component';
+export * from './atoms/icons/icons.component';
+export * from './atoms/tabs/tabs.component';
+export * from './molecules/css-multiline-input/css-multiline-input.component';
+export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
+export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
+export { Form };

package/lib/{esm → src}/core-components/index.js

@@ -17,4 +17,3 @@ export * from './molecules/css-multiline-input/css-multiline-input.component';
 export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
 export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
 export { Form };
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,17 @@
+import React from 'react';
+interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
+    uniqueField?: string;
+    loader?: boolean;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    disable?: boolean;
+    isUpperCase?: boolean;
+    name?: string;
+    onFilter?: (value: string) => void;
+    onUpdate: (item: any) => void;
+    onSelect: (item: any) => any;
+    onBlur?: (e: any) => void;
+}
+export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, loader, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => React.JSX.Element;
+export {};

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

@@ -30,7 +30,7 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
     let count = 0;
     const getSelectedItem = (selectedItem, list) => {
         if (count === 0) {
-            const finalList = list === null || list === void 0 ? void 0 : list.filter((item, index) => {
+            const finalList = list?.filter((item, index) => {
                 item.selected = false;
                 selectedItem && selectedItem.length > 0
                     ? selectedItem.find((sItem, index) => {
@@ -68,7 +68,7 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
                 React.createElement("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
                         ? `${(data.selected && data.selected.length) || 0} Items`
                         : isUpperCase
-                            ? value === null || value === void 0 ? void 0 : value.toUpperCase()
+                            ? value?.toUpperCase()
                             : value, className: `w-full focus:outline-none bg-none`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }),
                 isListOpen ? (React.createElement(Icon, { nameIcon: "FaChevronUp", propsIcon: {
                         color: '#000000',
@@ -78,8 +78,8 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
                         size: 22,
                     } }))),
             options && isListOpen
-                ? (options === null || options === void 0 ? void 0 : options.length) > 0 && (React.createElement("div", { className: "mt-1  absolute bg-gray-100 p-2 rounded-sm z-500", style: { zIndex: 80 } },
-                    React.createElement("ul", null, options === null || options === void 0 ? void 0 : options.map((item, index) => (React.createElement(React.Fragment, null,
+                ? options?.length > 0 && (React.createElement("div", { className: "mt-1  absolute bg-gray-100 p-2 rounded-sm z-500", style: { zIndex: 80 } },
+                    React.createElement("ul", null, options?.map((item, index) => (React.createElement(React.Fragment, null,
                         React.createElement("li", { key: index, className: "text-gray-400 flex items-center" },
                             React.createElement("input", { type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }),
                             ' ',
@@ -89,4 +89,3 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
                                 .join(' - ')))))))))
                 : null)));
 };
-//# sourceMappingURL=auto-complete-filter-multiple-select-multiple-fields-display.component.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.js

@@ -7,4 +7,3 @@ it('render AutoCompleteFilterMultipleSelectMultipleFieldsDisplay correctly', ()
         }, onSelect: (item) => { } }));
     expect(autoCompleteFilterMultipleSelectMultipleFieldsDisplay).toMatchSnapshot();
 });
-//# sourceMappingURL=auto-complete-filter-multiple-select-multiple-fields-display.component.test.js.map

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AutoCompleteFilterMultipleSelectMultipleFieldsDisplay } from './auto-complete-filter-multiple-select-multiple-fields-display.component';
+declare const meta: Meta<typeof AutoCompleteFilterMultipleSelectMultipleFieldsDisplay>;
+export default meta;
+type Story = StoryObj<typeof AutoCompleteFilterMultipleSelectMultipleFieldsDisplay>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js

@@ -43,4 +43,3 @@ export const Primary = {
         },
     },
 };
-//# sourceMappingURL=auto-complete-filter-multiple-select-multiple-fields-display.stories.js.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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
+    loader?: boolean;
+    disable?: boolean;
+    displayValue?: string;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    className?: string;
+    posstion?: 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) => React.JSX.Element;
+export {};

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

@@ -29,8 +29,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
         setValue(displayValue);
     }, [displayValue]);
     const onChange = (e) => {
-        var _a;
-        const search = (_a = e.target.value) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+        const search = e.target.value?.toUpperCase();
         setValue(search);
         setFilterValue(search);
         onFilter && onFilter(search);
@@ -69,7 +68,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
                 ? options.length > 0 && (React.createElement("div", { className: `mt-1 absolute  w-full bg-gray-100 p-2 rounded-sm `, style: {
                         zIndex: 500,
                     } },
-                    React.createElement("ul", null, options === null || options === void 0 ? void 0 : options.map((item, index) => (React.createElement("li", { key: index, className: "text-gray-400 flex items-center", onClick: () => {
+                    React.createElement("ul", null, options?.map((item, index) => (React.createElement("li", { key: index, className: "text-gray-400 flex items-center", onClick: () => {
                             setValue(data.displayKey
                                 .map((key) => `${item[key]}`)
                                 .join(' - '));
@@ -91,4 +90,3 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
                             .join(' - '))))))))
                 : null)));
 };
-//# sourceMappingURL=auto-complete-filter-single-select-multiple-fields-display.component.js.map

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

@@ -0,0 +1 @@
+export {};

package/lib/{esm → src}/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js

@@ -14,4 +14,3 @@ describe('AutoCompleteFilterSingleSelectMultiFieldsDisplay component', () => {
         expect(autoCompleteFilterSingleSelectMultiFieldsDisplay).toMatchSnapshot();
     });
 });
-//# sourceMappingURL=auto-complete-filter-single-select-multiple-fields-display.component.test.js.map

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AutoCompleteFilterSingleSelectMultiFieldsDisplay } from './auto-complete-filter-single-select-multiple-fields-display.component';
+declare const meta: Meta<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay>;
+export default meta;
+type Story = StoryObj<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js

@@ -26,4 +26,3 @@ export const Primary = {
         },
     },
 };
-//# sourceMappingURL=auto-complete-filter-single-select-multiple-fields-display.stories.js.map

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface CSSMultilineProps {
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    className?: string;
+    style?: any;
+    onChange(item: any): void;
+}
+export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, }: CSSMultilineProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,96 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Form } from '../..';
+import { properties as propertiesObj } from './css-properties';
+const mapToArray = (arr) => {
+    const res = [];
+    arr.forEach(function (obj, index) {
+        const key = Object.keys(obj)[0];
+        const value = key;
+        res.push([value, obj[key]]);
+    });
+    return res;
+};
+const data = mapToArray(propertiesObj);
+export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "Like fontSize: 12,backgroundColor:'#000000',", onChange, }) => {
+    const value = useRef('');
+    const [properties, setProperties] = useState([]);
+    const [isListOpen, setIsListOpen] = useState(false);
+    useEffect(() => {
+        value.current = defaultValue;
+        setProperties(data);
+    }, [defaultValue]);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target)) {
+                    setIsListOpen(false);
+                    onChange(value.current);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    const list = [];
+    const filter = (css) => {
+        let matchString = css?.split(',');
+        matchString = matchString[matchString?.length - 1];
+        matchString = matchString?.split(':')[0];
+        matchString = matchString?.split("'")[0];
+        if (css?.length == 0)
+            return setProperties(data);
+        else {
+            data?.map((item) => {
+                const innerItem = [];
+                const isItems = item[0]?.startsWith(matchString);
+                if (isItems)
+                    innerItem.push(item[0]);
+                if (innerItem?.length > 0)
+                    list.push([item[0], item[1]]);
+            });
+            setProperties(list);
+        }
+    };
+    const onKeyUp = (e) => {
+        setIsListOpen(true);
+    };
+    return (React.createElement("div", { className: "flex flex-col w-full", ref: wrapperRef },
+        React.createElement(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: className, onKeyUp: onKeyUp, onChange: (css) => {
+                value.current = css;
+                filter(css);
+            } }),
+        isListOpen && (React.createElement("div", { style: { marginTop: -10 } },
+            React.createElement("ul", { className: "flex flex-col max-h-40 bg-black  m-2 text-white  overflow-y-scroll  " }, properties?.map((item, index) => (React.createElement("li", { key: index, className: "flex flex-col gap-4 p-2" },
+                React.createElement("span", { className: "underline" }, item[0]),
+                item[1]?.map((prop) => (React.createElement("li", { className: "flex -mt-2 px-2 h-8 bg-slate-800  rounded-md items-center cursor-pointer", onClick: () => {
+                        let existsString = value.current?.split(',');
+                        if (value.current.includes(',')) {
+                            existsString = existsString.map((item) => {
+                                if (item?.includes(':'))
+                                    return item;
+                            });
+                            if (prop != 'number')
+                                existsString.push(`${item[0]}:'${prop}',`);
+                            else
+                                existsString.push(`${item[0]}:1,`);
+                            value.current = existsString
+                                .join(',')
+                                .replaceAll(',,', ',');
+                        }
+                        else {
+                            if (prop != 'number')
+                                value.current = `${item[0]}:'${prop}',`;
+                            else {
+                                value.current = `${item[0]}:1,`;
+                            }
+                        }
+                        filter(existsString.join(''));
+                    } },
+                    ' ',
+                    prop,
+                    ' ')))))))))));
+};

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CSSMultiline } from './css-multiline-input.component';
+declare const meta: Meta<typeof CSSMultiline>;
+export default meta;
+type Story = StoryObj<typeof CSSMultiline>;
+export declare const Primary: Story;

package/lib/{esm → src}/core-components/molecules/css-multiline-input/css-multiline-input.stories.js

@@ -11,4 +11,3 @@ export default meta;
 export const Primary = {
     args: {},
 };
-//# sourceMappingURL=css-multiline-input.stories.js.map

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

@@ -0,0 +1 @@
+export {};