unifyedx-storybook-new 0.1.32 → 0.1.34

package/dist/unifyedx-storybook-new.es.js

@@ -1,7 +1,7 @@
 import require$$1, { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React$1 from 'react';
+import * as React from 'react';
 import React__default, { forwardRef, createElement, useState, useMemo, useId as useId$1, createContext, useContext, useCallback, useRef, useLayoutEffect, useEffect, Fragment as Fragment$1, useImperativeHandle, memo, useReducer } from 'react';
-import { Popover as Popover$1, PopoverButton, PopoverPanel, Transition, Dialog, TransitionChild, DialogPanel, DialogTitle, TabGroup, TabList, Tab, TabPanels, RadioGroup as RadioGroup$1, Listbox, ListboxButton, ListboxOptions, ListboxOption, SwitchGroup, Switch, Menu as Menu$1, MenuButton, Portal, MenuItems, MenuItem } from '@headlessui/react';
+import { Popover as Popover$1, PopoverButton, PopoverPanel, Transition, Dialog, TransitionChild, DialogPanel, DialogTitle, TabGroup, TabList, Tab, TabPanels, RadioGroup as RadioGroup$1, Listbox, ListboxButton, ListboxOptions, ListboxOption, SwitchGroup, Switch, Menu as Menu$1, MenuButton, Portal, MenuItems, MenuItem, DialogBackdrop } from '@headlessui/react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useFloating, offset as offset$2, flip as flip$2, shift as shift$2, autoUpdate as autoUpdate$1, useClick, useDismiss, useInteractions, FloatingPortal } from '@floating-ui/react';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
@@ -600,11 +600,37 @@ var classnamesExports = requireClassnames();
 const classNames$1 = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 // Helper function to generate a random pastel color
-const generatePastelColor = () => {
-  const hue = Math.floor(Math.random() * 360);
-  const pastel = `hsl(${hue}, 100%, 85%)`; // Light pastel for background
-  const dark = `hsl(${hue}, 70%, 50%)`; // Darker shade for text
-  return { bg: pastel, text: dark };
+
+const fnv1a = (str) => {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24); // *16777619
+  }
+  // >>> 0 to force unsigned
+  return h >>> 0;
+};
+
+const generatePastelColor = (word) => {
+  console.log(word, 'checking word');
+  const w = (word ?? "").trim().toLowerCase();
+
+  // Pull out any trailing number (e.g., "Unifyed3" -> 3)
+  const suffixNum = parseInt((w.match(/\d+$/) ?? [0])[0], 10) || 0;
+
+  // Base hash
+  const hash = fnv1a(w);
+
+  // Distribute across channels and offset by numeric suffix
+  const hue = (hash % 360 + 37 * suffixNum) % 360;           // 37 is coprime with 360
+  const sat = 55 + ((hash >>> 8) % 20);                       // 55–74%
+  const lightText = 30 + ((hash >>> 16) % 10);                // 30–39% (text)
+  const lightBg = 86 + ((hash >>> 24) % 8);                   // 86–93% (pastel bg)
+
+  const backgroundColor = `hsl(${hue}, ${sat}%, ${lightBg}%)`;
+  const color = `hsl(${hue}, ${sat}%, ${lightText}%)`;
+
+  return { bg: backgroundColor, text: color };
 };
 
 const getInitials = (name = "") => {
@@ -623,7 +649,7 @@ const Avatar = ({
   ...props
 }) => {
   const [hasError, setHasError] = useState(false);
-  const randomColors = useMemo(() => generatePastelColor(), []);
+  const randomColors = useMemo(() => generatePastelColor(name), []);
   const showImage = src && !hasError;
   const showInitials = !showImage && name;
   const showIcon = !showImage && !name;
@@ -39656,25 +39682,32 @@ const GenericFilter = ({
             ) }),
             /* @__PURE__ */ jsxs("div", { className: "filter-footer", children: [
               /* @__PURE__ */ jsx(
-                "button",
+                UnifyedCoreButton,
                 {
-                  type: "button",
+                  "data-testid": "cancel-button",
+                  label: "Cancel",
+                  loader: false,
+                  ariaLabel: "Cancel Button",
                   onClick: onClose,
-                  className: "filter-button cancel",
-                  children: "Cancel"
+                  category: "secondary"
                 }
               ),
-              /* @__PURE__ */ jsxs(
-                "button",
+              /* @__PURE__ */ jsx(
+                UnifyedCoreButton,
                 {
-                  type: "submit",
-                  disabled: !formik.dirty,
-                  className: "filter-button apply",
-                  children: [
+                  label: /* @__PURE__ */ jsxs(Fragment, { children: [
                     "Apply Filters",
                     " ",
                     activeFilterCount > 0 ? `(${activeFilterCount})` : ""
-                  ]
+                  ] }),
+                  loader: false,
+                  type: "submit",
+                  ariaLabel: "Apply Filter",
+                  className: "p-3 primaryButton !w-[70px]",
+                  "data-testid": "apply-filter",
+                  onClick: () => primaryAction?.onSubmit(),
+                  category: "primary",
+                  disabled: !formik.dirty
                 }
               )
             ] })
@@ -39746,8 +39779,10 @@ const Modal = ({
   // For the description/body content
   primaryButtonText = "Confirm",
   secondaryButtonText = "Cancel",
-  variant = "info"
+  variant = "info",
   // 'info', 'warning', 'delete'
+  loading = false,
+  buttonProps = {}
 }) => {
   const config = variantConfig[variant] || variantConfig.info;
   const Icon = config.icon;
@@ -39802,7 +39837,8 @@ const Modal = ({
               UnifyedCoreButton,
               {
                 onClick: handlePrimaryClick,
-                label: primaryButtonText
+                label: primaryButtonText,
+                ...buttonProps
               }
             )
           ] })
@@ -42683,9 +42719,9 @@ const Tooltip = ({
   // For external styling of the tooltip itself
   ...props
 }) => {
-  const tooltipId = React.useId();
+  const tooltipId = React__default.useId();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    React.cloneElement(children, { "data-tooltip-id": tooltipId }),
+    React__default.cloneElement(children, { "data-tooltip-id": tooltipId }),
     /* @__PURE__ */ jsx(
       M,
       {
@@ -42941,7 +42977,7 @@ const OptionsMenu = ({
                 "button",
                 {
                   onClick: () => onSelect(option),
-                  className: `options-menu-item ${active ? "active" : ""}`,
+                  className: `options-menu-item ${active ? "active bg-gray-200 text-gray-900" : ""}`,
                   disabled: option.disabled,
                   children: [
                     option.icon && /* @__PURE__ */ jsx("span", { className: "item-icon", children: option.icon }),
@@ -42962,7 +42998,7 @@ function CheckIcon({
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -42970,22 +43006,22 @@ function CheckIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$b = /*#__PURE__*/ React$1.forwardRef(CheckIcon);
+const ForwardRef$b = /*#__PURE__*/ React.forwardRef(CheckIcon);
 
 function ChevronLeftIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -42993,22 +43029,22 @@ function ChevronLeftIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$a = /*#__PURE__*/ React$1.forwardRef(ChevronLeftIcon);
+const ForwardRef$a = /*#__PURE__*/ React.forwardRef(ChevronLeftIcon);
 
 function ChevronUpDownIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43016,22 +43052,22 @@ function ChevronUpDownIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06l3.75-3.75Zm-3.75 9.75a.75.75 0 0 1 1.06 0L12 17.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0l-3.75-3.75a.75.75 0 0 1 0-1.06Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$9 = /*#__PURE__*/ React$1.forwardRef(ChevronUpDownIcon);
+const ForwardRef$9 = /*#__PURE__*/ React.forwardRef(ChevronUpDownIcon);
 
 function EyeIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43039,24 +43075,24 @@ function EyeIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-  }), /*#__PURE__*/React$1.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$8 = /*#__PURE__*/ React$1.forwardRef(EyeIcon);
+const ForwardRef$8 = /*#__PURE__*/ React.forwardRef(EyeIcon);
 
 function LinkIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43064,22 +43100,22 @@ function LinkIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$7 = /*#__PURE__*/ React$1.forwardRef(LinkIcon);
+const ForwardRef$7 = /*#__PURE__*/ React.forwardRef(LinkIcon);
 
 function PencilSquareIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43087,22 +43123,22 @@ function PencilSquareIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"
-  }), /*#__PURE__*/React$1.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     d: "M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"
   }));
 }
-const ForwardRef$6 = /*#__PURE__*/ React$1.forwardRef(PencilSquareIcon);
+const ForwardRef$6 = /*#__PURE__*/ React.forwardRef(PencilSquareIcon);
 
 function ShieldCheckIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43110,22 +43146,22 @@ function ShieldCheckIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08Zm3.094 8.016a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$5 = /*#__PURE__*/ React$1.forwardRef(ShieldCheckIcon);
+const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(ShieldCheckIcon);
 
 function TrashIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43133,22 +43169,22 @@ function TrashIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$4 = /*#__PURE__*/ React$1.forwardRef(TrashIcon);
+const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(TrashIcon);
 
 function UserCircleIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43156,22 +43192,22 @@ function UserCircleIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef$3 = /*#__PURE__*/ React$1.forwardRef(UserCircleIcon);
+const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(UserCircleIcon);
 
 function UserGroupIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43179,24 +43215,24 @@ function UserGroupIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8.25 6.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM15.75 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM2.25 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM6.31 15.117A6.745 6.745 0 0 1 12 12a6.745 6.745 0 0 1 6.709 7.498.75.75 0 0 1-.372.568A12.696 12.696 0 0 1 12 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 0 1-.372-.568 6.787 6.787 0 0 1 1.019-4.38Z",
     clipRule: "evenodd"
-  }), /*#__PURE__*/React$1.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     d: "M5.082 14.254a8.287 8.287 0 0 0-1.308 5.135 9.687 9.687 0 0 1-1.764-.44l-.115-.04a.563.563 0 0 1-.373-.487l-.01-.121a3.75 3.75 0 0 1 3.57-4.047ZM20.226 19.389a8.287 8.287 0 0 0-1.308-5.135 3.75 3.75 0 0 1 3.57 4.047l-.01.121a.563.563 0 0 1-.373.486l-.115.04c-.567.2-1.156.349-1.764.441Z"
   }));
 }
-const ForwardRef$2 = /*#__PURE__*/ React$1.forwardRef(UserGroupIcon);
+const ForwardRef$2 = /*#__PURE__*/ React.forwardRef(UserGroupIcon);
 
 function UsersIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43204,20 +43240,20 @@ function UsersIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z"
   }));
 }
-const ForwardRef$1 = /*#__PURE__*/ React$1.forwardRef(UsersIcon);
+const ForwardRef$1 = /*#__PURE__*/ React.forwardRef(UsersIcon);
 
 function XMarkIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43225,15 +43261,15 @@ function XMarkIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z",
     clipRule: "evenodd"
   }));
 }
-const ForwardRef = /*#__PURE__*/ React$1.forwardRef(XMarkIcon);
+const ForwardRef = /*#__PURE__*/ React.forwardRef(XMarkIcon);
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -70503,8 +70539,8 @@ function MultiSelect({
                   value: option,
                   disabled: isDisabled,
                   className: ({ active }) => classNames(
-                    isDisabled ? "text-gray-400 bg-white cursor-not-allowed" : active ? "bg-indigo-600 text-white" : "text-gray-900",
-                    "relative cursor-default select-none py-2 pl-3 pr-9"
+                    isDisabled ? " text-gray-400  bg-white  cursor-not-allowed" : active ? " bg-gray-200  text-gray-900" : " text-gray-900",
+                    " relative  cursor-default  select-none  py-2  pl-3  pr-9"
                   ),
                   children: ({ selected: isSel, active }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
@@ -70521,8 +70557,8 @@ function MultiSelect({
                       "span",
                       {
                         className: classNames(
-                          active ? "text-white" : "text-indigo-600",
-                          "absolute inset-y-0 right-0 flex items-center pr-4"
+                          active ? " text-gray-900" : " text-gray-600",
+                          " absolute  inset-y-0  right-0  flex  items-center  pr-4"
                         ),
                         children: /* @__PURE__ */ jsx(Check, { className: "w-5 h-5", "aria-hidden": "true" })
                       }
@@ -70582,6 +70618,93 @@ MultiSelect.defaultProps = {
   getOptionLabel: (o) => o.name
 };
 
+const CustomDialog = ({
+  isOpen = false,
+  setIsOpen,
+  content,
+  header = { title: "", customHeader: null, isCrossShow: true },
+  footer = { show: true, customFooter: null },
+  primaryAction = { onSubmit: null, label: "Save", loader: false, disabled: false },
+  secondaryAction = { onCancel: null, label: "Cancel" },
+  dialogPanelClass = ""
+}) => {
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      setIsOpen(false);
+    }
+  };
+  const handleContentClick = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: isOpen,
+      onClose: () => setIsOpen(false),
+      className: "relative z-50 overflow-y-auto",
+      children: [
+        /* @__PURE__ */ jsx(
+          DialogBackdrop,
+          {
+            className: "fixed inset-0 bg-black/30",
+            onClick: handleBackdropClick
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxs(
+          DialogPanel,
+          {
+            className: `${dialogPanelClass} relative bg-white align-middle w-full lg:w-[36rem] mx-5 lg:mx-0 transform overflow-hidden rounded-2xl text-left shadow-xl lg:min-w-[36rem] md:min-w-96 transition-all`,
+            onClick: handleContentClick,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center border-b border-gray-200 p-6 flex-shrink-0", children: [
+                header?.customHeader && header.customHeader,
+                header?.title && !header?.customHeader && /* @__PURE__ */ jsx(DialogTitle, { className: "text-lg font-bold", children: header?.title }),
+                header?.isCrossShow && /* @__PURE__ */ jsx("button", { onClick: () => setIsOpen(false), className: "p-2", children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "px-5 mb-5",
+                  onClick: handleContentClick,
+                  children: content
+                }
+              ),
+              footer?.show && !footer?.customFooter && /* @__PURE__ */ jsxs("div", { className: "border-t flex justify-end border-gray-200 p-6 flex-shrink-0", children: [
+                secondaryAction?.onCancel && /* @__PURE__ */ jsx(
+                  UnifyedCoreButton,
+                  {
+                    "data-testid": "cancel-button",
+                    label: secondaryAction?.label,
+                    loader: false,
+                    ariaLabel: "Cancel Button",
+                    className: "p-3 mr-3 secondaryButton !w-[70px]",
+                    onClick: () => secondaryAction?.onCancel(),
+                    category: "secondary"
+                  }
+                ),
+                primaryAction?.onSubmit && /* @__PURE__ */ jsx(
+                  UnifyedCoreButton,
+                  {
+                    label: primaryAction?.label,
+                    loader: primaryAction?.loader,
+                    ariaLabel: primaryAction?.label,
+                    className: "p-3 primaryButton !w-[70px]",
+                    "data-testid": "edit-comment-btn",
+                    onClick: () => primaryAction?.onSubmit(),
+                    category: "primary",
+                    disabled: primaryAction.disabled
+                  }
+                )
+              ] }),
+              footer?.show && footer?.customFooter && footer?.customFooter
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+
 // https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
 const canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
@@ -74744,5 +74867,5 @@ function TreeView({
   ] });
 }
 
-export { AddUserGroupsRolesModal, Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, MultiSelect, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, TreeView, UnifyedCoreButton, WizardModal, adGroupsListSearchApi, axiosDelete, axiosGet, axiosPatch, axiosPost, axiosPut, cookies$1 as cookies, createHttpClient, directoryPermissionsApi, filePermissionsApi, gateWayUrl, gatewayBase, getBaseUrl, getSnapshot, http, localStore, myDriveGatewayBaseV2, provisioningBase, rbacBase, searchRolesApi, sessionStore, userSearchBase };
+export { AddUserGroupsRolesModal, Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, CustomDialog, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, MultiSelect, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, TreeView, UnifyedCoreButton, WizardModal, adGroupsListSearchApi, axiosDelete, axiosGet, axiosPatch, axiosPost, axiosPut, cookies$1 as cookies, createHttpClient, directoryPermissionsApi, filePermissionsApi, gateWayUrl, gatewayBase, getBaseUrl, getSnapshot, http, localStore, myDriveGatewayBaseV2, provisioningBase, rbacBase, searchRolesApi, sessionStore, userSearchBase };
 //# sourceMappingURL=unifyedx-storybook-new.es.js.map