npm - @ballistix.digital/react-components - Versions diffs - 0.1.13 → 0.3.0 - Mend

@ballistix.digital/react-components 0.1.13 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -1,6 +1,7 @@
 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 React, { useMemo, Children, Fragment, useState, useEffect, useCallback } from 'react';
+import get from 'lodash/get';
 import { Menu, Transition, Dialog } from '@headlessui/react';
 /******************************************************************************
@@ -29,31 +30,32 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
+var toClassName = function () {
+    var values = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        values[_i] = arguments[_i];
+    }
+    return values.filter(Boolean).join(' ');
+};
 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(' ');
-    }, []);
+    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, stylesOverrides = props.styles;
     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),
+        loading: toClassName(styles$h.base.loading, size && styles$h[size].container, figure && styles$h[figure].container, isDisabled && styles$h.disabled.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.loading),
+        spinner: toClassName(styles$h.base.spinner, size && styles$h[size].container, figure && styles$h[figure].container, isDisabled && styles$h.disabled.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.empty,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.indicator,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.loading,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.placeholder,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.spinner,
         figure,
         isDisabled,
         isLoading,
@@ -73,7 +75,7 @@ var AvatarElement = function (props) {
     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 = {
+var base$4 = {
     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',
@@ -121,7 +123,7 @@ var indicator$1 = {
     blocked: 'bg-red-400',
 };
 var styles$h = {
-    base: base$5,
+    base: base$4,
     xs: xs$1,
     sm: sm$2,
     md: md$1,
@@ -135,29 +137,14 @@ var styles$h = {
 };
 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 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, stylesOverrides = props.styles, onClick = props.onClick;
     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,
-    ]);
+        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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
+    }); }, [stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container, figure, isDisabled, size, status, 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 = {
+var base$3 = {
     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',
@@ -209,7 +196,7 @@ var disabled$1 = {
     container: 'opacity-20 cursor-not-allowed',
 };
 var styles$g = {
-    base: base$4,
+    base: base$3,
     primary: primary$1,
     secondary: secondary$1,
     outline: outline$1,
@@ -227,69 +214,76 @@ var styles$g = {
     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];
+var calculateNestedKeys = function (obj, prefix) {
+    if (prefix === void 0) { prefix = ''; }
+    return Object.keys(obj).reduce(function (acc, k) {
+        var pre = prefix.length ? "".concat(prefix, ".") : '';
+        // decide to traverse deeper into the object, or just push the key and move on
+        if (typeof obj[k] === 'object') {
+            acc.push.apply(acc, calculateNestedKeys(obj[k], pre + k));
+        }
+        else {
+            acc.push(pre + k);
         }
-        return values.filter(Boolean).join(' ');
+        return acc;
     }, []);
-    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 toMergedClasses = function (_a) {
+    var styles = _a.styles, stylesOverrides = _a.stylesOverrides, customStyles = _a.customStyles, identifier = _a.identifier, type = _a.type;
+    return toClassName(get(type ? get(styles, type) : styles, identifier), get(type ? get(stylesOverrides, type) : stylesOverrides, identifier), customStyles);
+};
+var ButtonGroupElement = function (props) {
+    var children = props.children, stylesOverrides = props.styles;
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$f);
+        var customStyles = {};
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$f,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
+        });
+        return styles;
+    }, [stylesOverrides]);
+    return (jsx("span", __assign({ className: styles.container }, { children: Children.map(children, function (child, index) {
             var _a;
-            var className = style.button;
+            var className = styles.button;
             if (index === 0) {
-                className = style.firstButton;
+                className = styles.firstButton;
             }
             if (index === children.length - 1) {
-                className = style.lastButton;
+                className = styles.lastButton;
             }
             return (jsx("button", __assign({ className: className }, { children: child }), (_a = child.key) !== null && _a !== void 0 ? _a : index));
         }) })));
 };
-var base$3 = {
+var styles$f = {
     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 children = props.children, label = props.label, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'left' : _b, stylesOverrides = props.styles;
+    // TODO: update to mergedClassnames
     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),
+        container: toClassName(styles$e.base.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
+        button: toClassName(styles$e.base.button, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button),
+        compact: toClassName(styles$e.base.compact, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.compact),
+        dots: toClassName(styles$e.base.dots, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.dots),
+        items: toClassName(styles$e.base.items, direction && (styles$e === null || styles$e === void 0 ? void 0 : styles$e[direction].items), stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.compact,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.dots,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.items,
         direction,
         toClassName,
     ]);
@@ -320,28 +314,20 @@ var styles$e = {
 };
 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 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, stylesOverrides = props.styles;
     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),
+        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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
+        indicator: toClassName(color && styles$d[color].indicator, size && styles$d[size].indicator, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.indicator,
         figure,
         isDisabled,
         isLoading,
         size,
-        toClassName,
         type,
     ]);
     if (isLoading) {
@@ -454,41 +440,35 @@ var styles$d = {
 };
 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 children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, stylesOverrides = props.styles;
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(initialStyles);
+        var customStyles = {};
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: initialStyles,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
+        });
+        return styles;
+    }, [stylesOverrides]);
     var $component = useMemo(function () {
         var result;
         switch (type) {
             case 'break':
-                result = jsx("div", __assign({ className: style.break.container }, { children: children }));
+                result = jsx("div", __assign({ className: styles.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 })) })));
+                result = (jsx("div", __assign({ className: styles.center.container }, { children: jsx("div", __assign({ className: styles.center.content }, { children: children })) })));
                 break;
             case 'fill':
-                result = jsx("div", __assign({ className: style.fill.container }, { children: children }));
+                result = jsx("div", __assign({ className: styles.fill.container }, { children: children }));
                 break;
         }
         return result;
-    }, [style]);
+    }, [children, styles, type]);
     return $component;
 };
@@ -509,30 +489,21 @@ var initialStyles = {
 };
 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 children = props.children; props.type; var stylesOverrides = props.styles;
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$c);
+        var customStyles = {};
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$c,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
+        });
+        return styles;
+    }, [stylesOverrides]);
+    return (jsxs("div", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.head, "aria-hidden": "true" }, { children: jsx("div", { className: styles.line }) })), jsx("div", __assign({ className: styles.body }, { children: jsx("div", __assign({ className: styles.content }, { children: children })) }))] })));
 };
 var base$1 = {
@@ -572,33 +543,25 @@ var styles$c = {
 var ListContainerLayout = function (props) {
     var _a;
-    var children = props.children, _b = props.type, type = _b === void 0 ? 'fill' : _b, customStyles = props.styles;
+    var children = props.children, _b = props.type, type = _b === void 0 ? 'fill' : _b, stylesOverrides = 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),
+            : styles$b[selector].container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
         list: toClassName(isSticky
             ? styles$b["".concat(selector, "_sticky")].list
-            : styles$b[selector].list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list),
+            : styles$b[selector].list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list),
         item: toClassName(isSticky
             ? styles$b["".concat(selector, "_sticky")].item
-            : styles$b[selector].item, customStyles === null || customStyles === void 0 ? void 0 : customStyles.item),
+            : styles$b[selector].item, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.item,
+        stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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;
@@ -643,42 +606,34 @@ var styles$b = {
 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 title = props.title, paragraph = props.paragraph, customFigure = props.figure, _b = props.type, type = _b === void 0 ? 'top' : _b, stylesOverrides = 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,
-    ]);
+    isReversed
+        ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0]
+        : type;
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$a[type]);
+        var customStyles = {};
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$a[type],
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
+        });
+        return styles;
+    }, [stylesOverrides, type]);
     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" }) })));
+        var result = (jsx("svg", __assign({ className: styles.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,
+                className: styles.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 }))] })] })));
+    }, [customFigure, styles.svg]);
+    return (jsxs("div", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.figure }, { children: $svg })), jsxs("div", { children: [jsx("h4", __assign({ className: styles.title }, { children: title })), jsx("p", __assign({ className: styles.paragraph }, { children: paragraph }))] })] })));
 };
 var base = {
@@ -740,7 +695,7 @@ var styles$a = {
 };
 var Container$3 = function (props) {
-    var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, customStyles = props.styles;
+    var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, stylesOverrides = props.styles;
     var typeStyle = useMemo(function () {
         var result;
         switch (type) {
@@ -753,30 +708,16 @@ var Container$3 = function (props) {
         }
         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]);
+        container: toClassName(styles$9.container, typeStyle, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
+    }); }, [stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container, 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 children = props.children, stylesOverrides = props.styles;
     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]);
+        container: toClassName(styles$9.section, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
+    }); }, [stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container]);
     return jsx("div", __assign({ className: style.container }, { children: children }));
 };
 var LayoutPanel = {
@@ -790,63 +731,50 @@ var styles$9 = {
 };
 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),
-            },
+    var _a = props.href, href = _a === void 0 ? '/' : _a, pages = props.pages, _b = props.type, type = _b === void 0 ? 'slashes' : _b, customSeparator = props.separator, stylesOverrides = props.styles;
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$8);
+        var customStyles = {};
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$8,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                type: type,
+                customStyles: get(customStyles, key),
+            });
         });
-    }, [customStyles, toClassName, type]);
+        return styles;
+    }, [stylesOverrides, 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" }) })));
+                component = (jsx("svg", __assign({ className: styles.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" }));
+                component = (jsx(ChevronRightIcon, { className: styles.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" }) })));
+                component = (jsx("svg", __assign({ className: styles.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" }) })));
+                component = (jsx("svg", __assign({ className: styles.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]);
+    }, [customSeparator, styles.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" }))] })) })) })));
+        return (jsx("li", __assign({ className: styles.home.container }, { children: jsx("div", __assign({ className: styles.home.content }, { children: jsxs("a", __assign({ href: href, className: styles.home.link }, { children: [jsx(HomeIcon, { className: styles.home.icon, "aria-hidden": "true" }), jsx("span", __assign({ className: styles.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("li", __assign({ className: styles.page.container }, { children: jsxs("div", __assign({ className: styles.page.content }, { children: [separator, jsx("a", __assign({ href: page.href, className: styles.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)); })] })) })));
+    return (jsx("nav", __assign({ className: styles.container, "aria-label": "Breadcrumb" }, { children: jsxs("ol", __assign({ className: styles.list }, { children: [jsx(HomeLink, {}), pages.map(function (page) { return (jsx(PageLink, { page: page }, page.name)); })] })) })));
 };
 var slashes = {
@@ -925,37 +853,30 @@ var styles$8 = {
 };
 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 _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = 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),
+            container: toClassName(styles$7.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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),
+                container: toClassName(styles$7.mobile.container, (_a = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.mobile) === null || _a === void 0 ? void 0 : _a.container),
+                button: toClassName(styles$7.mobile.button, (_b = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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),
+                container: toClassName(styles$7.desktop.container, (_c = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.desktop) === null || _c === void 0 ? void 0 : _c.container),
+                leftButton: toClassName(styles$7.desktop.leftButton, (_d = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.desktop) === null || _d === void 0 ? void 0 : _d.leftButton),
+                rightButton: toClassName(styles$7.desktop.rightButton, (_e = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.desktop) === null || _e === void 0 ? void 0 : _e.rightButton),
+                navigation: toClassName(styles$7.desktop.navigation, (_f = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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),
+                default: toClassName(styles$7.button.default, (_g = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button) === null || _g === void 0 ? void 0 : _g.default),
+                active: toClassName(styles$7.button.active, (_h = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button) === null || _h === void 0 ? void 0 : _h.active),
+                disabled: toClassName(styles$7.button.disabled, (_j = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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),
+            divider: toClassName(styles$7.divider, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.divider),
+            label: toClassName(styles$7.label, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.label),
+            icon: toClassName(styles$7.icon, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.icon),
         });
     }, []);
     var pageType = useMemo(function () {
@@ -1011,40 +932,21 @@ var styles$7 = {
 };
 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 _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = 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 styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$6);
+        var customStyles = {};
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$6,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
         });
-    }, []);
+        return styles;
+    }, [stylesOverrides]);
     var pageType = useMemo(function () {
         var result = 'center';
         if (current < min + 3) {
@@ -1058,13 +960,13 @@ var PagePaginationNavigation = function (props) {
     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 }))] }));
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); } }, { children: min })), jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); } }, { children: min + 1 })), jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); } }, { children: min + 2 })), jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsx("button", __assign({ className: styles.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 }))] }));
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(current - 1); } }, { children: current - 1 })), jsx("button", __assign({ className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); } }, { children: current })), jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(current + 1); } }, { children: current + 1 })), jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsx("button", __assign({ className: styles.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 }))] }));
+            component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsx("button", __assign({ className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return setCurrent(max - 2); } }, { children: max - 2 })), jsx("button", __assign({ className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return setCurrent(max - 1); } }, { children: max - 1 })), jsx("button", __assign({ className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return setCurrent(max); } }, { children: max }))] }));
             break;
     }
     useEffect(function () {
@@ -1072,7 +974,7 @@ var PagePaginationNavigation = function (props) {
             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 })] })) }))] })));
+    return (jsxs("nav", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.left.container }, { children: jsxs("button", __assign({ className: toClassName(styles.left.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsx(ArrowLongLeftIcon, { className: styles.left.icon }), "Previous"] })) })), jsx("div", __assign({ className: styles.center.container }, { children: component })), jsx("div", __assign({ className: styles.right.container }, { children: jsxs("button", __assign({ className: toClassName(styles.right.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: ["Next", jsx(ArrowLongRightIcon, { className: styles.right.icon })] })) }))] })));
 };
 var styles$6 = {
@@ -1099,55 +1001,35 @@ var styles$6 = {
 };
 var Container$2 = function (props) {
-    var children = props.children, customStyles = props.styles;
+    var children = props.children, stylesOverrides = 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),
+        root: toClassName(styles$5.root, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.root),
+        panel: toClassName(styles$5.panel, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.panel),
+        container: toClassName(styles$5.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
+        content: toClassName(styles$5.content, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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(' ');
-    }, []);
+    var children = props.children, setActive = props.setActive, stylesOverrides = props.styles;
     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; });
+        var tab;
+        var tabs = Children.map(children, function (child) { return child; });
+        var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
         if (initialTab !== undefined) {
             tab = initialTab;
         }
+        else {
+            tab = tabs[0];
+        }
         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 })));
+    return (jsx("nav", __assign({ className: toClassName(styles$5.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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 children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
+    return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$5.item[isCurrent ? 'active' : '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;
@@ -1174,16 +1056,16 @@ var styles$5 = {
 };
 var Container$1 = function (props) {
-    var children = props.children, customStyles = props.styles;
+    var children = props.children, stylesOverrides = 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 }) })));
+    return (jsx("div", __assign({ className: stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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 children = props.children, active = props.active, setActive = props.setActive, stylesOverrides = 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; });
+        var _a, _b;
+        var key = (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+        var tab = (_b = Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.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;
         }
@@ -1191,40 +1073,26 @@ var List$1 = function (props) {
             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; });
+        var tab;
+        var tabs = Children.map(children, function (child) { return child; });
+        var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
         if (initialTab !== undefined) {
             tab = initialTab;
         }
+        else {
+            tab = tabs[0];
+        }
         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) {
+    }, []);
+    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, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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 })) }))] }));
+                        }) }))] })), jsx("div", __assign({ className: "hidden sm:block" }, { children: jsx("nav", __assign({ className: toClassName(styles$4.navigation, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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 children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, _b = props.linkComponent, LinkComponent = _b === void 0 ? 'a' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
+    return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$4.tab[type][isCurrent ? 'active' : 'notActive'], styles$4.tab[type].base), onClick: onClick }, { children: children })));
 };
 var View$1 = function (props) {
     var children = props.children;
@@ -1261,42 +1129,29 @@ var styles$4 = {
 };
 var Container = function (props) {
-    var children = props.children, customStyles = props.styles;
+    var children = props.children, stylesOverrides = 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 }) })));
+    return (jsx("div", __assign({ className: stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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(' ');
-    }, []);
+    var children = props.children, setActive = props.setActive, stylesOverrides = props.styles;
     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; });
+        var tab;
+        var tabs = Children.map(children, function (child) { return child; });
+        var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
         if (initialTab !== undefined) {
             tab = initialTab;
         }
+        else {
+            tab = tabs[0];
+        }
         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 })));
+    return (jsx("nav", __assign({ className: toClassName(styles$3.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.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 children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
+    return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$3.item[isCurrent ? 'active' : 'notActive'], styles$3.item.base), onClick: onClick }, { children: children })));
 };
 var View = function (props) {
     var children = props.children;
@@ -1320,52 +1175,28 @@ var styles$3 = {
 };
 var ModalOverlay = function (props) {
-    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = 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),
-                },
-            },
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$2);
+        var customStyles = {
+            'panel.container': size && styles$2[size],
+        };
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$2,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
         });
-    }, []);
-    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)] }));
+        return styles;
+    }, [size, stylesOverrides]);
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo }, { children: jsx("div", { className: styles.background.container }) })), jsx("div", __assign({ className: styles.layout.container }, { children: jsx("div", __assign({ className: styles.layout.content }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };
 var styles$2 = {
@@ -1404,60 +1235,43 @@ var styles$2 = {
 };
 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),
+    var children = _a.children, stylesOverrides = _a.styles;
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$1.container);
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$1,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+            });
         });
-    }, []);
-    return (jsx("div", __assign({ "aria-live": "assertive", className: style.outer }, { children: jsx("div", __assign({ className: style.inner }, { children: children })) })));
+        return styles;
+    }, [stylesOverrides]);
+    return (jsx("div", __assign({ "aria-live": "assertive", className: styles.outer }, { children: jsx("div", __assign({ className: styles.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 children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = 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),
-                },
-            },
+    var styles = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles$1.item);
+        var customStyles = {
+            'panel.container': size && styles$1[size],
+        };
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles$1.item,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
         });
-    }, []);
-    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)] }));
+        return styles;
+    }, [size, stylesOverrides]);
+    return (jsxs(Fragment$1, { children: [jsx(Transition, __assign({ show: isOpen, as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo }, { children: jsx("div", __assign({ className: styles.panel.container }, { children: children(options) })) })), trigger && trigger(options)] }));
 };
 var NotificationOverlay = {
     Container: NotificationOverlayContainer,
@@ -1496,53 +1310,28 @@ var styles$1 = {
 };
 var SlideOverOverlay = function (props) {
-    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = 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),
-                },
-            },
+    var styles$1 = useMemo(function () {
+        var styleKeys = calculateNestedKeys(styles);
+        var customStyles = {
+            'panel.container': size && styles[size],
+        };
+        styleKeys.forEach(function (key) {
+            toMergedClasses({
+                styles: styles,
+                stylesOverrides: stylesOverrides,
+                identifier: key,
+                customStyles: get(customStyles, key),
+            });
         });
-    }, []);
-    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)] }));
+        return styles$1;
+    }, [size, stylesOverrides]);
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles$1.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: styles$1.background.transition.enter, enterFrom: styles$1.background.transition.enterFrom, enterTo: styles$1.background.transition.enterTo, leave: styles$1.background.transition.leave, leaveFrom: styles$1.background.transition.leaveFrom, leaveTo: styles$1.background.transition.leaveTo }, { children: jsx("div", { className: styles$1.background.container }) })), jsx("div", __assign({ className: styles$1.layout.container }, { children: jsx("div", __assign({ className: styles$1.layout.content }, { children: jsx("div", __assign({ className: styles$1.layout.inner }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: styles$1.panel.transition.enter, enterFrom: styles$1.panel.transition.enterFrom, enterTo: styles$1.panel.transition.enterTo, leave: styles$1.panel.transition.leave, leaveFrom: styles$1.panel.transition.leaveFrom, leaveTo: styles$1.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: styles$1.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };
 var styles = {