@jobber/components 4.79.2-STCJS-to-.5 → 4.79.2-STCJS-to-.8
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.
- package/README.md +0 -5
- package/dist/RadioGroup/RadioOption.d.ts +1 -1
- package/dist/Select/Option.d.ts +1 -1
- package/dist/Table/Body.d.ts +2 -2
- package/dist/Table/Cells/Cell.d.ts +3 -3
- package/dist/Table/Cells/CellCurrency.d.ts +3 -3
- package/dist/Table/Cells/CellNumeric.d.ts +2 -1
- package/dist/Table/Footer.d.ts +2 -2
- package/dist/Table/Header.d.ts +2 -2
- package/dist/Table/Row.d.ts +2 -2
- package/dist/Table/index.d.ts +8 -8
- package/dist/Toast/showToast.d.ts +1 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.mjs +753 -657
- package/package.json +148 -148
package/dist/index.mjs
CHANGED
|
@@ -23,6 +23,7 @@ import { CivilDate, CivilTime } from '@std-proposal/temporal';
|
|
|
23
23
|
import ReactCountdown from 'react-countdown';
|
|
24
24
|
import isEmpty from 'lodash/isEmpty';
|
|
25
25
|
import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
|
|
26
|
+
export { createColumnHelper } from '@tanstack/react-table';
|
|
26
27
|
import ReactDatePicker from 'react-datepicker';
|
|
27
28
|
import omit from 'lodash/omit';
|
|
28
29
|
import getHumanReadableFileSize from 'filesize';
|
|
@@ -30,6 +31,8 @@ import { useDropzone } from 'react-dropzone';
|
|
|
30
31
|
import axios from 'axios';
|
|
31
32
|
import get from 'lodash/get';
|
|
32
33
|
import groupBy from 'lodash/groupBy';
|
|
34
|
+
import { formatCurrency } from '@jobber/formatters';
|
|
35
|
+
import { createRoot } from 'react-dom/client';
|
|
33
36
|
|
|
34
37
|
const TIMING_QUICK = toSeconds(tokens["timing-quick"]);
|
|
35
38
|
const TIMING_BASE = toSeconds(tokens["timing-base"]);
|
|
@@ -308,50 +311,50 @@ function styleInject(css, ref) {
|
|
|
308
311
|
}
|
|
309
312
|
}
|
|
310
313
|
|
|
311
|
-
var css_248z$
|
|
312
|
-
var styles$
|
|
313
|
-
styleInject(css_248z$
|
|
314
|
+
var css_248z$1G = ".v0Cys9vQ-NE- {\n position: relative;\n width: 100%;\n}\n\n.CX-N-e0e6og- {\n display: none;\n position: absolute;\n z-index: calc(var(--elevation-menu) + var(--elevation-modal));\n width: 100%;\n /* Unfortunately this is how we define our line item picker height in jobber online.\n This is a concession to maintain visual parity. */\n max-height: 300px;\n box-shadow: var(--shadow-base);\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: var(--border-base) solid var(--color-color-border);\n border-radius: var(--radius-base);\n overflow: auto;\n scroll-behavior: smooth;\n background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk- {\n display: block;\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk-:empty {\n display: none;\n}\n\n.ucQtG0iwqbo- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -ms-flex-line-pack: stretch;\n align-content: stretch;\n -ms-flex-align: center;\n align-items: center;\n padding: var(--space-small);\n border: none;\n text-align: left;\n list-style: none;\n background-color: transparent;\n cursor: pointer;\n transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.CX-N-e0e6og-:hover .ucQtG0iwqbo-.r8HS-ma79QE-:not(:hover) {\n background-color: transparent;\n outline-color: transparent;\n}\n\n.v0Cys9vQ-NE- .PvUgNoAUG7A-:not(:first-child) {\n padding-top: var(--space-small);\n}\n\n.ucQtG0iwqbo- .DAOOFUZ1BRM- {\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n -ms-flex-item-align: auto;\n align-self: auto;\n width: var(--space-large);\n}\n\n.ucQtG0iwqbo- .cjKJFup6hGY- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex: 1 100%;\n flex: 1 100%;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n.ucQtG0iwqbo- .hG5zNBuI2wA- {\n -ms-flex: 2;\n flex: 2;\n}\n\n.ucQtG0iwqbo- ._3CwjFCbhqi4- {\n -ms-flex: 1;\n flex: 1;\n -ms-flex-item-align: end;\n align-self: flex-end;\n text-align: right;\n}\n";
|
|
315
|
+
var styles$1l = {"autocomplete":"v0Cys9vQ-NE-","options":"CX-N-e0e6og-","visible":"_4PlUaegVpkk-","option":"ucQtG0iwqbo-","active":"r8HS-ma79QE-","separator":"ydwLX44YFZc-","heading":"PvUgNoAUG7A-","icon":"DAOOFUZ1BRM-","text":"cjKJFup6hGY-","label":"hG5zNBuI2wA-","details":"_3CwjFCbhqi4-"};
|
|
316
|
+
styleInject(css_248z$1G);
|
|
314
317
|
|
|
315
|
-
var css_248z$
|
|
316
|
-
var styles$
|
|
317
|
-
styleInject(css_248z$
|
|
318
|
+
var css_248z$1F = ".asDB9Ra2UpA- {\n margin: 0;\n padding: 0;\n font-family: var(--typography--fontFamily-normal);\n /* Wrap really long words or URL's */\n word-wrap: break-word;\n overflow-wrap: break-word;\n word-wrap: break-word;\n}\n";
|
|
319
|
+
var styles$1k = {"base":"asDB9Ra2UpA-"};
|
|
320
|
+
styleInject(css_248z$1F);
|
|
318
321
|
|
|
319
|
-
var css_248z$
|
|
322
|
+
var css_248z$1E = "._7C4Ck1izBPs- {\n font-size: var(--typography--fontSize-extravagant);\n line-height: var(--typography--lineHeight-miniscule);\n}\n\n._8X-fSrUTxV8- {\n font-size: var(--typography--fontSize-jumbo);\n line-height: var(--typography--lineHeight-miniscule);\n}\n\n.n-SPJXPXLSA- {\n font-size: var(--typography--fontSize-largest);\n line-height: var(--typography--lineHeight-tightest);\n}\n\n.vCrvF55YQ9o- {\n font-size: var(--typography--fontSize-larger);\n line-height: var(--typography--lineHeight-tight);\n}\n\n.FBoaHWotSik- {\n font-size: var(--typography--fontSize-large);\n line-height: var(--typography--lineHeight-large);\n}\n\n.V6yPPLHLeuY- {\n font-size: var(--typography--fontSize-base);\n line-height: var(--typography--lineHeight-base);\n}\n\n.T5XC4DgJlxk- {\n font-size: var(--typography--fontSize-small);\n line-height: var(--typography--lineHeight-tighter);\n}\n\n.sycqXMMO-wc- {\n font-size: var(--typography--fontSize-smaller);\n line-height: var(--typography--lineHeight-tight);\n}\n";
|
|
320
323
|
var fontSizes = {"extravagant":"_7C4Ck1izBPs-","jumbo":"_8X-fSrUTxV8-","largest":"n-SPJXPXLSA-","larger":"vCrvF55YQ9o-","large":"FBoaHWotSik-","base":"V6yPPLHLeuY-","small":"T5XC4DgJlxk-","smaller":"sycqXMMO-wc-"};
|
|
321
|
-
styleInject(css_248z$
|
|
324
|
+
styleInject(css_248z$1E);
|
|
322
325
|
|
|
323
|
-
var css_248z$
|
|
326
|
+
var css_248z$1D = ".lziyWzzvuno- {\n font-family: var(--typography--fontFamily-normal);\n font-weight: 400;\n}\n\n.PVKSijyipP8- {\n font-family: var(--typography--fontFamily-normal);\n font-weight: 500;\n}\n\n.-ch9Z4gIGDg- {\n font-family: var(--typography--fontFamily-normal);\n font-weight: 600;\n}\n\n.EEwS0f07RqQ- {\n font-family: var(--typography--fontFamily-normal);\n font-weight: 700;\n}\n\n.kA3NtPPWbP0- {\n font-family: var(--typography--fontFamily-display);\n font-weight: 800;\n}\n\n.jobber-retheme .kA3NtPPWbP0- {\n font-family: var(--typography--fontFamily-normal);\n}\n\n._3M58OLqp0JM- {\n font-family: var(--typography--fontFamily-display);\n font-weight: 900;\n}\n";
|
|
324
327
|
var fontWeights = {"regular":"lziyWzzvuno-","medium":"PVKSijyipP8-","semiBold":"-ch9Z4gIGDg-","bold":"EEwS0f07RqQ-","extraBold":"kA3NtPPWbP0-","black":"_3M58OLqp0JM-"};
|
|
325
|
-
styleInject(css_248z$
|
|
328
|
+
styleInject(css_248z$1D);
|
|
326
329
|
|
|
327
|
-
var css_248z$
|
|
330
|
+
var css_248z$1C = ".xE6cC62h5G0- {\n text-transform: uppercase;\n}\n\n.HlqJJ3Cl7dE- {\n text-transform: lowercase;\n}\n\n.Loe26JnDfco- {\n text-transform: capitalize;\n}\n";
|
|
328
331
|
var textCases = {"uppercase":"xE6cC62h5G0-","lowercase":"HlqJJ3Cl7dE-","capitalize":"Loe26JnDfco-"};
|
|
329
|
-
styleInject(css_248z$
|
|
332
|
+
styleInject(css_248z$1C);
|
|
330
333
|
|
|
331
|
-
var css_248z$
|
|
334
|
+
var css_248z$1B = ".pkqoq2KXY9w- {\n color: var(--color-blue);\n}\n\n.ftVHRSii3ro- {\n color: var(--color-grey);\n}\n\n.FQbGABZWVzA- {\n color: var(--color-greyBlue--dark);\n}\n\n.zQaB9J0-vrs- {\n color: var(--color-greyBlue);\n}\n\n._4-xdzcqT-Us- {\n color: var(--color-green);\n}\n\n.Zp9E7ELPjPA- {\n color: var(--color-red);\n}\n\n.v-Fo4PwPxDI- {\n color: var(--color-yellow);\n}\n\n.YrGUIChAZC0- {\n color: var(--color-yellow--dark);\n}\n\n.r7JcIVoDcTY- {\n color: var(--color-lightBlue);\n}\n\n._6RXTyd198iM- {\n color: var(--color-white);\n}\n\n.fLix4jA-RkU- {\n color: var(--color-heading);\n}\n\n._1g0uMAwFAsk- {\n color: var(--color-text);\n}\n\n.oXqFAHwT6y4- {\n color: var(--color-text--secondary);\n}\n\n.rWkzi9HFNDU- {\n color: var(--color-critical);\n}\n\n.PQLYQKGCmPI- {\n color: var(--color-warning--onSurface);\n}\n\n.L6bBDJrx-m0- {\n color: var(--color-informative--onSurface);\n}\n\n.bJDJJKvmT90- {\n color: var(--color-success--onSurface);\n}\n\n._3g4iYm8XwkM- {\n color: var(--color-disabled);\n}\n";
|
|
332
335
|
var textColors = {"blue":"pkqoq2KXY9w-","grey":"ftVHRSii3ro-","greyBlueDark":"FQbGABZWVzA-","greyBlue":"zQaB9J0-vrs-","green":"_4-xdzcqT-Us-","red":"Zp9E7ELPjPA-","yellow":"v-Fo4PwPxDI-","yellowDark":"YrGUIChAZC0-","lightBlue":"r7JcIVoDcTY-","white":"_6RXTyd198iM-","heading":"fLix4jA-RkU-","text":"_1g0uMAwFAsk-","textSecondary":"oXqFAHwT6y4-","critical":"rWkzi9HFNDU-","warning":"PQLYQKGCmPI-","informative":"L6bBDJrx-m0-","success":"bJDJJKvmT90-","disabled":"_3g4iYm8XwkM-"};
|
|
333
|
-
styleInject(css_248z$
|
|
336
|
+
styleInject(css_248z$1B);
|
|
334
337
|
|
|
335
|
-
var css_248z$
|
|
338
|
+
var css_248z$1A = ".Jys1uy2pQXw- {\n font-style: italic;\n}\n\n.kd2u0dL-if0- {\n display: inline;\n font-family: inherit;\n font-style: normal;\n font-weight: inherit;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 84 8' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.50004C14.6667 4.50004 49.3 0.900038 82.5 2.50004' stroke='%2384EA00' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E\");\n background-position: center bottom;\n background-repeat: no-repeat;\n background-size: 100% 20%;\n}\n";
|
|
336
339
|
var emphasis = {"italic":"Jys1uy2pQXw-","highlight":"kd2u0dL-if0-"};
|
|
337
|
-
styleInject(css_248z$
|
|
340
|
+
styleInject(css_248z$1A);
|
|
338
341
|
|
|
339
|
-
var css_248z$
|
|
342
|
+
var css_248z$1z = ".LUJEfdi3pws- {\n display: -webkit-box !important;\n}\n.LUJEfdi3pws- {\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n";
|
|
340
343
|
var truncate = {"textTruncate":"LUJEfdi3pws-"};
|
|
341
|
-
styleInject(css_248z$
|
|
344
|
+
styleInject(css_248z$1z);
|
|
342
345
|
|
|
343
|
-
var css_248z$
|
|
346
|
+
var css_248z$1y = ".eDMsbRCP0kg- {\n text-align: left;\n}\n\n.j34R9yIG--c- {\n text-align: center;\n}\n\n.CeI75T5sHwM- {\n text-align: right;\n}\n";
|
|
344
347
|
var alignment = {"start":"eDMsbRCP0kg-","center":"j34R9yIG--c-","end":"CeI75T5sHwM-"};
|
|
345
|
-
styleInject(css_248z$
|
|
348
|
+
styleInject(css_248z$1y);
|
|
346
349
|
|
|
347
|
-
var css_248z$
|
|
350
|
+
var css_248z$1x = ".mRpfVoMiIMM- {\n font-family: var(--typography--fontFamily-normal);\n}\n\n.TPtuWMdOsfw- {\n font-family: var(--typography--fontFamily-display);\n}\n";
|
|
348
351
|
var fontFamilies = {"base":"mRpfVoMiIMM-","display":"TPtuWMdOsfw-"};
|
|
349
|
-
styleInject(css_248z$
|
|
352
|
+
styleInject(css_248z$1x);
|
|
350
353
|
|
|
351
354
|
/* eslint-disable import/no-internal-modules */
|
|
352
355
|
function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, }) {
|
|
353
356
|
const shouldTruncateText = numberOfLines && numberOfLines > 0;
|
|
354
|
-
const className = classnames(styles$
|
|
357
|
+
const className = classnames(styles$1k.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
|
|
355
358
|
let truncateLines;
|
|
356
359
|
if (shouldTruncateText) {
|
|
357
360
|
truncateLines = {
|
|
@@ -451,22 +454,22 @@ function Menu$1({ visible, options, selectedOption, onOptionSelect, attachTo, })
|
|
|
451
454
|
const initialHighlight = options.some(detectGroups) ? 1 : 0;
|
|
452
455
|
setupKeyListeners();
|
|
453
456
|
useEffect(() => setHighlightedIndex(initialHighlight), [options]);
|
|
454
|
-
const menu = (React.createElement("div", Object.assign({ className: classnames(styles$
|
|
455
|
-
const optionClass = classnames(styles$
|
|
456
|
-
[styles$
|
|
457
|
-
[styles$
|
|
457
|
+
const menu = (React.createElement("div", Object.assign({ className: classnames(styles$1l.options, { [styles$1l.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }) }, attributes.popper), options.map((option, index) => {
|
|
458
|
+
const optionClass = classnames(styles$1l.option, {
|
|
459
|
+
[styles$1l.active]: index === highlightedIndex,
|
|
460
|
+
[styles$1l.separator]: addSeparators,
|
|
458
461
|
});
|
|
459
462
|
if (isGroup(option)) {
|
|
460
|
-
return (React.createElement("div", { key: option.label, className: styles$
|
|
463
|
+
return (React.createElement("div", { key: option.label, className: styles$1l.heading },
|
|
461
464
|
React.createElement(Heading, { level: 5 }, option.label)));
|
|
462
465
|
}
|
|
463
466
|
return (React.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
|
|
464
|
-
React.createElement("div", { className: styles$
|
|
465
|
-
React.createElement("div", { className: styles$
|
|
466
|
-
React.createElement("div", { className: styles$
|
|
467
|
+
React.createElement("div", { className: styles$1l.icon }, isOptionSelected(selectedOption, option) && (React.createElement(Icon, { name: "checkmark", size: "small" }))),
|
|
468
|
+
React.createElement("div", { className: styles$1l.text },
|
|
469
|
+
React.createElement("div", { className: styles$1l.label },
|
|
467
470
|
React.createElement(Text, null, option.label),
|
|
468
471
|
option.description !== undefined && (React.createElement(Text, { variation: "subdued" }, option.description))),
|
|
469
|
-
option.details !== undefined && (React.createElement("div", { className: styles$
|
|
472
|
+
option.details !== undefined && (React.createElement("div", { className: styles$1l.details },
|
|
470
473
|
React.createElement(Text, null, option.details))))));
|
|
471
474
|
})));
|
|
472
475
|
return createPortal(menu, document.body);
|
|
@@ -535,25 +538,25 @@ function useRepositionMenu$1(attachTo, visible = false) {
|
|
|
535
538
|
return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
|
|
536
539
|
}
|
|
537
540
|
|
|
538
|
-
var css_248z$
|
|
539
|
-
var styles$
|
|
540
|
-
styleInject(css_248z$
|
|
541
|
+
var css_248z$1w = ":root {\n /**\n * These `--public-field` properties are used in other components such\n * as InputGroup, therefore they must stay on :root\n **/\n --public-field--top-left-radius: var(--radius-base);\n --public-field--top-right-radius: var(--radius-base);\n --public-field--bottom-left-radius: var(--radius-base);\n --public-field--bottom-right-radius: var(--radius-base);\n\n --field--placeholder-color: var(--color-greyBlue--light);\n --field--value-color: var(--color-heading);\n --field--border-color: var(--color-border);\n}\n\n.geR7qBhrMfk- {\n width: 100%;\n}\n\n/**\n * Wrapper\n **/\n\n.nPGhTEEzsoU- {\n --field--placeholder-offset: 50%;\n --field--placeholder-transform: -50%;\n\n --field--textAlign: left;\n\n --field--height: var(--space-largest);\n\n --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n --field--padding-left: var(--space-base);\n --field--padding-right: var(--space-base);\n\n --field--value-lineHeight: calc(var(--base-unit) * 1.25);\n\n --field--background-color: var(--color-surface);\n\n --field--base-elevation: var(--elevation-base);\n --field--label-elevation: calc(var(--field--base-elevation) + 1);\n --field--postfix-elevation: calc(var(--field--base-elevation) - 1);\n --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);\n\n display: -ms-flexbox;\n\n display: flex;\n width: 100%;\n height: var(--space-largest);\n height: var(--field--height);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--field--border-color);\n border-radius: var(--radius-base);\n border-top-right-radius: var(--radius-base);\n border-top-right-radius: var(--public-field--top-right-radius);\n border-bottom-right-radius: var(--radius-base);\n border-bottom-right-radius: var(--public-field--bottom-right-radius);\n border-bottom-left-radius: var(--radius-base);\n border-bottom-left-radius: var(--public-field--bottom-left-radius);\n border-top-left-radius: var(--radius-base);\n border-top-left-radius: var(--public-field--top-left-radius);\n color: var(--color-heading);\n color: var(--field--value-color);\n font-size: var(--typography--fontSize-base);\n background-color: var(--color-surface);\n background-color: var(--field--background-color);\n}\n\n.nPGhTEEzsoU- * {\n box-sizing: border-box;\n}\n\n.nPGhTEEzsoU-:focus-within {\n position: relative;\n z-index: var(--field--base-elevation);\n box-shadow: var(--shadow-focus);\n}\n\n.YhserUiOeFE-:not(:focus-within) input {\n color: var(--field--background-color);\n -webkit-text-fill-color: var(--field--background-color);\n}\n\n.YhserUiOeFE-:focus-within,\n.UIZq8hTmJVU- {\n --field--placeholder-color: var(--color-text--secondary);\n --field--placeholder-offset: var(--space-smallest);\n --field--placeholder-transform: 0;\n --field--padding-top: calc(var(--space-base) + var(--space-smaller));\n --field--padding-bottom: var(--space-small);\n}\n\n.YhserUiOeFE-.Ku8sWS0mLew-:focus-within,\n.UIZq8hTmJVU-.Ku8sWS0mLew- {\n --field--padding-top: calc(var(--space-large) + var(--space-smaller));\n}\n\n.nPGhTEEzsoU-.mgPacJ6Z71Y- {\n --field--placeholder-offset: 0;\n --field--placeholder-transform: 0;\n height: auto;\n min-height: auto;\n}\n\n.gJ-15M615eY-,\n.gJ-15M615eY-:focus-within {\n --field--border-color: var(--color-critical);\n position: relative;\n}\n\n._1rsTLm5GwcM- {\n --field--placeholder-color: var(--color-disabled);\n --field--value-color: var(--color-disabled);\n --field--background-color: var(--color-surface--background);\n --field--border-color: var(--color-disabled--secondary);\n}\n\n/* override iOS default styling for disabled input */\n\n._1rsTLm5GwcM- :disabled {\n -webkit-text-fill-color: var(--color-heading);\n -webkit-text-fill-color: var(--field--value-color);\n opacity: 1;\n}\n\n.o8D-H-lKfDk- {\n --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n --field--padding-top: var(--space-small);\n --field--padding-bottom: var(--space-small);\n --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.Ku8sWS0mLew- {\n --field--padding-left: var(--space-large);\n --field--padding-right: var(--space-large);\n --field--height: calc(var(--space-extravagant));\n}\n\n._5Hu2F3cBvng- {\n display: inline-block;\n width: auto;\n}\n\n.s1WLQs6ffD8- {\n --field--textAlign: center;\n}\n\n.a2r4QheWYIA- {\n --field--textAlign: right;\n}\n\n/**\n * The custom property --formField-maxLength is getting defined inside the\n * component.\n */\n\n.KdAnXK1gClo- {\n width: calc(\n (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +\n var(--field--padding-right)\n );\n}\n\n/**\n * Input Wrapper\n **/\n\n.iQFhpFYnz-8- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 1;\n flex: 1;\n position: relative;\n /* Ensure input stays with the rest of the element stack */\n z-index: var(--elevation-default);\n}\n\n.Yo2Wi9dpa-Y- {\n position: relative;\n -ms-flex: 1;\n flex: 1;\n}\n\n/**\n * Input\n **/\n\n.LSHPV7PwOTg- {\n position: relative;\n z-index: var(--field--base-elevation);\n width: 100%;\n height: 100%;\n padding-top: var(--field--padding-top);\n padding-bottom: var(--field--padding-bottom);\n padding-left: var(--field--padding-left);\n padding-right: var(--field--padding-right);\n border: none;\n border-radius: 0;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: var(--field--value-lineHeight);\n text-align: var(--field--textAlign);\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.LSHPV7PwOTg-:focus {\n outline: none;\n}\n\n.mgPacJ6Z71Y- .LSHPV7PwOTg- {\n resize: vertical;\n}\n\n.i31GQXcMz54- .LSHPV7PwOTg- {\n z-index: var(--field--label-elevation);\n}\n\n.LSHPV7PwOTg-:-webkit-autofill,\n.LSHPV7PwOTg-:-webkit-autofill:hover,\n.LSHPV7PwOTg-:-webkit-autofill:focus,\n.LSHPV7PwOTg-:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;\n}\n\n/**\n * Label\n **/\n\n._3xREbTN5pPg- {\n position: absolute;\n top: var(--field--placeholder-offset);\n z-index: var(--field--label-elevation);\n width: 100%;\n padding-left: var(--field--padding-left);\n padding-right: var(--field--padding-right);\n overflow: hidden;\n color: var(--color-greyBlue--light);\n color: var(--field--placeholder-color);\n line-height: var(--field--value-lineHeight);\n text-align: var(--field--textAlign);\n text-overflow: ellipsis;\n white-space: nowrap;\n pointer-events: none;\n -webkit-transform: translateY(var(--field--placeholder-transform));\n transform: translateY(var(--field--placeholder-transform));\n transition: all var(--timing-quick);\n}\n\n.mgPacJ6Z71Y- ._3xREbTN5pPg- {\n /* Changes the width so that the scrollbar on the textarea doesn't get cut off */\n width: calc(100% - var(--field--padding-right));\n padding-top: var(--field--padding-top);\n /* Remove padding on right to make use of the entire width */\n padding-right: 0;\n -webkit-transform: translateY(--field--placeholder-transform);\n transform: translateY(--field--placeholder-transform);\n}\n\n.UIZq8hTmJVU- ._3xREbTN5pPg-,\n.YhserUiOeFE-:focus-within ._3xREbTN5pPg- {\n font-size: var(--typography--fontSize-small);\n}\n\n.mgPacJ6Z71Y-.UIZq8hTmJVU- ._3xREbTN5pPg- {\n padding-top: var(--space-smallest);\n background-color: var(--field--background-color);\n}\n\n.o8D-H-lKfDk-.UIZq8hTmJVU- ._3xREbTN5pPg-,\n.YhserUiOeFE-.o8D-H-lKfDk-.UIZq8hTmJVU-:focus-within ._3xREbTN5pPg- {\n display: none;\n}\n\n/**This is valid cascading order **/\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.Ku8sWS0mLew-.UIZq8hTmJVU- ._3xREbTN5pPg-,\n.YhserUiOeFE-.Ku8sWS0mLew-.UIZq8hTmJVU-:focus-within ._3xREbTN5pPg- {\n padding-top: var(--space-small);\n}\n\n/**\n * Postfix\n **/\n\n.VtnAk1HYMMk- {\n position: absolute;\n top: 50%;\n right: var(--space-base);\n z-index: var(--field--postfix-elevation);\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n\n/**\n * Affix\n **/\n\n.uPLklxvtfJw- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 0 calc(var(--field--padding-left) * -1) 0 0;\n padding: 0 var(--field--padding-right) 0 var(--field--padding-left);\n}\n\n@supports (aspect-ratio: 1/1) {\n .uPLklxvtfJw- {\n /*\n * disabling property-no-unknown here as this is a real property\n * that stylelint just doesn't know about. We may be able to remove\n * this when we update our stylelint to not care about IE11.\n */\n /* stylelint-disable-next-line property-no-unknown */\n aspect-ratio: 1/1;\n padding: 0;\n }\n}\n\n.uPLklxvtfJw-.pYqqDvv57JE- {\n margin: 0 0 0 calc(var(--field--padding-right) * -1);\n}\n\n.uPLklxvtfJw-.eI44oQpuVlk- {\n position: relative;\n z-index: var(--field--postfix-action-elevation);\n}\n\n.jO8P2iSHilM- {\n display: -ms-flexbox;\n display: flex;\n margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;\n padding: 0 0 0 var(--field--padding-left);\n line-height: var(--field--value-lineHeight);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n}\n\n.jO8P2iSHilM-.pYqqDvv57JE- {\n margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);\n padding: 0 var(--field--padding-left) 0 0;\n}\n\n.UIZq8hTmJVU-:not(.o8D-H-lKfDk-) .jO8P2iSHilM- {\n padding-top: var(--field--padding-top);\n padding-bottom: var(--field--padding-bottom);\n}\n\n._2GfgzNnLOSI- {\n margin-top: var(--space-smaller);\n}\n";
|
|
542
|
+
var styles$1j = {"container":"geR7qBhrMfk-","wrapper":"nPGhTEEzsoU-","timeInputLabel":"YhserUiOeFE-","miniLabel":"UIZq8hTmJVU-","large":"Ku8sWS0mLew-","textarea":"mgPacJ6Z71Y-","invalid":"gJ-15M615eY-","disabled":"_1rsTLm5GwcM-","small":"o8D-H-lKfDk-","inline":"_5Hu2F3cBvng-","center":"s1WLQs6ffD8-","right":"a2r4QheWYIA-","maxLength":"KdAnXK1gClo-","inputWrapper":"iQFhpFYnz-8-","childrenWrapper":"Yo2Wi9dpa-Y-","input":"LSHPV7PwOTg-","select":"i31GQXcMz54-","label":"_3xREbTN5pPg-","postfix":"VtnAk1HYMMk-","affixIcon":"uPLklxvtfJw-","suffix":"pYqqDvv57JE-","hasAction":"eI44oQpuVlk-","affixLabel":"jO8P2iSHilM-","description":"_2GfgzNnLOSI-"};
|
|
543
|
+
styleInject(css_248z$1w);
|
|
541
544
|
|
|
542
|
-
var css_248z$1u = ":root {\n --button--color-variation: var(--color-interactive);\n --button--color-variation--hover: var(--color-interactive--hover);\n --button--color-surface: var(--color-surface);\n --button--color-surface--hover: var(--color-surface--hover);\n --button--color-primaryLabel: var(--color-surface);\n\n --button--duration-loading: var(--timing-loading--extended);\n}\n\n.U9VsquOtk2I- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n min-height: calc(var(--base-unit) * 2.25);\n box-sizing: border-box;\n margin: 0;\n border: var(--border-base) solid var(--color-interactive);\n border: var(--border-base) solid var(--button--color-variation);\n border-radius: var(--radius-base);\n color: var(--color-interactive);\n color: var(--button--color-variation);\n -webkit-font-smoothing: antialiased;\n letter-spacing: var(--typography--letterSpacing-loose);\n text-align: center;\n -webkit-text-decoration: none;\n text-decoration: none;\n vertical-align: middle;\n background-color: var(--color-surface);\n background-color: var(--button--color-surface);\n cursor: pointer;\n transition: all var(--timing-base) ease-out;\n -webkit-appearance: none;\n appearance: none;\n fill: var(--color-interactive);\n fill: var(--button--color-variation);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.jobber-retheme .U9VsquOtk2I- {\n min-height: calc(var(--base-unit) * 2.5);\n}\n\n.U9VsquOtk2I- * {\n fill: inherit !important;\n}\n\n.U9VsquOtk2I- * {\n color: inherit;\n /* required to over-ride very specific fill from <Icon> */\n}\n\n.jobber-retheme .U9VsquOtk2I- * {\n font-weight: 600 !important;\n}\n\n.jobber-retheme .U9VsquOtk2I- * {\n line-height: 1;\n letter-spacing: 0;\n /* post-retheme this can move into the TSX on L177 */\n}\n\n.U9VsquOtk2I-:hover,\na.U9VsquOtk2I-:hover,\n.U9VsquOtk2I-:focus-visible,\na.U9VsquOtk2I-:focus-visible,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n border-color: var(--color-interactive--hover);\n border-color: var(--button--color-variation--hover);\n color: var(--color-interactive--hover);\n color: var(--button--color-variation--hover);\n fill: var(--color-interactive--hover);\n fill: var(--button--color-variation--hover);\n background-color: var(--color-surface--hover);\n background-color: var(--button--color-surface--hover);\n}\n\n.U9VsquOtk2I-:focus-visible,\na.U9VsquOtk2I-:focus-visible,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n box-shadow: var(--shadow-focus);\n outline: transparent;\n}\n\n/* Variation */\n\n.qkFQwI0PKfw- {\n --button--color-variation: var(--color-interactive);\n --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n.jsKQEOBdJ0k- {\n --button--color-variation: var(--color-informative);\n --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n.jobber-retheme .jsKQEOBdJ0k- {\n --button--color-variation: var(--color-interactive--subtle);\n --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n._4W8X0dxZDK4- {\n --button--color-variation: var(--color-destructive);\n --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n.vDKO-cmh8vY- {\n --button--color-variation: var(--color-interactive--subtle);\n --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-),\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus-visible {\n color: var(--color-surface);\n color: var(--button--color-primaryLabel);\n background-color: var(--color-interactive);\n background-color: var(--button--color-variation);\n fill: var(--color-surface);\n fill: var(--button--color-primaryLabel);\n}\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus-visible {\n background-color: var(--color-interactive--hover);\n background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n color: var(--color-interactive);\n color: var(--button--color-variation);\n fill: var(--color-interactive);\n fill: var(--button--color-variation);\n background-color: var(--color-surface);\n background-color: var(--button--color-surface);\n}\n\n.pf6G840lKdA-,\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n border-color: var(--color-interactive);\n border-color: var(--button--color-variation);\n}\n\n.jobber-retheme .pf6G840lKdA-,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo- {\n border-color: var(--color-border);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n color: var(--color-interactive--hover);\n color: var(--button--color-variation--hover);\n background-color: var(--color-surface--hover);\n background-color: var(--button--color-surface--hover);\n fill: var(--color-interactive--hover);\n fill: var(--button--color-variation--hover);\n}\n\n.jobber-retheme .pf6G840lKdA-:hover,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.jobber-retheme .pf6G840lKdA-:focus-visible,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n border-color: var(--color-interactive--hover);\n border-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA- {\n background-color: var(--color-surface);\n background-color: var(--button--color-surface);\n}\n\n.m7DbwRZWcNk-,\n.vDKO-cmh8vY-.pf6G840lKdA- {\n border-color: transparent;\n}\n\n.jobber-retheme .m7DbwRZWcNk- {\n border-color: var(--color-border);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {\n background-color: var(--color-surface--hover);\n background-color: var(--button--color-surface--hover);\n}\n\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus-visible,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus-visible,\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {\n border-color: transparent;\n}\n\n.jobber-retheme .m7DbwRZWcNk-:hover,\n.jobber-retheme .m7DbwRZWcNk-:focus-visible,\n.jobber-retheme a.m7DbwRZWcNk-:hover,\n.jobber-retheme a.m7DbwRZWcNk-:focus-visible {\n border-color: var(--color-interactive--hover);\n border-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk- {\n border-color: transparent;\n background-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\n.vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible {\n border-color: transparent;\n color: var(--color-interactive--subtle--hover);\n fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.U9VsquOtk2I-.bg-l22drjd0-,\na.U9VsquOtk2I-.bg-l22drjd0-,\n.U9VsquOtk2I-.bg-l22drjd0-:hover,\na.U9VsquOtk2I-.bg-l22drjd0-:hover {\n border-color: var(--color-disabled--secondary);\n color: var(--color-disabled);\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: var(--color-disabled--secondary);\n fill: var(--color-disabled);\n pointer-events: none;\n cursor: not-allowed;\n}\n\n/* Sizes */\n\n.STSDgSRREx4- {\n min-height: calc(var(--base-unit) * 1.5);\n padding: 0 var(--space-small);\n letter-spacing: 0;\n}\n\n.jobber-retheme .STSDgSRREx4- {\n min-height: var(--space-large);\n padding: var(--space-small) calc(var(--space-base) - var(--space-smaller));\n}\n\n.jobber-retheme .STSDgSRREx4- span {\n font-size: var(--typography--fontSize-base);\n}\n\n.amIh7vPETfo- {\n padding: 0 calc(var(--space-base) - var(--space-smaller));\n}\n\n.jobber-retheme .amIh7vPETfo- {\n padding: 0 var(--space-base);\n}\n\n.ON6ezOojFVo- {\n min-height: calc(var(--base-unit) * 3);\n padding: 0 var(--space-base);\n}\n\n.jobber-retheme .ON6ezOojFVo- {\n min-height: calc(var(--base-unit) * 3);\n padding: 0 calc(var(--space-base) + var(--space-smaller));\n}\n\n/* Icon */\n\n.U9VsquOtk2I- svg {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n.Qq-idRLJTCk- {\n width: calc(var(--base-unit) * 2.25);\n padding: 0;\n}\n\n.Qq-idRLJTCk-.STSDgSRREx4- {\n width: calc(var(--space-small) * 3);\n}\n\n.Qq-idRLJTCk-.amIh7vPETfo- {\n width: calc(var(--space-base) * 2.25);\n}\n\n.jobber-retheme .Qq-idRLJTCk-.amIh7vPETfo- {\n width: calc(var(--space-base) * 2.5);\n}\n\n.Qq-idRLJTCk-.ON6ezOojFVo- {\n width: calc(var(--space-large) * 2);\n}\n\n.EWh1gvgPJQg- {\n width: auto;\n gap: var(--space-small);\n}\n\n.jobber-retheme .EWh1gvgPJQg- {\n gap: var(--space-smaller);\n}\n\n/* Don't want to move things that will update after re-theme */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.EWh1gvgPJQg- > * {\n text-align: left;\n}\n\n.pfzTUMgNb3o- > *:first-child {\n -ms-flex-order: 1;\n order: 1;\n}\n\n.jobber-retheme .EWh1gvgPJQg- > *:first-child {\n margin-left: calc(var(--space-smaller) * -1);\n}\n\n.jobber-retheme .pfzTUMgNb3o- > *:first-child {\n margin-left: 0;\n margin-right: calc(var(--space-smaller) * -1);\n}\n\n.ZCHqCEyLBw0- {\n width: 100%;\n}\n\n.VVFKEv1ksMA- {\n background-image: linear-gradient(\n 135deg,\n rgba(0, 0, 0, 0.1) 0%,\n rgba(0, 0, 0, 0.1) 25%,\n transparent 25%,\n transparent 50%,\n rgba(0, 0, 0, 0.1) 50%,\n rgba(0, 0, 0, 0.1) 75%,\n transparent 75%,\n transparent 100%\n );\n background-size: var(--space-larger) var(--space-larger);\n pointer-events: none;\n cursor: not-allowed;\n -webkit-animation-duration: var(--timing-loading--extended);\n -webkit-animation-duration: var(--button--duration-loading);\n animation-duration: var(--timing-loading--extended);\n animation-duration: var(--button--duration-loading);\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: a8Q-0lnKH5M-;\n animation-name: a8Q-0lnKH5M-;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n}\n\n.FXqN12jWtPo-.VVFKEv1ksMA-:not(.vDKO-cmh8vY-) {\n background-image: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.25) 0%,\n rgba(255, 255, 255, 0.25) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.25) 50%,\n rgba(255, 255, 255, 0.25) 75%,\n transparent 75%,\n transparent 100%\n );\n}\n\n@-webkit-keyframes a8Q-0lnKH5M- {\n 0% {\n background-position: 0 0;\n }\n\n 100% {\n background-position: var(--space-larger) var(--space-larger);\n }\n}\n\n@keyframes a8Q-0lnKH5M- {\n 0% {\n background-position: 0 0;\n }\n\n 100% {\n background-position: var(--space-larger) var(--space-larger);\n }\n}\n";
|
|
543
|
-
var styles$
|
|
544
|
-
styleInject(css_248z$
|
|
545
|
+
var css_248z$1v = ":root {\n --button--color-variation: var(--color-interactive);\n --button--color-variation--hover: var(--color-interactive--hover);\n --button--color-surface: var(--color-surface);\n --button--color-surface--hover: var(--color-surface--hover);\n --button--color-primaryLabel: var(--color-surface);\n\n --button--duration-loading: var(--timing-loading--extended);\n}\n\n.U9VsquOtk2I- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n min-height: calc(var(--base-unit) * 2.25);\n box-sizing: border-box;\n margin: 0;\n border: var(--border-base) solid var(--color-interactive);\n border: var(--border-base) solid var(--button--color-variation);\n border-radius: var(--radius-base);\n color: var(--color-interactive);\n color: var(--button--color-variation);\n -webkit-font-smoothing: antialiased;\n letter-spacing: var(--typography--letterSpacing-loose);\n text-align: center;\n -webkit-text-decoration: none;\n text-decoration: none;\n vertical-align: middle;\n background-color: var(--color-surface);\n background-color: var(--button--color-surface);\n cursor: pointer;\n transition: all var(--timing-base) ease-out;\n -webkit-appearance: none;\n appearance: none;\n fill: var(--color-interactive);\n fill: var(--button--color-variation);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.jobber-retheme .U9VsquOtk2I- {\n min-height: calc(var(--base-unit) * 2.5);\n}\n\n.U9VsquOtk2I- * {\n fill: inherit !important;\n}\n\n.U9VsquOtk2I- * {\n color: inherit;\n /* required to over-ride very specific fill from <Icon> */\n}\n\n.jobber-retheme .U9VsquOtk2I- * {\n font-weight: 600 !important;\n}\n\n.jobber-retheme .U9VsquOtk2I- * {\n line-height: 1;\n letter-spacing: 0;\n /* post-retheme this can move into the TSX on L177 */\n}\n\n.U9VsquOtk2I-:hover,\na.U9VsquOtk2I-:hover,\n.U9VsquOtk2I-:focus-visible,\na.U9VsquOtk2I-:focus-visible,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n border-color: var(--color-interactive--hover);\n border-color: var(--button--color-variation--hover);\n color: var(--color-interactive--hover);\n color: var(--button--color-variation--hover);\n fill: var(--color-interactive--hover);\n fill: var(--button--color-variation--hover);\n background-color: var(--color-surface--hover);\n background-color: var(--button--color-surface--hover);\n}\n\n.U9VsquOtk2I-:focus-visible,\na.U9VsquOtk2I-:focus-visible,\n.U9VsquOtk2I-:active,\na.U9VsquOtk2I-:active {\n box-shadow: var(--shadow-focus);\n outline: transparent;\n}\n\n/* Variation */\n\n.qkFQwI0PKfw- {\n --button--color-variation: var(--color-interactive);\n --button--color-variation--hover: var(--color-interactive--hover);\n}\n\n.jsKQEOBdJ0k- {\n --button--color-variation: var(--color-informative);\n --button--color-variation--hover: var(--color-informative--onSurface);\n}\n\n.jobber-retheme .jsKQEOBdJ0k- {\n --button--color-variation: var(--color-interactive--subtle);\n --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n._4W8X0dxZDK4- {\n --button--color-variation: var(--color-destructive);\n --button--color-variation--hover: var(--color-destructive--hover);\n}\n\n/* Subtle is special because, by default, it's styled as a secondary button */\n\n.vDKO-cmh8vY- {\n --button--color-variation: var(--color-interactive--subtle);\n --button--color-variation--hover: var(--color-interactive--subtle--hover);\n}\n\n/* Type */\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-),\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus-visible {\n color: var(--color-surface);\n color: var(--button--color-primaryLabel);\n background-color: var(--color-interactive);\n background-color: var(--button--color-variation);\n fill: var(--color-surface);\n fill: var(--button--color-primaryLabel);\n}\n\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):hover,\n.FXqN12jWtPo-:not(.vDKO-cmh8vY-):not(.bg-l22drjd0-):focus-visible {\n background-color: var(--color-interactive--hover);\n background-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n color: var(--color-interactive);\n color: var(--button--color-variation);\n fill: var(--color-interactive);\n fill: var(--button--color-variation);\n background-color: var(--color-surface);\n background-color: var(--button--color-surface);\n}\n\n.pf6G840lKdA-,\n.vDKO-cmh8vY-.FXqN12jWtPo- {\n border-color: var(--color-interactive);\n border-color: var(--button--color-variation);\n}\n\n.jobber-retheme .pf6G840lKdA-,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo- {\n border-color: var(--color-border);\n}\n\n.vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n color: var(--color-interactive--hover);\n color: var(--button--color-variation--hover);\n background-color: var(--color-surface--hover);\n background-color: var(--button--color-surface--hover);\n fill: var(--color-interactive--hover);\n fill: var(--button--color-variation--hover);\n}\n\n.jobber-retheme .pf6G840lKdA-:hover,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo-:hover,\n.jobber-retheme .pf6G840lKdA-:focus-visible,\n.jobber-retheme .vDKO-cmh8vY-.FXqN12jWtPo-:focus-visible {\n border-color: var(--color-interactive--hover);\n border-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA- {\n background-color: var(--color-surface);\n background-color: var(--button--color-surface);\n}\n\n.m7DbwRZWcNk-,\n.vDKO-cmh8vY-.pf6G840lKdA- {\n border-color: transparent;\n}\n\n.jobber-retheme .m7DbwRZWcNk- {\n border-color: var(--color-border);\n}\n\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {\n background-color: var(--color-surface--hover);\n background-color: var(--button--color-surface--hover);\n}\n\n.m7DbwRZWcNk-:hover,\n.m7DbwRZWcNk-:focus-visible,\na.m7DbwRZWcNk-:hover,\na.m7DbwRZWcNk-:focus-visible,\n.vDKO-cmh8vY-.pf6G840lKdA-:hover,\n.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible,\na.vDKO-cmh8vY-.pf6G840lKdA-:hover,\na.vDKO-cmh8vY-.pf6G840lKdA-:focus-visible {\n border-color: transparent;\n}\n\n.jobber-retheme .m7DbwRZWcNk-:hover,\n.jobber-retheme .m7DbwRZWcNk-:focus-visible,\n.jobber-retheme a.m7DbwRZWcNk-:hover,\n.jobber-retheme a.m7DbwRZWcNk-:focus-visible {\n border-color: var(--color-interactive--hover);\n border-color: var(--button--color-variation--hover);\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk- {\n border-color: transparent;\n background-color: transparent;\n}\n\n.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\n.vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:hover,\na.vDKO-cmh8vY-.m7DbwRZWcNk-:focus-visible {\n border-color: transparent;\n color: var(--color-interactive--subtle--hover);\n fill: var(--color-interactive--subtle--hover);\n}\n\n/* Disabled */\n\n.U9VsquOtk2I-.bg-l22drjd0-,\na.U9VsquOtk2I-.bg-l22drjd0-,\n.U9VsquOtk2I-.bg-l22drjd0-:hover,\na.U9VsquOtk2I-.bg-l22drjd0-:hover {\n border-color: var(--color-disabled--secondary);\n color: var(--color-disabled);\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-color: var(--color-disabled--secondary);\n fill: var(--color-disabled);\n pointer-events: none;\n cursor: not-allowed;\n}\n\n/* Sizes */\n\n.STSDgSRREx4- {\n min-height: calc(var(--base-unit) * 1.5);\n padding: 0 var(--space-small);\n letter-spacing: 0;\n}\n\n.jobber-retheme .STSDgSRREx4- {\n min-height: var(--space-large);\n padding: var(--space-small) calc(var(--space-base) - var(--space-smaller));\n}\n\n.jobber-retheme .STSDgSRREx4- span {\n font-size: var(--typography--fontSize-base);\n}\n\n.amIh7vPETfo- {\n padding: 0 calc(var(--space-base) - var(--space-smaller));\n}\n\n.jobber-retheme .amIh7vPETfo- {\n padding: 0 var(--space-base);\n}\n\n.ON6ezOojFVo- {\n min-height: calc(var(--base-unit) * 3);\n padding: 0 var(--space-base);\n}\n\n.jobber-retheme .ON6ezOojFVo- {\n min-height: calc(var(--base-unit) * 3);\n padding: 0 calc(var(--space-base) + var(--space-smaller));\n}\n\n/* Icon */\n\n.U9VsquOtk2I- svg {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n.Qq-idRLJTCk- {\n width: calc(var(--base-unit) * 2.25);\n padding: 0;\n}\n\n.Qq-idRLJTCk-.STSDgSRREx4- {\n width: calc(var(--space-small) * 3);\n}\n\n.Qq-idRLJTCk-.amIh7vPETfo- {\n width: calc(var(--space-base) * 2.25);\n}\n\n.jobber-retheme .Qq-idRLJTCk-.amIh7vPETfo- {\n width: calc(var(--space-base) * 2.5);\n}\n\n.Qq-idRLJTCk-.ON6ezOojFVo- {\n width: calc(var(--space-large) * 2);\n}\n\n.EWh1gvgPJQg- {\n width: auto;\n gap: var(--space-small);\n}\n\n.jobber-retheme .EWh1gvgPJQg- {\n gap: var(--space-smaller);\n}\n\n/* Don't want to move things that will update after re-theme */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.EWh1gvgPJQg- > * {\n text-align: left;\n}\n\n.pfzTUMgNb3o- > *:first-child {\n -ms-flex-order: 1;\n order: 1;\n}\n\n.jobber-retheme .EWh1gvgPJQg- > *:first-child {\n margin-left: calc(var(--space-smaller) * -1);\n}\n\n.jobber-retheme .pfzTUMgNb3o- > *:first-child {\n margin-left: 0;\n margin-right: calc(var(--space-smaller) * -1);\n}\n\n.ZCHqCEyLBw0- {\n width: 100%;\n}\n\n.VVFKEv1ksMA- {\n background-image: linear-gradient(\n 135deg,\n rgba(0, 0, 0, 0.1) 0%,\n rgba(0, 0, 0, 0.1) 25%,\n transparent 25%,\n transparent 50%,\n rgba(0, 0, 0, 0.1) 50%,\n rgba(0, 0, 0, 0.1) 75%,\n transparent 75%,\n transparent 100%\n );\n background-size: var(--space-larger) var(--space-larger);\n pointer-events: none;\n cursor: not-allowed;\n -webkit-animation-duration: var(--timing-loading--extended);\n -webkit-animation-duration: var(--button--duration-loading);\n animation-duration: var(--timing-loading--extended);\n animation-duration: var(--button--duration-loading);\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: a8Q-0lnKH5M-;\n animation-name: a8Q-0lnKH5M-;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n}\n\n.FXqN12jWtPo-.VVFKEv1ksMA-:not(.vDKO-cmh8vY-) {\n background-image: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.25) 0%,\n rgba(255, 255, 255, 0.25) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.25) 50%,\n rgba(255, 255, 255, 0.25) 75%,\n transparent 75%,\n transparent 100%\n );\n}\n\n@-webkit-keyframes a8Q-0lnKH5M- {\n 0% {\n background-position: 0 0;\n }\n\n 100% {\n background-position: var(--space-larger) var(--space-larger);\n }\n}\n\n@keyframes a8Q-0lnKH5M- {\n 0% {\n background-position: 0 0;\n }\n\n 100% {\n background-position: var(--space-larger) var(--space-larger);\n }\n}\n";
|
|
546
|
+
var styles$1i = {"button":"U9VsquOtk2I-","work":"qkFQwI0PKfw-","learning":"jsKQEOBdJ0k-","destructive":"_4W8X0dxZDK4-","subtle":"vDKO-cmh8vY-","primary":"FXqN12jWtPo-","disabled":"bg-l22drjd0-","secondary":"pf6G840lKdA-","tertiary":"m7DbwRZWcNk-","small":"STSDgSRREx4-","base":"amIh7vPETfo-","large":"ON6ezOojFVo-","onlyIcon":"Qq-idRLJTCk-","hasIconAndLabel":"EWh1gvgPJQg-","iconOnRight":"pfzTUMgNb3o-","fullWidth":"ZCHqCEyLBw0-","loading":"VVFKEv1ksMA-","animateStripes":"a8Q-0lnKH5M-"};
|
|
547
|
+
styleInject(css_248z$1v);
|
|
545
548
|
|
|
546
549
|
function Button(props) {
|
|
547
550
|
const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, fullWidth, icon, label, iconOnRight, id, loading, onClick, onMouseDown, role, size = "base", type = "primary", url, to, variation = "work", submit, } = props;
|
|
548
|
-
const buttonClassNames = classnames(styles$
|
|
549
|
-
[styles$
|
|
550
|
-
[styles$
|
|
551
|
-
[styles$
|
|
552
|
-
[styles$
|
|
553
|
-
[styles$
|
|
554
|
-
[styles$
|
|
555
|
-
[styles$
|
|
556
|
-
[styles$
|
|
551
|
+
const buttonClassNames = classnames(styles$1i.button, styles$1i[size], {
|
|
552
|
+
[styles$1i.onlyIcon]: icon && !label,
|
|
553
|
+
[styles$1i.hasIconAndLabel]: icon && label,
|
|
554
|
+
[styles$1i.iconOnRight]: iconOnRight,
|
|
555
|
+
[styles$1i[variation]]: variation,
|
|
556
|
+
[styles$1i[type]]: type,
|
|
557
|
+
[styles$1i.disabled]: disabled,
|
|
558
|
+
[styles$1i.fullWidth]: fullWidth,
|
|
559
|
+
[styles$1i.loading]: loading,
|
|
557
560
|
});
|
|
558
561
|
const buttonType = submit ? "submit" : "button";
|
|
559
562
|
const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
|
|
@@ -582,15 +585,15 @@ function getTypeSizes(size) {
|
|
|
582
585
|
}
|
|
583
586
|
|
|
584
587
|
function AffixLabel({ label, variation = "prefix", labelRef, }) {
|
|
585
|
-
const affixLabelClass = classnames(styles$
|
|
586
|
-
[styles$
|
|
588
|
+
const affixLabelClass = classnames(styles$1j.affixLabel, {
|
|
589
|
+
[styles$1j.suffix]: variation === "suffix",
|
|
587
590
|
});
|
|
588
591
|
return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
|
|
589
592
|
}
|
|
590
593
|
function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
|
|
591
|
-
const affixIconClass = classnames(styles$
|
|
592
|
-
[styles$
|
|
593
|
-
[styles$
|
|
594
|
+
const affixIconClass = classnames(styles$1j.affixIcon, {
|
|
595
|
+
[styles$1j.suffix]: variation === "suffix",
|
|
596
|
+
[styles$1j.hasAction]: onClick,
|
|
594
597
|
});
|
|
595
598
|
const iconSize = size === "small" ? "small" : "base";
|
|
596
599
|
if (!icon)
|
|
@@ -609,23 +612,23 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
|
|
|
609
612
|
}
|
|
610
613
|
|
|
611
614
|
function FormFieldDescription({ id, description, }) {
|
|
612
|
-
return (React.createElement("div", { id: id, className: styles$
|
|
615
|
+
return (React.createElement("div", { id: id, className: styles$1j.description },
|
|
613
616
|
React.createElement(Text, { size: "small", variation: "subdued" }, description)));
|
|
614
617
|
}
|
|
615
618
|
|
|
616
|
-
var css_248z$
|
|
617
|
-
var styles$
|
|
618
|
-
styleInject(css_248z$
|
|
619
|
+
var css_248z$1u = "._07kZJ5ltI5E- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding-left: var(--space-small);\n}\n\n.t1fFX8kDJh8- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n right: var(--space-small);\n z-index: var(--elevation-tooltip);\n width: var(--space-large);\n height: var(--space-large);\n padding: 0;\n border: none;\n border-radius: var(--radius-circle);\n background-color: var(--color-surface--background);\n cursor: pointer;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.t1fFX8kDJh8-:focus {\n outline: none;\n}\n\n.t1fFX8kDJh8-:hover,\n.t1fFX8kDJh8-:focus-visible {\n outline: none;\n background-color: var(--color-surface--background);\n}\n\n.t1fFX8kDJh8-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n";
|
|
620
|
+
var styles$1h = {"clearContainer":"_07kZJ5ltI5E-","clearInput":"t1fFX8kDJh8-"};
|
|
621
|
+
styleInject(css_248z$1u);
|
|
619
622
|
|
|
620
623
|
function ClearAction({ onClick }) {
|
|
621
|
-
return (React.createElement("div", { className: styles$
|
|
622
|
-
React.createElement("button", { className: styles$
|
|
624
|
+
return (React.createElement("div", { className: styles$1h.clearContainer },
|
|
625
|
+
React.createElement("button", { className: styles$1h.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input" },
|
|
623
626
|
React.createElement(Icon, { name: "remove", size: "small" }))));
|
|
624
627
|
}
|
|
625
628
|
|
|
626
|
-
var css_248z$
|
|
627
|
-
var styles$
|
|
628
|
-
styleInject(css_248z$
|
|
629
|
+
var css_248z$1t = ".sc-bFJieXBA- {\n margin-top: var(--space-smaller);\n}\n\n.xybhC5Y6mk4- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding: var(--space-smaller);\n padding-left: 0;\n}\n\n.xybhC5Y6mk4- > svg {\n margin-right: var(--space-smaller);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-item-align: start;\n align-self: flex-start;\n}\n\n.xybhC5Y6mk4-:focus {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n";
|
|
630
|
+
var styles$1g = {"hasValidationMessage":"sc-bFJieXBA-","message":"xybhC5Y6mk4-"};
|
|
631
|
+
styleInject(css_248z$1t);
|
|
629
632
|
|
|
630
633
|
function InputValidation({ message }) {
|
|
631
634
|
const messages = [message];
|
|
@@ -634,26 +637,26 @@ function InputValidation({ message }) {
|
|
|
634
637
|
slideIn: { y: 0, opacity: 1 },
|
|
635
638
|
};
|
|
636
639
|
return (React.createElement(React.Fragment, null, messages && messages.length > 0 && (React.createElement(AnimatePresence, { mode: "wait" }, messages.map(msg => (React.createElement(motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
|
|
637
|
-
React.createElement("div", { className: styles$
|
|
640
|
+
React.createElement("div", { className: styles$1g.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
|
|
638
641
|
React.createElement(Icon, { name: "alert", size: "small", color: "critical" }),
|
|
639
642
|
React.createElement(Text, { size: "small", variation: "error" }, msg)))))))));
|
|
640
643
|
}
|
|
641
644
|
|
|
642
645
|
function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, }) {
|
|
643
|
-
const wrapperClasses = classnames(styles$
|
|
644
|
-
[styles$
|
|
646
|
+
const wrapperClasses = classnames(styles$1j.wrapper, size && styles$1j[size], align && styles$1j[align], {
|
|
647
|
+
[styles$1j.miniLabel]: (placeholder && value !== "") ||
|
|
645
648
|
(placeholder && type === "select") ||
|
|
646
649
|
// Naively assume that if the the type is tel, it is the InputPhoneNumber
|
|
647
650
|
(placeholder && type === "tel"),
|
|
648
|
-
[styles$
|
|
649
|
-
[styles$
|
|
650
|
-
[styles$
|
|
651
|
-
[styles$
|
|
652
|
-
[styles$
|
|
653
|
-
[styles$
|
|
651
|
+
[styles$1j.textarea]: type === "textarea",
|
|
652
|
+
[styles$1j.select]: type === "select",
|
|
653
|
+
[styles$1j.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
|
|
654
|
+
[styles$1j.disabled]: disabled,
|
|
655
|
+
[styles$1j.maxLength]: maxLength,
|
|
656
|
+
[styles$1j.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
|
|
654
657
|
});
|
|
655
|
-
const containerClasses = classnames(styles$
|
|
656
|
-
[styles$
|
|
658
|
+
const containerClasses = classnames(styles$1j.container, {
|
|
659
|
+
[styles$1j.inline]: inline,
|
|
657
660
|
});
|
|
658
661
|
const wrapperInlineStyle = {
|
|
659
662
|
["--formField-maxLength"]: maxLength || max,
|
|
@@ -678,12 +681,12 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
|
|
|
678
681
|
return (React.createElement("div", { className: containerClasses, onFocus: () => setFocused(true), onBlur: () => setFocused(false) },
|
|
679
682
|
React.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper" },
|
|
680
683
|
(prefix === null || prefix === void 0 ? void 0 : prefix.icon) && React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
|
|
681
|
-
React.createElement("div", { className: styles$
|
|
682
|
-
placeholder && (React.createElement("label", { className: styles$
|
|
684
|
+
React.createElement("div", { className: styles$1j.inputWrapper },
|
|
685
|
+
placeholder && (React.createElement("label", { className: styles$1j.label, htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
|
|
683
686
|
? labelStyle
|
|
684
687
|
: undefined }, placeholder)),
|
|
685
688
|
(prefix === null || prefix === void 0 ? void 0 : prefix.label) && React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
|
|
686
|
-
React.createElement("div", { className: styles$
|
|
689
|
+
React.createElement("div", { className: styles$1j.childrenWrapper }, children),
|
|
687
690
|
(suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" })))),
|
|
688
691
|
showClear && React.createElement(ClearAction, { onClick: onClear }),
|
|
689
692
|
(suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size })))),
|
|
@@ -713,20 +716,20 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
|
|
|
713
716
|
}
|
|
714
717
|
}
|
|
715
718
|
|
|
716
|
-
var css_248z$
|
|
717
|
-
var styles$
|
|
718
|
-
styleInject(css_248z$
|
|
719
|
+
var css_248z$1s = ".uoU-LfjFDv0- {\n width: var(--space-larger);\n height: var(--space-larger);\n box-shadow: 0px 0px 4px 2px rgba(1, 41, 57, 0.4);\n border: solid var(--color-blue--light);\n border-top-color: var(--color-white);\n border-width: calc(var(--space-small) * 0.75);\n border-radius: var(--radius-circle);\n background-color: var(--color-blue--lightest);\n -webkit-animation-duration: calc(var(--timing-slowest) * 2);\n animation-duration: calc(var(--timing-slowest) * 2);\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: _1aCKd5q9u34-;\n animation-name: _1aCKd5q9u34-;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n will-change: transform;\n}\n\n@-webkit-keyframes _1aCKd5q9u34- {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n\n@keyframes _1aCKd5q9u34- {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n\n 100% {\n -webkit-transform: rotate(359deg);\n transform: rotate(359deg);\n }\n}\n\n.cLRQwkSqnhA- {\n width: var(--space-base);\n height: var(--space-base);\n border-width: var(--space-smaller);\n}\n\n.h6O4vDPCWOQ- {\n display: inline-block;\n margin-top: calc(var(--space-smaller) * -1);\n vertical-align: middle;\n}\n";
|
|
720
|
+
var styles$1f = {"spinner":"uoU-LfjFDv0-","animationSpin":"_1aCKd5q9u34-","small":"cLRQwkSqnhA-","inline":"h6O4vDPCWOQ-"};
|
|
721
|
+
styleInject(css_248z$1s);
|
|
719
722
|
|
|
720
723
|
function Spinner({ size = "base", inline }) {
|
|
721
|
-
const spinnerStyles = classnames(styles$
|
|
722
|
-
[styles$
|
|
723
|
-
[styles$
|
|
724
|
+
const spinnerStyles = classnames(styles$1f.spinner, {
|
|
725
|
+
[styles$1f.small]: size === "small",
|
|
726
|
+
[styles$1f.inline]: inline,
|
|
724
727
|
});
|
|
725
728
|
return (React.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
|
|
726
729
|
}
|
|
727
730
|
|
|
728
731
|
function FormFieldPostFix({ variation }) {
|
|
729
|
-
return (React.createElement("span", { className: styles$
|
|
732
|
+
return (React.createElement("span", { className: styles$1j.postfix }, variation === "select" ? (React.createElement(Icon, { name: "arrowDown" })) : (React.createElement(Spinner, { size: "small" }))));
|
|
730
733
|
}
|
|
731
734
|
|
|
732
735
|
// Added 13th statement to accommodate getErrorMessage function
|
|
@@ -761,7 +764,7 @@ function FormField(props) {
|
|
|
761
764
|
useEffect(() => handleValidation(), [error]);
|
|
762
765
|
return (React.createElement(Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "", render: (_a) => {
|
|
763
766
|
var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = __rest(_b, ["onChange", "onBlur", "name"]);
|
|
764
|
-
const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles$
|
|
767
|
+
const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles$1j.input, name: (validations || name) && controllerName, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), (description &&
|
|
765
768
|
!inline && { "aria-describedby": descriptionIdentifier }));
|
|
766
769
|
const textFieldProps = Object.assign(Object.assign({}, fieldProps), { onKeyDown: handleKeyDown });
|
|
767
770
|
return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: rest.value, error: error, identifier: identifier, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
|
|
@@ -947,7 +950,7 @@ function AutocompleteInternal(_a, ref) {
|
|
|
947
950
|
var _a;
|
|
948
951
|
updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
|
|
949
952
|
}, [value]);
|
|
950
|
-
return (React.createElement("div", { className: styles$
|
|
953
|
+
return (React.createElement("div", { className: styles$1l.autocomplete, ref: autocompleteRef },
|
|
951
954
|
React.createElement(InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
|
|
952
955
|
menuVisible && (React.createElement(Menu$1, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
|
|
953
956
|
function updateInput(newText) {
|
|
@@ -1000,9 +1003,9 @@ function mapToOptions(items) {
|
|
|
1000
1003
|
}
|
|
1001
1004
|
const Autocomplete = forwardRef(AutocompleteInternal);
|
|
1002
1005
|
|
|
1003
|
-
var css_248z$
|
|
1004
|
-
var styles$
|
|
1005
|
-
styleInject(css_248z$
|
|
1006
|
+
var css_248z$1r = ":root {\n --avatar-size: calc(var(--base-unit) * 2);\n --avatar-border-size: var(--border-base);\n}\n\n.WniTNadEyPk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n width: calc(var(--base-unit) * 2);\n width: var(--avatar-size);\n height: calc(var(--base-unit) * 2);\n height: var(--avatar-size);\n min-width: calc(var(--base-unit) * 2);\n min-width: var(--avatar-size);\n min-height: calc(var(--base-unit) * 2);\n min-height: var(--avatar-size);\n border-radius: var(--radius-circle);\n color: var(--color-heading);\n font-size: calc(var(--base-unit) * 2);\n font-size: var(--avatar-size);\n -webkit-font-smoothing: antialiased;\n background: no-repeat center center var(--color-greyBlue);\n background-size: cover;\n}\n\n.WniTNadEyPk-:focus {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n._8Pqn2uZpaZg- {\n --avatar-size: calc(var(--base-unit) * 4.5);\n --avatar-border-size: var(--border-thick);\n}\n\n.S-edTXYA-7E- {\n --avatar-size: calc(var(--base-unit) * 1.5);\n}\n\n.S1iBGElfOUA- {\n color: var(--color-text--reverse);\n}\n\n.ErPhpHHpiBQ- {\n font-size: calc((var(--base-unit) * 2) / 2);\n font-size: calc(calc(var(--base-unit) * 2) / 2);\n font-size: calc(var(--avatar-size) / 2);\n text-transform: uppercase;\n}\n\n.aC-d-mngrIc- {\n font-size: calc((var(--base-unit) * 2) / 2.25);\n font-size: calc(calc(var(--base-unit) * 2) / 2.25);\n font-size: calc(var(--avatar-size) / 2.25);\n}\n\n.nR0S-GzjDnQ- {\n width: calc((var(--base-unit) * 2) - (var(--border-base) * 2));\n width: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n width: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n height: calc((var(--base-unit) * 2) - (var(--border-base) * 2));\n height: calc(calc(var(--base-unit) * 2) - (var(--border-base) * 2));\n height: calc(var(--avatar-size) - (var(--avatar-border-size) * 2));\n box-shadow: 0 0 0 var(--border-thick) var(--color-white) inset;\n border-style: solid;\n border-width: var(--border-base);\n border-width: var(--avatar-border-size);\n}\n";
|
|
1007
|
+
var styles$1e = {"avatar":"WniTNadEyPk-","large":"_8Pqn2uZpaZg-","small":"S-edTXYA-7E-","isDark":"S1iBGElfOUA-","initials":"ErPhpHHpiBQ-","smallInitials":"aC-d-mngrIc-","hasBorder":"nR0S-GzjDnQ-"};
|
|
1008
|
+
styleInject(css_248z$1r);
|
|
1006
1009
|
|
|
1007
1010
|
function isDark(colorToCheck) {
|
|
1008
1011
|
if (colorToCheck == undefined) {
|
|
@@ -1047,9 +1050,9 @@ function Avatar({ imageUrl, name, initials, size = "base", color, }) {
|
|
|
1047
1050
|
style.backgroundImage = `url(${imageUrl})`;
|
|
1048
1051
|
}
|
|
1049
1052
|
const shouldBeDark = color == undefined || isDark(color);
|
|
1050
|
-
const className = classnames(styles$
|
|
1051
|
-
[styles$
|
|
1052
|
-
[styles$
|
|
1053
|
+
const className = classnames(styles$1e.avatar, size !== "base" && styles$1e[size], {
|
|
1054
|
+
[styles$1e.hasBorder]: imageUrl && color,
|
|
1055
|
+
[styles$1e.isDark]: shouldBeDark,
|
|
1053
1056
|
});
|
|
1054
1057
|
return (React.createElement("div", { className: className, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size }))));
|
|
1055
1058
|
}
|
|
@@ -1057,28 +1060,28 @@ function Initials({ initials, dark = false, iconSize = "base", }) {
|
|
|
1057
1060
|
if (!initials) {
|
|
1058
1061
|
return (React.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize }));
|
|
1059
1062
|
}
|
|
1060
|
-
const className = classnames(styles$
|
|
1061
|
-
[styles$
|
|
1063
|
+
const className = classnames(styles$1e.initials, {
|
|
1064
|
+
[styles$1e.smallInitials]: initials.length > 2,
|
|
1062
1065
|
});
|
|
1063
1066
|
return React.createElement("span", { className: className }, initials.substr(0, 3));
|
|
1064
1067
|
}
|
|
1065
1068
|
|
|
1066
|
-
var css_248z$
|
|
1067
|
-
var styles$
|
|
1068
|
-
styleInject(css_248z$
|
|
1069
|
+
var css_248z$1q = ".meuT8gYQPJU- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n box-shadow: var(--shadow-base);\n padding: var(--space-base);\n color: var(--color-text);\n background-color: var(--color-surface--background);\n gap: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.jobber-retheme .meuT8gYQPJU- {\n padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n background-color: var(--color-surface);\n}\n\n.y4BapyZr-fo- > a {\n color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n gap: var(--space-small);\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n@media (--small-screens-and-below) {\n\n._6v1woNSLEvc- {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n }\n\n.y4BapyZr-fo- {\n -ms-flex: 1;\n flex: 1;\n -ms-flex-item-align: center;\n align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n -ms-flex: 1;\n flex: 1;\n}\n\n.rtNjEzmABX4- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n}\n\n@media (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n width: 100%;\n margin-top: var(--space-small);\n}\n }\n\n.lunQ5SOfyLg- {\n margin: calc(var(--space-smallest) * -1) 0;\n padding: var(--space-smallest);\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n -ms-flex: 0;\n flex: 0;\n -ms-flex-item-align: start;\n align-self: flex-start;\n}\n\n.lunQ5SOfyLg-:hover {\n background: rgba(0, 0, 0, 0.025);\n}\n\n.lunQ5SOfyLg-:focus {\n box-shadow: var(--shadow-focus);\n outline: none;\n background: rgba(0, 0, 0, 0.05);\n}\n\n.SG8xSJADp2k- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: var(--space-smaller);\n border-radius: var(--radius-circle);\n background-color: var(--color-surface--background);\n}\n\n.jobber-retheme .bocgLmEhcTU- .SG8xSJADp2k- {\n -ms-flex-item-align: center;\n align-self: center;\n}\n";
|
|
1070
|
+
var styles$1d = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-","iconWrapper":"SG8xSJADp2k-"};
|
|
1071
|
+
styleInject(css_248z$1q);
|
|
1069
1072
|
|
|
1070
|
-
var css_248z$
|
|
1073
|
+
var css_248z$1p = ".wWW-2T7rCV0- {\n background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n._7h8FUHIkVjg- {\n background-color: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\n background-color: var(--color-red--lighter);\n}\n";
|
|
1071
1074
|
var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
|
|
1072
|
-
styleInject(css_248z$
|
|
1075
|
+
styleInject(css_248z$1p);
|
|
1073
1076
|
|
|
1074
|
-
var css_248z$
|
|
1077
|
+
var css_248z$1o = "._5-B0X5vn0eA- {\n background-color: var(--color-success);\n}\n\n.r3hqur-vxwI- {\n background-color: var(--color-destructive);\n}\n\n.-c8TbjyV5YU- {\n background-color: var(--color-warning);\n}\n\n.bMc69fYWngM- {\n background-color: var(--color-informative);\n}\n";
|
|
1075
1078
|
var iconStyles = {"success":"_5-B0X5vn0eA-","error":"r3hqur-vxwI-","warning":"-c8TbjyV5YU-","notice":"bMc69fYWngM-"};
|
|
1076
|
-
styleInject(css_248z$
|
|
1079
|
+
styleInject(css_248z$1o);
|
|
1077
1080
|
|
|
1078
1081
|
function BannerIcon({ icon, type }) {
|
|
1079
1082
|
const { JOBBER_RETHEME } = getAtlantisConfig();
|
|
1080
1083
|
if (JOBBER_RETHEME) {
|
|
1081
|
-
return (React.createElement("span", { className: classnames(styles$
|
|
1084
|
+
return (React.createElement("span", { className: classnames(styles$1d.iconWrapper, iconStyles[type]) },
|
|
1082
1085
|
React.createElement(Icon, { name: icon, color: "white", size: "small" })));
|
|
1083
1086
|
}
|
|
1084
1087
|
return React.createElement(Icon, { name: icon, color: "greyBlueDark" });
|
|
@@ -1108,19 +1111,19 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
|
|
|
1108
1111
|
variation: type === "notice" ? "learning" : "work",
|
|
1109
1112
|
}, primaryAction);
|
|
1110
1113
|
}
|
|
1111
|
-
const bannerClassNames = classnames(styles$
|
|
1112
|
-
[styles$
|
|
1114
|
+
const bannerClassNames = classnames(styles$1d.banner, types[type], {
|
|
1115
|
+
[styles$1d.medium]: bannerWidth >= bannerWidths.medium,
|
|
1113
1116
|
});
|
|
1114
1117
|
if (!showBanner)
|
|
1115
1118
|
return null;
|
|
1116
1119
|
return (React.createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
|
|
1117
|
-
React.createElement("div", { className: styles$
|
|
1120
|
+
React.createElement("div", { className: styles$1d.bannerContent },
|
|
1118
1121
|
bannerIcon && React.createElement(BannerIcon, { icon: bannerIcon, type: type }),
|
|
1119
|
-
React.createElement("div", { className: styles$
|
|
1122
|
+
React.createElement("div", { className: styles$1d.bannerChildren },
|
|
1120
1123
|
React.createElement(BannerChildren, null, children)),
|
|
1121
|
-
primaryAction && (React.createElement("div", { className: styles$
|
|
1124
|
+
primaryAction && (React.createElement("div", { className: styles$1d.bannerAction },
|
|
1122
1125
|
React.createElement(Button, Object.assign({}, primaryAction))))),
|
|
1123
|
-
dismissible && (React.createElement("button", { type: "button", className: styles$
|
|
1126
|
+
dismissible && (React.createElement("button", { type: "button", className: styles$1d.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
|
|
1124
1127
|
React.createElement(Icon, { name: "cross", color: JOBBER_RETHEME ? "interactiveSubtle" : iconColors[type] })))));
|
|
1125
1128
|
function handleClose() {
|
|
1126
1129
|
setShowBanner(!showBanner);
|
|
@@ -1155,13 +1158,13 @@ function ButtonDismiss({ onClick, ariaLabel }) {
|
|
|
1155
1158
|
return (React.createElement(Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
|
|
1156
1159
|
}
|
|
1157
1160
|
|
|
1158
|
-
var css_248z$
|
|
1159
|
-
var styles$
|
|
1160
|
-
styleInject(css_248z$
|
|
1161
|
+
var css_248z$1n = ":root {\n --card--accent-color: var(--color-grey);\n --card--base-padding: var(--space-base);\n --card--border: var(--border-base) solid var(--color-border);\n --card--header-background: var(--color-surface--background);\n}\n\n._2wxPdv7kELk- {\n display: block;\n width: 100%;\n border: var(--border-base) solid var(--color-border);\n border: var(--card--border);\n border-radius: var(--radius-base);\n outline-color: var(--color-focus);\n background-color: var(--color-surface);\n}\n\n._2wxPdv7kELk-:active {\n outline: 0;\n}\n\n:root .jobber-retheme ._2wxPdv7kELk-:not(.tRfpysqqk8s-) {\n --card--header-background: transparent;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n._2wxPdv7kELk- > * {\n --public-content--padding: var(--card--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2wxPdv7kELk- > * > * {\n --public-content--padding: 0;\n}\n\n._5LfUFF9DYsk- {\n border-top-width: 0;\n}\n\n.jobber-retheme ._5LfUFF9DYsk- {\n border-top-width: 1px;\n}\n\n._5LfUFF9DYsk-::before {\n content: \" \";\n display: block;\n margin: 0 calc(-1 * var(--border-base));\n border-top: 0.5rem solid var(--color-grey);\n border-top: 0.5rem solid var(--card--accent-color);\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n}\n\n.jobber-retheme ._5LfUFF9DYsk-::before {\n display: none;\n}\n\n.tRfpysqqk8s- {\n --card--border: none;\n\n box-shadow: var(--shadow-base);\n color: inherit;\n text-decoration: inherit;\n cursor: pointer;\n transition: all var(--timing-quick) linear;\n}\n\n.tRfpysqqk8s-:hover,\n.tRfpysqqk8s-:focus {\n background-color: var(--color-surface--hover);\n}\n\n.fAPeD1InvAI- {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-base);\n padding: var(--card--base-padding);\n background-color: var(--color-surface--background);\n background-color: var(--card--header-background);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: start;\n align-items: flex-start;\n gap: var(--space-small);\n}\n\n.jobber-retheme .fAPeD1InvAI- {\n padding-bottom: 0;\n}\n\n.jobber-retheme .fAPeD1InvAI- h3 {\n font-family: var(--typography--fontFamily-normal);\n font-size: var(--typography--fontSize-largest);\n}\n";
|
|
1162
|
+
var styles$1c = {"card":"_2wxPdv7kELk-","clickable":"tRfpysqqk8s-","accent":"_5LfUFF9DYsk-","header":"fAPeD1InvAI-"};
|
|
1163
|
+
styleInject(css_248z$1n);
|
|
1161
1164
|
|
|
1162
|
-
var css_248z$
|
|
1165
|
+
var css_248z$1m = ".vvT4WQQNm1A- {\n --card--accent-color: var(--color-request);\n}\n\n.ewWSA-AqPBs- {\n --card--accent-color: var(--color-quote);\n}\n\n.ZuQFWmcM-38- {\n --card--accent-color: var(--color-job);\n}\n\n.b9aB-DbfSI8- {\n --card--accent-color: var(--color-invoice);\n}\n\n._6tFyd9Op3QY- {\n --card--accent-color: var(--color-blue);\n}\n\n.uFlsik1sMf8- {\n --card--accent-color: var(--color-blue--light);\n}\n\n._2dO0zCHWU48- {\n --card--accent-color: var(--color-blue--lighter);\n}\n\n.RR-XaNyu23U- {\n --card--accent-color: var(--color-blue--lightest);\n}\n\n.HLricrV5TRM- {\n --card--accent-color: var(--color-blue--dark);\n}\n\n.fvMAXzbYjVo- {\n --card--accent-color: var(--color-green);\n}\n\n.vppB-fszJ7M- {\n --card--accent-color: var(--color-green--light);\n}\n\n.EH4yrRyVrog- {\n --card--accent-color: var(--color-green--lighter);\n}\n\n.jfuIATPvpzw- {\n --card--accent-color: var(--color-green--lightest);\n}\n\n.mDgzdSzCmlw- {\n --card--accent-color: var(--color-green--dark);\n}\n\n.OWeyNXobrek- {\n --card--accent-color: var(--color-lime);\n}\n\n.gBd-jW7hc2A- {\n --card--accent-color: var(--color-lime--light);\n}\n\n.PZ3p2kISQl8- {\n --card--accent-color: var(--color-lime--lighter);\n}\n\n.wk56Avrf5u8- {\n --card--accent-color: var(--color-lime--lightest);\n}\n\n.BpxVs0ESZZQ- {\n --card--accent-color: var(--color-lime--lightest);\n}\n\n.W1Plus-w90s- {\n --card--accent-color: var(--color-yellowGreen);\n}\n\n.MBvezPZf2r0- {\n --card--accent-color: var(--color-yellowGreen--light);\n}\n\n.HpMA-8L7gEQ- {\n --card--accent-color: var(--color-yellowGreen--lighter);\n}\n\n.Z7K3xhC6jU8- {\n --card--accent-color: var(--color-yellowGreen--lightest);\n}\n\n.qYud5BgZVDQ- {\n --card--accent-color: var(--color-yellowGreen--dark);\n}\n\n.UmKFuhj-odE- {\n --card--accent-color: var(--color-yellow);\n}\n\n.urbYXsHvb-o- {\n --card--accent-color: var(--color-yellow--light);\n}\n\n.J5f4ygfEe1M- {\n --card--accent-color: var(--color-yellow--lighter);\n}\n\n.f0YOqNTXr2c- {\n --card--accent-color: var(--color-yellow--lightest);\n}\n\n.zYMhMXskG-o- {\n --card--accent-color: var(--color-yellow--dark);\n}\n\n.xMW5G3bcZ-U- {\n --card--accent-color: var(--color-red);\n}\n\n.-O8T8zi0AkQ- {\n --card--accent-color: var(--color-red--light);\n}\n\n.WNaOw-wPD40- {\n --card--accent-color: var(--color-red--light);\n}\n\n._3jne5angZmM- {\n --card--accent-color: var(--color-red--lightest);\n}\n\n.Ce3FxZAnXks- {\n --card--accent-color: var(--color-red--dark);\n}\n\n.Ubx9QHfbYVg- {\n --card--accent-color: var(--color-grey);\n}\n\n._9orHaOxo3ew- {\n --card--accent-color: var(--color-grey--light);\n}\n\n.gvgk4-Qr7G8- {\n --card--accent-color: var(--color-grey--lighter);\n}\n\n._6dk6hwjKwz8- {\n --card--accent-color: var(--color-grey--lightest);\n}\n\n.LFsxlyhhXWE- {\n --card--accent-color: var(--color-grey--dark);\n}\n\n.MNze-s50Qx0- {\n --card--accent-color: var(--color-greyBlue);\n}\n\n._1O6fbjtLDXE- {\n --card--accent-color: var(--color-greyBlue--light);\n}\n\n._3coHcfDM3VA- {\n --card--accent-color: var(--color-greyBlue--lighter);\n}\n\n._1GwEUK3RMmk- {\n --card--accent-color: var(--color-greyBlue--lightest);\n}\n\n._03qQDU55XhA- {\n --card--accent-color: var(--color-greyBlue--dark);\n}\n\n.XrONNgApzcY- {\n --card--accent-color: var(--color-lightBlue);\n}\n\n.axCpC15OAsQ- {\n --card--accent-color: var(--color-lightBlue--light);\n}\n\n.l7-ZKiT7ECs- {\n --card--accent-color: var(--color-lightBlue--lighter);\n}\n\n.R-d7ifPGd-U- {\n --card--accent-color: var(--color-lightBlue--lightest);\n}\n\n.tjGcvlfZNo0- {\n --card--accent-color: var(--color-lightBlue--dark);\n}\n\n._6yFi1QGzU-0- {\n --card--accent-color: var(--color-purple);\n}\n\n.s5B034ADstg- {\n --card--accent-color: var(--color-purple--light);\n}\n\n.XvHFMKO2QkA- {\n --card--accent-color: var(--color-purple--lighter);\n}\n\n.z1yqV2h-X0o- {\n --card--accent-color: var(--color-purple--lightest);\n}\n\n.ShqfQED9t1k- {\n --card--accent-color: var(--color-purple--dark);\n}\n\n.TSAuQcS9guw- {\n --card--accent-color: var(--color-pink);\n}\n\n.GwUX04DtVTg- {\n --card--accent-color: var(--color-pink--light);\n}\n\n.OOxzzrT-Kyg- {\n --card--accent-color: var(--color-pink--lighter);\n}\n\n._9iIg4vnXMPQ- {\n --card--accent-color: var(--color-pink--lightest);\n}\n\n._3VTCutRlbfQ- {\n --card--accent-color: var(--color-pink--dark);\n}\n\n.fG-k53wCdy8- {\n --card--accent-color: var(--color-teal);\n}\n\n.GMNha2EEVYg- {\n --card--accent-color: var(--color-teal--light);\n}\n\n._8mCqw-pGqc8- {\n --card--accent-color: var(--color-teal--lighter);\n}\n\n.XHd3g6apCv8- {\n --card--accent-color: var(--color-teal--lightest);\n}\n\n.XadpYA5oNNU- {\n --card--accent-color: var(--color-teal--dark);\n}\n\n.yOjNuw4uX2M- {\n --card--accent-color: var(--color-orange);\n}\n\n.CFBZb6YwS8U- {\n --card--accent-color: var(--color-orange--light);\n}\n\n.dj0X5xsNtZA- {\n --card--accent-color: var(--color-orange--lighter);\n}\n\n.bSU2KCid1GE- {\n --card--accent-color: var(--color-orange--lightest);\n}\n\n.dPKWRPFuIko- {\n --card--accent-color: var(--color-orange--dark);\n}\n\n.i90uzcHXLBQ- {\n --card--accent-color: var(--color-brown);\n}\n\n.Q1g5O8oxNQ8- {\n --card--accent-color: var(--color-brown--light);\n}\n\n.UimWc99bIs0- {\n --card--accent-color: var(--color-brown--lighter);\n}\n\n.AUWBtBoPSB4- {\n --card--accent-color: var(--color-brown--lightest);\n}\n\n._7xEA4hCoooA- {\n --card--accent-color: var(--color-brown--dark);\n}\n\n.IqAniikSo1A- {\n --card--accent-color: var(--color-navy);\n}\n\n.NTbn2du5U28- {\n --card--accent-color: var(--color-navy--light);\n}\n\n.RbY7pJetOU0- {\n --card--accent-color: var(--color-navy--lighter);\n}\n\n.TAlHuH8GUaY- {\n --card--accent-color: var(--color-navy--lightest);\n}\n\n.Pm1CuBHrg0Q- {\n --card--accent-color: var(--color-navy--dark);\n}\n\n._-4HRcMjMcTg- {\n --card--accent-color: var(--color-indigo);\n}\n\n.frP-WGi4cig- {\n --card--accent-color: var(--color-indigo--light);\n}\n\n.GzJbf-nczMU- {\n --card--accent-color: var(--color-indigo--lighter);\n}\n\n.LFsNJs2wsGY- {\n --card--accent-color: var(--color-indigo--lightest);\n}\n\n.KRBIaqOA1G4- {\n --card--accent-color: var(--color-indigo--dark);\n}\n\n.OXOOKDn6V-M- {\n --card--accent-color: var(--color-white);\n}\n";
|
|
1163
1166
|
var colors = {"requestColor":"vvT4WQQNm1A-","quoteColor":"ewWSA-AqPBs-","jobColor":"ZuQFWmcM-38-","invoiceColor":"b9aB-DbfSI8-","blue":"_6tFyd9Op3QY-","blueLight":"uFlsik1sMf8-","blueLighter":"_2dO0zCHWU48-","blueLightest":"RR-XaNyu23U-","blueDark":"HLricrV5TRM-","green":"fvMAXzbYjVo-","greenLight":"vppB-fszJ7M-","greenLighter":"EH4yrRyVrog-","greenLightest":"jfuIATPvpzw-","greenDark":"mDgzdSzCmlw-","lime":"OWeyNXobrek-","limeLight":"gBd-jW7hc2A-","limeLighter":"PZ3p2kISQl8-","limeLightest":"wk56Avrf5u8-","limeDark":"BpxVs0ESZZQ-","yellowGreen":"W1Plus-w90s-","yellowGreenLight":"MBvezPZf2r0-","yellowGreenLighter":"HpMA-8L7gEQ-","yellowGreenLightest":"Z7K3xhC6jU8-","yellowGreenDark":"qYud5BgZVDQ-","yellow":"UmKFuhj-odE-","yellowLight":"urbYXsHvb-o-","yellowLighter":"J5f4ygfEe1M-","yellowLightest":"f0YOqNTXr2c-","yellowDark":"zYMhMXskG-o-","red":"xMW5G3bcZ-U-","redLight":"-O8T8zi0AkQ-","redLighter":"WNaOw-wPD40-","redLightest":"_3jne5angZmM-","redDark":"Ce3FxZAnXks-","grey":"Ubx9QHfbYVg-","greyLight":"_9orHaOxo3ew-","greyLighter":"gvgk4-Qr7G8-","greyLightest":"_6dk6hwjKwz8-","greyDark":"LFsxlyhhXWE-","greyBlue":"MNze-s50Qx0-","greyBlueLight":"_1O6fbjtLDXE-","greyBlueLighter":"_3coHcfDM3VA-","greyBlueLightest":"_1GwEUK3RMmk-","greyBlueDark":"_03qQDU55XhA-","lightBlue":"XrONNgApzcY-","lightBlueLight":"axCpC15OAsQ-","lightBlueLighter":"l7-ZKiT7ECs-","lightBlueLightest":"R-d7ifPGd-U-","lightBlueDark":"tjGcvlfZNo0-","purple":"_6yFi1QGzU-0-","purpleLight":"s5B034ADstg-","purpleLighter":"XvHFMKO2QkA-","purpleLightest":"z1yqV2h-X0o-","purpleDark":"ShqfQED9t1k-","pink":"TSAuQcS9guw-","pinkLight":"GwUX04DtVTg-","pinkLighter":"OOxzzrT-Kyg-","pinkLightest":"_9iIg4vnXMPQ-","pinkDark":"_3VTCutRlbfQ-","teal":"fG-k53wCdy8-","tealLight":"GMNha2EEVYg-","tealLighter":"_8mCqw-pGqc8-","tealLightest":"XHd3g6apCv8-","tealDark":"XadpYA5oNNU-","orange":"yOjNuw4uX2M-","orangeLight":"CFBZb6YwS8U-","orangeLighter":"dj0X5xsNtZA-","orangeLightest":"bSU2KCid1GE-","orangeDark":"dPKWRPFuIko-","brown":"i90uzcHXLBQ-","brownLight":"Q1g5O8oxNQ8-","brownLighter":"UimWc99bIs0-","brownLightest":"AUWBtBoPSB4-","brownDark":"_7xEA4hCoooA-","navy":"IqAniikSo1A-","navyLight":"NTbn2du5U28-","navyLighter":"RbY7pJetOU0-","navyLightest":"TAlHuH8GUaY-","navyDark":"Pm1CuBHrg0Q-","indigo":"_-4HRcMjMcTg-","indigoLight":"frP-WGi4cig-","indigoLighter":"GzJbf-nczMU-","indigoLightest":"LFsNJs2wsGY-","indigoDark":"KRBIaqOA1G4-","white":"OXOOKDn6V-M-"};
|
|
1164
|
-
styleInject(css_248z$
|
|
1167
|
+
styleInject(css_248z$1m);
|
|
1165
1168
|
|
|
1166
1169
|
const ENTER_KEY = "Enter";
|
|
1167
1170
|
const SPACEBAR_KEY = " ";
|
|
@@ -1190,9 +1193,9 @@ function CardClickable({ className, onClick, children, }) {
|
|
|
1190
1193
|
}
|
|
1191
1194
|
}
|
|
1192
1195
|
|
|
1193
|
-
var css_248z$
|
|
1194
|
-
var styles$
|
|
1195
|
-
styleInject(css_248z$
|
|
1196
|
+
var css_248z$1l = ".dT6M9tp1sZc- * {\n box-sizing: border-box;\n}\n\n.dT6M9tp1sZc- {\n --menu-space: var(--space-small);\n --menu-offset: var(--space-smallest);\n display: inline-block;\n position: relative;\n}\n\n.Qmxlsj0D3qM- {\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: 72vh;\n box-shadow: var(--shadow-base);\n padding: var(--menu-space);\n padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n -webkit-overflow-scrolling: touch;\n overflow-y: scroll;\n background-color: var(--color-surface);\n}\n\n@media (--small-screens-and-up) {\n\n.Qmxlsj0D3qM- {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n padding: var(--menu-space);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.QTisUfiHwL4- {\n bottom: 100%;\n margin-bottom: var(--menu-offset);\n}\n }\n\n@media (--small-screens-and-up) {\n\n.qsch1dlpOHc- {\n top: 100%;\n bottom: auto;\n margin-top: var(--menu-offset);\n}\n }\n\n@media (--small-screens-and-up) {\n\n._0xR9-oxWMOU- {\n right: 0;\n left: auto;\n}\n }\n\n@media (--small-screens-and-up) {\n\n.gaZwsdyoG0k- {\n right: auto;\n left: 0;\n}\n }\n\n.LaKFjYCLHZc- {\n padding: var(--menu-space) 0;\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.LaKFjYCLHZc-:first-of-type {\n padding-top: 0;\n}\n\n.LaKFjYCLHZc-:last-of-type {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n._7HB7dWnqCi0- {\n padding: var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding: calc(var(--menu-space) * 1.5) var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- h6 {\n /* can move into the Typography component post re-theme */\n font-size: var(--typography--fontSize-base);\n font-weight: 400;\n text-transform: none;\n}\n\n.ZuceCiefKqw- {\n display: -ms-flexbox;\n display: flex;\n gap: var(--space-base);\n width: 100%;\n padding: var(--menu-space);\n border: none;\n border-radius: var(--radius-base);\n background-color: transparent;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.jobber-retheme .ZuceCiefKqw- {\n gap: var(--menu-space);\n}\n\n.ZuceCiefKqw-:hover,\n.ZuceCiefKqw-:focus-visible {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n\n.jobber-retheme .ZuceCiefKqw- span {\n /* can move into the Typography component post re-theme */\n color: var(--color-text--secondary);\n font-weight: 600;\n}\n\n.jobber-retheme .Bz8TONF8kws- path {\n /* can move into the Icon component post re-theme */\n fill: var(--color-interactive--subtle);\n}\n\n.eKnUAucwwWU- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n background-color: var(--color-overlay);\n}\n\n@media (--small-screens-and-up) {\n\n.eKnUAucwwWU- {\n background-color: transparent;\n}\n }\n\n.oaxefr58z-E- {\n width: 100%;\n}\n\n.vz9opIdwHFg- {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n";
|
|
1197
|
+
var styles$1b = {"wrapper":"dT6M9tp1sZc-","menu":"Qmxlsj0D3qM-","above":"QTisUfiHwL4-","below":"qsch1dlpOHc-","left":"_0xR9-oxWMOU-","right":"gaZwsdyoG0k-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","icon":"Bz8TONF8kws-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
|
|
1198
|
+
styleInject(css_248z$1l);
|
|
1196
1199
|
|
|
1197
1200
|
const variation$1 = {
|
|
1198
1201
|
overlayStartStop: { opacity: 0 },
|
|
@@ -1242,9 +1245,9 @@ function Menu({ activator, items }) {
|
|
|
1242
1245
|
if (!activator) {
|
|
1243
1246
|
activator = (React.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
|
|
1244
1247
|
}
|
|
1245
|
-
const menuClasses = classnames(styles$
|
|
1246
|
-
const wrapperClasses = classnames(styles$
|
|
1247
|
-
[styles$
|
|
1248
|
+
const menuClasses = classnames(styles$1b.menu, position.vertical === "above" && styles$1b.above, position.vertical === "below" && styles$1b.below, position.horizontal === "left" && styles$1b.left, position.horizontal === "right" && styles$1b.right);
|
|
1249
|
+
const wrapperClasses = classnames(styles$1b.wrapper, {
|
|
1250
|
+
[styles$1b.fullWidth]: fullWidth,
|
|
1248
1251
|
});
|
|
1249
1252
|
return (React.createElement("div", { className: wrapperClasses, ref: wrapperRef, onClick: handleParentClick },
|
|
1250
1253
|
React.cloneElement(activator, {
|
|
@@ -1255,14 +1258,14 @@ function Menu({ activator, items }) {
|
|
|
1255
1258
|
ariaHaspopup: true,
|
|
1256
1259
|
}),
|
|
1257
1260
|
React.createElement(AnimatePresence, null, visible && (React.createElement(React.Fragment, null,
|
|
1258
|
-
React.createElement(motion.div, { className: styles$
|
|
1261
|
+
React.createElement(motion.div, { className: styles$1b.overlay, onClick: toggle(), variants: variation$1, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
|
|
1259
1262
|
type: "tween",
|
|
1260
1263
|
duration: 0.15,
|
|
1261
1264
|
} }),
|
|
1262
1265
|
React.createElement(motion.div, { className: menuClasses, role: "menu", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation$1, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: position, transition: {
|
|
1263
1266
|
type: "tween",
|
|
1264
1267
|
duration: 0.25,
|
|
1265
|
-
} }, items.map((item, key) => (React.createElement("div", { key: key, className: styles$
|
|
1268
|
+
} }, items.map((item, key) => (React.createElement("div", { key: key, className: styles$1b.section },
|
|
1266
1269
|
item.header && React.createElement(SectionHeader, { text: item.header }),
|
|
1267
1270
|
item.actions.map((action, index) => (React.createElement(Action, Object.assign({ sectionLabel: item.header, key: action.label, shouldFocus: key === 0 && index === 0 }, action)))))))))))));
|
|
1268
1271
|
function toggle(callbackPassthrough) {
|
|
@@ -1291,7 +1294,7 @@ function Menu({ activator, items }) {
|
|
|
1291
1294
|
}
|
|
1292
1295
|
}
|
|
1293
1296
|
function SectionHeader({ text }) {
|
|
1294
|
-
return (React.createElement("div", { className: styles$
|
|
1297
|
+
return (React.createElement("div", { className: styles$1b.sectionHeader, "aria-hidden": true },
|
|
1295
1298
|
React.createElement(Typography, { element: "h6", size: "small", textCase: "uppercase", textColor: "textSecondary", fontWeight: "bold" }, text)));
|
|
1296
1299
|
}
|
|
1297
1300
|
function Action({ label, sectionLabel, icon, onClick, shouldFocus = false, }) {
|
|
@@ -1302,11 +1305,11 @@ function Action({ label, sectionLabel, icon, onClick, shouldFocus = false, }) {
|
|
|
1302
1305
|
setTimeout(() => { var _a; return (_a = actionButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
|
|
1303
1306
|
}
|
|
1304
1307
|
}, [shouldFocus]);
|
|
1305
|
-
return (React.createElement("button", { role: "menuitem", type: "button", className: styles$
|
|
1306
|
-
icon && (React.createElement("span", { className: styles$
|
|
1308
|
+
return (React.createElement("button", { role: "menuitem", type: "button", className: styles$1b.action, key: label, onClick: onClick, ref: actionButtonRef },
|
|
1309
|
+
icon && (React.createElement("span", { className: styles$1b.icon },
|
|
1307
1310
|
React.createElement(Icon, { name: icon }))),
|
|
1308
1311
|
React.createElement(Typography, { element: "span", size: "base", textColor: "text" },
|
|
1309
|
-
sectionLabel && (React.createElement("span", { className: styles$
|
|
1312
|
+
sectionLabel && (React.createElement("span", { className: styles$1b.screenReaderOnly }, sectionLabel)),
|
|
1310
1313
|
label)));
|
|
1311
1314
|
}
|
|
1312
1315
|
|
|
@@ -1320,7 +1323,7 @@ function CardHeader({ title, header, }) {
|
|
|
1320
1323
|
return React.createElement(React.Fragment, null, heading);
|
|
1321
1324
|
if (heading) {
|
|
1322
1325
|
const titleString = typeof heading === "string" ? heading : heading.title;
|
|
1323
|
-
return (React.createElement("div", { className: styles$
|
|
1326
|
+
return (React.createElement("div", { className: styles$1c.header },
|
|
1324
1327
|
titleString && React.createElement(Heading, { level: 3 }, titleString),
|
|
1325
1328
|
typeof heading === "object" && renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
|
|
1326
1329
|
}
|
|
@@ -1338,7 +1341,7 @@ function renderHeaderAction(action) {
|
|
|
1338
1341
|
}
|
|
1339
1342
|
|
|
1340
1343
|
function Card({ accent, header, children, onClick, title, url, external = false, }) {
|
|
1341
|
-
const className = classnames(styles$
|
|
1344
|
+
const className = classnames(styles$1c.card, accent && styles$1c.accent, (url || onClick) && styles$1c.clickable, accent && colors[accent]);
|
|
1342
1345
|
const cardContent = (React.createElement(React.Fragment, null,
|
|
1343
1346
|
React.createElement(CardHeader, { title: title, header: header }),
|
|
1344
1347
|
children));
|
|
@@ -1353,9 +1356,9 @@ function Card({ accent, header, children, onClick, title, url, external = false,
|
|
|
1353
1356
|
}
|
|
1354
1357
|
}
|
|
1355
1358
|
|
|
1356
|
-
var css_248z$
|
|
1357
|
-
var styles$
|
|
1358
|
-
styleInject(css_248z$
|
|
1359
|
+
var css_248z$1k = ".d-2MyyzKGN0- {\n --checkbox-size: var(--space-base);\n display: inline-block;\n}\n\n.jobber-retheme .d-2MyyzKGN0- {\n --checkbox-size: calc(var(--space-base) + var(--space-smaller));\n}\n\n.OFHQaLxY8zI- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n}\n\n.HRrf3AZlpHc- {\n cursor: not-allowed;\n}\n\n.kMH5B1jwh-Y- {\n position: relative;\n}\n\n.rup0RBe4DNU- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n white-space: nowrap;\n}\n\n.lOQVnJA7zPM- {\n display: -ms-flexbox;\n display: flex;\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n box-sizing: border-box;\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: var(--radius-base);\n background-color: var(--color-surface);\n transition: all var(--timing-quick) ease-out;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.HRrf3AZlpHc- .lOQVnJA7zPM- {\n border-color: var(--color-disabled--secondary);\n}\n\n.jobber-retheme .lOQVnJA7zPM- {\n border-color: var(--color-border);\n border-radius: var(--radius-small);\n}\n\n.rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM-,\n.rup0RBe4DNU-:checked + .lOQVnJA7zPM- {\n border-color: var(--color-interactive);\n background-color: var(--color-interactive);\n}\n\n.rup0RBe4DNU-:focus-visible + .lOQVnJA7zPM- {\n box-shadow: var(--shadow-focus);\n}\n\n.jobber-retheme .lOQVnJA7zPM-:hover,\n.jobber-retheme .d-2MyyzKGN0-:hover .lOQVnJA7zPM- {\n border-color: var(--color-interactive);\n}\n\n.HRrf3AZlpHc- p {\n color: var(--color-disabled);\n}\n\n.HRrf3AZlpHc- .lOQVnJA7zPM- > * {\n opacity: 0;\n}\n\n.HRrf3AZlpHc- .rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM-,\n.HRrf3AZlpHc- .rup0RBe4DNU-:checked + .lOQVnJA7zPM- {\n border-color: var(--color-disabled--secondary);\n background-color: var(--color-disabled--secondary);\n}\n\n.HRrf3AZlpHc- .rup0RBe4DNU-.Njn2CQDXwVA- + .lOQVnJA7zPM- > *,\n.HRrf3AZlpHc- .rup0RBe4DNU-:checked + .lOQVnJA7zPM- > * {\n opacity: 1;\n}\n\n.eHENKCs5umc- {\n margin: 0 var(--space-small);\n}\n\n.jobber-retheme .eHENKCs5umc- {\n margin-top: var(--space-smallest);\n}\n\n.fSEH0cAO9cI- {\n margin-bottom: var(--space-small);\n padding-left: calc(var(--checkbox-size) + var(--space-small));\n}\n";
|
|
1360
|
+
var styles$1a = {"checkbox":"d-2MyyzKGN0-","wrapper":"OFHQaLxY8zI-","disabled":"HRrf3AZlpHc-","checkHolder":"kMH5B1jwh-Y-","input":"rup0RBe4DNU-","checkBox":"lOQVnJA7zPM-","indeterminate":"Njn2CQDXwVA-","label":"eHENKCs5umc-","description":"fSEH0cAO9cI-"};
|
|
1361
|
+
styleInject(css_248z$1k);
|
|
1359
1362
|
|
|
1360
1363
|
function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onChange, onFocus, }) {
|
|
1361
1364
|
const { control, setValue, watch } = useFormContext() != undefined
|
|
@@ -1374,23 +1377,23 @@ function Checkbox({ checked, defaultChecked, disabled, label, name, value, indet
|
|
|
1374
1377
|
setValue(controlledName, value);
|
|
1375
1378
|
}
|
|
1376
1379
|
}, [value, watch(controlledName)]);
|
|
1377
|
-
const wrapperClassName = classnames(styles$
|
|
1378
|
-
const inputClassName = classnames(styles$
|
|
1379
|
-
[styles$
|
|
1380
|
+
const wrapperClassName = classnames(styles$1a.wrapper, disabled && styles$1a.disabled);
|
|
1381
|
+
const inputClassName = classnames(styles$1a.input, {
|
|
1382
|
+
[styles$1a.indeterminate]: indeterminate,
|
|
1380
1383
|
});
|
|
1381
1384
|
const iconName = indeterminate ? "minus2" : "checkmark";
|
|
1382
1385
|
const labelText = label ? React.createElement(Text, null, label) : children;
|
|
1383
1386
|
return (React.createElement(Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
|
|
1384
1387
|
var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = __rest(_b, ["onChange", "name"]);
|
|
1385
1388
|
const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
|
|
1386
|
-
return (React.createElement("div", { className: styles$
|
|
1389
|
+
return (React.createElement("div", { className: styles$1a.checkbox },
|
|
1387
1390
|
React.createElement("label", { className: wrapperClassName },
|
|
1388
|
-
React.createElement("span", { className: styles$
|
|
1391
|
+
React.createElement("span", { className: styles$1a.checkHolder },
|
|
1389
1392
|
React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus })),
|
|
1390
|
-
React.createElement("span", { className: styles$
|
|
1393
|
+
React.createElement("span", { className: styles$1a.checkBox },
|
|
1391
1394
|
React.createElement(Icon, { name: iconName, size: "small", color: "white" }))),
|
|
1392
|
-
labelText && React.createElement("span", { className: styles$
|
|
1393
|
-
description && (React.createElement("div", { className: styles$
|
|
1395
|
+
labelText && React.createElement("span", { className: styles$1a.label }, labelText)),
|
|
1396
|
+
description && (React.createElement("div", { className: styles$1a.description },
|
|
1394
1397
|
React.createElement(Text, { variation: "subdued", size: "small" }, description)))));
|
|
1395
1398
|
function handleChange(event) {
|
|
1396
1399
|
const newChecked = event.currentTarget.checked;
|
|
@@ -1400,9 +1403,9 @@ function Checkbox({ checked, defaultChecked, disabled, label, name, value, indet
|
|
|
1400
1403
|
} }));
|
|
1401
1404
|
}
|
|
1402
1405
|
|
|
1403
|
-
var css_248z$
|
|
1404
|
-
var styles$
|
|
1405
|
-
styleInject(css_248z$
|
|
1406
|
+
var css_248z$1j = ":root {\n --chip--gradient-color-variation: var(--chip-base-bg);\n --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.af7U8MvcbHE- {\n --chip-height: 40px;\n --chip-radius: 20px;\n --chip-base-bg: var(--color-surface--background);\n --chip-base--hover: var(--color-surface--background--hover);\n display: -ms-flexbox;\n display: flex;\n position: relative;\n height: 40px;\n height: var(--chip-height);\n min-width: 0;\n padding: var(--space-small) var(--base-unit);\n border: var(--border-base) solid transparent;\n border-radius: 20px;\n border-radius: var(--chip-radius);\n color: var(--color-heading);\n text-align: left;\n cursor: pointer;\n transition: all var(--timing-base);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.af7U8MvcbHE-:focus,\n.af7U8MvcbHE-:focus-visible {\n outline: none;\n}\n\n.af7U8MvcbHE-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n\n.af7U8MvcbHE- .e905AYK4SCc- {\n margin-left: calc(-1 * var(--space-small));\n margin-right: var(--space-small);\n}\n\n.af7U8MvcbHE- .ySADfZ0FckM- {\n margin-left: var(--space-small);\n margin-right: calc(-1 * var(--space-small));\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-,\n.af7U8MvcbHE- .ySADfZ0FckM- {\n display: -ms-flexbox;\n display: flex;\n width: var(--space-large);\n height: var(--space-large);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n border-radius: var(--radius-circle);\n background-color: var(--color-surface);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.af7U8MvcbHE- .e905AYK4SCc-.usdkmQ9Sxbk-,\n.af7U8MvcbHE- .ySADfZ0FckM-.usdkmQ9Sxbk- {\n display: none;\n}\n\n.af7U8MvcbHE- .dg1-Izy1eQA- {\n width: var(--space-minuscule);\n height: var(--base-unit);\n margin: 0 var(--space-small);\n background-color: var(--color-text--secondary);\n}\n\n.af7U8MvcbHE- .-lz0EYLTDgg- {\n border-radius: var(--radius-circle);\n background-color: var(--color-surface);\n}\n\n.wSI5L-5rODg- {\n border: var(--border-base) solid transparent;\n color: var(--color-heading);\n background-color: var(--chip-base-bg);\n --chip--gradient-color-variation: var(--chip-base-bg);\n}\n\n.wSI5L-5rODg-:hover,\n.wSI5L-5rODg-:focus-visible {\n background-color: var(--chip-base--hover);\n --chip--gradient-color-variation--hover: var(--chip-base--hover);\n}\n\n.SmUxkzpIC84-,\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus-visible,\n.Mux23dmZSuw-.SmUxkzpIC84-,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {\n border: var(--border-base) solid var(--color-critical);\n background-color: var(--color-critical--surface);\n --chip--gradient-color-variation: var(--color-critical--surface);\n --chip--gradient-color-variation--hover: var(--color-critical--surface);\n}\n\n.SmUxkzpIC84-:hover,\n.SmUxkzpIC84-:focus-visible,\n.Mux23dmZSuw-.SmUxkzpIC84-:hover,\n.Mux23dmZSuw-.SmUxkzpIC84-:focus-visible {\n background-color: var(--color-surface--background--hover);\n --chip--gradient-color-variation: var(--color-surface--background--hover);\n --chip--gradient-color-variation--hover: var(\n --color-surface--background--hover\n );\n}\n\n.Mux23dmZSuw- {\n border: var(--border-base) solid var(--color-border);\n background-color: var(--color-surface);\n --chip--gradient-color-variation: var(--color-surface);\n}\n\n/* CAUTION: Order is important here since\n* there is are different styles for subtle:focus and subtle:hover\n* and we want hover to take priority\n*/\n\n.Mux23dmZSuw-:focus-visible {\n --chip--gradient-color-variation--hover: var(--color-surface);\n}\n\n.Mux23dmZSuw-:hover {\n border: var(--border-base) solid var(--chip-base-bg);\n background-color: var(--chip-base-bg);\n --chip--gradient-color-variation--hover: var(--chip-base-bg);\n}\n\n.SmUxkzpIC84-.MbRItb9vKhc-,\n.SmUxkzpIC84-.MbRItb9vKhc-:hover,\n.SmUxkzpIC84-.MbRItb9vKhc-:focus-visible {\n background-color: var(--color-disabled--secondary);\n cursor: auto;\n}\n\n.MbRItb9vKhc-,\n.MbRItb9vKhc-:hover,\n.MbRItb9vKhc-:focus-visible {\n border: var(--border-base) solid var(--color-disabled--secondary);\n color: var(--color-disabled);\n background-color: var(--color-disabled--secondary);\n cursor: auto;\n --chip--gradient-color-variation: var(--color-disabled--secondary);\n --chip--gradient-color-variation--hover: var(--color-disabled--secondary);\n}\n\n.MbRItb9vKhc- .dg1-Izy1eQA- {\n background-color: var(--color-disabled);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- {\n background-color: var(--color-disabled--secondary);\n}\n\n.af7U8MvcbHE-.MbRItb9vKhc- .ySADfZ0FckM- path {\n fill: var(--color-disabled);\n}\n\n.tJhURjR2Vec- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n overflow: hidden;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n.tJhURjR2Vec- > * {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n}\n\n.tJhURjR2Vec- > p {\n overflow: hidden;\n white-space: nowrap;\n}\n\n.G3QXY0rNcK0- {\n position: absolute;\n top: 0;\n right: 0;\n width: var(--space-base);\n height: 100%;\n background: linear-gradient(\n to left,\n var(--chip-base-bg) 5%,\n rgba(255, 255, 255, 0)\n );\n background: linear-gradient(\n to left,\n var(--chip--gradient-color-variation) 5%,\n rgba(255, 255, 255, 0)\n );\n}\n\n.af7U8MvcbHE-:focus-visible .G3QXY0rNcK0-,\n.af7U8MvcbHE-:hover .G3QXY0rNcK0- {\n background: linear-gradient(\n to left,\n var(--chip-base--hover) 5%,\n rgba(255, 255, 255, 0)\n );\n background: linear-gradient(\n to left,\n var(--chip--gradient-color-variation--hover) 5%,\n rgba(255, 255, 255, 0)\n );\n}\n\n.MUKEW6c2nNA- {\n display: inline-block;\n width: 1px;\n}\n";
|
|
1407
|
+
var styles$19 = {"chip":"af7U8MvcbHE-","prefix":"e905AYK4SCc-","suffix":"ySADfZ0FckM-","empty":"usdkmQ9Sxbk-","chipBar":"dg1-Izy1eQA-","selected":"-lz0EYLTDgg-","base":"wSI5L-5rODg-","invalid":"SmUxkzpIC84-","subtle":"Mux23dmZSuw-","disabled":"MbRItb9vKhc-","chipContent":"tJhURjR2Vec-","truncateGradient":"G3QXY0rNcK0-","chipLabelRef":"MUKEW6c2nNA-"};
|
|
1408
|
+
styleInject(css_248z$1j);
|
|
1406
1409
|
|
|
1407
1410
|
/**
|
|
1408
1411
|
* Returns the first React Child that receives `true` from isCorrectComponent
|
|
@@ -1418,7 +1421,7 @@ function useChildComponent(children, isCorrectComponent) {
|
|
|
1418
1421
|
|
|
1419
1422
|
function ChipPrefix({ children }) {
|
|
1420
1423
|
const singleChild = useChildComponent(children, d => d.type === Avatar || d.type === Icon);
|
|
1421
|
-
return (React.createElement("span", { className: classnames(styles$
|
|
1424
|
+
return (React.createElement("span", { className: classnames(styles$19.prefix, !singleChild && styles$19.empty) }, singleChild));
|
|
1422
1425
|
}
|
|
1423
1426
|
|
|
1424
1427
|
function ChipSuffix({ children, className }) {
|
|
@@ -1427,13 +1430,13 @@ function ChipSuffix({ children, className }) {
|
|
|
1427
1430
|
if (!allowedSuffixIcons.includes((_a = singleChild === null || singleChild === void 0 ? void 0 : singleChild.props) === null || _a === void 0 ? void 0 : _a.name)) {
|
|
1428
1431
|
singleChild = undefined;
|
|
1429
1432
|
}
|
|
1430
|
-
return (React.createElement("span", { className: classnames(styles$
|
|
1433
|
+
return (React.createElement("span", { className: classnames(styles$19.suffix, className, !singleChild && styles$19.empty) }, singleChild));
|
|
1431
1434
|
}
|
|
1432
1435
|
const allowedSuffixIcons = ["cross", "add", "checkmark", "arrowDown"];
|
|
1433
1436
|
|
|
1434
|
-
var css_248z$
|
|
1435
|
-
var styles$
|
|
1436
|
-
styleInject(css_248z$
|
|
1437
|
+
var css_248z$1i = ":root {\n --tooltip--arrow-size: var(--space-small);\n --tooltip--offset: calc(-1 * var(--space-smaller));\n --tooltip--surface: var(--color-surface--reverse);\n}\n\n.q07bkGoq714- {\n display: none;\n}\n\n.dkCTRfc3vYk- {\n display: inline-block;\n position: absolute;\n z-index: var(--elevation-tooltip);\n pointer-events: none;\n}\n\n.yAFP4gRKlTM- {\n display: inline-block;\n position: relative;\n max-width: calc(var(--base-unit) * 15);\n padding: calc(var(--space-base) - var(--space-smallest)) var(--space-base);\n border-radius: var(--radius-larger);\n background-color: var(--color-surface--reverse);\n background-color: var(--tooltip--surface);\n}\n\n.jobber-retheme .yAFP4gRKlTM- {\n border-radius: var(--radius-base);\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-,\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n width: var(--space-small);\n width: var(--tooltip--arrow-size);\n height: var(--space-small);\n height: var(--tooltip--arrow-size);\n background-color: transparent;\n}\n\n.yAFP4gRKlTM- .j9KgRON7iTU-::after {\n content: \"\";\n display: block;\n position: absolute;\n background-color: var(--color-surface--reverse);\n background-color: var(--tooltip--surface);\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n.B6uh34-qEuA- {\n padding-bottom: var(--space-small);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- {\n -webkit-transform-origin: bottom center;\n transform-origin: bottom center;\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU- {\n bottom: calc(-1 * var(--space-smaller));\n bottom: var(--tooltip--offset);\n}\n\n.B6uh34-qEuA- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n border-top-width: 0;\n border-left-width: 0;\n}\n\n.Wft7Ug-lXEc- {\n padding-top: var(--space-small);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- {\n -webkit-transform-origin: top center;\n transform-origin: top center;\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU- {\n top: calc(-1 * var(--space-smaller));\n top: var(--tooltip--offset);\n}\n\n.Wft7Ug-lXEc- .yAFP4gRKlTM- .j9KgRON7iTU-::after {\n border-bottom-width: 0;\n border-right-width: 0;\n}\n\n.TpdeLUuiQMg- {\n margin: 0;\n color: var(--color-text--reverse);\n font-size: var(--typography--fontSize-base);\n font-weight: 600;\n line-height: var(--typography--lineHeight-base);\n}\n";
|
|
1438
|
+
var styles$18 = {"shadowActivator":"q07bkGoq714-","tooltipWrapper":"dkCTRfc3vYk-","tooltip":"yAFP4gRKlTM-","arrow":"j9KgRON7iTU-","above":"B6uh34-qEuA-","below":"Wft7Ug-lXEc-","tooltipMessage":"TpdeLUuiQMg-"};
|
|
1439
|
+
styleInject(css_248z$1i);
|
|
1437
1440
|
|
|
1438
1441
|
function useTooltipPositioning() {
|
|
1439
1442
|
var _a, _b;
|
|
@@ -1463,17 +1466,17 @@ function Tooltip({ message, children }) {
|
|
|
1463
1466
|
const [show, setShow] = useState(false);
|
|
1464
1467
|
const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning();
|
|
1465
1468
|
initializeListeners();
|
|
1466
|
-
const toolTipClassNames = classnames(styles$
|
|
1469
|
+
const toolTipClassNames = classnames(styles$18.tooltipWrapper, placement === "bottom" && styles$18.below, placement === "top" && styles$18.above);
|
|
1467
1470
|
return (React.createElement(React.Fragment, null,
|
|
1468
|
-
React.createElement("span", { className: styles$
|
|
1471
|
+
React.createElement("span", { className: styles$18.shadowActivator, ref: shadowRef }),
|
|
1469
1472
|
children,
|
|
1470
1473
|
React.createElement(TooltipPortal, null, show && Boolean(message) && (React.createElement("div", Object.assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
|
|
1471
|
-
React.createElement(motion.div, { className: styles$
|
|
1474
|
+
React.createElement(motion.div, { className: styles$18.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
|
|
1472
1475
|
damping: 50,
|
|
1473
1476
|
stiffness: 500,
|
|
1474
1477
|
} },
|
|
1475
|
-
React.createElement("p", { className: styles$
|
|
1476
|
-
React.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles$
|
|
1478
|
+
React.createElement("p", { className: styles$18.tooltipMessage }, message),
|
|
1479
|
+
React.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles$18.arrow })))))));
|
|
1477
1480
|
function initializeListeners() {
|
|
1478
1481
|
const showTooltip = () => {
|
|
1479
1482
|
setShow(true);
|
|
@@ -1527,11 +1530,11 @@ function TooltipPortal({ children }) {
|
|
|
1527
1530
|
}
|
|
1528
1531
|
|
|
1529
1532
|
const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
|
|
1530
|
-
const classes = classnames(styles$
|
|
1531
|
-
[styles$
|
|
1532
|
-
[styles$
|
|
1533
|
-
[styles$
|
|
1534
|
-
[styles$
|
|
1533
|
+
const classes = classnames(styles$19.chip, {
|
|
1534
|
+
[styles$19.invalid]: invalid,
|
|
1535
|
+
[styles$19.base]: variation === "base",
|
|
1536
|
+
[styles$19.subtle]: variation === "subtle",
|
|
1537
|
+
[styles$19.disabled]: disabled,
|
|
1535
1538
|
});
|
|
1536
1539
|
const prefix = useChildComponent(children, d => d.type === Chip.Prefix);
|
|
1537
1540
|
const suffix = useChildComponent(children, d => d.type === Chip.Suffix);
|
|
@@ -1541,16 +1544,16 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, on
|
|
|
1541
1544
|
return (React.createElement(Tooltip, { message: tooltipMessage },
|
|
1542
1545
|
React.createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },
|
|
1543
1546
|
prefix,
|
|
1544
|
-
React.createElement("div", { className: styles$
|
|
1547
|
+
React.createElement("div", { className: styles$19.chipContent },
|
|
1545
1548
|
heading && (React.createElement(React.Fragment, null,
|
|
1546
1549
|
React.createElement(Typography, { size: "base", fontWeight: "medium" },
|
|
1547
1550
|
heading,
|
|
1548
|
-
React.createElement("span", { ref: headingRef, className: styles$
|
|
1549
|
-
label && React.createElement("span", { className: styles$
|
|
1551
|
+
React.createElement("span", { ref: headingRef, className: styles$19.chipLabelRef })),
|
|
1552
|
+
label && React.createElement("span", { className: styles$19.chipBar }))),
|
|
1550
1553
|
React.createElement(Typography, { size: "base" },
|
|
1551
1554
|
label,
|
|
1552
|
-
React.createElement("span", { ref: labelRef, className: styles$
|
|
1553
|
-
!labelFullyVisible && (React.createElement("div", { className: styles$
|
|
1555
|
+
React.createElement("span", { ref: labelRef, className: styles$19.chipLabelRef })),
|
|
1556
|
+
!labelFullyVisible && (React.createElement("div", { className: styles$19.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
|
|
1554
1557
|
suffix)));
|
|
1555
1558
|
};
|
|
1556
1559
|
function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
|
|
@@ -1566,13 +1569,13 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
|
|
|
1566
1569
|
Chip.Prefix = ChipPrefix;
|
|
1567
1570
|
Chip.Suffix = ChipSuffix;
|
|
1568
1571
|
|
|
1569
|
-
var css_248z$
|
|
1570
|
-
var styles$
|
|
1571
|
-
styleInject(css_248z$
|
|
1572
|
+
var css_248z$1h = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.zn6onyiQVmA- {\n display: -ms-flexbox;\n display: flex;\n gap: var(--space-small);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.PEnZzMEgbhU- {\n display: inline-grid;\n position: relative;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-larger);\n color: var(--color-text--secondary);\n text-align: left;\n vertical-align: middle;\n background-color: var(--color-surface);\n transition: var(--timing-base) ease-in-out;\n transition-property: background-color, box-shadow, color;\n grid-template-columns: -webkit-max-content;\n grid-template-columns: max-content;\n -ms-flex-align: center;\n align-items: center;\n gap: var(--space-small);\n}\n\n.dtysUhwYdG4-,\n.xGaMCAYsdwA- {\n padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n.dtysUhwYdG4- {\n grid-template-columns: -webkit-min-content 1fr;\n grid-template-columns: min-content 1fr;\n}\n\n.xGaMCAYsdwA- {\n grid-template-columns: 1fr -webkit-min-content;\n grid-template-columns: 1fr min-content;\n}\n\n.dtysUhwYdG4-.xGaMCAYsdwA- {\n grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n grid-template-columns: min-content 1fr min-content;\n}\n\n.SNT7gGV-h-o-,\n.W4D98cvEth4- ~ .PEnZzMEgbhU- {\n box-shadow: var(--shadow-base);\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n/**\n * Interaction\n */\n\n.PEnZzMEgbhU-:focus,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.SNT7gGV-h-o-:hover,\n.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {\n background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.PEnZzMEgbhU-._0hEzaTXK9M0- {\n border-color: var(--color-surface--reverse);\n color: var(--color-text--reverse);\n background-color: var(--color-surface--reverse);\n}\n\n.PEnZzMEgbhU-.JApS2787BU8- {\n border-color: var(--color-critical--onSurface);\n color: var(--color-critical--onSurface);\n background-color: var(--color-critical--surface);\n}\n\n.PEnZzMEgbhU-.Kg0c8WVgMpg- {\n border-color: var(--color-disabled--secondary);\n color: var(--color-disabled);\n background-color: var(--color-disabled--secondary);\n}\n\n._0hEzaTXK9M0-.Kg0c8WVgMpg- {\n border-color: var(--color-disabled);\n color: var(--color-white);\n background-color: var(--color-disabled);\n}\n\n.JApS2787BU8-.Kg0c8WVgMpg- {\n border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n.W4D98cvEth4- {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._0-ZWexS4Gfg- {\n display: -ms-flexbox;\n display: flex;\n border-radius: var(--radius-base);\n cursor: pointer;\n transition: background-color 200ms ease;\n}\n\n._0-ZWexS4Gfg-:hover,\n._0-ZWexS4Gfg-:focus {\n background-color: var(--color-surface--hover);\n}\n\n._0-ZWexS4Gfg-:focus,\n.SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n.DQPnZP4UZpw- > svg {\n fill: var(--color-interactive--subtle);\n}\n\n.DQPnZP4UZpw- {\n display: -ms-flexbox;\n display: flex;\n}\n";
|
|
1573
|
+
var styles$17 = {"wrapper":"zn6onyiQVmA-","chip":"PEnZzMEgbhU-","hasPrefix":"dtysUhwYdG4-","hasSuffix":"xGaMCAYsdwA-","clickable":"SNT7gGV-h-o-","input":"W4D98cvEth4-","active":"_0hEzaTXK9M0-","invalid":"JApS2787BU8-","disabled":"Kg0c8WVgMpg-","button":"_0-ZWexS4Gfg-","icon":"DQPnZP4UZpw-"};
|
|
1574
|
+
styleInject(css_248z$1h);
|
|
1572
1575
|
|
|
1573
1576
|
function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
|
|
1574
1577
|
const buttonRef = useRef();
|
|
1575
|
-
return (React.createElement("div", { ref: buttonRef, className: styles$
|
|
1578
|
+
return (React.createElement("div", { ref: buttonRef, className: styles$17.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
|
|
1576
1579
|
React.createElement(Icon, { name: icon, color: getColor() })));
|
|
1577
1580
|
function handleKeyUp(event) {
|
|
1578
1581
|
if (document.activeElement === buttonRef.current &&
|
|
@@ -1614,7 +1617,7 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
|
|
|
1614
1617
|
return React.createElement(React.Fragment, null);
|
|
1615
1618
|
function renderChipIcon(icon) {
|
|
1616
1619
|
const color = getIconColor();
|
|
1617
|
-
return (React.createElement("div", { className: styles$
|
|
1620
|
+
return (React.createElement("div", { className: styles$17.icon }, React.cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
|
|
1618
1621
|
}
|
|
1619
1622
|
function getIconColor() {
|
|
1620
1623
|
if (disabled && !active)
|
|
@@ -1636,13 +1639,13 @@ function InternalChipAffix({ affix, active, invalid, disabled, }) {
|
|
|
1636
1639
|
function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
|
|
1637
1640
|
const [truncateRef, setTruncateRef] = useState();
|
|
1638
1641
|
const isClickable = onClick && !disabled;
|
|
1639
|
-
const classNames = classnames(styles$
|
|
1640
|
-
[styles$
|
|
1641
|
-
[styles$
|
|
1642
|
-
[styles$
|
|
1643
|
-
[styles$
|
|
1644
|
-
[styles$
|
|
1645
|
-
[styles$
|
|
1642
|
+
const classNames = classnames(styles$17.chip, {
|
|
1643
|
+
[styles$17.clickable]: isClickable,
|
|
1644
|
+
[styles$17.active]: active,
|
|
1645
|
+
[styles$17.disabled]: disabled,
|
|
1646
|
+
[styles$17.invalid]: invalid,
|
|
1647
|
+
[styles$17.hasPrefix]: prefix,
|
|
1648
|
+
[styles$17.hasSuffix]: suffix,
|
|
1646
1649
|
});
|
|
1647
1650
|
const affixProps = { active, invalid, disabled };
|
|
1648
1651
|
const Tag = onClick ? "button" : "div";
|
|
@@ -1661,10 +1664,10 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
|
|
|
1661
1664
|
}
|
|
1662
1665
|
|
|
1663
1666
|
function InternalChipSingleSelect({ children, selected, name = useId(), onChange, onClick, }) {
|
|
1664
|
-
return (React.createElement("div", { className: styles$
|
|
1667
|
+
return (React.createElement("div", { className: styles$17.wrapper, "data-testid": "singleselect-chips" }, React.Children.map(children, child => {
|
|
1665
1668
|
const isSelected = child.props.value === selected;
|
|
1666
1669
|
return (React.createElement("label", null,
|
|
1667
|
-
React.createElement("input", { type: "radio", checked: isSelected, className: styles$
|
|
1670
|
+
React.createElement("input", { type: "radio", checked: isSelected, className: styles$17.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
|
|
1668
1671
|
/* No op. onClick handles the change to allow deselecting. */
|
|
1669
1672
|
}, disabled: child.props.disabled }),
|
|
1670
1673
|
React.createElement(InternalChip, Object.assign({}, child.props, { active: isSelected }))));
|
|
@@ -1692,10 +1695,10 @@ function InternalChipSingleSelect({ children, selected, name = useId(), onChange
|
|
|
1692
1695
|
}
|
|
1693
1696
|
|
|
1694
1697
|
function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
|
|
1695
|
-
return (React.createElement("div", { className: styles$
|
|
1698
|
+
return (React.createElement("div", { className: styles$17.wrapper, "data-testid": "multiselect-chips" }, React.Children.map(children, chip => {
|
|
1696
1699
|
const isChipActive = isChipSelected(chip.props.value);
|
|
1697
1700
|
return (React.createElement("label", null,
|
|
1698
|
-
React.createElement("input", { type: "checkbox", checked: isChipActive, className: styles$
|
|
1701
|
+
React.createElement("input", { type: "checkbox", checked: isChipActive, className: styles$17.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
|
|
1699
1702
|
React.createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
|
|
1700
1703
|
})));
|
|
1701
1704
|
function isChipSelected(value) {
|
|
@@ -1735,9 +1738,9 @@ function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
|
|
|
1735
1738
|
}
|
|
1736
1739
|
}
|
|
1737
1740
|
|
|
1738
|
-
var css_248z$
|
|
1739
|
-
var styles$
|
|
1740
|
-
styleInject(css_248z$
|
|
1741
|
+
var css_248z$1g = ".sCNIjluCskc- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n box-sizing: border-box;\n border: var(--border-base) solid transparent;\n border-radius: var(--radius-base);\n transition: all var(--timing-base);\n gap: var(--space-small);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.MFUlz1WQLdk- {\n -ms-flex: 1;\n flex: 1;\n min-width: 120px;\n padding: var(--space-small) 0;\n border: none;\n border-radius: 0;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-size: var(--typography--fontSize-base);\n line-height: var(--typography--lineHeight-base);\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.MFUlz1WQLdk-:focus {\n outline: none;\n}\n\n.V9eYJdjPAeY- {\n position: relative;\n z-index: var(--elevation-menu);\n width: 100%;\n}\n\n.LdytkOeCU9c- {\n max-height: 320px;\n box-shadow: var(--shadow-base);\n padding: var(--space-small) 0;\n border-radius: var(--radius-base);\n overflow-y: scroll;\n background-color: var(--color-surface);\n}\n\n.y7Cz2u8BuNE-,\n._-7bmao8Q9As- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--space-small);\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n -ms-flex-align: center;\n align-items: center;\n gap: var(--space-small);\n}\n\n.y7Cz2u8BuNE-:focus {\n box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n outline: none;\n background-color: var(--color-surface--hover);\n}\n\n._-7bmao8Q9As- {\n -ms-flex-pack: center;\n justify-content: center;\n}\n";
|
|
1742
|
+
var styles$16 = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-"};
|
|
1743
|
+
styleInject(css_248z$1g);
|
|
1741
1744
|
|
|
1742
1745
|
function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
|
|
1743
1746
|
const ref = useRef(null);
|
|
@@ -2011,22 +2014,22 @@ function InternalChipDismissibleInput(props) {
|
|
|
2011
2014
|
return React.cloneElement(activator, { onClick: handleOpenMenu });
|
|
2012
2015
|
}
|
|
2013
2016
|
return (React.createElement(React.Fragment, null,
|
|
2014
|
-
React.createElement("input", { ref: inputRef, className: styles$
|
|
2015
|
-
(hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles$
|
|
2016
|
-
React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles$
|
|
2017
|
-
allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles$
|
|
2018
|
-
[styles$
|
|
2017
|
+
React.createElement("input", { ref: inputRef, className: styles$16.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
|
|
2018
|
+
(hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles$16.menu, style: popperStyles.popper }, attributes.popper),
|
|
2019
|
+
React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles$16.menuList, "data-testid": "chip-menu" },
|
|
2020
|
+
allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles$16.menuListOption, {
|
|
2021
|
+
[styles$16.activeOption]: activeIndex === i,
|
|
2019
2022
|
}), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
|
|
2020
2023
|
React.createElement("span", { "aria-hidden": true }, option.prefix),
|
|
2021
2024
|
React.createElement(Text, null, option.label)))),
|
|
2022
2025
|
React.createElement("div", { ref: visibleChildRef }),
|
|
2023
|
-
isLoadingMore && (React.createElement("div", { className: styles$
|
|
2026
|
+
isLoadingMore && (React.createElement("div", { className: styles$16.loadingIndicator },
|
|
2024
2027
|
React.createElement(Spinner, { size: "small", inline: true }))))))));
|
|
2025
2028
|
}
|
|
2026
2029
|
|
|
2027
2030
|
function InternalChipDismissible(props) {
|
|
2028
2031
|
const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
|
|
2029
|
-
return (React.createElement("div", { ref: wrapperRef, className: styles$
|
|
2032
|
+
return (React.createElement("div", { ref: wrapperRef, className: styles$16.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
|
|
2030
2033
|
sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
|
|
2031
2034
|
React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
|
|
2032
2035
|
}
|
|
@@ -2042,13 +2045,13 @@ function Chips(props) {
|
|
|
2042
2045
|
}
|
|
2043
2046
|
}
|
|
2044
2047
|
|
|
2045
|
-
var css_248z$
|
|
2046
|
-
var styles$
|
|
2047
|
-
styleInject(css_248z$
|
|
2048
|
+
var css_248z$1f = ".m1w5vdUZ6rQ- {\n z-index: var(--elevation-tooltip);\n width: calc(var(--space-extravagant) * 3.75);\n box-shadow: var(--shadow-base);\n margin-top: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-larger);\n overflow: auto;\n background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n display: none;\n visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: sticky;\n gap: var(--space-smaller);\n bottom: 0;\n width: 100%;\n background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n padding-bottom: var(--space-small);\n}\n";
|
|
2049
|
+
var styles$15 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
|
|
2050
|
+
styleInject(css_248z$1f);
|
|
2048
2051
|
|
|
2049
|
-
var css_248z$
|
|
2050
|
-
var styles$
|
|
2051
|
-
styleInject(css_248z$
|
|
2052
|
+
var css_248z$1e = ".MIyb-oFZg9w- {\n position: relative;\n}\n\n.WZPK91I4aJs- {\n width: 100%;\n padding: var(--space-base);\n padding-right: calc(var(--space-large) * 2.25);\n border: none;\n border-bottom: var(--border-base) solid var(--color-border);\n font-family: var(--typography--fontFamily-normal);\n font-size: var(--typography--fontSize-base);\n}\n\n.WZPK91I4aJs-::-webkit-search-decoration,\n.WZPK91I4aJs-::-webkit-search-cancel-button,\n.WZPK91I4aJs-::-webkit-search-results-button,\n.WZPK91I4aJs-::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}\n\n.WZPK91I4aJs-:focus {\n outline: none;\n}\n\n._7loHrVUe-Rk- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 50%;\n right: var(--space-base);\n z-index: var(--elevation-tooltip);\n width: var(--space-large);\n height: var(--space-large);\n padding: 0;\n border: none;\n border-radius: var(--radius-circle);\n background-color: var(--color-surface--background);\n cursor: pointer;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n._7loHrVUe-Rk-:focus {\n outline: transparent;\n}\n\n._7loHrVUe-Rk-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n";
|
|
2053
|
+
var styles$14 = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
|
|
2054
|
+
styleInject(css_248z$1e);
|
|
2052
2055
|
|
|
2053
2056
|
function ComboboxContentSearch(props) {
|
|
2054
2057
|
const searchRef = useRef(null);
|
|
@@ -2060,9 +2063,9 @@ function ComboboxContentSearch(props) {
|
|
|
2060
2063
|
}, 0);
|
|
2061
2064
|
}
|
|
2062
2065
|
}, [props.open]);
|
|
2063
|
-
return (React.createElement("div", { className: styles$
|
|
2064
|
-
React.createElement("input", { type: "search", ref: searchRef, className: styles$
|
|
2065
|
-
props.searchValue && (React.createElement("button", { className: styles$
|
|
2066
|
+
return (React.createElement("div", { className: styles$14.search },
|
|
2067
|
+
React.createElement("input", { type: "search", ref: searchRef, className: styles$14.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
|
|
2068
|
+
props.searchValue && (React.createElement("button", { className: styles$14.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
|
|
2066
2069
|
React.createElement(Icon, { name: "remove", size: "small" })))));
|
|
2067
2070
|
function clearSearch() {
|
|
2068
2071
|
var _a;
|
|
@@ -2076,32 +2079,32 @@ function ComboboxContentSearch(props) {
|
|
|
2076
2079
|
}
|
|
2077
2080
|
}
|
|
2078
2081
|
|
|
2079
|
-
var css_248z$
|
|
2080
|
-
var styles$
|
|
2081
|
-
styleInject(css_248z$
|
|
2082
|
+
var css_248z$1d = ".FXzzrJAf890- {\n --glimmer-background: rgba(var(--color-black--rgb) 5%);\n --glimmer-shine: rgba(var(--color-white--rgb), var(--glimmer-shine-opacity));\n --glimmer-shine-opacity: 80%;\n --duration-base: calc(var(--timing-slowest) * 4); /* 2s */\n --duration-fast: calc(var(--duration-base) / 2); /* 1s */\n\n width: 100%;\n height: 100%;\n border-radius: var(--radius-base);\n background-color: rgba(var(--color-black--rgb) 5%);\n background-color: var(--glimmer-background);\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n rgba(var(--color-white--rgb) 80%) var(--space-larger),\n transparent var(--space-extravagant)\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n rgba(var(--color-white--rgb), 80%) var(--space-larger),\n transparent var(--space-extravagant)\n );\n background-image: linear-gradient(\n 90deg,\n transparent 0px,\n var(--glimmer-shine) var(--space-larger),\n transparent var(--space-extravagant)\n );\n background-repeat: no-repeat;\n background-size: var(--space-extravagant) 100%;\n -webkit-animation: FXzzrJAf890- 2s infinite linear;\n animation: FXzzrJAf890- 2s infinite linear;\n}@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {.FXzzrJAf890- {\n --glimmer-background: rgba(var(--color-black--rgb), 5%);\n}\n}\n\n.s9bG0yRJR3A- {\n --glimmer-background: rgba(var(--color-white--rgb) 10%);\n --glimmer-shine-opacity: 25%;\n}\n\n@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) {\n\n.s9bG0yRJR3A- {\n --glimmer-background: rgba(var(--color-white--rgb), 10%);\n}\n}\n\n@-webkit-keyframes FXzzrJAf890- {\n 0%,\n 20% {\n background-position-x: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position-x: calc(100% + var(--space-extravagant));\n }\n}\n\n@keyframes FXzzrJAf890- {\n 0%,\n 20% {\n background-position-x: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position-x: calc(100% + var(--space-extravagant));\n }\n}\n\n.M0X0dxjIyv4- {\n width: 30%;\n max-width: 180px;\n min-width: 120px;\n}\n\n.v2Q1amzd7Ac- {\n display: inline-block;\n width: 100px;\n height: 36px;\n}\n\n._8va--lBgr38- {\n display: block;\n width: 100%;\n min-width: 100px;\n}\n";
|
|
2083
|
+
var styles$13 = {"glimmer":"FXzzrJAf890-","reverseTheme":"s9bG0yRJR3A-","header":"M0X0dxjIyv4-","button":"v2Q1amzd7Ac-","buttonFill":"_8va--lBgr38-"};
|
|
2084
|
+
styleInject(css_248z$1d);
|
|
2082
2085
|
|
|
2083
|
-
var css_248z$
|
|
2086
|
+
var css_248z$1c = ".siUUG4rZNSk- {\n height: var(--space-small);\n}\n\n.nFuBXyrhG2Q- {\n height: var(--space-base);\n}\n\n.oiVEoAqI-fU- {\n height: var(--space-large);\n}\n\n.Tkmo6mSMI9Y- {\n height: var(--space-larger);\n}\n\n.uVeaD3IhD6o- {\n height: var(--space-largest);\n}\n\n._6Wak9NLJ3VQ- {\n height: 100%;\n min-width: var(--space-base);\n min-height: var(--space-base);\n}\n";
|
|
2084
2087
|
var sizes$2 = {"small":"siUUG4rZNSk-","base":"nFuBXyrhG2Q-","large":"oiVEoAqI-fU-","larger":"Tkmo6mSMI9Y-","largest":"uVeaD3IhD6o-","auto":"_6Wak9NLJ3VQ-"};
|
|
2085
|
-
styleInject(css_248z$
|
|
2088
|
+
styleInject(css_248z$1c);
|
|
2086
2089
|
|
|
2087
|
-
var css_248z$
|
|
2090
|
+
var css_248z$1b = ".enoWbteryXg- {\n width: 100%;\n}\n\n._9qkwCdedX1M- {\n width: 85%;\n}\n\n.XtyJxvcJDFs- {\n width: 70%;\n}\n\n._8unQ0TS1He4-,\n.ameRMYEKfss- {\n width: auto;\n aspect-ratio: 1;\n}\n\n.ameRMYEKfss- {\n border-radius: var(--radius-circle);\n}\n";
|
|
2088
2091
|
var shapes = {"rectangle":"enoWbteryXg-","rectangleShort":"_9qkwCdedX1M-","rectangleShorter":"XtyJxvcJDFs-","square":"_8unQ0TS1He4-","circle":"ameRMYEKfss-"};
|
|
2089
|
-
styleInject(css_248z$
|
|
2092
|
+
styleInject(css_248z$1b);
|
|
2090
2093
|
|
|
2091
|
-
var css_248z$
|
|
2094
|
+
var css_248z$1a = ".hO0mZ6TeVko- {\n -webkit-animation-duration: var(--duration-base);\n animation-duration: var(--duration-base);\n}\n\n.WXi5-zF8Ll4- {\n -webkit-animation-duration: calc(var(--duration-fast));\n animation-duration: calc(var(--duration-fast));\n}\n";
|
|
2092
2095
|
var timings = {"base":"hO0mZ6TeVko-","fast":"WXi5-zF8Ll4-"};
|
|
2093
|
-
styleInject(css_248z$
|
|
2096
|
+
styleInject(css_248z$1a);
|
|
2094
2097
|
|
|
2095
|
-
var css_248z$
|
|
2098
|
+
var css_248z$19 = "._340SlNuzSDQ- > :not(:last-child) {\n margin-bottom: var(--space-minuscule);\n}\n\n.H1BK-YSBQBQ- > :not(:last-child) {\n margin-bottom: var(--space-smallest);\n}\n\n.xUe31mY0kro- > :not(:last-child) {\n margin-bottom: var(--space-smaller);\n}\n\n.rDJFaGPzCbE- > :not(:last-child) {\n margin-bottom: var(--space-small);\n}\n\n.SRYe3DkjH1c- > :not(:last-child) {\n margin-bottom: var(--space-base);\n}\n\n._7TZ4MI3kr4Y- > :not(:last-child) {\n margin-bottom: var(--space-large);\n}\n\n.jvPl3aAN9PA- > :not(:last-child) {\n margin-bottom: var(--space-larger);\n}\n\n.fFTgb4ra1X0- > :not(:last-child) {\n margin-bottom: var(--space-largest);\n}\n\n.kKnfL37LO6A- > :not(:last-child) {\n margin-bottom: var(--space-extravagant);\n}\n";
|
|
2096
2099
|
var spacings = {"minuscule":"_340SlNuzSDQ-","smallest":"H1BK-YSBQBQ-","smaller":"xUe31mY0kro-","small":"rDJFaGPzCbE-","base":"SRYe3DkjH1c-","large":"_7TZ4MI3kr4Y-","larger":"jvPl3aAN9PA-","largest":"fFTgb4ra1X0-","extravagant":"kKnfL37LO6A-"};
|
|
2097
|
-
styleInject(css_248z$
|
|
2100
|
+
styleInject(css_248z$19);
|
|
2098
2101
|
|
|
2099
|
-
var css_248z$
|
|
2100
|
-
var styles$
|
|
2101
|
-
styleInject(css_248z$
|
|
2102
|
+
var css_248z$18 = "._4On2F-4nWuY- {\n padding: 0;\n padding: var(--public-content--padding, 0);\n}\n";
|
|
2103
|
+
var styles$12 = {"padded":"_4On2F-4nWuY-"};
|
|
2104
|
+
styleInject(css_248z$18);
|
|
2102
2105
|
|
|
2103
2106
|
function Content({ children, spacing = "base", type = "div", }) {
|
|
2104
|
-
const className = classnames(styles$
|
|
2107
|
+
const className = classnames(styles$12.padded, spacings[spacing]);
|
|
2105
2108
|
return createElement(type, { className }, children);
|
|
2106
2109
|
}
|
|
2107
2110
|
|
|
@@ -2117,7 +2120,7 @@ const GLIMMER_BUTTON_TEST_ID = "ATL-GlimmerButton";
|
|
|
2117
2120
|
* @experimental
|
|
2118
2121
|
*/
|
|
2119
2122
|
function Glimmer({ size = "base", shape = "rectangle", timing = "base", reverseTheme = false, width, }) {
|
|
2120
|
-
const className = classnames(styles$
|
|
2123
|
+
const className = classnames(styles$13.glimmer, sizes$2[size], shapes[shape], timings[timing], { [styles$13.reverseTheme]: reverseTheme });
|
|
2121
2124
|
return (React.createElement("div", { "aria-busy": "true", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
|
|
2122
2125
|
}
|
|
2123
2126
|
Glimmer.Header = function GlimmerHeader(_a) {
|
|
@@ -2129,7 +2132,7 @@ Glimmer.Header = function GlimmerHeader(_a) {
|
|
|
2129
2132
|
4: "base",
|
|
2130
2133
|
5: "small",
|
|
2131
2134
|
};
|
|
2132
|
-
return (React.createElement("div", { className: styles$
|
|
2135
|
+
return (React.createElement("div", { className: styles$13.header, "data-testid": GLIMMER_HEADER_TEST_ID },
|
|
2133
2136
|
React.createElement(Glimmer, Object.assign({ size: headerSize[level] }, props))));
|
|
2134
2137
|
};
|
|
2135
2138
|
Glimmer.Text = function GlimmerText(_a) {
|
|
@@ -2144,20 +2147,20 @@ Glimmer.Text = function GlimmerText(_a) {
|
|
|
2144
2147
|
};
|
|
2145
2148
|
Glimmer.Button = function GlimmerButton(_a) {
|
|
2146
2149
|
var { fullWidth = false } = _a, props = __rest(_a, ["fullWidth"]);
|
|
2147
|
-
const buttonClassNames = classnames(styles$
|
|
2148
|
-
[styles$
|
|
2150
|
+
const buttonClassNames = classnames(styles$13.button, {
|
|
2151
|
+
[styles$13.buttonFill]: fullWidth,
|
|
2149
2152
|
});
|
|
2150
2153
|
return (React.createElement("div", { className: buttonClassNames, "data-testid": GLIMMER_BUTTON_TEST_ID },
|
|
2151
2154
|
React.createElement(Glimmer, Object.assign({}, props, { size: "auto" }))));
|
|
2152
2155
|
};
|
|
2153
2156
|
|
|
2154
|
-
var css_248z$
|
|
2155
|
-
var styles$
|
|
2156
|
-
styleInject(css_248z$
|
|
2157
|
+
var css_248z$17 = ".SgMzjOcdE-E- {\n position: relative;\n padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n display: -ms-flexbox;\n display: flex;\n\n max-height: calc(var(--space-small) * 33.33);\n margin: 0;\n padding: 0;\n overflow: auto;\n list-style: none;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n left: 0;\n height: var(--space-base);\n pointer-events: none;\n transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n bottom: var(--space-small);\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0) 0%,\n rgb(255, 255, 255) 100%\n );\n}\n\n.SgMzjOcdE-E-::before {\n top: var(--space-small);\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 1),\n rgba(255, 255, 255, 0)\n );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n opacity: 0;\n}\n\n.A6z4OI58xoE- {\n padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n position: sticky;\n bottom: 0;\n padding: var(--space-base) 0;\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk-:empty {\n display: none;\n}\n";
|
|
2158
|
+
var styles$11 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
|
|
2159
|
+
styleInject(css_248z$17);
|
|
2157
2160
|
|
|
2158
|
-
var css_248z$
|
|
2159
|
-
var styles
|
|
2160
|
-
styleInject(css_248z$
|
|
2161
|
+
var css_248z$16 = "._5QdRGmaNHvc- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n min-height: calc((var(--space-largest) - var(--space-smaller)));\n box-sizing: border-box;\n margin: 0 var(--space-small);\n padding: var(--space-small);\n border-radius: var(--radius-large);\n color: var(--color-heading);\n font-weight: 500;\n cursor: pointer;\n transition: all var(--timing-base);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n outline: none;\n}\n\n._5QdRGmaNHvc-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n";
|
|
2162
|
+
var styles$10 = {"option":"_5QdRGmaNHvc-"};
|
|
2163
|
+
styleInject(css_248z$16);
|
|
2161
2164
|
|
|
2162
2165
|
const ComboboxContext = React.createContext({});
|
|
2163
2166
|
function ComboboxContextProvider(_a) {
|
|
@@ -2169,42 +2172,42 @@ function ComboboxOption(props) {
|
|
|
2169
2172
|
const { selected, selectionHandler } = useContext(ComboboxContext);
|
|
2170
2173
|
const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
|
|
2171
2174
|
return (React.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
|
|
2172
|
-
selectionHandler({ id: props.id, label: props.label }), className: classnames(styles
|
|
2175
|
+
selectionHandler({ id: props.id, label: props.label }), className: classnames(styles$10.option) },
|
|
2173
2176
|
props.label,
|
|
2174
2177
|
React.createElement("div", null, isSelected && React.createElement(Icon, { name: "checkmark", color: "blue" }))));
|
|
2175
2178
|
}
|
|
2176
2179
|
|
|
2177
|
-
var css_248z$
|
|
2178
|
-
var styles
|
|
2179
|
-
styleInject(css_248z$
|
|
2180
|
+
var css_248z$15 = "._3s8-RC5Ky3s- {\n -webkit-transform: translateY(calc(var(--space-largest) * -1));\n transform: translateY(calc(var(--space-largest) * -1));\n}\n";
|
|
2181
|
+
var styles$$ = {"trigger":"_3s8-RC5Ky3s-"};
|
|
2182
|
+
styleInject(css_248z$15);
|
|
2180
2183
|
|
|
2181
2184
|
function ComboboxLoadMore({ onLoadMore }) {
|
|
2182
2185
|
const [inViewRef, isInView] = useInView$1();
|
|
2183
2186
|
useEffect(() => {
|
|
2184
2187
|
isInView && onLoadMore();
|
|
2185
2188
|
}, [isInView]);
|
|
2186
|
-
return (React.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles
|
|
2189
|
+
return (React.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles$$.trigger }));
|
|
2187
2190
|
}
|
|
2188
2191
|
|
|
2189
2192
|
function ComboboxContentList(props) {
|
|
2190
2193
|
const optionsExist = props.options.length > 0;
|
|
2191
2194
|
const hasSearchTerm = props.searchValue.length > 0;
|
|
2192
2195
|
const { listScrollState } = useScrollState(props.optionsListRef, props.options);
|
|
2193
|
-
return (React.createElement("div", { className: classnames(styles$
|
|
2194
|
-
optionsExist && (React.createElement("ul", { className: styles$
|
|
2196
|
+
return (React.createElement("div", { className: classnames(styles$11.container, styles$11[listScrollState]) },
|
|
2197
|
+
optionsExist && (React.createElement("ul", { className: styles$11.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
|
|
2195
2198
|
props.options.map(option => {
|
|
2196
2199
|
return (React.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
|
|
2197
2200
|
}),
|
|
2198
|
-
React.createElement("div", { className: classnames([styles$
|
|
2201
|
+
React.createElement("div", { className: classnames([styles$11.loadingContainer, styles$11.hasOptions]) },
|
|
2199
2202
|
React.createElement(AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner, { size: "small" })))),
|
|
2200
2203
|
props.onLoadMore && (React.createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
|
|
2201
|
-
props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles$
|
|
2204
|
+
props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles$11.loadingContainer, key: index },
|
|
2202
2205
|
React.createElement(Glimmer, { shape: "rectangle", size: "small" })))))),
|
|
2203
|
-
hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles$
|
|
2206
|
+
hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles$11.filterMessage },
|
|
2204
2207
|
React.createElement(Text, { variation: "subdued" },
|
|
2205
2208
|
"No results for ",
|
|
2206
2209
|
`“${props.searchValue}”`))),
|
|
2207
|
-
!hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles$
|
|
2210
|
+
!hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles$11.emptyStateMessage },
|
|
2208
2211
|
React.createElement(Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
|
|
2209
2212
|
}
|
|
2210
2213
|
function getZeroIndexStateText(subjectNoun) {
|
|
@@ -2249,9 +2252,9 @@ function useScrollState(optionsListRef, options) {
|
|
|
2249
2252
|
return { listScrollState };
|
|
2250
2253
|
}
|
|
2251
2254
|
|
|
2252
|
-
var css_248z$
|
|
2253
|
-
var styles$
|
|
2254
|
-
styleInject(css_248z$
|
|
2255
|
+
var css_248z$14 = ".Q-mwo-g5Fi8- {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-base) var(--space-small) 0 var(--space-base);\n -ms-flex-pack: justify;\n justify-content: space-between;\n gap: var(--space-smaller);\n}\n";
|
|
2256
|
+
var styles$_ = {"header":"Q-mwo-g5Fi8-"};
|
|
2257
|
+
styleInject(css_248z$14);
|
|
2255
2258
|
|
|
2256
2259
|
function ComboboxContentHeader(props) {
|
|
2257
2260
|
const hasSelected = props.selectedCount > 0;
|
|
@@ -2259,7 +2262,7 @@ function ComboboxContentHeader(props) {
|
|
|
2259
2262
|
const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
|
|
2260
2263
|
const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
|
|
2261
2264
|
const showAction = hasSelected || props.hasOptionsVisible;
|
|
2262
|
-
return (React.createElement("div", { className: styles$
|
|
2265
|
+
return (React.createElement("div", { className: styles$_.header, "data-testid": "ATL-Combobox-Header" },
|
|
2263
2266
|
React.createElement(Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
|
|
2264
2267
|
showAction && (React.createElement(Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
|
|
2265
2268
|
}
|
|
@@ -2385,7 +2388,7 @@ function ComboboxContent(props) {
|
|
|
2385
2388
|
const optionsExist = props.options.length > 0;
|
|
2386
2389
|
const { optionsListRef } = useComboboxContent(props.open, props.selected);
|
|
2387
2390
|
const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
|
|
2388
|
-
const template = (React.createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames(styles$
|
|
2391
|
+
const template = (React.createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames(styles$15.content, { [styles$15.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
|
|
2389
2392
|
React.createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
|
|
2390
2393
|
props.multiselect && optionsExist && (React.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
|
|
2391
2394
|
props.selectedStateSetter([]);
|
|
@@ -2393,15 +2396,15 @@ function ComboboxContent(props) {
|
|
|
2393
2396
|
props.selectedStateSetter(props.options);
|
|
2394
2397
|
} })),
|
|
2395
2398
|
React.createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
|
|
2396
|
-
props.actionElements && (React.createElement("div", { className: styles$
|
|
2397
|
-
[styles$
|
|
2399
|
+
props.actionElements && (React.createElement("div", { className: styles$15.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React.createElement("div", { key: index, className: classnames({
|
|
2400
|
+
[styles$15.actionPadding]: index === childrenArray.length - 1,
|
|
2398
2401
|
}) }, child)))))));
|
|
2399
2402
|
return ReactDOM.createPortal(template, document.body);
|
|
2400
2403
|
}
|
|
2401
2404
|
|
|
2402
|
-
var css_248z$
|
|
2403
|
-
var styles$
|
|
2404
|
-
styleInject(css_248z$
|
|
2405
|
+
var css_248z$13 = ".Ow9wSNnGP-g- {\n width: 100%;\n box-sizing: border-box;\n padding: 0 var(--space-small);\n background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n position: relative;\n width: 100%;\n min-height: calc((var(--space-largest) - var(--space-small)));\n padding: var(--space-small) 0;\n border: none;\n border-radius: var(--radius-large);\n text-align: left;\n background-color: var(--color-surface);\n cursor: pointer;\n transition: all var(--timing-base);\n}\n\n.jobber-retheme .ncp0nKHQ7d8- {\n border-radius: var(--radius-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n outline: none;\n background-color: var(--color-surface--hover);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n margin-left: var(--space-small);\n}\n";
|
|
2406
|
+
var styles$Z = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
|
|
2407
|
+
styleInject(css_248z$13);
|
|
2405
2408
|
|
|
2406
2409
|
function ComboboxAction(props) {
|
|
2407
2410
|
const { searchValue } = useContext(ComboboxContext);
|
|
@@ -2413,8 +2416,8 @@ function ComboboxAction(props) {
|
|
|
2413
2416
|
}
|
|
2414
2417
|
const options = { searchValue };
|
|
2415
2418
|
const computedLabel = typeof props.label === "string" ? props.label : props.label(options);
|
|
2416
|
-
return (React.createElement("div", { className: styles$
|
|
2417
|
-
React.createElement("button", { className: styles$
|
|
2419
|
+
return (React.createElement("div", { className: styles$Z.actionContainer },
|
|
2420
|
+
React.createElement("button", { className: styles$Z.actionButton, onClick: e => props.onClick(e, options), type: "button" },
|
|
2418
2421
|
React.createElement(Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, computedLabel))));
|
|
2419
2422
|
}
|
|
2420
2423
|
|
|
@@ -2433,9 +2436,9 @@ function ComboboxTrigger({ label = "Select", selected, }) {
|
|
|
2433
2436
|
React.createElement(Icon, { name: "add", size: "small" })))));
|
|
2434
2437
|
}
|
|
2435
2438
|
|
|
2436
|
-
var css_248z$
|
|
2437
|
-
var styles$
|
|
2438
|
-
styleInject(css_248z$
|
|
2439
|
+
var css_248z$12 = ".W8qMZnORYxI- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n background-color: transparent;\n}\n\n._-0dkolvLF-Y- {\n display: inline-block;\n}\n";
|
|
2440
|
+
var styles$Y = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
|
|
2441
|
+
styleInject(css_248z$12);
|
|
2439
2442
|
|
|
2440
2443
|
function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
|
|
2441
2444
|
const handleClose = useCallback(() => {
|
|
@@ -2548,8 +2551,8 @@ function Combobox(props) {
|
|
|
2548
2551
|
}))) || [], [optionElements]);
|
|
2549
2552
|
const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
|
|
2550
2553
|
return (React.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue },
|
|
2551
|
-
React.createElement("div", { ref: wrapperRef, className: styles$
|
|
2552
|
-
open && (React.createElement("div", { className: styles$
|
|
2554
|
+
React.createElement("div", { ref: wrapperRef, className: styles$Y.wrapper },
|
|
2555
|
+
open && (React.createElement("div", { className: styles$Y.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
|
|
2553
2556
|
triggerElement || (React.createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
|
|
2554
2557
|
React.createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
|
|
2555
2558
|
}
|
|
@@ -2557,26 +2560,26 @@ Combobox.Activator = ComboboxActivator;
|
|
|
2557
2560
|
Combobox.Action = ComboboxAction;
|
|
2558
2561
|
Combobox.Option = ComboboxOption;
|
|
2559
2562
|
|
|
2560
|
-
var css_248z$
|
|
2561
|
-
var styles$
|
|
2562
|
-
styleInject(css_248z$
|
|
2563
|
+
var css_248z$11 = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding-horizontal: var(--space-base);\n --modal--padding-vertical: var(--space-base);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n\n@media (--medium-screens-and-up) {\n\n:root {\n --modal--padding-horizontal: var(--space-large);\n}\n }\n\n:root .jobber-retheme {\n --modal--shadow: var(--shadow-base);\n}\n\n@media (--medium-screens-and-up) {\n\n:root .jobber-retheme {\n --modal--padding-horizontal: var(--space-large);\n --modal--padding-vertical: var(--space-large);\n --modal--padding: var(--modal--padding-vertical)\n var(--modal--padding-horizontal);\n}\n }\n\n.QGRLFHPoV5E- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n z-index: var(--elevation-modal);\n padding: var(--space-small);\n overflow: auto;\n}\n\n.QGRLFHPoV5E-,\n._4WzGOMUGj5I- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n._4WzGOMUGj5I- {\n background-color: var(--color-overlay);\n}\n\n.WLId2NJBQcQ- {\n position: relative;\n width: 100%;\n max-width: calc(var(--base-unit) * 37.5);\n max-width: var(--modal--width);\n box-shadow: var(--modal--shadow);\n margin: auto;\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n background-color: var(--color-surface);\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n outline-color: var(--color-focus);\n}\n\n/* Adjust `Content` and `Tab` components public padding to match the modal */\n\n.WLId2NJBQcQ- > * {\n --public-content--padding: var(--modal--padding);\n --public-tab--inset: var(--modal--padding-horizontal);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.WLId2NJBQcQ- > * > * {\n --public-content--padding: 0;\n}\n\n.wjrPpIUNNrk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding: var(--space-base)\n var(--space-base);\n padding: var(--modal--padding);\n background-color: var(--color-surface--background);\n}\n\n.jobber-retheme .wjrPpIUNNrk- {\n background-color: transparent;\n}\n\n.jobber-retheme .wjrPpIUNNrk- h3 {\n font-family: var(--typography--fontFamily-normal);\n font-size: var(--typography--fontSize-largest);\n}\n\n/**\n * Ensure there's no extra padding top on the next element. This mostly negates\n * the <Content /> padding\n */\n\n.jobber-retheme .wjrPpIUNNrk- + * {\n padding-top: 0;\n}\n\n.rKvigUnOyYE- {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n._62c8HLZFwvs- {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-base)\n var(--space-base);\n padding: var(--modal--padding);\n padding-top: 0;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n.Xl1Ptn-P9Ew- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n\n.p2s7GtpoZz0- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n/* This is in a correct position and order */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n.p2s7GtpoZz0- > * {\n margin-left: var(--space-small);\n}\n\n.p2s7GtpoZz0- *:first-child {\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n.p2s7GtpoZz0- *:nth-child(2) {\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n";
|
|
2564
|
+
var styles$X = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
|
|
2565
|
+
styleInject(css_248z$11);
|
|
2563
2566
|
|
|
2564
|
-
var css_248z
|
|
2567
|
+
var css_248z$10 = "._65IpUjOZiBg- {\n --modal--padding: var(--space-base);\n --public-tab--inset: var(--space-base);\n max-width: calc(var(--base-unit) * 25);\n}\n\n.Cpwnmw65caA- {\n max-width: calc(var(--base-unit) * 58.75);\n}\n";
|
|
2565
2568
|
var sizes$1 = {"small":"_65IpUjOZiBg-","large":"Cpwnmw65caA-"};
|
|
2566
|
-
styleInject(css_248z
|
|
2569
|
+
styleInject(css_248z$10);
|
|
2567
2570
|
|
|
2568
2571
|
function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
|
|
2569
|
-
const modalClassName = classnames(styles$
|
|
2572
|
+
const modalClassName = classnames(styles$X.modal, size && sizes$1[size]);
|
|
2570
2573
|
useRefocusOnActivator(open);
|
|
2571
2574
|
const modalRef = useFocusTrap(open);
|
|
2572
2575
|
useOnKeyDown(handleRequestClose, "Escape");
|
|
2573
|
-
const template = (React.createElement(AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles$
|
|
2574
|
-
React.createElement(motion.div, { key: styles$
|
|
2575
|
-
React.createElement(motion.div, { key: styles$
|
|
2576
|
+
const template = (React.createElement(AnimatePresence, null, open && (React.createElement("div", { ref: modalRef, role: "dialog", className: styles$X.container, tabIndex: 0 },
|
|
2577
|
+
React.createElement(motion.div, { key: styles$X.overlay, className: styles$X.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
|
|
2578
|
+
React.createElement(motion.div, { key: styles$X.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
|
|
2576
2579
|
duration: 0.2,
|
|
2577
2580
|
ease: "easeInOut",
|
|
2578
2581
|
} },
|
|
2579
|
-
title != undefined && (React.createElement(Header$
|
|
2582
|
+
title != undefined && (React.createElement(Header$3, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
|
|
2580
2583
|
children,
|
|
2581
2584
|
React.createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
|
|
2582
2585
|
return ReactDOM.createPortal(template, document.body);
|
|
@@ -2586,8 +2589,8 @@ function Modal({ open = false, title, size, dismissible = true, children, primar
|
|
|
2586
2589
|
}
|
|
2587
2590
|
}
|
|
2588
2591
|
}
|
|
2589
|
-
function Header$
|
|
2590
|
-
return (React.createElement("div", { className: styles$
|
|
2592
|
+
function Header$3({ title, dismissible, onRequestClose }) {
|
|
2593
|
+
return (React.createElement("div", { className: styles$X.header, "data-testid": "modal-header" },
|
|
2591
2594
|
React.createElement(Heading, { level: 3 }, title),
|
|
2592
2595
|
dismissible && (React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" }))));
|
|
2593
2596
|
}
|
|
@@ -2599,11 +2602,11 @@ function Actions({ primary, secondary, tertiary }) {
|
|
|
2599
2602
|
if (tertiary != undefined) {
|
|
2600
2603
|
tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
|
|
2601
2604
|
}
|
|
2602
|
-
return (React.createElement(React.Fragment, null, shouldShow && (React.createElement("div", { className: styles$
|
|
2603
|
-
React.createElement("div", { className: styles$
|
|
2605
|
+
return (React.createElement(React.Fragment, null, shouldShow && (React.createElement("div", { className: styles$X.actionBar },
|
|
2606
|
+
React.createElement("div", { className: styles$X.rightAction },
|
|
2604
2607
|
primary && React.createElement(Button, Object.assign({}, primary)),
|
|
2605
2608
|
secondary && React.createElement(Button, Object.assign({}, secondary))),
|
|
2606
|
-
tertiary && (React.createElement("div", { className: styles$
|
|
2609
|
+
tertiary && (React.createElement("div", { className: styles$X.leftAction },
|
|
2607
2610
|
React.createElement(Button, Object.assign({}, tertiary))))))));
|
|
2608
2611
|
}
|
|
2609
2612
|
|
|
@@ -2817,13 +2820,13 @@ function DataDump({ label = "Raw Data", defaultOpen = false, data, }) {
|
|
|
2817
2820
|
React.createElement("pre", null, JSON.stringify(data, undefined, 2))))));
|
|
2818
2821
|
}
|
|
2819
2822
|
|
|
2820
|
-
var css_248z
|
|
2821
|
-
var styles$
|
|
2822
|
-
styleInject(css_248z
|
|
2823
|
+
var css_248z$$ = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n z-index: var(--elevation-default);\n -ms-flex: 1;\n flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: var(--elevation-base);\n margin-bottom: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.TFO76ysivmg- {\n display: grid;\n padding: calc(var(--space-small) + var(--space-smaller)) 0;\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.jGHZZYZm1ZY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: var(--space-largest);\n padding: var(--space-small);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n --data-list--header-actions-gap: var(--space-small);\n display: -ms-flexbox;\n display: flex;\n gap: var(--space-small);\n gap: var(--data-list--header-actions-gap);\n}\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 100%;\n}\n }\n\n.jMSVGIAr5tk- > p {\n font-weight: 500;\n white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n display: -ms-flexbox;\n display: flex;\n margin: calc(var(--space-small) * -1) 0;\n -ms-flex-align: center;\n align-items: center;\n gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n position: relative;\n padding: var(--space-small);\n border-bottom: var(--border-base) solid var(--color-border);\n transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n display: grid;\n grid-template-columns: minmax(0px, auto);\n min-height: var(--data-list--minimum-item-height);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n --data-list-item-active-color: var(--color-surface--hover);\n background-color: var(--color-surface--hover);\n background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n margin: calc(var(--space-small) * -1) 0;\n padding: var(--space-small) 0;\n border: none;\n text-align: left;\n -webkit-text-decoration: none;\n text-decoration: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n outline: none;\n background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n .ise8kHCfhCY-:hover,\n .ise8kHCfhCY-:focus-within {\n background-color: transparent;\n }\n\n .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n background-color: var(--data-list-item-active-color);\n }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n display: grid;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n grid-template-columns: -webkit-max-content minmax(0px, auto);\n grid-template-columns: max-content minmax(0px, auto);\n -webkit-column-gap: var(--space-small);\n -moz-column-gap: var(--space-small);\n column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n display: grid;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.qm-SSuWTXkI- {\n display: -ms-flexbox;\n display: flex;\n visibility: hidden;\n\n /* To compensate the Checkbox's label margin that we are using for screen-readers */\n margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n -ms-flex-order: 2;\n order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n -ms-flex-order: 1;\n order: 1;\n padding-top: var(--space-smaller);\n opacity: 1;\n transition: opacity var(--timing-quick) ease-in-out;\n transition: opacity var(--transition-properties);\n --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--color-overlay--dimmed);\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.m-eCShL7TU4- {\n position: sticky;\n top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n position: absolute;\n top: auto;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n text-indent: -10000px;\n}\n";
|
|
2824
|
+
var styles$W = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
|
|
2825
|
+
styleInject(css_248z$$);
|
|
2823
2826
|
|
|
2824
|
-
var css_248z$
|
|
2825
|
-
var styles$
|
|
2826
|
-
styleInject(css_248z$
|
|
2827
|
+
var css_248z$_ = ".F56prQsXm3A- {\n min-width: 80px;\n margin-left: var(--space-small);\n}\n";
|
|
2828
|
+
var styles$V = {"results":"F56prQsXm3A-"};
|
|
2829
|
+
styleInject(css_248z$_);
|
|
2827
2830
|
|
|
2828
2831
|
const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
|
|
2829
2832
|
function DataListTotalCount({ totalCount, loading, }) {
|
|
@@ -2839,7 +2842,7 @@ function DataListTotalCount({ totalCount, loading, }) {
|
|
|
2839
2842
|
totalCount.toLocaleString(),
|
|
2840
2843
|
" results)"));
|
|
2841
2844
|
}
|
|
2842
|
-
return (React.createElement("div", { className: styles$
|
|
2845
|
+
return (React.createElement("div", { className: styles$V.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
|
|
2843
2846
|
}
|
|
2844
2847
|
|
|
2845
2848
|
const defaultValues$1 = {
|
|
@@ -2935,9 +2938,9 @@ function useActiveLayout() {
|
|
|
2935
2938
|
return { layout, activeBreakpoint };
|
|
2936
2939
|
}
|
|
2937
2940
|
|
|
2938
|
-
var css_248z$
|
|
2939
|
-
var styles$
|
|
2940
|
-
styleInject(css_248z$
|
|
2941
|
+
var css_248z$Z = "._8cMzUF8XEwY- {\n position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100px;\n background-image: linear-gradient(\n to top,\n var(--color-surface) 0%,\n rgba(var(--color-white--rgb), 0) 100%\n );\n}\n\n.Rh--6fVpkm4- {\n padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n width: 100%;\n min-width: var(--space-largest);\n}\n";
|
|
2942
|
+
var styles$U = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
|
|
2943
|
+
styleInject(css_248z$Z);
|
|
2941
2944
|
|
|
2942
2945
|
const LOADING_STATE_LIMIT_ITEMS = 10;
|
|
2943
2946
|
const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
|
|
@@ -2947,10 +2950,10 @@ function DataListLoadingState() {
|
|
|
2947
2950
|
if (!layout)
|
|
2948
2951
|
return null;
|
|
2949
2952
|
const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
|
|
2950
|
-
const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles$
|
|
2953
|
+
const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React.createElement("div", { className: styles$U.glimmer },
|
|
2951
2954
|
React.createElement(Glimmer, { size: glimmerSize }))) })), {});
|
|
2952
2955
|
const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
|
|
2953
|
-
return (React.createElement("div", { className: styles$
|
|
2956
|
+
return (React.createElement("div", { className: styles$U.wrapper }, loadingData.map((child, i) => (React.createElement("div", { key: i, className: styles$U.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
|
|
2954
2957
|
}
|
|
2955
2958
|
|
|
2956
2959
|
const defaultValues = {
|
|
@@ -2963,39 +2966,39 @@ function useDataListLayoutContext() {
|
|
|
2963
2966
|
return useContext(DataListLayoutContext);
|
|
2964
2967
|
}
|
|
2965
2968
|
|
|
2966
|
-
var css_248z$
|
|
2967
|
-
var styles$
|
|
2968
|
-
styleInject(css_248z$
|
|
2969
|
+
var css_248z$Y = ".jHcHGQ-HDbk- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: calc(var(--space-small) * -1);\n right: 0;\n z-index: var(--elevation-menu);\n box-shadow: var(--shadow-base);\n padding: var(--space-smaller);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-larger);\n background-color: var(--color-surface);\n gap: var(--space-smaller);\n}\n\n.jobber-retheme .jHcHGQ-HDbk- {\n border-radius: var(--radius-base);\n}\n";
|
|
2970
|
+
var styles$T = {"menu":"jHcHGQ-HDbk-"};
|
|
2971
|
+
styleInject(css_248z$Y);
|
|
2969
2972
|
|
|
2970
2973
|
const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
|
|
2971
2974
|
|
|
2972
|
-
var css_248z$
|
|
2973
|
-
var styles$
|
|
2974
|
-
styleInject(css_248z$
|
|
2975
|
+
var css_248z$X = ".jbBRoxlZlNI- {\n --overflow-fade--offset: var(--space-smaller);\n --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n -ms-flex-item-align: center;\n\n align-self: center;\n position: relative;\n min-width: 0;\n}\n\n.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: -webkit-max-content;\n grid-auto-columns: max-content;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.P6uJ-vHfKrM- {\n gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n margin: var(--overflow-fade--negative-offset);\n padding: var(--overflow-fade--offset);\n overflow-x: auto;\n overflow-y: visible;\n}\n\n.b-5P7Z8eGO8- {\n visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: var(--space-large);\n height: 100%;\n background-image: linear-gradient(\n to right,\n var(--color-surface) 0%,\n rgba(var(--color-white--rgb), 0) 100%\n );\n background-image: linear-gradient(\n var(--data-list-overflow-shadow-angle, to right),\n var(--color-surface) 0%,\n rgba(var(--color-white--rgb), 0) 100%\n );\n pointer-events: none;\n}\n\n.xzaCS4slLpI-::before {\n left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n --data-list-overflow-shadow-angle: to left;\n right: var(--overflow-fade--negative-offset);\n}\n";
|
|
2976
|
+
var styles$S = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
|
|
2977
|
+
styleInject(css_248z$X);
|
|
2975
2978
|
|
|
2976
2979
|
function DataListOverflowFade({ children }) {
|
|
2977
2980
|
const [leftRef, isLeftVisible] = useInView$1();
|
|
2978
2981
|
const [rightRef, isRightVisible] = useInView$1();
|
|
2979
|
-
return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles$
|
|
2980
|
-
[styles$
|
|
2981
|
-
[styles$
|
|
2982
|
+
return (React.createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames(styles$S.fadeContainer, {
|
|
2983
|
+
[styles$S.overflowLeft]: !isLeftVisible,
|
|
2984
|
+
[styles$S.overflowRight]: !isRightVisible,
|
|
2982
2985
|
}) },
|
|
2983
|
-
React.createElement("div", { className: styles$
|
|
2984
|
-
React.createElement("span", { ref: leftRef, className: styles$
|
|
2985
|
-
React.createElement("div", { className: styles$
|
|
2986
|
-
React.createElement("span", { ref: rightRef, className: styles$
|
|
2986
|
+
React.createElement("div", { className: styles$S.overflowGrid },
|
|
2987
|
+
React.createElement("span", { ref: leftRef, className: styles$S.overflowTrigger }),
|
|
2988
|
+
React.createElement("div", { className: styles$S.overflowItems }, children),
|
|
2989
|
+
React.createElement("span", { ref: rightRef, className: styles$S.overflowTrigger }))));
|
|
2987
2990
|
}
|
|
2988
2991
|
|
|
2989
|
-
var css_248z$
|
|
2990
|
-
var styles$
|
|
2991
|
-
styleInject(css_248z$
|
|
2992
|
+
var css_248z$W = "._8MYxAQYdZzM- {\n position: relative;\n}\n\n.WRV-UmQmPzo- {\n --inline-label-height: calc(\n var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n 2\n );\n\n display: -ms-flexbox;\n\n display: flex;\n z-index: var(--elevation-default);\n max-height: calc((\n var(--typography--fontSize-small) * 1.5 + (var(--space-smaller) * 1.25) *\n 2\n ) * 2);\n max-height: calc(calc(\n var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n 2\n ) * 2);\n max-height: calc(var(--inline-label-height) * 2);\n overflow: hidden;\n white-space: nowrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n -webkit-mask-image: linear-gradient(\n to left,\n transparent,\n transparent var(--space-large),\n rgba(0, 0, 0, 1) var(--space-largest),\n rgba(0, 0, 0, 1)\n );\n mask-image: linear-gradient(\n to left,\n transparent,\n transparent var(--space-large),\n rgba(0, 0, 0, 1) var(--space-largest),\n rgba(0, 0, 0, 1)\n );\n}\n\n.liQeWCMenD0- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n -ms-flex-align: center;\n align-items: center;\n}\n";
|
|
2993
|
+
var styles$R = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
|
|
2994
|
+
styleInject(css_248z$W);
|
|
2992
2995
|
|
|
2993
|
-
var css_248z$
|
|
2994
|
-
var styles$
|
|
2995
|
-
styleInject(css_248z$
|
|
2996
|
+
var css_248z$V = ".S72WkdRbhc0- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n color: var(--color-greyBlue--dark);\n background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n color: var(--color-red--dark);\n background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n color: var(--color-orange--dark);\n background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n color: var(--color-green--dark);\n background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n color: var(--color-blue--dark);\n background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n color: var(--color-navy--dark);\n background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n color: var(--color-yellow--dark);\n background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n color: var(--color-lime--dark);\n background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n color: var(--color-purple--dark);\n background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n color: var(--color-pink--dark);\n background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n color: var(--color-teal--dark);\n background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n color: var(--color-yellowGreen--dark);\n background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n color: var(--color-white);\n background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n color: var(--color-lightBlue--dark);\n background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n color: var(--color-indigo--dark);\n background-color: var(--color-indigo--lightest);\n}\n";
|
|
2997
|
+
var styles$Q = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
|
|
2998
|
+
styleInject(css_248z$V);
|
|
2996
2999
|
|
|
2997
3000
|
function InlineLabel({ size = "base", color = "greyBlue", children, }) {
|
|
2998
|
-
const className = classnames(styles$
|
|
3001
|
+
const className = classnames(styles$Q.inlineLabel, styles$Q[size], styles$Q[color]);
|
|
2999
3002
|
const sizeMapper = {
|
|
3000
3003
|
base: "small",
|
|
3001
3004
|
large: "large",
|
|
@@ -3025,12 +3028,12 @@ function DataListTags({ items }) {
|
|
|
3025
3028
|
elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
|
|
3026
3029
|
};
|
|
3027
3030
|
}, [items]);
|
|
3028
|
-
return (React.createElement("div", { className: styles$
|
|
3029
|
-
React.createElement("div", { className: classnames(styles$
|
|
3030
|
-
[styles$
|
|
3031
|
+
return (React.createElement("div", { className: styles$R.tagWrapper, ref: ref },
|
|
3032
|
+
React.createElement("div", { className: classnames(styles$R.tags, {
|
|
3033
|
+
[styles$R.tagsMask]: shouldShowTagCount,
|
|
3031
3034
|
}) }, items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
|
|
3032
3035
|
React.createElement(InlineLabel, null, tag))))),
|
|
3033
|
-
shouldShowTagCount && (React.createElement("div", { className: styles$
|
|
3036
|
+
shouldShowTagCount && (React.createElement("div", { className: styles$R.tagCount },
|
|
3034
3037
|
React.createElement(Text, null,
|
|
3035
3038
|
"+",
|
|
3036
3039
|
visibleItems)))));
|
|
@@ -3059,28 +3062,28 @@ function buildIntersectionThreshold(items) {
|
|
|
3059
3062
|
return thresholds;
|
|
3060
3063
|
}
|
|
3061
3064
|
|
|
3062
|
-
var css_248z$
|
|
3063
|
-
var styles$
|
|
3064
|
-
styleInject(css_248z$
|
|
3065
|
+
var css_248z$U = ".fLmJZJJqMcE- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n}\n\n.fLmJZJJqMcE-:focus,\n.fLmJZJJqMcE-:focus-visible {\n outline: none;\n}\n\n.fLmJZJJqMcE-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n\n.UG8cHUT3Hds- {\n cursor: pointer;\n}\n";
|
|
3066
|
+
var styles$P = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
|
|
3067
|
+
styleInject(css_248z$U);
|
|
3065
3068
|
|
|
3066
|
-
var css_248z$
|
|
3067
|
-
var styles$
|
|
3068
|
-
styleInject(css_248z$
|
|
3069
|
+
var css_248z$T = ".AN5egORYy-0- {\n width: var(--space-large);\n height: var(--space-large);\n margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n fill: var(--color-interactive--subtle);\n transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n fill: var(--color-heading);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n fill: var(--color-inactive--surface);\n}\n\n.AN5egORYy-0-:hover path {\n fill: var(--color-interactive--subtle);\n transition: all var(--timing-base) ease;\n}\n";
|
|
3070
|
+
var styles$O = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
|
|
3071
|
+
styleInject(css_248z$T);
|
|
3069
3072
|
|
|
3070
3073
|
const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
|
|
3071
3074
|
function DataListSortingArrows({ order }) {
|
|
3072
|
-
return (React.createElement("div", { className: styles$
|
|
3075
|
+
return (React.createElement("div", { className: styles$O.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
|
|
3073
3076
|
React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
3074
3077
|
React.createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
|
|
3075
3078
|
React.createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
|
|
3076
3079
|
function getActiveClassName(targetOrder) {
|
|
3077
|
-
return order === targetOrder ? styles$
|
|
3080
|
+
return order === targetOrder ? styles$O.active : styles$O.inactive;
|
|
3078
3081
|
}
|
|
3079
3082
|
}
|
|
3080
3083
|
|
|
3081
|
-
var css_248z$
|
|
3082
|
-
var styles$
|
|
3083
|
-
styleInject(css_248z$
|
|
3084
|
+
var css_248z$S = ".thBUfVNaigs- {\n position: absolute;\n top: 100%;\n left: 0;\n max-width: var(--popover--width);\n box-shadow: var(--shadow-base);\n margin-top: var(--space-smaller);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-larger);\n background: var(--color-surface);\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.QaXuqbVjG04- {\n display: -ms-flexbox;\n display: flex;\n min-width: calc(var(--space-largest) * 3.5);\n min-height: calc((var(--space-largest) - var(--space-smaller)));\n box-sizing: border-box;\n padding: var(--space-small);\n border-radius: var(--radius-large);\n font-family: var(--typography--fontFamily-normal);\n font-size: var(--typography--fontSize-base);\n font-weight: 500;\n white-space: nowrap;\n list-style: none;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: justify;\n justify-content: space-between;\n gap: var(--space-smaller);\n}\n\n.jobber-retheme .QaXuqbVjG04-,\n.jobber-retheme .thBUfVNaigs- {\n border-radius: var(--radius-base);\n}\n\n.QaXuqbVjG04-:hover,\n.QaXuqbVjG04-:focus {\n background-color: var(--color-surface--hover);\n}\n\n.QaXuqbVjG04-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n";
|
|
3085
|
+
var styles$N = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-"};
|
|
3086
|
+
styleInject(css_248z$S);
|
|
3084
3087
|
|
|
3085
3088
|
function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
|
|
3086
3089
|
useRefocusOnActivator(!optionsListRef.current);
|
|
@@ -3091,7 +3094,7 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
|
|
|
3091
3094
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
3092
3095
|
};
|
|
3093
3096
|
}, [optionsListRef, dataListHeaderTileRef, onClose]);
|
|
3094
|
-
return (React.createElement("ul", { className: styles$
|
|
3097
|
+
return (React.createElement("ul", { className: styles$N.optionsList, ref: optionsListRef }, options.map(option => (React.createElement("li", { className: styles$N.option, key: option.id, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
|
|
3095
3098
|
option.label,
|
|
3096
3099
|
option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React.createElement(Icon, { name: "checkmark", color: "blue" })))))));
|
|
3097
3100
|
function handleKeyDown(event, option) {
|
|
@@ -3120,8 +3123,8 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
|
|
|
3120
3123
|
const isSortable = Boolean(sortableItem);
|
|
3121
3124
|
const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
|
|
3122
3125
|
const Tag = isSortable ? "button" : "div";
|
|
3123
|
-
return (React.createElement(Tag, { className: classnames(styles$
|
|
3124
|
-
[styles$
|
|
3126
|
+
return (React.createElement(Tag, { className: classnames(styles$P.headerLabel, {
|
|
3127
|
+
[styles$P.sortable]: isSortable,
|
|
3125
3128
|
}), onClick: handleOnClick, ref: dataListHeaderTileRef },
|
|
3126
3129
|
React.createElement(Text, { maxLines: "single" }, headers[headerKey]),
|
|
3127
3130
|
isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React.createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
|
|
@@ -3263,9 +3266,9 @@ function useDataListLayoutActionsContext() {
|
|
|
3263
3266
|
return useContext(DataListLayoutActionsContext);
|
|
3264
3267
|
}
|
|
3265
3268
|
|
|
3266
|
-
var css_248z$
|
|
3267
|
-
var styles$
|
|
3268
|
-
styleInject(css_248z$
|
|
3269
|
+
var css_248z$R = ".aokwZU8jbWU- {\n position: fixed;\n top: 0;\n top: var(--actions-menu-y, 0);\n left: 0;\n left: var(--actions-menu-x, 0);\n z-index: var(--elevation-menu);\n min-width: 150px;\n box-shadow: var(--shadow-base);\n padding: var(--space-smaller);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-larger);\n background-color: var(--color-surface);\n}\n\n.jobber-retheme .aokwZU8jbWU- {\n border-radius: var(--radius-base);\n}\n\n.XtVRP97TVSE- {\n position: fixed;\n top: 0;\n left: 0;\n z-index: calc(var(--elevation-menu) - 1);\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background-color: transparent;\n}\n";
|
|
3270
|
+
var styles$M = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
|
|
3271
|
+
styleInject(css_248z$R);
|
|
3269
3272
|
|
|
3270
3273
|
const variants$2 = {
|
|
3271
3274
|
hidden: { opacity: 0, y: -10 },
|
|
@@ -3277,8 +3280,8 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
|
|
|
3277
3280
|
const focusTrapRef = useFocusTrap(visible);
|
|
3278
3281
|
useOnKeyDown(onRequestClose, "Escape");
|
|
3279
3282
|
return createPortal(React.createElement(AnimatePresence, null, visible && (React.createElement("div", { ref: focusTrapRef, onClick: handleClick },
|
|
3280
|
-
React.createElement(motion.div, { role: "menu", ref: setRef, variants: variants$2, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$
|
|
3281
|
-
React.createElement("button", { type: "button", className: styles$
|
|
3283
|
+
React.createElement(motion.div, { role: "menu", ref: setRef, variants: variants$2, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$M.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
|
|
3284
|
+
React.createElement("button", { type: "button", className: styles$M.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
|
|
3282
3285
|
function handleClick(event) {
|
|
3283
3286
|
// Prevent menu from firing the parent's onClick event when it is nested
|
|
3284
3287
|
// within a clickable list item
|
|
@@ -3380,7 +3383,7 @@ function InternalDataListItemActions({ actions, }) {
|
|
|
3380
3383
|
return (React.createElement(motion.div, { variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: {
|
|
3381
3384
|
duration: TRANSITION_DURATION_IN_SECONDS,
|
|
3382
3385
|
delay: TRANSITION_DELAY_IN_SECONDS,
|
|
3383
|
-
}, className: styles$
|
|
3386
|
+
}, className: styles$T.menu, onContextMenu: handleContextMenu },
|
|
3384
3387
|
React.createElement(DataListActions, null, actions)));
|
|
3385
3388
|
}
|
|
3386
3389
|
function handleContextMenu(event) {
|
|
@@ -3424,8 +3427,8 @@ function DataListItemInternal({ children, item, }) {
|
|
|
3424
3427
|
const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
|
|
3425
3428
|
if (!canSelect)
|
|
3426
3429
|
return children;
|
|
3427
|
-
return (React.createElement("div", { className: classnames(styles$
|
|
3428
|
-
[styles$
|
|
3430
|
+
return (React.createElement("div", { className: classnames(styles$W.selectable, {
|
|
3431
|
+
[styles$W.selected]: hasAtLeastOneSelected,
|
|
3429
3432
|
}) },
|
|
3430
3433
|
children,
|
|
3431
3434
|
React.createElement(Checkbox, { checked: getIsChecked(), onChange: handleChange })));
|
|
@@ -3470,17 +3473,17 @@ function DataListItemClickableInternal({ onClick, url, to, children, }) {
|
|
|
3470
3473
|
return React.createElement(React.Fragment, null, children);
|
|
3471
3474
|
if (to) {
|
|
3472
3475
|
const computedTo = typeof to === "string" ? to : to(activeItem);
|
|
3473
|
-
return (React.createElement(Link$1, { className: styles$
|
|
3476
|
+
return (React.createElement(Link$1, { className: styles$W.listItemClickable, to: computedTo, onClick: handleClick }, children));
|
|
3474
3477
|
}
|
|
3475
3478
|
if (url) {
|
|
3476
3479
|
const href = typeof url === "string" ? url : url(activeItem);
|
|
3477
|
-
return (React.createElement("a", { className: styles$
|
|
3480
|
+
return (React.createElement("a", { className: styles$W.listItemClickable, href: href, onClick: handleClick }, children));
|
|
3478
3481
|
}
|
|
3479
3482
|
if (onClick) {
|
|
3480
3483
|
return (
|
|
3481
3484
|
// A button can be nested within the list item. To prevent a button inside
|
|
3482
3485
|
// button error, we need to manually declare a div to be a button
|
|
3483
|
-
React.createElement("div", { role: "button", tabIndex: 0, className: styles$
|
|
3486
|
+
React.createElement("div", { role: "button", tabIndex: 0, className: styles$W.listItemClickable, onClick: handleClick, onKeyDown: e => {
|
|
3484
3487
|
if (e.key === "Enter" || e.key === " ") {
|
|
3485
3488
|
e.preventDefault();
|
|
3486
3489
|
handleClick();
|
|
@@ -3530,8 +3533,8 @@ function DataListItem({ item, layout, }) {
|
|
|
3530
3533
|
const isContextMenuVisible = Boolean(contextPosition);
|
|
3531
3534
|
const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
|
|
3532
3535
|
return (React.createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
|
|
3533
|
-
React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(styles$
|
|
3534
|
-
[styles$
|
|
3536
|
+
React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(styles$W.listItem, {
|
|
3537
|
+
[styles$W.active]: showMenu && isContextMenuVisible,
|
|
3535
3538
|
}), key: item.id },
|
|
3536
3539
|
React.createElement(DataListItemInternal, { item: item },
|
|
3537
3540
|
React.createElement(DataListItemClickable, null, layout(generatedItem))),
|
|
@@ -3586,9 +3589,9 @@ function DataListLayout({ children, size = "xs", }) {
|
|
|
3586
3589
|
return null;
|
|
3587
3590
|
}
|
|
3588
3591
|
|
|
3589
|
-
var css_248z$
|
|
3590
|
-
var styles$
|
|
3591
|
-
styleInject(css_248z$
|
|
3592
|
+
var css_248z$Q = ".v-GrdlFpBLk- {\n /* Offset the button's padding so the height of the header bar doesn't change */\n margin: calc(var(--space-small) * -1) 0;\n}\n";
|
|
3593
|
+
var styles$L = {"bulkActions":"v-GrdlFpBLk-"};
|
|
3594
|
+
styleInject(css_248z$Q);
|
|
3592
3595
|
|
|
3593
3596
|
// This component is meant to capture the props of the DataList.BulkActions
|
|
3594
3597
|
function DataListBulkActions(
|
|
@@ -3604,7 +3607,7 @@ function InternalDataListBulkActions() {
|
|
|
3604
3607
|
const { sm } = useResponsiveSizing();
|
|
3605
3608
|
// Collapse all actions under "More actions" when breakpoint is smaller than sm
|
|
3606
3609
|
const itemsToExpose = sm ? 3 : 0;
|
|
3607
|
-
return (React.createElement("div", { className: styles$
|
|
3610
|
+
return (React.createElement("div", { className: styles$L.bulkActions },
|
|
3608
3611
|
React.createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
|
|
3609
3612
|
}
|
|
3610
3613
|
|
|
@@ -3617,14 +3620,14 @@ function DataListHeaderCheckbox({ children }) {
|
|
|
3617
3620
|
return children;
|
|
3618
3621
|
const deselectText = sm ? "Deselect All" : "Deselect";
|
|
3619
3622
|
const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
|
|
3620
|
-
return (React.createElement("div", { className: styles$
|
|
3621
|
-
React.createElement("div", { className: classnames(styles$
|
|
3622
|
-
[styles$
|
|
3623
|
+
return (React.createElement("div", { className: styles$W.selectable },
|
|
3624
|
+
React.createElement("div", { className: classnames(styles$W.selectAllCheckbox, {
|
|
3625
|
+
[styles$W.visible]: canSelectAll,
|
|
3623
3626
|
}) },
|
|
3624
3627
|
React.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
|
|
3625
|
-
React.createElement("div", { className: styles$
|
|
3626
|
-
React.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: styles$
|
|
3627
|
-
React.createElement("div", { className: styles$
|
|
3628
|
+
React.createElement("div", { className: styles$W.srOnly }, selectedLabel))),
|
|
3629
|
+
React.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: styles$W.batchSelectContainer },
|
|
3630
|
+
React.createElement("div", { className: styles$W.headerBatchSelect },
|
|
3628
3631
|
Boolean(selectedCount) && React.createElement(Text, null,
|
|
3629
3632
|
selectedCount,
|
|
3630
3633
|
" selected"),
|
|
@@ -3676,7 +3679,7 @@ function DataListHeader() {
|
|
|
3676
3679
|
const headerData = generateHeaderElements(headers);
|
|
3677
3680
|
if (!headerData)
|
|
3678
3681
|
return null;
|
|
3679
|
-
return (React.createElement("div", { className: styles$
|
|
3682
|
+
return (React.createElement("div", { className: styles$W.headerTitles },
|
|
3680
3683
|
React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
|
|
3681
3684
|
function getVisibleSize() {
|
|
3682
3685
|
const visibilityKeys = Object.keys(headerVisibility);
|
|
@@ -3804,9 +3807,9 @@ function InternalDataListFilters() {
|
|
|
3804
3807
|
showSortButton && React.createElement(DataListSort, null)));
|
|
3805
3808
|
}
|
|
3806
3809
|
|
|
3807
|
-
var css_248z$
|
|
3808
|
-
var styles$
|
|
3809
|
-
styleInject(css_248z$
|
|
3810
|
+
var css_248z$P = ".PGOHzrMh374- {\n --offset: 1px;\n --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n position: sticky;\n top: calc(1px * -1);\n top: calc(var(--offset) * -1);\n z-index: var(--elevation-base);\n padding-top: 1px;\n padding-top: var(--offset);\n background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n content: \"\";\n display: block;\n position: absolute;\n bottom: 0;\n left: 50%;\n z-index: -1;\n width: 0;\n height: 0;\n background-color: var(--color-border);\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n transition: height var(--sticky-header-transition-properties)\n var(--timing-quick),\n width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n width: 100%;\n height: var(--border-thick);\n transition: height var(--sticky-header-transition-properties),\n width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
|
|
3811
|
+
var styles$K = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
|
|
3812
|
+
styleInject(css_248z$P);
|
|
3810
3813
|
|
|
3811
3814
|
function DataListStickyHeader({ children }) {
|
|
3812
3815
|
const [isStuck, setIsStuck] = useState(false);
|
|
@@ -3821,12 +3824,12 @@ function DataListStickyHeader({ children }) {
|
|
|
3821
3824
|
ref.current && observer.unobserve(ref.current);
|
|
3822
3825
|
};
|
|
3823
3826
|
}, [handleObserver, ref.current]);
|
|
3824
|
-
return (React.createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles$
|
|
3827
|
+
return (React.createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles$K.header, { [styles$K.stuck]: isStuck }) }, children));
|
|
3825
3828
|
}
|
|
3826
3829
|
|
|
3827
|
-
var css_248z$
|
|
3828
|
-
var styles$
|
|
3829
|
-
styleInject(css_248z$
|
|
3830
|
+
var css_248z$O = ".tj0MOMhLEEY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.SaPMOnvw-3c- {\n --transition-properties: var(--timing-base) ease-in-out;\n --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n position: absolute;\n top: 50%;\n right: calc(var(--space-largest) - var(--space-smaller));\n right: var(--button-offset);\n visibility: hidden;\n width: 0;\n padding: var(--space-smaller) 0;\n background-color: var(--color-surface);\n opacity: 0;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n transition: opacity var(--timing-base) ease-in-out,\n width var(--timing-base) ease-in-out, visibility var(--timing-base) ease-in-out;\n transition: opacity var(--transition-properties),\n width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n visibility: visible;\n width: calc(100% - var(--button-offset));\n opacity: 1;\n}\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n padding: 0;\n background-color: transparent;\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n transition: none;\n}\n }\n\n._9GlBktsUALw- {\n display: block;\n}\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n display: none;\n}\n";
|
|
3831
|
+
var styles$J = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
|
|
3832
|
+
styleInject(css_248z$O);
|
|
3830
3833
|
|
|
3831
3834
|
const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
|
|
3832
3835
|
// This component is meant to capture the props of the DataList.Search
|
|
@@ -3845,18 +3848,18 @@ function InternalDataListSearch() {
|
|
|
3845
3848
|
if (!searchComponent)
|
|
3846
3849
|
return null;
|
|
3847
3850
|
const { placeholder, initialValue } = searchComponent.props;
|
|
3848
|
-
return (React.createElement("div", { className: classnames(styles$
|
|
3849
|
-
[styles$
|
|
3851
|
+
return (React.createElement("div", { className: classnames(styles$J.wrapper, {
|
|
3852
|
+
[styles$J.withNoFilters]: !filterComponent && !sorting,
|
|
3850
3853
|
}) },
|
|
3851
|
-
React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles$
|
|
3852
|
-
[styles$
|
|
3854
|
+
React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles$J.searchInput, {
|
|
3855
|
+
[styles$J.searchInputVisible]: visible,
|
|
3853
3856
|
}) },
|
|
3854
3857
|
React.createElement(InputText
|
|
3855
3858
|
// If the initial value changes, reset the input.
|
|
3856
3859
|
, {
|
|
3857
3860
|
// If the initial value changes, reset the input.
|
|
3858
3861
|
key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
|
|
3859
|
-
React.createElement("div", { className: styles$
|
|
3862
|
+
React.createElement("div", { className: styles$J.searchButton },
|
|
3860
3863
|
React.createElement(AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
|
|
3861
3864
|
function getPlaceholder() {
|
|
3862
3865
|
if (placeholder)
|
|
@@ -3874,9 +3877,9 @@ function InternalDataListSearch() {
|
|
|
3874
3877
|
}
|
|
3875
3878
|
}
|
|
3876
3879
|
|
|
3877
|
-
var css_248z$
|
|
3878
|
-
var styles$
|
|
3879
|
-
styleInject(css_248z$
|
|
3880
|
+
var css_248z$N = ".zg3w9nQga-M- {\n display: -ms-flexbox;\n display: flex;\n box-sizing: border-box;\n padding: var(--space-base);\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-direction: column;\n flex-direction: column;\n row-gap: var(--space-base);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex: 1;\n flex: 1;\n}\n";
|
|
3881
|
+
var styles$I = {"emptyStateWrapper":"zg3w9nQga-M-"};
|
|
3882
|
+
styleInject(css_248z$N);
|
|
3880
3883
|
|
|
3881
3884
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
3882
3885
|
function DataListEmptyState(_) {
|
|
@@ -3885,7 +3888,7 @@ function DataListEmptyState(_) {
|
|
|
3885
3888
|
function InternalDataListEmptyState() {
|
|
3886
3889
|
const { emptyStateComponents: components, filtered } = useContext(DataListContext);
|
|
3887
3890
|
const { message, action } = getMessages();
|
|
3888
|
-
return (React.createElement("div", { className: styles$
|
|
3891
|
+
return (React.createElement("div", { className: styles$I.emptyStateWrapper },
|
|
3889
3892
|
React.createElement(Text, { align: "center" }, message),
|
|
3890
3893
|
renderButton(action)));
|
|
3891
3894
|
function getMessages() {
|
|
@@ -3919,9 +3922,9 @@ function getEmptyStates(components) {
|
|
|
3919
3922
|
return { defaultEmptyState, filteredEmptyState };
|
|
3920
3923
|
}
|
|
3921
3924
|
|
|
3922
|
-
var css_248z$
|
|
3923
|
-
var styles$
|
|
3924
|
-
styleInject(css_248z$
|
|
3925
|
+
var css_248z$M = ".IC-Y9bTIVFo- {\n position: relative;\n -webkit-transform: translateY(calc(var(--space-largest) * -1));\n transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n opacity: 0;\n -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes gZ4DUv82g5I- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
|
3926
|
+
var styles$H = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
|
|
3927
|
+
styleInject(css_248z$M);
|
|
3925
3928
|
|
|
3926
3929
|
function DataListLoadMoreTrigger() {
|
|
3927
3930
|
const { onLoadMore } = useDataListContext();
|
|
@@ -3929,7 +3932,7 @@ function DataListLoadMoreTrigger() {
|
|
|
3929
3932
|
useEffect(() => {
|
|
3930
3933
|
isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
|
|
3931
3934
|
}, [isInView]);
|
|
3932
|
-
return (React.createElement("div", { ref: inViewRef, className: styles$
|
|
3935
|
+
return (React.createElement("div", { ref: inViewRef, className: styles$H.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
|
|
3933
3936
|
}
|
|
3934
3937
|
|
|
3935
3938
|
const MAX_DATA_COUNT = 50;
|
|
@@ -3938,15 +3941,15 @@ function DataListLoadMore({ onBackToTop }) {
|
|
|
3938
3941
|
const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
|
|
3939
3942
|
return (React.createElement(React.Fragment, null,
|
|
3940
3943
|
React.createElement(DataListLoadMoreTrigger, { key: data.length }),
|
|
3941
|
-
loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$
|
|
3944
|
+
loadingState === "loadingMore" && (React.createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$H.loadingMore },
|
|
3942
3945
|
React.createElement(Spinner, { size: "small" }))),
|
|
3943
|
-
showBackToTop && (React.createElement("div", { className: styles$
|
|
3946
|
+
showBackToTop && (React.createElement("div", { className: styles$H.backToTop },
|
|
3944
3947
|
React.createElement(Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
|
|
3945
3948
|
}
|
|
3946
3949
|
|
|
3947
|
-
var css_248z$
|
|
3948
|
-
var styles$
|
|
3949
|
-
styleInject(css_248z$
|
|
3950
|
+
var css_248z$L = ".iyg43v-S9yU- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n min-height: 44px;\n padding: var(--space-small);\n border: none;\n border-radius: 0;\n border-radius: var(--radius-base);\n font-size: var(--typography--fontSize-base);\n text-align: left;\n background: none;\n cursor: pointer;\n transition: background var(--timing-base) ease;\n -webkit-appearance: none;\n appearance: none;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: justify;\n justify-content: space-between;\n gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n background-color: var(--color-surface--hover);\n}\n\n.iyg43v-S9yU-:focus,\n.iyg43v-S9yU-:focus-visible {\n outline: none;\n}\n\n.iyg43v-S9yU-:focus-visible {\n box-shadow: var(--shadow-focus);\n}\n\n.AUJNqz93ZDA- {\n font-weight: 500;\n}\n";
|
|
3951
|
+
var styles$G = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
|
|
3952
|
+
styleInject(css_248z$L);
|
|
3950
3953
|
|
|
3951
3954
|
function DataListAction({ label, icon, destructive, visible = () => true, onClick, }) {
|
|
3952
3955
|
const { activeItem } = useDataListLayoutActionsContext();
|
|
@@ -3963,9 +3966,9 @@ function DataListAction({ label, icon, destructive, visible = () => true, onClic
|
|
|
3963
3966
|
return label(activeItem);
|
|
3964
3967
|
}
|
|
3965
3968
|
}
|
|
3966
|
-
return (React.createElement("button", { type: "button", className: styles$
|
|
3969
|
+
return (React.createElement("button", { type: "button", className: styles$G.action, onClick: handleClick },
|
|
3967
3970
|
React.createElement(Typography, { textColor: color },
|
|
3968
|
-
React.createElement("span", { className: styles$
|
|
3971
|
+
React.createElement("span", { className: styles$G.label }, getActionLabel())),
|
|
3969
3972
|
icon && React.createElement(Icon, { name: icon, color: color })));
|
|
3970
3973
|
function handleClick() {
|
|
3971
3974
|
if (activeItem) {
|
|
@@ -3977,9 +3980,9 @@ function DataListAction({ label, icon, destructive, visible = () => true, onClic
|
|
|
3977
3980
|
}
|
|
3978
3981
|
}
|
|
3979
3982
|
|
|
3980
|
-
var css_248z$
|
|
3981
|
-
var styles$
|
|
3982
|
-
styleInject(css_248z$
|
|
3983
|
+
var css_248z$K = "._0m75bgCVBhk- {\n visibility: hidden;\n}\n";
|
|
3984
|
+
var styles$F = {"hidden":"_0m75bgCVBhk-"};
|
|
3985
|
+
styleInject(css_248z$K);
|
|
3983
3986
|
|
|
3984
3987
|
function DataListLayoutActions() {
|
|
3985
3988
|
const { itemActionComponent, loadingState } = useDataListContext();
|
|
@@ -4005,7 +4008,7 @@ function DataListLayoutActionsWrapper({ children }) {
|
|
|
4005
4008
|
const { isInLayoutProvider } = useDataListLayoutContext();
|
|
4006
4009
|
if (isInLayoutProvider)
|
|
4007
4010
|
return React.createElement(React.Fragment, null, children);
|
|
4008
|
-
return React.createElement("div", { className: styles$
|
|
4011
|
+
return React.createElement("div", { className: styles$F.hidden }, children);
|
|
4009
4012
|
}
|
|
4010
4013
|
|
|
4011
4014
|
// This component is meant to capture the props of the DataList.Filters
|
|
@@ -4062,13 +4065,13 @@ function InternalDataList({ shouldRenderStickyHeader, }) {
|
|
|
4062
4065
|
const initialLoading = loadingState === "initial";
|
|
4063
4066
|
const showEmptyState = !initialLoading && data.length === 0;
|
|
4064
4067
|
const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
|
|
4065
|
-
return (React.createElement("div", { className: styles$
|
|
4066
|
-
React.createElement("div", { className: styles$
|
|
4068
|
+
return (React.createElement("div", { className: styles$W.wrapper },
|
|
4069
|
+
React.createElement("div", { className: styles$W.titleContainer },
|
|
4067
4070
|
title && React.createElement(Heading, { level: 3 }, title),
|
|
4068
4071
|
React.createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
|
|
4069
4072
|
React.createElement("div", { ref: backToTopRef }),
|
|
4070
4073
|
shouldRenderStickyHeader && (React.createElement(DataListStickyHeader, null,
|
|
4071
|
-
React.createElement("div", { className: styles$
|
|
4074
|
+
React.createElement("div", { className: styles$W.headerFilters },
|
|
4072
4075
|
React.createElement(InternalDataListFilters, null),
|
|
4073
4076
|
React.createElement(InternalDataListSearch, null)),
|
|
4074
4077
|
React.createElement(InternalDataListStatusBar, null),
|
|
@@ -4076,8 +4079,8 @@ function InternalDataList({ shouldRenderStickyHeader, }) {
|
|
|
4076
4079
|
initialLoading && React.createElement(DataListLoadingState, null),
|
|
4077
4080
|
showEmptyState && React.createElement(InternalDataListEmptyState, null),
|
|
4078
4081
|
layoutComponents,
|
|
4079
|
-
loadingState === "filtering" && (React.createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$
|
|
4080
|
-
React.createElement("div", { className: styles$
|
|
4082
|
+
loadingState === "filtering" && (React.createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$W.filtering },
|
|
4083
|
+
React.createElement("div", { className: styles$W.filteringSpinner },
|
|
4081
4084
|
React.createElement(Spinner, { size: "small" })))),
|
|
4082
4085
|
shouldRenderLoadMoreTrigger && (React.createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
|
|
4083
4086
|
function handleBackToTop() {
|
|
@@ -4143,9 +4146,9 @@ DataList.BatchAction = function DataListBatchAction(props) {
|
|
|
4143
4146
|
*/
|
|
4144
4147
|
DataList.StatusBar = DataListStatusBar;
|
|
4145
4148
|
|
|
4146
|
-
var css_248z$
|
|
4147
|
-
var styles$
|
|
4148
|
-
styleInject(css_248z$
|
|
4149
|
+
var css_248z$J = ".m5A5oeRFaMs- {\n position: relative;\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: hidden;\n}\n\n.cY-5BrIIUg8- {\n overflow: auto;\n}\n\n.y8xnHe7fwrI- {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n}\n\n.y8xnHe7fwrI- thead tr th {\n padding: var(--space-base);\n border-bottom: var(--border-base) solid var(--color-border);\n color: var(--color-heading);\n white-space: nowrap;\n}\n\n.y8xnHe7fwrI- thead tr th :first-child {\n display: -ms-flexbox;\n display: flex;\n}\n\n.y8xnHe7fwrI- tbody tr {\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.y8xnHe7fwrI- tbody tr:last-child {\n border-bottom: none;\n}\n\n.y8xnHe7fwrI- tbody tr td {\n padding: var(--space-base);\n}\n\n.y8xnHe7fwrI- tfoot {\n position: sticky;\n z-index: 1;\n width: 100%;\n box-shadow: var(--shadow-base);\n border-top: var(--border-thick) solid var(--color-border);\n background-color: var(--color-surface);\n bottom: 0;\n}\n\n.y8xnHe7fwrI- tfoot tr th {\n padding: var(--space-base);\n}\n\n.t8QYvdtkQXQ- thead tr th:first-child,\n.t8QYvdtkQXQ- tbody tr td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n height: calc(var(--space-largest) + var(--space-smaller));\n background-color: var(--color-surface);\n}\n\n.t8QYvdtkQXQ- tbody tr td.UGku9HGjQn0- {\n display: table-cell;\n position: static;\n}\n\n.t8QYvdtkQXQ- th:first-child::after,\n.t8QYvdtkQXQ- td:first-child::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: calc(-1 * var(--space-small));\n width: var(--space-small);\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(var(--color-black--rgb), 0.1) 0%,\n rgba(var(--color-black--rgb), 0) 80%\n );\n}\n\n.Y21JuHX6fhk- {\n position: sticky;\n top: 0;\n right: 0;\n left: 0;\n z-index: 2;\n box-shadow: var(--shadow-base);\n background-color: var(--color-surface);\n}\n\n.PJEX8dlqCMA-:first-child:hover {\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._9ps4aWGs8W0-:hover {\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._59XEEB8l5pI-:hover,\n._59XEEB8l5pI-:hover :first-child {\n background: var(--color-surface--background);\n cursor: pointer;\n}\n\n.a2BGGBkY5J8- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n -ms-flex-direction: column;\n flex-direction: column;\n top: var(--space-largest);\n right: 0;\n bottom: var(--space-largest);\n left: 0;\n width: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n";
|
|
4150
|
+
var styles$E = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","emptyStateCell":"UGku9HGjQn0-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
|
|
4151
|
+
styleInject(css_248z$J);
|
|
4149
4152
|
|
|
4150
4153
|
function BodyLoading({ table }) {
|
|
4151
4154
|
const loaderRows = table.getState().pagination.pageSize;
|
|
@@ -4154,8 +4157,8 @@ function BodyLoading({ table }) {
|
|
|
4154
4157
|
React.createElement(Glimmer, null)))))))));
|
|
4155
4158
|
}
|
|
4156
4159
|
|
|
4157
|
-
function Body({ table, onRowClick, emptyState, loading, }) {
|
|
4158
|
-
const bodyRowClasses = classnames({ [styles$
|
|
4160
|
+
function Body$1({ table, onRowClick, emptyState, loading, }) {
|
|
4161
|
+
const bodyRowClasses = classnames({ [styles$E.clickableRow]: !!onRowClick });
|
|
4159
4162
|
const handleRowClick = useCallback((row) => () => {
|
|
4160
4163
|
if (onRowClick == undefined)
|
|
4161
4164
|
return;
|
|
@@ -4174,8 +4177,8 @@ function Body({ table, onRowClick, emptyState, loading, }) {
|
|
|
4174
4177
|
})));
|
|
4175
4178
|
}))) : (React.createElement("tbody", null,
|
|
4176
4179
|
React.createElement("tr", { className: bodyRowClasses },
|
|
4177
|
-
React.createElement("td", { colSpan: table.getAllColumns().length, className: styles$
|
|
4178
|
-
React.createElement("div", { className: styles$
|
|
4180
|
+
React.createElement("td", { colSpan: table.getAllColumns().length, className: styles$E.emptyStateCell },
|
|
4181
|
+
React.createElement("div", { className: styles$E.emptyState }, emptyState)))))));
|
|
4179
4182
|
}
|
|
4180
4183
|
|
|
4181
4184
|
function createTableSettings(data, columns, options) {
|
|
@@ -4231,9 +4234,9 @@ function getSortingSettings(sorting) {
|
|
|
4231
4234
|
return sortingSettings;
|
|
4232
4235
|
}
|
|
4233
4236
|
|
|
4234
|
-
var css_248z$
|
|
4235
|
-
var styles$
|
|
4236
|
-
styleInject(css_248z$
|
|
4237
|
+
var css_248z$I = ".zn0VRVhObt0- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: justify;\n justify-content: space-between;\n min-height: calc(var(--space-smaller) + var(--space-largest));\n padding: var(--space-small) var(--space-base);\n border-top: var(--border-base) solid var(--color-border);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n gap: var(--space-small);\n}\n\n._1d4uh90gfSI- {\n -ms-flex: 9999;\n flex: 9999;\n white-space: nowrap;\n}\n\n._5Hh01rJlUDs- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: justify;\n justify-content: space-between;\n gap: var(--space-base);\n -ms-flex: 1;\n flex: 1;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n min-width: -webkit-fit-content;\n min-width: -moz-fit-content;\n min-width: fit-content;\n}\n\n.N5rXFBBzPxk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n gap: var(--space-small);\n min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n.Uq2TUaf9ang- {\n min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.PeLwUZ2wWPI- {\n display: -ms-flexbox;\n display: flex;\n gap: var(--space-large);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n@media (--small-screens-and-below) {\n\n.PeLwUZ2wWPI- {\n gap: var(--space-base);\n}\n }\n";
|
|
4238
|
+
var styles$D = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","paginationNav":"_5Hh01rJlUDs-","paginationSelect":"N5rXFBBzPxk-","paginationSelectLabel":"Uq2TUaf9ang-","paginationButtons":"PeLwUZ2wWPI-"};
|
|
4239
|
+
styleInject(css_248z$I);
|
|
4237
4240
|
|
|
4238
4241
|
function Select(props) {
|
|
4239
4242
|
return React.createElement(FormField, Object.assign({ type: "select" }, props));
|
|
@@ -4250,16 +4253,16 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
|
|
|
4250
4253
|
const firstPosition = pageIndex * pageSize + 1;
|
|
4251
4254
|
const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
|
|
4252
4255
|
const itemsPerPageOptions = useMemo(() => { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(item => String(item))) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
|
|
4253
|
-
return secondPosition <= 0 ? (React.createElement("div", { className: styles$
|
|
4254
|
-
React.createElement("div", { className: styles$
|
|
4255
|
-
React.createElement("div", { className: styles$
|
|
4256
|
-
React.createElement("div", { className: styles$
|
|
4257
|
-
React.createElement("div", { className: styles$
|
|
4256
|
+
return secondPosition <= 0 ? (React.createElement("div", { className: styles$D.pagination },
|
|
4257
|
+
React.createElement("div", { className: styles$D.paginationInfo }, !loading ? React.createElement(Text, null, "No items") : React.createElement(Glimmer, { width: 200 })))) : (React.createElement("div", { className: styles$D.pagination },
|
|
4258
|
+
React.createElement("div", { className: styles$D.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
|
|
4259
|
+
React.createElement("div", { className: styles$D.paginationNav },
|
|
4260
|
+
React.createElement("div", { className: styles$D.paginationSelect },
|
|
4258
4261
|
React.createElement(Select, { value: table.getState().pagination.pageSize, onChange: value => {
|
|
4259
4262
|
table.setPageSize(Number(value));
|
|
4260
4263
|
}, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
|
|
4261
|
-
React.createElement("span", { className: styles$
|
|
4262
|
-
React.createElement("div", { className: styles$
|
|
4264
|
+
React.createElement("span", { className: styles$D.paginationSelectLabel }, "per page")),
|
|
4265
|
+
React.createElement("div", { className: styles$D.paginationButtons },
|
|
4263
4266
|
React.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
|
|
4264
4267
|
table.previousPage();
|
|
4265
4268
|
onPageChange();
|
|
@@ -4270,21 +4273,21 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
|
|
|
4270
4273
|
}, disabled: !table.getCanNextPage() })))));
|
|
4271
4274
|
}
|
|
4272
4275
|
|
|
4273
|
-
var css_248z$
|
|
4274
|
-
var styles$
|
|
4275
|
-
styleInject(css_248z$
|
|
4276
|
+
var css_248z$H = "._0FexNr-lIgA- {\n padding: var(--space-base);\n border-top: var(--border-thick) solid var(--color-border);\n}\n\n.PKlqQjoQ6DY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n font-weight: bold;\n}\n\n.PKlqQjoQ6DY- * {\n text-align: left;\n}\n\n.ItTcVYUbVNM-,\n.ItTcVYUbVNM- * {\n font-weight: normal;\n text-align: right;\n}\n\n.PKlqQjoQ6DY-:not(:last-child) {\n padding-bottom: var(--space-small);\n}\n";
|
|
4277
|
+
var styles$C = {"mobileFooterContainer":"_0FexNr-lIgA-","mobileFooterRow":"PKlqQjoQ6DY-","mobileFooterRowData":"ItTcVYUbVNM-"};
|
|
4278
|
+
styleInject(css_248z$H);
|
|
4276
4279
|
|
|
4277
4280
|
const DesktopView = ({ table }) => (React.createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(footerGroup => (React.createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(header => (React.createElement("th", { key: header.id, style: {
|
|
4278
4281
|
width: header.getSize(),
|
|
4279
4282
|
minWidth: header.column.columnDef.minSize,
|
|
4280
4283
|
maxWidth: header.column.columnDef.maxSize,
|
|
4281
4284
|
} }, flexRender(header.column.columnDef.footer, header.getContext())))))))));
|
|
4282
|
-
const HandheldView = ({ table }) => (React.createElement("div", { className: styles$
|
|
4285
|
+
const HandheldView = ({ table }) => (React.createElement("div", { className: styles$C.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React.createElement("div", { key: footerGroup.id }, footerGroup.headers
|
|
4283
4286
|
.filter(header => header.column.columnDef.footer)
|
|
4284
|
-
.map((header, index) => (React.createElement(React.Fragment, null, index === 0 ? (React.createElement("div", { className: styles$
|
|
4287
|
+
.map((header, index) => (React.createElement(React.Fragment, null, index === 0 ? (React.createElement("div", { className: styles$C.mobileFooterRow }, flexRender(header.column.columnDef.footer, header.getContext()))) : (React.createElement("div", { className: styles$C.mobileFooterRow, key: footerGroup.id },
|
|
4285
4288
|
flexRender(header.column.columnDef.header, header.getContext()),
|
|
4286
|
-
React.createElement("div", { className: styles$
|
|
4287
|
-
const Footer = ({ table, viewType = "handheld", }) => {
|
|
4289
|
+
React.createElement("div", { className: styles$C.mobileFooterRowData }, flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
|
|
4290
|
+
const Footer$1 = ({ table, viewType = "handheld", }) => {
|
|
4288
4291
|
const hasFooter = table
|
|
4289
4292
|
.getAllColumns()
|
|
4290
4293
|
.find(column => column.columnDef.footer);
|
|
@@ -4294,9 +4297,9 @@ const Footer = ({ table, viewType = "handheld", }) => {
|
|
|
4294
4297
|
return null;
|
|
4295
4298
|
};
|
|
4296
4299
|
|
|
4297
|
-
var css_248z$
|
|
4298
|
-
var styles$
|
|
4299
|
-
styleInject(css_248z$
|
|
4300
|
+
var css_248z$G = ".wtb8keLFxgc- {\n padding-right: var(--space-small);\n}\n.wtb8keLFxgc- path {\n fill: var(--color-greyBlue);\n}\n.wtb8keLFxgc- path.TUkZiGiR6hc- {\n fill: var(--color-blue);\n}\n.wtb8keLFxgc- path.HkPlMeyz3rM- {\n fill: var(--color-greyBlue--lighter);\n}\n";
|
|
4301
|
+
var styles$B = {"sortIcon":"wtb8keLFxgc-","active":"TUkZiGiR6hc-","inactive":"HkPlMeyz3rM-"};
|
|
4302
|
+
styleInject(css_248z$G);
|
|
4300
4303
|
|
|
4301
4304
|
var SortDirection;
|
|
4302
4305
|
(function (SortDirection) {
|
|
@@ -4312,26 +4315,26 @@ const sortStyleIndex = [
|
|
|
4312
4315
|
},
|
|
4313
4316
|
{
|
|
4314
4317
|
option: SortDirection.ascending,
|
|
4315
|
-
upArrowStyle: classnames(styles$
|
|
4316
|
-
downArrowStyle: classnames(styles$
|
|
4318
|
+
upArrowStyle: classnames(styles$B.active),
|
|
4319
|
+
downArrowStyle: classnames(styles$B.inactive),
|
|
4317
4320
|
},
|
|
4318
4321
|
{
|
|
4319
4322
|
option: SortDirection.descending,
|
|
4320
|
-
upArrowStyle: classnames(styles$
|
|
4321
|
-
downArrowStyle: classnames(styles$
|
|
4323
|
+
upArrowStyle: classnames(styles$B.inactive),
|
|
4324
|
+
downArrowStyle: classnames(styles$B.active),
|
|
4322
4325
|
},
|
|
4323
4326
|
];
|
|
4324
4327
|
function SortIcon({ direction }) {
|
|
4325
4328
|
const foundStyle = sortStyleIndex.find(style => style.option === direction);
|
|
4326
4329
|
const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
|
|
4327
|
-
return (React.createElement("div", { className: classnames(styles$
|
|
4330
|
+
return (React.createElement("div", { className: classnames(styles$B.sortIcon) },
|
|
4328
4331
|
React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
4329
4332
|
React.createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
|
|
4330
4333
|
React.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
|
|
4331
4334
|
}
|
|
4332
4335
|
|
|
4333
|
-
function Header$
|
|
4334
|
-
const stickyClass = classnames({ [styles$
|
|
4336
|
+
function Header$2({ table, stickyHeader, sorting, onRowClick, }) {
|
|
4337
|
+
const stickyClass = classnames({ [styles$E.stickyHeader]: stickyHeader });
|
|
4335
4338
|
return (React.createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(headerGroup => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
|
|
4336
4339
|
const isSorting = sorting && header.column.getCanSort();
|
|
4337
4340
|
const headingCellInlineStyle = {
|
|
@@ -4343,8 +4346,8 @@ function Header$1({ table, stickyHeader, sorting, onRowClick, }) {
|
|
|
4343
4346
|
headingCellInlineStyle.paddingRight = 0;
|
|
4344
4347
|
}
|
|
4345
4348
|
return (React.createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
|
|
4346
|
-
? classnames(styles$
|
|
4347
|
-
[styles$
|
|
4349
|
+
? classnames(styles$E.sortableColumn, {
|
|
4350
|
+
[styles$E.pinFirstHeaderSortable]: !!onRowClick,
|
|
4348
4351
|
})
|
|
4349
4352
|
: "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: headingCellInlineStyle }, header.isPlaceholder ? null : (React.createElement("div", null,
|
|
4350
4353
|
flexRender(header.column.columnDef.header, header.getContext()),
|
|
@@ -4364,34 +4367,34 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
|
|
|
4364
4367
|
pagination,
|
|
4365
4368
|
sorting,
|
|
4366
4369
|
});
|
|
4367
|
-
const tableClasses = classnames(styles$
|
|
4368
|
-
[styles$
|
|
4370
|
+
const tableClasses = classnames(styles$E.table, {
|
|
4371
|
+
[styles$E.pinFirstColumn]: pinFirstColumn,
|
|
4369
4372
|
});
|
|
4370
4373
|
const table = useReactTable(tableSettings);
|
|
4371
|
-
return (React.createElement("div", { className: styles$
|
|
4372
|
-
React.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$
|
|
4374
|
+
return (React.createElement("div", { className: styles$E.dataTableContainer },
|
|
4375
|
+
React.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$E.tableContainer, style: { height }, ref: ref },
|
|
4373
4376
|
React.createElement("table", { className: tableClasses },
|
|
4374
|
-
React.createElement(Header$
|
|
4375
|
-
React.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
|
|
4377
|
+
React.createElement(Header$2, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
|
|
4378
|
+
React.createElement(Body$1, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
|
|
4376
4379
|
table.getRowModel().rows.length &&
|
|
4377
4380
|
exactWidth &&
|
|
4378
|
-
exactWidth > Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
|
|
4381
|
+
exactWidth > Breakpoints.small ? (React.createElement(Footer$1, { table: table, viewType: "desktop" })) : null)),
|
|
4379
4382
|
table.getRowModel().rows.length &&
|
|
4380
4383
|
exactWidth &&
|
|
4381
|
-
exactWidth <= Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
|
|
4384
|
+
exactWidth <= Breakpoints.small ? (React.createElement(Footer$1, { table: table })) : null,
|
|
4382
4385
|
pagination && (React.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
|
|
4383
4386
|
? pagination.totalItems
|
|
4384
4387
|
: table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));
|
|
4385
4388
|
}
|
|
4386
4389
|
|
|
4387
|
-
var css_248z$E = "@charset \"UTF-8\";\n/* stylelint-disable */\n.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n border-color: #ccc;\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: \"\";\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n margin-left: -4px;\n position: absolute;\n width: 0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n box-sizing: content-box;\n position: absolute;\n border: 8px solid transparent;\n height: 0;\n width: 1px;\n content: \"\";\n z-index: -1;\n border-width: 8px;\n left: -8px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n border-bottom-color: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n top: 0;\n margin-top: -8px;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n border-top: none;\n border-bottom-color: #f0f0f0;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n top: 0;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n top: -1px;\n border-bottom-color: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n bottom: 0;\n margin-bottom: -8px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n border-bottom: none;\n border-top-color: #fff;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n bottom: 0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n bottom: -1px;\n border-top-color: #aeaeae;\n}\n.react-datepicker-wrapper {\n display: inline-block;\n padding: 0;\n border: 0;\n width: 100%;\n}\n.react-datepicker {\n font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n font-size: 0.8rem;\n background-color: #fff;\n color: #000;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n display: inline-block;\n position: relative;\n}\n.react-datepicker--time-only .react-datepicker__triangle {\n left: 35px;\n}\n.react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__triangle {\n position: absolute;\n left: 50px;\n}\n.react-datepicker-popper {\n z-index: 1;\n}\n.react-datepicker-popper[data-placement^=bottom] {\n padding-top: 10px;\n}\n.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n left: auto;\n right: 50px;\n}\n.react-datepicker-popper[data-placement^=top] {\n padding-bottom: 10px;\n}\n.react-datepicker-popper[data-placement^=right] {\n padding-left: 8px;\n}\n.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n left: auto;\n right: 42px;\n}\n.react-datepicker-popper[data-placement^=left] {\n padding-right: 8px;\n}\n.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n left: 42px;\n right: auto;\n}\n.react-datepicker__header {\n text-align: center;\n background-color: #f0f0f0;\n border-bottom: 1px solid #aeaeae;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n.react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {\n margin-top: 0;\n color: #000;\n font-weight: bold;\n font-size: 0.944rem;\n}\n.react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n.react-datepicker__navigation {\n -ms-flex-align: center;\n align-items: center;\n background: none;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 2px;\n padding: 0;\n border: none;\n z-index: 1;\n height: 32px;\n width: 32px;\n text-indent: -999em;\n overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n left: 2px;\n}\n.react-datepicker__navigation--next {\n right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n right: 85px;\n}\n.react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n border-color: #a6a6a6;\n}\n.react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n.react-datepicker__navigation-icon--next {\n left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n -webkit-transform: rotate(225deg);\n transform: rotate(225deg);\n right: -7px;\n}\n.react-datepicker__month-container {\n float: left;\n}\n.react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__year-wrapper {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container {\n display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n width: auto;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n.react-datepicker__time-container {\n float: right;\n border-left: 1px solid #aeaeae;\n width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n position: absolute;\n right: -87px;\n top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n width: 85px;\n overflow-x: hidden;\n margin: 0 auto;\n text-align: center;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: calc(195px + (1.7rem / 2));\n overflow-y: scroll;\n padding-right: 0;\n padding-left: 0;\n width: 100%;\n box-sizing: content-box;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n height: 30px;\n padding: 5px 10px;\n white-space: nowrap;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: #f0f0f0;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n background-color: #216ba5;\n color: white;\n font-weight: bold;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n background-color: #216ba5;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n color: #ccc;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n.react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n.react-datepicker__day-names, .react-datepicker__week {\n white-space: nowrap;\n}\n.react-datepicker__day-names {\n margin-bottom: -8px;\n}\n.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n color: #000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range, .react-datepicker__quarter--selected, .react-datepicker__quarter--in-selecting-range, .react-datepicker__quarter--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover, .react-datepicker__quarter--selected:hover, .react-datepicker__quarter--in-selecting-range:hover, .react-datepicker__quarter--in-range:hover {\n background-color: #1d5d90;\n}\n.react-datepicker__month--disabled, .react-datepicker__quarter--disabled {\n color: #ccc;\n pointer-events: none;\n}\n.react-datepicker__month--disabled:hover, .react-datepicker__quarter--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {\n cursor: pointer;\n}\n.react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {\n font-weight: bold;\n}\n.react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #3dcc4a;\n color: #fff;\n}\n.react-datepicker__day--highlighted:hover, .react-datepicker__month-text--highlighted:hover, .react-datepicker__quarter-text--highlighted:hover, .react-datepicker__year-text--highlighted:hover {\n background-color: #32be3f;\n}\n.react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 {\n color: magenta;\n}\n.react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 {\n color: green;\n}\n.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover, .react-datepicker__month-text--selected:hover, .react-datepicker__month-text--in-selecting-range:hover, .react-datepicker__month-text--in-range:hover, .react-datepicker__quarter-text--selected:hover, .react-datepicker__quarter-text--in-selecting-range:hover, .react-datepicker__quarter-text--in-range:hover, .react-datepicker__year-text--selected:hover, .react-datepicker__year-text--in-selecting-range:hover, .react-datepicker__year-text--in-range:hover {\n background-color: #1d5d90;\n}\n.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: #bad9f1;\n color: rgb(0, 0, 0);\n}\n.react-datepicker__day--keyboard-selected:hover, .react-datepicker__month-text--keyboard-selected:hover, .react-datepicker__quarter-text--keyboard-selected:hover, .react-datepicker__year-text--keyboard-selected:hover {\n background-color: #1d5d90;\n}\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) {\n background-color: rgba(33, 107, 165, 0.5);\n}\n.vl9aI3nIPIc- .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n.vl9aI3nIPIc- .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n.vl9aI3nIPIc- .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n.vl9aI3nIPIc- .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range) {\n background-color: #f0f0f0;\n color: #000;\n}\n.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n.react-datepicker__day--disabled:hover, .react-datepicker__month-text--disabled:hover, .react-datepicker__quarter-text--disabled:hover, .react-datepicker__year-text--disabled:hover {\n background-color: transparent;\n}\n.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover, .react-datepicker__quarter-text.react-datepicker__month--selected:hover, .react-datepicker__quarter-text.react-datepicker__month--in-range:hover, .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover, .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n background-color: #216ba5;\n}\n.react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover {\n background-color: #f0f0f0;\n}\n.react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n.react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: #b3b3b3;\n}\n.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {\n background-color: #f0f0f0;\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n border: 1px solid #aeaeae;\n}\n.react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover {\n background-color: #ccc;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n border-bottom-color: #b3b3b3;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n border-top-color: #b3b3b3;\n}\n.react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n.react-datepicker__close-icon {\n cursor: pointer;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0 6px 0 0;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n display: table-cell;\n vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: #216ba5;\n color: #fff;\n border-radius: 50%;\n height: 16px;\n width: 16px;\n padding: 2px;\n font-size: 12px;\n line-height: 1;\n text-align: center;\n display: table-cell;\n vertical-align: middle;\n content: \"×\";\n}\n.react-datepicker__today-button {\n background: #f0f0f0;\n border-top: 1px solid #aeaeae;\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n}\n.react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8);\n left: 0;\n top: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n.react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n.react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n.react-datepicker__aria-live {\n position: absolute;\n -webkit-clip-path: circle(0);\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n/* stylelint-enable */\n.jswNs4p7tII- {\n display: inline-block;\n}\n.WNVBy7I-Vv4- {\n display: block;\n width: 100%;\n}\n._8kgzU28z2Eo-.react-datepicker {\n --datepicker-cell-size: calc(var(--space-base) * 2.375);\n box-shadow: var(--shadow-base);\n border-color: var(--color-border);\n border-radius: var(--radius-base);\n font-family: var(--typography--fontFamily-normal);\n}\n._8kgzU28z2Eo-._1Z7yDS-JQa0- {\n box-shadow: none;\n}\n.react-datepicker__input-container,\n.react-datepicker-wrapper {\n max-width: 100%;\n}\n.jswNs4p7tII- .react-datepicker-popper {\n z-index: var(--elevation-datepicker);\n}\n._8kgzU28z2Eo- .react-datepicker__header {\n padding: 0;\n border-bottom: var(--border-base) solid var(--color-border);\n background: var(--color-surface);\n}\n.G2Kz3asqaFQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n._8kgzU28z2Eo- .react-datepicker__day {\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: var(--datepicker-cell-size);\n height: var(--datepicker-cell-size);\n margin: 0;\n border-radius: var(--radius-base);\n color: var(--color-heading);\n font-size: var(--typography--fontSize-base);\n line-height: inherit;\n background: var(--color-surface);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n._8kgzU28z2Eo- .react-datepicker__day--highlighted {\n background: var(--color-surface--active);\n}\n._8kgzU28z2Eo- .react-datepicker__day--outside-month {\n border-radius: 0;\n color: var(--color-text);\n background: var(--color-surface--background);\n}\n._8kgzU28z2Eo- .react-datepicker__day--disabled {\n color: var(--color-disabled);\n cursor: default;\n}\n._8kgzU28z2Eo- .react-datepicker__month {\n margin: 0;\n}\n._8kgzU28z2Eo- .react-datepicker__day--selected {\n color: var(--color-text--reverse);\n background: var(--color-interactive);\n}\n._8kgzU28z2Eo- .react-datepicker__day-names {\n display: -ms-flexbox;\n display: flex;\n margin: 0;\n padding: var(--space-smallest) 0 0;\n color: var(--color-text);\n font-size: var(--typography--fontSize-small);\n text-transform: uppercase;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n._8kgzU28z2Eo- .react-datepicker__day-name {\n width: auto;\n color: var(--color-text);\n -ms-flex: 1;\n flex: 1;\n}\n._8kgzU28z2Eo- .react-datepicker__day:hover,\n._8kgzU28z2Eo- .react-datepicker__day:focus {\n background: var(--color-surface--hover);\n}\n._8kgzU28z2Eo- .react-datepicker__day--outside-month:hover,\n._8kgzU28z2Eo- .react-datepicker__day--outside-month:focus {\n background: var(--color-surface--background--hover);\n}\n._8kgzU28z2Eo- .react-datepicker__day:focus {\n position: relative;\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n._8kgzU28z2Eo- .react-datepicker__day--selected:hover,\n._8kgzU28z2Eo- .react-datepicker__day--selected:focus {\n background: var(--color-interactive--hover);\n}\n._8kgzU28z2Eo- .react-datepicker__day--disabled:hover,\n._8kgzU28z2Eo- .react-datepicker__day--disabled:focus {\n box-shadow: none;\n background: transparent;\n}\n._8kgzU28z2Eo-\n .react-datepicker__day--disabled.react-datepicker__day--outside-month:hover,\n._8kgzU28z2Eo-\n .react-datepicker__day--disabled.react-datepicker__day--outside-month:focus {\n box-shadow: none;\n background: var(--color-disabled--secondary);\n}\n.D3kDqTSFScU- {\n margin-top: var(--space-minuscule);\n color: var(--color-heading);\n}\n";
|
|
4388
|
-
var styles$
|
|
4389
|
-
styleInject(css_248z$
|
|
4390
|
+
var css_248z$F = "@charset \"UTF-8\";\n/* stylelint-disable */\n.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n border-color: #ccc;\n border-style: solid;\n border-width: 3px 3px 0 0;\n content: \"\";\n display: block;\n height: 9px;\n position: absolute;\n top: 6px;\n width: 9px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n margin-left: -4px;\n position: absolute;\n width: 0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n box-sizing: content-box;\n position: absolute;\n border: 8px solid transparent;\n height: 0;\n width: 1px;\n content: \"\";\n z-index: -1;\n border-width: 8px;\n left: -8px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n border-bottom-color: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n top: 0;\n margin-top: -8px;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n border-top: none;\n border-bottom-color: #f0f0f0;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {\n top: 0;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {\n top: -1px;\n border-bottom-color: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n bottom: 0;\n margin-bottom: -8px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n border-bottom: none;\n border-top-color: #fff;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {\n bottom: 0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {\n bottom: -1px;\n border-top-color: #aeaeae;\n}\n.react-datepicker-wrapper {\n display: inline-block;\n padding: 0;\n border: 0;\n width: 100%;\n}\n.react-datepicker {\n font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n font-size: 0.8rem;\n background-color: #fff;\n color: #000;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n display: inline-block;\n position: relative;\n}\n.react-datepicker--time-only .react-datepicker__triangle {\n left: 35px;\n}\n.react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__triangle {\n position: absolute;\n left: 50px;\n}\n.react-datepicker-popper {\n z-index: 1;\n}\n.react-datepicker-popper[data-placement^=bottom] {\n padding-top: 10px;\n}\n.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {\n left: auto;\n right: 50px;\n}\n.react-datepicker-popper[data-placement^=top] {\n padding-bottom: 10px;\n}\n.react-datepicker-popper[data-placement^=right] {\n padding-left: 8px;\n}\n.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {\n left: auto;\n right: 42px;\n}\n.react-datepicker-popper[data-placement^=left] {\n padding-right: 8px;\n}\n.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {\n left: 42px;\n right: auto;\n}\n.react-datepicker__header {\n text-align: center;\n background-color: #f0f0f0;\n border-bottom: 1px solid #aeaeae;\n border-top-left-radius: 0.3rem;\n padding: 8px 0;\n position: relative;\n}\n.react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 15px;\n}\n.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {\n margin-top: 0;\n color: #000;\n font-weight: bold;\n font-size: 0.944rem;\n}\n.react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n.react-datepicker__navigation {\n -ms-flex-align: center;\n align-items: center;\n background: none;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 2px;\n padding: 0;\n border: none;\n z-index: 1;\n height: 32px;\n width: 32px;\n text-indent: -999em;\n overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n left: 2px;\n}\n.react-datepicker__navigation--next {\n right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n right: 85px;\n}\n.react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n border-color: #a6a6a6;\n}\n.react-datepicker__navigation-icon {\n position: relative;\n top: -1px;\n font-size: 20px;\n width: 0;\n}\n.react-datepicker__navigation-icon--next {\n left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n -webkit-transform: rotate(225deg);\n transform: rotate(225deg);\n right: -7px;\n}\n.react-datepicker__month-container {\n float: left;\n}\n.react-datepicker__year {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__year-wrapper {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {\n display: inline-block;\n width: 4rem;\n margin: 2px;\n}\n.react-datepicker__input-time-container {\n clear: both;\n width: 100%;\n float: left;\n margin: 5px 0 10px 15px;\n text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container {\n display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n display: inline-block;\n margin-left: 10px;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n width: auto;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n margin-left: 5px;\n display: inline-block;\n}\n.react-datepicker__time-container {\n float: right;\n border-left: 1px solid #aeaeae;\n width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid #aeaeae;\n border-radius: 0.3rem;\n position: absolute;\n right: -87px;\n top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n position: relative;\n background: white;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n width: 85px;\n overflow-x: hidden;\n margin: 0 auto;\n text-align: center;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: calc(195px + (1.7rem / 2));\n overflow-y: scroll;\n padding-right: 0;\n padding-left: 0;\n width: 100%;\n box-sizing: content-box;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n height: 30px;\n padding: 5px 10px;\n white-space: nowrap;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: #f0f0f0;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n background-color: #216ba5;\n color: white;\n font-weight: bold;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n background-color: #216ba5;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n color: #ccc;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n.react-datepicker__week-number {\n color: #ccc;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n.react-datepicker__day-names, .react-datepicker__week {\n white-space: nowrap;\n}\n.react-datepicker__day-names {\n margin-bottom: -8px;\n}\n.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n color: #000;\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n}\n.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range, .react-datepicker__quarter--selected, .react-datepicker__quarter--in-selecting-range, .react-datepicker__quarter--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover, .react-datepicker__quarter--selected:hover, .react-datepicker__quarter--in-selecting-range:hover, .react-datepicker__quarter--in-range:hover {\n background-color: #1d5d90;\n}\n.react-datepicker__month--disabled, .react-datepicker__quarter--disabled {\n color: #ccc;\n pointer-events: none;\n}\n.react-datepicker__month--disabled:hover, .react-datepicker__quarter--disabled:hover {\n cursor: default;\n background-color: transparent;\n}\n.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {\n cursor: pointer;\n}\n.react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover {\n border-radius: 0.3rem;\n background-color: #f0f0f0;\n}\n.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {\n font-weight: bold;\n}\n.react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted {\n border-radius: 0.3rem;\n background-color: #3dcc4a;\n color: #fff;\n}\n.react-datepicker__day--highlighted:hover, .react-datepicker__month-text--highlighted:hover, .react-datepicker__quarter-text--highlighted:hover, .react-datepicker__year-text--highlighted:hover {\n background-color: #32be3f;\n}\n.react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 {\n color: magenta;\n}\n.react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 {\n color: green;\n}\n.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {\n border-radius: 0.3rem;\n background-color: #216ba5;\n color: #fff;\n}\n.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover, .react-datepicker__month-text--selected:hover, .react-datepicker__month-text--in-selecting-range:hover, .react-datepicker__month-text--in-range:hover, .react-datepicker__quarter-text--selected:hover, .react-datepicker__quarter-text--in-selecting-range:hover, .react-datepicker__quarter-text--in-range:hover, .react-datepicker__year-text--selected:hover, .react-datepicker__year-text--in-selecting-range:hover, .react-datepicker__year-text--in-range:hover {\n background-color: #1d5d90;\n}\n.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n border-radius: 0.3rem;\n background-color: #bad9f1;\n color: rgb(0, 0, 0);\n}\n.react-datepicker__day--keyboard-selected:hover, .react-datepicker__month-text--keyboard-selected:hover, .react-datepicker__quarter-text--keyboard-selected:hover, .react-datepicker__year-text--keyboard-selected:hover {\n background-color: #1d5d90;\n}\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) {\n background-color: rgba(33, 107, 165, 0.5);\n}\n.vl9aI3nIPIc- .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n.vl9aI3nIPIc- .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n.vl9aI3nIPIc- .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),\n.vl9aI3nIPIc- .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range) {\n background-color: #f0f0f0;\n color: #000;\n}\n.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {\n cursor: default;\n color: #ccc;\n}\n.react-datepicker__day--disabled:hover, .react-datepicker__month-text--disabled:hover, .react-datepicker__quarter-text--disabled:hover, .react-datepicker__year-text--disabled:hover {\n background-color: transparent;\n}\n.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover, .react-datepicker__quarter-text.react-datepicker__month--selected:hover, .react-datepicker__quarter-text.react-datepicker__month--in-range:hover, .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover, .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {\n background-color: #216ba5;\n}\n.react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover {\n background-color: #f0f0f0;\n}\n.react-datepicker__input-container {\n position: relative;\n display: inline-block;\n width: 100%;\n}\n.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n border-radius: 0.3rem;\n position: relative;\n}\n.react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n}\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: #b3b3b3;\n}\n.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n right: -16px;\n top: 0;\n}\n.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {\n background-color: #f0f0f0;\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n border: 1px solid #aeaeae;\n}\n.react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n}\n.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover {\n background-color: #ccc;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n border-bottom-color: #b3b3b3;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n border-top-color: #b3b3b3;\n}\n.react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n}\n.react-datepicker__close-icon {\n cursor: pointer;\n background-color: transparent;\n border: 0;\n outline: 0;\n padding: 0 6px 0 0;\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n display: table-cell;\n vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n cursor: pointer;\n background-color: #216ba5;\n color: #fff;\n border-radius: 50%;\n height: 16px;\n width: 16px;\n padding: 2px;\n font-size: 12px;\n line-height: 1;\n text-align: center;\n display: table-cell;\n vertical-align: middle;\n content: \"×\";\n}\n.react-datepicker__today-button {\n background: #f0f0f0;\n border-top: 1px solid #aeaeae;\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n}\n.react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8);\n left: 0;\n top: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n}\n.react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n}\n.react-datepicker__children-container {\n width: 13.8rem;\n margin: 0.4rem;\n padding-right: 0.2rem;\n padding-left: 0.2rem;\n height: auto;\n}\n.react-datepicker__aria-live {\n position: absolute;\n -webkit-clip-path: circle(0);\n clip-path: circle(0);\n border: 0;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n width: 1px;\n white-space: nowrap;\n}\n/* stylelint-enable */\n.jswNs4p7tII- {\n display: inline-block;\n}\n.WNVBy7I-Vv4- {\n display: block;\n width: 100%;\n}\n._8kgzU28z2Eo-.react-datepicker {\n --datepicker-cell-size: calc(var(--space-base) * 2.375);\n box-shadow: var(--shadow-base);\n border-color: var(--color-border);\n border-radius: var(--radius-base);\n font-family: var(--typography--fontFamily-normal);\n}\n._8kgzU28z2Eo-._1Z7yDS-JQa0- {\n box-shadow: none;\n}\n.react-datepicker__input-container,\n.react-datepicker-wrapper {\n max-width: 100%;\n}\n.jswNs4p7tII- .react-datepicker-popper {\n z-index: var(--elevation-datepicker);\n}\n._8kgzU28z2Eo- .react-datepicker__header {\n padding: 0;\n border-bottom: var(--border-base) solid var(--color-border);\n background: var(--color-surface);\n}\n.G2Kz3asqaFQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n._8kgzU28z2Eo- .react-datepicker__day {\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: var(--datepicker-cell-size);\n height: var(--datepicker-cell-size);\n margin: 0;\n border-radius: var(--radius-base);\n color: var(--color-heading);\n font-size: var(--typography--fontSize-base);\n line-height: inherit;\n background: var(--color-surface);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n._8kgzU28z2Eo- .react-datepicker__day--highlighted {\n background: var(--color-surface--active);\n}\n._8kgzU28z2Eo- .react-datepicker__day--outside-month {\n border-radius: 0;\n color: var(--color-text);\n background: var(--color-surface--background);\n}\n._8kgzU28z2Eo- .react-datepicker__day--disabled {\n color: var(--color-disabled);\n cursor: default;\n}\n._8kgzU28z2Eo- .react-datepicker__month {\n margin: 0;\n}\n._8kgzU28z2Eo- .react-datepicker__day--selected {\n color: var(--color-text--reverse);\n background: var(--color-interactive);\n}\n._8kgzU28z2Eo- .react-datepicker__day-names {\n display: -ms-flexbox;\n display: flex;\n margin: 0;\n padding: var(--space-smallest) 0 0;\n color: var(--color-text);\n font-size: var(--typography--fontSize-small);\n text-transform: uppercase;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n._8kgzU28z2Eo- .react-datepicker__day-name {\n width: auto;\n color: var(--color-text);\n -ms-flex: 1;\n flex: 1;\n}\n._8kgzU28z2Eo- .react-datepicker__day:hover,\n._8kgzU28z2Eo- .react-datepicker__day:focus {\n background: var(--color-surface--hover);\n}\n._8kgzU28z2Eo- .react-datepicker__day--outside-month:hover,\n._8kgzU28z2Eo- .react-datepicker__day--outside-month:focus {\n background: var(--color-surface--background--hover);\n}\n._8kgzU28z2Eo- .react-datepicker__day:focus {\n position: relative;\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n._8kgzU28z2Eo- .react-datepicker__day--selected:hover,\n._8kgzU28z2Eo- .react-datepicker__day--selected:focus {\n background: var(--color-interactive--hover);\n}\n._8kgzU28z2Eo- .react-datepicker__day--disabled:hover,\n._8kgzU28z2Eo- .react-datepicker__day--disabled:focus {\n box-shadow: none;\n background: transparent;\n}\n._8kgzU28z2Eo-\n .react-datepicker__day--disabled.react-datepicker__day--outside-month:hover,\n._8kgzU28z2Eo-\n .react-datepicker__day--disabled.react-datepicker__day--outside-month:focus {\n box-shadow: none;\n background: var(--color-disabled--secondary);\n}\n.D3kDqTSFScU- {\n margin-top: var(--space-minuscule);\n color: var(--color-heading);\n}\n";
|
|
4391
|
+
var styles$A = {"react-datepicker__month--selecting-range":"vl9aI3nIPIc-","datePickerWrapper":"jswNs4p7tII-","fullWidth":"WNVBy7I-Vv4-","datePicker":"_8kgzU28z2Eo-","inline":"_1Z7yDS-JQa0-","header":"G2Kz3asqaFQ-","month":"D3kDqTSFScU-"};
|
|
4392
|
+
styleInject(css_248z$F);
|
|
4390
4393
|
|
|
4391
4394
|
function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
|
|
4392
|
-
return (React.createElement("div", { className: styles$
|
|
4395
|
+
return (React.createElement("div", { className: styles$A.header },
|
|
4393
4396
|
React.createElement(Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
|
|
4394
|
-
React.createElement("div", { className: styles$
|
|
4397
|
+
React.createElement("div", { className: styles$A.month },
|
|
4395
4398
|
React.createElement(Typography, { element: "span", fontFamily: "display", size: "large" }, monthDate.toLocaleString("en-US", {
|
|
4396
4399
|
month: "long",
|
|
4397
4400
|
year: "numeric",
|
|
@@ -4436,7 +4439,7 @@ function useFocusOnSelectedDate() {
|
|
|
4436
4439
|
function DatePicker({ onChange, onMonthChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, }) {
|
|
4437
4440
|
const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
|
|
4438
4441
|
const [open, setOpen] = useState(false);
|
|
4439
|
-
const wrapperClassName = classnames(styles$
|
|
4442
|
+
const wrapperClassName = classnames(styles$A.datePickerWrapper, {
|
|
4440
4443
|
// react-datepicker uses this class name to not close the date picker when
|
|
4441
4444
|
// the activator is clicked
|
|
4442
4445
|
// https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L905
|
|
@@ -4445,10 +4448,10 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
|
|
|
4445
4448
|
// ignored via said class name
|
|
4446
4449
|
// https://www.npmjs.com/package/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
|
|
4447
4450
|
"react-datepicker-ignore-onclickoutside": !inline,
|
|
4448
|
-
[styles$
|
|
4451
|
+
[styles$A.fullWidth]: fullWidth,
|
|
4449
4452
|
});
|
|
4450
|
-
const datePickerClassNames = classnames(styles$
|
|
4451
|
-
[styles$
|
|
4453
|
+
const datePickerClassNames = classnames(styles$A.datePicker, {
|
|
4454
|
+
[styles$A.inline]: inline,
|
|
4452
4455
|
});
|
|
4453
4456
|
const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
|
|
4454
4457
|
if (smartAutofocus) {
|
|
@@ -4499,19 +4502,19 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
|
|
|
4499
4502
|
};
|
|
4500
4503
|
}
|
|
4501
4504
|
|
|
4502
|
-
var css_248z$
|
|
4503
|
-
var styles$
|
|
4504
|
-
styleInject(css_248z$
|
|
4505
|
+
var css_248z$E = ".EQDmgmJchDA- {\n margin: 0;\n}\n\n.DkzfClUGQlc- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n padding: var(--space-small) 0;\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.DkzfClUGQlc-:first-child {\n padding-top: 0;\n}\n\n.DkzfClUGQlc-:last-child {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n.DkzfClUGQlc- dd {\n min-width: calc(var(--base-unit) * 7.5);\n box-sizing: border-box;\n padding-right: var(--space-small);\n -webkit-margin-start: 0;\n margin-left: 0;\n -ms-flex: 1 1 60%;\n flex: 1 1 60%;\n}\n\n.DkzfClUGQlc- dt {\n -ms-flex: 1 1 40%;\n flex: 1 1 40%;\n}\n";
|
|
4506
|
+
var styles$z = {"descriptionList":"EQDmgmJchDA-","termGroup":"DkzfClUGQlc-"};
|
|
4507
|
+
styleInject(css_248z$E);
|
|
4505
4508
|
|
|
4506
4509
|
function DescriptionList({ data }) {
|
|
4507
|
-
return (React.createElement("dl", { className: styles$
|
|
4510
|
+
return (React.createElement("dl", { className: styles$z.descriptionList }, data.map(([term, description]) => (React.createElement("div", { key: term, className: styles$z.termGroup },
|
|
4508
4511
|
React.createElement(Typography, { element: "dt", textColor: "heading", size: "base" }, term),
|
|
4509
4512
|
React.createElement(Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
|
|
4510
4513
|
}
|
|
4511
4514
|
|
|
4512
|
-
var css_248z$
|
|
4513
|
-
var styles$
|
|
4514
|
-
styleInject(css_248z$
|
|
4515
|
+
var css_248z$D = ".WcgASR88I1c- {\n -webkit-transform-origin: 50% 47.5% 0;\n transform-origin: 50% 47.5% 0;\n transition: -webkit-transform var(--timing-quick);\n transition: transform var(--timing-quick);\n transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n}\n\n.N-W4pXaLGt4-[open] .WcgASR88I1c- {\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n\n.PMjHZZhHiUY- {\n padding: var(--space-smaller) 0 var(--space-smallest) 0;\n border: none;\n list-style: none;\n cursor: pointer;\n outline-color: none;\n transition: background var(--timing-quick), box-shadow var(--timing-base);\n}\n\n.PMjHZZhHiUY-::-webkit-details-marker {\n display: none;\n}\n\n.PMjHZZhHiUY-:hover,\n.PMjHZZhHiUY-:focus {\n background: var(--color-surface--hover);\n}\n\n.PMjHZZhHiUY-:focus,\n.PMjHZZhHiUY-:active {\n box-shadow: var(--shadow-focus);\n border: none;\n outline: none;\n}\n\n.PMjHZZhHiUY- * {\n pointer-events: none;\n}\n\n.-E1lerklSHw- {\n -ms-flex-align: baseline;\n align-items: baseline;\n display: -ms-flexbox;\n display: flex;\n}\n\n.-E1lerklSHw- h4 {\n -ms-flex: 1 0 0px;\n flex: 1 0 0;\n}\n\n.CjRRsbZQp1Y- {\n display: block;\n padding: var(--space-small) 0;\n}\n\n.N-W4pXaLGt4-[open] > .CjRRsbZQp1Y- {\n -webkit-animation: vWj6tOjTVYA- var(--timing-base);\n animation: vWj6tOjTVYA- var(--timing-base);\n}\n\n@-webkit-keyframes vWj6tOjTVYA- {\n 0% {\n margin-top: calc(var(--space-small) * -1);\n opacity: 0;\n }\n 100% {\n margin-top: 0px;\n opacity: 1;\n }\n}\n\n@keyframes vWj6tOjTVYA- {\n 0% {\n margin-top: calc(var(--space-small) * -1);\n opacity: 0;\n }\n 100% {\n margin-top: 0px;\n opacity: 1;\n }\n}\n";
|
|
4516
|
+
var styles$y = {"arrowIconWrapper":"WcgASR88I1c-","details":"N-W4pXaLGt4-","summary":"PMjHZZhHiUY-","summaryWrap":"-E1lerklSHw-","content":"CjRRsbZQp1Y-","openAnimation":"vWj6tOjTVYA-"};
|
|
4517
|
+
styleInject(css_248z$D);
|
|
4515
4518
|
|
|
4516
4519
|
function Disclosure({ children, title, defaultOpen = false, }) {
|
|
4517
4520
|
const [isOpen, setOpen] = useState(defaultOpen);
|
|
@@ -4521,13 +4524,13 @@ function Disclosure({ children, title, defaultOpen = false, }) {
|
|
|
4521
4524
|
useEffect(() => {
|
|
4522
4525
|
setMount(true);
|
|
4523
4526
|
}, []);
|
|
4524
|
-
return (React.createElement("details", { open: isOpen, onToggle: onToggle, className: styles$
|
|
4525
|
-
React.createElement("summary", { className: styles$
|
|
4526
|
-
React.createElement("div", { className: styles$
|
|
4527
|
+
return (React.createElement("details", { open: isOpen, onToggle: onToggle, className: styles$y.details },
|
|
4528
|
+
React.createElement("summary", { className: styles$y.summary },
|
|
4529
|
+
React.createElement("div", { className: styles$y.summaryWrap, ref: titleRef },
|
|
4527
4530
|
React.createElement(Typography, { element: "h4", size: isBelowBreakpoint ? "base" : "large", fontWeight: "bold", textColor: "heading" }, title),
|
|
4528
|
-
React.createElement("span", { className: styles$
|
|
4531
|
+
React.createElement("span", { className: styles$y.arrowIconWrapper },
|
|
4529
4532
|
React.createElement(Icon, { size: "large", name: "arrowDown", color: "green" })))),
|
|
4530
|
-
React.createElement("span", { className: styles$
|
|
4533
|
+
React.createElement("span", { className: styles$y.content }, children)));
|
|
4531
4534
|
function onToggle(event) {
|
|
4532
4535
|
event.preventDefault();
|
|
4533
4536
|
const { open: currentToggleState } = event.target;
|
|
@@ -4538,46 +4541,46 @@ function Disclosure({ children, title, defaultOpen = false, }) {
|
|
|
4538
4541
|
}
|
|
4539
4542
|
}
|
|
4540
4543
|
|
|
4541
|
-
var css_248z$
|
|
4542
|
-
var styles$
|
|
4543
|
-
styleInject(css_248z$
|
|
4544
|
+
var css_248z$C = ".dH7SqeSo70A- {\n --divider-width: var(--border-base);\n --divider-color: var(--color-border);\n margin: 0;\n padding: 0;\n border: none;\n}\n\n._07xjw8ykfvg- {\n --divider-width: var(--border-thick);\n opacity: 0.875;\n}\n\n.TGD22T-KP78- {\n --divider-width: var(--border-thicker);\n opacity: 0.625;\n}\n\n.UUndaiRIryU- {\n --divider-width: var(--border-thickest);\n opacity: 0.375;\n}\n\n.HzWBc8FoucI- {\n height: var(--space-minuscule);\n border-bottom: var(--divider-width) solid var(--divider-color);\n}\n\n.vu46ZKcGBWM- {\n width: var(--space-miniscule);\n height: auto;\n border-right: var(--divider-width) solid var(--divider-color);\n}\n";
|
|
4545
|
+
var styles$x = {"divider":"dH7SqeSo70A-","large":"_07xjw8ykfvg-","larger":"TGD22T-KP78-","largest":"UUndaiRIryU-","horizontal":"HzWBc8FoucI-","vertical":"vu46ZKcGBWM-"};
|
|
4546
|
+
styleInject(css_248z$C);
|
|
4544
4547
|
|
|
4545
4548
|
function Divider({ size = "base", direction = "horizontal", }) {
|
|
4546
|
-
const className = classnames(styles$
|
|
4547
|
-
[styles$
|
|
4548
|
-
[styles$
|
|
4549
|
-
[styles$
|
|
4550
|
-
[styles$
|
|
4551
|
-
[styles$
|
|
4549
|
+
const className = classnames(styles$x.divider, {
|
|
4550
|
+
[styles$x.large]: size === "large",
|
|
4551
|
+
[styles$x.larger]: size === "larger",
|
|
4552
|
+
[styles$x.largest]: size === "largest",
|
|
4553
|
+
[styles$x.horizontal]: direction == "horizontal",
|
|
4554
|
+
[styles$x.vertical]: direction == "vertical",
|
|
4552
4555
|
});
|
|
4553
4556
|
return React.createElement("div", { className: className, role: "none presentation" });
|
|
4554
4557
|
}
|
|
4555
4558
|
|
|
4556
|
-
var css_248z$
|
|
4557
|
-
var styles$
|
|
4558
|
-
styleInject(css_248z$
|
|
4559
|
+
var css_248z$B = ":root {\n --drawer-width: calc(var(--space-base) * 17.5);\n --drawer--base-padding: var(--space-base);\n}\n\n.jobber-retheme {\n --drawer--base-padding: var(--space-large);\n}\n\n.IJAyrFb2GpA- {\n display: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-modal);\n overflow: hidden;\n\n /* SPECIAL CASE:\n Drawer is primarily used in Jobber Online and is currently used in a layout\n that rearranges at 640px. For compatibility, this is hardcoded here\n rather than using the breakpoint custom properties.\n DO NOT COPY THIS - USE THE BREAKPOINTS DEFINED IN THE @jobber/design package!\n */\n}\n\n@media (min-width: 640px), print {\n\n.IJAyrFb2GpA- {\n position: relative;\n z-index: auto;\n width: calc(var(--space-base) * 17.5);\n width: var(--drawer-width);\n}\n }\n\n@media (--large-screens-and-up) {\n\n.IJAyrFb2GpA- {\n --drawer-width: calc(var(--space-base) * 26.25);\n}\n }\n\n.jobber-retheme .IJAyrFb2GpA- {\n box-shadow: var(--shadow-base);\n border-top-left-radius: var(--radius-base);\n}\n\n.Hsmk6Pg14PQ- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: var(--border-base) solid var(--color-border);\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.jobber-retheme .Hsmk6Pg14PQ- {\n border-top-left-radius: var(--radius-base);\n}\n\n.DwF3Q9EMPvQ- {\n display: -ms-flexbox;\n display: flex;\n}\n\n.TcdyXiTbnMU- {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-small) var(--space-base);\n padding: var(--space-small) var(--drawer--base-padding);\n background-color: var(--color-surface--background);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.jobber-retheme .TcdyXiTbnMU- {\n padding: var(--space-base) var(--space-base) 0 var(--space-base);\n padding: var(--space-base) var(--space-base) 0 var(--drawer--base-padding);\n background-color: transparent;\n}\n\n.srL7xqEzwhM- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n height: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n overflow-y: auto;\n}\n\n.p6-yqttoIJI- {\n width: 100%;\n}\n\n/* Adjust `Content` components public padding to match the cards */\n\n.p6-yqttoIJI- > * {\n --public-content--padding: var(--drawer--base-padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n.p6-yqttoIJI- > * > * {\n --public-content--padding: 0;\n}\n";
|
|
4560
|
+
var styles$w = {"container":"IJAyrFb2GpA-","drawer":"Hsmk6Pg14PQ-","open":"DwF3Q9EMPvQ-","header":"TcdyXiTbnMU-","contentScroll":"srL7xqEzwhM-","content":"p6-yqttoIJI-"};
|
|
4561
|
+
styleInject(css_248z$B);
|
|
4559
4562
|
|
|
4560
4563
|
function Drawer({ title, children, open = true, onRequestClose, id, }) {
|
|
4561
|
-
const drawerClassNames = classnames(styles$
|
|
4564
|
+
const drawerClassNames = classnames(styles$w.container, open && styles$w.open);
|
|
4562
4565
|
return (React.createElement("aside", { className: drawerClassNames, "data-testid": "drawer-container", "aria-label": title, "aria-hidden": !open, id: id },
|
|
4563
|
-
React.createElement("div", { className: styles$
|
|
4564
|
-
React.createElement(Header, { title: title, onRequestClose: onRequestClose }),
|
|
4565
|
-
React.createElement("div", { className: styles$
|
|
4566
|
-
React.createElement("div", { className: styles$
|
|
4566
|
+
React.createElement("div", { className: styles$w.drawer },
|
|
4567
|
+
React.createElement(Header$1, { title: title, onRequestClose: onRequestClose }),
|
|
4568
|
+
React.createElement("div", { className: styles$w.contentScroll },
|
|
4569
|
+
React.createElement("div", { className: styles$w.content }, children)))));
|
|
4567
4570
|
}
|
|
4568
|
-
function Header({ title, onRequestClose }) {
|
|
4569
|
-
return (React.createElement("div", { className: styles$
|
|
4571
|
+
function Header$1({ title, onRequestClose }) {
|
|
4572
|
+
return (React.createElement("div", { className: styles$w.header, "data-testid": "drawer-header" },
|
|
4570
4573
|
React.createElement(Heading, { level: 3 }, title),
|
|
4571
4574
|
React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: `Close ${title || "drawer"}` })));
|
|
4572
4575
|
}
|
|
4573
4576
|
|
|
4574
|
-
var css_248z$
|
|
4575
|
-
var styles$
|
|
4576
|
-
styleInject(css_248z$
|
|
4577
|
+
var css_248z$A = ".-sVnhIK4hZw- {\n display: -ms-flexbox;\n display: flex;\n}\n\n.ZJaXf-cIFgU- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-item-align: center;\n align-self: center;\n padding-right: var(--space-base);\n transition: opacity var(--timing-base);\n}\n\n.OA-s1YYLMMM- {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-item-align: start;\n align-self: flex-start;\n position: relative;\n}\n\n.lN90IIewHq8- {\n position: absolute;\n top: 100%;\n width: 100%;\n margin-top: var(--space-smallest);\n text-align: center;\n}\n\n.mW56hvBHqPM- {\n opacity: 0.5;\n}\n\n.QfZjM5S-Ls0- {\n opacity: 1;\n}\n";
|
|
4578
|
+
var styles$v = {"container":"-sVnhIK4hZw-","content":"ZJaXf-cIFgU-","action":"OA-s1YYLMMM-","savedIndicator":"lN90IIewHq8-","featureContent":"mW56hvBHqPM-","enabled":"QfZjM5S-Ls0-"};
|
|
4579
|
+
styleInject(css_248z$A);
|
|
4577
4580
|
|
|
4578
|
-
var css_248z$
|
|
4579
|
-
var styles$
|
|
4580
|
-
styleInject(css_248z$
|
|
4581
|
+
var css_248z$z = ":root {\n --switch--pipSize: calc(var(--space-base) * 1.875);\n --switch--labelWidth: calc(var(--switch--pipSize) * 1.3);\n --switch--borderOffset: calc(var(--border-base) * 2);\n}\n\n:root .jobber-retheme {\n --switch--pipSize: var(--space-base);\n}\n\n.NaSI2jsLI0c-,\n.NaSI2jsLI0c- * {\n box-sizing: border-box;\n transition: all var(--timing-base);\n}\n\n.NaSI2jsLI0c- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: calc(((var(--space-base) * 1.875) * 1.3) + (var(--space-base) * 1.875));\n width: calc(calc(calc(var(--space-base) * 1.875) * 1.3) + calc(var(--space-base) * 1.875));\n width: calc(var(--switch--labelWidth) + var(--switch--pipSize));\n padding: 0;\n border: var(--border-base) solid var(--color-border);\n border-radius: calc(var(--space-base) * 1.875);\n border-radius: var(--switch--pipSize);\n overflow: hidden;\n line-height: normal;\n background-color: var(--color-surface--background);\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.jobber-retheme .NaSI2jsLI0c- {\n width: var(--space-largest);\n height: var(--space-large);\n border-color: var(--color-border);\n border-width: var(--border-thick);\n background-color: var(--color-surface);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.NaSI2jsLI0c-:focus-visible {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.jobber-retheme .NaSI2jsLI0c-:hover,\n.jobber-retheme .NaSI2jsLI0c-:focus-visible {\n border-color: var(--color-interactive);\n}\n\n.HbAoDMJhkwY-,\n.jobber-retheme .HbAoDMJhkwY- {\n border-color: var(--color-interactive);\n background-color: var(--color-interactive);\n}\n\n.cc259FtdxeE- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n margin-left: calc(-1 * ((var(--space-base) * 1.875) * 1.3));\n margin-left: calc(-1 * calc(calc(var(--space-base) * 1.875) * 1.3));\n margin-left: calc(-1 * var(--switch--labelWidth));\n pointer-events: none;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.jobber-retheme .cc259FtdxeE- {\n margin-left: -37px;\n}\n\n.HbAoDMJhkwY- .cc259FtdxeE- {\n margin-left: calc(-1 * (var(--border-base) * 2));\n margin-left: calc(-1 * calc(var(--border-base) * 2));\n margin-left: calc(-1 * var(--switch--borderOffset));\n}\n\n.jobber-retheme .HbAoDMJhkwY- .cc259FtdxeE- {\n margin-left: -13px;\n}\n\n.YZ-HIehHOBA- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n min-width: calc((var(--space-base) * 1.875) * 1.3);\n min-width: calc(calc(var(--space-base) * 1.875) * 1.3);\n min-width: var(--switch--labelWidth);\n margin-top: var(--space-minuscule);\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: none;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.YZ-HIehHOBA-:first-of-type {\n padding-left: var(--space-small);\n}\n\n.YZ-HIehHOBA-:last-of-type {\n padding-right: var(--space-small);\n}\n\n.jobber-retheme .YZ-HIehHOBA- {\n opacity: 0;\n}\n\n._2hxova2FHpM- {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: calc(var(--space-base) * 1.875);\n width: var(--switch--pipSize);\n height: calc(var(--space-base) * 1.875);\n height: var(--switch--pipSize);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-circle);\n background-color: var(--color-surface);\n transition: all var(--timing-quick) ease-out;\n}\n\n.jobber-retheme ._2hxova2FHpM- {\n border: none;\n background-color: var(--color-interactive--subtle);\n}\n\n.HbAoDMJhkwY- ._2hxova2FHpM- {\n border-color: var(--color-green);\n}\n\n.jobber-retheme .HbAoDMJhkwY- ._2hxova2FHpM- {\n background-color: var(--color-surface);\n}\n\n/* Moving this up overwrites disabled styling */\n\n/* stylelint-disable-next-line no-descending-specificity */\n\n._6hWvJHjyLlk- ._2hxova2FHpM- {\n border-color: var(--color-disabled--secondary);\n}\n\n.jobber-retheme ._6hWvJHjyLlk- ._2hxova2FHpM- {\n background-color: var(--color-disabled);\n}\n\n._6hWvJHjyLlk- {\n border-color: var(--color-disabled--secondary);\n background-color: var(--color-surface--background);\n cursor: not-allowed;\n}\n\n.jobber-retheme ._6hWvJHjyLlk- {\n border-color: var(--color-disabled);\n background-color: var(--color-surface);\n cursor: not-allowed;\n}\n\n.jobber-retheme .HbAoDMJhkwY-._6hWvJHjyLlk- {\n background-color: var(--color-disabled);\n}\n\n.jobber-retheme .HbAoDMJhkwY-._6hWvJHjyLlk- ._2hxova2FHpM- {\n background-color: var(--color-surface);\n}\n\n.jobber-retheme ._6hWvJHjyLlk-:hover {\n border-color: var(--color-disabled);\n}\n";
|
|
4582
|
+
var styles$u = {"track":"NaSI2jsLI0c-","isChecked":"HbAoDMJhkwY-","toggle":"cc259FtdxeE-","label":"YZ-HIehHOBA-","pip":"_2hxova2FHpM-","disabled":"_6hWvJHjyLlk-"};
|
|
4583
|
+
styleInject(css_248z$z);
|
|
4581
4584
|
|
|
4582
4585
|
function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
|
|
4583
4586
|
const [statefulValue, setValue] = useState(false);
|
|
@@ -4592,15 +4595,15 @@ function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, })
|
|
|
4592
4595
|
setValue(newValue);
|
|
4593
4596
|
}
|
|
4594
4597
|
};
|
|
4595
|
-
const className = classnames(styles$
|
|
4596
|
-
[styles$
|
|
4597
|
-
[styles$
|
|
4598
|
+
const className = classnames(styles$u.track, {
|
|
4599
|
+
[styles$u.isChecked]: value,
|
|
4600
|
+
[styles$u.disabled]: disabled,
|
|
4598
4601
|
});
|
|
4599
4602
|
return (React.createElement(React.Fragment, null,
|
|
4600
4603
|
React.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
|
|
4601
|
-
React.createElement("span", { className: styles$
|
|
4604
|
+
React.createElement("span", { className: styles$u.toggle },
|
|
4602
4605
|
React.createElement(Label, { as: "On", disabled: disabled }),
|
|
4603
|
-
React.createElement("span", { className: styles$
|
|
4606
|
+
React.createElement("span", { className: styles$u.pip }),
|
|
4604
4607
|
React.createElement(Label, { as: "Off", disabled: disabled }))),
|
|
4605
4608
|
React.createElement("input", { name: name, type: "hidden", value: String(value) })));
|
|
4606
4609
|
}
|
|
@@ -4614,24 +4617,24 @@ function Label({ as, disabled }) {
|
|
|
4614
4617
|
}
|
|
4615
4618
|
return "greyBlue";
|
|
4616
4619
|
};
|
|
4617
|
-
return (React.createElement("span", { className: styles$
|
|
4620
|
+
return (React.createElement("span", { className: styles$u.label },
|
|
4618
4621
|
React.createElement(Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
|
|
4619
4622
|
}
|
|
4620
4623
|
|
|
4621
4624
|
function FeatureSwitch({ children, description, disabled = false, enabled, externalLink = false, onEdit, onSwitch, hasSaveIndicator = false, title, }) {
|
|
4622
4625
|
const [savedIndicator, setSavedIndicator] = useState(false);
|
|
4623
|
-
const featureContentClassnames = classnames(styles$
|
|
4626
|
+
const featureContentClassnames = classnames(styles$v.featureContent, styles$v.content, enabled && styles$v.enabled);
|
|
4624
4627
|
shouldShowSavedIndicator();
|
|
4625
4628
|
return (React.createElement(Content, null,
|
|
4626
|
-
React.createElement("div", { className: styles$
|
|
4627
|
-
React.createElement("div", { className: styles$
|
|
4629
|
+
React.createElement("div", { className: styles$v.container },
|
|
4630
|
+
React.createElement("div", { className: styles$v.content },
|
|
4628
4631
|
React.createElement(Content, null,
|
|
4629
4632
|
title && React.createElement(Heading, { level: 4 }, title),
|
|
4630
4633
|
description && (React.createElement(Text, null,
|
|
4631
4634
|
React.createElement(Markdown, { content: description, basicUsage: true, externalLink: externalLink }))))),
|
|
4632
|
-
onSwitch && (React.createElement("div", { className: styles$
|
|
4635
|
+
onSwitch && (React.createElement("div", { className: styles$v.action },
|
|
4633
4636
|
React.createElement(Switch, { value: enabled, onChange: onSwitch, ariaLabel: description, disabled: disabled }),
|
|
4634
|
-
React.createElement(AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(motion.div, { className: styles$
|
|
4637
|
+
React.createElement(AnimatePresence, null, hasSaveIndicator && savedIndicator && (React.createElement(motion.div, { className: styles$v.savedIndicator, initial: { y: -4, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -4, opacity: 0 }, transition: {
|
|
4635
4638
|
delay: 0.2,
|
|
4636
4639
|
type: "spring",
|
|
4637
4640
|
damping: 20,
|
|
@@ -4639,9 +4642,9 @@ function FeatureSwitch({ children, description, disabled = false, enabled, exter
|
|
|
4639
4642
|
}, onAnimationComplete: handleAnimationComplete },
|
|
4640
4643
|
React.createElement(Text, { variation: "success" },
|
|
4641
4644
|
React.createElement(Emphasis, { variation: "italic" }, "Saved")))))))),
|
|
4642
|
-
(children || onEdit) && (React.createElement("div", { className: styles$
|
|
4645
|
+
(children || onEdit) && (React.createElement("div", { className: styles$v.container },
|
|
4643
4646
|
children && (React.createElement("div", { className: featureContentClassnames }, children)),
|
|
4644
|
-
onEdit && (React.createElement("div", { className: styles$
|
|
4647
|
+
onEdit && (React.createElement("div", { className: styles$v.action },
|
|
4645
4648
|
React.createElement(Button, { label: "Edit", type: "tertiary", onClick: onEdit })))))));
|
|
4646
4649
|
function shouldShowSavedIndicator() {
|
|
4647
4650
|
// Check if the component is mounted
|
|
@@ -4656,14 +4659,14 @@ function FeatureSwitch({ children, description, disabled = false, enabled, exter
|
|
|
4656
4659
|
}
|
|
4657
4660
|
}
|
|
4658
4661
|
|
|
4659
|
-
var css_248z$
|
|
4660
|
-
var styles$
|
|
4661
|
-
styleInject(css_248z$
|
|
4662
|
+
var css_248z$y = "._8VpnrMKmsqQ- {\n display: grid;\n /* If this gets wrapped in a flex container, it should take the remaining space */\n -ms-flex: 1;\n flex: 1;\n}\n\n.ooF1YfV4Usc- {\n gap: var(--space-smallest);\n}\n\n.ppCZfXq-Kqc- {\n gap: var(--space-smaller);\n}\n\n.tElkBalXH3g- {\n gap: var(--space-small);\n}\n\n._4u3OwUKxxbg- {\n gap: var(--space-base);\n}\n\n.RL7CJla0AAI- {\n gap: var(--space-large);\n}\n\n.fV4cvFYkhgo- {\n gap: 0;\n}\n\n._04xVVjZgr-0- {\n -ms-flex-align: start;\n align-items: start;\n}\n\n.Nc3zrqHHYSg- {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.qA-v50wBX1U- {\n -ms-flex-align: end;\n align-items: end;\n}\n";
|
|
4663
|
+
var styles$t = {"flexible":"_8VpnrMKmsqQ-","smallestGap":"ooF1YfV4Usc-","smallerGap":"ppCZfXq-Kqc-","smallGap":"tElkBalXH3g-","baseGap":"_4u3OwUKxxbg-","largeGap":"RL7CJla0AAI-","noneGap":"fV4cvFYkhgo-","startAlign":"_04xVVjZgr-0-","centerAlign":"Nc3zrqHHYSg-","endAlign":"qA-v50wBX1U-"};
|
|
4664
|
+
styleInject(css_248z$y);
|
|
4662
4665
|
|
|
4663
4666
|
function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
|
|
4664
|
-
return (React.createElement("div", { className: classnames(styles$
|
|
4665
|
-
[styles$
|
|
4666
|
-
[styles$
|
|
4667
|
+
return (React.createElement("div", { className: classnames(styles$t.flexible, {
|
|
4668
|
+
[styles$t[`${gap}Gap`]]: Boolean(gap),
|
|
4669
|
+
[styles$t[`${align}Align`]]: Boolean(align),
|
|
4667
4670
|
}), style: generateGridStylesFromTemplate(direction, template) }, children));
|
|
4668
4671
|
}
|
|
4669
4672
|
function generateGridStylesFromTemplate(direction, layoutTemplate) {
|
|
@@ -4725,18 +4728,18 @@ const Form = forwardRef(function InternalForm({ onSubmit, children, onStateChang
|
|
|
4725
4728
|
}
|
|
4726
4729
|
});
|
|
4727
4730
|
|
|
4728
|
-
var css_248z$
|
|
4729
|
-
var styles$
|
|
4730
|
-
styleInject(css_248z$
|
|
4731
|
+
var css_248z$x = ".Cr7OFSgq9WA- {\n font-style: normal;\n}\n";
|
|
4732
|
+
var styles$s = {"email":"Cr7OFSgq9WA-"};
|
|
4733
|
+
styleInject(css_248z$x);
|
|
4731
4734
|
|
|
4732
4735
|
function FormatEmail({ email }) {
|
|
4733
|
-
const className = classnames(styles$
|
|
4736
|
+
const className = classnames(styles$s.email);
|
|
4734
4737
|
return React.createElement("address", { className: className }, email);
|
|
4735
4738
|
}
|
|
4736
4739
|
|
|
4737
|
-
var css_248z$
|
|
4738
|
-
var styles$
|
|
4739
|
-
styleInject(css_248z$
|
|
4740
|
+
var css_248z$w = ":root {\n --file-card--height: calc(var(--space-base) * 3.5);\n --file-card--background-color: var(--color-white);\n --file-card--header-background-color: var(--color-greyBlue--lighter);\n --file-card--content-background-color: var(--color-white);\n --file-card--border-color: var(--color-border);\n --file-card--accent-color: var(--color-grey);\n --file-card--base-padding: var(--space-small);\n}\n\n.cx4iQqlNNvc- {\n display: grid;\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n gap: var(--space-small);\n grid-gap: var(--space-small);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding-right: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--file-card--border-color);\n border-radius: var(--radius-base);\n background-color: var(--color-white);\n background-color: var(--file-card--background-color);\n}\n\n.nSaog7-7Jn0-,\n.cx4iQqlNNvc- {\n position: relative;\n}\n\n._9jVt97W52JY- {\n display: grid;\n grid-template-columns: -webkit-max-content auto;\n grid-template-columns: max-content auto;\n gap: var(--space-small);\n grid-gap: var(--space-small);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n text-align: left;\n background-color: var(--color-transparent);\n}\n\n.z-kUGMs0Yfg- {\n width: 168px;\n height: 168px;\n}\n\n.x1Ql0enaIxY- {\n width: 56px;\n height: 56px;\n}\n\n.il9-MCeoBts- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: var(--color-surface--background);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY- {\n outline: none;\n}\n\n.nSaog7-7Jn0- ._9jVt97W52JY-:focus {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.nSaog7-7Jn0- .il9-MCeoBts- {\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY-:focus::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: var(--shadow-focus);\n}\n\n.cx4iQqlNNvc- .il9-MCeoBts- {\n border-right: none;\n border-bottom-left-radius: var(--radius-base);\n border-top-left-radius: var(--radius-base);\n}\n\n.O9EG-xJYVco- {\n cursor: pointer;\n}\n\n.QmrRp5CTpGU- .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--color-overlay);\n opacity: 0;\n transition: all var(--timing-base);\n}\n\n.QmrRp5CTpGU-:hover .il9-MCeoBts-::after,\n.QmrRp5CTpGU-:focus .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n opacity: 1;\n}\n\n.N5qVYfi1Pgo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n box-sizing: border-box;\n padding: var(--space-small);\n padding: var(--file-card--base-padding);\n}\n\n.TyXXZnJuVwo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: 0;\n}\n\n.TyXXZnJuVwo- p {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.nSaog7-7Jn0- ._7wDO6nPXy-g- {\n position: absolute;\n top: var(--space-smaller);\n right: var(--space-smaller);\n}\n\n.sgUJuNv0rUE- ~ ._7wDO6nPXy-g- {\n visibility: hidden;\n}\n\n._7wDO6nPXy-g-:focus-within,\n._7wDO6nPXy-g-:hover,\n.sgUJuNv0rUE-:hover ~ ._7wDO6nPXy-g-,\n.sgUJuNv0rUE-:focus ~ ._7wDO6nPXy-g- {\n visibility: visible;\n}\n";
|
|
4741
|
+
var styles$r = {"expanded":"cx4iQqlNNvc-","compact":"nSaog7-7Jn0-","wrapper":"_9jVt97W52JY-","large":"z-kUGMs0Yfg-","base":"x1Ql0enaIxY-","thumbnail":"il9-MCeoBts-","clickable":"O9EG-xJYVco-","hoverable":"QmrRp5CTpGU-","progress":"N5qVYfi1Pgo-","contentBlock":"TyXXZnJuVwo-","deleteButton":"_7wDO6nPXy-g-","deleteable":"sgUJuNv0rUE-"};
|
|
4742
|
+
styleInject(css_248z$w);
|
|
4740
4743
|
|
|
4741
4744
|
function FormatFileDeleteButton({ size, onDelete }) {
|
|
4742
4745
|
const buttonSize = size === "base" ? "small" : "base";
|
|
@@ -4746,13 +4749,13 @@ function FormatFileDeleteButton({ size, onDelete }) {
|
|
|
4746
4749
|
React.createElement(ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
|
|
4747
4750
|
}
|
|
4748
4751
|
|
|
4749
|
-
var css_248z$
|
|
4750
|
-
var styles$
|
|
4751
|
-
styleInject(css_248z$
|
|
4752
|
+
var css_248z$v = ".M9Y7sOk6lTc- {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto -webkit-max-content;\n grid-template-rows: auto max-content;\n width: inherit;\n height: inherit;\n -ms-flex-align: center;\n align-items: center;\n justify-items: center;\n}\n\n.E4wclxY71oM-:not(.yReSfaruAh0-) {\n -ms-flex-align: end;\n align-items: end;\n}\n\n.YXN92rsh2eU- {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n padding: var(--space-smaller);\n font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n position: absolute;\n bottom: 0;\n left: 0;\n padding: var(--space-small);\n font-size: var(--typography--fontSize-small);\n}\n";
|
|
4753
|
+
var styles$q = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
|
|
4754
|
+
styleInject(css_248z$v);
|
|
4752
4755
|
|
|
4753
|
-
var css_248z$
|
|
4754
|
-
var styles$
|
|
4755
|
-
styleInject(css_248z$
|
|
4756
|
+
var css_248z$u = "._62D0xyydQwo- {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n -webkit-animation: _5GIEBejwNJc- 200ms ease;\n animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
|
4757
|
+
var styles$p = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
|
|
4758
|
+
styleInject(css_248z$u);
|
|
4756
4759
|
|
|
4757
4760
|
function InternalThumbnailImage({ file }) {
|
|
4758
4761
|
const { name, src } = file;
|
|
@@ -4763,7 +4766,7 @@ function InternalThumbnailImage({ file }) {
|
|
|
4763
4766
|
}
|
|
4764
4767
|
return (React.createElement(React.Fragment, null,
|
|
4765
4768
|
!imageLoaded && React.createElement(Glimmer, { size: "auto" }),
|
|
4766
|
-
React.createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles$
|
|
4769
|
+
React.createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles$p.image, { [styles$p.hidden]: !imageLoaded }) })));
|
|
4767
4770
|
function handleImageLoad() {
|
|
4768
4771
|
setImageLoaded(true);
|
|
4769
4772
|
}
|
|
@@ -4817,11 +4820,11 @@ function InternalThumbnail({ compact = false, size, file, }) {
|
|
|
4817
4820
|
if (type.startsWith("image/") && (nonHeicImage || isSafari(userAgent))) {
|
|
4818
4821
|
return React.createElement(InternalThumbnailImage, { file: file });
|
|
4819
4822
|
}
|
|
4820
|
-
return (React.createElement("div", { className: classnames(styles$
|
|
4821
|
-
[styles$
|
|
4823
|
+
return (React.createElement("div", { className: classnames(styles$q.content, styles$q[size], {
|
|
4824
|
+
[styles$q.hasName]: hasName,
|
|
4822
4825
|
}) },
|
|
4823
4826
|
React.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
|
|
4824
|
-
hasName && (React.createElement("div", { className: styles$
|
|
4827
|
+
hasName && (React.createElement("div", { className: styles$q.fileName },
|
|
4825
4828
|
React.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
|
|
4826
4829
|
}
|
|
4827
4830
|
function getIconNameFromType(mimeType) {
|
|
@@ -4839,18 +4842,18 @@ function getIconNameFromType(mimeType) {
|
|
|
4839
4842
|
}
|
|
4840
4843
|
}
|
|
4841
4844
|
|
|
4842
|
-
var css_248z$
|
|
4843
|
-
var styles$
|
|
4844
|
-
styleInject(css_248z$
|
|
4845
|
+
var css_248z$t = ":root {\n --progress-bar--height: var(--space-base);\n}\n\nprogress.S1cioqW7loo-[value] {\n width: 100%;\n height: var(--space-base);\n height: var(--progress-bar--height);\n border: none;\n vertical-align: baseline;\n -webkit-appearance: none;\n appearance: none;\n}\n\nprogress.S1cioqW7loo-[value],\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);\n border-radius: calc(var(--space-base) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n background-color: var(--color-surface--background);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-value {\n border-radius: calc(var(--space-base) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n background-color: var(--color-interactive);\n -webkit-transition: all var(--timing-slow) ease-out;\n transition: all var(--timing-slow) ease-out;\n}\n\nprogress.S1cioqW7loo-[value]::-moz-progress-bar {\n border-radius: calc(var(--space-base) / 2);\n border-radius: calc(var(--progress-bar--height) / 2);\n background-color: var(--color-interactive);\n -moz-transition: all var(--timing-slow) ease-out;\n transition: all var(--timing-slow) ease-out;\n}\n\nprogress.nv5fejwjHzo-[value]::-webkit-progress-value {\n -webkit-transition: all var(--timing-quick) ease-out;\n transition: all var(--timing-quick) ease-out;\n}\n\n.dyBDsjWCui4- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n width: 100%;\n gap: var(--space-small);\n}\n";
|
|
4846
|
+
var styles$o = {"ProgressBar":"S1cioqW7loo-","SteppedProgressBar":"nv5fejwjHzo-","wrapper":"dyBDsjWCui4-"};
|
|
4847
|
+
styleInject(css_248z$t);
|
|
4845
4848
|
|
|
4846
|
-
var css_248z$
|
|
4849
|
+
var css_248z$s = ".CzIxUWYkrdo- {\n --progress-bar--height: var(--space-smaller);\n}\n\n.JNSDqHqKVlE- {\n --progress-bar--height: var(--space-small);\n}\n\n.nzFMJ2k4zJ0- {\n --progress-bar--height: var(--space-base);\n}\n";
|
|
4847
4850
|
var sizes = {"smaller":"CzIxUWYkrdo-","small":"JNSDqHqKVlE-","base":"nzFMJ2k4zJ0-"};
|
|
4848
|
-
styleInject(css_248z$
|
|
4851
|
+
styleInject(css_248z$s);
|
|
4849
4852
|
|
|
4850
4853
|
function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
|
|
4851
|
-
const steppedProgressBarClassName = classnames(styles$
|
|
4854
|
+
const steppedProgressBarClassName = classnames(styles$o.ProgressBar, styles$o.SteppedProgressBar, sizes[size]);
|
|
4852
4855
|
const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
|
|
4853
|
-
return (React.createElement("div", { role: "progressbar", className: styles$
|
|
4856
|
+
return (React.createElement("div", { role: "progressbar", className: styles$o.wrapper, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
|
|
4854
4857
|
const step = index + 1;
|
|
4855
4858
|
const value = step <= currentStep ? 100 : 0;
|
|
4856
4859
|
return (React.createElement("progress", { key: step, className: steppedProgressBarClassName, value: value, "data-testid": "progress-step" },
|
|
@@ -4861,7 +4864,7 @@ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base"
|
|
|
4861
4864
|
|
|
4862
4865
|
function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", }) {
|
|
4863
4866
|
const percentage = (currentStep / totalSteps) * 100;
|
|
4864
|
-
const progressBarClassName = classnames(styles$
|
|
4867
|
+
const progressBarClassName = classnames(styles$o.ProgressBar, sizes[size]);
|
|
4865
4868
|
if (variation === "stepped") {
|
|
4866
4869
|
return (React.createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size }));
|
|
4867
4870
|
}
|
|
@@ -4873,27 +4876,27 @@ function ProgressBar({ currentStep, totalSteps, size = "base", variation = "prog
|
|
|
4873
4876
|
function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
|
|
4874
4877
|
const isComplete = file.progress >= 1;
|
|
4875
4878
|
const fileSize = getHumanReadableFileSize(file.size);
|
|
4876
|
-
const wrapperClassNames = classnames(styles$
|
|
4877
|
-
[styles$
|
|
4879
|
+
const wrapperClassNames = classnames(styles$r[display], {
|
|
4880
|
+
[styles$r[displaySize]]: display === "compact",
|
|
4878
4881
|
});
|
|
4879
4882
|
const DetailsContainer = isComplete && onClick ? "button" : "div";
|
|
4880
|
-
const detailsClassNames = classnames(styles$
|
|
4881
|
-
[styles$
|
|
4882
|
-
[styles$
|
|
4883
|
-
[styles$
|
|
4884
|
-
[styles$
|
|
4883
|
+
const detailsClassNames = classnames(styles$r.wrapper, {
|
|
4884
|
+
[styles$r[displaySize]]: display === "compact",
|
|
4885
|
+
[styles$r.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
|
|
4886
|
+
[styles$r.clickable]: onClick,
|
|
4887
|
+
[styles$r.deleteable]: display === "compact",
|
|
4885
4888
|
});
|
|
4886
|
-
const thumbnailContainerClassNames = classnames(styles$
|
|
4889
|
+
const thumbnailContainerClassNames = classnames(styles$r.thumbnail, styles$r[displaySize]);
|
|
4887
4890
|
return (React.createElement("div", { className: wrapperClassNames },
|
|
4888
4891
|
React.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
|
|
4889
4892
|
React.createElement("div", { className: thumbnailContainerClassNames },
|
|
4890
4893
|
React.createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
|
|
4891
|
-
!isComplete && (React.createElement("div", { className: styles$
|
|
4894
|
+
!isComplete && (React.createElement("div", { className: styles$r.progress },
|
|
4892
4895
|
React.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
|
|
4893
|
-
display === "expanded" && (React.createElement("div", { className: styles$
|
|
4896
|
+
display === "expanded" && (React.createElement("div", { className: styles$r.contentBlock },
|
|
4894
4897
|
React.createElement(Text, { size: "base" }, file.name),
|
|
4895
4898
|
React.createElement(Text, { size: "small" }, fileSize)))),
|
|
4896
|
-
isComplete && onDelete && (React.createElement("div", { className: styles$
|
|
4899
|
+
isComplete && onDelete && (React.createElement("div", { className: styles$r.deleteButton },
|
|
4897
4900
|
React.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
|
|
4898
4901
|
}
|
|
4899
4902
|
function isHoverable({ display, isComplete, onClick, onDelete, }) {
|
|
@@ -4992,13 +4995,13 @@ function formatCivilTime(date, use24HourClock) {
|
|
|
4992
4995
|
});
|
|
4993
4996
|
}
|
|
4994
4997
|
|
|
4995
|
-
var css_248z$
|
|
4996
|
-
var styles$
|
|
4997
|
-
styleInject(css_248z$
|
|
4998
|
+
var css_248z$r = ".G3D4T8IYmwA-,\n._6sZaxiji5rQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n gap: var(--space-small);\n}\n\n._6sZaxiji5rQ- {\n gap: var(--space-base);\n}\n\n.wh-FkS64oJ0- {\n display: -ms-flexbox;\n display: flex;\n}\n\n.Idp-BJIbUUs- {\n width: 56px;\n height: 56px;\n}\n\n.kOG-STgt5Hs- {\n width: 168px;\n height: 168px;\n box-shadow: var(--shadow-base);\n}\n";
|
|
4999
|
+
var styles$n = {"gallery":"G3D4T8IYmwA-","galleryLarge":"_6sZaxiji5rQ-","showMoreButton":"wh-FkS64oJ0-","baseShowMoreButton":"Idp-BJIbUUs-","largeShowMoreButton":"kOG-STgt5Hs-"};
|
|
5000
|
+
styleInject(css_248z$r);
|
|
4998
5001
|
|
|
4999
|
-
var css_248z$
|
|
5000
|
-
var styles$
|
|
5001
|
-
styleInject(css_248z$
|
|
5002
|
+
var css_248z$q = "._3JgBCebdbNU-,\n.JJOBEL7d-10- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 50%;\n z-index: var(--elevation-base);\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n\n._3JgBCebdbNU- {\n right: var(--space-base);\n}\n\n.JJOBEL7d-10- {\n left: var(--space-base);\n}\n\n.fAep1A-0xIU- {\n display: -ms-flexbox;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--elevation-modal);\n width: 100%;\n height: 100%;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.AfUUWErd5S4- {\n display: -ms-flexbox;\n display: flex;\n z-index: var(--elevation-base);\n padding: var(--space-small) var(--space-base);\n color: var(--color-text--reverse--secondary);\n font-size: var(--typography--fontSize-large);\n background-color: var(--color-surface--reverse);\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.jobber-retheme .AfUUWErd5S4- {\n color: var(--color-text--secondary);\n background-color: var(--color-surface--background);\n}\n\n.ysUYbBTaORk- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.GSOVtN1Y3IU- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n min-height: 0;\n}\n\n.-V917BdNqSs- {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--color-overlay);\n}\n\n.sjwUjzb3a5c- {\n position: absolute;\n top: 50%;\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n}\n";
|
|
5003
|
+
var styles$m = {"next":"_3JgBCebdbNU-","prev":"JJOBEL7d-10-","lightboxWrapper":"fAep1A-0xIU-","toolbar":"AfUUWErd5S4-","title":"ysUYbBTaORk-","imagesWrapper":"GSOVtN1Y3IU-","overlay":"-V917BdNqSs-","image":"sjwUjzb3a5c-"};
|
|
5004
|
+
styleInject(css_248z$q);
|
|
5002
5005
|
|
|
5003
5006
|
/* eslint-disable max-statements */
|
|
5004
5007
|
const swipeConfidenceThreshold = 10000;
|
|
@@ -5050,18 +5053,18 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
|
|
|
5050
5053
|
useEffect(() => {
|
|
5051
5054
|
setCurrentImageIndex(imageIndex);
|
|
5052
5055
|
}, [imageIndex, open]);
|
|
5053
|
-
const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles$
|
|
5054
|
-
React.createElement("div", { className: styles$
|
|
5055
|
-
React.createElement("span", { className: styles$
|
|
5056
|
+
const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles$m.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
|
|
5057
|
+
React.createElement("div", { className: styles$m.toolbar },
|
|
5058
|
+
React.createElement("span", { className: styles$m.title }, images[currentImageIndex].title),
|
|
5056
5059
|
React.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
|
|
5057
|
-
React.createElement("div", { className: styles$
|
|
5060
|
+
React.createElement("div", { className: styles$m.imagesWrapper },
|
|
5058
5061
|
React.createElement(AnimatePresence, { initial: false },
|
|
5059
|
-
React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles$
|
|
5062
|
+
React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles$m.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
|
|
5060
5063
|
images.length > 1 && (React.createElement(React.Fragment, null,
|
|
5061
5064
|
React.createElement(PreviousButton, { onClick: debouncedHandlePrevious }),
|
|
5062
5065
|
React.createElement(NextButton, { onClick: debouncedHandleNext }))),
|
|
5063
|
-
React.createElement("div", { className: styles$
|
|
5064
|
-
React.createElement("div", { className: styles$
|
|
5066
|
+
React.createElement("div", { className: styles$m.toolbar }, images[currentImageIndex].caption),
|
|
5067
|
+
React.createElement("div", { className: styles$m.overlay, onClick: handleRequestClose })))));
|
|
5065
5068
|
return ReactDOM.createPortal(template, document.body);
|
|
5066
5069
|
function handleMovePrevious() {
|
|
5067
5070
|
setDirection(-1);
|
|
@@ -5085,11 +5088,11 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
|
|
|
5085
5088
|
}
|
|
5086
5089
|
}
|
|
5087
5090
|
function PreviousButton({ onClick }) {
|
|
5088
|
-
return (React.createElement("div", { className: styles$
|
|
5091
|
+
return (React.createElement("div", { className: styles$m.prev },
|
|
5089
5092
|
React.createElement(Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
|
|
5090
5093
|
}
|
|
5091
5094
|
function NextButton({ onClick }) {
|
|
5092
|
-
return (React.createElement("div", { className: styles$
|
|
5095
|
+
return (React.createElement("div", { className: styles$m.next },
|
|
5093
5096
|
React.createElement(Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
|
|
5094
5097
|
}
|
|
5095
5098
|
|
|
@@ -5100,13 +5103,13 @@ function Gallery({ files, size = "base", max, onDelete }) {
|
|
|
5100
5103
|
const [displayPastMax, setDisplayPastMax] = useState(max ? false : true);
|
|
5101
5104
|
const visibleFiles = displayPastMax ? files : files.slice(0, max);
|
|
5102
5105
|
return (React.createElement(React.Fragment, null,
|
|
5103
|
-
React.createElement("div", { className: size === "large" ? styles$
|
|
5106
|
+
React.createElement("div", { className: size === "large" ? styles$n.galleryLarge : styles$n.gallery },
|
|
5104
5107
|
visibleFiles.map((file, index) => {
|
|
5105
5108
|
return (React.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.src) }), display: "compact", displaySize: size, onClick: () => {
|
|
5106
5109
|
handleThumbnailClicked(index);
|
|
5107
5110
|
}, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
|
|
5108
5111
|
}),
|
|
5109
|
-
max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles$
|
|
5112
|
+
max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles$n.showMoreButton, styles$n[`${size}ShowMoreButton`]) },
|
|
5110
5113
|
React.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
|
|
5111
5114
|
setDisplayPastMax(true);
|
|
5112
5115
|
} })))),
|
|
@@ -5147,9 +5150,9 @@ function generateImagesArray(files) {
|
|
|
5147
5150
|
return { images, filesToImageIndex };
|
|
5148
5151
|
}
|
|
5149
5152
|
|
|
5150
|
-
var css_248z$
|
|
5151
|
-
var styles$
|
|
5152
|
-
styleInject(css_248z$
|
|
5153
|
+
var css_248z$p = ".YJHtDDKq6WI- {\n grid-column: initial;\n grid-column-end: span var(--gridCell--size-xs);\n}\n@media (--small-screens-and-up) {\n .YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-sm);\n}\n }\n@media (--medium-screens-and-up) {\n .YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-md);\n}\n }\n@media (--large-screens-and-up) {\n .YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-lg);\n}\n }\n@media (--extra-large-screens-and-up) {\n .YJHtDDKq6WI- {\n grid-column-end: span var(--gridCell--size-xl);\n}\n }\n";
|
|
5154
|
+
var styles$l = {"gridCell":"YJHtDDKq6WI-"};
|
|
5155
|
+
styleInject(css_248z$p);
|
|
5153
5156
|
|
|
5154
5157
|
/**
|
|
5155
5158
|
* Breakpoints that we support
|
|
@@ -5163,7 +5166,7 @@ function InternalGridCell({ size, children, }) {
|
|
|
5163
5166
|
* the column
|
|
5164
5167
|
*/
|
|
5165
5168
|
const cssSizeVariables = breakpoints.reduce(getSizeCSSVariables(size), {});
|
|
5166
|
-
return (React.createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles$
|
|
5169
|
+
return (React.createElement("div", { "data-testid": GRID_CELL_TEST_ID, className: styles$l.gridCell, style: cssSizeVariables }, children));
|
|
5167
5170
|
}
|
|
5168
5171
|
function getSizeCSSVariables(size) {
|
|
5169
5172
|
return (breakpointsObj, currentSize) => {
|
|
@@ -5180,13 +5183,13 @@ function getSizeCSSVariables(size) {
|
|
|
5180
5183
|
};
|
|
5181
5184
|
}
|
|
5182
5185
|
|
|
5183
|
-
var css_248z$
|
|
5184
|
-
var styles$
|
|
5185
|
-
styleInject(css_248z$
|
|
5186
|
+
var css_248z$o = ".NqFGJV-UF3Q- {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.IZLiiSquUTM- {\n gap: var(--space-base);\n}\n\n@media (--medium-screens-and-up) {\n .IZLiiSquUTM- {\n gap: var(--space-large);\n }\n}\n";
|
|
5187
|
+
var styles$k = {"grid":"NqFGJV-UF3Q-","gap":"IZLiiSquUTM-"};
|
|
5188
|
+
styleInject(css_248z$o);
|
|
5186
5189
|
|
|
5187
|
-
var css_248z$
|
|
5190
|
+
var css_248z$n = "._8XlrWg3FV-Q- {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.uKzqJPlYxJs- {\n -ms-flex-align: start;\n align-items: start;\n}\n\n.CSBjeFlj2xQ- {\n -ms-flex-align: end;\n align-items: end;\n}\n\n.BYyFdzONXyk- {\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n";
|
|
5188
5191
|
var alignments = {"center":"_8XlrWg3FV-Q-","start":"uKzqJPlYxJs-","end":"CSBjeFlj2xQ-","stretch":"BYyFdzONXyk-"};
|
|
5189
|
-
styleInject(css_248z$
|
|
5192
|
+
styleInject(css_248z$n);
|
|
5190
5193
|
|
|
5191
5194
|
// Only need the component to pass in the data as a react children
|
|
5192
5195
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -5198,8 +5201,8 @@ function GridCell(props) {
|
|
|
5198
5201
|
|
|
5199
5202
|
const GRID_TEST_ID = "ATL-Grid";
|
|
5200
5203
|
function Grid({ alignItems = "start", gap = true, children, }) {
|
|
5201
|
-
const classnames$1 = classnames(styles$
|
|
5202
|
-
[styles$
|
|
5204
|
+
const classnames$1 = classnames(styles$k.grid, alignments[alignItems], {
|
|
5205
|
+
[styles$k.gap]: gap,
|
|
5203
5206
|
});
|
|
5204
5207
|
return (React.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames$1 }, React.Children.map(children, ({ props }) => {
|
|
5205
5208
|
return React.createElement(InternalGridCell, Object.assign({}, props));
|
|
@@ -5207,13 +5210,13 @@ function Grid({ alignItems = "start", gap = true, children, }) {
|
|
|
5207
5210
|
}
|
|
5208
5211
|
Grid.Cell = GridCell;
|
|
5209
5212
|
|
|
5210
|
-
var css_248z$
|
|
5211
|
-
var styles$
|
|
5212
|
-
styleInject(css_248z$
|
|
5213
|
+
var css_248z$m = ".a2KrLEZNB04- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.a2KrLEZNB04- > *:not(:last-child) {\n margin-right: var(--space-small);\n}\n\n._7-uM-6dFidA- {\n position: relative;\n}\n\n._4tvG9ksH3oM- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n height: 100%;\n margin: 0 var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.ah2Ak5EObRo- {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.ah2Ak5EObRo-::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: var(--radius-circle);\n background-color: var(--color-blue--dark);\n opacity: 0.3;\n mix-blend-mode: multiply;\n}\n";
|
|
5214
|
+
var styles$j = {"inputAvatar":"a2KrLEZNB04-","preview":"_7-uM-6dFidA-","centered":"_4tvG9ksH3oM-","overlay":"ah2Ak5EObRo-"};
|
|
5215
|
+
styleInject(css_248z$m);
|
|
5213
5216
|
|
|
5214
|
-
var css_248z$
|
|
5215
|
-
var styles$
|
|
5216
|
-
styleInject(css_248z$
|
|
5217
|
+
var css_248z$l = ".grljXfTWj84- {\n font-size: 0;\n line-height: 0;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n border-color: var(--color-focus);\n outline: none;\n}\n\n.WHhHWgaoXk4- {\n padding: var(--space-base);\n border: var(--color-border) dashed var(--border-thick);\n border-radius: var(--radius-larger);\n text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n border-color: var(--color-focus);\n background-color: var(--color-surface--hover);\n}\n\n.WHhHWgaoXk4-.MRRclAp51-w- {\n border-color: var(--color-critical);\n}\n\n.TIbSRNvDK10- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n";
|
|
5218
|
+
var styles$i = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-","error":"MRRclAp51-w-","validationErrors":"TIbSRNvDK10-"};
|
|
5219
|
+
styleInject(css_248z$l);
|
|
5217
5220
|
|
|
5218
5221
|
function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
|
|
5219
5222
|
const options = {
|
|
@@ -5237,10 +5240,10 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
|
|
|
5237
5240
|
});
|
|
5238
5241
|
});
|
|
5239
5242
|
const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
|
|
5240
|
-
const dropZone = classnames(styles$
|
|
5241
|
-
[styles$
|
|
5242
|
-
[styles$
|
|
5243
|
-
[styles$
|
|
5243
|
+
const dropZone = classnames(styles$i.dropZoneBase, {
|
|
5244
|
+
[styles$i.dropZone]: variation === "dropzone",
|
|
5245
|
+
[styles$i.active]: isDragActive,
|
|
5246
|
+
[styles$i.error]: (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0,
|
|
5244
5247
|
});
|
|
5245
5248
|
return (React.createElement(React.Fragment, null,
|
|
5246
5249
|
React.createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
|
|
@@ -5249,7 +5252,7 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
|
|
|
5249
5252
|
React.createElement(Button, { label: buttonLabel, size: "small", type: "secondary" }),
|
|
5250
5253
|
size === "base" && (React.createElement(Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
|
|
5251
5254
|
variation === "button" && (React.createElement(Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))),
|
|
5252
|
-
(fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0 && (React.createElement("div", { className: styles$
|
|
5255
|
+
(fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0 && (React.createElement("div", { className: styles$i.validationErrors }, validationErrors))));
|
|
5253
5256
|
function handleDrop(acceptedFiles) {
|
|
5254
5257
|
acceptedFiles.forEach(file => {
|
|
5255
5258
|
uploadFile(file);
|
|
@@ -5357,12 +5360,31 @@ function getFileUpload(file, key, uploadUrl) {
|
|
|
5357
5360
|
return promise;
|
|
5358
5361
|
}
|
|
5359
5362
|
}
|
|
5363
|
+
/**
|
|
5364
|
+
* Upsert a given `FileUpload` into an array of `FileUpload`s.
|
|
5365
|
+
* `key` is used to uniquely identify files.
|
|
5366
|
+
*
|
|
5367
|
+
* @param updatedFile FileUpload File that was updated.
|
|
5368
|
+
* @param files Existing array of FileUploads.
|
|
5369
|
+
* @returns FileUpload[] updated set of files.
|
|
5370
|
+
*/
|
|
5371
|
+
function updateFiles(updatedFile, files) {
|
|
5372
|
+
const newFiles = [...files];
|
|
5373
|
+
const index = files.findIndex(file => file.key === updatedFile.key);
|
|
5374
|
+
if (index !== -1) {
|
|
5375
|
+
newFiles[index] = updatedFile;
|
|
5376
|
+
}
|
|
5377
|
+
else {
|
|
5378
|
+
newFiles.push(updatedFile);
|
|
5379
|
+
}
|
|
5380
|
+
return newFiles;
|
|
5381
|
+
}
|
|
5360
5382
|
|
|
5361
5383
|
function InputAvatar(_a) {
|
|
5362
5384
|
var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = __rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
|
|
5363
5385
|
const [progress, setProgress] = useState(1);
|
|
5364
|
-
return (React.createElement("div", { className: styles$
|
|
5365
|
-
React.createElement("div", { className: styles$
|
|
5386
|
+
return (React.createElement("div", { className: styles$j.inputAvatar },
|
|
5387
|
+
React.createElement("div", { className: styles$j.preview },
|
|
5366
5388
|
React.createElement(Avatar, Object.assign({ size: "large" }, avatarProps)),
|
|
5367
5389
|
progress < 1 && (React.createElement(Overlay, null,
|
|
5368
5390
|
React.createElement(Centered, null,
|
|
@@ -5388,11 +5410,11 @@ function InputAvatar(_a) {
|
|
|
5388
5410
|
}
|
|
5389
5411
|
}
|
|
5390
5412
|
function Overlay({ children }) {
|
|
5391
|
-
return React.createElement("div", { className: styles$
|
|
5413
|
+
return React.createElement("div", { className: styles$j.overlay }, children);
|
|
5392
5414
|
}
|
|
5393
5415
|
function Centered({ children }) {
|
|
5394
5416
|
// Note: this HIGHLY experimental Centered component is applying margin.
|
|
5395
|
-
return React.createElement("div", { className: styles$
|
|
5417
|
+
return React.createElement("div", { className: styles$j.centered }, children);
|
|
5396
5418
|
}
|
|
5397
5419
|
|
|
5398
5420
|
function InputDate(inputProps) {
|
|
@@ -5437,14 +5459,14 @@ function InputEmail(props) {
|
|
|
5437
5459
|
}
|
|
5438
5460
|
}
|
|
5439
5461
|
|
|
5440
|
-
var css_248z$
|
|
5441
|
-
var styles$
|
|
5442
|
-
styleInject(css_248z$
|
|
5462
|
+
var css_248z$k = "._4bvHwa3-qBA- > *:not(:last-child) {\n margin-bottom: -1px !important;\n}\n\n.bHm4WuX8ToY- {\n display: -ms-flexbox;\n display: flex;\n}\n\n.bHm4WuX8ToY- > *:not(:last-child) {\n margin-bottom: auto;\n margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group */\n\n.nmDPgrXofeE- {\n --public-field--top-left-radius: 0;\n --public-field--top-right-radius: 0;\n --public-field--bottom-left-radius: 0;\n --public-field--bottom-right-radius: 0;\n}\n\n._4bvHwa3-qBA- > :first-child:not(.bHm4WuX8ToY-) {\n --public-field--top-left-radius: var(--radius-base);\n --public-field--top-right-radius: var(--radius-base);\n}\n\n._4bvHwa3-qBA- > :last-child:not(.bHm4WuX8ToY-) {\n --public-field--bottom-left-radius: var(--radius-base);\n --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n.bHm4WuX8ToY-:first-child > :first-child {\n --public-field--top-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:first-child > :last-child {\n --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n.bHm4WuX8ToY-:last-child > :first-child {\n --public-field--bottom-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:last-child > :last-child {\n --public-field--bottom-right-radius: var(--radius-base);\n}\n";
|
|
5463
|
+
var styles$h = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-"};
|
|
5464
|
+
styleInject(css_248z$k);
|
|
5443
5465
|
|
|
5444
5466
|
function InputGroup({ children, flowDirection = "vertical", }) {
|
|
5445
5467
|
if (isInvalidGroupNesting(children))
|
|
5446
5468
|
return React.createElement(React.Fragment, null);
|
|
5447
|
-
const className = classnames(styles$
|
|
5469
|
+
const className = classnames(styles$h.inputGroup, styles$h[flowDirection]);
|
|
5448
5470
|
return React.createElement("div", { className: className }, children);
|
|
5449
5471
|
}
|
|
5450
5472
|
function isInvalidGroupNesting(childs) {
|
|
@@ -5525,9 +5547,9 @@ function InputPassword(props) {
|
|
|
5525
5547
|
}
|
|
5526
5548
|
}
|
|
5527
5549
|
|
|
5528
|
-
var css_248z$
|
|
5529
|
-
var styles$
|
|
5530
|
-
styleInject(css_248z$
|
|
5550
|
+
var css_248z$j = ".L7WK-i5uaOk- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: var(--elevation-base);\n height: var(--field--height);\n padding-top: var(--field--padding-top);\n padding-bottom: var(--field--padding-bottom);\n padding-left: var(--field--padding-left);\n padding-right: var(--field--padding-right);\n color: var(--color-grey);\n font-family: inherit;\n font-size: inherit;\n line-height: var(--field--value-lineHeight);\n pointer-events: none;\n}\n\n.q1wXBupm5Xc- {\n visibility: hidden;\n opacity: 0;\n}\n";
|
|
5551
|
+
var styles$g = {"mask":"L7WK-i5uaOk-","hiddenValue":"q1wXBupm5Xc-"};
|
|
5552
|
+
styleInject(css_248z$j);
|
|
5531
5553
|
|
|
5532
5554
|
function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
|
|
5533
5555
|
const { value: inputValue, onChange } = children.props;
|
|
@@ -5536,8 +5558,8 @@ function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
|
|
|
5536
5558
|
const placeholderValue = pattern
|
|
5537
5559
|
.replace(new RegExp(`\\${delimiter}`, "g"), "_")
|
|
5538
5560
|
.slice(stringifiedValue.length);
|
|
5539
|
-
const inputMask = (React.createElement("div", { className: styles$
|
|
5540
|
-
React.createElement("span", { className: styles$
|
|
5561
|
+
const inputMask = (React.createElement("div", { className: styles$g.mask, "aria-hidden": "true" },
|
|
5562
|
+
React.createElement("span", { className: styles$g.hiddenValue }, stringifiedValue),
|
|
5541
5563
|
placeholderValue));
|
|
5542
5564
|
return cloneElement(children, {
|
|
5543
5565
|
onChange: handleChange,
|
|
@@ -5799,43 +5821,43 @@ function Link({ url, children, ariaLabel, ariaExpanded, external = false, }) {
|
|
|
5799
5821
|
return (React.createElement("a", Object.assign({ href: url }, (external && { target: "_blank" }), (ariaLabel && { "aria-label": ariaLabel }), (ariaExpanded && { "aria-expanded": ariaExpanded })), children));
|
|
5800
5822
|
}
|
|
5801
5823
|
|
|
5802
|
-
var css_248z$
|
|
5803
|
-
var styles$
|
|
5804
|
-
styleInject(css_248z$
|
|
5824
|
+
var css_248z$i = ".u853Ql4cj50- {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.ig9l6LfEgwo-:not(:last-child) {\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.KIYTQdrufzY- {\n position: relative;\n}\n\n.KIYTQdrufzY-:not(:last-child) .u853Ql4cj50- {\n padding-bottom: var(--space-large);\n}\n";
|
|
5825
|
+
var styles$f = {"list":"u853Ql4cj50-","item":"ig9l6LfEgwo-","section":"KIYTQdrufzY-"};
|
|
5826
|
+
styleInject(css_248z$i);
|
|
5805
5827
|
|
|
5806
|
-
var css_248z$
|
|
5828
|
+
var css_248z$h = ".LUlooG82UJA- {\n position: sticky;\n top: 0;\n padding: var(--space-small) var(--space-base);\n border-bottom: 1px solid var(--color-border--section);\n background-color: var(--color-surface);\n}\n\n._4LVpgNq-SLM- {\n border-bottom-color: var(--color-greyBlue--light);\n color: var(--color-greyBlue--light);\n}\n\n._0QhWokyE9PY- {\n border-bottom-color: var(--color-green);\n color: var(--color-green);\n}\n\n.J8wB3qqOlBc-,\n.Ujqj17pKDIE- {\n border-bottom-color: var(--color-blue);\n color: var(--color-blue);\n}\n\n._0lNxLGXhrfY- {\n border-bottom-color: var(--color-orange);\n color: var(--color-orange);\n}\n\n._4qPymF0CAAE- {\n border-bottom-color: var(--color-red);\n color: var(--color-red);\n}\n\n.kKYNLBSu9IQ- {\n border-bottom-color: var(--color-teal);\n color: var(--color-teal);\n}\n";
|
|
5807
5829
|
var sectionStyles = {"sectionHeader":"LUlooG82UJA-","greyBlue":"_4LVpgNq-SLM-","green":"_0QhWokyE9PY-","blue":"J8wB3qqOlBc-","archived":"Ujqj17pKDIE-","orange":"_0lNxLGXhrfY-","red":"_4qPymF0CAAE-","teal":"kKYNLBSu9IQ-"};
|
|
5808
|
-
styleInject(css_248z$
|
|
5830
|
+
styleInject(css_248z$h);
|
|
5809
5831
|
|
|
5810
|
-
var css_248z$
|
|
5811
|
-
var styles$
|
|
5812
|
-
styleInject(css_248z$
|
|
5832
|
+
var css_248z$g = ".XPLf4Jp6feU- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: var(--space-small);\n border: none;\n text-align: left;\n -webkit-text-decoration: none;\n text-decoration: none;\n background-color: transparent;\n transition: background-color var(--timing-base);\n -webkit-appearance: none;\n appearance: none;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.XPLf4Jp6feU- > * {\n padding: var(--space-small);\n}\n\n.RseHYbVm4MA- {\n cursor: pointer;\n}\n\n.RseHYbVm4MA-:hover,\n.RseHYbVm4MA-:focus {\n outline: none;\n background-color: var(--color-surface--hover);\n}\n\n.d1-zQvxPH-M- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: var(--space-large);\n height: var(--space-large);\n box-sizing: content-box;\n}\n\n._-58VuZf1TtM- {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n min-width: 0;\n -ms-flex-item-align: center;\n align-self: center;\n}\n\n.wHB5zXYWW3E- {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n text-align: right;\n}\n\n/* States */\n\n.C4DznaxLKiw- {\n background-color: var(--color-surface--background);\n}\n\n.C4DznaxLKiw-:hover,\n.C4DznaxLKiw-:focus {\n background-color: var(--color-surface--background--hover);\n}\n\n/* TODO: Move truncate in typography */\n\n.Brob-IpVv4o- {\n display: block;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
5833
|
+
var styles$e = {"action":"XPLf4Jp6feU-","hoverable":"RseHYbVm4MA-","icon":"d1-zQvxPH-M-","info":"_-58VuZf1TtM-","amount":"wHB5zXYWW3E-","isActive":"C4DznaxLKiw-","truncate":"Brob-IpVv4o-"};
|
|
5834
|
+
styleInject(css_248z$g);
|
|
5813
5835
|
|
|
5814
5836
|
function ListItem({ caption, content, icon, iconColor, id, isActive, onClick, title, url, value, }) {
|
|
5815
|
-
const actionClasses = classnames(styles$
|
|
5837
|
+
const actionClasses = classnames(styles$e.action, isActive && styles$e.isActive, (onClick || url) && styles$e.hoverable);
|
|
5816
5838
|
const Wrapper = url ? "a" : "button";
|
|
5817
5839
|
const buttonProps = Object.assign({}, (Wrapper === "button" && { role: "button", type: "button" }));
|
|
5818
5840
|
return (React.createElement(Wrapper, Object.assign({ id: id.toString(), className: actionClasses, href: url, onClick: onClick }, buttonProps),
|
|
5819
|
-
icon && (React.createElement("div", { className: styles$
|
|
5841
|
+
icon && (React.createElement("div", { className: styles$e.icon },
|
|
5820
5842
|
React.createElement(Icon, { name: icon, color: iconColor }))),
|
|
5821
|
-
React.createElement("div", { className: styles$
|
|
5843
|
+
React.createElement("div", { className: styles$e.info },
|
|
5822
5844
|
title && React.createElement(Heading, { level: 5 }, title),
|
|
5823
5845
|
React.createElement(Description, { content: content }),
|
|
5824
5846
|
caption && (React.createElement(Text, { variation: "subdued" },
|
|
5825
5847
|
React.createElement(Typography, { element: "span", size: "small", emphasisType: "italic" }, caption)))),
|
|
5826
|
-
value && (React.createElement("div", { className: styles$
|
|
5848
|
+
value && (React.createElement("div", { className: styles$e.amount },
|
|
5827
5849
|
React.createElement(Text, null,
|
|
5828
5850
|
React.createElement(Emphasis, { variation: "bold" }, value))))));
|
|
5829
5851
|
}
|
|
5830
5852
|
function Description({ content }) {
|
|
5831
5853
|
if (content instanceof Array) {
|
|
5832
5854
|
return (React.createElement(React.Fragment, null, content.map((item, i) => (React.createElement(Text, { key: i },
|
|
5833
|
-
React.createElement("span", { className: styles$
|
|
5855
|
+
React.createElement("span", { className: styles$e.truncate },
|
|
5834
5856
|
React.createElement(Markdown, { content: item, basicUsage: true })))))));
|
|
5835
5857
|
}
|
|
5836
5858
|
else {
|
|
5837
5859
|
return (React.createElement(Text, null,
|
|
5838
|
-
React.createElement("span", { className: styles$
|
|
5860
|
+
React.createElement("span", { className: styles$e.truncate },
|
|
5839
5861
|
React.createElement(Markdown, { content: content, basicUsage: true }))));
|
|
5840
5862
|
}
|
|
5841
5863
|
}
|
|
@@ -5850,26 +5872,26 @@ function List({ items }) {
|
|
|
5850
5872
|
}
|
|
5851
5873
|
}
|
|
5852
5874
|
function DisplayList({ items }) {
|
|
5853
|
-
return (React.createElement("ul", { className: styles$
|
|
5875
|
+
return (React.createElement("ul", { className: styles$f.list }, items.map(item => (React.createElement("li", { key: item.id, className: styles$f.item },
|
|
5854
5876
|
React.createElement(ListItem, Object.assign({}, item)))))));
|
|
5855
5877
|
}
|
|
5856
5878
|
function SectionedList({ items }) {
|
|
5857
5879
|
const sectionedItems = groupBy(items, item => get(item, "section", "Other"));
|
|
5858
5880
|
const sectionHeaderClassNames = classnames(sectionStyles.sectionHeader);
|
|
5859
|
-
return (React.createElement("ul", { className: styles$
|
|
5881
|
+
return (React.createElement("ul", { className: styles$f.list }, Object.keys(sectionedItems).map(sectionName => (React.createElement("li", { key: sectionName, className: styles$f.section },
|
|
5860
5882
|
React.createElement("div", { className: sectionHeaderClassNames },
|
|
5861
5883
|
React.createElement(Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName)),
|
|
5862
|
-
React.createElement("ul", { className: styles$
|
|
5884
|
+
React.createElement("ul", { className: styles$f.list }, sectionedItems[sectionName].map(item => (React.createElement("li", { key: item.id, className: styles$f.item },
|
|
5863
5885
|
React.createElement(ListItem, Object.assign({}, item)))))))))));
|
|
5864
5886
|
}
|
|
5865
5887
|
|
|
5866
|
-
var css_248z$
|
|
5867
|
-
var styles$
|
|
5868
|
-
styleInject(css_248z$
|
|
5888
|
+
var css_248z$f = ".D-J03az6XL4- {\n position: relative;\n width: 100%;\n}\n\n.D-J03az6XL4- * {\n box-sizing: border-box;\n}\n\n.EzNdHgwsT40- {\n --field--height: var(--space-largest);\n\n --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n --field--padding-left: var(--space-base);\n --field--padding-right: var(--space-base);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n height: var(--space-largest);\n height: var(--field--height);\n padding-top: calc(var(--space-base) - var(--space-smallest));\n padding-top: var(--field--padding-top);\n padding-bottom: calc(var(--space-base) - var(--space-smallest));\n padding-bottom: var(--field--padding-bottom);\n padding-left: var(--space-base);\n padding-left: var(--field--padding-left);\n padding-right: var(--space-base);\n padding-right: var(--field--padding-right);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n}\n\n.EzNdHgwsT40- p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.D-J03az6XL4-:hover,\n.D-J03az6XL4-.EzNdHgwsT40- {\n cursor: pointer;\n caret-color: transparent;\n}\n\n.EzNdHgwsT40-:focus,\n.EzNdHgwsT40-.bu7HWKRu6HI- {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.eQ6yfQg6zLc- {\n --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.pM-ts4-QMZY- {\n --field--padding-left: var(--space-large);\n --field--padding-right: var(--space-large);\n --field--height: calc(var(--space-extravagant));\n}\n";
|
|
5889
|
+
var styles$d = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-"};
|
|
5890
|
+
styleInject(css_248z$f);
|
|
5869
5891
|
|
|
5870
|
-
var css_248z$
|
|
5871
|
-
var styles$
|
|
5872
|
-
styleInject(css_248z$
|
|
5892
|
+
var css_248z$e = "._0SStdD4KRHs- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: calc(var(--space-extravagant) * 5);\n box-shadow: var(--shadow-base);\n margin: 0;\n padding: 0;\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-large);\n overflow: auto;\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n scroll-behavior: smooth;\n}\n\n._0SStdD4KRHs- li {\n list-style: none;\n}\n\n.mFSgwOQZJm0- {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--space-small) var(--space-base);\n cursor: pointer;\n transition: all var(--timing-base);\n}\n\n.mFSgwOQZJm0-:focus,\n.mFSgwOQZJm0-.SepF4gvOxq8- {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n";
|
|
5893
|
+
var styles$c = {"dropDownMenuContainer":"_0SStdD4KRHs-","option":"mFSgwOQZJm0-","active":"SepF4gvOxq8-"};
|
|
5894
|
+
styleInject(css_248z$e);
|
|
5873
5895
|
|
|
5874
5896
|
function DropDownMenu({ options, setOptions }) {
|
|
5875
5897
|
const [highlightedIndex, setHighlightedIndex] = useState(0);
|
|
@@ -5933,9 +5955,9 @@ function DropDownMenu({ options, setOptions }) {
|
|
|
5933
5955
|
// focus first option
|
|
5934
5956
|
handleOptionFocus(0);
|
|
5935
5957
|
}, [menuDiv]);
|
|
5936
|
-
return (React.createElement("ul", { "data-testid": "dropdown-menu", className: styles$
|
|
5937
|
-
const optionClass = classnames(styles$
|
|
5938
|
-
[styles$
|
|
5958
|
+
return (React.createElement("ul", { "data-testid": "dropdown-menu", className: styles$c.dropDownMenuContainer, ref: menuDiv, onKeyDown: handleKeyDown }, options.map((option, index) => {
|
|
5959
|
+
const optionClass = classnames(styles$c.option, {
|
|
5960
|
+
[styles$c.active]: index === highlightedIndex,
|
|
5939
5961
|
});
|
|
5940
5962
|
return (React.createElement("li", { key: `${index}-${option.label}`, className: optionClass, onClick: event => {
|
|
5941
5963
|
event.stopPropagation();
|
|
@@ -5965,10 +5987,10 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
|
|
|
5965
5987
|
const [focused, setFocused] = useState(false);
|
|
5966
5988
|
const multiSelectContainer = useRef();
|
|
5967
5989
|
const multiSelectRef = useRef();
|
|
5968
|
-
const multiSelectClass = classnames(styles$
|
|
5969
|
-
[styles$
|
|
5970
|
-
[styles$
|
|
5971
|
-
[styles$
|
|
5990
|
+
const multiSelectClass = classnames(styles$d.multiSelect, {
|
|
5991
|
+
[styles$d.active]: menuVisible,
|
|
5992
|
+
[styles$d.large]: size === "large",
|
|
5993
|
+
[styles$d.small]: size === "small",
|
|
5972
5994
|
});
|
|
5973
5995
|
function handleMenuVisibility() {
|
|
5974
5996
|
multiSelectRef.current.focus();
|
|
@@ -6017,25 +6039,25 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
|
|
|
6017
6039
|
setLabel(selectedLabels.join(", "));
|
|
6018
6040
|
}
|
|
6019
6041
|
}, [options]);
|
|
6020
|
-
return (React.createElement("div", { ref: multiSelectContainer, className: styles$
|
|
6042
|
+
return (React.createElement("div", { ref: multiSelectContainer, className: styles$d.multiSelectContainer, onKeyDown: handleKeydown },
|
|
6021
6043
|
React.createElement("div", { "data-testid": "multi-select", className: multiSelectClass, onClick: handleMenuVisibility, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: 0, ref: multiSelectRef, role: "button", "aria-label": `${defaultLabel}: ${label}`, "aria-multiselectable": true, "aria-haspopup": true },
|
|
6022
6044
|
React.createElement(Text, null, label),
|
|
6023
6045
|
React.createElement(Icon, { name: "arrowDown" })),
|
|
6024
6046
|
menuVisible && (React.createElement(DropDownMenu, { options: options, setOptions: onOptionsChange }))));
|
|
6025
6047
|
}
|
|
6026
6048
|
|
|
6027
|
-
var css_248z$
|
|
6028
|
-
var styles$
|
|
6029
|
-
styleInject(css_248z$
|
|
6049
|
+
var css_248z$d = ".pVEdXlwstrc- {\n width: 100%;\n box-sizing: border-box;\n padding: var(--space-base);\n}\n\n@media (--medium-screens-and-up) {\n\n.pVEdXlwstrc- {\n padding: var(--space-large);\n}\n }\n\n._9r84iz--C5M- {\n max-width: none;\n}\n\n._0LO26JFXU9g- {\n max-width: calc(var(--base-unit) * 80);\n}\n\n.KiMIF8eFbuE- {\n max-width: calc(var(--base-unit) * 64);\n}\n\n.GCeQrLFyml4- h1 {\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n margin-bottom: var(--space-base);\n}\n\n.GCeQrLFyml4- > .KP-BTjB82iQ- {\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n}\n\n.GCeQrLFyml4-.GuFU-PgC1j4-,\n.GCeQrLFyml4-.qiwlkB5pxkA- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .KP-BTjB82iQ- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ-,\n.GCeQrLFyml4-.GuFU-PgC1j4- .KP-BTjB82iQ- {\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ- {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n.E5FEsck9zwg- {\n -ms-flex: 0 0 100%;\n flex: 0 0 100%;\n margin-bottom: var(--space-small);\n}\n\n.Sn3-wJuNCqk- {\n margin-top: var(--space-small);\n -ms-flex: 1;\n flex: 1;\n}\n\n.Sn3-wJuNCqk- > div {\n width: 100%;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- {\n margin-top: 0;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .E5FEsck9zwg-,\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin: 0;\n -ms-flex: 0 auto;\n flex: 0 auto;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- + .Sn3-wJuNCqk- {\n margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4- ._9ZKFDK2jL80- {\n margin-bottom: var(--space-base);\n}\n";
|
|
6050
|
+
var styles$b = {"page":"pVEdXlwstrc-","fill":"_9r84iz--C5M-","standard":"_0LO26JFXU9g-","narrow":"KiMIF8eFbuE-","titleBar":"GCeQrLFyml4-","actionGroup":"KP-BTjB82iQ-","large":"GuFU-PgC1j4-","medium":"qiwlkB5pxkA-","small":"CbPnpIk7-EE-","primaryAction":"E5FEsck9zwg-","actionButton":"Sn3-wJuNCqk-","subtitle":"_9ZKFDK2jL80-"};
|
|
6051
|
+
styleInject(css_248z$d);
|
|
6030
6052
|
|
|
6031
6053
|
// eslint-disable-next-line max-statements
|
|
6032
6054
|
function Page({ title, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
|
|
6033
|
-
const pageStyles = classnames(styles$
|
|
6055
|
+
const pageStyles = classnames(styles$b.page, styles$b[width]);
|
|
6034
6056
|
const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
|
|
6035
|
-
const titleBarClasses = classnames(styles$
|
|
6036
|
-
[styles$
|
|
6037
|
-
[styles$
|
|
6038
|
-
[styles$
|
|
6057
|
+
const titleBarClasses = classnames(styles$b.titleBar, {
|
|
6058
|
+
[styles$b.small]: titleBarWidth > Breakpoints.smaller,
|
|
6059
|
+
[styles$b.medium]: titleBarWidth > Breakpoints.small,
|
|
6060
|
+
[styles$b.large]: titleBarWidth > Breakpoints.base,
|
|
6039
6061
|
});
|
|
6040
6062
|
const showMenu = moreActionsMenu.length > 0;
|
|
6041
6063
|
const showActionGroup = showMenu || primaryAction;
|
|
@@ -6054,25 +6076,25 @@ function Page({ title, intro, externalIntroLinks, subtitle, children, width = "s
|
|
|
6054
6076
|
React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
|
|
6055
6077
|
React.createElement("div", null,
|
|
6056
6078
|
React.createElement(Heading, { level: 1 }, title),
|
|
6057
|
-
subtitle && (React.createElement("div", { className: styles$
|
|
6079
|
+
subtitle && (React.createElement("div", { className: styles$b.subtitle },
|
|
6058
6080
|
React.createElement(Text, { size: "large", variation: "subdued" },
|
|
6059
6081
|
React.createElement(Emphasis, { variation: "bold" },
|
|
6060
6082
|
React.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
|
|
6061
|
-
showActionGroup && (React.createElement("div", { className: styles$
|
|
6062
|
-
primaryAction && (React.createElement("div", { className: styles$
|
|
6083
|
+
showActionGroup && (React.createElement("div", { className: styles$b.actionGroup },
|
|
6084
|
+
primaryAction && (React.createElement("div", { className: styles$b.primaryAction },
|
|
6063
6085
|
React.createElement(Button, Object.assign({}, primaryAction)))),
|
|
6064
|
-
secondaryAction && (React.createElement("div", { className: styles$
|
|
6086
|
+
secondaryAction && (React.createElement("div", { className: styles$b.actionButton },
|
|
6065
6087
|
React.createElement(Button, Object.assign({}, secondaryAction)))),
|
|
6066
|
-
showMenu && (React.createElement("div", { className: styles$
|
|
6088
|
+
showMenu && (React.createElement("div", { className: styles$b.actionButton },
|
|
6067
6089
|
React.createElement(Menu, { items: moreActionsMenu })))))),
|
|
6068
6090
|
intro && (React.createElement(Text, { size: "large" },
|
|
6069
6091
|
React.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
|
|
6070
6092
|
React.createElement(Content, null, children))));
|
|
6071
6093
|
}
|
|
6072
6094
|
|
|
6073
|
-
var css_248z$
|
|
6095
|
+
var css_248z$c = ":root {\n --card--base-padding: var(--space-base);\n --popover--padding: var(--space-base);\n --popover--width: calc(var(--base-unit) * 21.875);\n --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.oSlK4rLUvzE- {\n display: -ms-flexbox;\n display: flex;\n position: \"relative\";\n padding: var(--space-base);\n padding: var(--popover--padding);\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.XVPpPb-7e30- {\n float: right;\n padding: calc(var(--base-unit) / 4);\n padding: var(--dismiss--button-padding);\n text-align: right;\n}\n\n.TDuYbqXaLW0- {\n z-index: var(--elevation-tooltip);\n width: -webkit-max-content;\n width: max-content;\n max-width: calc(var(--base-unit) * 21.875);\n max-width: var(--popover--width);\n box-shadow: var(--shadow-base);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n font-size: var(--typography--fontSize-base);\n line-height: normal;\n background: var(--color-surface);\n}\n\n.TDuYbqXaLW0- > * {\n --public-content--padding: var(--card--base-padding);\n}\n\n.LJCpn0zf1e8- {\n visibility: hidden;\n}\n\n.LJCpn0zf1e8-,\n.LJCpn0zf1e8-::before {\n position: absolute;\n width: var(--base-unit);\n height: var(--base-unit);\n background: inherit;\n}\n\n.LJCpn0zf1e8-::before {\n content: \"\";\n visibility: visible;\n border: var(--border-base) solid var(--color-border);\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8- {\n bottom: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"bottom\"] > .LJCpn0zf1e8- {\n top: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8- {\n right: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8- {\n left: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8-::before {\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n";
|
|
6074
6096
|
var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
|
|
6075
|
-
styleInject(css_248z$
|
|
6097
|
+
styleInject(css_248z$c);
|
|
6076
6098
|
|
|
6077
6099
|
function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
|
|
6078
6100
|
const [popperElement, setPopperElement] = useState();
|
|
@@ -6110,9 +6132,9 @@ function buildModifiers(arrowElement) {
|
|
|
6110
6132
|
return modifiers;
|
|
6111
6133
|
}
|
|
6112
6134
|
|
|
6113
|
-
var css_248z$
|
|
6114
|
-
var styles$
|
|
6115
|
-
styleInject(css_248z$
|
|
6135
|
+
var css_248z$b = "._5P8wEHDUdKY- {\n --radio--checked-thickness: var(--border-thicker);\n --radio-diameter: var(--space-base);\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule)\n var(--color-interactive--hover);\n display: -ms-inline-flexbox;\n display: inline-flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.jobber-retheme ._5P8wEHDUdKY- {\n --radio--checked-thickness: calc(\n var(--border-thicker) + var(--space-smallest)\n );\n --radio-diameter: calc(var(--space-base) + var(--space-smaller));\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule) transparent;\n}\n\n._08ZPdlE98Ko- {\n /* Hide checkbox on UI but not screen readers and still allow focus state */\n position: absolute;\n left: -999vw;\n}\n\n.-PUoLXltVlQ- {\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: var(--typography--fontSize-base);\n cursor: pointer;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n content: \"\";\n display: block;\n width: var(--radio-diameter);\n height: var(--radio-diameter);\n box-sizing: border-box;\n margin: var(--space-smallest) var(--space-small) 0 0;\n border: var(--border-thick) solid var(--color-interactive);\n border-radius: 100%;\n background-color: var(--color-surface);\n transition: all var(--timing-quick) ease-out;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n.jobber-retheme ._08ZPdlE98Ko- + .-PUoLXltVlQ-::before {\n margin-top: 0;\n border-color: var(--color-border);\n}\n\n._08ZPdlE98Ko-:hover + .-PUoLXltVlQ-::before {\n border-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n box-shadow: var(--radio--checked-shadow);\n border-color: var(--color-interactive--hover);\n border-width: var(--radio--checked-thickness);\n background-color: var(--color-interactive);\n}\n\n._08ZPdlE98Ko-:focus-visible:checked + .-PUoLXltVlQ-:before {\n box-shadow: var(--radio--checked-shadow), var(--shadow-focus);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- {\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ-::before {\n border-color: var(--color-disabled--secondary);\n}\n\n.jobber-retheme ._08ZPdlE98Ko-:checked + .-PUoLXltVlQ-::before {\n border-color: var(--color-interactive);\n background-color: var(--color-surface);\n}\n\n._08ZPdlE98Ko-[disabled]:checked + .-PUoLXltVlQ-::before {\n --radio--checked-shadow: 0px 0px 0px var(--space-minuscule)\n var(--color-disabled);\n border-color: var(--color-disabled);\n}\n\n._8r6qT-6S9EI-,\n.C5SzbO1epLk- {\n margin-bottom: var(--space-small);\n padding-left: calc(var(--radio-diameter) + var(--space-small));\n}\n\n.jobber-retheme ._8r6qT-6S9EI-,\n.jobber-retheme .C5SzbO1epLk- {\n margin-top: calc(var(--space-smaller) * -1);\n}\n\n._08ZPdlE98Ko-[disabled] + .-PUoLXltVlQ- + ._8r6qT-6S9EI- > p {\n color: var(--color-disabled);\n}\n";
|
|
6136
|
+
var styles$a = {"radioGroup":"_5P8wEHDUdKY-","input":"_08ZPdlE98Ko-","label":"-PUoLXltVlQ-","description":"_8r6qT-6S9EI-","children":"C5SzbO1epLk-"};
|
|
6137
|
+
styleInject(css_248z$b);
|
|
6116
6138
|
|
|
6117
6139
|
/**
|
|
6118
6140
|
* For rendering props only. To make updates to
|
|
@@ -6125,18 +6147,18 @@ function InternalRadioOption({ value, name, label, description, disabled, checke
|
|
|
6125
6147
|
const inputId = `${value.toString()}_${useId()}`;
|
|
6126
6148
|
const shouldRenderIndependentChildren = label && children;
|
|
6127
6149
|
return (React.createElement("div", null,
|
|
6128
|
-
React.createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles$
|
|
6129
|
-
React.createElement("label", { className: styles$
|
|
6130
|
-
description && (React.createElement("div", { className: styles$
|
|
6150
|
+
React.createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles$a.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
|
|
6151
|
+
React.createElement("label", { className: styles$a.label, htmlFor: inputId }, label ? label : children),
|
|
6152
|
+
description && (React.createElement("div", { className: styles$a.description, id: `${inputId}_description` },
|
|
6131
6153
|
React.createElement(Text, { variation: "subdued", size: "small" }, description))),
|
|
6132
|
-
shouldRenderIndependentChildren && (React.createElement("div", { className: styles$
|
|
6154
|
+
shouldRenderIndependentChildren && (React.createElement("div", { className: styles$a.children, id: `${inputId}_children` }, children))));
|
|
6133
6155
|
function handleChange() {
|
|
6134
6156
|
onChange(value);
|
|
6135
6157
|
}
|
|
6136
6158
|
}
|
|
6137
6159
|
|
|
6138
6160
|
function RadioGroup({ children, value, ariaLabel, onChange, name = useId(), }) {
|
|
6139
|
-
return (React.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles$
|
|
6161
|
+
return (React.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles$a.radioGroup }, React.Children.map(children, option => (React.createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
|
|
6140
6162
|
function handleChange(newValue) {
|
|
6141
6163
|
if (newValue !== value) {
|
|
6142
6164
|
onChange(newValue);
|
|
@@ -6144,13 +6166,13 @@ function RadioGroup({ children, value, ariaLabel, onChange, name = useId(), }) {
|
|
|
6144
6166
|
}
|
|
6145
6167
|
}
|
|
6146
6168
|
|
|
6147
|
-
var css_248z$
|
|
6148
|
-
var styles$
|
|
6149
|
-
styleInject(css_248z$
|
|
6169
|
+
var css_248z$a = ".NfsRidfuJts- {\n display: grid;\n width: 100%;\n padding: var(--space-smaller);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-large);\n grid-template-columns: repeat(7, 1fr);\n grid-row-gap: var(--space-smaller);\n row-gap: var(--space-smaller);\n -webkit-column-gap: var(--space-smaller);\n -moz-column-gap: var(--space-smaller);\n grid-column-gap: var(--space-smaller);\n column-gap: var(--space-smaller);\n}\n";
|
|
6170
|
+
var styles$9 = {"container":"NfsRidfuJts-"};
|
|
6171
|
+
styleInject(css_248z$a);
|
|
6150
6172
|
|
|
6151
|
-
var css_248z$
|
|
6173
|
+
var css_248z$9 = ".GXNuQVAsUqs- {\n position: relative;\n}\n\n/* kept present but hidden for accessibility */\n\n.PtlN3SI-Atc- {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n}\n\n.VPZ0Os9TY5k- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n padding: var(--space-smaller);\n border-radius: var(--radius-large);\n text-align: center;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background: var(--color-surface);\n transition: var(--timing-base);\n}\n\n@supports (aspect-ratio: 1/1) {\n .VPZ0Os9TY5k- {\n /*\n * disabling property-no-unknown here as this is a real property\n * that stylelint just doesn't know about. We may be able to remove\n * this when we update our stylelint to not care about IE11.\n */\n /* stylelint-disable-next-line property-no-unknown */\n aspect-ratio: 1/1;\n }\n}\n\n.VPZ0Os9TY5k-:hover {\n background: var(--color-surface--hover);\n}\n\n.PtlN3SI-Atc-:focus + .VPZ0Os9TY5k- {\n box-shadow: var(--shadow-focus);\n background: var(--color-surface--hover);\n}\n\n.PtlN3SI-Atc-:checked + .VPZ0Os9TY5k- {\n color: var(--color-text--reverse);\n background: var(--color-interactive);\n}\n\n.PtlN3SI-Atc-:disabled + .VPZ0Os9TY5k- {\n color: var(--color-disabled);\n background: var(--color-surface--background);\n cursor: default;\n}\n\n.PtlN3SI-Atc-:enabled + .VPZ0Os9TY5k- {\n cursor: pointer;\n}\n\n.PtlN3SI-Atc-:checked:focus + .VPZ0Os9TY5k- {\n background: var(--color-interactive--hover);\n}\n\n.PtlN3SI-Atc-:checked + .VPZ0Os9TY5k-:hover {\n background: var(--color-interactive--hover);\n}\n\n.PtlN3SI-Atc-:disabled:checked + .VPZ0Os9TY5k- {\n color: var(--color-disabled--secondary);\n background: var(--color-disabled);\n}\n";
|
|
6152
6174
|
var checkboxStyles = {"checkboxWrapper":"GXNuQVAsUqs-","dayCheckboxInput":"PtlN3SI-Atc-","dayCheckbox":"VPZ0Os9TY5k-"};
|
|
6153
|
-
styleInject(css_248z$
|
|
6175
|
+
styleInject(css_248z$9);
|
|
6154
6176
|
|
|
6155
6177
|
var WeekDay;
|
|
6156
6178
|
(function (WeekDay) {
|
|
@@ -6212,7 +6234,7 @@ function WeeklySelect({ onChange, selectedDays, disabled, }) {
|
|
|
6212
6234
|
}
|
|
6213
6235
|
onChange(next);
|
|
6214
6236
|
};
|
|
6215
|
-
return (React.createElement("div", { className: styles$
|
|
6237
|
+
return (React.createElement("div", { className: styles$9.container }, weekDays.map(weekDay => {
|
|
6216
6238
|
const isSelected = selectedDays.has(weekDay);
|
|
6217
6239
|
const inputId = useId();
|
|
6218
6240
|
return (React.createElement("div", { key: `${weekDay}`, className: checkboxStyles.checkboxWrapper },
|
|
@@ -6221,43 +6243,43 @@ function WeeklySelect({ onChange, selectedDays, disabled, }) {
|
|
|
6221
6243
|
})));
|
|
6222
6244
|
}
|
|
6223
6245
|
|
|
6224
|
-
var css_248z$
|
|
6225
|
-
var styles$
|
|
6226
|
-
styleInject(css_248z$
|
|
6246
|
+
var css_248z$8 = ".PW6L4PJe5TY- div[role=\"radiogroup\"] {\n -ms-flex-direction: row;\n flex-direction: row;\n}\n\n.PW6L4PJe5TY- label {\n margin-right: var(--space-base);\n}\n";
|
|
6247
|
+
var styles$8 = {"radioContainer":"PW6L4PJe5TY-"};
|
|
6248
|
+
styleInject(css_248z$8);
|
|
6227
6249
|
|
|
6228
6250
|
function MonthlySelect({ disabled, onChange, selectedMonthOption, }) {
|
|
6229
|
-
return (React.createElement("div", { className: styles$
|
|
6251
|
+
return (React.createElement("div", { className: styles$8.radioContainer },
|
|
6230
6252
|
React.createElement(RadioGroup, { ariaLabel: "Monthly Frequency Selector", onChange: onChange, value: selectedMonthOption },
|
|
6231
6253
|
React.createElement(RadioOption, { disabled: disabled, value: DurationPeriod.DayOfMonth, label: "Day of month" }),
|
|
6232
6254
|
React.createElement(RadioOption, { disabled: disabled, value: DurationPeriod.WeekDayOfMonth, label: "Day of week" }))));
|
|
6233
6255
|
}
|
|
6234
6256
|
|
|
6235
|
-
var css_248z$
|
|
6236
|
-
var styles$
|
|
6237
|
-
styleInject(css_248z$
|
|
6257
|
+
var css_248z$7 = ".pqYw6oCVwO8- {\n display: grid;\n grid-template-columns: var(--space-largest) 1fr;\n -ms-flex-align: center;\n align-items: center;\n grid-gap: var(--space-small);\n gap: var(--space-small);\n margin-bottom: calc(-1 * var(--border-base));\n}\n\n.xtCFaHyTmfI- div:nth-of-type(1) :last-child {\n border-top-right-radius: var(--radius-large);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n border-top-left-radius: var(--radius-large);\n}\n\n.xtCFaHyTmfI- div:nth-of-type(2) :last-child {\n border-radius: 0;\n}\n\n.xtCFaHyTmfI- div:nth-of-type(3) :last-child {\n border-radius: 0;\n}\n\n.xtCFaHyTmfI- div:nth-of-type(4) :last-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: var(--radius-large);\n border-bottom-left-radius: var(--radius-large);\n border-top-left-radius: 0;\n}\n";
|
|
6258
|
+
var styles$7 = {"container":"pqYw6oCVwO8-","parentContainer":"xtCFaHyTmfI-"};
|
|
6259
|
+
styleInject(css_248z$7);
|
|
6238
6260
|
|
|
6239
6261
|
function MonthlyDayOfWeekSelect({ disabled, selectedWeeks, onChange, }) {
|
|
6240
6262
|
const orderString = ["1st", "2nd", "3rd", "4th"];
|
|
6241
|
-
return (React.createElement("div", { className: styles$
|
|
6263
|
+
return (React.createElement("div", { className: styles$7.parentContainer }, selectedWeeks.map((week, index) => {
|
|
6242
6264
|
const onChangeWeek = (weekDay) => {
|
|
6243
6265
|
const next = [...selectedWeeks];
|
|
6244
6266
|
next.splice(index, 1, weekDay);
|
|
6245
6267
|
onChange(next);
|
|
6246
6268
|
};
|
|
6247
|
-
return (React.createElement("div", { className: styles$
|
|
6269
|
+
return (React.createElement("div", { className: styles$7.container, key: `${index}${week}` },
|
|
6248
6270
|
React.createElement(Text, null, `${orderString[index]}`),
|
|
6249
6271
|
React.createElement("div", null,
|
|
6250
6272
|
React.createElement(WeeklySelect, { disabled: disabled, selectedDays: week, onChange: onChangeWeek }))));
|
|
6251
6273
|
})));
|
|
6252
6274
|
}
|
|
6253
6275
|
|
|
6254
|
-
var css_248z$
|
|
6255
|
-
var styles$
|
|
6256
|
-
styleInject(css_248z$
|
|
6276
|
+
var css_248z$6 = ".dBbFx0Vu16U- {\n display: grid;\n width: 100%;\n padding: var(--space-smaller);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-large);\n grid-template-areas:\n \". . . . . . .\"\n \". . . . . . .\"\n \". . . . . . .\"\n \". . . . . . .\"\n \". . . lastday lastday lastday lastday\";\n grid-row-gap: var(--space-smaller);\n row-gap: var(--space-smaller);\n -webkit-column-gap: var(--space-smaller);\n -moz-column-gap: var(--space-smaller);\n grid-column-gap: var(--space-smaller);\n column-gap: var(--space-smaller);\n}\n\n.dBbFx0Vu16U- :last-child {\n grid-area: lastday;\n}\n\n.dBbFx0Vu16U- div:nth-child(n + 1):nth-last-child(-n + 1) label {\n height: 100%;\n}\n\n@supports (aspect-ratio: unset) {\n .dBbFx0Vu16U- div:nth-child(n + 1):nth-last-child(-n + 1) label {\n /*\n * disabling property-no-unknown here as this is a real property\n * that stylelint just doesn't know about. We may be able to remove\n * this when we update our stylelint to not care about IE11.\n */\n /* stylelint-disable-next-line property-no-unknown */\n aspect-ratio: unset;\n }\n}\n";
|
|
6277
|
+
var styles$6 = {"container":"dBbFx0Vu16U-"};
|
|
6278
|
+
styleInject(css_248z$6);
|
|
6257
6279
|
|
|
6258
6280
|
const daysInMonth = [...Array.from({ length: 31 }, (_, i) => i + 1), "LAST"];
|
|
6259
6281
|
function DayOfMonthSelect({ selectedDays, disabled, onChange, }) {
|
|
6260
|
-
return (React.createElement("div", { className: styles$
|
|
6282
|
+
return (React.createElement("div", { className: styles$6.container }, daysInMonth.map(day => {
|
|
6261
6283
|
const isSelected = selectedDays.has(day);
|
|
6262
6284
|
const inputId = useId();
|
|
6263
6285
|
return (React.createElement("div", { key: `${day}`, className: checkboxStyles.checkboxWrapper },
|
|
@@ -6304,9 +6326,9 @@ function CurrentRecurrenceComponent({ recurrenceRule, disabled = false, onChange
|
|
|
6304
6326
|
}
|
|
6305
6327
|
}
|
|
6306
6328
|
|
|
6307
|
-
var css_248z$
|
|
6308
|
-
var styles$
|
|
6309
|
-
styleInject(css_248z$
|
|
6329
|
+
var css_248z$5 = ".ANBCH37jH0k- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n gap: var(--space-base);\n}\n\n.ZV0GgII8eWQ- {\n width: 100%;\n}\n";
|
|
6330
|
+
var styles$5 = {"container":"ANBCH37jH0k-","fullWidthWrapper":"ZV0GgII8eWQ-"};
|
|
6331
|
+
styleInject(css_248z$5);
|
|
6310
6332
|
|
|
6311
6333
|
function RecurringSelect({ value, disabled = false, onChange, }) {
|
|
6312
6334
|
const disabledTextVariation = disabled ? "disabled" : undefined;
|
|
@@ -6319,9 +6341,9 @@ function RecurringSelect({ value, disabled = false, onChange, }) {
|
|
|
6319
6341
|
value.type === DurationPeriod.DayOfMonth ||
|
|
6320
6342
|
value.type === DurationPeriod.Week;
|
|
6321
6343
|
return (React.createElement(Content, null,
|
|
6322
|
-
React.createElement("div", { className: styles$
|
|
6344
|
+
React.createElement("div", { className: styles$5.container },
|
|
6323
6345
|
React.createElement(Text, { variation: disabledTextVariation }, "Every"),
|
|
6324
|
-
React.createElement("div", { className: styles$
|
|
6346
|
+
React.createElement("div", { className: styles$5.fullWidthWrapper },
|
|
6325
6347
|
React.createElement(InputGroup, { flowDirection: "horizontal" },
|
|
6326
6348
|
React.createElement(InputNumber, { disabled: disabled, name: "schedule-recurrence-interval", value: value.interval, min: 1, maxLength: 3, onChange: onChangeInterval }),
|
|
6327
6349
|
React.createElement(Select, { disabled: disabled, value: value.type, onChange: onChangeType, name: "schedule-recurrence-type" },
|
|
@@ -6340,26 +6362,62 @@ function RecurringSelect({ value, disabled = false, onChange, }) {
|
|
|
6340
6362
|
}
|
|
6341
6363
|
}
|
|
6342
6364
|
|
|
6343
|
-
var css_248z$
|
|
6344
|
-
var styles$
|
|
6345
|
-
styleInject(css_248z$
|
|
6365
|
+
var css_248z$4 = ":root {\n --statusLabel-icon-diameter: 10px;\n}\n\n.MB0ycTR4PHg- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n gap: var(--space-small);\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.fNl6zDhsox0- {\n width: 10px;\n width: var(--statusLabel-icon-diameter);\n height: 10px;\n height: var(--statusLabel-icon-diameter);\n margin-top: var(--space-minuscule);\n border-radius: 3px;\n background-color: var(--color-success);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n._0kNfkSPBETw- {\n -ms-flex-direction: row-reverse;\n flex-direction: row-reverse;\n}\n";
|
|
6366
|
+
var styles$4 = {"statusLabelRow":"MB0ycTR4PHg-","statusIndicator":"fNl6zDhsox0-","labelTextEndAligned":"_0kNfkSPBETw-"};
|
|
6367
|
+
styleInject(css_248z$4);
|
|
6346
6368
|
|
|
6347
6369
|
function StatusLabel({ label, alignment = "start", status = "inactive", }) {
|
|
6348
|
-
const containerClassNames = classnames(styles$
|
|
6370
|
+
const containerClassNames = classnames(styles$4.statusLabelRow, alignment === "end" && styles$4.labelTextEndAligned);
|
|
6349
6371
|
return (React.createElement("div", { role: "status", className: containerClassNames },
|
|
6350
6372
|
React.createElement(StatusLabelIcon, { status: status }),
|
|
6351
6373
|
React.createElement(Text, { size: "small", align: alignment }, label)));
|
|
6352
6374
|
}
|
|
6353
6375
|
function StatusLabelIcon({ status }) {
|
|
6354
|
-
return (React.createElement("div", { style: { backgroundColor: `var(--color-${status}` }, className: styles$
|
|
6376
|
+
return (React.createElement("div", { style: { backgroundColor: `var(--color-${status}` }, className: styles$4.statusIndicator }));
|
|
6355
6377
|
}
|
|
6356
6378
|
|
|
6357
|
-
var css_248z$
|
|
6358
|
-
var styles$
|
|
6359
|
-
styleInject(css_248z$
|
|
6379
|
+
var css_248z$3 = ".gFY9BLPF808- {\n --border-color: var(--color-border);\n --header-border-color: var(--color-border--section);\n --horizontal-inset: var(--space-base);\n position: relative;\n width: 100%;\n border-collapse: collapse;\n}\n\n.gFY9BLPF808-::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: solid var(--border-base) var(--border-color);\n border-radius: var(--radius-base);\n pointer-events: none;\n}\n\n.NZbmlKVakYo-:not(:last-child) {\n border-bottom: solid var(--border-base) var(--border-color);\n}\n\n._72-uJqZ5jGE- .NZbmlKVakYo- {\n border-bottom: solid var(--border-base) var(--header-border-color);\n font-weight: bold;\n text-transform: uppercase;\n}\n\n.fEVdTCw9eOU- .NZbmlKVakYo- {\n border-top: solid var(--border-thicker) var(--border-color);\n}\n";
|
|
6380
|
+
var styles$3 = {"table":"gFY9BLPF808-","row":"NZbmlKVakYo-","header":"_72-uJqZ5jGE-","footer":"fEVdTCw9eOU-"};
|
|
6381
|
+
styleInject(css_248z$3);
|
|
6360
6382
|
|
|
6361
6383
|
function Table({ children }) {
|
|
6362
|
-
return React.createElement("table", { className: styles$
|
|
6384
|
+
return React.createElement("table", { className: styles$3.table }, children);
|
|
6385
|
+
}
|
|
6386
|
+
|
|
6387
|
+
function Row({ children }) {
|
|
6388
|
+
return React.createElement("tr", { className: styles$3.row }, children);
|
|
6389
|
+
}
|
|
6390
|
+
|
|
6391
|
+
function Header({ children }) {
|
|
6392
|
+
return (React.createElement("thead", { className: styles$3.header },
|
|
6393
|
+
React.createElement(Row, null, children)));
|
|
6394
|
+
}
|
|
6395
|
+
|
|
6396
|
+
var css_248z$2 = ".xibCW9zSMXU- {\n padding: var(--horizontal-inset) calc(var(--horizontal-inset) / 2);\n text-align: left;\n}\n\n.SD8FBgvYMQg- {\n text-align: left;\n}\n\n._5VZpkU0Gu40- {\n text-align: center;\n}\n\n.DNPkTtpA-8g- {\n text-align: right;\n}\n\n._5EfJs7A9kEg- {\n -webkit-font-feature-settings: \"tnum\";\n font-feature-settings: \"tnum\";\n}\n\n.xibCW9zSMXU-:first-child {\n padding-left: var(--horizontal-inset);\n}\n\n.xibCW9zSMXU-:last-child {\n padding-right: var(--horizontal-inset);\n}\n";
|
|
6397
|
+
var styles$2 = {"cell":"xibCW9zSMXU-","left":"SD8FBgvYMQg-","center":"_5VZpkU0Gu40-","right":"DNPkTtpA-8g-","numeric":"_5EfJs7A9kEg-"};
|
|
6398
|
+
styleInject(css_248z$2);
|
|
6399
|
+
|
|
6400
|
+
function Cell({ children, align = "left" }) {
|
|
6401
|
+
const className = classnames(styles$2.cell, styles$2[align]);
|
|
6402
|
+
return React.createElement("td", { className: className }, children);
|
|
6403
|
+
}
|
|
6404
|
+
|
|
6405
|
+
function Footer({ children }) {
|
|
6406
|
+
return (React.createElement("tfoot", { className: styles$3.footer },
|
|
6407
|
+
React.createElement(Row, null, children)));
|
|
6408
|
+
}
|
|
6409
|
+
|
|
6410
|
+
function Body({ children }) {
|
|
6411
|
+
return React.createElement("tbody", null, children);
|
|
6412
|
+
}
|
|
6413
|
+
|
|
6414
|
+
function CellNumeric({ value }) {
|
|
6415
|
+
return (React.createElement(Cell, { align: "right" },
|
|
6416
|
+
React.createElement("span", { className: styles$2.numeric }, value.toString())));
|
|
6417
|
+
}
|
|
6418
|
+
|
|
6419
|
+
function CellCurrency({ value, currency = undefined, }) {
|
|
6420
|
+
return React.createElement(CellNumeric, { value: formatCurrency(value, currency) });
|
|
6363
6421
|
}
|
|
6364
6422
|
|
|
6365
6423
|
var css_248z$1 = ":root {\n --tab--height: calc(var(--space-larger) + var(--space-small));\n --tab--inset: var(--space-base);\n --public-tab--inset: var(--tab--inset);\n}\n\n.-kxlqXO5UN0- {\n display: block;\n width: 100%;\n}\n\n.qI4lWMSNH40- {\n position: relative;\n border-bottom: solid var(--border-base) var(--color-border);\n}\n\n.xohIah5wcoE-:after,\n.qnY4S9sz-8g-:before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 24px;\n}\n\n.xohIah5wcoE-:after {\n right: 0;\n box-shadow: inset -16px 0 16px -16px rgba(var(--color-black--rgb), 0.25);\n}\n\n.qnY4S9sz-8g-:before {\n left: 0;\n box-shadow: inset 16px 0 16px -16px rgba(var(--color-black--rgb), 0.25);\n}\n\n.wdW31G8Trag- {\n display: -ms-flexbox;\n display: flex;\n margin: 0;\n margin-bottom: calc(-1 * var(--border-base));\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n}\n\nul.wdW31G8Trag- {\n -webkit-padding-start: 0;\n padding-left: 0;\n}\n\n.wdW31G8Trag- li {\n display: -ms-flexbox;\n display: flex;\n list-style: none;\n}\n\n.MO7CXQ8xJXo- {\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n height: calc(var(--space-larger) + var(--space-small));\n height: var(--tab--height);\n margin: 0;\n padding-left: var(--space-base);\n padding-left: var(--public-tab--inset);\n padding-right: var(--space-base);\n padding-right: var(--public-tab--inset);\n border: solid var(--border-base) var(--color-border);\n border-left-width: 0;\n outline: none;\n background: var(--color-surface);\n cursor: pointer;\n transition: all var(--timing-base);\n}\n\n.MO7CXQ8xJXo-:hover,\n.MO7CXQ8xJXo-:focus {\n background-color: var(--color-surface--hover);\n}\n\n.MO7CXQ8xJXo-:focus span {\n box-shadow: var(--shadow-focus);\n}\n\n.kqof65gyv7g- {\n border-top-color: var(--color-interactive);\n border-bottom-color: var(--color-surface);\n}\n\n.kqof65gyv7g-:focus {\n background-color: transparent;\n}\n\n.AimQioztR1U- {\n padding-top: var(--space-base);\n padding-top: var(--tab--inset);\n padding-bottom: var(--space-base);\n padding-bottom: var(--tab--inset);\n padding-left: var(--space-base);\n padding-left: var(--public-tab--inset);\n padding-right: var(--space-base);\n padding-right: var(--public-tab--inset);\n}\n";
|
|
@@ -6476,4 +6534,42 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
|
|
|
6476
6534
|
}
|
|
6477
6535
|
}
|
|
6478
6536
|
|
|
6479
|
-
|
|
6537
|
+
const targetId = "atlantis-toast-element";
|
|
6538
|
+
let target = document.querySelector(`#${targetId}`);
|
|
6539
|
+
if (!target) {
|
|
6540
|
+
target = document.createElement("div");
|
|
6541
|
+
target.id = targetId;
|
|
6542
|
+
target.classList.add(styles.wrapper);
|
|
6543
|
+
document.body.appendChild(target);
|
|
6544
|
+
}
|
|
6545
|
+
const root = createRoot(target);
|
|
6546
|
+
function showToast(props) {
|
|
6547
|
+
// Ensure target and body is still there when rendering the toast. This is due
|
|
6548
|
+
// to an issue with ReactDOM createRoot assuming document is always there and
|
|
6549
|
+
// Jest taking the document down.
|
|
6550
|
+
if (document.body.contains(target)) {
|
|
6551
|
+
root.render(React.createElement(ToasterOven, Object.assign({}, props)));
|
|
6552
|
+
}
|
|
6553
|
+
}
|
|
6554
|
+
const ToastContainer = forwardRef(ToastInternal);
|
|
6555
|
+
function ToasterOven(props) {
|
|
6556
|
+
const toastRef = useRef();
|
|
6557
|
+
useEffect(() => toastRef.current.add(props));
|
|
6558
|
+
return React.createElement(ToastContainer, { ref: toastRef });
|
|
6559
|
+
}
|
|
6560
|
+
function ToastInternal(_, ref) {
|
|
6561
|
+
const [toastKey, setToastKey] = useState(0);
|
|
6562
|
+
const [toasts, setToasts] = useState([]);
|
|
6563
|
+
useImperativeHandle(ref, () => ({
|
|
6564
|
+
add: props => {
|
|
6565
|
+
setToastKey(toastKey + 1);
|
|
6566
|
+
setToasts([
|
|
6567
|
+
Object.assign(Object.assign({}, props), { id: toastKey }),
|
|
6568
|
+
...toasts,
|
|
6569
|
+
]);
|
|
6570
|
+
},
|
|
6571
|
+
}));
|
|
6572
|
+
return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
|
|
6573
|
+
}
|
|
6574
|
+
|
|
6575
|
+
export { AnimatedPresence, AnimatedSwitcher, Autocomplete, Avatar, Banner, Body, Button, ButtonDismiss, Card, Cell, CellCurrency, CellNumeric, Checkbox, Chip, Chips, Combobox, ConfirmationModal, Content, Countdown, DataDump, DataList, DataTable, DatePicker, DescriptionList, Disclosure, Divider, Drawer, Emphasis, FeatureSwitch, Flex, Footer, Form, FormField, FormatDate, FormatEmail, FormatFile, FormatRelativeDateTime, FormatTime, Gallery, Glimmer, Grid, Header, Heading, Icon, InlineLabel, InputAvatar, InputDate, InputEmail, InputFile, InputGroup, InputNumber, InputPassword, InputPhoneNumber, InputText, InputTime, InputValidation, LightBox, Link, List, ListItem, Markdown, Menu, Modal, MultiSelect, SelectOption as Option, Page, Popover, ProgressBar, RadioGroup, RadioOption, RecurringSelect, Row, Select, Spinner, StatusLabel, Switch, Table, Tabs, Text, Toast, Tooltip, Typography, showToast, strFormatDate$1 as strFormatDate, updateFiles };
|