elseware-ui 2.17.3 → 2.18.0

package/build/components/data-entry/date-selector/DateSelector.d.ts

@@ -1,7 +1,10 @@
 import { FieldHookConfig } from "formik";
-interface DateSelectorProps {
+import { Shape } from "../../../data/enums";
+interface DateSelectorProps extends FieldHookConfig<string> {
+    name: string;
     placeholder: string;
     styles?: string;
+    shape?: keyof typeof Shape;
 }
-export declare const DateSelector: ({ placeholder, styles, ...props }: FieldHookConfig<string> & DateSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateSelector: ({ placeholder, styles, shape, ...props }: DateSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default DateSelector;

package/build/components/data-entry/input/input-list/InputList.d.ts

@@ -1,6 +1,8 @@
+import { Shape } from "../../../../data/enums";
 interface InputListProps {
     name: string;
     placeholder?: string;
+    shape?: keyof typeof Shape;
 }
-export declare const InputList: ({ name, placeholder }: InputListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputList: ({ name, placeholder, shape }: InputListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/data-entry/input/input-list-group/InputListGroup.d.ts

@@ -1,6 +1,8 @@
+import { Shape } from "../../../../data/enums";
 interface InputListGroupProps {
     name: string;
     placeholder?: string;
+    shape?: keyof typeof Shape;
 }
-export declare const InputListGroup: ({ name, placeholder }: InputListGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputListGroup: ({ name, placeholder, shape, }: InputListGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/data-entry/select/Select.d.ts

@@ -1,8 +1,11 @@
 import { FieldHookConfig } from "formik";
-export interface SelectProps {
+import { Shape } from "../../../data/enums";
+export interface SelectProps extends FieldHookConfig<string> {
+    name: string;
     placeholder: string;
     options: any[];
     styles?: string;
+    shape?: keyof typeof Shape;
 }
-declare function Select({ placeholder, options, styles, ...props }: FieldHookConfig<string> & SelectProps): import("react/jsx-runtime").JSX.Element;
+declare function Select({ placeholder, options, styles, shape, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export default Select;

package/build/components/data-entry/text-area/TextArea.d.ts

@@ -1,8 +1,11 @@
 import { FieldHookConfig } from "formik";
-export interface TextAreaProps {
+import { Shape } from "../../../data/enums";
+export interface TextAreaProps extends FieldHookConfig<string> {
+    name: string;
     placeholder: string;
     limit: number;
     styles?: string;
+    shape?: keyof typeof Shape;
 }
-declare function TextArea({ placeholder, limit, styles, ...props }: FieldHookConfig<string> & TextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare function TextArea({ placeholder, limit, styles, shape, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
 export default TextArea;

package/build/components/eui/EUIProvider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { EUIConfigs } from "./EUITypes";
+export declare const EUIProvider: ({ config, children, }: {
+    config: EUIConfigs;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useEUIConfig: () => EUIConfigs | null;

package/build/components/eui/EUITypes.d.ts

@@ -0,0 +1,10 @@
+import { Variant, Shape, Size } from "../../data/enums";
+export interface EUIComponentDefaults {
+    variant?: keyof typeof Variant;
+    size?: keyof typeof Size;
+    shape?: keyof typeof Shape;
+    styles?: string;
+}
+export interface EUIConfigs {
+    global?: EUIComponentDefaults;
+}

package/build/components/eui/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./EUIProvider";
+export * from "./EUITypes";
+export * from "./resolveGlobalConfigs";

package/build/components/eui/resolveGlobalConfigs.d.ts

@@ -0,0 +1,2 @@
+import { EUIConfigs } from "./EUITypes";
+export declare function resolveWithGlobal<T>(config: EUIConfigs | null, props: T, defaults: Partial<T>): T;

package/build/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./data-display";
 export * from "./data-entry";
+export * from "./eui";
 export * from "./feedback";
 export * from "./general";
 export * from "./layout";

package/build/index.es.js

@@ -67984,6 +67984,18 @@ function WorldMapCountryTable(_a) {
     return (jsx("div", __assign$1({ className: "bg-white dark:bg-neutral-950 rounded-2xl shadow-md p-4" }, { children: jsx(Table, { title: title, data: finalData, columns: columns, defaultPageSize: defaultPageSize, pageSizeOptions: [5, 10, "All"] }) })));
 }
 
+var EUIContext = createContext$1(null);
+var EUIProvider = function (_a) {
+    var config = _a.config, children = _a.children;
+    return jsx(EUIContext.Provider, __assign$1({ value: config }, { children: children }));
+};
+var useEUIConfig = function () { return useContext(EUIContext); };
+
+function resolveWithGlobal(config, props, defaults) {
+    var _a;
+    return __assign$1(__assign$1(__assign$1({}, defaults), ((_a = config === null || config === void 0 ? void 0 : config.global) !== null && _a !== void 0 ? _a : {})), props);
+}
+
 var sizes = {
     xs: "px-2 py-1 text-xs",
     sm: "px-3 py-1.5 text-sm",
@@ -67993,7 +68005,11 @@ var sizes = {
 };
 var Button$2 = function (_a) {
     var _b;
-    var _c = _a.type, type = _c === void 0 ? "button" : _c, icon = _a.icon, text = _a.text, children = _a.children, loading = _a.loading, disabled = _a.disabled, ghost = _a.ghost, block = _a.block, _d = _a.variant, variant = _d === void 0 ? "default" : _d, _e = _a.shape, shape = _e === void 0 ? "square" : _e, _f = _a.size, size = _f === void 0 ? "md" : _f, styles = _a.styles, onClick = _a.onClick;
+    var _c, _d;
+    var _e = _a.type, type = _e === void 0 ? "button" : _e, icon = _a.icon, text = _a.text, children = _a.children, loading = _a.loading, disabled = _a.disabled, ghost = _a.ghost, block = _a.block, _f = _a.variant, variant = _f === void 0 ? "success" : _f, shape = _a.shape, _g = _a.size, size = _g === void 0 ? "md" : _g, styles = _a.styles, onClick = _a.onClick;
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
     var btnRef = useRef(null);
     // 👉 Glow effect on mouse move
     var handleMouseMove = function (e) {
@@ -68012,7 +68028,7 @@ var Button$2 = function (_a) {
             },
             _b["".concat(variants[variant])] = !ghost,
             _b["".concat(variantsGhost[variant])] = ghost,
-            _b["".concat(shapes[shape])] = true,
+            _b["".concat(shapes[resolvedShape])] = true,
             _b["".concat(sizes[size])] = true,
             _b["w-full"] = block,
             _b["brightness-75 grayscale text-gray-900 cursor-not-allowed"] = loading || disabled,
@@ -68061,9 +68077,13 @@ var PasswordVisibilityToggler = function (_a) {
 };
 var Input = function (_a) {
     var _b;
-    var _c = _a.type, type = _c === void 0 ? "text" : _c, placeholder = _a.placeholder, styles = _a.styles, step = _a.step, _d = _a.shape, shape = _d === void 0 ? "square" : _d, props = __rest$1(_a, ["type", "placeholder", "styles", "step", "shape"]);
-    var _e = useField(props), field = _e[0], meta = _e[1];
-    var _f = useState(false), passwordVisibility = _f[0], setPasswordVisibilty = _f[1];
+    var _c, _d;
+    var _e = _a.type, type = _e === void 0 ? "text" : _e, placeholder = _a.placeholder, styles = _a.styles, step = _a.step, shape = _a.shape, props = __rest$1(_a, ["type", "placeholder", "styles", "step", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _f = useField(props), field = _f[0], meta = _f[1];
+    var _g = useState(false), passwordVisibility = _g[0], setPasswordVisibilty = _g[1];
     // Determine the final input type
     var inputType = type === "password" ? toggleType(passwordVisibility) : type;
     return (jsxs("div", __assign$1({ className: "relative w-full" }, { children: [jsx(Field, __assign$1({ type: inputType, step: inputType === "number" && step ? step : undefined }, field, props, { placeholder: placeholder, className: classnames((_b = {
@@ -68071,7 +68091,7 @@ var Input = function (_a) {
                         "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
                         "border-eui-danger-500": meta.touched && meta.error
                     },
-                    _b["".concat(shapes[shape])] = shape,
+                    _b["".concat(shapes[resolvedShape])] = true,
                     // "transition-all ease-in-out": true,
                     _b["".concat(styles)] = styles,
                     _b)) })), jsx(InputLabel, { text: placeholder, styles: "absolute left-2 top-[0.7px] eui-text-sm text-[13.5px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none" }), type === "password" && (jsx(PasswordVisibilityToggler, { onClick: function (v) { return setPasswordVisibilty(v); } })), jsx(InputResponse, { name: field.name, visibility: meta.touched && meta.error ? true : false, variant: "danger" })] })));
@@ -78747,11 +78767,20 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
 ConnectedDroppable.defaultProps = defaultProps;
 
 var InputList = function (_a) {
-    var name = _a.name, placeholder = _a.placeholder;
-    var _b = useFormikContext(), values = _b.values, errors = _b.errors, touched = _b.touched;
+    var _b, _c;
+    var name = _a.name, placeholder = _a.placeholder, shape = _a.shape;
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_c = shape !== null && shape !== void 0 ? shape : (_b = eui === null || eui === void 0 ? void 0 : eui.global) === null || _b === void 0 ? void 0 : _b.shape) !== null && _c !== void 0 ? _c : "square";
+    var _d = useFormikContext(), values = _d.values, errors = _d.errors, touched = _d.touched;
     return (jsxs("div", { children: [jsx(InputLabel, { text: placeholder }), jsx("div", __assign$1({ className: "mt-2" }, { children: jsx(FieldArray, __assign$1({ name: name }, { children: function (_a) {
+                        var _b;
                         var push = _a.push, remove = _a.remove, move = _a.move;
-                        return (jsxs("div", __assign$1({ className: "flex flex-col space-y-2 w-full bg-eui-primary-300/10 rounded-md" }, { children: [jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
+                        return (jsxs("div", __assign$1({ className: classnames((_b = {
+                                    "flex flex-col space-y-2 w-full bg-eui-primary-300/10": true
+                                },
+                                _b["".concat(shapes[resolvedShape])] = true,
+                                _b)) }, { children: [jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
                                         if (!result.destination)
                                             return;
                                         move(result.source.index, result.destination.index);
@@ -78759,7 +78788,7 @@ var InputList = function (_a) {
                                             var _a;
                                             return (jsxs("div", __assign$1({ ref: provided.innerRef }, provided.droppableProps, { children: [(_a = values[name]) === null || _a === void 0 ? void 0 : _a.map(function (_, index) { return (jsx(PublicDraggable, __assign$1({ draggableId: index.toString(), index: index }, { children: function (provided) {
                                                             var _a;
-                                                            return (jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: "flex items-center space-x-2 bg-eui-primary-300/10 p-2" }, { children: [jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsx(Field, { name: "".concat(name, "[").concat(index, "]"), placeholder: "Item ".concat(index + 1), className: classnames("border peer w-full rounded-sm bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]", ((_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index])
+                                                            return (jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: "flex items-center space-x-2 bg-eui-primary-300/10 p-2" }, { children: [jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsx(Field, { name: "".concat(name, "[").concat(index, "]"), placeholder: "Item ".concat(index + 1), className: classnames("border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]", ["".concat(shapes[resolvedShape])], ((_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index])
                                                                             ? "border-eui-danger-500"
                                                                             : "border-eui-primary-400 focus:border-eui-secondary-500") }), jsx("button", __assign$1({ type: "button", onClick: function () { return remove(index); }, className: "text-red-500" }, { children: jsx(FaTrash, {}) }))] })));
                                                         } }), index)); }), provided.placeholder] })));
@@ -78772,25 +78801,48 @@ var InputList = function (_a) {
 };
 
 var InputListGroup = function (_a) {
-    var name = _a.name, placeholder = _a.placeholder;
-    var _b = useFormikContext(), values = _b.values, errors = _b.errors, touched = _b.touched, setFieldValue = _b.setFieldValue;
+    var _b, _c;
+    var name = _a.name, placeholder = _a.placeholder, shape = _a.shape;
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_c = shape !== null && shape !== void 0 ? shape : (_b = eui === null || eui === void 0 ? void 0 : eui.global) === null || _b === void 0 ? void 0 : _b.shape) !== null && _c !== void 0 ? _c : "square";
+    var _d = useFormikContext(), values = _d.values, errors = _d.errors, touched = _d.touched, setFieldValue = _d.setFieldValue;
     return (jsxs("div", __assign$1({ className: "flex flex-col space-y-2" }, { children: [jsx(InputLabel, { text: placeholder }), jsx(FieldArray, __assign$1({ name: name }, { children: function (_a) {
                     var _b;
                     var push = _a.push, remove = _a.remove;
-                    return (jsxs("div", __assign$1({ className: "space-y-3" }, { children: [(_b = values[name]) === null || _b === void 0 ? void 0 : _b.map(function (group, groupIndex) { return (jsxs("div", __assign$1({ className: "flex flex-col gap-2 bg-eui-primary-300/10 p-3 rounded-md" }, { children: [jsxs("div", __assign$1({ className: "flex items-baseline gap-2" }, { children: [jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }), jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].name"), placeholder: "Group ".concat(groupIndex + 1), className: classnames("border w-full rounded-sm bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", "border-eui-primary-400 focus:border-eui-secondary-500") }), jsx("button", __assign$1({ type: "button", onClick: function () { return remove(groupIndex); }, className: "text-red-500" }, { children: jsx(FaTrash, {}) }))] })), jsx(FieldArray, __assign$1({ name: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (_a) {
-                                            var pushItem = _a.push, removeItem = _a.remove; _a.move;
-                                            return (jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
-                                                    if (!result.destination)
-                                                        return;
-                                                    var updatedItems = __spreadArray([], group.items, true);
-                                                    var movedItem = updatedItems.splice(result.source.index, 1)[0];
-                                                    updatedItems.splice(result.destination.index, 0, movedItem);
-                                                    setFieldValue("".concat(name, "[").concat(groupIndex, "].items"), updatedItems);
-                                                } }, { children: jsx(ConnectedDroppable, __assign$1({ droppableId: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (provided) {
-                                                        var _a;
-                                                        return (jsxs("div", __assign$1({ ref: provided.innerRef }, provided.droppableProps, { className: "space-y-2 bg-eui-primary-300/10 p-2 rounded-md" }, { children: [(_a = group.items) === null || _a === void 0 ? void 0 : _a.map(function (_, itemIndex) { return (jsx(PublicDraggable, __assign$1({ draggableId: "".concat(groupIndex, "-").concat(itemIndex), index: itemIndex }, { children: function (provided) { return (jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: "flex items-center gap-2 bg-eui-primary-300/10 p-2 rounded-md" }, { children: [jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].items[").concat(itemIndex, "]"), placeholder: "Item ".concat(itemIndex + 1), className: classnames("border w-full rounded-sm bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", "border-eui-primary-400 focus:border-eui-secondary-500") }), jsx("button", __assign$1({ type: "button", onClick: function () { return removeItem(itemIndex); }, className: "text-gray-500" }, { children: jsx(FaTrash, {}) }))] }))); } }), itemIndex)); }), provided.placeholder, jsxs("button", __assign$1({ type: "button", onClick: function () { return pushItem(""); }, className: "flex items-center space-x-2 text-green-800 px-2 w-fit" }, { children: [jsx(FaPlus, {}), " ", jsx("span", { children: "Add Item" })] }))] })));
-                                                    } })) })));
-                                        } }))] }), groupIndex)); }), jsxs("button", __assign$1({ type: "button", onClick: function () { return push({ name: "", items: [] }); }, className: "flex items-center space-x-2 text-green-600 px-2 w-fit" }, { children: [jsx(FaPlus, {}), " ", jsx("span", { children: "Add New Group" })] })), jsx(InputResponse, { name: name, visibility: errors[name] &&
+                    return (jsxs("div", __assign$1({ className: "space-y-3" }, { children: [(_b = values[name]) === null || _b === void 0 ? void 0 : _b.map(function (group, groupIndex) {
+                                var _a;
+                                return (jsxs("div", __assign$1({ className: classnames((_a = {
+                                            "flex flex-col gap-2 bg-eui-primary-300/10 p-3": true
+                                        },
+                                        _a["".concat(shapes[resolvedShape])] = true,
+                                        _a)) }, { children: [jsxs("div", __assign$1({ className: "flex items-baseline gap-2" }, { children: [jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }), jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].name"), placeholder: "Group ".concat(groupIndex + 1), className: classnames("border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", ["".concat(shapes[resolvedShape])], "border-eui-primary-400 focus:border-eui-secondary-500") }), jsx("button", __assign$1({ type: "button", onClick: function () { return remove(groupIndex); }, className: "text-red-500" }, { children: jsx(FaTrash, {}) }))] })), jsx(FieldArray, __assign$1({ name: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (_a) {
+                                                var pushItem = _a.push, removeItem = _a.remove; _a.move;
+                                                return (jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
+                                                        if (!result.destination)
+                                                            return;
+                                                        var updatedItems = __spreadArray([], group.items, true);
+                                                        var movedItem = updatedItems.splice(result.source.index, 1)[0];
+                                                        updatedItems.splice(result.destination.index, 0, movedItem);
+                                                        setFieldValue("".concat(name, "[").concat(groupIndex, "].items"), updatedItems);
+                                                    } }, { children: jsx(ConnectedDroppable, __assign$1({ droppableId: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (provided) {
+                                                            var _a;
+                                                            var _b;
+                                                            return (jsxs("div", __assign$1({ ref: provided.innerRef }, provided.droppableProps, { className: classnames((_a = {
+                                                                        "space-y-2 bg-eui-primary-300/10 p-2": true
+                                                                    },
+                                                                    _a["".concat(shapes[resolvedShape])] = true,
+                                                                    _a)) }, { children: [(_b = group.items) === null || _b === void 0 ? void 0 : _b.map(function (_, itemIndex) { return (jsx(PublicDraggable, __assign$1({ draggableId: "".concat(groupIndex, "-").concat(itemIndex), index: itemIndex }, { children: function (provided) {
+                                                                            var _a;
+                                                                            return (jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: classnames((_a = {
+                                                                                        "flex items-center gap-2 bg-eui-primary-300/10 p-2": true
+                                                                                    },
+                                                                                    _a["".concat(shapes[resolvedShape])] = true,
+                                                                                    _a)) }, { children: [jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].items[").concat(itemIndex, "]"), placeholder: "Item ".concat(itemIndex + 1), className: classnames("border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", ["".concat(shapes[resolvedShape])], "border-eui-primary-400 focus:border-eui-secondary-500") }), jsx("button", __assign$1({ type: "button", onClick: function () { return removeItem(itemIndex); }, className: "text-gray-500" }, { children: jsx(FaTrash, {}) }))] })));
+                                                                        } }), itemIndex)); }), provided.placeholder, jsxs("button", __assign$1({ type: "button", onClick: function () { return pushItem(""); }, className: "flex items-center space-x-2 text-green-800 px-2 w-fit" }, { children: [jsx(FaPlus, {}), " ", jsx("span", { children: "Add Item" })] }))] })));
+                                                        } })) })));
+                                            } }))] }), groupIndex));
+                            }), jsxs("button", __assign$1({ type: "button", onClick: function () { return push({ name: "", items: [] }); }, className: "flex items-center space-x-2 text-green-600 px-2 w-fit" }, { children: [jsx(FaPlus, {}), " ", jsx("span", { children: "Add New Group" })] })), jsx(InputResponse, { name: name, visibility: errors[name] &&
                                     touched[name] &&
                                     typeof errors[name] === "string"
                                     ? true
@@ -78829,13 +78881,18 @@ var Checkbox = function (props) {
 
 var DateSelector = function (_a) {
     var _b;
-    var placeholder = _a.placeholder, styles = _a.styles, props = __rest$1(_a, ["placeholder", "styles"]);
-    var _c = useField(props), field = _c[0], meta = _c[1];
+    var _c, _d;
+    var placeholder = _a.placeholder, styles = _a.styles, shape = _a.shape, props = __rest$1(_a, ["placeholder", "styles", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _e = useField(props), field = _e[0], meta = _e[1];
     return (jsxs("div", __assign$1({ className: "relative w-full" }, { children: [jsx(InputLabel, { text: placeholder, styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3" }), jsx(Field, __assign$1({ type: "date" }, field, props, { placeholder: placeholder, className: classnames((_b = {
-                        "border border-eui-primary-400 peer w-full rounded-sm bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
+                        "border border-eui-primary-400 peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
                         "border-eui-danger-500": meta.touched && meta.error,
                         "transition-all ease-in-out": true
                     },
+                    _b["".concat(shapes[resolvedShape])] = true,
                     _b["".concat(styles)] = styles,
                     _b)) })), meta.touched && meta.error && (jsx(InputResponse, { name: field.name, visibility: true, variant: "danger" }))] })));
 };
@@ -79006,14 +79063,19 @@ function StarRatingInput(_a) {
 
 function Select$2(_a) {
     var _b;
-    var placeholder = _a.placeholder, options = _a.options, styles = _a.styles, props = __rest$1(_a, ["placeholder", "options", "styles"]);
-    var _c = useField(props), field = _c[0], meta = _c[1];
+    var _c, _d;
+    var placeholder = _a.placeholder, options = _a.options, styles = _a.styles, shape = _a.shape, props = __rest$1(_a, ["placeholder", "options", "styles", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _e = useField(props), field = _e[0], meta = _e[1];
     return (jsxs("div", __assign$1({ className: "relative" }, { children: [jsx(InputLabel, { text: placeholder, styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3" }), jsx(Field, __assign$1({ as: "select" }, props, { className: classnames((_b = {
-                        "border peer w-full rounded-sm bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
+                        "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
                         "border-eui-primary-400": !(meta.touched && meta.error),
                         "border-red-500": meta.touched && meta.error,
                         "transition-all ease-in-out": true
                     },
+                    _b["".concat(shapes[resolvedShape])] = true,
                     _b["".concat(styles)] = styles,
                     _b)) }, { children: options.map(function (option) {
                     return (jsx("option", __assign$1({ value: option.value }, { children: option.label }), option.value));
@@ -79070,17 +79132,21 @@ function Tags(_a) {
 
 function TextArea(_a) {
     var _b;
-    var _c;
-    var placeholder = _a.placeholder, limit = _a.limit, styles = _a.styles, props = __rest$1(_a, ["placeholder", "limit", "styles"]);
-    var _d = useField(props), field = _d[0], meta = _d[1];
+    var _c, _d, _e;
+    var placeholder = _a.placeholder, limit = _a.limit, styles = _a.styles, shape = _a.shape, props = __rest$1(_a, ["placeholder", "limit", "styles", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _f = useField(props), field = _f[0], meta = _f[1];
     return (jsxs("div", { children: [jsxs("div", __assign$1({ className: "relative" }, { children: [jsx(Field, __assign$1({ as: "textarea" }, field, props, { className: classnames((_b = {
-                                "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 rounded-sm resize-none focus:resize-none focus:outline-none": true,
+                                "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 resize-none focus:resize-none focus:outline-none": true,
                                 "transition-all ease-in-out": true,
                                 "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
                                 "border-eui-danger-500": meta.touched && meta.error
                             },
+                            _b["".concat(shapes[resolvedShape])] = true,
                             _b["".concat(styles)] = styles,
-                            _b)) })), jsx(InputLabel, { text: placeholder, styles: classnames("absolute left-2 transition-all pointer-events-none text-eui-dark-200", field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base") }), jsxs("div", __assign$1({ className: "absolute bottom-3 right-3 text-xs text-eui-dark-50 font-semibold" }, { children: [(_c = field.value) === null || _c === void 0 ? void 0 : _c.length, "/", limit] }))] })), jsx(InputResponse, { name: field.name, visibility: meta.touched && meta.error ? true : false, variant: "danger" })] }));
+                            _b)) })), jsx(InputLabel, { text: placeholder, styles: classnames("absolute left-2 transition-all pointer-events-none text-eui-dark-200", field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base") }), jsxs("div", __assign$1({ className: "absolute bottom-3 right-3 text-xs text-eui-dark-50 font-semibold" }, { children: [(_e = field.value) === null || _e === void 0 ? void 0 : _e.length, "/", limit] }))] })), jsx(InputResponse, { name: field.name, visibility: meta.touched && meta.error ? true : false, variant: "danger" })] }));
 }
 
 function ContentArea(_a) {
@@ -140801,4 +140867,4 @@ function SidemenuLayout(_a) {
             }) }, { children: [jsx("div", __assign$1({ className: "col-span-2 mb-10" }, { children: jsx(Menu, { data: data }) })), jsx("div", __assign$1({ className: "w-full col-span-5" }, { children: jsx("div", __assign$1({ className: "px-5 py-3" }, { children: children })) }))] })) }));
 }
 
-export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button$2 as Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Content$2 as Content, ContentArea, DateSelector, DefaultLayout, Drawer, DrawerToggler, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, Image$1 as Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Layout, LineChart, Link, List, ListItem, MarkdownEditor, MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MultiImageInput, Paragraph, PieChart, PriceTag, Quote, Radio, RouteTab, RouteTabs, Section, Select$2 as Select, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, Table, Tag, Tags, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip$1 as Tooltip, Transition$1 as Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideoPlayer, getCurrencySymbol, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useIsMobile, useModal, useTheme };
+export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button$2 as Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Content$2 as Content, ContentArea, DateSelector, DefaultLayout, Drawer, DrawerToggler, EUIProvider, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, Image$1 as Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Layout, LineChart, Link, List, ListItem, MarkdownEditor, MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MultiImageInput, Paragraph, PieChart, PriceTag, Quote, Radio, RouteTab, RouteTabs, Section, Select$2 as Select, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, Table, Tag, Tags, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip$1 as Tooltip, Transition$1 as Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideoPlayer, getCurrencySymbol, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };

package/build/index.js

@@ -68011,6 +68011,18 @@ function WorldMapCountryTable(_a) {
     return (jsxRuntime.jsx("div", __assign$1({ className: "bg-white dark:bg-neutral-950 rounded-2xl shadow-md p-4" }, { children: jsxRuntime.jsx(Table, { title: title, data: finalData, columns: columns, defaultPageSize: defaultPageSize, pageSizeOptions: [5, 10, "All"] }) })));
 }
 
+var EUIContext = React.createContext(null);
+var EUIProvider = function (_a) {
+    var config = _a.config, children = _a.children;
+    return jsxRuntime.jsx(EUIContext.Provider, __assign$1({ value: config }, { children: children }));
+};
+var useEUIConfig = function () { return React.useContext(EUIContext); };
+
+function resolveWithGlobal(config, props, defaults) {
+    var _a;
+    return __assign$1(__assign$1(__assign$1({}, defaults), ((_a = config === null || config === void 0 ? void 0 : config.global) !== null && _a !== void 0 ? _a : {})), props);
+}
+
 var sizes = {
     xs: "px-2 py-1 text-xs",
     sm: "px-3 py-1.5 text-sm",
@@ -68020,7 +68032,11 @@ var sizes = {
 };
 var Button$2 = function (_a) {
     var _b;
-    var _c = _a.type, type = _c === void 0 ? "button" : _c, icon = _a.icon, text = _a.text, children = _a.children, loading = _a.loading, disabled = _a.disabled, ghost = _a.ghost, block = _a.block, _d = _a.variant, variant = _d === void 0 ? "default" : _d, _e = _a.shape, shape = _e === void 0 ? "square" : _e, _f = _a.size, size = _f === void 0 ? "md" : _f, styles = _a.styles, onClick = _a.onClick;
+    var _c, _d;
+    var _e = _a.type, type = _e === void 0 ? "button" : _e, icon = _a.icon, text = _a.text, children = _a.children, loading = _a.loading, disabled = _a.disabled, ghost = _a.ghost, block = _a.block, _f = _a.variant, variant = _f === void 0 ? "success" : _f, shape = _a.shape, _g = _a.size, size = _g === void 0 ? "md" : _g, styles = _a.styles, onClick = _a.onClick;
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
     var btnRef = React.useRef(null);
     // 👉 Glow effect on mouse move
     var handleMouseMove = function (e) {
@@ -68039,7 +68055,7 @@ var Button$2 = function (_a) {
             },
             _b["".concat(variants[variant])] = !ghost,
             _b["".concat(variantsGhost[variant])] = ghost,
-            _b["".concat(shapes[shape])] = true,
+            _b["".concat(shapes[resolvedShape])] = true,
             _b["".concat(sizes[size])] = true,
             _b["w-full"] = block,
             _b["brightness-75 grayscale text-gray-900 cursor-not-allowed"] = loading || disabled,
@@ -68088,9 +68104,13 @@ var PasswordVisibilityToggler = function (_a) {
 };
 var Input = function (_a) {
     var _b;
-    var _c = _a.type, type = _c === void 0 ? "text" : _c, placeholder = _a.placeholder, styles = _a.styles, step = _a.step, _d = _a.shape, shape = _d === void 0 ? "square" : _d, props = __rest$1(_a, ["type", "placeholder", "styles", "step", "shape"]);
-    var _e = useField(props), field = _e[0], meta = _e[1];
-    var _f = React.useState(false), passwordVisibility = _f[0], setPasswordVisibilty = _f[1];
+    var _c, _d;
+    var _e = _a.type, type = _e === void 0 ? "text" : _e, placeholder = _a.placeholder, styles = _a.styles, step = _a.step, shape = _a.shape, props = __rest$1(_a, ["type", "placeholder", "styles", "step", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _f = useField(props), field = _f[0], meta = _f[1];
+    var _g = React.useState(false), passwordVisibility = _g[0], setPasswordVisibilty = _g[1];
     // Determine the final input type
     var inputType = type === "password" ? toggleType(passwordVisibility) : type;
     return (jsxRuntime.jsxs("div", __assign$1({ className: "relative w-full" }, { children: [jsxRuntime.jsx(Field, __assign$1({ type: inputType, step: inputType === "number" && step ? step : undefined }, field, props, { placeholder: placeholder, className: classnames((_b = {
@@ -68098,7 +68118,7 @@ var Input = function (_a) {
                         "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
                         "border-eui-danger-500": meta.touched && meta.error
                     },
-                    _b["".concat(shapes[shape])] = shape,
+                    _b["".concat(shapes[resolvedShape])] = true,
                     // "transition-all ease-in-out": true,
                     _b["".concat(styles)] = styles,
                     _b)) })), jsxRuntime.jsx(InputLabel, { text: placeholder, styles: "absolute left-2 top-[0.7px] eui-text-sm text-[13.5px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3 pointer-events-none" }), type === "password" && (jsxRuntime.jsx(PasswordVisibilityToggler, { onClick: function (v) { return setPasswordVisibilty(v); } })), jsxRuntime.jsx(InputResponse, { name: field.name, visibility: meta.touched && meta.error ? true : false, variant: "danger" })] })));
@@ -78774,11 +78794,20 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
 ConnectedDroppable.defaultProps = defaultProps;
 
 var InputList = function (_a) {
-    var name = _a.name, placeholder = _a.placeholder;
-    var _b = useFormikContext(), values = _b.values, errors = _b.errors, touched = _b.touched;
+    var _b, _c;
+    var name = _a.name, placeholder = _a.placeholder, shape = _a.shape;
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_c = shape !== null && shape !== void 0 ? shape : (_b = eui === null || eui === void 0 ? void 0 : eui.global) === null || _b === void 0 ? void 0 : _b.shape) !== null && _c !== void 0 ? _c : "square";
+    var _d = useFormikContext(), values = _d.values, errors = _d.errors, touched = _d.touched;
     return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(InputLabel, { text: placeholder }), jsxRuntime.jsx("div", __assign$1({ className: "mt-2" }, { children: jsxRuntime.jsx(FieldArray, __assign$1({ name: name }, { children: function (_a) {
+                        var _b;
                         var push = _a.push, remove = _a.remove, move = _a.move;
-                        return (jsxRuntime.jsxs("div", __assign$1({ className: "flex flex-col space-y-2 w-full bg-eui-primary-300/10 rounded-md" }, { children: [jsxRuntime.jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
+                        return (jsxRuntime.jsxs("div", __assign$1({ className: classnames((_b = {
+                                    "flex flex-col space-y-2 w-full bg-eui-primary-300/10": true
+                                },
+                                _b["".concat(shapes[resolvedShape])] = true,
+                                _b)) }, { children: [jsxRuntime.jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
                                         if (!result.destination)
                                             return;
                                         move(result.source.index, result.destination.index);
@@ -78786,7 +78815,7 @@ var InputList = function (_a) {
                                             var _a;
                                             return (jsxRuntime.jsxs("div", __assign$1({ ref: provided.innerRef }, provided.droppableProps, { children: [(_a = values[name]) === null || _a === void 0 ? void 0 : _a.map(function (_, index) { return (jsxRuntime.jsx(PublicDraggable, __assign$1({ draggableId: index.toString(), index: index }, { children: function (provided) {
                                                             var _a;
-                                                            return (jsxRuntime.jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: "flex items-center space-x-2 bg-eui-primary-300/10 p-2" }, { children: [jsxRuntime.jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsxRuntime.jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsxRuntime.jsx(Field, { name: "".concat(name, "[").concat(index, "]"), placeholder: "Item ".concat(index + 1), className: classnames("border peer w-full rounded-sm bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]", ((_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index])
+                                                            return (jsxRuntime.jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: "flex items-center space-x-2 bg-eui-primary-300/10 p-2" }, { children: [jsxRuntime.jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsxRuntime.jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsxRuntime.jsx(Field, { name: "".concat(name, "[").concat(index, "]"), placeholder: "Item ".concat(index + 1), className: classnames("border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3  focus:outline-none h-[50px]", ["".concat(shapes[resolvedShape])], ((_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index])
                                                                             ? "border-eui-danger-500"
                                                                             : "border-eui-primary-400 focus:border-eui-secondary-500") }), jsxRuntime.jsx("button", __assign$1({ type: "button", onClick: function () { return remove(index); }, className: "text-red-500" }, { children: jsxRuntime.jsx(FaTrash, {}) }))] })));
                                                         } }), index)); }), provided.placeholder] })));
@@ -78799,25 +78828,48 @@ var InputList = function (_a) {
 };
 
 var InputListGroup = function (_a) {
-    var name = _a.name, placeholder = _a.placeholder;
-    var _b = useFormikContext(), values = _b.values, errors = _b.errors, touched = _b.touched, setFieldValue = _b.setFieldValue;
+    var _b, _c;
+    var name = _a.name, placeholder = _a.placeholder, shape = _a.shape;
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_c = shape !== null && shape !== void 0 ? shape : (_b = eui === null || eui === void 0 ? void 0 : eui.global) === null || _b === void 0 ? void 0 : _b.shape) !== null && _c !== void 0 ? _c : "square";
+    var _d = useFormikContext(), values = _d.values, errors = _d.errors, touched = _d.touched, setFieldValue = _d.setFieldValue;
     return (jsxRuntime.jsxs("div", __assign$1({ className: "flex flex-col space-y-2" }, { children: [jsxRuntime.jsx(InputLabel, { text: placeholder }), jsxRuntime.jsx(FieldArray, __assign$1({ name: name }, { children: function (_a) {
                     var _b;
                     var push = _a.push, remove = _a.remove;
-                    return (jsxRuntime.jsxs("div", __assign$1({ className: "space-y-3" }, { children: [(_b = values[name]) === null || _b === void 0 ? void 0 : _b.map(function (group, groupIndex) { return (jsxRuntime.jsxs("div", __assign$1({ className: "flex flex-col gap-2 bg-eui-primary-300/10 p-3 rounded-md" }, { children: [jsxRuntime.jsxs("div", __assign$1({ className: "flex items-baseline gap-2" }, { children: [jsxRuntime.jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }), jsxRuntime.jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].name"), placeholder: "Group ".concat(groupIndex + 1), className: classnames("border w-full rounded-sm bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", "border-eui-primary-400 focus:border-eui-secondary-500") }), jsxRuntime.jsx("button", __assign$1({ type: "button", onClick: function () { return remove(groupIndex); }, className: "text-red-500" }, { children: jsxRuntime.jsx(FaTrash, {}) }))] })), jsxRuntime.jsx(FieldArray, __assign$1({ name: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (_a) {
-                                            var pushItem = _a.push, removeItem = _a.remove; _a.move;
-                                            return (jsxRuntime.jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
-                                                    if (!result.destination)
-                                                        return;
-                                                    var updatedItems = __spreadArray([], group.items, true);
-                                                    var movedItem = updatedItems.splice(result.source.index, 1)[0];
-                                                    updatedItems.splice(result.destination.index, 0, movedItem);
-                                                    setFieldValue("".concat(name, "[").concat(groupIndex, "].items"), updatedItems);
-                                                } }, { children: jsxRuntime.jsx(ConnectedDroppable, __assign$1({ droppableId: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (provided) {
-                                                        var _a;
-                                                        return (jsxRuntime.jsxs("div", __assign$1({ ref: provided.innerRef }, provided.droppableProps, { className: "space-y-2 bg-eui-primary-300/10 p-2 rounded-md" }, { children: [(_a = group.items) === null || _a === void 0 ? void 0 : _a.map(function (_, itemIndex) { return (jsxRuntime.jsx(PublicDraggable, __assign$1({ draggableId: "".concat(groupIndex, "-").concat(itemIndex), index: itemIndex }, { children: function (provided) { return (jsxRuntime.jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: "flex items-center gap-2 bg-eui-primary-300/10 p-2 rounded-md" }, { children: [jsxRuntime.jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsxRuntime.jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsxRuntime.jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].items[").concat(itemIndex, "]"), placeholder: "Item ".concat(itemIndex + 1), className: classnames("border w-full rounded-sm bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", "border-eui-primary-400 focus:border-eui-secondary-500") }), jsxRuntime.jsx("button", __assign$1({ type: "button", onClick: function () { return removeItem(itemIndex); }, className: "text-gray-500" }, { children: jsxRuntime.jsx(FaTrash, {}) }))] }))); } }), itemIndex)); }), provided.placeholder, jsxRuntime.jsxs("button", __assign$1({ type: "button", onClick: function () { return pushItem(""); }, className: "flex items-center space-x-2 text-green-800 px-2 w-fit" }, { children: [jsxRuntime.jsx(FaPlus, {}), " ", jsxRuntime.jsx("span", { children: "Add Item" })] }))] })));
-                                                    } })) })));
-                                        } }))] }), groupIndex)); }), jsxRuntime.jsxs("button", __assign$1({ type: "button", onClick: function () { return push({ name: "", items: [] }); }, className: "flex items-center space-x-2 text-green-600 px-2 w-fit" }, { children: [jsxRuntime.jsx(FaPlus, {}), " ", jsxRuntime.jsx("span", { children: "Add New Group" })] })), jsxRuntime.jsx(InputResponse, { name: name, visibility: errors[name] &&
+                    return (jsxRuntime.jsxs("div", __assign$1({ className: "space-y-3" }, { children: [(_b = values[name]) === null || _b === void 0 ? void 0 : _b.map(function (group, groupIndex) {
+                                var _a;
+                                return (jsxRuntime.jsxs("div", __assign$1({ className: classnames((_a = {
+                                            "flex flex-col gap-2 bg-eui-primary-300/10 p-3": true
+                                        },
+                                        _a["".concat(shapes[resolvedShape])] = true,
+                                        _a)) }, { children: [jsxRuntime.jsxs("div", __assign$1({ className: "flex items-baseline gap-2" }, { children: [jsxRuntime.jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }), jsxRuntime.jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].name"), placeholder: "Group ".concat(groupIndex + 1), className: classnames("border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", ["".concat(shapes[resolvedShape])], "border-eui-primary-400 focus:border-eui-secondary-500") }), jsxRuntime.jsx("button", __assign$1({ type: "button", onClick: function () { return remove(groupIndex); }, className: "text-red-500" }, { children: jsxRuntime.jsx(FaTrash, {}) }))] })), jsxRuntime.jsx(FieldArray, __assign$1({ name: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (_a) {
+                                                var pushItem = _a.push, removeItem = _a.remove; _a.move;
+                                                return (jsxRuntime.jsx(DragDropContext, __assign$1({ onDragEnd: function (result) {
+                                                        if (!result.destination)
+                                                            return;
+                                                        var updatedItems = __spreadArray([], group.items, true);
+                                                        var movedItem = updatedItems.splice(result.source.index, 1)[0];
+                                                        updatedItems.splice(result.destination.index, 0, movedItem);
+                                                        setFieldValue("".concat(name, "[").concat(groupIndex, "].items"), updatedItems);
+                                                    } }, { children: jsxRuntime.jsx(ConnectedDroppable, __assign$1({ droppableId: "".concat(name, "[").concat(groupIndex, "].items") }, { children: function (provided) {
+                                                            var _a;
+                                                            var _b;
+                                                            return (jsxRuntime.jsxs("div", __assign$1({ ref: provided.innerRef }, provided.droppableProps, { className: classnames((_a = {
+                                                                        "space-y-2 bg-eui-primary-300/10 p-2": true
+                                                                    },
+                                                                    _a["".concat(shapes[resolvedShape])] = true,
+                                                                    _a)) }, { children: [(_b = group.items) === null || _b === void 0 ? void 0 : _b.map(function (_, itemIndex) { return (jsxRuntime.jsx(PublicDraggable, __assign$1({ draggableId: "".concat(groupIndex, "-").concat(itemIndex), index: itemIndex }, { children: function (provided) {
+                                                                            var _a;
+                                                                            return (jsxRuntime.jsxs("div", __assign$1({ ref: provided.innerRef }, provided.draggableProps, { className: classnames((_a = {
+                                                                                        "flex items-center gap-2 bg-eui-primary-300/10 p-2": true
+                                                                                    },
+                                                                                    _a["".concat(shapes[resolvedShape])] = true,
+                                                                                    _a)) }, { children: [jsxRuntime.jsx("div", __assign$1({}, provided.dragHandleProps, { children: jsxRuntime.jsx(FaGripVertical, { className: "cursor-grab text-gray-500" }) })), jsxRuntime.jsx(Field, { name: "".concat(name, "[").concat(groupIndex, "].items[").concat(itemIndex, "]"), placeholder: "Item ".concat(itemIndex + 1), className: classnames("border w-full bg-eui-primary-300/10 px-3 py-2 text-md focus:outline-none h-[40px]", ["".concat(shapes[resolvedShape])], "border-eui-primary-400 focus:border-eui-secondary-500") }), jsxRuntime.jsx("button", __assign$1({ type: "button", onClick: function () { return removeItem(itemIndex); }, className: "text-gray-500" }, { children: jsxRuntime.jsx(FaTrash, {}) }))] })));
+                                                                        } }), itemIndex)); }), provided.placeholder, jsxRuntime.jsxs("button", __assign$1({ type: "button", onClick: function () { return pushItem(""); }, className: "flex items-center space-x-2 text-green-800 px-2 w-fit" }, { children: [jsxRuntime.jsx(FaPlus, {}), " ", jsxRuntime.jsx("span", { children: "Add Item" })] }))] })));
+                                                        } })) })));
+                                            } }))] }), groupIndex));
+                            }), jsxRuntime.jsxs("button", __assign$1({ type: "button", onClick: function () { return push({ name: "", items: [] }); }, className: "flex items-center space-x-2 text-green-600 px-2 w-fit" }, { children: [jsxRuntime.jsx(FaPlus, {}), " ", jsxRuntime.jsx("span", { children: "Add New Group" })] })), jsxRuntime.jsx(InputResponse, { name: name, visibility: errors[name] &&
                                     touched[name] &&
                                     typeof errors[name] === "string"
                                     ? true
@@ -78856,13 +78908,18 @@ var Checkbox = function (props) {
 
 var DateSelector = function (_a) {
     var _b;
-    var placeholder = _a.placeholder, styles = _a.styles, props = __rest$1(_a, ["placeholder", "styles"]);
-    var _c = useField(props), field = _c[0], meta = _c[1];
+    var _c, _d;
+    var placeholder = _a.placeholder, styles = _a.styles, shape = _a.shape, props = __rest$1(_a, ["placeholder", "styles", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _e = useField(props), field = _e[0], meta = _e[1];
     return (jsxRuntime.jsxs("div", __assign$1({ className: "relative w-full" }, { children: [jsxRuntime.jsx(InputLabel, { text: placeholder, styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3" }), jsxRuntime.jsx(Field, __assign$1({ type: "date" }, field, props, { placeholder: placeholder, className: classnames((_b = {
-                        "border border-eui-primary-400 peer w-full rounded-sm bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
+                        "border border-eui-primary-400 peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
                         "border-eui-danger-500": meta.touched && meta.error,
                         "transition-all ease-in-out": true
                     },
+                    _b["".concat(shapes[resolvedShape])] = true,
                     _b["".concat(styles)] = styles,
                     _b)) })), meta.touched && meta.error && (jsxRuntime.jsx(InputResponse, { name: field.name, visibility: true, variant: "danger" }))] })));
 };
@@ -79033,14 +79090,19 @@ function StarRatingInput(_a) {
 
 function Select$2(_a) {
     var _b;
-    var placeholder = _a.placeholder, options = _a.options, styles = _a.styles, props = __rest$1(_a, ["placeholder", "options", "styles"]);
-    var _c = useField(props), field = _c[0], meta = _c[1];
+    var _c, _d;
+    var placeholder = _a.placeholder, options = _a.options, styles = _a.styles, shape = _a.shape, props = __rest$1(_a, ["placeholder", "options", "styles", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _e = useField(props), field = _e[0], meta = _e[1];
     return (jsxRuntime.jsxs("div", __assign$1({ className: "relative" }, { children: [jsxRuntime.jsx(InputLabel, { text: placeholder, styles: "absolute left-2 top-[0.7px] peer-placeholder-shown:text-base peer-placeholder-shown:top-3" }), jsxRuntime.jsx(Field, __assign$1({ as: "select" }, props, { className: classnames((_b = {
-                        "border peer w-full rounded-sm bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
+                        "border peer w-full bg-eui-primary-300/10 pt-5 px-3 pb-2 text-md eui-text-md placeholder-transparent placeholder-shown:p-3 focus:border-eui-secondary-500 focus:outline-none h-[50px]": true,
                         "border-eui-primary-400": !(meta.touched && meta.error),
                         "border-red-500": meta.touched && meta.error,
                         "transition-all ease-in-out": true
                     },
+                    _b["".concat(shapes[resolvedShape])] = true,
                     _b["".concat(styles)] = styles,
                     _b)) }, { children: options.map(function (option) {
                     return (jsxRuntime.jsx("option", __assign$1({ value: option.value }, { children: option.label }), option.value));
@@ -79097,17 +79159,21 @@ function Tags(_a) {
 
 function TextArea(_a) {
     var _b;
-    var _c;
-    var placeholder = _a.placeholder, limit = _a.limit, styles = _a.styles, props = __rest$1(_a, ["placeholder", "limit", "styles"]);
-    var _d = useField(props), field = _d[0], meta = _d[1];
+    var _c, _d, _e;
+    var placeholder = _a.placeholder, limit = _a.limit, styles = _a.styles, shape = _a.shape, props = __rest$1(_a, ["placeholder", "limit", "styles", "shape"]);
+    var eui = useEUIConfig();
+    // Resolved Global Overrides
+    var resolvedShape = (_d = shape !== null && shape !== void 0 ? shape : (_c = eui === null || eui === void 0 ? void 0 : eui.global) === null || _c === void 0 ? void 0 : _c.shape) !== null && _d !== void 0 ? _d : "square";
+    var _f = useField(props), field = _f[0], meta = _f[1];
     return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign$1({ className: "relative" }, { children: [jsxRuntime.jsx(Field, __assign$1({ as: "textarea" }, field, props, { className: classnames((_b = {
-                                "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 rounded-sm resize-none focus:resize-none focus:outline-none": true,
+                                "border peer w-full bg-eui-primary-300/10 eui-text-md outline-none px-3 py-5 resize-none focus:resize-none focus:outline-none": true,
                                 "transition-all ease-in-out": true,
                                 "border-eui-primary-400 focus:border-eui-secondary-500": !(meta.touched && meta.error),
                                 "border-eui-danger-500": meta.touched && meta.error
                             },
+                            _b["".concat(shapes[resolvedShape])] = true,
                             _b["".concat(styles)] = styles,
-                            _b)) })), jsxRuntime.jsx(InputLabel, { text: placeholder, styles: classnames("absolute left-2 transition-all pointer-events-none text-eui-dark-200", field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base") }), jsxRuntime.jsxs("div", __assign$1({ className: "absolute bottom-3 right-3 text-xs text-eui-dark-50 font-semibold" }, { children: [(_c = field.value) === null || _c === void 0 ? void 0 : _c.length, "/", limit] }))] })), jsxRuntime.jsx(InputResponse, { name: field.name, visibility: meta.touched && meta.error ? true : false, variant: "danger" })] }));
+                            _b)) })), jsxRuntime.jsx(InputLabel, { text: placeholder, styles: classnames("absolute left-2 transition-all pointer-events-none text-eui-dark-200", field.value ? "top-[2px] text-[13.5px]" : "top-3 text-base") }), jsxRuntime.jsxs("div", __assign$1({ className: "absolute bottom-3 right-3 text-xs text-eui-dark-50 font-semibold" }, { children: [(_e = field.value) === null || _e === void 0 ? void 0 : _e.length, "/", limit] }))] })), jsxRuntime.jsx(InputResponse, { name: field.name, visibility: meta.touched && meta.error ? true : false, variant: "danger" })] }));
 }
 
 function ContentArea(_a) {
@@ -140856,6 +140922,7 @@ exports.DateSelector = DateSelector;
 exports.DefaultLayout = DefaultLayout;
 exports.Drawer = Drawer;
 exports.DrawerToggler = DrawerToggler;
+exports.EUIProvider = EUIProvider;
 exports.Flag = Flag;
 exports.Flex = Flex;
 exports.FlexCol = FlexCol;
@@ -140939,11 +141006,13 @@ exports.WorldMap = WorldMap;
 exports.WorldMapCountryTable = WorldMapCountryTable;
 exports.YoutubeVideoPlayer = YoutubeVideoPlayer;
 exports.getCurrencySymbol = getCurrencySymbol;
+exports.resolveWithGlobal = resolveWithGlobal;
 exports.sendToast = sendToast;
 exports.useClickOutside = useClickOutside;
 exports.useCloudinaryConfig = useCloudinaryConfig;
 exports.useCurrentTheme = useCurrentTheme;
 exports.useDrawer = useDrawer;
+exports.useEUIConfig = useEUIConfig;
 exports.useIsMobile = useIsMobile;
 exports.useModal = useModal;
 exports.useTheme = useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.17.3",
+  "version": "2.18.0",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [