unifyedx-storybook-new 0.1.22 → 0.1.24

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

@@ -1,5 +1,5 @@
 import require$$1, { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { forwardRef, createElement, useState, useMemo, useId as useId$1, createContext, useContext, useCallback, useRef, useLayoutEffect, useEffect, Fragment as Fragment$1, useImperativeHandle } 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 { motion, AnimatePresence } from 'framer-motion';
@@ -42645,9 +42645,9 @@ const Tooltip = ({
   // For external styling of the tooltip itself
   ...props
 }) => {
-  const tooltipId = React__default.useId();
+  const tooltipId = React.useId();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    React__default.cloneElement(children, { "data-tooltip-id": tooltipId }),
+    React.cloneElement(children, { "data-tooltip-id": tooltipId }),
     /* @__PURE__ */ jsx(
       M,
       {
@@ -42924,7 +42924,7 @@ function CheckIcon({
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -42932,22 +42932,22 @@ function CheckIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(CheckIcon);
+const ForwardRef$b = /*#__PURE__*/ React$1.forwardRef(CheckIcon);
 
 function ChevronLeftIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -42955,22 +42955,22 @@ function ChevronLeftIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(ChevronLeftIcon);
+const ForwardRef$a = /*#__PURE__*/ React$1.forwardRef(ChevronLeftIcon);
 
 function ChevronUpDownIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -42978,22 +42978,22 @@ function ChevronUpDownIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(ChevronUpDownIcon);
+const ForwardRef$9 = /*#__PURE__*/ React$1.forwardRef(ChevronUpDownIcon);
 
 function EyeIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43001,24 +43001,24 @@ function EyeIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.createElement("path", {
     d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React$1.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.forwardRef(EyeIcon);
+const ForwardRef$8 = /*#__PURE__*/ React$1.forwardRef(EyeIcon);
 
 function LinkIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43026,22 +43026,22 @@ function LinkIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(LinkIcon);
+const ForwardRef$7 = /*#__PURE__*/ React$1.forwardRef(LinkIcon);
 
 function PencilSquareIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43049,22 +43049,22 @@ function PencilSquareIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.createElement("path", {
+  }), /*#__PURE__*/React$1.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.forwardRef(PencilSquareIcon);
+const ForwardRef$6 = /*#__PURE__*/ React$1.forwardRef(PencilSquareIcon);
 
 function ShieldCheckIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43072,22 +43072,22 @@ function ShieldCheckIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(ShieldCheckIcon);
+const ForwardRef$5 = /*#__PURE__*/ React$1.forwardRef(ShieldCheckIcon);
 
 function TrashIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43095,22 +43095,22 @@ function TrashIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(TrashIcon);
+const ForwardRef$4 = /*#__PURE__*/ React$1.forwardRef(TrashIcon);
 
 function UserCircleIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43118,22 +43118,22 @@ function UserCircleIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(UserCircleIcon);
+const ForwardRef$3 = /*#__PURE__*/ React$1.forwardRef(UserCircleIcon);
 
 function UserGroupIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43141,24 +43141,24 @@ function UserGroupIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.createElement("path", {
+  }), /*#__PURE__*/React$1.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.forwardRef(UserGroupIcon);
+const ForwardRef$2 = /*#__PURE__*/ React$1.forwardRef(UserGroupIcon);
 
 function UsersIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43166,20 +43166,20 @@ function UsersIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(UsersIcon);
+const ForwardRef$1 = /*#__PURE__*/ React$1.forwardRef(UsersIcon);
 
 function XMarkIcon({
   title,
   titleId,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React$1.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -43187,15 +43187,15 @@ function XMarkIcon({
     "data-slot": "icon",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React$1.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React$1.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.forwardRef(XMarkIcon);
+const ForwardRef = /*#__PURE__*/ React$1.forwardRef(XMarkIcon);
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -69755,7 +69755,7 @@ const InviteFlow = ({
               onClick: handleSubmit(onSubmit),
               disabled: isSubmitting || pendingInvites.length === 0,
               className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-blue-300 disabled:cursor-not-allowed",
-              children: isSubmitting ? "Inviting..." : "Invite"
+              children: isSubmitting ? "Inviting..." : calledBy === ADD_USERS_GROUPS_ROLES_MODAL.DRIVE ? "Send Invites" : "Add"
             }
           )
         ] })
@@ -70209,7 +70209,9 @@ const AddUserGroupsRolesModal = ({
   onFinalSubmit = () => {
   },
   mainEntity,
-  calledBy
+  calledBy,
+  onClose = () => {
+  }
 }) => {
   const [view, setView] = useState(ModalView.INVITE);
   const [activeEntity, setActiveEntity] = useState(null);
@@ -70306,33 +70308,12 @@ const AddUserGroupsRolesModal = ({
         );
     }
   };
-  return /* @__PURE__ */ jsx(Transition, { show: isOpen, as: Fragment$1, children: /* @__PURE__ */ jsxs(Dialog, { as: "div", className: "relative z-50", onClose: handleClose, children: [
-    /* @__PURE__ */ jsx(
-      TransitionChild,
-      {
-        as: Fragment$1,
-        enter: "ease-out duration-300",
-        enterFrom: "opacity-0",
-        enterTo: "opacity-100",
-        leave: "ease-in duration-200",
-        leaveFrom: "opacity-100",
-        leaveTo: "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50  backdrop-blur-sm" })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10", children: /* @__PURE__ */ jsx(
-      TransitionChild,
-      {
-        as: Fragment$1,
-        enter: "transform transition ease-in-out duration-500 sm:duration-700",
-        enterFrom: "translate-x-full",
-        enterTo: "translate-x-0",
-        leave: "transform transition ease-in-out duration-500 sm:duration-700",
-        leaveFrom: "translate-x-0",
-        leaveTo: "translate-x-full",
-        children: /* @__PURE__ */ jsx(DialogPanel, { className: "pointer-events-auto w-screen max-w-lg", children: /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col overflow-hidden bg-white shadow-xl rounded-tl-2xl rounded-bl-2xl", children: /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderBody() }) }) }) })
-      }
-    ) }) }) })
+  return /* @__PURE__ */ jsx(Transition, { appear: true, show: isOpen, as: Fragment$1, children: /* @__PURE__ */ jsxs(Dialog, { as: "div", className: "relative z-50", onClose: handleClose, children: [
+    /* @__PURE__ */ jsx("div", { className: "filter-modal-overlay", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("div", { className: "filter-modal-container", children: /* @__PURE__ */ jsx("div", { className: "filter-modal-positioner", children: /* @__PURE__ */ jsxs(DialogPanel, { className: "filter-modal-panel", style: { background: "white" }, children: [
+      /* @__PURE__ */ jsx("div", { className: "p-6", children: "DEBUG: Panel Content" }),
+      renderBody()
+    ] }) }) })
   ] }) });
 };