react-restyle-components 0.2.40 → 0.2.42

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '../../../tc.module.css';
 export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }) => {
     const finalClass = `${className} w-full px-4 sm:px-8`;
@@ -15,21 +15,15 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }
             stepClass += ' font-medium bg-orange text-white';
         if (typeof onStepClick === 'function')
             stepClass += ' cursor-pointer';
-        return (React.createElement("div", { key: step, style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: "absolute" },
-            React.createElement("span", { className: `${stepClass} font-arimaRegular  text-4xs text-center`, onClick: () => {
+        return (_jsx("div", { style: { left: `${(index / (steps.length - 1)) * 100}%` }, className: "absolute", children: _jsx("span", { className: `${stepClass} font-arimaRegular  text-4xs text-center`, onClick: () => {
                     if (typeof onStepClick === 'function')
                         onStepClick(index + 1, step);
-                } }, step)));
+                }, children: step }) }, step));
     });
-    return (React.createElement("div", { className: finalClass },
-        React.createElement("div", { className: "w-full relative" },
-            React.createElement("div", { className: progressClass, style: {
-                    width: `${(currentStep / (steps.length - 1)) * 100}%`,
-                } },
-                React.createElement("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" })),
-            React.createElement("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: {
-                    marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
-                    width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
-                } })),
-        React.createElement("div", { className: "relative sm:block" }, Steps)));
+    return (_jsxs("div", { className: finalClass, children: [_jsxs("div", { className: "w-full 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: {
+                            marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
+                            width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
+                        } })] }), _jsx("div", { className: "relative sm:block", children: Steps })] }));
 };

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

@@ -3,7 +3,7 @@ interface TabProps {
     title: string;
     children: React.JSX.Element;
 }
-export declare const Tab: ({ title, children }: TabProps) => React.JSX.Element;
+export declare const Tab: ({ title, children }: TabProps) => import("react/jsx-runtime").JSX.Element;
 export interface TabsProps {
     options: Array<{
         title: string;
@@ -12,5 +12,6 @@ export interface TabsProps {
     }>;
     children: React.JSX.Element[];
 }
-export declare const Tabs: ({ options, children }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ options, 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

@@ -0,0 +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"}

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

@@ -1,20 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../core-utils';
 export const Tab = ({ title, children }) => {
-    return (React.createElement("div", { className: cn(s.flex), key: title }, children));
+    return (_jsx("div", { className: cn(s.flex), children: children }, title));
 };
 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(s.flex, s['flex-col'], s['w-full']) },
-            React.createElement("div", { className: cn(s.flex, s['border-b']) }, options?.map((tab, index) => (React.createElement("button", { type: "button", key: index, 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);
-                    !tab.inActive && setActiveTab(index);
-                }, disabled: tab.inActive }, tab.title)))),
-            React.createElement("div", { className: cn(s['p-2'], s.border, s['border-solid'], s['border-slate-600'], s['rounded-b-md']) }, options[activeTab]?.content
-                ? options[activeTab]?.content
-                : tabs[options?.findIndex((item) => item.title === selected)]))));
+    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);
+                            !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
+                        : tabs[options?.findIndex((item) => item.title === selected)] })] }) }));
 };

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

@@ -5,3 +5,4 @@ interface TimerProps {
 }
 export declare const Timer: React.ForwardRefExoticComponent<TimerProps & React.RefAttributes<any>>;
 export {};
+//# sourceMappingURL=timer.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import React, { useEffect, useState, useImperativeHandle } from 'react';
@@ -70,11 +71,5 @@ export const Timer = React.forwardRef(({ onClear }, ref) => {
             };
         },
     }));
-    return (React.createElement("div", { className: "flex flex-row items-center" },
-        React.createElement(TimerSVG, { width: width, height: width, fill: "#E7503D" }),
-        React.createElement("div", { className: "ml-2 flex flex-row" },
-            React.createElement("span", null,
-                minute,
-                ":"),
-            React.createElement("span", null, second))));
+    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 })] })] }));
 });

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

@@ -19,3 +19,4 @@ export type TooltipProps = {
     /** Set true to prevent tooltip from displaying */
     disabled?: boolean;
 };
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/lib/src/core-components/atoms/tooltip/Tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/tooltip/Tooltip.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,YAAY,GAAG;IACzB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,+FAA+F;IAC/F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sJAAsJ;IACtJ,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

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

@@ -5,5 +5,6 @@ import { TooltipProps } from './Tooltip.types';
 /**
  *  The `Tooltip` must be nested somewhere inside the `TooltipProvider` in the component tree.
  */
-export declare const Tooltip: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, className, }: PropsWithChildren<TooltipProps>) => React.JSX.Element;
+export declare const Tooltip: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, className, }: PropsWithChildren<TooltipProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+//# sourceMappingURL=tooltip.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/atoms/tooltip/tooltip.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,OAAO,8GAWjB,kBAAkB,YAAY,CAAC,4CA4BjC,CAAC;AACF,eAAO,MAAM,eAAe,iDAA4B,CAAC"}

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

@@ -1,14 +1,10 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 /**
  *  The `Tooltip` must be nested somewhere inside the `TooltipProvider` in the component tree.
  */
 export const Tooltip = ({ align = 'center', side = 'bottom', children, content, avoidCollisions = true, alignOffset = 0, sideOffset = 5, disabled = false, delay = 400, className, }) => {
     const isChildrenString = typeof children === 'string';
-    return (React.createElement(TooltipPrimitive.Root, { delayDuration: delay },
-        React.createElement(TooltipPrimitive.Trigger, { asChild: !isChildrenString, disabled: disabled, className: className }, children),
-        React.createElement(TooltipPrimitive.Portal, null, !disabled && content && (React.createElement(TooltipPrimitive.Content, { className: className, avoidCollisions: avoidCollisions, side: side, align: align, alignOffset: alignOffset, sideOffset: sideOffset },
-            content,
-            React.createElement(TooltipPrimitive.Arrow, { className: className }))))));
+    return (_jsxs(TooltipPrimitive.Root, { delayDuration: delay, children: [_jsx(TooltipPrimitive.Trigger, { asChild: !isChildrenString, disabled: disabled, className: className, children: children }), _jsx(TooltipPrimitive.Portal, { children: !disabled && content && (_jsxs(TooltipPrimitive.Content, { className: className, avoidCollisions: avoidCollisions, side: side, align: align, alignOffset: alignOffset, sideOffset: sideOffset, children: [content, _jsx(TooltipPrimitive.Arrow, { className: className })] })) })] }));
 };
 export const TooltipProvider = TooltipPrimitive.Provider;

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

@@ -31,3 +31,4 @@ export * from './molecules/auto-complete-group-by/auto-complete-group-by.compone
 export * from './molecules/color-picker/color-picker.component';
 export * from './molecules/color-picker-modal/color-picker-modal.component';
 export { Form };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,6BAA6B,CAAC;AAEpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kDAAkD,CAAC;AAEjE,cAAc,sCAAsC,CAAC;AACrD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iDAAiD,CAAC;AAChE,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAE9C,cAAc,mCAAmC,CAAC;AAElD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AAExD,cAAc,+DAA+D,CAAC;AAC9E,cAAc,iJAAiJ,CAAC;AAChK,cAAc,6IAA6I,CAAC;AAC5J,cAAc,iDAAiD,CAAC;AAChE,cAAc,uEAAuE,CAAC;AACtF,cAAc,mDAAmD,CAAC;AAClE,cAAc,uCAAuC,CAAC;AACtD,cAAc,qEAAqE,CAAC;AACpF,cAAc,iDAAiD,CAAC;AAChE,cAAc,6DAA6D,CAAC;AAE5E,OAAO,EAAC,IAAI,EAAC,CAAC"}

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 React from 'react';
 import '../../../tc.module.css';
 interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
     uniqueField?: string;
@@ -15,5 +14,6 @@ interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
     onSelect: (item: any) => any;
     onBlur?: (e: any) => void;
 }
-export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => React.JSX.Element;
+export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts.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.map

@@ -0,0 +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"}

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,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable  */
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
 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, }) => {
@@ -70,33 +71,22 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
             onFilter && onFilter(search);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: wrapperRef, className: "w-full relative" },
-            React.createElement("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` },
-                React.createElement("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 ? (React.createElement(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } })) : (React.createElement(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } }))),
-            options && isListOpen
-                ? options?.length > 0 && (React.createElement("div", { className: "flex mt-1  absolute  rounded-sm z-500 w-full", style: { zIndex: 80 } },
-                    React.createElement("ul", { className: "flex  flex-col gap-2  bg-gray-200 p-2 w-full" }, options?.map((item, index) => (React.createElement(React.Fragment, null,
-                        React.createElement("li", { key: index, className: 'flex gap-4 p-2"' },
-                            React.createElement("label", { className: "flex" },
-                                React.createElement("input", { id: index?.toString(), className: "flex h-4 w-4", type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }),
-                                ' ',
-                                React.createElement("span", { className: "flex h-4 ml-2" }, data.displayKey
-                                    .map((key) => `${item[key]}
+    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
+                                ? 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: {
+                                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
+                                                    .map((key) => `${item[key]}
                               `)
-                                    .join(' - '))))))))))
-                : null)));
+                                                    .join(' - ') })] }) }, index) }))) }) }))
+                    : null] }) }));
 };

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,4 +1,3 @@
-import React from 'react';
 import '../../../tc.module.css';
 interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     loader?: boolean;
@@ -13,5 +12,6 @@ interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     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 declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, 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

@@ -0,0 +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"}

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,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable  */
-import React, { useState, useEffect, useRef } from 'react';
+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, }) => {
@@ -54,40 +55,32 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
             }
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: wrapperRef, className: "w-full relative" },
-            React.createElement("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` },
-                React.createElement("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 ? (React.createElement(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } })) : (React.createElement(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } }))),
-            options && isListOpen
-                ? 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?.map((item, index) => (React.createElement("li", { key: index, className: "text-gray-400 flex items-center", onClick: () => {
-                            setValue(data.displayKey
-                                .map((key) => `${item[key]}`)
-                                .join(' - '));
-                            setIsListOpen(false);
-                            onSelect && onSelect(item);
-                        } },
-                        ' ',
-                        React.createElement("label", { className: "ml-2 mt-1 text-black", style: {
-                                textOverflow: 'ellipsis',
-                                minWidth: 0,
-                                overflow: 'hidden',
-                                maxWidth: '334px',
-                                whiteSpace: 'nowrap',
-                            }, title: data.displayKey
-                                .map((key) => item[key])
-                                .join(' - ') }, data.displayKey
-                            .map((key) => `${item[key]}
+    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: {
+                                color: '#000000',
+                                size: 22,
+                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                color: '#000000',
+                                size: 22,
+                            } }))] }), options && isListOpen
+                    ? options.length > 0 && (_jsx("div", { className: `mt-1 absolute  w-full bg-gray-100 p-2 rounded-sm `, style: {
+                            zIndex: 500,
+                        }, children: _jsx("ul", { children: options?.map((item, index) => (_jsxs("li", { className: "text-gray-400 flex items-center", onClick: () => {
+                                    setValue(data.displayKey
+                                        .map((key) => `${item[key]}`)
+                                        .join(' - '));
+                                    setIsListOpen(false);
+                                    onSelect && onSelect(item);
+                                }, children: [' ', _jsx("label", { className: "ml-2 mt-1 text-black", style: {
+                                            textOverflow: 'ellipsis',
+                                            minWidth: 0,
+                                            overflow: 'hidden',
+                                            maxWidth: '334px',
+                                            whiteSpace: 'nowrap',
+                                        }, title: data.displayKey
+                                            .map((key) => item[key])
+                                            .join(' - '), children: data.displayKey
+                                            .map((key) => `${item[key]}
                               `)
-                            .join(' - '))))))))
-                : null)));
+                                            .join(' - ') })] }, index))) }) }))
+                    : null] }) }));
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../../tc.module.css';
 interface AutocompleteGroupByProps {
     data: any[];
@@ -7,5 +6,6 @@ interface AutocompleteGroupByProps {
     displayValue?: string;
     onClose?: () => void;
 }
-export declare const AutocompleteGroupBy: (props: AutocompleteGroupByProps) => React.JSX.Element;
+export declare const AutocompleteGroupBy: (props: 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

@@ -0,0 +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"}

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable  */
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
 // import PerfectScrollbar from 'react-perfect-scrollbar';
 import '../../../tc.module.css';
@@ -85,57 +86,48 @@ export const AutocompleteGroupBy = (props) => {
     //     filter(search, data);
     //   }
     // };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: wrapperRef, className: "w-full relative" },
-            React.createElement("div", { className: `flex items-center leading-4 p-2 bg-white focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2  ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md` },
-                React.createElement("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: "w-full focus:outline-none", 
-                    // onKeyUp={onKeyUp}
-                    onChange: onChange, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
-                        if (e.key === 'Enter') {
-                            e.preventDefault();
-                            // Find the selected item and children
-                            let selectedItem = null;
-                            let selectedChildren = null;
-                            for (const item of options) {
-                                for (const children of item.children) {
-                                    if (children.title.toLowerCase() === value.toLowerCase() ||
-                                        item.title.toLowerCase() === value.toLowerCase()) {
-                                        selectedItem = item;
-                                        selectedChildren = children;
-                                        break;
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: `flex items-center leading-4 p-2 bg-white focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2  ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md`, children: [_jsx("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: "w-full focus:outline-none", 
+                            // onKeyUp={onKeyUp}
+                            onChange: onChange, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    // Find the selected item and children
+                                    let selectedItem = null;
+                                    let selectedChildren = null;
+                                    for (const item of options) {
+                                        for (const children of item.children) {
+                                            if (children.title.toLowerCase() === value.toLowerCase() ||
+                                                item.title.toLowerCase() === value.toLowerCase()) {
+                                                selectedItem = item;
+                                                selectedChildren = children;
+                                                break;
+                                            }
+                                        }
+                                        if (selectedItem) {
+                                            break;
+                                        }
+                                    }
+                                    // Call props.onChange with the selected item and children
+                                    if (props.onChange && selectedItem && selectedChildren) {
+                                        props.onChange(selectedItem, selectedChildren);
                                     }
-                                }
-                                if (selectedItem) {
-                                    break;
-                                }
-                            }
-                            // Call props.onChange with the selected item and children
-                            if (props.onChange && selectedItem && selectedChildren) {
-                                props.onChange(selectedItem, selectedChildren);
-                            }
-                            setIsListOpen(false);
-                            setValue(value); // Set the value to what the user entered
-                            setOptions([]);
-                        }
-                    } }),
-                isListOpen ? (React.createElement(Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } })) : (React.createElement(Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } }))),
-            options && isListOpen
-                ? options?.length > 0 && (React.createElement("div", { className: "flex mt-1 absolute z-50  rounded-md bg-gray-200 w-100 w-full" },
-                    React.createElement("ul", { className: "flex p-2 rounded-sm w-full" },
-                        React.createElement("div", { className: "flex flex-col w-full overflow-scroll", style: { height: 'auto', maxHeight: '350px' } }, options?.map((item, index) => (React.createElement(React.Fragment, null,
-                            React.createElement("li", { key: index, className: "flex text-gray-400" }, item.title),
-                            React.createElement("ul", { className: "flex flex-col ml-4 w-full" }, item?.children?.map((children, childrenIndex) => (React.createElement("li", { key: childrenIndex, className: "flex hover:bg-gray-200 focus:outline-none cursor-pointer w-full", onClick: async () => {
-                                    props.onChange &&
-                                        props.onChange(item, children);
                                     setIsListOpen(false);
-                                    setValue(children.title);
+                                    setValue(value); // Set the value to what the user entered
                                     setOptions([]);
-                                } }, children.title)))))))))))
-                : null)));
+                                }
+                            } }), 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 z-50  rounded-md bg-gray-200 w-100 w-full", children: _jsx("ul", { className: "flex p-2 rounded-sm w-full", children: _jsx("div", { className: "flex flex-col w-full overflow-scroll", style: { height: 'auto', maxHeight: '350px' }, children: options?.map((item, index) => (_jsxs(_Fragment, { children: [_jsx("li", { className: "flex text-gray-400", children: item.title }, index), _jsx("ul", { className: "flex flex-col ml-4 w-full", children: item?.children?.map((children, childrenIndex) => (_jsx("li", { className: "flex hover:bg-gray-200 focus:outline-none cursor-pointer w-full", onClick: async () => {
+                                                    props.onChange &&
+                                                        props.onChange(item, children);
+                                                    setIsListOpen(false);
+                                                    setValue(children.title);
+                                                    setOptions([]);
+                                                }, children: children.title }, childrenIndex))) })] }))) }) }) }))
+                    : null] }) }));
 };

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import '../../../tc.module.css';
 interface AutocompleteProps {
     value: string;
     onValueChange: (value: string) => void;
     options?: string[];
 }
-export declare const Autocomplete: ({ value, onValueChange, options, }: AutocompleteProps) => React.JSX.Element;
+export declare const Autocomplete: ({ value, onValueChange, options, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAIhC,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,uCAItB,iBAAiB,4CAkLnB,CAAC"}

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

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
 // import './autocomplete.css';
 import '../../../tc.module.css';
 const LI_ELEMENT_HEIGHT = 34;
@@ -85,17 +86,13 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
         onValueChange,
     ]);
     const renderList = () => {
-        return (React.createElement(React.Fragment, null, shouldShowList ? (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "flex absolute rounded-sm w-full", style: { zIndex: 999 } }, filteredOptions?.length > 0 ? (React.createElement("ul", { role: "list", className: "flex flex-col gap-1 bg-gray-200 w-full", id: "list", ref: listRef }, filteredOptions?.map((option, index) => {
-                let className = 'flex gap-2 p-2 ';
-                if (index === activeOption) {
-                    className = className + 'font-bold';
-                }
-                return (React.createElement("li", { className: className, role: "listitem", key: index, onClick: onOptionClick }, option));
-            }))) : (React.createElement("div", { className: "flex bg-gray-200 w-full p-2" },
-                ' ',
-                React.createElement("span", null, "Not Found Result!!"),
-                ' '))))) : (React.createElement(React.Fragment, null))));
+        return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className: "flex absolute rounded-sm w-full", style: { zIndex: 999 }, children: filteredOptions?.length > 0 ? (_jsx("ul", { role: "list", className: "flex flex-col gap-1 bg-gray-200 w-full", id: "list", ref: listRef, children: filteredOptions?.map((option, index) => {
+                            let className = 'flex gap-2 p-2 ';
+                            if (index === activeOption) {
+                                className = className + 'font-bold';
+                            }
+                            return (_jsx("li", { className: className, role: "listitem", onClick: onOptionClick, children: option }, index));
+                        }) })) : (_jsxs("div", { className: "flex bg-gray-200 w-full p-2", children: [' ', _jsx("span", { children: "Not Found Result!!" }), ' '] })) }) })) : (_jsx(_Fragment, {})) }));
     };
     useEffect(() => {
         // this only works on click when inside timeout
@@ -105,11 +102,7 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
         filteredOptions[0] && onValueChange(filteredOptions[0]);
         // setShouldShowList(true);
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "flex flex-col relative" },
-            React.createElement("div", { className: "flex leading-4 p-2  focus:outline-none focus:ring w-full shadow-sm sm:text-base border-2 rounded-md" },
-                React.createElement("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);
-                    } })),
-            React.createElement("div", { className: "flex" }, renderList()))));
+    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: () => {
+                            setShouldShowList(true);
+                        } }) }), _jsx("div", { className: "flex", children: renderList() })] }) }));
 };

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import './color-picker.css';
 export declare const ColorPicker: ({ color, onChange }: {
     color: any;
     onChange: any;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW;;;6CAqBvB,CAAC"}

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

@@ -1,4 +1,5 @@
-import React, { useCallback, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useClickOutside } from '../../../hooks';
 import './color-picker.css';
@@ -7,8 +8,5 @@ export const ColorPicker = ({ color, onChange }) => {
     const [isOpen, toggle] = useState(false);
     const close = useCallback(() => toggle(false), []);
     useClickOutside(popover, close);
-    return (React.createElement("div", { className: "picker" },
-        React.createElement("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => toggle(true) }),
-        isOpen && (React.createElement("div", { className: "popover", ref: popover },
-            React.createElement(HexColorPicker, { color: color, onChange: onChange })))));
+    return (_jsxs("div", { className: "picker", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => toggle(true) }), isOpen && (_jsx("div", { className: "popover", ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }))] }));
 };