@ballistix.digital/react-components 0.2.0 → 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
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.esm.js +284 -497
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +284 -496
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -5,11 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var solid = require('@heroicons/react/20/solid');
7
7
  var React = require('react');
8
+ var get = require('lodash/get');
8
9
  var react = require('@headlessui/react');
9
10
 
10
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
12
 
12
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
+ var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
13
15
 
14
16
  /******************************************************************************
15
17
  Copyright (c) Microsoft Corporation.
@@ -37,31 +39,32 @@ var __assign = function() {
37
39
  return __assign.apply(this, arguments);
38
40
  };
39
41
 
42
+ var toClassName = function () {
43
+ var values = [];
44
+ for (var _i = 0; _i < arguments.length; _i++) {
45
+ values[_i] = arguments[_i];
46
+ }
47
+ return values.filter(Boolean).join(' ');
48
+ };
49
+
40
50
  var AvatarElement = function (props) {
41
51
  var src = props.src, placeholder = props.placeholder,
42
52
  // alt = 'avatar',
43
- 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;
44
- var toClassName = React.useCallback(function () {
45
- var values = [];
46
- for (var _i = 0; _i < arguments.length; _i++) {
47
- values[_i] = arguments[_i];
48
- }
49
- return values.filter(Boolean).join(' ');
50
- }, []);
53
+ 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;
51
54
  var style = React.useMemo(function () { return ({
52
- 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),
53
- 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),
54
- 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),
55
- 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),
56
- 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),
57
- 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),
55
+ 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),
56
+ 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),
57
+ 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),
58
+ 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),
59
+ 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),
60
+ 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),
58
61
  }); }, [
59
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
60
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.empty,
61
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator,
62
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.loading,
63
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.placeholder,
64
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.spinner,
62
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
63
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.empty,
64
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.indicator,
65
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.loading,
66
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.placeholder,
67
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.spinner,
65
68
  figure,
66
69
  isDisabled,
67
70
  isLoading,
@@ -81,7 +84,7 @@ var AvatarElement = function (props) {
81
84
  return (jsxRuntime.jsx("a", __assign({ href: url }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxRuntime.jsxs("span", __assign({ className: "inline-block relative" }, { children: [jsxRuntime.jsx("div", { className: style.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsxRuntime.jsx("span", { className: style.indicator })] })), children && jsxRuntime.jsx("div", __assign({ className: "ml-3" }, { children: children }))] })) })));
82
85
  };
83
86
 
84
- var base$5 = {
87
+ var base$4 = {
85
88
  loading: 'inline-block relative overflow-hidden bg-gray-50 flex items-center justify-center',
86
89
  empty: 'inline-block relative overflow-hidden bg-gray-50 text-red-400',
87
90
  placeholder: 'relative inline-flex items-center justify-center bg-gray-500',
@@ -129,7 +132,7 @@ var indicator$1 = {
129
132
  blocked: 'bg-red-400',
130
133
  };
131
134
  var styles$h = {
132
- base: base$5,
135
+ base: base$4,
133
136
  xs: xs$1,
134
137
  sm: sm$2,
135
138
  md: md$1,
@@ -143,29 +146,14 @@ var styles$h = {
143
146
  };
144
147
 
145
148
  var ButtonElement = function (props) {
146
- 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;
147
- var toClassName = React.useCallback(function () {
148
- var values = [];
149
- for (var _i = 0; _i < arguments.length; _i++) {
150
- values[_i] = arguments[_i];
151
- }
152
- return values.filter(Boolean).join(' ');
153
- }, []);
149
+ 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;
154
150
  var style = React.useMemo(function () { return ({
155
- 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),
156
- }); }, [
157
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
158
- figure,
159
- isDisabled,
160
- size,
161
- status,
162
- toClassName,
163
- type,
164
- ]);
151
+ 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),
152
+ }); }, [stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container, figure, isDisabled, size, status, type]);
165
153
  return (jsxRuntime.jsxs("button", __assign({ type: "button", className: style.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: ref }, { children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsxRuntime.jsx(solid.ArrowPathIcon, { className: styles$g.base.spinner }), jsxRuntime.jsx("p", { children: "Loading..." })] }))), status === 'error' && (jsxRuntime.jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: styles$g.base.icon }), jsxRuntime.jsx("p", { children: "Oops" })] }))), status === 'success' && (jsxRuntime.jsxs("div", __assign({ className: styles$g.base.loading }, { children: [jsxRuntime.jsx(solid.CheckIcon, { className: styles$g.base.icon }), jsxRuntime.jsx("p", { children: "Success" })] })))] })));
166
154
  };
167
155
 
168
- var base$4 = {
156
+ var base$3 = {
169
157
  container: 'inline-flex items-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
170
158
  loading: 'flex gap-2',
171
159
  icon: 'w-5',
@@ -217,7 +205,7 @@ var disabled$1 = {
217
205
  container: 'opacity-20 cursor-not-allowed',
218
206
  };
219
207
  var styles$g = {
220
- base: base$4,
208
+ base: base$3,
221
209
  primary: primary$1,
222
210
  secondary: secondary$1,
223
211
  outline: outline$1,
@@ -235,69 +223,76 @@ var styles$g = {
235
223
  disabled: disabled$1,
236
224
  };
237
225
 
238
- var ButtonGroupElement = function (props) {
239
- var children = props.children, customStyles = props.styles;
240
- var toClassName = React.useCallback(function () {
241
- var values = [];
242
- for (var _i = 0; _i < arguments.length; _i++) {
243
- values[_i] = arguments[_i];
226
+ var calculateNestedKeys = function (obj, prefix) {
227
+ if (prefix === void 0) { prefix = ''; }
228
+ return Object.keys(obj).reduce(function (acc, k) {
229
+ var pre = prefix.length ? "".concat(prefix, ".") : '';
230
+ // decide to traverse deeper into the object, or just push the key and move on
231
+ if (typeof obj[k] === 'object') {
232
+ acc.push.apply(acc, calculateNestedKeys(obj[k], pre + k));
244
233
  }
245
- return values.filter(Boolean).join(' ');
234
+ else {
235
+ acc.push(pre + k);
236
+ }
237
+ return acc;
246
238
  }, []);
247
- var style = React.useMemo(function () { return ({
248
- container: toClassName(styles$f.base.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
249
- firstButton: toClassName(styles$f.base.firstButton, customStyles === null || customStyles === void 0 ? void 0 : customStyles.firstButton),
250
- button: toClassName(styles$f.base.button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
251
- lastButton: toClassName(styles$f.base.lastButton, customStyles === null || customStyles === void 0 ? void 0 : customStyles.lastButton),
252
- }); }, [
253
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.button,
254
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
255
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.firstButton,
256
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.lastButton,
257
- toClassName,
258
- ]);
259
- return (jsxRuntime.jsx("span", __assign({ className: style.container }, { children: React.Children.map(children, function (child, index) {
239
+ };
240
+
241
+ var toMergedClasses = function (_a) {
242
+ var styles = _a.styles, stylesOverrides = _a.stylesOverrides, customStyles = _a.customStyles, identifier = _a.identifier, type = _a.type;
243
+ return toClassName(get__default["default"](type ? get__default["default"](styles, type) : styles, identifier), get__default["default"](type ? get__default["default"](stylesOverrides, type) : stylesOverrides, identifier), customStyles);
244
+ };
245
+
246
+ var ButtonGroupElement = function (props) {
247
+ var children = props.children, stylesOverrides = props.styles;
248
+ var styles = React.useMemo(function () {
249
+ var styleKeys = calculateNestedKeys(styles$f);
250
+ var customStyles = {};
251
+ styleKeys.forEach(function (key) {
252
+ toMergedClasses({
253
+ styles: styles$f,
254
+ stylesOverrides: stylesOverrides,
255
+ identifier: key,
256
+ customStyles: get__default["default"](customStyles, key),
257
+ });
258
+ });
259
+ return styles;
260
+ }, [stylesOverrides]);
261
+ return (jsxRuntime.jsx("span", __assign({ className: styles.container }, { children: React.Children.map(children, function (child, index) {
260
262
  var _a;
261
- var className = style.button;
263
+ var className = styles.button;
262
264
  if (index === 0) {
263
- className = style.firstButton;
265
+ className = styles.firstButton;
264
266
  }
265
267
  if (index === children.length - 1) {
266
- className = style.lastButton;
268
+ className = styles.lastButton;
267
269
  }
268
270
  return (jsxRuntime.jsx("button", __assign({ className: className }, { children: child }), (_a = child.key) !== null && _a !== void 0 ? _a : index));
269
271
  }) })));
270
272
  };
271
273
 
272
- var base$3 = {
274
+ var styles$f = {
273
275
  container: 'relative z-0 inline-flex shadow-sm rounded-md',
274
276
  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',
275
277
  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',
276
278
  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',
277
- };
278
- var styles$f = { base: base$3 };
279
+ };
279
280
 
280
281
  var Container$4 = function (props) {
281
- 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;
282
- var toClassName = React.useCallback(function () {
283
- var values = [];
284
- for (var _i = 0; _i < arguments.length; _i++) {
285
- values[_i] = arguments[_i];
286
- }
287
- return values.filter(Boolean).join(' ');
288
- }, []);
282
+ 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;
283
+ // TODO: update to mergedClassnames
289
284
  var style = React.useMemo(function () { return ({
290
- container: toClassName(styles$e.base.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
291
- button: toClassName(styles$e.base.button, customStyles === null || customStyles === void 0 ? void 0 : customStyles.button),
292
- compact: toClassName(styles$e.base.compact, customStyles === null || customStyles === void 0 ? void 0 : customStyles.compact),
293
- dots: toClassName(styles$e.base.dots, customStyles === null || customStyles === void 0 ? void 0 : customStyles.dots),
294
- 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),
285
+ container: toClassName(styles$e.base.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
286
+ button: toClassName(styles$e.base.button, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button),
287
+ compact: toClassName(styles$e.base.compact, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.compact),
288
+ dots: toClassName(styles$e.base.dots, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.dots),
289
+ 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),
295
290
  }); }, [
296
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.button,
297
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.compact,
298
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
299
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.dots,
300
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.items,
291
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button,
292
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.compact,
293
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
294
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.dots,
295
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.items,
301
296
  direction,
302
297
  toClassName,
303
298
  ]);
@@ -328,28 +323,20 @@ var styles$e = {
328
323
  };
329
324
 
330
325
  var BadgeElement = function (props) {
331
- 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;
332
- var toClassName = React.useCallback(function () {
333
- var values = [];
334
- for (var _i = 0; _i < arguments.length; _i++) {
335
- values[_i] = arguments[_i];
336
- }
337
- return values.filter(Boolean).join(' ');
338
- }, []);
326
+ 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;
339
327
  var style = React.useMemo(function () { return ({
340
- 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),
341
- indicator: toClassName(color && styles$d[color].indicator, size && styles$d[size].indicator, customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator),
342
- 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),
328
+ 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),
329
+ indicator: toClassName(color && styles$d[color].indicator, size && styles$d[size].indicator, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.indicator),
330
+ 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),
343
331
  }); }, [
344
332
  color,
345
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.button,
346
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
347
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.indicator,
333
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button,
334
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
335
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.indicator,
348
336
  figure,
349
337
  isDisabled,
350
338
  isLoading,
351
339
  size,
352
- toClassName,
353
340
  type,
354
341
  ]);
355
342
  if (isLoading) {
@@ -462,41 +449,35 @@ var styles$d = {
462
449
  };
463
450
 
464
451
  var ContainerLayout = function (props) {
465
- var children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, customStyles = props.styles;
466
- var toClassName = React.useCallback(function () {
467
- var values = [];
468
- for (var _i = 0; _i < arguments.length; _i++) {
469
- values[_i] = arguments[_i];
470
- }
471
- return values.filter(Boolean).join(' ');
472
- }, []);
473
- var style = React.useMemo(function () { return ({
474
- break: {
475
- container: toClassName(initialStyles.break.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
476
- },
477
- center: {
478
- container: toClassName(initialStyles.center.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
479
- content: toClassName(initialStyles.center.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
480
- },
481
- fill: {
482
- container: toClassName(initialStyles.fill.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
483
- },
484
- }); }, [customStyles]);
452
+ var children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, stylesOverrides = props.styles;
453
+ var styles = React.useMemo(function () {
454
+ var styleKeys = calculateNestedKeys(initialStyles);
455
+ var customStyles = {};
456
+ styleKeys.forEach(function (key) {
457
+ toMergedClasses({
458
+ styles: initialStyles,
459
+ stylesOverrides: stylesOverrides,
460
+ identifier: key,
461
+ customStyles: get__default["default"](customStyles, key),
462
+ });
463
+ });
464
+ return styles;
465
+ }, [stylesOverrides]);
485
466
  var $component = React.useMemo(function () {
486
467
  var result;
487
468
  switch (type) {
488
469
  case 'break':
489
- result = jsxRuntime.jsx("div", __assign({ className: style.break.container }, { children: children }));
470
+ result = jsxRuntime.jsx("div", __assign({ className: styles.break.container }, { children: children }));
490
471
  break;
491
472
  case 'center':
492
- result = (jsxRuntime.jsx("div", __assign({ className: style.center.container }, { children: jsxRuntime.jsx("div", __assign({ className: style.center.content }, { children: children })) })));
473
+ result = (jsxRuntime.jsx("div", __assign({ className: styles.center.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.center.content }, { children: children })) })));
493
474
  break;
494
475
  case 'fill':
495
- result = jsxRuntime.jsx("div", __assign({ className: style.fill.container }, { children: children }));
476
+ result = jsxRuntime.jsx("div", __assign({ className: styles.fill.container }, { children: children }));
496
477
  break;
497
478
  }
498
479
  return result;
499
- }, [style]);
480
+ }, [children, styles, type]);
500
481
  return $component;
501
482
  };
502
483
 
@@ -517,30 +498,21 @@ var initialStyles = {
517
498
  };
518
499
 
519
500
  var DividerLayout = function (props) {
520
- var children = props.children, _a = props.type, type = _a === void 0 ? 'left' : _a, customStyles = props.styles;
521
- var toClassName = React.useCallback(function () {
522
- var values = [];
523
- for (var _i = 0; _i < arguments.length; _i++) {
524
- values[_i] = arguments[_i];
525
- }
526
- return values.filter(Boolean).join(' ');
527
- }, []);
528
- var style = React.useMemo(function () { return ({
529
- container: toClassName(styles$c.base.container, type && styles$c[type].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
530
- head: toClassName(styles$c.base.head, type && styles$c[type].head, customStyles === null || customStyles === void 0 ? void 0 : customStyles.head),
531
- line: toClassName(styles$c.base.line, type && styles$c[type].line, customStyles === null || customStyles === void 0 ? void 0 : customStyles.line),
532
- body: toClassName(styles$c.base.body, type && styles$c[type].body, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body),
533
- content: toClassName(styles$c.base.content, type && styles$c[type].content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
534
- }); }, [
535
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
536
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
537
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
538
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.head,
539
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.line,
540
- toClassName,
541
- type,
542
- ]);
543
- return (jsxRuntime.jsxs("div", __assign({ className: style.container }, { children: [jsxRuntime.jsx("div", __assign({ className: style.head, "aria-hidden": "true" }, { children: jsxRuntime.jsx("div", { className: style.line }) })), jsxRuntime.jsx("div", __assign({ className: style.body }, { children: jsxRuntime.jsx("div", __assign({ className: style.content }, { children: children })) }))] })));
501
+ var children = props.children; props.type; var stylesOverrides = props.styles;
502
+ var styles = React.useMemo(function () {
503
+ var styleKeys = calculateNestedKeys(styles$c);
504
+ var customStyles = {};
505
+ styleKeys.forEach(function (key) {
506
+ toMergedClasses({
507
+ styles: styles$c,
508
+ stylesOverrides: stylesOverrides,
509
+ identifier: key,
510
+ customStyles: get__default["default"](customStyles, key),
511
+ });
512
+ });
513
+ return styles;
514
+ }, [stylesOverrides]);
515
+ return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles.head, "aria-hidden": "true" }, { children: jsxRuntime.jsx("div", { className: styles.line }) })), jsxRuntime.jsx("div", __assign({ className: styles.body }, { children: jsxRuntime.jsx("div", __assign({ className: styles.content }, { children: children })) }))] })));
544
516
  };
545
517
 
546
518
  var base$1 = {
@@ -580,33 +552,25 @@ var styles$c = {
580
552
 
581
553
  var ListContainerLayout = function (props) {
582
554
  var _a;
583
- var children = props.children, _b = props.type, type = _b === void 0 ? 'fill' : _b, customStyles = props.styles;
555
+ var children = props.children, _b = props.type, type = _b === void 0 ? 'fill' : _b, stylesOverrides = props.styles;
584
556
  var isSticky = type.includes('-sticky');
585
557
  var selector = isSticky ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0] : type;
586
- var toClassName = React.useCallback(function () {
587
- var values = [];
588
- for (var _i = 0; _i < arguments.length; _i++) {
589
- values[_i] = arguments[_i];
590
- }
591
- return values.filter(Boolean).join(' ');
592
- }, []);
593
558
  var style = React.useMemo(function () { return ({
594
559
  container: toClassName(isSticky
595
560
  ? styles$b["".concat(selector, "_sticky")].container
596
- : styles$b[selector].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
561
+ : styles$b[selector].container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
597
562
  list: toClassName(isSticky
598
563
  ? styles$b["".concat(selector, "_sticky")].list
599
- : styles$b[selector].list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list),
564
+ : styles$b[selector].list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list),
600
565
  item: toClassName(isSticky
601
566
  ? styles$b["".concat(selector, "_sticky")].item
602
- : styles$b[selector].item, customStyles === null || customStyles === void 0 ? void 0 : customStyles.item),
567
+ : styles$b[selector].item, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.item),
603
568
  }); }, [
604
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
605
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.item,
606
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.list,
569
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container,
570
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.item,
571
+ stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list,
607
572
  isSticky,
608
573
  selector,
609
- toClassName,
610
574
  ]);
611
575
  return (jsxRuntime.jsx("div", __assign({ className: style.container }, { children: jsxRuntime.jsx("ul", __assign({ className: style.list }, { children: React.Children.map(children, function (child, index) {
612
576
  var _a;
@@ -651,42 +615,34 @@ var styles$b = {
651
615
 
652
616
  var MediaObjectLayout = function (props) {
653
617
  var _a;
654
- var title = props.title, paragraph = props.paragraph, customFigure = props.figure, _b = props.type, type = _b === void 0 ? 'top' : _b, customStyles = props.styles;
618
+ var title = props.title, paragraph = props.paragraph, customFigure = props.figure, _b = props.type, type = _b === void 0 ? 'top' : _b, stylesOverrides = props.styles;
655
619
  var isReversed = type.includes('-reversed');
656
- var selector = isReversed ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0] : type;
657
- var toClassName = React.useCallback(function () {
658
- var values = [];
659
- for (var _i = 0; _i < arguments.length; _i++) {
660
- values[_i] = arguments[_i];
661
- }
662
- return values.filter(Boolean).join(' ');
663
- }, []);
664
- var style = React.useMemo(function () { return ({
665
- container: toClassName(styles$a[selector].container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, isReversed && 'flex-row-reverse'),
666
- figure: toClassName(styles$a[selector].figure, customStyles === null || customStyles === void 0 ? void 0 : customStyles.figure),
667
- svg: toClassName(styles$a[selector].svg, customStyles === null || customStyles === void 0 ? void 0 : customStyles.svg),
668
- title: toClassName(styles$a[selector].title, customStyles === null || customStyles === void 0 ? void 0 : customStyles.title),
669
- paragraph: toClassName(styles$a[selector].paragraph, customStyles === null || customStyles === void 0 ? void 0 : customStyles.paragraph),
670
- }); }, [
671
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
672
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.figure,
673
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.paragraph,
674
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.svg,
675
- customStyles === null || customStyles === void 0 ? void 0 : customStyles.title,
676
- isReversed,
677
- selector,
678
- toClassName,
679
- ]);
620
+ isReversed
621
+ ? (_a = type === null || type === void 0 ? void 0 : type.split('-')) === null || _a === void 0 ? void 0 : _a[0]
622
+ : type;
623
+ var styles = React.useMemo(function () {
624
+ var styleKeys = calculateNestedKeys(styles$a[type]);
625
+ var customStyles = {};
626
+ styleKeys.forEach(function (key) {
627
+ toMergedClasses({
628
+ styles: styles$a[type],
629
+ stylesOverrides: stylesOverrides,
630
+ identifier: key,
631
+ customStyles: get__default["default"](customStyles, key),
632
+ });
633
+ });
634
+ return styles;
635
+ }, [stylesOverrides, type]);
680
636
  var $svg = React.useMemo(function () {
681
- var result = (jsxRuntime.jsx("svg", __assign({ className: style.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) })));
637
+ var result = (jsxRuntime.jsx("svg", __assign({ className: styles.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) })));
682
638
  if (customFigure) {
683
639
  result = React__default["default"].cloneElement(customFigure, {
684
- className: style.svg,
640
+ className: styles.svg,
685
641
  });
686
642
  }
687
643
  return result;
688
- }, [customFigure, style.svg]);
689
- return (jsxRuntime.jsxs("div", __assign({ className: style.container }, { children: [jsxRuntime.jsx("div", __assign({ className: style.figure }, { children: $svg })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", __assign({ className: style.title }, { children: title })), jsxRuntime.jsx("p", __assign({ className: style.paragraph }, { children: paragraph }))] })] })));
644
+ }, [customFigure, styles.svg]);
645
+ return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles.figure }, { children: $svg })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", __assign({ className: styles.title }, { children: title })), jsxRuntime.jsx("p", __assign({ className: styles.paragraph }, { children: paragraph }))] })] })));
690
646
  };
691
647
 
692
648
  var base = {
@@ -748,7 +704,7 @@ var styles$a = {
748
704
  };
749
705
 
750
706
  var Container$3 = function (props) {
751
- var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, customStyles = props.styles;
707
+ var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, stylesOverrides = props.styles;
752
708
  var typeStyle = React.useMemo(function () {
753
709
  var result;
754
710
  switch (type) {
@@ -761,30 +717,16 @@ var Container$3 = function (props) {
761
717
  }
762
718
  return result;
763
719
  }, [type]);
764
- var toClassName = React.useCallback(function () {
765
- var values = [];
766
- for (var _i = 0; _i < arguments.length; _i++) {
767
- values[_i] = arguments[_i];
768
- }
769
- return values.filter(Boolean).join(' ');
770
- }, []);
771
720
  var style = React.useMemo(function () { return ({
772
- container: toClassName(styles$9.container, typeStyle, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
773
- }); }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, toClassName, typeStyle]);
721
+ container: toClassName(styles$9.container, typeStyle, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
722
+ }); }, [stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container, typeStyle]);
774
723
  return jsxRuntime.jsx("div", __assign({ className: style.container }, { children: children }));
775
724
  };
776
725
  var Section = function (props) {
777
- var children = props.children, customStyles = props.styles;
778
- var toClassName = React.useCallback(function () {
779
- var values = [];
780
- for (var _i = 0; _i < arguments.length; _i++) {
781
- values[_i] = arguments[_i];
782
- }
783
- return values.filter(Boolean).join(' ');
784
- }, []);
726
+ var children = props.children, stylesOverrides = props.styles;
785
727
  var style = React.useMemo(function () { return ({
786
- container: toClassName(styles$9.section, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
787
- }); }, [customStyles === null || customStyles === void 0 ? void 0 : customStyles.container, toClassName]);
728
+ container: toClassName(styles$9.section, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
729
+ }); }, [stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container]);
788
730
  return jsxRuntime.jsx("div", __assign({ className: style.container }, { children: children }));
789
731
  };
790
732
  var LayoutPanel = {
@@ -798,63 +740,50 @@ var styles$9 = {
798
740
  };
799
741
 
800
742
  var BreadcrumbsNavigation = function (props) {
801
- 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;
802
- var toClassName = React.useCallback(function () {
803
- var values = [];
804
- for (var _i = 0; _i < arguments.length; _i++) {
805
- values[_i] = arguments[_i];
806
- }
807
- return values.filter(Boolean).join(' ');
808
- }, []);
809
- var style = React.useMemo(function () {
810
- 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;
811
- return ({
812
- 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),
813
- 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),
814
- 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),
815
- home: {
816
- 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),
817
- 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),
818
- 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),
819
- 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),
820
- 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),
821
- },
822
- page: {
823
- 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),
824
- 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),
825
- 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),
826
- },
743
+ 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;
744
+ var styles = React.useMemo(function () {
745
+ var styleKeys = calculateNestedKeys(styles$8);
746
+ var customStyles = {};
747
+ styleKeys.forEach(function (key) {
748
+ toMergedClasses({
749
+ styles: styles$8,
750
+ stylesOverrides: stylesOverrides,
751
+ identifier: key,
752
+ type: type,
753
+ customStyles: get__default["default"](customStyles, key),
754
+ });
827
755
  });
828
- }, [customStyles, toClassName, type]);
756
+ return styles;
757
+ }, [stylesOverrides, type]);
829
758
  var separator = React.useMemo(function () {
830
759
  var component;
831
760
  switch (type) {
832
761
  case 'slashes':
833
- component = (jsxRuntime.jsx("svg", __assign({ className: style.separator, fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }) })));
762
+ component = (jsxRuntime.jsx("svg", __assign({ className: styles.separator, fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }) })));
834
763
  break;
835
764
  case 'chevrons':
836
- component = (jsxRuntime.jsx(solid.ChevronRightIcon, { className: style.separator, "aria-hidden": "true" }));
765
+ component = (jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.separator, "aria-hidden": "true" }));
837
766
  break;
838
767
  case 'panel':
839
- component = (jsxRuntime.jsx("svg", __assign({ className: style.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" }) })));
768
+ component = (jsxRuntime.jsx("svg", __assign({ className: styles.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" }) })));
840
769
  break;
841
770
  case 'bar':
842
- component = (jsxRuntime.jsx("svg", __assign({ className: style.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" }) })));
771
+ component = (jsxRuntime.jsx("svg", __assign({ className: styles.separator, viewBox: "0 0 24 44", preserveAspectRatio: "none", fill: "currentColor", "aria-hidden": "true" }, { children: jsxRuntime.jsx("path", { d: "M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" }) })));
843
772
  break;
844
773
  }
845
774
  if (customSeparator) {
846
775
  component = customSeparator;
847
776
  }
848
777
  return component;
849
- }, [customSeparator, style.separator, type]);
778
+ }, [customSeparator, styles.separator, type]);
850
779
  var HomeLink = function () {
851
- return (jsxRuntime.jsx("li", __assign({ className: style.home.container }, { children: jsxRuntime.jsx("div", __assign({ className: style.home.content }, { children: jsxRuntime.jsxs("a", __assign({ href: href, className: style.home.link }, { children: [jsxRuntime.jsx(solid.HomeIcon, { className: style.home.icon, "aria-hidden": "true" }), jsxRuntime.jsx("span", __assign({ className: style.home.span }, { children: "Home" }))] })) })) })));
780
+ return (jsxRuntime.jsx("li", __assign({ className: styles.home.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.home.content }, { children: jsxRuntime.jsxs("a", __assign({ href: href, className: styles.home.link }, { children: [jsxRuntime.jsx(solid.HomeIcon, { className: styles.home.icon, "aria-hidden": "true" }), jsxRuntime.jsx("span", __assign({ className: styles.home.span }, { children: "Home" }))] })) })) })));
852
781
  };
853
782
  var PageLink = function (props) {
854
783
  var page = props.page;
855
- return (jsxRuntime.jsx("li", __assign({ className: style.page.container }, { children: jsxRuntime.jsxs("div", __assign({ className: style.page.content }, { children: [separator, jsxRuntime.jsx("a", __assign({ href: page.href, className: style.page.link, "aria-current": page.isCurrent ? 'page' : undefined }, { children: page.name }))] })) }), page.name));
784
+ return (jsxRuntime.jsx("li", __assign({ className: styles.page.container }, { children: jsxRuntime.jsxs("div", __assign({ className: styles.page.content }, { children: [separator, jsxRuntime.jsx("a", __assign({ href: page.href, className: styles.page.link, "aria-current": page.isCurrent ? 'page' : undefined }, { children: page.name }))] })) }), page.name));
856
785
  };
857
- return (jsxRuntime.jsx("nav", __assign({ className: style.container, "aria-label": "Breadcrumb" }, { children: jsxRuntime.jsxs("ol", __assign({ className: style.list }, { children: [jsxRuntime.jsx(HomeLink, {}), pages.map(function (page) { return (jsxRuntime.jsx(PageLink, { page: page }, page.name)); })] })) })));
786
+ return (jsxRuntime.jsx("nav", __assign({ className: styles.container, "aria-label": "Breadcrumb" }, { children: jsxRuntime.jsxs("ol", __assign({ className: styles.list }, { children: [jsxRuntime.jsx(HomeLink, {}), pages.map(function (page) { return (jsxRuntime.jsx(PageLink, { page: page }, page.name)); })] })) })));
858
787
  };
859
788
 
860
789
  var slashes = {
@@ -933,37 +862,30 @@ var styles$8 = {
933
862
  };
934
863
 
935
864
  var PanelPaginationNavigation = function (props) {
936
- 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;
865
+ 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;
937
866
  var _c = React.useState(2), current = _c[0], setCurrent = _c[1];
938
- var toClassName = React.useCallback(function () {
939
- var values = [];
940
- for (var _i = 0; _i < arguments.length; _i++) {
941
- values[_i] = arguments[_i];
942
- }
943
- return values.filter(Boolean).join(' ');
944
- }, []);
945
867
  var style = React.useMemo(function () {
946
868
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
947
869
  return ({
948
- container: toClassName(styles$7.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
870
+ container: toClassName(styles$7.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
949
871
  mobile: {
950
- container: toClassName(styles$7.mobile.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.mobile) === null || _a === void 0 ? void 0 : _a.container),
951
- button: toClassName(styles$7.mobile.button, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.mobile) === null || _b === void 0 ? void 0 : _b.button),
872
+ container: toClassName(styles$7.mobile.container, (_a = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.mobile) === null || _a === void 0 ? void 0 : _a.container),
873
+ button: toClassName(styles$7.mobile.button, (_b = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.mobile) === null || _b === void 0 ? void 0 : _b.button),
952
874
  },
953
875
  desktop: {
954
- container: toClassName(styles$7.desktop.container, (_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _c === void 0 ? void 0 : _c.container),
955
- leftButton: toClassName(styles$7.desktop.leftButton, (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _d === void 0 ? void 0 : _d.leftButton),
956
- rightButton: toClassName(styles$7.desktop.rightButton, (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _e === void 0 ? void 0 : _e.rightButton),
957
- navigation: toClassName(styles$7.desktop.navigation, (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.desktop) === null || _f === void 0 ? void 0 : _f.navigation),
876
+ container: toClassName(styles$7.desktop.container, (_c = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.desktop) === null || _c === void 0 ? void 0 : _c.container),
877
+ leftButton: toClassName(styles$7.desktop.leftButton, (_d = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.desktop) === null || _d === void 0 ? void 0 : _d.leftButton),
878
+ rightButton: toClassName(styles$7.desktop.rightButton, (_e = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.desktop) === null || _e === void 0 ? void 0 : _e.rightButton),
879
+ navigation: toClassName(styles$7.desktop.navigation, (_f = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.desktop) === null || _f === void 0 ? void 0 : _f.navigation),
958
880
  },
959
881
  button: {
960
- default: toClassName(styles$7.button.default, (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _g === void 0 ? void 0 : _g.default),
961
- active: toClassName(styles$7.button.active, (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _h === void 0 ? void 0 : _h.active),
962
- disabled: toClassName(styles$7.button.disabled, (_j = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _j === void 0 ? void 0 : _j.disabled),
882
+ default: toClassName(styles$7.button.default, (_g = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button) === null || _g === void 0 ? void 0 : _g.default),
883
+ active: toClassName(styles$7.button.active, (_h = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button) === null || _h === void 0 ? void 0 : _h.active),
884
+ disabled: toClassName(styles$7.button.disabled, (_j = stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.button) === null || _j === void 0 ? void 0 : _j.disabled),
963
885
  },
964
- divider: toClassName(styles$7.divider, customStyles === null || customStyles === void 0 ? void 0 : customStyles.divider),
965
- label: toClassName(styles$7.label, customStyles === null || customStyles === void 0 ? void 0 : customStyles.label),
966
- icon: toClassName(styles$7.icon, customStyles === null || customStyles === void 0 ? void 0 : customStyles.icon),
886
+ divider: toClassName(styles$7.divider, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.divider),
887
+ label: toClassName(styles$7.label, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.label),
888
+ icon: toClassName(styles$7.icon, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.icon),
967
889
  });
968
890
  }, []);
969
891
  var pageType = React.useMemo(function () {
@@ -1019,40 +941,21 @@ var styles$7 = {
1019
941
  };
1020
942
 
1021
943
  var PagePaginationNavigation = function (props) {
1022
- 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;
944
+ 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;
1023
945
  var _c = React.useState(2), current = _c[0], setCurrent = _c[1];
1024
- var toClassName = React.useCallback(function () {
1025
- var values = [];
1026
- for (var _i = 0; _i < arguments.length; _i++) {
1027
- values[_i] = arguments[_i];
1028
- }
1029
- return values.filter(Boolean).join(' ');
1030
- }, []);
1031
- var style = React.useMemo(function () {
1032
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1033
- return ({
1034
- container: toClassName(styles$6.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
1035
- left: {
1036
- container: toClassName(styles$6.left.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _a === void 0 ? void 0 : _a.container),
1037
- button: toClassName(styles$6.left.button, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _b === void 0 ? void 0 : _b.button),
1038
- icon: toClassName(styles$6.left.icon, (_c = customStyles === null || customStyles === void 0 ? void 0 : customStyles.left) === null || _c === void 0 ? void 0 : _c.icon),
1039
- },
1040
- center: {
1041
- container: toClassName(styles$6.center.container, (_d = customStyles === null || customStyles === void 0 ? void 0 : customStyles.center) === null || _d === void 0 ? void 0 : _d.container),
1042
- },
1043
- right: {
1044
- container: toClassName(styles$6.right.container, (_e = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _e === void 0 ? void 0 : _e.container),
1045
- button: toClassName(styles$6.right.button, (_f = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _f === void 0 ? void 0 : _f.button),
1046
- icon: toClassName(styles$6.right.icon, (_g = customStyles === null || customStyles === void 0 ? void 0 : customStyles.right) === null || _g === void 0 ? void 0 : _g.icon),
1047
- },
1048
- button: {
1049
- default: toClassName(styles$6.button.default, (_h = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _h === void 0 ? void 0 : _h.default),
1050
- active: toClassName(styles$6.button.active, (_j = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _j === void 0 ? void 0 : _j.active),
1051
- disabled: toClassName(styles$6.button.disabled, (_k = customStyles === null || customStyles === void 0 ? void 0 : customStyles.button) === null || _k === void 0 ? void 0 : _k.disabled),
1052
- },
1053
- divider: toClassName(styles$6.divider, customStyles === null || customStyles === void 0 ? void 0 : customStyles.divider),
946
+ var styles = React.useMemo(function () {
947
+ var styleKeys = calculateNestedKeys(styles$6);
948
+ var customStyles = {};
949
+ styleKeys.forEach(function (key) {
950
+ toMergedClasses({
951
+ styles: styles$6,
952
+ stylesOverrides: stylesOverrides,
953
+ identifier: key,
954
+ customStyles: get__default["default"](customStyles, key),
955
+ });
1054
956
  });
1055
- }, []);
957
+ return styles;
958
+ }, [stylesOverrides]);
1056
959
  var pageType = React.useMemo(function () {
1057
960
  var result = 'center';
1058
961
  if (current < min + 3) {
@@ -1066,13 +969,13 @@ var PagePaginationNavigation = function (props) {
1066
969
  var component;
1067
970
  switch (pageType) {
1068
971
  case 'first':
1069
- component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", __assign({ className: toClassName(style.button.default, current === min && style.button.active), onClick: function () { return setCurrent(min); } }, { children: min })), jsxRuntime.jsx("button", __assign({ className: toClassName(style.button.default, current === min + 1 && style.button.active), onClick: function () { return setCurrent(min + 1); } }, { children: min + 1 })), jsxRuntime.jsx("button", __assign({ className: toClassName(style.button.default, current === min + 2 && style.button.active), onClick: function () { return setCurrent(min + 2); } }, { children: min + 2 })), jsxRuntime.jsx("span", __assign({ className: style.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
972
+ component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return setCurrent(min); } }, { children: min })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return setCurrent(min + 1); } }, { children: min + 1 })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return setCurrent(min + 2); } }, { children: min + 2 })), jsxRuntime.jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
1070
973
  break;
1071
974
  case 'center':
1072
- component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsxRuntime.jsx("span", __assign({ className: style.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current - 1); } }, { children: current - 1 })), jsxRuntime.jsx("button", __assign({ className: toClassName(style.button.default, style.button.active), onClick: function () { return setCurrent(current); } }, { children: current })), jsxRuntime.jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(current + 1); } }, { children: current + 1 })), jsxRuntime.jsx("span", __assign({ className: style.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
975
+ component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsxRuntime.jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(current - 1); } }, { children: current - 1 })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, styles.button.active), onClick: function () { return setCurrent(current); } }, { children: current })), jsxRuntime.jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(current + 1); } }, { children: current + 1 })), jsxRuntime.jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(max); } }, { children: max }))] }));
1073
976
  break;
1074
977
  case 'last':
1075
- component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", __assign({ className: style.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsxRuntime.jsx("span", __assign({ className: style.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: toClassName(style.button.default, current === max - 2 && style.button.active), onClick: function () { return setCurrent(max - 2); } }, { children: max - 2 })), jsxRuntime.jsx("button", __assign({ className: toClassName(style.button.default, current === max - 1 && style.button.active), onClick: function () { return setCurrent(max - 1); } }, { children: max - 1 })), jsxRuntime.jsx("button", __assign({ className: toClassName(style.button.default, current === max && style.button.active), onClick: function () { return setCurrent(max); } }, { children: max }))] }));
978
+ component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", __assign({ className: styles.button.default, onClick: function () { return setCurrent(min); } }, { children: min })), jsxRuntime.jsx("span", __assign({ className: styles.divider }, { children: "..." })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === max - 2 && styles.button.active), onClick: function () { return setCurrent(max - 2); } }, { children: max - 2 })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === max - 1 && styles.button.active), onClick: function () { return setCurrent(max - 1); } }, { children: max - 1 })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === max && styles.button.active), onClick: function () { return setCurrent(max); } }, { children: max }))] }));
1076
979
  break;
1077
980
  }
1078
981
  React.useEffect(function () {
@@ -1080,7 +983,7 @@ var PagePaginationNavigation = function (props) {
1080
983
  onChange && onChange(current);
1081
984
  }
1082
985
  }, [onChange, current]);
1083
- return (jsxRuntime.jsxs("nav", __assign({ className: style.container }, { children: [jsxRuntime.jsx("div", __assign({ className: style.left.container }, { children: jsxRuntime.jsxs("button", __assign({ className: toClassName(style.left.button, current === min && style.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsxRuntime.jsx(solid.ArrowLongLeftIcon, { className: style.left.icon }), "Previous"] })) })), jsxRuntime.jsx("div", __assign({ className: style.center.container }, { children: component })), jsxRuntime.jsx("div", __assign({ className: style.right.container }, { children: jsxRuntime.jsxs("button", __assign({ className: toClassName(style.right.button, current === max && style.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: ["Next", jsxRuntime.jsx(solid.ArrowLongRightIcon, { className: style.right.icon })] })) }))] })));
986
+ return (jsxRuntime.jsxs("nav", __assign({ className: styles.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles.left.container }, { children: jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.left.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsxRuntime.jsx(solid.ArrowLongLeftIcon, { className: styles.left.icon }), "Previous"] })) })), jsxRuntime.jsx("div", __assign({ className: styles.center.container }, { children: component })), jsxRuntime.jsx("div", __assign({ className: styles.right.container }, { children: jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.right.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: ["Next", jsxRuntime.jsx(solid.ArrowLongRightIcon, { className: styles.right.icon })] })) }))] })));
1084
987
  };
1085
988
 
1086
989
  var styles$6 = {
@@ -1107,32 +1010,18 @@ var styles$6 = {
1107
1010
  };
1108
1011
 
1109
1012
  var Container$2 = function (props) {
1110
- var children = props.children, customStyles = props.styles;
1013
+ var children = props.children, stylesOverrides = props.styles;
1111
1014
  var _a = React.useState(''), active = _a[0], setActive = _a[1];
1112
- var toClassName = React.useCallback(function () {
1113
- var values = [];
1114
- for (var _i = 0; _i < arguments.length; _i++) {
1115
- values[_i] = arguments[_i];
1116
- }
1117
- return values.filter(Boolean).join(' ');
1118
- }, []);
1119
1015
  var style = React.useMemo(function () { return ({
1120
- root: toClassName(styles$5.root, customStyles === null || customStyles === void 0 ? void 0 : customStyles.root),
1121
- panel: toClassName(styles$5.panel, customStyles === null || customStyles === void 0 ? void 0 : customStyles.panel),
1122
- container: toClassName(styles$5.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
1123
- content: toClassName(styles$5.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
1016
+ root: toClassName(styles$5.root, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.root),
1017
+ panel: toClassName(styles$5.panel, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.panel),
1018
+ container: toClassName(styles$5.container, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container),
1019
+ content: toClassName(styles$5.content, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.content),
1124
1020
  }); }, []);
1125
1021
  return (jsxRuntime.jsx("div", __assign({ className: style.root, style: { maxWidth: '22rem' } }, { children: jsxRuntime.jsxs("div", __assign({ className: style.panel }, { children: [jsxRuntime.jsx("div", __assign({ className: style.container }, { children: jsxRuntime.jsx("div", __assign({ className: style.content }, { children: jsxRuntime.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 })] })) })));
1126
1022
  };
1127
1023
  var List$2 = function (props) {
1128
- var children = props.children, setActive = props.setActive, customStyles = props.styles;
1129
- var toClassName = React.useCallback(function () {
1130
- var values = [];
1131
- for (var _i = 0; _i < arguments.length; _i++) {
1132
- values[_i] = arguments[_i];
1133
- }
1134
- return values.filter(Boolean).join(' ');
1135
- }, []);
1024
+ var children = props.children, setActive = props.setActive, stylesOverrides = props.styles;
1136
1025
  React.useEffect(function () {
1137
1026
  var tab;
1138
1027
  var tabs = React.Children.map(children, function (child) { return child; });
@@ -1145,17 +1034,10 @@ var List$2 = function (props) {
1145
1034
  }
1146
1035
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1147
1036
  }, []);
1148
- return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$5.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
1037
+ return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$5.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
1149
1038
  };
1150
1039
  var Item$2 = function (props) {
1151
1040
  var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1152
- var toClassName = React.useCallback(function () {
1153
- var values = [];
1154
- for (var _i = 0; _i < arguments.length; _i++) {
1155
- values[_i] = arguments[_i];
1156
- }
1157
- return values.filter(Boolean).join(' ');
1158
- }, []);
1159
1041
  return (jsxRuntime.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 })));
1160
1042
  };
1161
1043
  var Footer = function (props) {
@@ -1183,12 +1065,12 @@ var styles$5 = {
1183
1065
  };
1184
1066
 
1185
1067
  var Container$1 = function (props) {
1186
- var children = props.children, customStyles = props.styles;
1068
+ var children = props.children, stylesOverrides = props.styles;
1187
1069
  var _a = React.useState(''), active = _a[0], setActive = _a[1];
1188
- return (jsxRuntime.jsx("div", __assign({ className: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container }, { children: children({ active: active, setActive: setActive }) })));
1070
+ return (jsxRuntime.jsx("div", __assign({ className: stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container }, { children: children({ active: active, setActive: setActive }) })));
1189
1071
  };
1190
1072
  var List$1 = function (props) {
1191
- var children = props.children, active = props.active, setActive = props.setActive, customStyles = props.styles;
1073
+ var children = props.children, active = props.active, setActive = props.setActive, stylesOverrides = props.styles;
1192
1074
  var handleChangeSelect = React.useCallback(function (e) {
1193
1075
  var _a, _b;
1194
1076
  var key = (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
@@ -1200,13 +1082,6 @@ var List$1 = function (props) {
1200
1082
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1201
1083
  }
1202
1084
  }, []);
1203
- var toClassName = React.useCallback(function () {
1204
- var values = [];
1205
- for (var _i = 0; _i < arguments.length; _i++) {
1206
- values[_i] = arguments[_i];
1207
- }
1208
- return values.filter(Boolean).join(' ');
1209
- }, []);
1210
1085
  React.useEffect(function () {
1211
1086
  var tab;
1212
1087
  var tabs = React.Children.map(children, function (child) { return child; });
@@ -1219,20 +1094,13 @@ var List$1 = function (props) {
1219
1094
  }
1220
1095
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1221
1096
  }, []);
1222
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "sm:hidden" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "tabs", className: "sr-only" }, { children: "Select a tab" })), jsxRuntime.jsx("select", __assign({ id: "tabs", name: "tabs", value: active, className: toClassName(styles$4.select, customStyles === null || customStyles === void 0 ? void 0 : customStyles.select), onChange: handleChangeSelect }, { children: React.Children.map(children, function (child) {
1097
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "sm:hidden" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "tabs", className: "sr-only" }, { children: "Select a tab" })), jsxRuntime.jsx("select", __assign({ id: "tabs", name: "tabs", value: active, className: toClassName(styles$4.select, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.select), onChange: handleChangeSelect }, { children: React.Children.map(children, function (child) {
1223
1098
  var _a;
1224
1099
  return (jsxRuntime.jsx("option", __assign({ value: child.props.accessor }, { children: child.props.children }), (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.accessor));
1225
- }) }))] })), jsxRuntime.jsx("div", __assign({ className: "hidden sm:block" }, { children: jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$4.navigation, customStyles === null || customStyles === void 0 ? void 0 : customStyles.navigation) }, { children: children })) }))] }));
1100
+ }) }))] })), jsxRuntime.jsx("div", __assign({ className: "hidden sm:block" }, { children: jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$4.navigation, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.navigation) }, { children: children })) }))] }));
1226
1101
  };
1227
1102
  var Item$1 = function (props) {
1228
1103
  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;
1229
- var toClassName = React.useCallback(function () {
1230
- var values = [];
1231
- for (var _i = 0; _i < arguments.length; _i++) {
1232
- values[_i] = arguments[_i];
1233
- }
1234
- return values.filter(Boolean).join(' ');
1235
- }, []);
1236
1104
  return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$4.tab[type][isCurrent ? 'active' : 'notActive'], styles$4.tab[type].base), onClick: onClick }, { children: children })));
1237
1105
  };
1238
1106
  var View$1 = function (props) {
@@ -1270,19 +1138,12 @@ var styles$4 = {
1270
1138
  };
1271
1139
 
1272
1140
  var Container = function (props) {
1273
- var children = props.children, customStyles = props.styles;
1141
+ var children = props.children, stylesOverrides = props.styles;
1274
1142
  var _a = React.useState(''), active = _a[0], setActive = _a[1];
1275
- return (jsxRuntime.jsx("div", __assign({ className: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container }, { children: children({ active: active, setActive: setActive }) })));
1143
+ return (jsxRuntime.jsx("div", __assign({ className: stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.container }, { children: children({ active: active, setActive: setActive }) })));
1276
1144
  };
1277
1145
  var List = function (props) {
1278
- var children = props.children, setActive = props.setActive, customStyles = props.styles;
1279
- var toClassName = React.useCallback(function () {
1280
- var values = [];
1281
- for (var _i = 0; _i < arguments.length; _i++) {
1282
- values[_i] = arguments[_i];
1283
- }
1284
- return values.filter(Boolean).join(' ');
1285
- }, []);
1146
+ var children = props.children, setActive = props.setActive, stylesOverrides = props.styles;
1286
1147
  React.useEffect(function () {
1287
1148
  var tab;
1288
1149
  var tabs = React.Children.map(children, function (child) { return child; });
@@ -1295,17 +1156,10 @@ var List = function (props) {
1295
1156
  }
1296
1157
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1297
1158
  }, []);
1298
- return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$3.list, customStyles === null || customStyles === void 0 ? void 0 : customStyles.list) }, { children: children })));
1159
+ return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$3.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
1299
1160
  };
1300
1161
  var Item = function (props) {
1301
1162
  var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1302
- var toClassName = React.useCallback(function () {
1303
- var values = [];
1304
- for (var _i = 0; _i < arguments.length; _i++) {
1305
- values[_i] = arguments[_i];
1306
- }
1307
- return values.filter(Boolean).join(' ');
1308
- }, []);
1309
1163
  return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$3.item[isCurrent ? 'active' : 'notActive'], styles$3.item.base), onClick: onClick }, { children: children })));
1310
1164
  };
1311
1165
  var View = function (props) {
@@ -1330,52 +1184,28 @@ var styles$3 = {
1330
1184
  };
1331
1185
 
1332
1186
  var ModalOverlay = function (props) {
1333
- var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
1187
+ var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles;
1334
1188
  var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
1335
1189
  var options = React.useMemo(function () { return ({
1336
1190
  onOpen: function () { return setIsOpen(true); },
1337
1191
  onClose: function () { return setIsOpen(false); },
1338
1192
  }); }, []);
1339
- var toClassName = React.useCallback(function () {
1340
- var values = [];
1341
- for (var _i = 0; _i < arguments.length; _i++) {
1342
- values[_i] = arguments[_i];
1343
- }
1344
- return values.filter(Boolean).join(' ');
1345
- }, []);
1346
- var style = React.useMemo(function () {
1347
- 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;
1348
- return ({
1349
- container: toClassName(styles$2.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
1350
- background: {
1351
- container: toClassName(styles$2.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
1352
- transition: {
1353
- 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),
1354
- 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),
1355
- 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),
1356
- 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),
1357
- 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),
1358
- 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),
1359
- },
1360
- },
1361
- layout: {
1362
- container: toClassName(styles$2.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
1363
- content: toClassName(styles$2.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
1364
- },
1365
- panel: {
1366
- 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),
1367
- transition: {
1368
- 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),
1369
- 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),
1370
- 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),
1371
- 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),
1372
- 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),
1373
- 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),
1374
- },
1375
- },
1193
+ var styles = React.useMemo(function () {
1194
+ var styleKeys = calculateNestedKeys(styles$2);
1195
+ var customStyles = {
1196
+ 'panel.container': size && styles$2[size],
1197
+ };
1198
+ styleKeys.forEach(function (key) {
1199
+ toMergedClasses({
1200
+ styles: styles$2,
1201
+ stylesOverrides: stylesOverrides,
1202
+ identifier: key,
1203
+ customStyles: get__default["default"](customStyles, key),
1204
+ });
1376
1205
  });
1377
- }, []);
1378
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: style.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx("div", { className: style.background.container }) })), jsxRuntime.jsx("div", __assign({ className: style.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: style.layout.content }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsxRuntime.jsx(react.Dialog.Panel, __assign({ className: style.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
1206
+ return styles;
1207
+ }, [size, stylesOverrides]);
1208
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx("div", { className: styles.background.container }) })), jsxRuntime.jsx("div", __assign({ className: styles.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.content }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx(react.Dialog.Panel, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
1379
1209
  };
1380
1210
 
1381
1211
  var styles$2 = {
@@ -1414,60 +1244,43 @@ var styles$2 = {
1414
1244
  };
1415
1245
 
1416
1246
  var NotificationOverlayContainer = function (_a) {
1417
- var children = _a.children, customStyles = _a.styles;
1418
- var toClassName = React.useCallback(function () {
1419
- var values = [];
1420
- for (var _i = 0; _i < arguments.length; _i++) {
1421
- values[_i] = arguments[_i];
1422
- }
1423
- return values.filter(Boolean).join(' ');
1424
- }, []);
1425
- var style = React.useMemo(function () {
1426
- var _a, _b;
1427
- return ({
1428
- outer: toClassName(styles$1.container.outer, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) === null || _a === void 0 ? void 0 : _a.outer),
1429
- inner: toClassName(styles$1.container.inner, (_b = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) === null || _b === void 0 ? void 0 : _b.inner),
1247
+ var children = _a.children, stylesOverrides = _a.styles;
1248
+ var styles = React.useMemo(function () {
1249
+ var styleKeys = calculateNestedKeys(styles$1.container);
1250
+ styleKeys.forEach(function (key) {
1251
+ toMergedClasses({
1252
+ styles: styles$1,
1253
+ stylesOverrides: stylesOverrides,
1254
+ identifier: key,
1255
+ });
1430
1256
  });
1431
- }, []);
1432
- return (jsxRuntime.jsx("div", __assign({ "aria-live": "assertive", className: style.outer }, { children: jsxRuntime.jsx("div", __assign({ className: style.inner }, { children: children })) })));
1257
+ return styles;
1258
+ }, [stylesOverrides]);
1259
+ return (jsxRuntime.jsx("div", __assign({ "aria-live": "assertive", className: styles.outer }, { children: jsxRuntime.jsx("div", __assign({ className: styles.inner }, { children: children })) })));
1433
1260
  };
1434
1261
  var NotificationOverlayItem = function (props) {
1435
- var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
1262
+ var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles;
1436
1263
  var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
1437
1264
  var options = React.useMemo(function () { return ({
1438
1265
  onOpen: function () { return setIsOpen(true); },
1439
1266
  onClose: function () { return setIsOpen(false); },
1440
1267
  }); }, []);
1441
- var toClassName = React.useCallback(function () {
1442
- var values = [];
1443
- for (var _i = 0; _i < arguments.length; _i++) {
1444
- values[_i] = arguments[_i];
1445
- }
1446
- return values.filter(Boolean).join(' ');
1447
- }, []);
1448
- var style = React.useMemo(function () {
1449
- 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;
1450
- return ({
1451
- container: toClassName(styles$1.item.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _a === void 0 ? void 0 : _a.container),
1452
- layout: {
1453
- 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),
1454
- 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),
1455
- 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),
1456
- },
1457
- panel: {
1458
- 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),
1459
- transition: {
1460
- 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),
1461
- 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),
1462
- 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),
1463
- 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),
1464
- 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),
1465
- 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),
1466
- },
1467
- },
1268
+ var styles = React.useMemo(function () {
1269
+ var styleKeys = calculateNestedKeys(styles$1.item);
1270
+ var customStyles = {
1271
+ 'panel.container': size && styles$1[size],
1272
+ };
1273
+ styleKeys.forEach(function (key) {
1274
+ toMergedClasses({
1275
+ styles: styles$1.item,
1276
+ stylesOverrides: stylesOverrides,
1277
+ identifier: key,
1278
+ customStyles: get__default["default"](customStyles, key),
1279
+ });
1468
1280
  });
1469
- }, []);
1470
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition, __assign({ show: isOpen, as: React.Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsxRuntime.jsx("div", __assign({ className: style.panel.container }, { children: children(options) })) })), trigger && trigger(options)] }));
1281
+ return styles;
1282
+ }, [size, stylesOverrides]);
1283
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition, __assign({ show: isOpen, as: React.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: jsxRuntime.jsx("div", __assign({ className: styles.panel.container }, { children: children(options) })) })), trigger && trigger(options)] }));
1471
1284
  };
1472
1285
  var NotificationOverlay = {
1473
1286
  Container: NotificationOverlayContainer,
@@ -1506,53 +1319,28 @@ var styles$1 = {
1506
1319
  };
1507
1320
 
1508
1321
  var SlideOverOverlay = function (props) {
1509
- var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, customStyles = props.styles;
1322
+ var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles;
1510
1323
  var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
1511
1324
  var options = React.useMemo(function () { return ({
1512
1325
  onOpen: function () { return setIsOpen(true); },
1513
1326
  onClose: function () { return setIsOpen(false); },
1514
1327
  }); }, []);
1515
- var toClassName = React.useCallback(function () {
1516
- var values = [];
1517
- for (var _i = 0; _i < arguments.length; _i++) {
1518
- values[_i] = arguments[_i];
1519
- }
1520
- return values.filter(Boolean).join(' ');
1521
- }, []);
1522
- var style = React.useMemo(function () {
1523
- 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;
1524
- return ({
1525
- container: toClassName(styles.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
1526
- background: {
1527
- container: toClassName(styles.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
1528
- transition: {
1529
- 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),
1530
- 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),
1531
- 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),
1532
- 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),
1533
- 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),
1534
- 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),
1535
- },
1536
- },
1537
- layout: {
1538
- container: toClassName(styles.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
1539
- content: toClassName(styles.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
1540
- inner: toClassName(styles.layout.inner, (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _r === void 0 ? void 0 : _r.inner),
1541
- },
1542
- panel: {
1543
- 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),
1544
- transition: {
1545
- 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),
1546
- 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),
1547
- 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),
1548
- 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),
1549
- 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),
1550
- 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),
1551
- },
1552
- },
1328
+ var styles$1 = React.useMemo(function () {
1329
+ var styleKeys = calculateNestedKeys(styles);
1330
+ var customStyles = {
1331
+ 'panel.container': size && styles[size],
1332
+ };
1333
+ styleKeys.forEach(function (key) {
1334
+ toMergedClasses({
1335
+ styles: styles,
1336
+ stylesOverrides: stylesOverrides,
1337
+ identifier: key,
1338
+ customStyles: get__default["default"](customStyles, key),
1339
+ });
1553
1340
  });
1554
- }, []);
1555
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: style.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx("div", { className: style.background.container }) })), jsxRuntime.jsx("div", __assign({ className: style.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: style.layout.content }, { children: jsxRuntime.jsx("div", __assign({ className: style.layout.inner }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.Fragment, enter: style.panel.transition.enter, enterFrom: style.panel.transition.enterFrom, enterTo: style.panel.transition.enterTo, leave: style.panel.transition.leave, leaveFrom: style.panel.transition.leaveFrom, leaveTo: style.panel.transition.leaveTo }, { children: jsxRuntime.jsx(react.Dialog.Panel, __assign({ className: style.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
1341
+ return styles$1;
1342
+ }, [size, stylesOverrides]);
1343
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles$1.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx("div", { className: styles$1.background.container }) })), jsxRuntime.jsx("div", __assign({ className: styles$1.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles$1.layout.content }, { children: jsxRuntime.jsx("div", __assign({ className: styles$1.layout.inner }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx(react.Dialog.Panel, __assign({ className: styles$1.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
1556
1344
  };
1557
1345
 
1558
1346
  var styles = {