@ballistix.digital/react-components 0.1.12 → 0.1.13

package/dist/index.esm.js

@@ -0,0 +1,1585 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { ArrowPathIcon, ExclamationCircleIcon, CheckIcon, ChevronDownIcon, EllipsisVerticalIcon, ChevronRightIcon, HomeIcon, ChevronLeftIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
+import React, { useCallback, useMemo, Children, Fragment, useState, useEffect } from 'react';
+import { Menu, Transition, Dialog } from '@headlessui/react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var AvatarElement = function (props) {
+    var src = props.src, placeholder = props.placeholder, 
+    // 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 = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        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], 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 (jsx("span", __assign({ className: style.loading }, { children: jsx(ArrowPathIcon, { className: style.spinner }) })));
+    }
+    if (!placeholder && !src) {
+        return (jsxs("span", __assign({ className: style.empty }, { children: [jsx("svg", __assign({ className: "h-full w-full text-gray-300", fill: "currentColor", viewBox: "0 0 24 24" }, { children: jsx("path", { d: "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" }) })), status && jsx("span", { className: style.indicator })] })));
+    }
+    if (!src) {
+        return (jsxs("span", __assign({ className: style.placeholder }, { children: [jsx("span", __assign({ className: "text-".concat(size, " font-medium leading-none text-white") }, { children: placeholder })), status && jsx("span", { className: style.indicator })] })));
+    }
+    return (jsx("a", __assign({ href: url }, { children: jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxs("span", __assign({ className: "inline-block relative" }, { children: [jsx("div", { className: style.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsx("span", { className: style.indicator })] })), children && jsx("div", __assign({ className: "ml-3" }, { children: children }))] })) })));
+};
+
+var base$5 = {
+    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',
+};
+var sm$2 = {
+    container: 'h-8 w-8',
+};
+var md$1 = {
+    container: 'h-10 w-10',
+};
+var lg$2 = {
+    container: 'h-12 w-12',
+};
+var xl$1 = {
+    container: 'h-14 w-14',
+};
+var block$2 = {
+    container: 'rounded-md',
+};
+var rounded$2 = {
+    container: 'rounded-full',
+};
+var disabled$2 = {
+    container: 'opacity-20 cursor-not-allowed',
+};
+var loading$2 = {
+    container: 'cursor-progress',
+};
+var indicator$1 = {
+    container: 'absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white',
+    rounded: '',
+    block: 'transform -translate-y-1/2 translate-x-1/2',
+    xs: 'h-1.5 w-1.5',
+    sm: 'h-2 w-2',
+    md: 'h-2.5 w-2.5',
+    lg: 'h-3 w-3',
+    xl: 'h-3.5 w-3.5',
+    offline: 'bg-gray-300',
+    online: 'bg-green-400',
+    blocked: 'bg-red-400',
+};
+var styles$h = {
+    base: base$5,
+    xs: xs$1,
+    sm: sm$2,
+    md: md$1,
+    lg: lg$2,
+    xl: xl$1,
+    block: block$2,
+    rounded: rounded$2,
+    disabled: disabled$2,
+    loading: loading$2,
+    indicator: indicator$1,
+};
+
+var ButtonElement = function (props) {
+    var ref = props.ref, children = props.children, _a = props.type, type = _a === void 0 ? 'primary' : _a, _b = props.size, size = _b === void 0 ? 'md' : _b, _c = props.figure, figure = _c === void 0 ? 'block' : _c, _d = props.status, status = _d === void 0 ? 'idle' : _d, isDisabled = props.isDisabled, customStyles = props.styles, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$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 (jsxs("button", __assign({ type: "button", className: style.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: ref }, { children: [status === 'idle' && children, status === 'loading' && (jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsx(ArrowPathIcon, { className: styles$g.base.spinner }), jsx("p", { children: "Loading..." })] }))), status === 'error' && (jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsx(ExclamationCircleIcon, { className: styles$g.base.icon }), jsx("p", { children: "Oops" })] }))), status === 'success' && (jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsx(CheckIcon, { className: styles$g.base.icon }), 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$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 xs = {
+    container: 'px-3 py-1.5 text-xs',
+};
+var sm$1 = {
+    container: 'px-3.5 py-2 text-sm',
+};
+var md = {
+    container: 'px-4 py-2.5 text-sm',
+};
+var lg$1 = {
+    container: 'px-5 py-2.5 text-base',
+};
+var xl = {
+    container: 'px-6 py-3 text-base',
+};
+var block$1 = {
+    container: 'rounded-md',
+};
+var rounded$1 = {
+    container: 'rounded-full',
+};
+var idle = {
+    container: '',
+};
+var loading$1 = {
+    container: 'cursor-progress',
+};
+var success = {
+    container: 'bg-emerald-500 hover:bg-emerald-600',
+};
+var error = {
+    container: 'bg-rose-400 hover:bg-rose-500',
+};
+var disabled$1 = {
+    container: 'opacity-20 cursor-not-allowed',
+};
+var styles$g = {
+    base: base$4,
+    primary: primary$1,
+    secondary: secondary$1,
+    outline: outline$1,
+    xs: xs,
+    sm: sm$1,
+    md: md,
+    lg: lg$1,
+    xl: xl,
+    block: block$1,
+    rounded: rounded$1,
+    idle: idle,
+    loading: loading$1,
+    success: success,
+    error: error,
+    disabled: disabled$1,
+};
+
+var ButtonGroupElement = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$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 (jsx("span", __assign({ className: style.container }, { children: Children.map(children, function (child, index) {
+            var _a;
+            var className = style.button;
+            if (index === 0) {
+                className = style.firstButton;
+            }
+            if (index === children.length - 1) {
+                className = style.lastButton;
+            }
+            return (jsx("button", __assign({ className: className }, { children: child }), (_a = child.key) !== null && _a !== void 0 ? _a : index));
+        }) })));
+};
+
+var base$3 = {
+    container: 'relative z-0 inline-flex shadow-sm rounded-md',
+    firstButton: 'relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+    button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+    lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+};
+var styles$f = { base: base$3 };
+
+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 = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$e.base.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        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 (jsxs(Menu, __assign({ as: "div", className: style.container }, { children: [jsxs("div", { children: [type === 'button' && (jsxs(Menu.Button, __assign({ className: style.button }, { children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))), type === 'compact' && (jsxs(Menu.Button, __assign({ className: style.compact }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: label })), jsx(EllipsisVerticalIcon, { className: style.dots, "aria-hidden": "true" })] })))] }), jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsx(Menu.Items, __assign({ className: style.items }, { children: children })) }))] })));
+};
+var DropdownElement = {
+    Container: Container$4,
+    Item: Menu.Item,
+};
+
+var base$2 = {
+    container: 'relative inline-block text-left',
+    button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500',
+    compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500',
+    dots: 'h-7 w-7 p-1',
+    items: '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 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 BadgeElement = function (props) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(type && styles$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 (jsxs("span", __assign({ className: style.container }, { children: [type === 'indicator' && (jsx("svg", __assign({ className: style.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), "Loading..."] })));
+    }
+    return (jsxs("span", __assign({ className: style.container }, { children: [type === 'indicator' && (jsx("svg", __assign({ className: style.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), children, type === 'close' && (jsxs("button", __assign({ type: "button", className: style.button, onClick: onClose }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: "Remove large option" })), jsx("svg", __assign({ className: "h-2 w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" }, { children: jsx("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }) }))] })))] })));
+};
+
+var normal = {
+    container: 'inline-flex items-center px-2.5 py-0.5 font-medium',
+};
+var indicator = {
+    container: 'inline-flex items-center px-2.5 py-0.5 font-medium',
+};
+var close = {
+    container: 'inline-flex items-center pl-2.5 pr-1 py-0.5 font-medium',
+};
+var primary = {
+    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) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        break: {
+            container: toClassName(initialStyles.break.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        },
+        center: {
+            container: toClassName(initialStyles.center.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            content: toClassName(initialStyles.center.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
+        },
+        fill: {
+            container: toClassName(initialStyles.fill.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        },
+    }); }, [customStyles]);
+    var $component = useMemo(function () {
+        var result;
+        switch (type) {
+            case 'break':
+                result = jsx("div", __assign({ className: style.break.container }, { children: children }));
+                break;
+            case 'center':
+                result = (jsx("div", __assign({ className: style.center.container }, { children: jsx("div", __assign({ className: style.center.content }, { children: children })) })));
+                break;
+            case 'fill':
+                result = jsx("div", __assign({ className: style.fill.container }, { children: children }));
+                break;
+        }
+        return result;
+    }, [style]);
+    return $component;
+};
+
+var breakStyles = {
+    container: 'container mx-auto sm:px-6 lg:px-8',
+};
+var centerStyles = {
+    container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
+    content: 'max-w-4xl mx-auto',
+};
+var fillStyles = {
+    container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
+};
+var initialStyles = {
+    break: breakStyles,
+    center: centerStyles,
+    fill: fillStyles,
+};
+
+var DividerLayout = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'left' : _a, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$c.base.container, type && styles$c[type].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        head: toClassName(styles$c.base.head, type && styles$c[type].head, customStyles === null || customStyles === void 0 ? void 0 : customStyles.head),
+        line: toClassName(styles$c.base.line, type && styles$c[type].line, customStyles === null || customStyles === void 0 ? void 0 : customStyles.line),
+        body: toClassName(styles$c.base.body, type && styles$c[type].body, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body),
+        content: toClassName(styles$c.base.content, type && styles$c[type].content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
+    }); }, [
+        customStyles === 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 (jsxs("div", __assign({ className: style.container }, { children: [jsx("div", __assign({ className: style.head, "aria-hidden": "true" }, { children: jsx("div", { className: style.line }) })), jsx("div", __assign({ className: style.body }, { children: jsx("div", __assign({ className: style.content }, { children: children })) }))] })));
+};
+
+var base$1 = {
+    container: 'relative',
+    head: 'absolute inset-0 flex items-center',
+    line: 'w-full border-t border-gray-300',
+    body: 'relative flex',
+    content: 'bg-white text-sm text-gray-500',
+};
+var left = {
+    container: '',
+    head: '',
+    line: '',
+    body: 'justify-start',
+    content: '',
+};
+var center$2 = {
+    container: '',
+    head: '',
+    line: '',
+    body: 'justify-center',
+    content: '',
+};
+var right = {
+    container: '',
+    head: '',
+    line: '',
+    body: 'justify-end',
+    content: '',
+};
+var styles$c = {
+    base: base$1,
+    left: left,
+    center: center$2,
+    right: right,
+};
+
+var ListContainerLayout = function (props) {
+    var _a;
+    var children = props.children, _b = props.type, type = _b === void 0 ? 'fill' : _b, customStyles = props.styles;
+    var isSticky = type.includes('-sticky');
+    var selector = isSticky ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0] : type;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(isSticky
+            ? styles$b["".concat(selector, "_sticky")].container
+            : styles$b[selector].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        list: toClassName(isSticky
+            ? styles$b["".concat(selector, "_sticky")].list
+            : styles$b[selector].list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list),
+        item: toClassName(isSticky
+            ? styles$b["".concat(selector, "_sticky")].item
+            : styles$b[selector].item, customStyles === null || customStyles === void 0 ? void 0 : customStyles.item),
+    }); }, [
+        customStyles === 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 (jsx("div", __assign({ className: style.container }, { children: jsx("ul", __assign({ className: style.list }, { children: Children.map(children, function (child, index) {
+                var _a;
+                return (jsx("li", __assign({ className: style.item }, { children: child }), (_a = child.key) !== null && _a !== void 0 ? _a : index));
+            }) })) })));
+};
+
+var fill = {
+    list: 'divide-y divide-gray-200',
+    item: 'py-4',
+};
+var fill_sticky = {
+    list: 'divide-y divide-gray-200',
+    item: 'px-4 py-4 sm:px-0',
+};
+var center$1 = {
+    container: 'bg-white shadow overflow-hidden rounded-md',
+    list: 'divide-y divide-gray-200',
+    item: 'px-6 py-4',
+};
+var center_sticky = {
+    container: 'bg-white shadow overflow-hidden sm:rounded-md',
+    list: 'divide-y divide-gray-200',
+    item: 'px-4 py-4 sm:px-6',
+};
+var card = {
+    list: 'space-y-3',
+    item: 'bg-white shadow overflow-hidden rounded-md px-6 py-4',
+};
+var card_sticky = {
+    list: 'space-y-3',
+    item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
+};
+var styles$b = {
+    fill: fill,
+    fill_sticky: fill_sticky,
+    center: center$1,
+    center_sticky: center_sticky,
+    card: card,
+    card_sticky: card_sticky,
+};
+
+var MediaObjectLayout = function (props) {
+    var _a;
+    var title = props.title, paragraph = props.paragraph, customFigure = props.figure, _b = props.type, type = _b === void 0 ? 'top' : _b, customStyles = props.styles;
+    var isReversed = type.includes('-reversed');
+    var selector = isReversed ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0] : type;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$a[selector].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, isReversed && 'flex-row-reverse'),
+        figure: toClassName(styles$a[selector].figure, customStyles === null || customStyles === void 0 ? void 0 : customStyles.figure),
+        svg: toClassName(styles$a[selector].svg, customStyles === null || customStyles === void 0 ? void 0 : customStyles.svg),
+        title: toClassName(styles$a[selector].title, customStyles === null || customStyles === void 0 ? void 0 : customStyles.title),
+        paragraph: toClassName(styles$a[selector].paragraph, customStyles === null || customStyles === void 0 ? void 0 : customStyles.paragraph),
+    }); }, [
+        customStyles === 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 = useMemo(function () {
+        var result = (jsx("svg", __assign({ className: style.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true" }, { children: jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) })));
+        if (customFigure) {
+            result = React.cloneElement(customFigure, {
+                className: style.svg,
+            });
+        }
+        return result;
+    }, [customFigure, style.svg]);
+    return (jsxs("div", __assign({ className: style.container }, { children: [jsx("div", __assign({ className: style.figure }, { children: $svg })), jsxs("div", { children: [jsx("h4", __assign({ className: style.title }, { children: title })), jsx("p", __assign({ className: style.paragraph }, { children: paragraph }))] })] })));
+};
+
+var base = {
+    container: 'flex',
+    figure: 'mr-4 flex-shrink-0',
+    svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
+    title: 'text-lg font-bold',
+    paragraph: 'mt-1',
+};
+var top = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var center = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure, " self-center"),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var bottom = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure, " self-end"),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var stretch = {
+    container: "".concat(base.container),
+    figure: "".concat(base.figure),
+    svg: "".concat(base.svg, " h-full"),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var responsive = {
+    container: 'sm:flex',
+    figure: "".concat(base.figure, " sm:mb-0 sm:mr-4"),
+    svg: "".concat(base.svg),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var wide = {
+    container: 'sm:flex',
+    figure: "".concat(base.figure, " mb-4 md:mb-0 sm:mr-4 sm:mb-4 "),
+    svg: "".concat(base.svg, " h-32 w-full sm:w-32"),
+    title: "".concat(base.title),
+    paragraph: "".concat(base.paragraph),
+};
+var styles$a = {
+    top: top,
+    center: center,
+    bottom: bottom,
+    stretch: stretch,
+    responsive: responsive,
+    wide: wide,
+};
+
+var Container$3 = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, customStyles = props.styles;
+    var typeStyle = useMemo(function () {
+        var result;
+        switch (type) {
+            case 'normal':
+                result = 'rounded-lg';
+                break;
+            case 'sticky':
+                result = 'sm:rounded-lg';
+                break;
+        }
+        return result;
+    }, [type]);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$9.container, typeStyle, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+    }); }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, toClassName, typeStyle]);
+    return jsx("div", __assign({ className: style.container }, { children: children }));
+};
+var Section = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        container: toClassName(styles$9.section, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+    }); }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, toClassName]);
+    return 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 = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        return ({
+            container: toClassName(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 = useMemo(function () {
+        var component;
+        switch (type) {
+            case 'slashes':
+                component = (jsx("svg", __assign({ className: style.separator, fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true" }, { children: jsx("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }) })));
+                break;
+            case 'chevrons':
+                component = (jsx(ChevronRightIcon, { className: style.separator, "aria-hidden": "true" }));
+                break;
+            case 'panel':
+                component = (jsx("svg", __assign({ className: style.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: jsx("path", { d: "M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" }) })));
+                break;
+            case 'bar':
+                component = (jsx("svg", __assign({ className: style.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: 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 (jsx("li", __assign({ className: style.home.container }, { children: jsx("div", __assign({ className: style.home.content }, { children: jsxs("a", __assign({ href: href, className: style.home.link }, { children: [jsx(HomeIcon, { className: style.home.icon, "aria-hidden": "true" }), jsx("span", __assign({ className: style.home.span }, { children: "Home" }))] })) })) })));
+    };
+    var PageLink = function (props) {
+        var page = props.page;
+        return (jsx("li", __assign({ className: style.page.container }, { children: jsxs("div", __assign({ className: style.page.content }, { children: [separator, jsx("a", __assign({ href: page.href, className: style.page.link, "aria-current": page.isCurrent ? 'page' : undefined }, { children: page.name }))] })) }), page.name));
+    };
+    return (jsx("nav", __assign({ className: style.container, "aria-label": "Breadcrumb" }, { children: jsxs("ol", __assign({ className: style.list }, { children: [jsx(HomeLink, {}), pages.map(function (page) { return (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 = {
+    slashes: slashes,
+    chevrons: chevrons,
+    panel: panel,
+    bar: bar,
+};
+
+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 = useState(2), current = _c[0], setCurrent = _c[1];
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return ({
+            container: toClassName(styles$7.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            mobile: {
+                container: toClassName(styles$7.mobile.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.mobile) === null || _a === void 0 ? void 0 : _a.container),
+                button: toClassName(styles$7.mobile.button, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.mobile) === null || _b === void 0 ? void 0 : _b.button),
+            },
+            desktop: {
+                container: toClassName(styles$7.desktop.container, (_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _c === void 0 ? void 0 : _c.container),
+                leftButton: toClassName(styles$7.desktop.leftButton, (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _d === void 0 ? void 0 : _d.leftButton),
+                rightButton: toClassName(styles$7.desktop.rightButton, (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _e === void 0 ? void 0 : _e.rightButton),
+                navigation: toClassName(styles$7.desktop.navigation, (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _f === void 0 ? void 0 : _f.navigation),
+            },
+            button: {
+                default: toClassName(styles$7.button.default, (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _g === void 0 ? void 0 : _g.default),
+                active: toClassName(styles$7.button.active, (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _h === void 0 ? void 0 : _h.active),
+                disabled: toClassName(styles$7.button.disabled, (_j = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _j === void 0 ? void 0 : _j.disabled),
+            },
+            divider: toClassName(styles$7.divider, customStyles === null || customStyles === void 0 ? void 0 : customStyles.divider),
+            label: toClassName(styles$7.label, customStyles === null || customStyles === void 0 ? void 0 : customStyles.label),
+            icon: toClassName(styles$7.icon, customStyles === null || customStyles === void 0 ? void 0 : customStyles.icon),
+        });
+    }, []);
+    var pageType = useMemo(function () {
+        var result = 'center';
+        if (current < min + 3) {
+            result = 'first';
+        }
+        if (current > max - 3) {
+            result = 'last';
+        }
+        return result;
+    }, [current, min, max]);
+    var component;
+    switch (pageType) {
+        case 'first':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: toClassName(style.button.default, current === min && style.button.active), onClick: function () { return setCurrent(min); } }, { children: min })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 1 && style.button.active), onClick: function () { return setCurrent(min + 1); } }, { children: min + 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 2 && style.button.active), onClick: function () { return setCurrent(min + 2); } }, { children: min + 2 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'center':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current - 1); } }, { children: current - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, style.button.active), onClick: function () { return setCurrent(current); } }, { children: current })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current + 1); } }, { children: current + 1 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'last':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 2 && style.button.active), onClick: function () { return setCurrent(max - 2); } }, { children: max - 2 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 1 && style.button.active), onClick: function () { return setCurrent(max - 1); } }, { children: max - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max && style.button.active), onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+    }
+    useEffect(function () {
+        if (current) {
+            onChange && onChange(current);
+        }
+    }, [onChange, current]);
+    return (jsxs("div", __assign({ className: style.container }, { children: [jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsx("button", __assign({ className: toClassName(style.mobile.button, current === min && style.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: "Previous" })), jsx("button", __assign({ className: toClassName(style.mobile.button, current === max && style.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: "Next" }))] })), jsxs("div", __assign({ className: style.desktop.container }, { children: [jsx("div", { children: jsx("p", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsx("div", { children: jsxs("nav", __assign({ className: style.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxs("button", __assign({ className: toClassName(style.desktop.leftButton, current === min && style.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsx("span", __assign({ className: style.label }, { children: "Previous" })), jsx(ChevronLeftIcon, { className: style.icon, "aria-hidden": "true" })] })), component, jsxs("button", __assign({ className: toClassName(style.desktop.rightButton, current === max && style.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: [jsx("span", __assign({ className: style.label }, { children: "Next" })), jsx(ChevronRightIcon, { className: style.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
+};
+
+var styles$7 = {
+    container: 'flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6',
+    mobile: {
+        container: '',
+        button: 'relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50',
+    },
+    desktop: {
+        container: 'hidden sm:flex sm:flex-1 sm:items-center sm:justify-between',
+        leftButton: 'relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
+        rightButton: 'relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
+        navigation: 'isolate inline-flex -space-x-px rounded-md shadow-sm',
+    },
+    button: {
+        default: 'relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50',
+        active: 'border-indigo-500 bg-indigo-50 text-indigo-600 z-20',
+        disabled: 'opacity-20 cursor-not-allowed',
+    },
+    divider: 'relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500',
+    label: 'sr-only',
+    icon: 'w-5 h-5',
+};
+
+var PagePaginationNavigation = function (props) {
+    var _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, customStyles = props.styles, onChange = props.onChange;
+    var _c = useState(2), current = _c[0], setCurrent = _c[1];
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return ({
+            container: toClassName(styles$6.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            left: {
+                container: toClassName(styles$6.left.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _a === void 0 ? void 0 : _a.container),
+                button: toClassName(styles$6.left.button, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _b === void 0 ? void 0 : _b.button),
+                icon: toClassName(styles$6.left.icon, (_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _c === void 0 ? void 0 : _c.icon),
+            },
+            center: {
+                container: toClassName(styles$6.center.container, (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.center) === null || _d === void 0 ? void 0 : _d.container),
+            },
+            right: {
+                container: toClassName(styles$6.right.container, (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _e === void 0 ? void 0 : _e.container),
+                button: toClassName(styles$6.right.button, (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _f === void 0 ? void 0 : _f.button),
+                icon: toClassName(styles$6.right.icon, (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _g === void 0 ? void 0 : _g.icon),
+            },
+            button: {
+                default: toClassName(styles$6.button.default, (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _h === void 0 ? void 0 : _h.default),
+                active: toClassName(styles$6.button.active, (_j = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _j === void 0 ? void 0 : _j.active),
+                disabled: toClassName(styles$6.button.disabled, (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _k === void 0 ? void 0 : _k.disabled),
+            },
+            divider: toClassName(styles$6.divider, customStyles === null || customStyles === void 0 ? void 0 : customStyles.divider),
+        });
+    }, []);
+    var pageType = useMemo(function () {
+        var result = 'center';
+        if (current < min + 3) {
+            result = 'first';
+        }
+        if (current > max - 3) {
+            result = 'last';
+        }
+        return result;
+    }, [current, min, max]);
+    var component;
+    switch (pageType) {
+        case 'first':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: toClassName(style.button.default, current === min && style.button.active), onClick: function () { return setCurrent(min); } }, { children: min })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 1 && style.button.active), onClick: function () { return setCurrent(min + 1); } }, { children: min + 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === min + 2 && style.button.active), onClick: function () { return setCurrent(min + 2); } }, { children: min + 2 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'center':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current - 1); } }, { children: current - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, style.button.active), onClick: function () { return setCurrent(current); } }, { children: current })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current + 1); } }, { children: current + 1 })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+        case 'last':
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: style.divider }, { children: "..." })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 2 && style.button.active), onClick: function () { return setCurrent(max - 2); } }, { children: max - 2 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max - 1 && style.button.active), onClick: function () { return setCurrent(max - 1); } }, { children: max - 1 })), jsx("button", __assign({ className: toClassName(style.button.default, current === max && style.button.active), onClick: function () { return setCurrent(max); } }, { children: max }))] }));
+            break;
+    }
+    useEffect(function () {
+        if (current) {
+            onChange && onChange(current);
+        }
+    }, [onChange, current]);
+    return (jsxs("nav", __assign({ className: style.container }, { children: [jsx("div", __assign({ className: style.left.container }, { children: jsxs("button", __assign({ className: toClassName(style.left.button, current === min && style.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsx(ArrowLongLeftIcon, { className: style.left.icon }), "Previous"] })) })), jsx("div", __assign({ className: style.center.container }, { children: component })), jsx("div", __assign({ className: style.right.container }, { children: jsxs("button", __assign({ className: toClassName(style.right.button, current === max && style.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: ["Next", jsx(ArrowLongRightIcon, { className: style.right.icon })] })) }))] })));
+};
+
+var styles$6 = {
+    container: 'flex items-center justify-between border-t border-gray-200 px-4 sm:px-0',
+    left: {
+        container: '-mt-px flex w-0 flex-1',
+        button: 'inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700',
+        icon: 'mr-3 h-5 w-5 text-gray-400',
+    },
+    center: {
+        container: 'hidden md:-mt-px md:flex',
+    },
+    right: {
+        container: '-mt-px flex w-0 flex-1 justify-end',
+        button: 'inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700',
+        icon: 'ml-3 h-5 w-5 text-gray-400',
+    },
+    button: {
+        default: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700',
+        active: 'border-indigo-500 text-indigo-600',
+        disabled: 'opacity-20 cursor-not-allowed',
+    },
+    divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
+};
+
+var Container$2 = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var _a = useState(''), active = _a[0], setActive = _a[1];
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () { return ({
+        root: toClassName(styles$5.root, customStyles === null || customStyles === void 0 ? void 0 : customStyles.root),
+        panel: toClassName(styles$5.panel, customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel),
+        container: toClassName(styles$5.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+        content: toClassName(styles$5.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
+    }); }, []);
+    return (jsx("div", __assign({ className: style.root, style: { maxWidth: '22rem' } }, { children: jsxs("div", __assign({ className: style.panel }, { children: [jsx("div", __assign({ className: style.container }, { children: jsx("div", __assign({ className: style.content }, { children: jsx("img", { className: "h-8 w-auto", src: "https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600", alt: "Logo" }) })) })), children({ active: active, setActive: setActive })] })) })));
+};
+var List$2 = function (props) {
+    var children = props.children, setActive = props.setActive, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    useEffect(function () {
+        var _a, _b;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
+        var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
+        if (initialTab !== undefined) {
+            tab = initialTab;
+        }
+        setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+    }, []);
+    return (jsx("nav", __assign({ className: toClassName(styles$5.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
+};
+var Item$2 = function (props) {
+    var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
+            ? styles$5.item.active
+            : styles$5.item.notActive, styles$5 === null || styles$5 === void 0 ? void 0 : styles$5.item.base), onClick: onClick }, { children: children })));
+};
+var Footer = function (props) {
+    var children = props.children;
+    return jsx("div", __assign({ className: "flex border-t border-gray-200 p-4" }, { children: children }));
+};
+var SidebarNavigation = {
+    Container: Container$2,
+    List: List$2,
+    Item: Item$2,
+    Footer: Footer,
+};
+
+var styles$5 = {
+    root: 'z-10 fixed top-0 left-0 bottom-0 bg-red-50 sm:w-1/6',
+    panel: 'flex min-h-0 flex-1 flex-col border-r border-gray-200 bg-white h-full pt-16',
+    container: 'flex flex-col overflow-y-auto pt-5 pb-4',
+    content: 'flex flex-shrink-0 items-center px-4',
+    list: 'mt-5 flex-1 space-y-1 bg-white px-2 ',
+    item: {
+        base: 'group flex items-center px-2 py-2 text-sm font-medium rounded-md cursor-pointer',
+        active: 'bg-gray-100 text-gray-900 hover:text-gray-900 hover:bg-gray-100',
+        notActive: 'text-gray-600 hover:text-gray-900 hover:bg-gray-50',
+    },
+};
+
+var Container$1 = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var _a = useState(''), active = _a[0], setActive = _a[1];
+    return (jsx("div", __assign({ className: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container }, { children: children({ active: active, setActive: setActive }) })));
+};
+var List$1 = function (props) {
+    var children = props.children, active = props.active, setActive = props.setActive, customStyles = props.styles;
+    var handleChangeSelect = useCallback(function (e) {
+        var _a;
+        var key = e.currentTarget.value;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a.find(function (child) { return child.props.accessor === key; });
+        if (tab === null || tab === void 0 ? void 0 : tab.props.href) {
+            window.location.href = tab.props.href;
+        }
+        else if (tab === null || tab === void 0 ? void 0 : tab.props.onClick) {
+            setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+        }
+    }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    useEffect(function () {
+        var _a, _b;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
+        var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
+        if (initialTab !== undefined) {
+            tab = initialTab;
+        }
+        setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setActive]);
+    return (jsxs(Fragment$1, { children: [jsxs("div", __assign({ className: "sm:hidden" }, { children: [jsx("label", __assign({ htmlFor: "tabs", className: "sr-only" }, { children: "Select a tab" })), jsx("select", __assign({ id: "tabs", name: "tabs", value: active, className: toClassName(styles$4.select, customStyles === null || customStyles === void 0 ? void 0 : customStyles.select), onChange: handleChangeSelect }, { children: Children.map(children, function (child) {
+                            var _a;
+                            return (jsx("option", __assign({ value: child.props.accessor }, { children: child.props.children }), (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.accessor));
+                        }) }))] })), jsx("div", __assign({ className: "hidden sm:block" }, { children: jsx("nav", __assign({ className: toClassName(styles$4.navigation, customStyles === null || customStyles === void 0 ? void 0 : customStyles.navigation) }, { children: children })) }))] }));
+};
+var Item$1 = function (props) {
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
+            ? styles$4.tab[type].active
+            : styles$4.tab[type].notActive, styles$4.tab[type].base), onClick: onClick }, { children: children })));
+};
+var View$1 = function (props) {
+    var children = props.children;
+    return jsx(Fragment$1, { children: children });
+};
+var TabNavigation = {
+    Container: Container$1,
+    List: List$1,
+    Item: Item$1,
+    View: View$1,
+};
+
+var styles$4 = {
+    container: '',
+    select: 'block w-full rounded-md border border-gray-300 py-2 px-3 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm',
+    navigation: 'border-b border-gray-200 -mb-px flex space-x-8',
+    tab: {
+        underline: {
+            base: 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer',
+            active: 'border-indigo-500 text-indigo-600',
+            notActive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+        },
+        pills: {
+            base: 'px-3 py-2 font-medium text-sm rounded-md cursor-pointer',
+            active: 'bg-gray-100 text-gray-700',
+            notActive: 'text-gray-500 hover:text-gray-700',
+        },
+        buttons: {
+            base: 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer',
+            active: 'border-indigo-500 text-indigo-600',
+            notActive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+        },
+    },
+};
+
+var Container = function (props) {
+    var children = props.children, customStyles = props.styles;
+    var _a = useState(''), active = _a[0], setActive = _a[1];
+    return (jsx("div", __assign({ className: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container }, { children: children({ active: active, setActive: setActive }) })));
+};
+var List = function (props) {
+    var children = props.children, setActive = props.setActive, customStyles = props.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    useEffect(function () {
+        var _a, _b;
+        var tab = (_a = Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
+        var initialTab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
+        if (initialTab !== undefined) {
+            tab = initialTab;
+        }
+        setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
+    }, []);
+    return (jsx("nav", __assign({ className: toClassName(styles$3.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
+};
+var Item = function (props) {
+    var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    return (jsx("a", __assign({ href: href, className: toClassName(isCurrent
+            ? styles$3.item.active
+            : styles$3.item.notActive, styles$3 === null || styles$3 === void 0 ? void 0 : styles$3.item.base), onClick: onClick }, { children: children })));
+};
+var View = function (props) {
+    var children = props.children;
+    return jsx(Fragment$1, { children: children });
+};
+var VerticalNavigation = {
+    Container: Container,
+    List: List,
+    Item: Item,
+    View: View,
+};
+
+var styles$3 = {
+    container: '',
+    list: 'space-y-1',
+    item: {
+        base: 'flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer',
+        active: 'bg-gray-100 text-gray-900',
+        notActive: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+    },
+};
+
+var ModalOverlay = function (props) {
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var options = useMemo(function () { return ({
+        onOpen: function () { return setIsOpen(true); },
+        onClose: function () { return setIsOpen(false); },
+    }); }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+        return ({
+            container: toClassName(styles$2.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            background: {
+                container: toClassName(styles$2.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
+                transition: {
+                    enter: toClassName(styles$2.background.transition.enter, (_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _b === void 0 ? void 0 : _b.transition) === null || _c === void 0 ? void 0 : _c.enter),
+                    enterFrom: toClassName(styles$2.background.transition.enterFrom, (_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _d === void 0 ? void 0 : _d.transition) === null || _e === void 0 ? void 0 : _e.enterFrom),
+                    enterTo: toClassName(styles$2.background.transition.enterTo, (_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _f === void 0 ? void 0 : _f.transition) === null || _g === void 0 ? void 0 : _g.enterTo),
+                    leave: toClassName(styles$2.background.transition.leave, (_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _h === void 0 ? void 0 : _h.transition) === null || _j === void 0 ? void 0 : _j.leave),
+                    leaveFrom: toClassName(styles$2.background.transition.leaveFrom, (_l = (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _k === void 0 ? void 0 : _k.transition) === null || _l === void 0 ? void 0 : _l.leaveFrom),
+                    leaveTo: toClassName(styles$2.background.transition.leaveTo, (_o = (_m = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _m === void 0 ? void 0 : _m.transition) === null || _o === void 0 ? void 0 : _o.leaveTo),
+                },
+            },
+            layout: {
+                container: toClassName(styles$2.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
+                content: toClassName(styles$2.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
+            },
+            panel: {
+                container: toClassName(styles$2.panel.container, size && styles$2[size], (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _r === void 0 ? void 0 : _r.container),
+                transition: {
+                    enter: toClassName(styles$2.panel.transition.enter, (_t = (_s = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _s === void 0 ? void 0 : _s.transition) === null || _t === void 0 ? void 0 : _t.enter),
+                    enterFrom: toClassName(styles$2.panel.transition.enterFrom, (_v = (_u = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _u === void 0 ? void 0 : _u.transition) === null || _v === void 0 ? void 0 : _v.enterFrom),
+                    enterTo: toClassName(styles$2.panel.transition.enterTo, (_x = (_w = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _w === void 0 ? void 0 : _w.transition) === null || _x === void 0 ? void 0 : _x.enterTo),
+                    leave: toClassName(styles$2.panel.transition.leave, (_z = (_y = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _y === void 0 ? void 0 : _y.transition) === null || _z === void 0 ? void 0 : _z.leave),
+                    leaveFrom: toClassName(styles$2.panel.transition.leaveFrom, (_1 = (_0 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _0 === void 0 ? void 0 : _0.transition) === null || _1 === void 0 ? void 0 : _1.leaveFrom),
+                    leaveTo: toClassName(styles$2.panel.transition.leaveTo, (_3 = (_2 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _2 === void 0 ? void 0 : _2.transition) === null || _3 === void 0 ? void 0 : _3.leaveTo),
+                },
+            },
+        });
+    }, []);
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: style.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: style.background.transition.enter, enterFrom: style.background.transition.enterFrom, enterTo: style.background.transition.enterTo, leave: style.background.transition.leave, leaveFrom: style.background.transition.leaveFrom, leaveTo: style.background.transition.leaveTo }, { children: jsx("div", { className: style.background.container }) })), jsx("div", __assign({ className: style.layout.container }, { children: jsx("div", __assign({ className: style.layout.content }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: style.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
+};
+
+var styles$2 = {
+    container: 'relative z-20',
+    background: {
+        container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+        transition: {
+            enter: 'ease-out duration-300',
+            enterFrom: 'opacity-0',
+            enterTo: 'opacity-100',
+            leave: 'ease-in duration-200',
+            leaveFrom: 'opacity-100',
+            leaveTo: 'opacity-0',
+        },
+    },
+    layout: {
+        container: 'fixed inset-0 z-10 overflow-y-auto',
+        content: 'flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0',
+    },
+    panel: {
+        container: 'relative transform overflow-hidden rounded-lg bg-white w-full shadow-xl transition-all sm:w-full text-left',
+        transition: {
+            enter: 'ease-out duration-300',
+            enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+            enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+            leave: 'ease-in duration-200',
+            leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
+            leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+        },
+    },
+    xs: 'sm:max-w-xs',
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-2xl',
+    xl: 'sm:max-w-4xl',
+};
+
+var NotificationOverlayContainer = function (_a) {
+    var children = _a.children, customStyles = _a.styles;
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b;
+        return ({
+            outer: toClassName(styles$1.container.outer, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) === null || _a === void 0 ? void 0 : _a.outer),
+            inner: toClassName(styles$1.container.inner, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) === null || _b === void 0 ? void 0 : _b.inner),
+        });
+    }, []);
+    return (jsx("div", __assign({ "aria-live": "assertive", className: style.outer }, { children: jsx("div", __assign({ className: style.inner }, { children: children })) })));
+};
+var NotificationOverlayItem = function (props) {
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var options = useMemo(function () { return ({
+        onOpen: function () { return setIsOpen(true); },
+        onClose: function () { return setIsOpen(false); },
+    }); }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        return ({
+            container: toClassName(styles$1.item.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _a === void 0 ? void 0 : _a.container),
+            layout: {
+                container: toClassName(styles$1.item.layout.container, (_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.container),
+                content: toClassName(styles$1.item.layout.content, (_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.content),
+                inner: toClassName(styles$1.item.layout.inner, (_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.inner),
+            },
+            panel: {
+                container: toClassName(styles$1.item.panel.container, size && styles$1[size], (_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _h === void 0 ? void 0 : _h.panel) === null || _j === void 0 ? void 0 : _j.container),
+                transition: {
+                    enter: toClassName(styles$1.item.panel.transition.enter, (_m = (_l = (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _k === void 0 ? void 0 : _k.panel) === null || _l === void 0 ? void 0 : _l.transition) === null || _m === void 0 ? void 0 : _m.enter),
+                    enterFrom: toClassName(styles$1.item.panel.transition.enterFrom, (_q = (_p = (_o = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _o === void 0 ? void 0 : _o.panel) === null || _p === void 0 ? void 0 : _p.transition) === null || _q === void 0 ? void 0 : _q.enterFrom),
+                    enterTo: toClassName(styles$1.item.panel.transition.enterTo, (_t = (_s = (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _r === void 0 ? void 0 : _r.panel) === null || _s === void 0 ? void 0 : _s.transition) === null || _t === void 0 ? void 0 : _t.enterTo),
+                    leave: toClassName(styles$1.item.panel.transition.leave, (_w = (_v = (_u = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _u === void 0 ? void 0 : _u.panel) === null || _v === void 0 ? void 0 : _v.transition) === null || _w === void 0 ? void 0 : _w.leave),
+                    leaveFrom: toClassName(styles$1.item.panel.transition.leaveFrom, (_z = (_y = (_x = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _x === void 0 ? void 0 : _x.panel) === null || _y === void 0 ? void 0 : _y.transition) === null || _z === void 0 ? void 0 : _z.leaveFrom),
+                    leaveTo: toClassName(styles$1.item.panel.transition.leaveTo, (_2 = (_1 = (_0 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _0 === void 0 ? void 0 : _0.panel) === null || _1 === void 0 ? void 0 : _1.transition) === null || _2 === void 0 ? void 0 : _2.leaveTo),
+                },
+            },
+        });
+    }, []);
+    return (jsxs(Fragment$1, { children: [jsx(Transition, __assign({ show: isOpen, as: Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsx("div", __assign({ className: style.panel.container }, { children: children(options) })) })), trigger && trigger(options)] }));
+};
+var NotificationOverlay = {
+    Container: NotificationOverlayContainer,
+    Item: NotificationOverlayItem,
+};
+
+var styles$1 = {
+    container: {
+        outer: 'pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20',
+        inner: 'flex w-full flex-col items-center space-y-4 sm:items-end',
+    },
+    item: {
+        container: 'relative',
+        layout: {
+            container: 'fixed inset-0 overflow-hidden',
+            content: 'absolute inset-0 overflow-hidden',
+            inner: 'pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10',
+        },
+        panel: {
+            container: 'pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5',
+            transition: {
+                enter: 'transform ease-out duration-300 transition',
+                enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
+                enterTo: 'translate-y-0 opacity-100 sm:translate-x-0',
+                leave: 'transition ease-in duration-100',
+                leaveFrom: 'opacity-100',
+                leaveTo: 'opacity-0',
+            },
+        },
+    },
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+};
+
+var SlideOverOverlay = function (props) {
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
+    var options = useMemo(function () { return ({
+        onOpen: function () { return setIsOpen(true); },
+        onClose: function () { return setIsOpen(false); },
+    }); }, []);
+    var toClassName = useCallback(function () {
+        var values = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            values[_i] = arguments[_i];
+        }
+        return values.filter(Boolean).join(' ');
+    }, []);
+    var style = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        return ({
+            container: toClassName(styles.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
+            background: {
+                container: toClassName(styles.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
+                transition: {
+                    enter: toClassName(styles.background.transition.enter, (_c = (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _b === void 0 ? void 0 : _b.transition) === null || _c === void 0 ? void 0 : _c.enter),
+                    enterFrom: toClassName(styles.background.transition.enterFrom, (_e = (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _d === void 0 ? void 0 : _d.transition) === null || _e === void 0 ? void 0 : _e.enterFrom),
+                    enterTo: toClassName(styles.background.transition.enterTo, (_g = (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _f === void 0 ? void 0 : _f.transition) === null || _g === void 0 ? void 0 : _g.enterTo),
+                    leave: toClassName(styles.background.transition.leave, (_j = (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _h === void 0 ? void 0 : _h.transition) === null || _j === void 0 ? void 0 : _j.leave),
+                    leaveFrom: toClassName(styles.background.transition.leaveFrom, (_l = (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _k === void 0 ? void 0 : _k.transition) === null || _l === void 0 ? void 0 : _l.leaveFrom),
+                    leaveTo: toClassName(styles.background.transition.leaveTo, (_o = (_m = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _m === void 0 ? void 0 : _m.transition) === null || _o === void 0 ? void 0 : _o.leaveTo),
+                },
+            },
+            layout: {
+                container: toClassName(styles.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
+                content: toClassName(styles.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
+                inner: toClassName(styles.layout.inner, (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _r === void 0 ? void 0 : _r.inner),
+            },
+            panel: {
+                container: toClassName(styles.panel.container, size && styles[size], (_s = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _s === void 0 ? void 0 : _s.container),
+                transition: {
+                    enter: toClassName(styles.panel.transition.enter, (_u = (_t = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _t === void 0 ? void 0 : _t.transition) === null || _u === void 0 ? void 0 : _u.enter),
+                    enterFrom: toClassName(styles.panel.transition.enterFrom, (_w = (_v = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _v === void 0 ? void 0 : _v.transition) === null || _w === void 0 ? void 0 : _w.enterFrom),
+                    enterTo: toClassName(styles.panel.transition.enterTo, (_y = (_x = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _x === void 0 ? void 0 : _x.transition) === null || _y === void 0 ? void 0 : _y.enterTo),
+                    leave: toClassName(styles.panel.transition.leave, (_0 = (_z = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _z === void 0 ? void 0 : _z.transition) === null || _0 === void 0 ? void 0 : _0.leave),
+                    leaveFrom: toClassName(styles.panel.transition.leaveFrom, (_2 = (_1 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _1 === void 0 ? void 0 : _1.transition) === null || _2 === void 0 ? void 0 : _2.leaveFrom),
+                    leaveTo: toClassName(styles.panel.transition.leaveTo, (_4 = (_3 = customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel) === null || _3 === void 0 ? void 0 : _3.transition) === null || _4 === void 0 ? void 0 : _4.leaveTo),
+                },
+            },
+        });
+    }, []);
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: style.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: style.background.transition.enter, enterFrom: style.background.transition.enterFrom, enterTo: style.background.transition.enterTo, leave: style.background.transition.leave, leaveFrom: style.background.transition.leaveFrom, leaveTo: style.background.transition.leaveTo }, { children: jsx("div", { className: style.background.container }) })), jsx("div", __assign({ className: style.layout.container }, { children: jsx("div", __assign({ className: style.layout.content }, { children: jsx("div", __assign({ className: style.layout.inner }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: style.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
+};
+
+var styles = {
+    container: 'relative z-20',
+    background: {
+        container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+        transition: {
+            enter: 'ease-in-out duration-500',
+            enterFrom: 'opacity-0',
+            enterTo: 'opacity-100',
+            leave: 'ease-in-out duration-500',
+            leaveFrom: 'opacity-100',
+            leaveTo: 'opacity-0',
+        },
+    },
+    layout: {
+        container: 'fixed inset-0 overflow-hidden',
+        content: 'absolute inset-0 overflow-hidden',
+        inner: 'pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10',
+    },
+    panel: {
+        container: 'pointer-events-auto w-screen bg-white',
+        transition: {
+            enter: 'transform transition ease-in-out duration-500 sm:duration-700',
+            enterFrom: 'translate-x-full',
+            enterTo: 'translate-x-0',
+            leave: 'transform transition ease-in-out duration-500 sm:duration-700',
+            leaveFrom: 'translate-x-0',
+            leaveTo: 'translate-x-full',
+        },
+    },
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+};
+
+export { AvatarElement as Avatar, BadgeElement as Badge, BreadcrumbsNavigation as Breadcrumbs, ButtonElement as Button, ButtonGroupElement as ButtonGroup, ContainerLayout as Container, DividerLayout as Divider, DropdownElement as Dropdown, ListContainerLayout as ListContainer, MediaObjectLayout as MediaObject, ModalOverlay as Modal, NotificationOverlay as Notification, PagePaginationNavigation as PagePagination, LayoutPanel as Panel, PanelPaginationNavigation as PanelPagination, SidebarNavigation as Sidebar, SlideOverOverlay as SlideOver, TabNavigation as Tab, VerticalNavigation as Vertical };
+//# sourceMappingURL=index.esm.js.map