@ballistix.digital/react-components 0.1.0 → 0.1.2

package/dist/index.esm.js

@@ -0,0 +1,1493 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import React, { useCallback, useMemo, Children, Fragment, useState, useEffect } from 'react';
+import { Menu, Transition, Disclosure, Dialog } from '@headlessui/react';
+import { ChevronDownIcon, EllipsisVerticalIcon, ChevronLeftIcon, ChevronRightIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var AvatarElement = function (props) {
+    var src = props.src, placeholder = props.placeholder, _a = props.alt, alt = _a === void 0 ? 'avatar' : _a, children = props.children, url = props.url, _b = props.size, size = _b === void 0 ? 'md' : _b, _c = props.figure, figure = _c === void 0 ? 'block' : _c, status = props.status, isDisabled = props.isDisabled, isLoading = props.isLoading, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        empty: toClassName(styles$h.base.empty, size && styles$h[size].container, figure && styles$h[figure].container, isDisabled && styles$h.disabled.container, isLoading && styles$h.loading.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.empty),
+        placeholder: toClassName(styles$h.base.placeholder, size && styles$h[size].container, figure && styles$h[figure].container, isDisabled && styles$h.disabled.container, isLoading && styles$h.loading.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.placeholder),
+        container: toClassName(styles$h.base.container, size && styles$h[size].container, figure && styles$h[figure].container, isDisabled && styles$h.disabled.container, isLoading && styles$h.loading.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        indicator: toClassName(styles$h.indicator.container, size && styles$h.indicator[size], figure && styles$h.indicator[figure], isDisabled && styles$h.indicator.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator),
+    }); }, [customStyles]);
+    if (!placeholder) {
+        return (jsx("span", __assign({ className: style.empty }, { children: jsx("svg", __assign({ className: "h-full w-full text-gray-300", fill: "currentColor", viewBox: "0 0 24 24" }, { children: jsx("path", { d: "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" }) })) })));
+    }
+    if (!src) {
+        return (jsx("span", __assign({ className: style.placeholder }, { children: jsx("span", __assign({ className: "text-".concat(size, " font-medium leading-none text-white") }, { children: placeholder })) })));
+    }
+    return (jsx("a", __assign({ href: url }, { children: jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxs("span", __assign({ className: "inline-block relative" }, { children: [jsx("img", { className: style.container, src: src, alt: alt }), status && jsx("span", { className: style.indicator })] })), children && jsx("div", __assign({ className: "ml-3" }, { children: children }))] })) })));
+};
+
+var base$5 = {
+    empty: 'inline-block overflow-hidden bg-gray-50',
+    placeholder: 'overflow-hidden inline-flex items-center justify-center bg-gray-500',
+    container: 'inline-block overflow-hidden',
+};
+var xs$1 = {
+    container: 'h-6 w-6',
+};
+var sm$2 = {
+    container: 'h-8 w-8',
+};
+var md$1 = {
+    container: 'h-10 w-10',
+};
+var lg$2 = {
+    container: 'h-12 w-12',
+};
+var xl$1 = {
+    container: 'h-14 w-14',
+};
+var block$2 = {
+    container: 'rounded-md',
+};
+var rounded$2 = {
+    container: 'rounded-full',
+};
+var disabled$2 = {
+    container: 'opacity-20 cursor-not-allowed',
+};
+var loading$2 = {
+    container: 'cursor-progress',
+};
+var indicator$1 = {
+    container: 'absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white',
+    rounded: '',
+    block: 'transform -translate-y-1/2 translate-x-1/2',
+    xs: 'h-1.5 w-1.5',
+    sm: 'h-2 w-2',
+    md: 'h-2.5 w-2.5',
+    lg: 'h-3 w-3',
+    xl: 'h-3.5 w-3.5',
+};
+var online = {
+    container: 'bg-green-400',
+};
+var offline = {
+    container: 'bg-gray-300',
+};
+var blocked = {
+    container: 'bg-red-400',
+};
+var styles$h = {
+    base: base$5,
+    xs: xs$1,
+    sm: sm$2,
+    md: md$1,
+    lg: lg$2,
+    xl: xl$1,
+    block: block$2,
+    rounded: rounded$2,
+    disabled: disabled$2,
+    loading: loading$2,
+    indicator: indicator$1,
+    online: online,
+    offline: offline,
+    blocked: blocked,
+};
+
+var BadgeElement = function (props) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(type && styles$g[type].container, color && styles$g[color].container, size && styles$g[size].container, figure && styles$g[figure].container, isDisabled && styles$g.disabled.container, isLoading && styles$g.loading.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        indicator: toClassName(color && styles$g[color].indicator, size && styles$g[size].indicator, customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator),
+        button: toClassName('flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-none', color && styles$g[color].button, size && styles$g[size].button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+    }); }, [customStyles]);
+    return (jsxs("span", __assign({ className: style.container }, { children: [type === 'indicator' && (jsx("svg", __assign({ className: style.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), children, type === 'close' && (jsxs("button", __assign({ type: "button", className: style.button, onClick: onClose }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: "Remove large option" })), jsx("svg", __assign({ className: "h-2 w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" }, { children: jsx("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }) }))] })))] })));
+};
+
+var normal = {
+    container: 'inline-flex items-center px-2.5 py-0.5 font-medium',
+};
+var indicator = {
+    container: 'inline-flex items-center px-2.5 py-0.5 font-medium',
+};
+var close = {
+    container: 'inline-flex items-center pl-2.5 pr-1 py-0.5 font-medium',
+};
+var primary$1 = {
+    container: "shadow-sm text-white bg-indigo-600  hover:bg-indigo-700",
+};
+var secondary$1 = {
+    container: "shadow-none text-indigo-700 bg-indigo-100 hover:bg-indigo-200",
+};
+var outline$1 = {
+    container: "border-gray-300  text-gray-700 bg-white hover:bg-gray-50",
+};
+var sm$1 = {
+    container: 'text-xs',
+    indicator: 'mr-1.5 h-2 w-2 ',
+    button: '',
+};
+var lg$1 = {
+    container: 'text-sm',
+    indicator: '-ml-0.5 mr-1.5 h-2 w-2',
+    button: '',
+};
+var block$1 = {
+    container: 'rounded-md',
+};
+var rounded$1 = {
+    container: 'rounded-full',
+};
+var gray = {
+    container: 'bg-gray-100 text-gray-800',
+    indicator: 'text-gray-400',
+    button: 'text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:bg-gray-500',
+};
+var red = {
+    container: 'bg-red-100 text-red-800',
+    indicator: 'text-red-400',
+    button: 'text-red-400 hover:bg-red-200 hover:text-red-500 focus:bg-red-500',
+};
+var yellow = {
+    container: 'bg-yellow-100 text-yellow-800',
+    indicator: 'text-yellow-400',
+    button: 'text-yellow-400 hover:bg-yellow-200 hover:text-yellow-500 focus:bg-yellow-500',
+};
+var green = {
+    container: 'bg-green-100 text-green-800',
+    indicator: 'text-green-400',
+    button: 'text-green-400 hover:bg-green-200 hover:text-green-500 focus:bg-green-500',
+};
+var blue = {
+    container: 'bg-blue-100 text-blue-800',
+    indicator: 'text-blue-400',
+    button: 'text-blue-400 hover:bg-blue-200 hover:text-blue-500 focus:bg-blue-500',
+};
+var indigo = {
+    container: 'bg-indigo-100 text-indigo-800',
+    indicator: 'text-indigo-400',
+    button: 'text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500',
+};
+var purple = {
+    container: 'bg-purple-100 text-purple-800',
+    indicator: 'text-purple-400',
+    button: 'text-purple-400 hover:bg-purple-200 hover:text-purple-500 focus:bg-purple-500',
+};
+var pink = {
+    container: 'bg-pink-100 text-pink-800',
+    indicator: 'text-pink-400',
+    button: 'text-pink-400 hover:bg-pink-200 hover:text-pink-500 focus:bg-purple-500',
+};
+var disabled$1 = {
+    container: 'opacity-20 cursor-not-allowed',
+};
+var loading$1 = {
+    container: 'cursor-progress',
+};
+var styles$g = {
+    normal: normal,
+    indicator: indicator,
+    close: close,
+    primary: primary$1,
+    secondary: secondary$1,
+    outline: outline$1,
+    sm: sm$1,
+    lg: lg$1,
+    block: block$1,
+    rounded: rounded$1,
+    gray: gray,
+    red: red,
+    yellow: yellow,
+    green: green,
+    blue: blue,
+    indigo: indigo,
+    purple: purple,
+    pink: pink,
+    disabled: disabled$1,
+    loading: loading$1,
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/*\n! tailwindcss v3.2.6 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.pointer-events-auto {\n  pointer-events: auto;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.isolate {\n  isolation: isolate;\n}\n.z-0 {\n  z-index: 0;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-mb-px {\n  margin-bottom: -1px;\n}\n.-ml-0 {\n  margin-left: -0px;\n}\n.-ml-0\\.5 {\n  margin-left: -0.125rem;\n}\n.-ml-px {\n  margin-left: -1px;\n}\n.-mr-1 {\n  margin-right: -0.25rem;\n}\n.-mt-px {\n  margin-top: -1px;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.ml-0 {\n  margin-left: 0px;\n}\n.ml-0\\.5 {\n  margin-left: 0.125rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.ml-3 {\n  margin-left: 0.75rem;\n}\n.mr-1 {\n  margin-right: 0.25rem;\n}\n.mr-1\\.5 {\n  margin-right: 0.375rem;\n}\n.mr-3 {\n  margin-right: 0.75rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-5 {\n  margin-top: 1.25rem;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.hidden {\n  display: none;\n}\n.h-1 {\n  height: 0.25rem;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-12 {\n  height: 3rem;\n}\n.h-14 {\n  height: 3.5rem;\n}\n.h-16 {\n  height: 4rem;\n}\n.h-2 {\n  height: 0.5rem;\n}\n.h-2\\.5 {\n  height: 0.625rem;\n}\n.h-3 {\n  height: 0.75rem;\n}\n.h-3\\.5 {\n  height: 0.875rem;\n}\n.h-32 {\n  height: 8rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-7 {\n  height: 1.75rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.min-h-0 {\n  min-height: 0px;\n}\n.min-h-full {\n  min-height: 100%;\n}\n.w-0 {\n  width: 0px;\n}\n.w-1 {\n  width: 0.25rem;\n}\n.w-1\\.5 {\n  width: 0.375rem;\n}\n.w-10 {\n  width: 2.5rem;\n}\n.w-12 {\n  width: 3rem;\n}\n.w-14 {\n  width: 3.5rem;\n}\n.w-16 {\n  width: 4rem;\n}\n.w-2 {\n  width: 0.5rem;\n}\n.w-2\\.5 {\n  width: 0.625rem;\n}\n.w-3 {\n  width: 0.75rem;\n}\n.w-3\\.5 {\n  width: 0.875rem;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-48 {\n  width: 12rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-56 {\n  width: 14rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-7 {\n  width: 1.75rem;\n}\n.w-8 {\n  width: 2rem;\n}\n.w-auto {\n  width: auto;\n}\n.w-full {\n  width: 100%;\n}\n.w-screen {\n  width: 100vw;\n}\n.max-w-2xl {\n  max-width: 42rem;\n}\n.max-w-4xl {\n  max-width: 56rem;\n}\n.max-w-7xl {\n  max-width: 80rem;\n}\n.max-w-full {\n  max-width: 100%;\n}\n.max-w-lg {\n  max-width: 32rem;\n}\n.max-w-md {\n  max-width: 28rem;\n}\n.max-w-sm {\n  max-width: 24rem;\n}\n.max-w-xs {\n  max-width: 20rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.origin-top-right {\n  transform-origin: top right;\n}\n.-translate-y-1\\/2 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-0 {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-1\\/2 {\n  --tw-translate-x: 50%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-full {\n  --tw-translate-x: 100%;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-0 {\n  --tw-translate-y: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-2 {\n  --tw-translate-y: 0.5rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-4 {\n  --tw-translate-y: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-100 {\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-95 {\n  --tw-scale-x: .95;\n  --tw-scale-y: .95;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-progress {\n  cursor: progress;\n}\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-end {\n  align-items: flex-end;\n}\n.items-center {\n  align-items: center;\n}\n.justify-start {\n  justify-content: flex-start;\n}\n.justify-end {\n  justify-content: flex-end;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.-space-x-px > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(-1px * var(--tw-space-x-reverse));\n  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(1rem * var(--tw-space-x-reverse));\n  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-8 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(2rem * var(--tw-space-x-reverse));\n  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-3 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgb(243 244 246 / var(--tw-divide-opacity));\n}\n.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-divide-opacity));\n}\n.self-end {\n  align-self: flex-end;\n}\n.self-center {\n  align-self: center;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-l-md {\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.rounded-r-md {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-t-2 {\n  border-top-width: 2px;\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.border-indigo-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(99 102 241 / var(--tw-border-opacity));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.bg-blue-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(219 234 254 / var(--tw-bg-opacity));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.bg-gray-300 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.bg-gray-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity));\n}\n.bg-gray-700 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(55 65 81 / var(--tw-bg-opacity));\n}\n.bg-gray-800 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(31 41 55 / var(--tw-bg-opacity));\n}\n.bg-gray-900 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(17 24 39 / var(--tw-bg-opacity));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.bg-green-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(74 222 128 / var(--tw-bg-opacity));\n}\n.bg-indigo-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(224 231 255 / var(--tw-bg-opacity));\n}\n.bg-indigo-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 242 255 / var(--tw-bg-opacity));\n}\n.bg-indigo-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(79 70 229 / var(--tw-bg-opacity));\n}\n.bg-pink-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(252 231 243 / var(--tw-bg-opacity));\n}\n.bg-purple-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 232 255 / var(--tw-bg-opacity));\n}\n.bg-purple-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity));\n}\n.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 113 113 / var(--tw-bg-opacity));\n}\n.bg-red-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 242 242 / var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-yellow-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 249 195 / var(--tw-bg-opacity));\n}\n.bg-opacity-75 {\n  --tw-bg-opacity: 0.75;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-3\\.5 {\n  padding-left: 0.875rem;\n  padding-right: 0.875rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.py-0 {\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n.py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-2\\.5 {\n  padding-top: 0.625rem;\n  padding-bottom: 0.625rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.py-5 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n.py-6 {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n.pb-3 {\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pl-10 {\n  padding-left: 2.5rem;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-2\\.5 {\n  padding-left: 0.625rem;\n}\n.pl-3 {\n  padding-left: 0.75rem;\n}\n.pr-1 {\n  padding-right: 0.25rem;\n}\n.pr-2 {\n  padding-right: 0.5rem;\n}\n.pr-3 {\n  padding-right: 0.75rem;\n}\n.pt-16 {\n  padding-top: 4rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.pt-5 {\n  padding-top: 1.25rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.leading-5 {\n  line-height: 1.25rem;\n}\n.leading-none {\n  line-height: 1;\n}\n.text-blue-400 {\n  --tw-text-opacity: 1;\n  color: rgb(96 165 250 / var(--tw-text-opacity));\n}\n.text-blue-800 {\n  --tw-text-opacity: 1;\n  color: rgb(30 64 175 / var(--tw-text-opacity));\n}\n.text-gray-300 {\n  --tw-text-opacity: 1;\n  color: rgb(209 213 219 / var(--tw-text-opacity));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(31 41 55 / var(--tw-text-opacity));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.text-green-400 {\n  --tw-text-opacity: 1;\n  color: rgb(74 222 128 / var(--tw-text-opacity));\n}\n.text-green-800 {\n  --tw-text-opacity: 1;\n  color: rgb(22 101 52 / var(--tw-text-opacity));\n}\n.text-indigo-400 {\n  --tw-text-opacity: 1;\n  color: rgb(129 140 248 / var(--tw-text-opacity));\n}\n.text-indigo-600 {\n  --tw-text-opacity: 1;\n  color: rgb(79 70 229 / var(--tw-text-opacity));\n}\n.text-indigo-700 {\n  --tw-text-opacity: 1;\n  color: rgb(67 56 202 / var(--tw-text-opacity));\n}\n.text-indigo-800 {\n  --tw-text-opacity: 1;\n  color: rgb(55 48 163 / var(--tw-text-opacity));\n}\n.text-pink-400 {\n  --tw-text-opacity: 1;\n  color: rgb(244 114 182 / var(--tw-text-opacity));\n}\n.text-pink-800 {\n  --tw-text-opacity: 1;\n  color: rgb(157 23 77 / var(--tw-text-opacity));\n}\n.text-purple-400 {\n  --tw-text-opacity: 1;\n  color: rgb(192 132 252 / var(--tw-text-opacity));\n}\n.text-purple-800 {\n  --tw-text-opacity: 1;\n  color: rgb(107 33 168 / var(--tw-text-opacity));\n}\n.text-red-400 {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity));\n}\n.text-red-800 {\n  --tw-text-opacity: 1;\n  color: rgb(153 27 27 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.text-yellow-400 {\n  --tw-text-opacity: 1;\n  color: rgb(250 204 21 / var(--tw-text-opacity));\n}\n.text-yellow-800 {\n  --tw-text-opacity: 1;\n  color: rgb(133 77 14 / var(--tw-text-opacity));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.placeholder-gray-400::placeholder {\n  --tw-placeholder-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-placeholder-opacity));\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.opacity-20 {\n  opacity: 0.2;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.ring-1 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-2 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-black {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.ring-white {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n.ring-opacity-5 {\n  --tw-ring-opacity: 0.05;\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-100 {\n  transition-duration: 100ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.duration-500 {\n  transition-duration: 500ms;\n}\n.duration-75 {\n  transition-duration: 75ms;\n}\n.ease-in {\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.hover\\:border-gray-300:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.hover\\:bg-blue-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(191 219 254 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(55 65 81 / var(--tw-bg-opacity));\n}\n.hover\\:bg-green-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(187 247 208 / var(--tw-bg-opacity));\n}\n.hover\\:bg-indigo-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(199 210 254 / var(--tw-bg-opacity));\n}\n.hover\\:bg-indigo-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(67 56 202 / var(--tw-bg-opacity));\n}\n.hover\\:bg-pink-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 207 232 / var(--tw-bg-opacity));\n}\n.hover\\:bg-purple-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 213 255 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 202 202 / var(--tw-bg-opacity));\n}\n.hover\\:bg-yellow-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 240 138 / var(--tw-bg-opacity));\n}\n.hover\\:text-blue-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-900:hover {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.hover\\:text-green-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity));\n}\n.hover\\:text-indigo-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(99 102 241 / var(--tw-text-opacity));\n}\n.hover\\:text-pink-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(236 72 153 / var(--tw-text-opacity));\n}\n.hover\\:text-purple-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(168 85 247 / var(--tw-text-opacity));\n}\n.hover\\:text-red-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.hover\\:text-yellow-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(234 179 8 / var(--tw-text-opacity));\n}\n.focus\\:z-10:focus {\n  z-index: 10;\n}\n.focus\\:z-20:focus {\n  z-index: 20;\n}\n.focus\\:border-indigo-500:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(99 102 241 / var(--tw-border-opacity));\n}\n.focus\\:border-white:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n.focus\\:bg-blue-500:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.focus\\:bg-gray-500:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity));\n}\n.focus\\:bg-green-500:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.focus\\:bg-indigo-500:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(99 102 241 / var(--tw-bg-opacity));\n}\n.focus\\:bg-purple-500:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.focus\\:bg-red-500:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.focus\\:bg-white:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.focus\\:bg-yellow-500:focus {\n  --tw-bg-opacity: 1;\n  background-color: rgb(234 179 8 / var(--tw-bg-opacity));\n}\n.focus\\:text-gray-900:focus {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.focus\\:text-white:focus {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-1:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-inset:focus {\n  --tw-ring-inset: inset;\n}\n.focus\\:ring-indigo-500:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));\n}\n.focus\\:ring-white:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus\\:ring-offset-gray-100:focus {\n  --tw-ring-offset-color: #f3f4f6;\n}\n.focus\\:ring-offset-gray-800:focus {\n  --tw-ring-offset-color: #1f2937;\n}\n@media (min-width: 640px) {\n\n  .sm\\:static {\n    position: static;\n  }\n\n  .sm\\:inset-auto {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n  }\n\n  .sm\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .sm\\:mb-4 {\n    margin-bottom: 1rem;\n  }\n\n  .sm\\:ml-6 {\n    margin-left: 1.5rem;\n  }\n\n  .sm\\:mr-4 {\n    margin-right: 1rem;\n  }\n\n  .sm\\:block {\n    display: block;\n  }\n\n  .sm\\:flex {\n    display: flex;\n  }\n\n  .sm\\:hidden {\n    display: none;\n  }\n\n  .sm\\:w-1\\/6 {\n    width: 16.666667%;\n  }\n\n  .sm\\:w-32 {\n    width: 8rem;\n  }\n\n  .sm\\:w-full {\n    width: 100%;\n  }\n\n  .sm\\:max-w-2xl {\n    max-width: 42rem;\n  }\n\n  .sm\\:max-w-4xl {\n    max-width: 56rem;\n  }\n\n  .sm\\:max-w-md {\n    max-width: 28rem;\n  }\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:max-w-xs {\n    max-width: 20rem;\n  }\n\n  .sm\\:flex-1 {\n    flex: 1 1 0%;\n  }\n\n  .sm\\:translate-x-0 {\n    --tw-translate-x: 0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .sm\\:translate-x-2 {\n    --tw-translate-x: 0.5rem;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .sm\\:translate-y-0 {\n    --tw-translate-y: 0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .sm\\:scale-100 {\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .sm\\:scale-95 {\n    --tw-scale-x: .95;\n    --tw-scale-y: .95;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  }\n\n  .sm\\:items-start {\n    align-items: flex-start;\n  }\n\n  .sm\\:items-end {\n    align-items: flex-end;\n  }\n\n  .sm\\:items-center {\n    align-items: center;\n  }\n\n  .sm\\:items-stretch {\n    align-items: stretch;\n  }\n\n  .sm\\:justify-start {\n    justify-content: flex-start;\n  }\n\n  .sm\\:justify-between {\n    justify-content: space-between;\n  }\n\n  .sm\\:rounded-lg {\n    border-radius: 0.5rem;\n  }\n\n  .sm\\:rounded-md {\n    border-radius: 0.375rem;\n  }\n\n  .sm\\:p-0 {\n    padding: 0px;\n  }\n\n  .sm\\:p-6 {\n    padding: 1.5rem;\n  }\n\n  .sm\\:px-0 {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n\n  .sm\\:px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n\n  .sm\\:pr-0 {\n    padding-right: 0px;\n  }\n\n  .sm\\:text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n\n  .sm\\:duration-700 {\n    transition-duration: 700ms;\n  }\n}\n@media (min-width: 768px) {\n\n  .md\\:-mt-px {\n    margin-top: -1px;\n  }\n\n  .md\\:mb-0 {\n    margin-bottom: 0px;\n  }\n\n  .md\\:flex {\n    display: flex;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:ml-6 {\n    margin-left: 1.5rem;\n  }\n\n  .lg\\:block {\n    display: block;\n  }\n\n  .lg\\:hidden {\n    display: none;\n  }\n\n  .lg\\:max-w-xs {\n    max-width: 20rem;\n  }\n\n  .lg\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .lg\\:px-8 {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}";
+styleInject(css_248z);
+
+var ButtonElement = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'primary' : _a, _b = props.size, size = _b === void 0 ? 'md' : _b, _c = props.figure, figure = _c === void 0 ? 'block' : _c, _d = props.status, status = _d === void 0 ? 'idle' : _d, isDisabled = props.isDisabled, customStyles = props.styles, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$f.base.container, type && styles$f[type].container, size && styles$f[size].container, figure && styles$f[figure].container, status && styles$f[status].container, isDisabled && styles$f.disabled.container, status === 'loading' && styles$f.loading.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+    }); }, [customStyles]);
+    return (jsx("button", __assign({ type: "button", className: style.container, disabled: isDisabled || status !== 'idle', onClick: onClick }, { children: status === 'loading' ? '[Loading...]' : children })));
+};
+
+var base$4 = {
+    container: 'inline-flex items-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
+};
+var primary = {
+    container: "shadow-sm text-white bg-indigo-600  hover:bg-indigo-700",
+};
+var secondary = {
+    container: "shadow-none text-indigo-700 bg-indigo-100 hover:bg-indigo-200",
+};
+var outline = {
+    container: "border-gray-300  text-gray-700 bg-white hover:bg-gray-50",
+};
+var xs = {
+    container: 'px-3 py-1.5 text-xs',
+};
+var sm = {
+    container: 'px-3.5 py-2 text-sm',
+};
+var md = {
+    container: 'px-4 py-2.5 text-sm',
+};
+var lg = {
+    container: 'px-5 py-2.5 text-base',
+};
+var xl = {
+    container: 'px-6 py-3 text-base',
+};
+var block = {
+    container: 'rounded-md',
+};
+var rounded = {
+    container: 'rounded-full',
+};
+var idle = {
+    container: '',
+};
+var loading = {
+    container: 'cursor-progress',
+};
+var success = {
+    container: '',
+};
+var error = {
+    container: '',
+};
+var disabled = {
+    container: 'opacity-20 cursor-not-allowed',
+};
+var styles$f = {
+    base: base$4,
+    primary: primary,
+    secondary: secondary,
+    outline: outline,
+    xs: xs,
+    sm: sm,
+    md: md,
+    lg: lg,
+    xl: xl,
+    block: block,
+    rounded: rounded,
+    idle: idle,
+    loading: loading,
+    success: success,
+    error: error,
+    disabled: disabled,
+};
+
+var ButtonGroupElement = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$e.base.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        firstButton: toClassName(styles$e.base.firstButton, customStyles === null || customStyles === void 0 ? void 0 : customStyles.firstButton),
+        button: toClassName(styles$e.base.button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+        lastButton: toClassName(styles$e.base.lastButton, customStyles === null || customStyles === void 0 ? void 0 : customStyles.lastButton),
+    }); }, [customStyles]);
+    return (jsx("span", __assign({ className: style.container }, { children: Children.map(children, function (child, index) {
+            var _a;
+            var className = style.button;
+            if (index === 0) {
+                className = style.firstButton;
+            }
+            if (index === children.length - 1) {
+                className = style.lastButton;
+            }
+            return (jsx("button", __assign({ className: className }, { children: child }), (_a = child.key) !== null && _a !== void 0 ? _a : index));
+        }) })));
+};
+
+var base$3 = {
+    container: 'relative z-0 inline-flex shadow-sm rounded-md',
+    firstButton: 'relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+    button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+    lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+};
+var styles$e = { base: base$3 };
+
+var Container$3 = function (props) {
+    var children = props.children, label = props.label, _a = props.type, type = _a === void 0 ? 'button' : _a, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$d.base.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        button: toClassName(styles$d.base.button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+        compact: toClassName(styles$d.base.compact, customStyles === null || customStyles === void 0 ? void 0 : customStyles.compact),
+        dots: toClassName(styles$d.base.dots, customStyles === null || customStyles === void 0 ? void 0 : customStyles.dots),
+        items: toClassName(styles$d.base.items, customStyles === null || customStyles === void 0 ? void 0 : customStyles.items),
+    }); }, [customStyles]);
+    return (jsxs(Menu, __assign({ as: "div", className: style.container }, { children: [jsxs("div", { children: [type === 'button' && (jsxs(Menu.Button, __assign({ className: style.button }, { children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))), type === 'compact' && (jsxs(Menu.Button, __assign({ className: style.compact }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: label })), jsx(EllipsisVerticalIcon, { className: style.dots, "aria-hidden": "true" })] })))] }), jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsx(Menu.Items, __assign({ className: style.items }, { children: children })) }))] })));
+};
+var Dropdown = {
+    Container: Container$3,
+    Item: Menu.Item,
+};
+
+var base$2 = {
+    container: 'relative inline-block text-left',
+    button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500',
+    compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500',
+    dots: 'h-7 w-7 p-1',
+    items: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none',
+};
+var styles$d = {
+    base: base$2,
+};
+
+var Element = {
+    Button: ButtonElement,
+    Avatar: AvatarElement,
+    Badge: BadgeElement,
+    ButtonGroup: ButtonGroupElement,
+    Dropdown: Dropdown,
+};
+
+var ContainerLayout = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        break: {
+            container: toClassName(initialStyles.break.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        },
+        center: {
+            container: toClassName(initialStyles.center.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            content: toClassName(initialStyles.center.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
+        },
+        fill: {
+            container: toClassName(initialStyles.fill.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        },
+    }); }, [customStyles]);
+    var $component = useMemo(function () {
+        var result;
+        switch (type) {
+            case 'break':
+                result = jsx("div", __assign({ className: style.break.container }, { children: children }));
+                break;
+            case 'center':
+                result = (jsx("div", __assign({ className: style.center.container }, { children: jsx("div", __assign({ className: style.center.content }, { children: children })) })));
+                break;
+            case 'fill':
+                result = jsx("div", __assign({ className: style.fill.container }, { children: children }));
+                break;
+        }
+        return result;
+    }, [style]);
+    return $component;
+};
+
+var breakStyles = {
+    container: 'container mx-auto sm:px-6 lg:px-8',
+};
+var centerStyles = {
+    container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
+    content: 'max-w-4xl mx-auto',
+};
+var fillStyles = {
+    container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
+};
+var initialStyles = {
+    break: breakStyles,
+    center: centerStyles,
+    fill: fillStyles,
+};
+
+var DividerLayout = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'left' : _a, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$c.base.container, type && styles$c[type].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        head: toClassName(styles$c.base.head, type && styles$c[type].head, customStyles === null || customStyles === void 0 ? void 0 : customStyles.head),
+        line: toClassName(styles$c.base.line, type && styles$c[type].line, customStyles === null || customStyles === void 0 ? void 0 : customStyles.line),
+        body: toClassName(styles$c.base.body, type && styles$c[type].body, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body),
+        content: toClassName(styles$c.base.content, type && styles$c[type].content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
+    }); }, [customStyles]);
+    return (jsxs("div", __assign({ className: style.container }, { children: [jsx("div", __assign({ className: style.head, "aria-hidden": "true" }, { children: jsx("div", { className: style.line }) })), jsx("div", __assign({ className: style.body }, { children: jsx("div", __assign({ className: style.content }, { children: children })) }))] })));
+};
+
+var base$1 = {
+    container: 'relative',
+    head: 'absolute inset-0 flex items-center',
+    line: 'w-full border-t border-gray-300',
+    body: 'relative flex',
+    content: 'bg-white text-sm text-gray-500',
+};
+var left = {
+    container: '',
+    head: '',
+    line: '',
+    body: 'justify-start',
+    content: '',
+};
+var center$2 = {
+    container: '',
+    head: '',
+    line: '',
+    body: 'justify-center',
+    content: '',
+};
+var right = {
+    container: '',
+    head: '',
+    line: '',
+    body: 'justify-end',
+    content: '',
+};
+var styles$c = {
+    base: base$1,
+    left: left,
+    center: center$2,
+    right: right,
+};
+
+var ListContainerLayout = function (props) {
+    var _a;
+    var children = props.children, _b = props.type, type = _b === void 0 ? 'fill' : _b, customStyles = props.styles;
+    var isSticky = type.includes('-sticky');
+    var selector = isSticky ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0] : type;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(isSticky
+            ? styles$b["".concat(selector, "_sticky")].container
+            : styles$b[selector].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        list: toClassName(isSticky
+            ? styles$b["".concat(selector, "_sticky")].list
+            : styles$b[selector].list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list),
+        item: toClassName(isSticky
+            ? styles$b["".concat(selector, "_sticky")].item
+            : styles$b[selector].item, customStyles === null || customStyles === void 0 ? void 0 : customStyles.item),
+    }); }, [customStyles]);
+    return (jsx("div", __assign({ className: style.container }, { children: jsx("ul", __assign({ role: "list", className: style.list }, { children: Children.map(children, function (child, index) {
+                var _a;
+                return (jsx("li", __assign({ className: style.item }, { children: child }), (_a = child.key) !== null && _a !== void 0 ? _a : index));
+            }) })) })));
+};
+
+var fill = {
+    list: 'divide-y divide-gray-200',
+    item: 'py-4',
+};
+var fill_sticky = {
+    list: 'divide-y divide-gray-200',
+    item: 'px-4 py-4 sm:px-0',
+};
+var center$1 = {
+    container: 'bg-white shadow overflow-hidden rounded-md',
+    list: 'divide-y divide-gray-200',
+    item: 'px-6 py-4',
+};
+var center_sticky = {
+    container: 'bg-white shadow overflow-hidden sm:rounded-md',
+    list: 'divide-y divide-gray-200',
+    item: 'px-4 py-4 sm:px-6',
+};
+var card = {
+    list: 'space-y-3',
+    item: 'bg-white shadow overflow-hidden rounded-md px-6 py-4',
+};
+var card_sticky = {
+    list: 'space-y-3',
+    item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
+};
+var styles$b = {
+    fill: fill,
+    fill_sticky: fill_sticky,
+    center: center$1,
+    center_sticky: center_sticky,
+    card: card,
+    card_sticky: card_sticky,
+};
+
+var MediaObjectLayout = function (props) {
+    var _a;
+    var title = props.title, paragraph = props.paragraph, customFigure = props.figure, _b = props.type, type = _b === void 0 ? 'top' : _b, customStyles = props.styles;
+    var isReversed = type.includes('-reversed');
+    var selector = isReversed ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0] : type;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$a[selector].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, isReversed && 'flex-row-reverse'),
+        figure: toClassName(styles$a[selector].figure, customStyles === null || customStyles === void 0 ? void 0 : customStyles.figure),
+        svg: toClassName(styles$a[selector].svg, customStyles === null || customStyles === void 0 ? void 0 : customStyles.svg),
+        title: toClassName(styles$a[selector].title, customStyles === null || customStyles === void 0 ? void 0 : customStyles.title),
+        paragraph: toClassName(styles$a[selector].paragraph, customStyles === null || customStyles === void 0 ? void 0 : customStyles.paragraph),
+    }); }, [customStyles]);
+    var $svg = useMemo(function () {
+        var result = (jsx("svg", __assign({ className: style.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true" }, { children: jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) })));
+        if (customFigure) {
+            result = React.cloneElement(customFigure, {
+                className: style.svg,
+            });
+        }
+        return result;
+    }, [style]);
+    return (jsxs("div", __assign({ className: style.container }, { children: [jsx("div", __assign({ className: style.figure }, { children: $svg })), jsxs("div", { children: [jsx("h4", __assign({ className: style.title }, { children: title })), jsx("p", __assign({ className: style.paragraph }, { children: paragraph }))] })] })));
+};
+
+var base = {
+    container: 'flex',
+    figure: 'mr-4 flex-shrink-0',
+    svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
+    title: 'text-lg font-bold',
+    paragraph: 'mt-1',
+};
+var top = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var center = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure, " self-center"),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var bottom = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure, " self-end"),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var stretch = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure),
+    svg: "".concat(base.svg, " h-full"),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var responsive = {
+    container: 'sm:flex',
+    figure: "".concat(base.figure, " sm:mb-0 sm:mr-4"),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var wide = {
+    container: 'sm:flex',
+    figure: "".concat(base.figure, " mb-4 md:mb-0 sm:mr-4 sm:mb-4 "),
+    svg: "".concat(base.svg, " h-32 w-full sm:w-32"),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var styles$a = {
+    top: top,
+    center: center,
+    bottom: bottom,
+    stretch: stretch,
+    responsive: responsive,
+    wide: wide,
+};
+
+var LayoutPanel = function (props) {
+    var head = props.head, children = props.children, foot = props.foot, _a = props.type, type = _a === void 0 ? 'normal' : _a, customStyles = props.styles;
+    var typeStyle = useMemo(function () {
+        var result;
+        switch (type) {
+            case 'normal':
+                result = 'rounded-lg';
+                break;
+            case 'sticky':
+                result = 'sm:rounded-lg';
+                break;
+        }
+        return result;
+    }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$9.container, typeStyle, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        head: toClassName(styles$9.head, customStyles === null || customStyles === void 0 ? void 0 : customStyles.head),
+        body: toClassName(styles$9.body, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body),
+        foot: toClassName(styles$9.foot, customStyles === null || customStyles === void 0 ? void 0 : customStyles.foot),
+    }); }, [customStyles]);
+    return (jsxs("div", __assign({ className: style.container }, { children: [head && jsx("div", __assign({ className: style.head }, { children: head })), children && jsx("div", __assign({ className: style.body }, { children: children })), foot && jsx("div", __assign({ className: style.foot }, { children: foot }))] })));
+};
+
+var styles$9 = {
+    container: 'bg-white overflow-hidden shadow',
+    head: 'px-4 py-5 sm:px-6',
+    body: 'px-4 py-5 sm:p-6',
+    foot: 'px-4 py-5 sm:px-6',
+};
+
+var Layout = {
+    Container: ContainerLayout,
+    Divider: DividerLayout,
+    ListContainer: ListContainerLayout,
+    MediaObject: MediaObjectLayout,
+    Panel: LayoutPanel,
+};
+
+var NavbarNavigationLogo = function () {
+    return (jsxs("div", __assign({ className: "flex flex-shrink-0 items-center" }, { children: [jsx("img", { className: "block h-8 w-auto lg:hidden", src: "https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500", alt: "Your Company" }), jsx("img", { className: "hidden h-8 w-auto lg:block", src: "https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500", alt: "Your Company" })] })));
+};
+var NavbarNavigationRoutes = function () {
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var navigation = [
+        { name: 'Dashboard', href: '#', current: true },
+        { name: 'Team', href: '#', current: false },
+        { name: 'Projects', href: '#', current: false },
+        { name: 'Calendar', href: '#', current: false },
+    ];
+    return (jsx("div", __assign({ className: "flex flex-1 items-center justify-center sm:items-stretch sm:justify-start" }, { children: jsx("div", __assign({ className: "hidden sm:ml-6 sm:block" }, { children: jsx("div", __assign({ className: "flex space-x-4" }, { children: navigation.map(function (item) { return (jsx("a", __assign({ href: item.href, className: toClassName(item.current
+                        ? 'bg-gray-900 text-white'
+                        : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'px-3 py-2 rounded-md text-sm font-medium'), "aria-current": item.current ? 'page' : undefined }, { children: item.name }), item.name)); }) })) })) })));
+};
+var NavbarNavigationAccount = function () {
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    return (jsxs("div", __assign({ className: "absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0" }, { children: [jsx("button", __assign({ type: "button", className: "rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" }, { children: jsx("span", __assign({ className: "sr-only" }, { children: "View notifications" })) })), jsxs(Menu, __assign({ as: "div", className: "relative ml-3" }, { children: [jsx("div", { children: jsxs(Menu.Button, __assign({ className: "flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: "Open user menu" })), jsx("img", { className: "h-8 w-8 rounded-full", src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" })] })) }), jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsxs(Menu.Items, __assign({ className: "absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" }, { children: [jsx(Menu.Item, { children: function (_a) {
+                                        var active = _a.active;
+                                        return (jsx("a", __assign({ href: "#", className: toClassName(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700') }, { children: "Your Profile" })));
+                                    } }), jsx(Menu.Item, { children: function (_a) {
+                                        var active = _a.active;
+                                        return (jsx("a", __assign({ href: "#", className: toClassName(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700') }, { children: "Settings" })));
+                                    } }), jsx(Menu.Item, { children: function (_a) {
+                                        var active = _a.active;
+                                        return (jsx("a", __assign({ href: "#", className: toClassName(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700') }, { children: "Sign out" })));
+                                    } })] })) }))] }))] })));
+};
+var NavbarNavigationAction = function () {
+    return jsx("div", __assign({ className: styles$8.container }, { children: null }));
+};
+var NavbarNavigationSearch = function () {
+    return (jsx("div", __assign({ className: "flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end" }, { children: jsxs("div", __assign({ className: "w-full max-w-lg lg:max-w-xs" }, { children: [jsx("label", __assign({ htmlFor: "search", className: "sr-only" }, { children: "Search" })), jsxs("div", __assign({ className: "relative" }, { children: [jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" }), jsx("input", { id: "search", name: "search", className: "block w-full rounded-md border border-transparent bg-gray-700 py-2 pl-10 pr-3 leading-5 text-gray-300 placeholder-gray-400 focus:border-white focus:bg-white focus:text-gray-900 focus:outline-none focus:ring-white sm:text-sm", placeholder: "Search", type: "search" })] }))] })) })));
+};
+var NavbarNavigationContainer = function (props) {
+    var children = props.children;
+    // const toClassName = useCallback(
+    //   (...values: (boolean | string | undefined)[]) =>
+    //     values.filter(Boolean).join(' '),
+    //   [],
+    // );
+    return (jsx(Disclosure, __assign({ as: "nav", className: "bg-gray-800 fixed left-0 top-0 right-0 z-20" }, { children: function (_a) {
+            var open = _a.open;
+            return (jsxs(Fragment$1, { children: [jsx("div", __assign({ className: "mx-auto max-w-7xl px-2 sm:px-6 lg:px-8" }, { children: jsxs("div", __assign({ className: "relative flex h-16 items-center justify-between" }, { children: [jsx("div", __assign({ className: "absolute inset-y-0 left-0 flex items-center sm:hidden" }, { children: jsxs(Disclosure.Button, __assign({ className: "inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: "Open main menu" })), open
+                                                ? 'x'
+                                                : // <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+                                                    '='
+                                            // <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+                                        ] })) })), children] })) })), jsx(Disclosure.Panel, __assign({ className: "sm:hidden" }, { children: jsx("div", { className: "space-y-1 px-2 pt-2 pb-3" }) }))] }));
+        } })));
+};
+var NavbarNavigation = {
+    Container: NavbarNavigationContainer,
+    Logo: NavbarNavigationLogo,
+    Routes: NavbarNavigationRoutes,
+    Account: NavbarNavigationAccount,
+    Action: NavbarNavigationAction,
+    Search: NavbarNavigationSearch,
+};
+
+var styles$8 = {
+    container: '',
+};
+
+var CardPaginationNavigation = function (props) {
+    var _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, customStyles = props.styles, children = props.children, onChange = props.onChange;
+    var _c = useState(2), current = _c[0], setCurrent = _c[1];
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return ({
+            container: toClassName(styles$7.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            mobile: {
+                container: toClassName(styles$7.mobile.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.mobile) === null || _a === void 0 ? void 0 : _a.container),
+                button: toClassName(styles$7.mobile.button, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.mobile) === null || _b === void 0 ? void 0 : _b.button),
+            },
+            desktop: {
+                container: toClassName(styles$7.desktop.container, (_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _c === void 0 ? void 0 : _c.container),
+                leftButton: toClassName(styles$7.desktop.leftButton, (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _d === void 0 ? void 0 : _d.leftButton),
+                rightButton: toClassName(styles$7.desktop.rightButton, (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _e === void 0 ? void 0 : _e.rightButton),
+                navigation: toClassName(styles$7.desktop.navigation, (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _f === void 0 ? void 0 : _f.navigation),
+            },
+            button: {
+                default: toClassName(styles$7.button.default, (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _g === void 0 ? void 0 : _g.default),
+                active: toClassName(styles$7.button.active, (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _h === void 0 ? void 0 : _h.active),
+                disabled: toClassName(styles$7.button.disabled, (_j = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _j === void 0 ? void 0 : _j.disabled),
+            },
+            divider: toClassName(styles$7.divider, customStyles === null || customStyles === void 0 ? void 0 : customStyles.divider),
+            label: toClassName(styles$7.label, customStyles === null || customStyles === void 0 ? void 0 : customStyles.label),
+            icon: toClassName(styles$7.icon, customStyles === null || customStyles === void 0 ? void 0 : customStyles.icon),
+        });
+    }, []);
+    var pageType = useMemo(function () {
+        var result = 'center';
+        if (current < min + 3) {
+            result = 'first';
+        }
+        if (current > max - 3) {
+            result = 'last';
+        }
+        return result;
+    }, [current, min, max]);
+    var component;
+    switch (pageType) {
+        case 'first':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: toClassName(style.button.default, current === min && style.button.active), onClick: function () { return setCurrent(min); } }, { children: min })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 1 && style.button.active), onClick: function () { return setCurrent(min + 1); } }, { children: min + 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 2 && style.button.active), onClick: function () { return setCurrent(min + 2); } }, { children: min + 2 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'center':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current - 1); } }, { children: current - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, style.button.active), onClick: function () { return setCurrent(current); } }, { children: current })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current + 1); } }, { children: current + 1 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'last':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 2 && style.button.active), onClick: function () { return setCurrent(max - 2); } }, { children: max - 2 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 1 && style.button.active), onClick: function () { return setCurrent(max - 1); } }, { children: max - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max && style.button.active), onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+    }
+    useEffect(function () {
+        if (current) {
+            onChange && onChange(current);
+        }
+    }, [onChange, current]);
+    return (jsxs("div", __assign({ className: style.container }, { children: [jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsx("button", __assign({ className: toClassName(style.mobile.button, current === min && style.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: "Previous" })), jsx("button", __assign({ className: toClassName(style.mobile.button, current === max && style.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: "Next" }))] })), jsxs("div", __assign({ className: style.desktop.container }, { children: [jsx("div", { children: jsx("p", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsx("div", { children: jsxs("nav", __assign({ className: style.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxs("button", __assign({ className: toClassName(style.desktop.leftButton, current === min && style.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsx("span", __assign({ className: style.label }, { children: "Previous" })), jsx(ChevronLeftIcon, { className: style.icon, "aria-hidden": "true" })] })), component, jsxs("button", __assign({ className: toClassName(style.desktop.rightButton, current === max && style.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: [jsx("span", __assign({ className: style.label }, { children: "Next" })), jsx(ChevronRightIcon, { className: style.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
+};
+
+var styles$7 = {
+    container: 'flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6',
+    mobile: {
+        container: '',
+        button: 'relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50',
+    },
+    desktop: {
+        container: 'hidden sm:flex sm:flex-1 sm:items-center sm:justify-between',
+        leftButton: 'relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
+        rightButton: 'relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
+        navigation: 'isolate inline-flex -space-x-px rounded-md shadow-sm',
+    },
+    button: {
+        default: 'relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50',
+        active: 'border-indigo-500 bg-indigo-50 text-indigo-600 z-20',
+        disabled: 'opacity-20 cursor-not-allowed',
+    },
+    divider: 'relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500',
+    label: 'sr-only',
+    icon: 'w-5 h-5',
+};
+
+var PagePaginationNavigation = function (props) {
+    var _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, customStyles = props.styles, onChange = props.onChange;
+    var _c = useState(2), current = _c[0], setCurrent = _c[1];
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return ({
+            container: toClassName(styles$6.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            left: {
+                container: toClassName(styles$6.left.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _a === void 0 ? void 0 : _a.container),
+                button: toClassName(styles$6.left.button, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _b === void 0 ? void 0 : _b.button),
+                icon: toClassName(styles$6.left.icon, (_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _c === void 0 ? void 0 : _c.icon),
+            },
+            center: {
+                container: toClassName(styles$6.center.container, (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.center) === null || _d === void 0 ? void 0 : _d.container),
+            },
+            right: {
+                container: toClassName(styles$6.right.container, (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _e === void 0 ? void 0 : _e.container),
+                button: toClassName(styles$6.right.button, (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _f === void 0 ? void 0 : _f.button),
+                icon: toClassName(styles$6.right.icon, (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _g === void 0 ? void 0 : _g.icon),
+            },
+            button: {
+                default: toClassName(styles$6.button.default, (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _h === void 0 ? void 0 : _h.default),
+                active: toClassName(styles$6.button.active, (_j = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _j === void 0 ? void 0 : _j.active),
+                disabled: toClassName(styles$6.button.disabled, (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _k === void 0 ? void 0 : _k.disabled),
+            },
+            divider: toClassName(styles$6.divider, customStyles === null || customStyles === void 0 ? void 0 : customStyles.divider),
+        });
+    }, []);
+    var pageType = useMemo(function () {
+        var result = 'center';
+        if (current < min + 3) {
+            result = 'first';
+        }
+        if (current > max - 3) {
+            result = 'last';
+        }
+        return result;
+    }, [current, min, max]);
+    var component;
+    switch (pageType) {
+        case 'first':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: toClassName(style.button.default, current === min && style.button.active), onClick: function () { return setCurrent(min); } }, { children: min })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 1 && style.button.active), onClick: function () { return setCurrent(min + 1); } }, { children: min + 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 2 && style.button.active), onClick: function () { return setCurrent(min + 2); } }, { children: min + 2 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'center':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current - 1); } }, { children: current - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, style.button.active), onClick: function () { return setCurrent(current); } }, { children: current })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current + 1); } }, { children: current + 1 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'last':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 2 && style.button.active), onClick: function () { return setCurrent(max - 2); } }, { children: max - 2 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 1 && style.button.active), onClick: function () { return setCurrent(max - 1); } }, { children: max - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max && style.button.active), onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+    }
+    useEffect(function () {
+        if (current) {
+            onChange && onChange(current);
+        }
+    }, [onChange, current]);
+    return (jsxs("nav", __assign({ className: style.container }, { children: [jsx("div", __assign({ className: style.left.container }, { children: jsxs("button", __assign({ className: toClassName(style.left.button, current === min && style.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsx(ArrowLongLeftIcon, { className: style.left.icon }), "Previous"] })) })), jsx("div", __assign({ className: style.center.container }, { children: component })), jsx("div", __assign({ className: style.right.container }, { children: jsxs("button", __assign({ className: toClassName(style.right.button, current === max && style.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: ["Next", jsx(ArrowLongRightIcon, { className: style.right.icon })] })) }))] })));
+};
+
+var styles$6 = {
+    container: 'flex items-center justify-between border-t border-gray-200 px-4 sm:px-0',
+    left: {
+        container: '-mt-px flex w-0 flex-1',
+        button: 'inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700',
+        icon: 'mr-3 h-5 w-5 text-gray-400',
+    },
+    center: {
+        container: 'hidden md:-mt-px md:flex',
+    },
+    right: {
+        container: '-mt-px flex w-0 flex-1 justify-end',
+        button: 'inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700',
+        icon: 'ml-3 h-5 w-5 text-gray-400',
+    },
+    button: {
+        default: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700',
+        active: 'border-indigo-500 text-indigo-600',
+        disabled: 'opacity-20 cursor-not-allowed',
+    },
+    divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
+};
+
+var Pagination = {
+    Card: CardPaginationNavigation,
+    Page: PagePaginationNavigation,
+};
+
+var Container$2 = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var _a = useState(''), active = _a[0], setActive = _a[1];
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        root: toClassName(styles$5.root, customStyles === null || customStyles === void 0 ? void 0 : customStyles.root),
+        panel: toClassName(styles$5.panel, customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel),
+        container: toClassName(styles$5.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        content: toClassName(styles$5.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
+    }); }, []);
+    return (jsx("div", __assign({ className: style.root, style: { maxWidth: '22rem' } }, { children: jsxs("div", __assign({ className: style.panel }, { children: [jsx("div", __assign({ className: style.container }, { children: jsx("div", __assign({ className: style.content }, { children: jsx("img", { className: "h-8 w-auto", src: "https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600", alt: "Logo" }) })) })), children({ active: active, setActive: setActive })] })) })));
+};
+var List$2 = function (props) {
+    var children = props.children, setActive = props.setActive, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    useEffect(function () {
+        var _a, _b;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
+        var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
+        if (initialTab !== undefined) {
+            tab = initialTab;
+        }
+        setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+    }, []);
+    return (jsx("nav", __assign({ className: toClassName(styles$5.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
+};
+var Item$2 = function (props) {
+    var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
+            ? styles$5.item.active
+            : styles$5.item.notActive, styles$5 === null || styles$5 === void 0 ? void 0 : styles$5.item.base), onClick: onClick }, { children: children })));
+};
+var Footer = function (props) {
+    var children = props.children;
+    return jsx("div", __assign({ className: "flex border-t border-gray-200 p-4" }, { children: children }));
+};
+var SidebarNavigation = {
+    Container: Container$2,
+    List: List$2,
+    Item: Item$2,
+    Footer: Footer,
+};
+
+var styles$5 = {
+    root: 'z-10 fixed top-0 left-0 bottom-0 bg-red-50 sm:w-1/6',
+    panel: 'flex min-h-0 flex-1 flex-col border-r border-gray-200 bg-white h-full pt-16',
+    container: 'flex flex-col overflow-y-auto pt-5 pb-4',
+    content: 'flex flex-shrink-0 items-center px-4',
+    list: 'mt-5 flex-1 space-y-1 bg-white px-2 ',
+    item: {
+        base: 'group flex items-center px-2 py-2 text-sm font-medium rounded-md cursor-pointer',
+        active: 'bg-gray-100 text-gray-900 hover:text-gray-900 hover:bg-gray-100',
+        notActive: 'text-gray-600 hover:text-gray-900 hover:bg-gray-50',
+    },
+};
+
+var Container$1 = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var _a = useState(''), active = _a[0], setActive = _a[1];
+    return (jsx("div", __assign({ className: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container }, { children: children({ active: active, setActive: setActive }) })));
+};
+var List$1 = function (props) {
+    var children = props.children, active = props.active, setActive = props.setActive, customStyles = props.styles;
+    var handleChangeSelect = useCallback(function (e) {
+        var _a;
+        var key = e.currentTarget.value;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a.find(function (child) { return child.props.accessor === key; });
+        if (tab === null || tab === void 0 ? void 0 : tab.props.href) {
+            window.location.href = tab.props.href;
+        }
+        else if (tab === null || tab === void 0 ? void 0 : tab.props.onClick) {
+            setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+        }
+    }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    useEffect(function () {
+        var _a, _b;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
+        var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
+        if (initialTab !== undefined) {
+            tab = initialTab;
+        }
+        setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+    }, []);
+    return (jsxs(Fragment$1, { children: [jsxs("div", __assign({ className: "sm:hidden" }, { children: [jsx("label", __assign({ htmlFor: "tabs", className: "sr-only" }, { children: "Select a tab" })), jsx("select", __assign({ id: "tabs", name: "tabs", value: active, className: toClassName(styles$4.select, customStyles === null || customStyles === void 0 ? void 0 : customStyles.select), onChange: handleChangeSelect }, { children: Children.map(children, function (child) {
+                            var _a;
+                            return (jsx("option", __assign({ value: child.props.accessor }, { children: child.props.children }), (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.accessor));
+                        }) }))] })), jsx("div", __assign({ className: "hidden sm:block" }, { children: jsx("nav", __assign({ className: toClassName(styles$4.navigation, customStyles === null || customStyles === void 0 ? void 0 : customStyles.navigation) }, { children: children })) }))] }));
+};
+var Item$1 = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
+            ? styles$4.tab[type].active
+            : styles$4.tab[type].notActive, styles$4.tab[type].base), onClick: onClick }, { children: children })));
+};
+var View$1 = function (props) {
+    var children = props.children;
+    return jsx(Fragment$1, { children: children });
+};
+var TabNavigation = {
+    Container: Container$1,
+    List: List$1,
+    Item: Item$1,
+    View: View$1,
+};
+
+var styles$4 = {
+    container: '',
+    select: 'block w-full rounded-md border border-gray-300 py-2 px-3 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm',
+    navigation: 'border-b border-gray-200 -mb-px flex space-x-8',
+    tab: {
+        underline: {
+            base: 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer',
+            active: 'border-indigo-500 text-indigo-600',
+            notActive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+        },
+        pills: {
+            base: 'px-3 py-2 font-medium text-sm rounded-md cursor-pointer',
+            active: 'bg-gray-100 text-gray-700',
+            notActive: 'text-gray-500 hover:text-gray-700',
+        },
+        buttons: {
+            base: 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer',
+            active: 'border-indigo-500 text-indigo-600',
+            notActive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+        },
+    },
+};
+
+var Container = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var _a = useState(''), active = _a[0], setActive = _a[1];
+    return (jsx("div", __assign({ className: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container }, { children: children({ active: active, setActive: setActive }) })));
+};
+var List = function (props) {
+    var children = props.children, setActive = props.setActive, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    useEffect(function () {
+        var _a, _b;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
+        var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
+        if (initialTab !== undefined) {
+            tab = initialTab;
+        }
+        setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+    }, []);
+    return (jsx("nav", __assign({ className: toClassName(styles$3.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
+};
+var Item = function (props) {
+    var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
+            ? styles$3.item.active
+            : styles$3.item.notActive, styles$3 === null || styles$3 === void 0 ? void 0 : styles$3.item.base), onClick: onClick }, { children: children })));
+};
+var View = function (props) {
+    var children = props.children;
+    return jsx(Fragment$1, { children: children });
+};
+var VerticalNavigation = {
+    Container: Container,
+    List: List,
+    Item: Item,
+    View: View,
+};
+
+var styles$3 = {
+    container: '',
+    list: 'space-y-1',
+    item: {
+        base: 'flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer',
+        active: 'bg-gray-100 text-gray-900',
+        notActive: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+    },
+};
+
+var Navigation = {
+    Navbar: NavbarNavigation,
+    Pagination: Pagination,
+    Sidebar: SidebarNavigation,
+    Tab: TabNavigation,
+    Vertical: VerticalNavigation,
+};
+
+var ModalOverlay = function (props) {
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var options = useMemo(function () { return ({
+        onOpen: function () { return setIsOpen(true); },
+        onClose: function () { return setIsOpen(false); },
+    }); }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+        return ({
+            container: toClassName(styles$2.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            background: {
+                container: toClassName(styles$2.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
+                transition: {
+                    enter: toClassName(styles$2.background.transition.enter, (_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _b === void 0 ? void 0 : _b.transition) === null || _c === void 0 ? void 0 : _c.enter),
+                    enterFrom: toClassName(styles$2.background.transition.enterFrom, (_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _d === void 0 ? void 0 : _d.transition) === null || _e === void 0 ? void 0 : _e.enterFrom),
+                    enterTo: toClassName(styles$2.background.transition.enterTo, (_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _f === void 0 ? void 0 : _f.transition) === null || _g === void 0 ? void 0 : _g.enterTo),
+                    leave: toClassName(styles$2.background.transition.leave, (_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _h === void 0 ? void 0 : _h.transition) === null || _j === void 0 ? void 0 : _j.leave),
+                    leaveFrom: toClassName(styles$2.background.transition.leaveFrom, (_l = (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _k === void 0 ? void 0 : _k.transition) === null || _l === void 0 ? void 0 : _l.leaveFrom),
+                    leaveTo: toClassName(styles$2.background.transition.leaveTo, (_o = (_m = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _m === void 0 ? void 0 : _m.transition) === null || _o === void 0 ? void 0 : _o.leaveTo),
+                },
+            },
+            layout: {
+                container: toClassName(styles$2.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
+                content: toClassName(styles$2.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
+            },
+            panel: {
+                container: toClassName(styles$2.panel.container, size && styles$2[size], (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _r === void 0 ? void 0 : _r.container),
+                transition: {
+                    enter: toClassName(styles$2.panel.transition.enter, (_t = (_s = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _s === void 0 ? void 0 : _s.transition) === null || _t === void 0 ? void 0 : _t.enter),
+                    enterFrom: toClassName(styles$2.panel.transition.enterFrom, (_v = (_u = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _u === void 0 ? void 0 : _u.transition) === null || _v === void 0 ? void 0 : _v.enterFrom),
+                    enterTo: toClassName(styles$2.panel.transition.enterTo, (_x = (_w = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _w === void 0 ? void 0 : _w.transition) === null || _x === void 0 ? void 0 : _x.enterTo),
+                    leave: toClassName(styles$2.panel.transition.leave, (_z = (_y = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _y === void 0 ? void 0 : _y.transition) === null || _z === void 0 ? void 0 : _z.leave),
+                    leaveFrom: toClassName(styles$2.panel.transition.leaveFrom, (_1 = (_0 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _0 === void 0 ? void 0 : _0.transition) === null || _1 === void 0 ? void 0 : _1.leaveFrom),
+                    leaveTo: toClassName(styles$2.panel.transition.leaveTo, (_3 = (_2 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _2 === void 0 ? void 0 : _2.transition) === null || _3 === void 0 ? void 0 : _3.leaveTo),
+                },
+            },
+        });
+    }, []);
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: style.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: style.background.transition.enter, enterFrom: style.background.transition.enterFrom, enterTo: style.background.transition.enterTo, leave: style.background.transition.leave, leaveFrom: style.background.transition.leaveFrom, leaveTo: style.background.transition.leaveTo }, { children: jsx("div", { className: style.background.container }) })), jsx("div", __assign({ className: style.layout.container }, { children: jsx("div", __assign({ className: style.layout.content }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: style.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
+};
+
+var styles$2 = {
+    container: 'relative z-20',
+    background: {
+        container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+        transition: {
+            enter: 'ease-out duration-300',
+            enterFrom: 'opacity-0',
+            enterTo: 'opacity-100',
+            leave: 'ease-in duration-200',
+            leaveFrom: 'opacity-100',
+            leaveTo: 'opacity-0',
+        },
+    },
+    layout: {
+        container: 'fixed inset-0 z-10 overflow-y-auto',
+        content: 'flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0',
+    },
+    panel: {
+        container: 'relative transform overflow-hidden rounded-lg bg-white w-full shadow-xl transition-all sm:w-full text-left',
+        transition: {
+            enter: 'ease-out duration-300',
+            enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+            enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+            leave: 'ease-in duration-200',
+            leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
+            leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+        },
+    },
+    xs: 'sm:max-w-xs',
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-2xl',
+    xl: 'sm:max-w-4xl',
+};
+
+var NotificationOverlayContainer = function (_a) {
+    var children = _a.children, customStyles = _a.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b;
+        return ({
+            outer: toClassName(styles$1.container.outer, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) === null || _a === void 0 ? void 0 : _a.outer),
+            inner: toClassName(styles$1.container.inner, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) === null || _b === void 0 ? void 0 : _b.inner),
+        });
+    }, []);
+    return (jsx("div", __assign({ "aria-live": "assertive", className: style.outer }, { children: jsx("div", __assign({ className: style.inner }, { children: children })) })));
+};
+var NotificationOverlayItem = function (props) {
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var options = useMemo(function () { return ({
+        onOpen: function () { return setIsOpen(true); },
+        onClose: function () { return setIsOpen(false); },
+    }); }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        return ({
+            container: toClassName(styles$1.item.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _a === void 0 ? void 0 : _a.container),
+            layout: {
+                container: toClassName(styles$1.item.layout.container, (_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.container),
+                content: toClassName(styles$1.item.layout.content, (_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.content),
+                inner: toClassName(styles$1.item.layout.inner, (_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.inner),
+            },
+            panel: {
+                container: toClassName(styles$1.item.panel.container, size && styles$1[size], (_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _h === void 0 ? void 0 : _h.panel) === null || _j === void 0 ? void 0 : _j.container),
+                transition: {
+                    enter: toClassName(styles$1.item.panel.transition.enter, (_m = (_l = (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _k === void 0 ? void 0 : _k.panel) === null || _l === void 0 ? void 0 : _l.transition) === null || _m === void 0 ? void 0 : _m.enter),
+                    enterFrom: toClassName(styles$1.item.panel.transition.enterFrom, (_q = (_p = (_o = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _o === void 0 ? void 0 : _o.panel) === null || _p === void 0 ? void 0 : _p.transition) === null || _q === void 0 ? void 0 : _q.enterFrom),
+                    enterTo: toClassName(styles$1.item.panel.transition.enterTo, (_t = (_s = (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _r === void 0 ? void 0 : _r.panel) === null || _s === void 0 ? void 0 : _s.transition) === null || _t === void 0 ? void 0 : _t.enterTo),
+                    leave: toClassName(styles$1.item.panel.transition.leave, (_w = (_v = (_u = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _u === void 0 ? void 0 : _u.panel) === null || _v === void 0 ? void 0 : _v.transition) === null || _w === void 0 ? void 0 : _w.leave),
+                    leaveFrom: toClassName(styles$1.item.panel.transition.leaveFrom, (_z = (_y = (_x = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _x === void 0 ? void 0 : _x.panel) === null || _y === void 0 ? void 0 : _y.transition) === null || _z === void 0 ? void 0 : _z.leaveFrom),
+                    leaveTo: toClassName(styles$1.item.panel.transition.leaveTo, (_2 = (_1 = (_0 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _0 === void 0 ? void 0 : _0.panel) === null || _1 === void 0 ? void 0 : _1.transition) === null || _2 === void 0 ? void 0 : _2.leaveTo),
+                },
+            },
+        });
+    }, []);
+    return (jsxs(Fragment$1, { children: [jsx(Transition, __assign({ show: isOpen, as: Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsx("div", __assign({ className: style.panel.container }, { children: children(options) })) })), trigger && trigger(options)] }));
+};
+var Notification = {
+    Container: NotificationOverlayContainer,
+    Item: NotificationOverlayItem,
+};
+
+var styles$1 = {
+    container: {
+        outer: 'pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20',
+        inner: 'flex w-full flex-col items-center space-y-4 sm:items-end',
+    },
+    item: {
+        container: 'relative',
+        layout: {
+            container: 'fixed inset-0 overflow-hidden',
+            content: 'absolute inset-0 overflow-hidden',
+            inner: 'pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10',
+        },
+        panel: {
+            container: 'pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5',
+            transition: {
+                enter: 'transform ease-out duration-300 transition',
+                enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
+                enterTo: 'translate-y-0 opacity-100 sm:translate-x-0',
+                leave: 'transition ease-in duration-100',
+                leaveFrom: 'opacity-100',
+                leaveTo: 'opacity-0',
+            },
+        },
+    },
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+};
+
+var SlideOverOverlay = function (props) {
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var options = useMemo(function () { return ({
+        onOpen: function () { return setIsOpen(true); },
+        onClose: function () { return setIsOpen(false); },
+    }); }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        return ({
+            container: toClassName(styles.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            background: {
+                container: toClassName(styles.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
+                transition: {
+                    enter: toClassName(styles.background.transition.enter, (_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _b === void 0 ? void 0 : _b.transition) === null || _c === void 0 ? void 0 : _c.enter),
+                    enterFrom: toClassName(styles.background.transition.enterFrom, (_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _d === void 0 ? void 0 : _d.transition) === null || _e === void 0 ? void 0 : _e.enterFrom),
+                    enterTo: toClassName(styles.background.transition.enterTo, (_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _f === void 0 ? void 0 : _f.transition) === null || _g === void 0 ? void 0 : _g.enterTo),
+                    leave: toClassName(styles.background.transition.leave, (_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _h === void 0 ? void 0 : _h.transition) === null || _j === void 0 ? void 0 : _j.leave),
+                    leaveFrom: toClassName(styles.background.transition.leaveFrom, (_l = (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _k === void 0 ? void 0 : _k.transition) === null || _l === void 0 ? void 0 : _l.leaveFrom),
+                    leaveTo: toClassName(styles.background.transition.leaveTo, (_o = (_m = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _m === void 0 ? void 0 : _m.transition) === null || _o === void 0 ? void 0 : _o.leaveTo),
+                },
+            },
+            layout: {
+                container: toClassName(styles.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
+                content: toClassName(styles.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
+                inner: toClassName(styles.layout.inner, (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _r === void 0 ? void 0 : _r.inner),
+            },
+            panel: {
+                container: toClassName(styles.panel.container, size && styles[size], (_s = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _s === void 0 ? void 0 : _s.container),
+                transition: {
+                    enter: toClassName(styles.panel.transition.enter, (_u = (_t = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _t === void 0 ? void 0 : _t.transition) === null || _u === void 0 ? void 0 : _u.enter),
+                    enterFrom: toClassName(styles.panel.transition.enterFrom, (_w = (_v = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _v === void 0 ? void 0 : _v.transition) === null || _w === void 0 ? void 0 : _w.enterFrom),
+                    enterTo: toClassName(styles.panel.transition.enterTo, (_y = (_x = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _x === void 0 ? void 0 : _x.transition) === null || _y === void 0 ? void 0 : _y.enterTo),
+                    leave: toClassName(styles.panel.transition.leave, (_0 = (_z = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _z === void 0 ? void 0 : _z.transition) === null || _0 === void 0 ? void 0 : _0.leave),
+                    leaveFrom: toClassName(styles.panel.transition.leaveFrom, (_2 = (_1 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _1 === void 0 ? void 0 : _1.transition) === null || _2 === void 0 ? void 0 : _2.leaveFrom),
+                    leaveTo: toClassName(styles.panel.transition.leaveTo, (_4 = (_3 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _3 === void 0 ? void 0 : _3.transition) === null || _4 === void 0 ? void 0 : _4.leaveTo),
+                },
+            },
+        });
+    }, []);
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: style.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: style.background.transition.enter, enterFrom: style.background.transition.enterFrom, enterTo: style.background.transition.enterTo, leave: style.background.transition.leave, leaveFrom: style.background.transition.leaveFrom, leaveTo: style.background.transition.leaveTo }, { children: jsx("div", { className: style.background.container }) })), jsx("div", __assign({ className: style.layout.container }, { children: jsx("div", __assign({ className: style.layout.content }, { children: jsx("div", __assign({ className: style.layout.inner }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: style.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
+};
+
+var styles = {
+    container: 'relative z-20',
+    background: {
+        container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+        transition: {
+            enter: 'ease-in-out duration-500',
+            enterFrom: 'opacity-0',
+            enterTo: 'opacity-100',
+            leave: 'ease-in-out duration-500',
+            leaveFrom: 'opacity-100',
+            leaveTo: 'opacity-0',
+        },
+    },
+    layout: {
+        container: 'fixed inset-0 overflow-hidden',
+        content: 'absolute inset-0 overflow-hidden',
+        inner: 'pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10',
+    },
+    panel: {
+        container: 'pointer-events-auto w-screen bg-white',
+        transition: {
+            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',
+        },
+    },
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+};
+
+var Overlay = {
+    Modal: ModalOverlay,
+    Notification: Notification,
+    SlideOver: SlideOverOverlay,
+};
+
+export { Element, Layout, Navigation, Overlay };
+//# sourceMappingURL=index.esm.js.map