@ballistix.digital/react-components 0.1.5 → 0.1.7

package/dist/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var solid = require('@heroicons/react/20/solid');
 var React = require('react');
 var react = require('@headlessui/react');
-var solid = require('@heroicons/react/20/solid');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,7 +38,9 @@ var __assign = function() {
 };
 
 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 src = props.src, placeholder = props.placeholder, 
+    // alt = 'avatar',
+    children = props.children, url = props.url, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.figure, figure = _b === void 0 ? 'block' : _b, status = props.status, isDisabled = props.isDisabled, isLoading = props.isLoading, customStyles = props.styles;
     var toClassName = React.useCallback(function () {
         var values = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -47,24 +49,44 @@ var AvatarElement = function (props) {
         return values.filter(Boolean).join(' ');
     }, []);
     var style = React.useMemo(function () { return ({
+        loading: toClassName(styles$h.base.loading, size && styles$h[size].container, figure && styles$h[figure].container, isDisabled && styles$h.disabled.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.loading),
+        spinner: toClassName(styles$h.base.spinner, size && styles$h[size].container, figure && styles$h[figure].container, isDisabled && styles$h.disabled.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.spinner),
         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 (jsxRuntime.jsx("span", __assign({ className: style.empty }, { children: jsxRuntime.jsx("svg", __assign({ className: "h-full w-full text-gray-300", fill: "currentColor", viewBox: "0 0 24 24" }, { children: jsxRuntime.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" }) })) })));
+        indicator: toClassName(styles$h.indicator.container, size && styles$h.indicator[size], figure && styles$h.indicator[figure], status && styles$h.indicator[status], isDisabled && styles$h.indicator.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator),
+    }); }, [
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.empty,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.loading,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.placeholder,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.spinner,
+        figure,
+        isDisabled,
+        isLoading,
+        size,
+        status,
+        toClassName,
+    ]);
+    if (isLoading) {
+        return (jsxRuntime.jsx("span", __assign({ className: style.loading }, { children: jsxRuntime.jsx(solid.ArrowPathIcon, { className: style.spinner }) })));
+    }
+    if (!placeholder && !src) {
+        return (jsxRuntime.jsxs("span", __assign({ className: style.empty }, { children: [jsxRuntime.jsx("svg", __assign({ className: "h-full w-full text-gray-300", fill: "currentColor", viewBox: "0 0 24 24" }, { children: jsxRuntime.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" }) })), status && jsxRuntime.jsx("span", { className: style.indicator })] })));
     }
     if (!src) {
-        return (jsxRuntime.jsx("span", __assign({ className: style.placeholder }, { children: jsxRuntime.jsx("span", __assign({ className: "text-".concat(size, " font-medium leading-none text-white") }, { children: placeholder })) })));
+        return (jsxRuntime.jsxs("span", __assign({ className: style.placeholder }, { children: [jsxRuntime.jsx("span", __assign({ className: "text-".concat(size, " font-medium leading-none text-white") }, { children: placeholder })), status && jsxRuntime.jsx("span", { className: style.indicator })] })));
     }
-    return (jsxRuntime.jsx("a", __assign({ href: url }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxRuntime.jsxs("span", __assign({ className: "inline-block relative" }, { children: [jsxRuntime.jsx("img", { className: style.container, src: src, alt: alt }), status && jsxRuntime.jsx("span", { className: style.indicator })] })), children && jsxRuntime.jsx("div", __assign({ className: "ml-3" }, { children: children }))] })) })));
+    return (jsxRuntime.jsx("a", __assign({ href: url }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxRuntime.jsxs("span", __assign({ className: "inline-block relative" }, { children: [jsxRuntime.jsx("div", { className: style.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsxRuntime.jsx("span", { className: style.indicator })] })), children && jsxRuntime.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',
+    loading: 'inline-block relative overflow-hidden bg-gray-50 flex items-center justify-center',
+    empty: 'inline-block relative overflow-hidden bg-gray-50 text-red-400',
+    placeholder: 'relative inline-flex items-center justify-center bg-gray-500',
+    container: 'inline-block bg-gray-100 bg-cover bg-center',
+    spinner: 'w-5 h-5 animate-spin text-gray-400',
 };
 var xs$1 = {
     container: 'h-6 w-6',
@@ -102,15 +124,9 @@ var indicator$1 = {
     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',
+    offline: 'bg-gray-300',
+    online: 'bg-green-400',
+    blocked: 'bg-red-400',
 };
 var styles$h = {
     base: base$5,
@@ -124,161 +140,8 @@ var styles$h = {
     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 = React.useCallback(function () {
-        var values = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            values[_i] = arguments[_i];
-        }
-        return values.filter(Boolean).join(' ');
-    }, []);
-    var style = React.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 (jsxRuntime.jsxs("span", __assign({ className: style.container }, { children: [type === 'indicator' && (jsxRuntime.jsx("svg", __assign({ className: style.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), children, type === 'close' && (jsxRuntime.jsxs("button", __assign({ type: "button", className: style.button, onClick: onClose }, { children: [jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: "Remove large option" })), jsxRuntime.jsx("svg", __assign({ className: "h-2 w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" }, { children: jsxRuntime.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 = React.useCallback(function () {
@@ -289,76 +152,87 @@ var ButtonElement = function (props) {
         return values.filter(Boolean).join(' ');
     }, []);
     var style = React.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 (jsxRuntime.jsx("button", __assign({ type: "button", className: style.container, disabled: isDisabled || status !== 'idle', onClick: onClick }, { children: status === 'loading' ? '[Loading...]' : children })));
+        container: toClassName(styles$g.base.container, type && styles$g[type].container, size && styles$g[size].container, figure && styles$g[figure].container, status && styles$g[status].container, isDisabled && styles$g.disabled.container, status === 'loading' && styles$g.loading.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+    }); }, [
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        figure,
+        isDisabled,
+        size,
+        status,
+        toClassName,
+        type,
+    ]);
+    return (jsxRuntime.jsxs("button", __assign({ type: "button", className: style.container, disabled: isDisabled || status !== 'idle', onClick: onClick }, { children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsxRuntime.jsx(solid.ArrowPathIcon, { className: styles$g.base.spinner }), jsxRuntime.jsx("p", { children: "Loading..." })] }))), status === 'error' && (jsxRuntime.jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: styles$g.base.icon }), jsxRuntime.jsx("p", { children: "Oops" })] }))), status === 'success' && (jsxRuntime.jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsxRuntime.jsx(solid.CheckIcon, { className: styles$g.base.icon }), jsxRuntime.jsx("p", { children: "Success" })] })))] })));
 };
 
 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',
+    loading: 'flex gap-2',
+    icon: 'w-5',
+    spinner: 'w-5 animate-spin',
 };
-var primary = {
+var primary$1 = {
     container: "shadow-sm text-white bg-indigo-600  hover:bg-indigo-700",
 };
-var secondary = {
+var secondary$1 = {
     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 outline$1 = {
+    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 = {
+var sm$1 = {
     container: 'px-3.5 py-2 text-sm',
 };
 var md = {
     container: 'px-4 py-2.5 text-sm',
 };
-var lg = {
+var lg$1 = {
     container: 'px-5 py-2.5 text-base',
 };
 var xl = {
     container: 'px-6 py-3 text-base',
 };
-var block = {
+var block$1 = {
     container: 'rounded-md',
 };
-var rounded = {
+var rounded$1 = {
     container: 'rounded-full',
 };
 var idle = {
     container: '',
 };
-var loading = {
+var loading$1 = {
     container: 'cursor-progress',
 };
 var success = {
-    container: '',
+    container: 'bg-emerald-500 hover:bg-emerald-600',
 };
 var error = {
-    container: '',
+    container: 'bg-rose-400 hover:bg-rose-500',
 };
-var disabled = {
+var disabled$1 = {
     container: 'opacity-20 cursor-not-allowed',
 };
-var styles$f = {
+var styles$g = {
     base: base$4,
-    primary: primary,
-    secondary: secondary,
-    outline: outline,
+    primary: primary$1,
+    secondary: secondary$1,
+    outline: outline$1,
     xs: xs,
-    sm: sm,
+    sm: sm$1,
     md: md,
-    lg: lg,
+    lg: lg$1,
     xl: xl,
-    block: block,
-    rounded: rounded,
+    block: block$1,
+    rounded: rounded$1,
     idle: idle,
-    loading: loading,
+    loading: loading$1,
     success: success,
     error: error,
-    disabled: disabled,
+    disabled: disabled$1,
 };
 
 var ButtonGroupElement = function (props) {
@@ -371,11 +245,17 @@ var ButtonGroupElement = function (props) {
         return values.filter(Boolean).join(' ');
     }, []);
     var style = React.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]);
+        container: toClassName(styles$f.base.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        firstButton: toClassName(styles$f.base.firstButton, customStyles === null || customStyles === void 0 ? void 0 : customStyles.firstButton),
+        button: toClassName(styles$f.base.button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+        lastButton: toClassName(styles$f.base.lastButton, customStyles === null || customStyles === void 0 ? void 0 : customStyles.lastButton),
+    }); }, [
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.button,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.firstButton,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.lastButton,
+        toClassName,
+    ]);
     return (jsxRuntime.jsx("span", __assign({ className: style.container }, { children: React.Children.map(children, function (child, index) {
             var _a;
             var className = style.button;
@@ -395,10 +275,10 @@ var base$3 = {
     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 styles$f = { 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 Container$4 = function (props) {
+    var children = props.children, label = props.label, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'left' : _b, customStyles = props.styles;
     var toClassName = React.useCallback(function () {
         var values = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -407,16 +287,24 @@ var Container$3 = function (props) {
         return values.filter(Boolean).join(' ');
     }, []);
     var style = React.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]);
+        container: toClassName(styles$e.base.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        button: toClassName(styles$e.base.button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+        compact: toClassName(styles$e.base.compact, customStyles === null || customStyles === void 0 ? void 0 : customStyles.compact),
+        dots: toClassName(styles$e.base.dots, customStyles === null || customStyles === void 0 ? void 0 : customStyles.dots),
+        items: toClassName(styles$e.base.items, direction && (styles$e === null || styles$e === void 0 ? void 0 : styles$e[direction].items), customStyles === null || customStyles === void 0 ? void 0 : customStyles.items),
+    }); }, [
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.button,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.compact,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.dots,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.items,
+        direction,
+        toClassName,
+    ]);
     return (jsxRuntime.jsxs(react.Menu, __assign({ as: "div", className: style.container }, { children: [jsxRuntime.jsxs("div", { children: [type === 'button' && (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: style.button }, { children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: style.compact }, { children: [jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: label })), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: style.dots, "aria-hidden": "true" })] })))] }), jsxRuntime.jsx(react.Transition, __assign({ as: React.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: jsxRuntime.jsx(react.Menu.Items, __assign({ className: style.items }, { children: children })) }))] })));
 };
-var Dropdown = {
-    Container: Container$3,
+var DropdownElement = {
+    Container: Container$4,
     Item: react.Menu.Item,
 };
 
@@ -425,18 +313,152 @@ var base$2 = {
     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',
+    items: 'absolute 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 = {
+var left$1 = {
+    items: 'origin-top-right right-0',
+};
+var right$1 = {
+    items: 'origin-top-left left-0',
+};
+var styles$e = {
     base: base$2,
+    left: left$1,
+    right: right$1,
 };
 
-var Element = {
-    Button: ButtonElement,
-    Avatar: AvatarElement,
-    Badge: BadgeElement,
-    ButtonGroup: ButtonGroupElement,
-    Dropdown: Dropdown,
+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 = React.useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = React.useMemo(function () { return ({
+        container: toClassName(type && styles$d[type].container, color && styles$d[color].container, size && styles$d[size].container, figure && styles$d[figure].container, isDisabled && styles$d.disabled.container, isLoading && styles$d.loading.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        indicator: toClassName(color && styles$d[color].indicator, size && styles$d[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$d[color].button, size && styles$d[size].button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
+    }); }, [
+        color,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.button,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator,
+        figure,
+        isDisabled,
+        isLoading,
+        size,
+        toClassName,
+        type,
+    ]);
+    if (isLoading) {
+        return (jsxRuntime.jsxs("span", __assign({ className: style.container }, { children: [type === 'indicator' && (jsxRuntime.jsx("svg", __assign({ className: style.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), "Loading..."] })));
+    }
+    return (jsxRuntime.jsxs("span", __assign({ className: style.container }, { children: [type === 'indicator' && (jsxRuntime.jsx("svg", __assign({ className: style.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), children, type === 'close' && (jsxRuntime.jsxs("button", __assign({ type: "button", className: style.button, onClick: onClose }, { children: [jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: "Remove large option" })), jsxRuntime.jsx("svg", __assign({ className: "h-2 w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" }, { children: jsxRuntime.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 = {
+    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 sm = {
+    container: 'text-xs',
+    indicator: 'mr-1.5 h-2 w-2 ',
+    button: '',
+};
+var lg = {
+    container: 'text-sm',
+    indicator: '-ml-0.5 mr-1.5 h-2 w-2',
+    button: '',
+};
+var block = {
+    container: 'rounded-md',
+};
+var rounded = {
+    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 = {
+    container: 'opacity-20 cursor-not-allowed',
+};
+var loading = {
+    container: 'cursor-progress',
+};
+var styles$d = {
+    normal: normal,
+    indicator: indicator,
+    close: close,
+    primary: primary,
+    secondary: secondary,
+    outline: outline,
+    sm: sm,
+    lg: lg,
+    block: block,
+    rounded: rounded,
+    gray: gray,
+    red: red,
+    yellow: yellow,
+    green: green,
+    blue: blue,
+    indigo: indigo,
+    purple: purple,
+    pink: pink,
+    disabled: disabled,
+    loading: loading,
 };
 
 var ContainerLayout = function (props) {
@@ -509,7 +531,15 @@ var DividerLayout = function (props) {
         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]);
+    }); }, [
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.head,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.line,
+        toClassName,
+        type,
+    ]);
     return (jsxRuntime.jsxs("div", __assign({ className: style.container }, { children: [jsxRuntime.jsx("div", __assign({ className: style.head, "aria-hidden": "true" }, { children: jsxRuntime.jsx("div", { className: style.line }) })), jsxRuntime.jsx("div", __assign({ className: style.body }, { children: jsxRuntime.jsx("div", __assign({ className: style.content }, { children: children })) }))] })));
 };
 
@@ -570,8 +600,15 @@ var ListContainerLayout = function (props) {
         item: toClassName(isSticky
             ? styles$b["".concat(selector, "_sticky")].item
             : styles$b[selector].item, customStyles === null || customStyles === void 0 ? void 0 : customStyles.item),
-    }); }, [customStyles]);
-    return (jsxRuntime.jsx("div", __assign({ className: style.container }, { children: jsxRuntime.jsx("ul", __assign({ role: "list", className: style.list }, { children: React.Children.map(children, function (child, index) {
+    }); }, [
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.item,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.list,
+        isSticky,
+        selector,
+        toClassName,
+    ]);
+    return (jsxRuntime.jsx("div", __assign({ className: style.container }, { children: jsxRuntime.jsx("ul", __assign({ className: style.list }, { children: React.Children.map(children, function (child, index) {
                 var _a;
                 return (jsxRuntime.jsx("li", __assign({ className: style.item }, { children: child }), (_a = child.key) !== null && _a !== void 0 ? _a : index));
             }) })) })));
@@ -630,7 +667,16 @@ var MediaObjectLayout = function (props) {
         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]);
+    }); }, [
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.figure,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.paragraph,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.svg,
+        customStyles === null || customStyles === void 0 ? void 0 : customStyles.title,
+        isReversed,
+        selector,
+        toClassName,
+    ]);
     var $svg = React.useMemo(function () {
         var result = (jsxRuntime.jsx("svg", __assign({ className: style.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) })));
         if (customFigure) {
@@ -639,7 +685,7 @@ var MediaObjectLayout = function (props) {
             });
         }
         return result;
-    }, [style]);
+    }, [customFigure, style.svg]);
     return (jsxRuntime.jsxs("div", __assign({ className: style.container }, { children: [jsxRuntime.jsx("div", __assign({ className: style.figure }, { children: $svg })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", __assign({ className: style.title }, { children: title })), jsxRuntime.jsx("p", __assign({ className: style.paragraph }, { children: paragraph }))] })] })));
 };
 
@@ -701,8 +747,8 @@ var styles$a = {
     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 Container$3 = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, customStyles = props.styles;
     var typeStyle = React.useMemo(function () {
         var result;
         switch (type) {
@@ -714,7 +760,7 @@ var LayoutPanel = function (props) {
                 break;
         }
         return result;
-    }, []);
+    }, [type]);
     var toClassName = React.useCallback(function () {
         var values = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -724,32 +770,11 @@ var LayoutPanel = function (props) {
     }, []);
     var style = React.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 (jsxRuntime.jsxs("div", __assign({ className: style.container }, { children: [head && jsxRuntime.jsx("div", __assign({ className: style.head }, { children: head })), children && jsxRuntime.jsx("div", __assign({ className: style.body }, { children: children })), foot && jsxRuntime.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 (jsxRuntime.jsxs("div", __assign({ className: "flex flex-shrink-0 items-center" }, { children: [jsxRuntime.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" }), jsxRuntime.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" })] })));
+    }); }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, toClassName, typeStyle]);
+    return jsxRuntime.jsx("div", __assign({ className: style.container }, { children: children }));
 };
-var NavbarNavigationRoutes = function () {
+var Section = function (props) {
+    var children = props.children, customStyles = props.styles;
     var toClassName = React.useCallback(function () {
         var values = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -757,17 +782,23 @@ var NavbarNavigationRoutes = function () {
         }
         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 (jsxRuntime.jsx("div", __assign({ className: "flex flex-1 items-center justify-center sm:items-stretch sm:justify-start" }, { children: jsxRuntime.jsx("div", __assign({ className: "hidden sm:ml-6 sm:block" }, { children: jsxRuntime.jsx("div", __assign({ className: "flex space-x-4" }, { children: navigation.map(function (item) { return (jsxRuntime.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 style = React.useMemo(function () { return ({
+        container: toClassName(styles$9.section, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+    }); }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, toClassName]);
+    return jsxRuntime.jsx("div", __assign({ className: style.container }, { children: children }));
+};
+var LayoutPanel = {
+    Container: Container$3,
+    Section: Section,
+};
+
+var styles$9 = {
+    container: 'bg-white overflow-hidden shadow',
+    section: 'px-4 py-5 sm:px-6',
+};
+
+var BreadcrumbsNavigation = function (props) {
+    var _a = props.href, href = _a === void 0 ? '/' : _a, pages = props.pages, _b = props.type, type = _b === void 0 ? 'slashes' : _b, customSeparator = props.separator, customStyles = props.styles;
     var toClassName = React.useCallback(function () {
         var values = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -775,54 +806,133 @@ var NavbarNavigationAccount = function () {
         }
         return values.filter(Boolean).join(' ');
     }, []);
-    return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: "View notifications" })) })), jsxRuntime.jsxs(react.Menu, __assign({ as: "div", className: "relative ml-3" }, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(react.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: [jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: "Open user menu" })), jsxRuntime.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: "" })] })) }), jsxRuntime.jsx(react.Transition, __assign({ as: React.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: jsxRuntime.jsxs(react.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: [jsxRuntime.jsx(react.Menu.Item, { children: function (_a) {
-                                        var active = _a.active;
-                                        return (jsxRuntime.jsx("a", __assign({ href: "#", className: toClassName(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700') }, { children: "Your Profile" })));
-                                    } }), jsxRuntime.jsx(react.Menu.Item, { children: function (_a) {
-                                        var active = _a.active;
-                                        return (jsxRuntime.jsx("a", __assign({ href: "#", className: toClassName(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700') }, { children: "Settings" })));
-                                    } }), jsxRuntime.jsx(react.Menu.Item, { children: function (_a) {
-                                        var active = _a.active;
-                                        return (jsxRuntime.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 jsxRuntime.jsx("div", __assign({ className: styles$8.container }, { children: null }));
-};
-var NavbarNavigationSearch = function () {
-    return (jsxRuntime.jsx("div", __assign({ className: "flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end" }, { children: jsxRuntime.jsxs("div", __assign({ className: "w-full max-w-lg lg:max-w-xs" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "search", className: "sr-only" }, { children: "Search" })), jsxRuntime.jsxs("div", __assign({ className: "relative" }, { children: [jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" }), jsxRuntime.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 (jsxRuntime.jsx(react.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "mx-auto max-w-7xl px-2 sm:px-6 lg:px-8" }, { children: jsxRuntime.jsxs("div", __assign({ className: "relative flex h-16 items-center justify-between" }, { children: [jsxRuntime.jsx("div", __assign({ className: "absolute inset-y-0 left-0 flex items-center sm:hidden" }, { children: jsxRuntime.jsxs(react.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: [jsxRuntime.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] })) })), jsxRuntime.jsx(react.Disclosure.Panel, __assign({ className: "sm:hidden" }, { children: jsxRuntime.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 style = React.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(type && styles$8[type].container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _a === void 0 ? void 0 : _a.container),
+            list: toClassName(type && styles$8[type].list, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _b === void 0 ? void 0 : _b.list),
+            separator: toClassName(type && styles$8[type].separator, (_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _c === void 0 ? void 0 : _c.separator),
+            home: {
+                container: toClassName(type && ((_d = styles$8[type].home) === null || _d === void 0 ? void 0 : _d.container), (_f = (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _e === void 0 ? void 0 : _e.home) === null || _f === void 0 ? void 0 : _f.container),
+                content: toClassName(type && ((_g = styles$8[type].home) === null || _g === void 0 ? void 0 : _g.content), (_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _h === void 0 ? void 0 : _h.home) === null || _j === void 0 ? void 0 : _j.content),
+                link: toClassName(type && ((_k = styles$8[type].home) === null || _k === void 0 ? void 0 : _k.link), (_m = (_l = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _l === void 0 ? void 0 : _l.home) === null || _m === void 0 ? void 0 : _m.link),
+                icon: toClassName(type && ((_o = styles$8[type].home) === null || _o === void 0 ? void 0 : _o.icon), (_q = (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _p === void 0 ? void 0 : _p.home) === null || _q === void 0 ? void 0 : _q.icon),
+                span: toClassName(type && ((_r = styles$8[type].home) === null || _r === void 0 ? void 0 : _r.span), (_t = (_s = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _s === void 0 ? void 0 : _s.home) === null || _t === void 0 ? void 0 : _t.span),
+            },
+            page: {
+                container: toClassName(type && ((_u = styles$8[type].page) === null || _u === void 0 ? void 0 : _u.container), (_w = (_v = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _v === void 0 ? void 0 : _v.page) === null || _w === void 0 ? void 0 : _w.container),
+                content: toClassName(type && ((_x = styles$8[type].page) === null || _x === void 0 ? void 0 : _x.content), (_z = (_y = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _y === void 0 ? void 0 : _y.page) === null || _z === void 0 ? void 0 : _z.content),
+                link: toClassName(type && ((_0 = styles$8[type].page) === null || _0 === void 0 ? void 0 : _0.link), (_2 = (_1 = customStyles === null || customStyles === void 0 ? void 0 : customStyles[type]) === null || _1 === void 0 ? void 0 : _1.page) === null || _2 === void 0 ? void 0 : _2.link),
+            },
+        });
+    }, [customStyles, toClassName, type]);
+    var separator = React.useMemo(function () {
+        var component;
+        switch (type) {
+            case 'slashes':
+                component = (jsxRuntime.jsx("svg", __assign({ className: style.separator, fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }) })));
+                break;
+            case 'chevrons':
+                component = (jsxRuntime.jsx(solid.ChevronRightIcon, { className: style.separator, "aria-hidden": "true" }));
+                break;
+            case 'panel':
+                component = (jsxRuntime.jsx("svg", __assign({ className: style.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" }) })));
+                break;
+            case 'bar':
+                component = (jsxRuntime.jsx("svg", __assign({ className: style.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" }) })));
+                break;
+        }
+        if (customSeparator) {
+            component = customSeparator;
+        }
+        return component;
+    }, [customSeparator, style.separator, type]);
+    var HomeLink = function () {
+        return (jsxRuntime.jsx("li", __assign({ className: style.home.container }, { children: jsxRuntime.jsx("div", __assign({ className: style.home.content }, { children: jsxRuntime.jsxs("a", __assign({ href: href, className: style.home.link }, { children: [jsxRuntime.jsx(solid.HomeIcon, { className: style.home.icon, "aria-hidden": "true" }), jsxRuntime.jsx("span", __assign({ className: style.home.span }, { children: "Home" }))] })) })) })));
+    };
+    var PageLink = function (props) {
+        var page = props.page;
+        return (jsxRuntime.jsx("li", __assign({ className: style.page.container }, { children: jsxRuntime.jsxs("div", __assign({ className: style.page.content }, { children: [separator, jsxRuntime.jsx("a", __assign({ href: page.href, className: style.page.link, "aria-current": page.isCurrent ? 'page' : undefined }, { children: page.name }))] })) }), page.name));
+    };
+    return (jsxRuntime.jsx("nav", __assign({ className: style.container, "aria-label": "Breadcrumb" }, { children: jsxRuntime.jsxs("ol", __assign({ className: style.list }, { children: [jsxRuntime.jsx(HomeLink, {}), pages.map(function (page) { return (jsxRuntime.jsx(PageLink, { page: page }, page.name)); })] })) })));
 };
 
+var slashes = {
+    container: 'flex',
+    list: 'flex items-center space-x-4',
+    separator: 'h-5 w-5 flex-shrink-0 text-gray-300',
+    home: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'text-gray-400 hover:text-gray-500',
+        icon: 'h-5 w-5 flex-shrink-0',
+        span: 'sr-only',
+    },
+    page: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'ml-4 text-sm font-medium text-gray-500 hover:text-gray-700',
+    },
+};
+var chevrons = {
+    container: 'flex',
+    list: 'flex items-center space-x-4',
+    separator: 'h-5 w-5 flex-shrink-0 text-gray-400',
+    home: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'text-gray-400 hover:text-gray-500',
+        icon: 'h-5 w-5 flex-shrink-0',
+        span: 'sr-only',
+    },
+    page: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'ml-4 text-sm font-medium text-gray-500 hover:text-gray-700',
+    },
+};
+var panel = {
+    container: 'flex',
+    list: 'flex space-x-4 rounded-md bg-white px-6 shadow',
+    separator: 'h-full w-6 flex-shrink-0 text-gray-200',
+    home: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'text-gray-400 hover:text-gray-500',
+        icon: 'h-5 w-5 flex-shrink-0',
+        span: 'sr-only',
+    },
+    page: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'ml-4 text-sm font-medium text-gray-500 hover:text-gray-700',
+    },
+};
+var bar = {
+    container: 'flex border-b border-gray-200 bg-white',
+    list: 'mx-auto flex w-full max-w-screen-xl space-x-4 px-4 sm:px-6 lg:px-8',
+    separator: 'h-full w-6 flex-shrink-0 text-gray-200',
+    home: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'text-gray-400 hover:text-gray-500',
+        icon: 'h-5 w-5 flex-shrink-0',
+        span: 'sr-only',
+    },
+    page: {
+        container: 'flex',
+        content: 'flex items-center',
+        link: 'ml-4 text-sm font-medium text-gray-500 hover:text-gray-700',
+    },
+};
 var styles$8 = {
-    container: '',
+    slashes: slashes,
+    chevrons: chevrons,
+    panel: panel,
+    bar: bar,
 };
 
-var CardPaginationNavigation = function (props) {
+var PanelPaginationNavigation = 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 = React.useState(2), current = _c[0], setCurrent = _c[1];
     var toClassName = React.useCallback(function () {
@@ -996,11 +1106,6 @@ var styles$6 = {
     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 = React.useState(''), active = _a[0], setActive = _a[1];
@@ -1109,7 +1214,8 @@ var List$1 = function (props) {
             tab = initialTab;
         }
         setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
-    }, []);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setActive]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "sm:hidden" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "tabs", className: "sr-only" }, { children: "Select a tab" })), jsxRuntime.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: React.Children.map(children, function (child) {
                             var _a;
                             return (jsxRuntime.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));
@@ -1221,14 +1327,6 @@ var styles$3 = {
     },
 };
 
-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 = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
@@ -1369,7 +1467,7 @@ var NotificationOverlayItem = function (props) {
     }, []);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition, __assign({ show: isOpen, as: React.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: jsxRuntime.jsx("div", __assign({ className: style.panel.container }, { children: children(options) })) })), trigger && trigger(options)] }));
 };
-var Notification = {
+var NotificationOverlay = {
     Container: NotificationOverlayContainer,
     Item: NotificationOverlayItem,
 };
@@ -1491,14 +1589,23 @@ var styles = {
     xl: 'max-w-4xl',
 };
 
-var Overlay = {
-    Modal: ModalOverlay,
-    Notification: Notification,
-    SlideOver: SlideOverOverlay,
-};
-
-exports.Element = Element;
-exports.Layout = Layout;
-exports.Navigation = Navigation;
-exports.Overlay = Overlay;
+exports.Avatar = AvatarElement;
+exports.Badge = BadgeElement;
+exports.Breadcrumbs = BreadcrumbsNavigation;
+exports.Button = ButtonElement;
+exports.ButtonGroup = ButtonGroupElement;
+exports.Container = ContainerLayout;
+exports.Divider = DividerLayout;
+exports.Dropdown = DropdownElement;
+exports.ListContainer = ListContainerLayout;
+exports.MediaObject = MediaObjectLayout;
+exports.Modal = ModalOverlay;
+exports.Notification = NotificationOverlay;
+exports.PagePagination = PagePaginationNavigation;
+exports.Panel = LayoutPanel;
+exports.PanelPagination = PanelPaginationNavigation;
+exports.Sidebar = SidebarNavigation;
+exports.SlideOver = SlideOverOverlay;
+exports.Tab = TabNavigation;
+exports.Vertical = VerticalNavigation;
 //# sourceMappingURL=index.js.map