@ballistix.digital/react-components 0.1.13 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +23 -20
  2. package/dist/index.esm.js +312 -523
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +312 -522
  5. package/dist/index.js.map +1 -1
  6. package/package.json +7 -3
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));
233
+ }
234
+ else {
235
+ acc.push(pre + k);
244
236
  }
245
- return values.filter(Boolean).join(' ');
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,55 +1010,35 @@ 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
- var _a, _b;
1138
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1139
- var initialTab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1026
+ var tab;
1027
+ var tabs = React.Children.map(children, function (child) { return child; });
1028
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1140
1029
  if (initialTab !== undefined) {
1141
1030
  tab = initialTab;
1142
1031
  }
1032
+ else {
1033
+ tab = tabs[0];
1034
+ }
1143
1035
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1144
1036
  }, []);
1145
- 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 })));
1146
1038
  };
1147
1039
  var Item$2 = function (props) {
1148
- var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1149
- var toClassName = React.useCallback(function () {
1150
- var values = [];
1151
- for (var _i = 0; _i < arguments.length; _i++) {
1152
- values[_i] = arguments[_i];
1153
- }
1154
- return values.filter(Boolean).join(' ');
1155
- }, []);
1156
- return (jsxRuntime.jsx("a", __assign({ href: href, className: toClassName(isCurrent
1157
- ? styles$5.item.active
1158
- : styles$5.item.notActive, styles$5 === null || styles$5 === void 0 ? void 0 : styles$5.item.base), onClick: onClick }, { children: children })));
1040
+ var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
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 })));
1159
1042
  };
1160
1043
  var Footer = function (props) {
1161
1044
  var children = props.children;
@@ -1182,16 +1065,16 @@ var styles$5 = {
1182
1065
  };
1183
1066
 
1184
1067
  var Container$1 = function (props) {
1185
- var children = props.children, customStyles = props.styles;
1068
+ var children = props.children, stylesOverrides = props.styles;
1186
1069
  var _a = React.useState(''), active = _a[0], setActive = _a[1];
1187
- 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 }) })));
1188
1071
  };
1189
1072
  var List$1 = function (props) {
1190
- 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;
1191
1074
  var handleChangeSelect = React.useCallback(function (e) {
1192
- var _a;
1193
- var key = e.currentTarget.value;
1194
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a.find(function (child) { return child.props.accessor === key; });
1075
+ var _a, _b;
1076
+ var key = (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
1077
+ var tab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (child) { return child.props.accessor === key; });
1195
1078
  if (tab === null || tab === void 0 ? void 0 : tab.props.href) {
1196
1079
  window.location.href = tab.props.href;
1197
1080
  }
@@ -1199,40 +1082,26 @@ var List$1 = function (props) {
1199
1082
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1200
1083
  }
1201
1084
  }, []);
1202
- var toClassName = React.useCallback(function () {
1203
- var values = [];
1204
- for (var _i = 0; _i < arguments.length; _i++) {
1205
- values[_i] = arguments[_i];
1206
- }
1207
- return values.filter(Boolean).join(' ');
1208
- }, []);
1209
1085
  React.useEffect(function () {
1210
- var _a, _b;
1211
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1212
- var initialTab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1086
+ var tab;
1087
+ var tabs = React.Children.map(children, function (child) { return child; });
1088
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1213
1089
  if (initialTab !== undefined) {
1214
1090
  tab = initialTab;
1215
1091
  }
1092
+ else {
1093
+ tab = tabs[0];
1094
+ }
1216
1095
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1217
- // eslint-disable-next-line react-hooks/exhaustive-deps
1218
- }, [setActive]);
1219
- 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) {
1096
+ }, []);
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) {
1220
1098
  var _a;
1221
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));
1222
- }) }))] })), 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 })) }))] }));
1223
1101
  };
1224
1102
  var Item$1 = function (props) {
1225
- var children = props.children, _a = props.type, type = _a === void 0 ? 'underline' : _a, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1226
- var toClassName = React.useCallback(function () {
1227
- var values = [];
1228
- for (var _i = 0; _i < arguments.length; _i++) {
1229
- values[_i] = arguments[_i];
1230
- }
1231
- return values.filter(Boolean).join(' ');
1232
- }, []);
1233
- return (jsxRuntime.jsx("a", __assign({ href: href, className: toClassName(isCurrent
1234
- ? styles$4.tab[type].active
1235
- : styles$4.tab[type].notActive, styles$4.tab[type].base), onClick: onClick }, { children: children })));
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;
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 })));
1236
1105
  };
1237
1106
  var View$1 = function (props) {
1238
1107
  var children = props.children;
@@ -1269,42 +1138,29 @@ var styles$4 = {
1269
1138
  };
1270
1139
 
1271
1140
  var Container = function (props) {
1272
- var children = props.children, customStyles = props.styles;
1141
+ var children = props.children, stylesOverrides = props.styles;
1273
1142
  var _a = React.useState(''), active = _a[0], setActive = _a[1];
1274
- 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 }) })));
1275
1144
  };
1276
1145
  var List = function (props) {
1277
- var children = props.children, setActive = props.setActive, customStyles = props.styles;
1278
- var toClassName = React.useCallback(function () {
1279
- var values = [];
1280
- for (var _i = 0; _i < arguments.length; _i++) {
1281
- values[_i] = arguments[_i];
1282
- }
1283
- return values.filter(Boolean).join(' ');
1284
- }, []);
1146
+ var children = props.children, setActive = props.setActive, stylesOverrides = props.styles;
1285
1147
  React.useEffect(function () {
1286
- var _a, _b;
1287
- var tab = (_a = React.Children.map(children, function (child) { return child; })) === null || _a === void 0 ? void 0 : _a[0];
1288
- var initialTab = (_b = React.Children.map(children, function (child) { return child; })) === null || _b === void 0 ? void 0 : _b.find(function (tab) { return tab.props.isInitial; });
1148
+ var tab;
1149
+ var tabs = React.Children.map(children, function (child) { return child; });
1150
+ var initialTab = tabs === null || tabs === void 0 ? void 0 : tabs.find(function (tab) { return tab.props.isInitial; });
1289
1151
  if (initialTab !== undefined) {
1290
1152
  tab = initialTab;
1291
1153
  }
1154
+ else {
1155
+ tab = tabs[0];
1156
+ }
1292
1157
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1293
1158
  }, []);
1294
- 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 })));
1295
1160
  };
1296
1161
  var Item = function (props) {
1297
- var children = props.children, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick;
1298
- var toClassName = React.useCallback(function () {
1299
- var values = [];
1300
- for (var _i = 0; _i < arguments.length; _i++) {
1301
- values[_i] = arguments[_i];
1302
- }
1303
- return values.filter(Boolean).join(' ');
1304
- }, []);
1305
- return (jsxRuntime.jsx("a", __assign({ href: href, className: toClassName(isCurrent
1306
- ? styles$3.item.active
1307
- : styles$3.item.notActive, styles$3 === null || styles$3 === void 0 ? void 0 : styles$3.item.base), onClick: onClick }, { children: children })));
1162
+ var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1163
+ return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$3.item[isCurrent ? 'active' : 'notActive'], styles$3.item.base), onClick: onClick }, { children: children })));
1308
1164
  };
1309
1165
  var View = function (props) {
1310
1166
  var children = props.children;
@@ -1328,52 +1184,28 @@ var styles$3 = {
1328
1184
  };
1329
1185
 
1330
1186
  var ModalOverlay = function (props) {
1331
- 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;
1332
1188
  var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
1333
1189
  var options = React.useMemo(function () { return ({
1334
1190
  onOpen: function () { return setIsOpen(true); },
1335
1191
  onClose: function () { return setIsOpen(false); },
1336
1192
  }); }, []);
1337
- var toClassName = React.useCallback(function () {
1338
- var values = [];
1339
- for (var _i = 0; _i < arguments.length; _i++) {
1340
- values[_i] = arguments[_i];
1341
- }
1342
- return values.filter(Boolean).join(' ');
1343
- }, []);
1344
- var style = React.useMemo(function () {
1345
- 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;
1346
- return ({
1347
- container: toClassName(styles$2.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
1348
- background: {
1349
- container: toClassName(styles$2.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
1350
- transition: {
1351
- 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),
1352
- 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),
1353
- 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),
1354
- 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),
1355
- 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),
1356
- 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),
1357
- },
1358
- },
1359
- layout: {
1360
- container: toClassName(styles$2.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
1361
- content: toClassName(styles$2.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
1362
- },
1363
- panel: {
1364
- 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),
1365
- transition: {
1366
- 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),
1367
- 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),
1368
- 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),
1369
- 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),
1370
- 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),
1371
- 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),
1372
- },
1373
- },
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
+ });
1374
1205
  });
1375
- }, []);
1376
- 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)] }));
1377
1209
  };
1378
1210
 
1379
1211
  var styles$2 = {
@@ -1412,60 +1244,43 @@ var styles$2 = {
1412
1244
  };
1413
1245
 
1414
1246
  var NotificationOverlayContainer = function (_a) {
1415
- var children = _a.children, customStyles = _a.styles;
1416
- var toClassName = React.useCallback(function () {
1417
- var values = [];
1418
- for (var _i = 0; _i < arguments.length; _i++) {
1419
- values[_i] = arguments[_i];
1420
- }
1421
- return values.filter(Boolean).join(' ');
1422
- }, []);
1423
- var style = React.useMemo(function () {
1424
- var _a, _b;
1425
- return ({
1426
- outer: toClassName(styles$1.container.outer, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) === null || _a === void 0 ? void 0 : _a.outer),
1427
- 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
+ });
1428
1256
  });
1429
- }, []);
1430
- 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 })) })));
1431
1260
  };
1432
1261
  var NotificationOverlayItem = function (props) {
1433
- 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;
1434
1263
  var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
1435
1264
  var options = React.useMemo(function () { return ({
1436
1265
  onOpen: function () { return setIsOpen(true); },
1437
1266
  onClose: function () { return setIsOpen(false); },
1438
1267
  }); }, []);
1439
- var toClassName = React.useCallback(function () {
1440
- var values = [];
1441
- for (var _i = 0; _i < arguments.length; _i++) {
1442
- values[_i] = arguments[_i];
1443
- }
1444
- return values.filter(Boolean).join(' ');
1445
- }, []);
1446
- var style = React.useMemo(function () {
1447
- 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;
1448
- return ({
1449
- container: toClassName(styles$1.item.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.item) === null || _a === void 0 ? void 0 : _a.container),
1450
- layout: {
1451
- 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),
1452
- 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),
1453
- 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),
1454
- },
1455
- panel: {
1456
- 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),
1457
- transition: {
1458
- 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),
1459
- 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),
1460
- 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),
1461
- 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),
1462
- 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),
1463
- 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),
1464
- },
1465
- },
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
+ });
1466
1280
  });
1467
- }, []);
1468
- 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)] }));
1469
1284
  };
1470
1285
  var NotificationOverlay = {
1471
1286
  Container: NotificationOverlayContainer,
@@ -1504,53 +1319,28 @@ var styles$1 = {
1504
1319
  };
1505
1320
 
1506
1321
  var SlideOverOverlay = function (props) {
1507
- 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;
1508
1323
  var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
1509
1324
  var options = React.useMemo(function () { return ({
1510
1325
  onOpen: function () { return setIsOpen(true); },
1511
1326
  onClose: function () { return setIsOpen(false); },
1512
1327
  }); }, []);
1513
- var toClassName = React.useCallback(function () {
1514
- var values = [];
1515
- for (var _i = 0; _i < arguments.length; _i++) {
1516
- values[_i] = arguments[_i];
1517
- }
1518
- return values.filter(Boolean).join(' ');
1519
- }, []);
1520
- var style = React.useMemo(function () {
1521
- 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;
1522
- return ({
1523
- container: toClassName(styles.container, customStyles === null || customStyles === void 0 ? void 0 : customStyles.container),
1524
- background: {
1525
- container: toClassName(styles.background.container, (_a = customStyles === null || customStyles === void 0 ? void 0 : customStyles.background) === null || _a === void 0 ? void 0 : _a.container),
1526
- transition: {
1527
- 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),
1528
- 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),
1529
- 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),
1530
- 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),
1531
- 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),
1532
- 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),
1533
- },
1534
- },
1535
- layout: {
1536
- container: toClassName(styles.layout.container, (_p = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _p === void 0 ? void 0 : _p.container),
1537
- content: toClassName(styles.layout.content, (_q = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _q === void 0 ? void 0 : _q.content),
1538
- inner: toClassName(styles.layout.inner, (_r = customStyles === null || customStyles === void 0 ? void 0 : customStyles.layout) === null || _r === void 0 ? void 0 : _r.inner),
1539
- },
1540
- panel: {
1541
- 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),
1542
- transition: {
1543
- 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),
1544
- 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),
1545
- 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),
1546
- 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),
1547
- 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),
1548
- 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),
1549
- },
1550
- },
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
+ });
1551
1340
  });
1552
- }, []);
1553
- 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)] }));
1554
1344
  };
1555
1345
 
1556
1346
  var styles = {