@cakemail-org/ui-components-v2 2.2.124 → 2.2.125
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/dist/cjs/components/index.d.ts +4 -0
- package/dist/cjs/components/resourceCard/ResourceCardGrid.d.ts +5 -0
- package/dist/cjs/components/resourceCard/gridTypes.d.ts +14 -0
- package/dist/cjs/components/resourceCard/index.d.ts +5 -0
- package/dist/cjs/components/resourceCard/types.d.ts +18 -0
- package/dist/cjs/index.js +200 -62
- package/dist/esm/components/index.d.ts +4 -0
- package/dist/esm/components/resourceCard/ResourceCardGrid.d.ts +5 -0
- package/dist/esm/components/resourceCard/gridTypes.d.ts +14 -0
- package/dist/esm/components/resourceCard/index.d.ts +5 -0
- package/dist/esm/components/resourceCard/types.d.ts +18 -0
- package/dist/esm/index.js +198 -63
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -6506,8 +6506,8 @@ function styleInject(css, ref) {
|
|
|
6506
6506
|
}
|
|
6507
6507
|
}
|
|
6508
6508
|
|
|
6509
|
-
var css_248z$
|
|
6510
|
-
styleInject(css_248z$
|
|
6509
|
+
var css_248z$B = ".actionBarContainer-component-v2 {\n left: 0;\n position: fixed;\n z-index: 8999;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n pointer-events: none;\n}\n.actionBarContainer-component-v2:not(.open) {\n display: none;\n}\n.actionBarContainer-component-v2.open {\n display: flex;\n}\n.actionBarContainer-component-v2.bottom {\n bottom: 2rem;\n}\n.actionBarContainer-component-v2.bottom .barsContainer > * {\n margin-top: 1rem;\n}\n.actionBarContainer-component-v2.top {\n top: 2rem;\n}\n.actionBarContainer-component-v2.top .barsContainer > * {\n margin-bottom: 1rem;\n}\n.actionBarContainer-component-v2 .barsContainer {\n pointer-events: all;\n min-width: -moz-max-content;\n min-width: max-content;\n}\n.actionBarContainer-component-v2 .barsContainer > * {\n max-width: unset;\n}\n.actionBarContainer-component-v2 .barsContainer > *:not(.manualContent) {\n border-radius: 8px;\n background-color: var(--white, #FFFFFF);\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n padding: 1.5rem;\n min-width: 29rem;\n box-sizing: border-box;\n}\n.actionBarContainer-component-v2 .barsContainer > * .fullBar-component > .left > div:not(:first-child) {\n margin-left: 1rem;\n}\n.actionBarContainer-component-v2 .barsContainer > * .fullBar-component > .middle,\n.actionBarContainer-component-v2 .barsContainer > * .fullBar-component > .right {\n margin-left: 3rem;\n}\n.actionBarContainer-component-v2 .barsContainer > * .fullBar-component > .middle > div:first-child,\n.actionBarContainer-component-v2 .barsContainer > * .fullBar-component > .right > div:first-child {\n margin-right: 0;\n}\n.actionBarContainer-component-v2 .barsContainer > * .fullBar-component > .middle > div:not(:first-child),\n.actionBarContainer-component-v2 .barsContainer > * .fullBar-component > .right > div:not(:first-child) {\n margin-left: 0.75rem;\n}\n.actionBarContainer-component-v2 .barsContainer > * p,\n.actionBarContainer-component-v2 .barsContainer > * button {\n white-space: nowrap;\n}";
|
|
6510
|
+
styleInject(css_248z$B);
|
|
6511
6511
|
|
|
6512
6512
|
var ActionBarContainer = React.forwardRef(function (props, ref) {
|
|
6513
6513
|
var refState = React.useRef({ open: false });
|
|
@@ -7703,8 +7703,8 @@ function Icon(_a) {
|
|
|
7703
7703
|
return React.createElement(React.Fragment, null, Component ? React.createElement(SvgIcon, __assign({ fontSize: fontSize, sx: __assign(__assign({}, sx), csx) }, iconProps, { component: Component })) : "");
|
|
7704
7704
|
}
|
|
7705
7705
|
|
|
7706
|
-
var css_248z$
|
|
7707
|
-
styleInject(css_248z$
|
|
7706
|
+
var css_248z$A = ".circulatProgress-component-v2.content {\n flex: 1;\n}\n.circulatProgress-component-v2.container {\n position: absolute;\n}\n.circulatProgress-component-v2.page {\n position: fixed;\n}\n.circulatProgress-component-v2.page, .circulatProgress-component-v2.container {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.circulatProgress-component-v2.content, .circulatProgress-component-v2.container, .circulatProgress-component-v2.page {\n display: flex;\n align-items: center;\n justify-content: center;\n}";
|
|
7707
|
+
styleInject(css_248z$A);
|
|
7708
7708
|
|
|
7709
7709
|
function CircularProgress(_a) {
|
|
7710
7710
|
var color = _a.color, _b = _a.location, location = _b === void 0 ? "default" : _b, props = __rest(_a, ["color", "location"]);
|
|
@@ -7718,8 +7718,8 @@ function LinearProgress(_a) {
|
|
|
7718
7718
|
return React.createElement(material.LinearProgress, __assign({}, props, { color: color, className: classes }));
|
|
7719
7719
|
}
|
|
7720
7720
|
|
|
7721
|
-
var css_248z$
|
|
7722
|
-
styleInject(css_248z$
|
|
7721
|
+
var css_248z$z = ".loadingContainer-component-v2.keepChildren {\n position: relative;\n}\n.loadingContainer-component-v2.keepChildren .hiddenChildren {\n visibility: hidden;\n}\n.loadingContainer-component-v2.keepChildren .circulatProgress-component-v2,\n.loadingContainer-component-v2.keepChildren .MuiLinearProgress-root {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
7722
|
+
styleInject(css_248z$z);
|
|
7723
7723
|
|
|
7724
7724
|
function LoadingContainer(_a) {
|
|
7725
7725
|
var _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? "circular" : _c, width = _a.width, _d = _a.className, className = _d === void 0 ? "" : _d, keepChildren = _a.keepChildren, // Works with contenet not in iframes
|
|
@@ -7742,8 +7742,8 @@ function LoadingContainer(_a) {
|
|
|
7742
7742
|
React.createElement(Container, { className: "loadingContainer-component-v2 ".concat(className), sx: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loader)));
|
|
7743
7743
|
}
|
|
7744
7744
|
|
|
7745
|
-
var css_248z$
|
|
7746
|
-
styleInject(css_248z$
|
|
7745
|
+
var css_248z$y = ".textfield-component-v2 {\n position: relative;\n}\n.textfield-component-v2.small .MuiSvgIcon-root {\n top: 1.4rem !important;\n}\n.textfield-component-v2.disabled {\n opacity: 0.65;\n pointer-events: none;\n}\n.textfield-component-v2 .MuiSvgIcon-root ~ .MuiFormControl-root .MuiInputBase-input {\n padding-left: 42px;\n}\n.textfield-component-v2 .MuiSvgIcon-root {\n position: absolute;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.locationTextField-component-v2 {\n position: relative;\n}\n.locationTextField-component-v2 .autocomplete-dropdown-container {\n position: absolute;\n width: 100%;\n z-index: 10000;\n}\n\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-select {\n padding-right: 1.75rem !important;\n}\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-icon {\n display: inline-block;\n right: 0.5rem;\n}\n\n.react-international-phone-flag-emoji {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.colorTextField-component-v2 {\n position: relative;\n}\n.colorTextField-component-v2 .boxedColor {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n.colorTextField-component-v2 .boxedColor .MuiSvgIcon-root {\n width: unset;\n height: unset;\n}\n.colorTextField-component-v2 .boxedColor::after {\n position: absolute;\n width: 6px;\n height: 6px;\n content: \"\";\n background-color: var(--white, #FFFFFF);\n border-radius: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.colorTextField-component-v2 .boxedColor ~ .textfield-component-v2 .MuiInputBase-input {\n padding-left: 44px;\n}\n.colorTextField-component-v2.bottom .react-colorful {\n top: 3.5rem;\n}\n.colorTextField-component-v2.top .react-colorful {\n bottom: 4rem;\n}\n.colorTextField-component-v2 .react-colorful {\n width: 100%;\n position: absolute;\n}";
|
|
7746
|
+
styleInject(css_248z$y);
|
|
7747
7747
|
|
|
7748
7748
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
7749
7749
|
var _b = _a.className, className = _b === void 0 ? "" : _b, label = _a.label, timeout = _a.timeout, labelTooltipText = _a.labelTooltipText, disabled = _a.disabled, useBareBoneInput = _a.useBareBoneInput, onChange = _a.onChange, multiline = _a.multiline, inputProps = _a.inputProps, iconName = _a.iconName, onKeyDown = _a.onKeyDown, size = _a.size, props = __rest(_a, ["className", "label", "timeout", "labelTooltipText", "disabled", "useBareBoneInput", "onChange", "multiline", "inputProps", "iconName", "onKeyDown", "size"]);
|
|
@@ -7798,8 +7798,8 @@ var TextField = React.forwardRef(function (_a, ref) {
|
|
|
7798
7798
|
React.createElement(MUITextField, __assign({}, props, { inputProps: inputProps, onChange: useBareBoneInput ? onChange : onChangeHandler, label: cLabel, disabled: disabled, onKeyDown: handleKeyDown, multiline: multiline, inputRef: ref, size: size })));
|
|
7799
7799
|
});
|
|
7800
7800
|
|
|
7801
|
-
var css_248z$
|
|
7802
|
-
styleInject(css_248z$
|
|
7801
|
+
var css_248z$x = ".assetmanager-component-v2 {\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n background: var(--background-color-1, var(--white, #FFFFFF));\n min-width: 25rem;\n width: 100%;\n}\n.assetmanager-component-v2 .loadingContainer-component-v2 {\n padding: 3rem;\n}\n.assetmanager-component-v2 .container {\n padding: 0.75rem;\n}\n.assetmanager-component-v2 .container > div.textInputContainer {\n display: flex;\n border: solid 1px var(--wild-sand, #dddddd);\n border-radius: 6px;\n justify-content: flex-start;\n align-items: center;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div .MuiSvgIcon-root {\n display: block;\n cursor: pointer;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div:first-child {\n padding: 0 0.75rem 0 0.75rem;\n height: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div:last-child:not(.textfield-component-v2) {\n padding: 0 0.875rem;\n height: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 {\n width: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 fieldset {\n outline: none !important;\n border: none !important;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 input {\n padding: 0.5rem 0 !important;\n}\n.assetmanager-component-v2 .container .optionsListingContainer {\n padding: 0 1.25rem 0.5rem 1.25rem;\n margin: 1.25rem 0 0.5rem 0;\n max-height: 20rem;\n overflow-y: auto;\n}\n.assetmanager-component-v2 .container .optionsListingContainer button {\n text-transform: capitalize;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar {\n display: block;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track:horizontal {\n position: absolute;\n bottom: -20px;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track:vertical {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 8px !important;\n border-top-right-radius: 8px !important;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track {\n height: 2.5rem;\n width: 2.5rem;\n padding: 2rem;\n background-clip: content-box;\n border-bottom-left-radius: 8px;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-thumb {\n background: var(--body-font-color-2, var(--silver, #9B9B9B));\n border-radius: 24px;\n border-top: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-bottom: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-right: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-left: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n}\n.assetmanager-component-v2 .container .optionsListingContainer > div:first-child:not(.listItem) {\n padding-bottom: 0.75rem;\n text-transform: uppercase;\n font-weight: 700;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.assetmanager-component-v2 .container .optionsListingContainer > p.h8 {\n margin-bottom: 1rem;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.assetmanager-component-v2 .container .optionsListingContainer p.h8 {\n flex: 1;\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n text-transform: uppercase;\n font-weight: 700;\n line-height: 1rem;\n font-size: 0.75rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem {\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: 2rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem p.h8 {\n color: var(--body-font-color-2, var(--silver, #9B9B9B));\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem > .MuiSvgIcon-root {\n margin-right: 1rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem.selected p.h8 {\n color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n padding-right: 1rem;\n max-width: 100%;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem.selected .MuiSvgIcon-root span svg path {\n fill: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem .buttonContainer {\n margin-left: 1rem;\n visibility: hidden;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem .buttonContainer button:nth-child(2) {\n margin-left: 0.5rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem:hover .buttonContainer {\n visibility: visible;\n}\n.assetmanager-component-v2 > button:last-child {\n width: 100%;\n text-transform: uppercase;\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n height: 3rem;\n border-top: 1px solid var(--wild-sand, #dddddd) !important;\n outline: none;\n border-radius: 0;\n font-weight: 700;\n}";
|
|
7802
|
+
styleInject(css_248z$x);
|
|
7803
7803
|
|
|
7804
7804
|
exports.EAssetManagerMatchType = void 0;
|
|
7805
7805
|
(function (EAssetManagerMatchType) {
|
|
@@ -8277,8 +8277,8 @@ function DialogTitle(_a) {
|
|
|
8277
8277
|
React.createElement(Typography, { className: className, variant: variant }, children));
|
|
8278
8278
|
}
|
|
8279
8279
|
|
|
8280
|
-
var css_248z$
|
|
8281
|
-
styleInject(css_248z$
|
|
8280
|
+
var css_248z$w = ".dialog-component-v2 {\n box-sizing: border-box;\n z-index: 9000 !important;\n}\n.dialog-component-v2.alert {\n pointer-events: none;\n}\n.dialog-component-v2.alert .MuiBackdrop-root {\n display: none;\n}\n.dialog-component-v2.alert > .MuiDialog-container > .MuiPaper-root {\n border-radius: 8px;\n pointer-events: all;\n width: -moz-max-content;\n width: max-content;\n padding: 1rem;\n}\n.dialog-component-v2.alert > .MuiDialog-container > .MuiPaper-root .MuiDialogContent-root {\n text-align: left;\n padding: 0.25rem 0 0;\n}\n.dialog-component-v2:not(.alert) > .MuiDialog-container > .MuiPaper-root {\n border-radius: 16px;\n max-width: 500px;\n width: 100%;\n max-height: calc(100vh - 2rem);\n padding: 2rem;\n}\n.dialog-component-v2:not(.alert) > .MuiDialog-container > .MuiPaper-root::-webkit-scrollbar {\n display: block;\n}\n.dialog-component-v2:not(.alert) > .MuiDialog-container > .MuiPaper-root::-webkit-scrollbar-track:horizontal {\n position: absolute;\n bottom: -20px;\n}\n.dialog-component-v2:not(.alert) > .MuiDialog-container > .MuiPaper-root::-webkit-scrollbar-track:vertical {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 8px !important;\n border-top-right-radius: 8px !important;\n}\n.dialog-component-v2:not(.alert) > .MuiDialog-container > .MuiPaper-root::-webkit-scrollbar-track {\n height: 2.5rem;\n width: 2.5rem;\n padding: 2rem;\n background-clip: content-box;\n border-bottom-left-radius: 8px;\n}\n.dialog-component-v2:not(.alert) > .MuiDialog-container > .MuiPaper-root::-webkit-scrollbar-thumb {\n background: var(--body-font-color-2, var(--silver, #9B9B9B));\n border-radius: 24px;\n border-top: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-bottom: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-right: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-left: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n}\n.dialog-component-v2 .dialogTitle .MuiSvgIcon-root {\n margin-right: 0.75rem;\n}\n.dialog-component-v2 .dialogTitle.warning .MuiSvgIcon-root path {\n fill: var(--warning-brand-color, var(--orange, #FF9E0E));\n}\n.dialog-component-v2 .dialogTitle.error .MuiSvgIcon-root path {\n fill: var(--error-brand-color, var(--rad-red, #FF4835));\n}\n.dialog-component-v2 .dialogTitle.success .MuiSvgIcon-root path {\n fill: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}";
|
|
8281
|
+
styleInject(css_248z$w);
|
|
8282
8282
|
|
|
8283
8283
|
var Dialog = React.forwardRef(function (props, ref) {
|
|
8284
8284
|
var refState = React.useRef({ open: false });
|
|
@@ -8368,8 +8368,8 @@ var Dialog = React.forwardRef(function (props, ref) {
|
|
|
8368
8368
|
!state.managedByContent && props.children);
|
|
8369
8369
|
});
|
|
8370
8370
|
|
|
8371
|
-
var css_248z$
|
|
8372
|
-
styleInject(css_248z$
|
|
8371
|
+
var css_248z$v = "";
|
|
8372
|
+
styleInject(css_248z$v);
|
|
8373
8373
|
|
|
8374
8374
|
var Drawer = React.forwardRef(function (props, ref) {
|
|
8375
8375
|
var _a = React.useState(props.open || false), isOpen = _a[0], setIsOpen = _a[1];
|
|
@@ -8416,16 +8416,16 @@ var Drawer = React.forwardRef(function (props, ref) {
|
|
|
8416
8416
|
return React.createElement(MuiDrawer, { open: isOpen, variant: state.variant, onClose: handleClose, className: "drawer-component-v2 ".concat(state.className), anchor: state.position, transitionDuration: state.transitionDuration }, props.children || state.children);
|
|
8417
8417
|
});
|
|
8418
8418
|
|
|
8419
|
-
var css_248z$
|
|
8420
|
-
styleInject(css_248z$
|
|
8419
|
+
var css_248z$u = ".contentSectionContainer {\n padding: 2rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow: auto;\n}\n.contentSectionContainer > *:not(:first-child) {\n margin-top: 2rem;\n}\n.contentSectionContainer > *:not(:last-child) {\n flex: 0;\n}\n.contentSectionContainer > *:last-child {\n flex: 1;\n}";
|
|
8420
|
+
styleInject(css_248z$u);
|
|
8421
8421
|
|
|
8422
8422
|
function ContentSectionContainer(_a) {
|
|
8423
8423
|
var _b = _a.className, className = _b === void 0 ? "" : _b, children = _a.children;
|
|
8424
8424
|
return React.createElement(material.Box, { className: "contentSectionContainer ".concat(className) }, children);
|
|
8425
8425
|
}
|
|
8426
8426
|
|
|
8427
|
-
var css_248z$
|
|
8428
|
-
styleInject(css_248z$
|
|
8427
|
+
var css_248z$t = ".fullBar-component-v2 {\n position: relative;\n flex-wrap: wrap;\n}\n.fullBar-component-v2 > div {\n position: unset;\n}\n.fullBar-component-v2 .left > *:nth-child(n+2),\n.fullBar-component-v2 .center > *:nth-child(n+2),\n.fullBar-component-v2 .right > *:nth-child(n+2) {\n margin-left: 0.75rem;\n}";
|
|
8428
|
+
styleInject(css_248z$t);
|
|
8429
8429
|
|
|
8430
8430
|
function FullBar(props) {
|
|
8431
8431
|
if (props === void 0) { props = {}; }
|
|
@@ -8439,8 +8439,8 @@ function FullBar(props) {
|
|
|
8439
8439
|
React.createElement(material.Stack, __assign({ direction: "row" }, rightProps, { sx: __assign({ alignItems: "center", justifyContent: "right", fex: 1 }, rightSX), className: "right" }), right));
|
|
8440
8440
|
}
|
|
8441
8441
|
|
|
8442
|
-
var css_248z$
|
|
8443
|
-
styleInject(css_248z$
|
|
8442
|
+
var css_248z$s = ".logo-component-v2 {\n line-height: 0;\n}";
|
|
8443
|
+
styleInject(css_248z$s);
|
|
8444
8444
|
|
|
8445
8445
|
function Logo(_a) {
|
|
8446
8446
|
var url = _a.url, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.imgProps, imgProps = _c === void 0 ? {} : _c;
|
|
@@ -8450,8 +8450,8 @@ function Logo(_a) {
|
|
|
8450
8450
|
React.createElement("img", __assign({ src: url, style: __assign({ maxHeight: "45px", maxWidth: "200px" }, styles) }, imgProps)));
|
|
8451
8451
|
}
|
|
8452
8452
|
|
|
8453
|
-
var css_248z$
|
|
8454
|
-
styleInject(css_248z$
|
|
8453
|
+
var css_248z$r = ".modal-component-v2 {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: var(--white, #FFFFFF);\n z-index: 8500;\n flex-direction: column;\n}\n.modal-component-v2.spacedHeader .fullBar-component-v2 {\n padding: 2rem 2rem 0 2rem;\n}\n.modal-component-v2.open {\n display: flex;\n}\n.modal-component-v2:not(.open) {\n display: none;\n}\n.modal-component-v2 .vSeperator {\n width: 1px;\n height: 50%;\n background: var(--wild-sand, #dddddd);\n}\n.modal-component-v2:not(.spacedHeader) > .fullBar-component-v2 {\n background: var(--shade100, #F3F2F2);\n}\n.modal-component-v2 > .fullBar-component-v2 {\n flex: 0;\n padding: 0.75rem 1.5rem;\n}\n.modal-component-v2 > .fullBar-component-v2 .subNav-component-v2 button {\n padding-top: 0;\n padding-bottom: 0;\n}\n.modal-component-v2 > .fullBar-component-v2 .left > *:nth-child(n+2) {\n margin-left: 1rem;\n}\n.modal-component-v2 > div:not(.fullBar-component-v2) {\n flex: 1;\n}\n.modal-component-v2 .contentSectionContainer {\n display: flex;\n align-items: center;\n overflow-y: auto;\n}";
|
|
8454
|
+
styleInject(css_248z$r);
|
|
8455
8455
|
|
|
8456
8456
|
function ModalHeading(props) {
|
|
8457
8457
|
if (props === void 0) { props = {}; }
|
|
@@ -8541,8 +8541,8 @@ var Modal = React.forwardRef(function (props, ref) {
|
|
|
8541
8541
|
React.createElement(ContentSectionContainer, null, state.content))));
|
|
8542
8542
|
});
|
|
8543
8543
|
|
|
8544
|
-
var css_248z$
|
|
8545
|
-
styleInject(css_248z$
|
|
8544
|
+
var css_248z$q = ".overlay-component-v2 {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.5);\n z-index: 9000;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.overlay-component-v2 .container {\n background: var(--white, #FFFFFF);\n border-radius: 16px;\n width: 80%;\n height: 80%;\n}\n.overlay-component-v2 .container .contentSectionContainer > div {\n width: 100%;\n}\n.overlay-component-v2 .container .vSeperator {\n width: 1px;\n height: 50%;\n background: var(--wild-sand, #dddddd);\n}\n.overlay-component-v2 .container > .fullBar-component-v2 {\n flex: 0;\n padding: 0.75rem 0.75rem;\n border-bottom: 1px solid var(--wild-sand, #dddddd);\n}\n.overlay-component-v2 .container > .fullBar-component-v2 .subNav-component-v2 button {\n padding-top: 0;\n padding-bottom: 0;\n}\n.overlay-component-v2 .container > .fullBar-component-v2 .left > *:nth-child(n+2) {\n margin-left: 1rem;\n}\n.overlay-component-v2 .container > div:not(.fullBar-component-v2) {\n flex: 1;\n}\n.overlay-component-v2 .container .contentSectionContainer {\n display: flex;\n align-items: center;\n overflow-y: auto;\n}\n.overlay-component-v2.open {\n display: flex;\n}\n.overlay-component-v2:not(.open) {\n display: none;\n}";
|
|
8545
|
+
styleInject(css_248z$q);
|
|
8546
8546
|
|
|
8547
8547
|
function OverlayHeading(props) {
|
|
8548
8548
|
if (props === void 0) { props = {}; }
|
|
@@ -8631,8 +8631,8 @@ var Overlay = React.forwardRef(function (props, ref) {
|
|
|
8631
8631
|
React.createElement(ContentSectionContainer, null, state.content)))));
|
|
8632
8632
|
});
|
|
8633
8633
|
|
|
8634
|
-
var css_248z$
|
|
8635
|
-
styleInject(css_248z$
|
|
8634
|
+
var css_248z$p = ".ui-kit-v2-wrapper {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: column;\n}";
|
|
8635
|
+
styleInject(css_248z$p);
|
|
8636
8636
|
|
|
8637
8637
|
function BrandWrapper(_a) {
|
|
8638
8638
|
_a.onInit; var _b = _a.onBrandSuccess, onBrandSuccess = _b === void 0 ? function () { } : _b, _c = _a.onBrandError, onBrandError = _c === void 0 ? function () { } : _c, MUITheme = _a.MUITheme, brandId = _a.brandId, brandHost = _a.brandHost, children = _a.children, _d = _a.noFetch, noFetch = _d === void 0 ? false : _d, _e = _a.setPageHead, setPageHead = _e === void 0 ? true : _e, _f = _a.includeHandlers, includeHandlers = _f === void 0 ? true : _f, brandThemeContext = _a.brandThemeContext, styleOverride = _a.styleOverride;
|
|
@@ -8732,8 +8732,8 @@ function MenuOption(_a) {
|
|
|
8732
8732
|
React.createElement(Icon, { name: "Checkmark10" }))));
|
|
8733
8733
|
}
|
|
8734
8734
|
|
|
8735
|
-
var css_248z$
|
|
8736
|
-
styleInject(css_248z$
|
|
8735
|
+
var css_248z$o = ".dropMenu-component-v2.inlineMenu {\n position: relative;\n overflow-y: auto;\n margin-top: 0.75rem;\n max-height: 35vh;\n box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1490196078);\n padding: 0.75rem;\n border-radius: 16px;\n min-width: 300;\n background: var(--background-color-1, var(--white, #FFFFFF));\n box-sizing: border-box;\n}\n.dropMenu-component-v2.inlineMenu::-webkit-scrollbar {\n display: block;\n}\n.dropMenu-component-v2.inlineMenu::-webkit-scrollbar-track:horizontal {\n position: absolute;\n bottom: -20px;\n}\n.dropMenu-component-v2.inlineMenu::-webkit-scrollbar-track:vertical {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 8px !important;\n border-top-right-radius: 8px !important;\n}\n.dropMenu-component-v2.inlineMenu::-webkit-scrollbar-track {\n height: 2.5rem;\n width: 2.5rem;\n padding: 2rem;\n background-clip: content-box;\n border-bottom-left-radius: 8px;\n}\n.dropMenu-component-v2.inlineMenu::-webkit-scrollbar-thumb {\n background: var(--body-font-color-2, var(--silver, #9B9B9B));\n border-radius: 24px;\n border-top: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-bottom: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-right: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-left: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n}";
|
|
8736
|
+
styleInject(css_248z$o);
|
|
8737
8737
|
|
|
8738
8738
|
function DropMenu(_a) {
|
|
8739
8739
|
var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.popoverProps, popoverProps = _c === void 0 ? {
|
|
@@ -8758,8 +8758,8 @@ function DropMenu(_a) {
|
|
|
8758
8758
|
}
|
|
8759
8759
|
}
|
|
8760
8760
|
|
|
8761
|
-
var css_248z$
|
|
8762
|
-
styleInject(css_248z$
|
|
8761
|
+
var css_248z$n = ".buttonMenu-component-v2.MuiButton-sizeSmall {\n min-height: 2rem;\n}\n.buttonMenu-component-v2.MuiButton-sizeMedium {\n min-height: 3.125rem;\n}\n.buttonMenu-component-v2.MuiButton-sizeLarge {\n min-height: 3.75rem;\n}";
|
|
8762
|
+
styleInject(css_248z$n);
|
|
8763
8763
|
|
|
8764
8764
|
function ButtonMenu(_a) {
|
|
8765
8765
|
var children = _a.children, _b = _a.buttonProps, buttonProps = _b === void 0 ? {
|
|
@@ -8802,8 +8802,8 @@ function Chip(_a) {
|
|
|
8802
8802
|
return React.createElement(material.Chip, __assign({}, props, { className: classes, color: color }));
|
|
8803
8803
|
}
|
|
8804
8804
|
|
|
8805
|
-
var css_248z$
|
|
8806
|
-
styleInject(css_248z$
|
|
8805
|
+
var css_248z$m = ".codeInput-component > div {\n justify-content: center;\n align-items: center;\n}\n.codeInput-component > div input {\n box-sizing: border-box;\n width: 48px;\n height: 48px;\n padding: 1rem;\n border-radius: 8px;\n outline: none;\n color: var(--primary-brand-color, var(--grape, #69006E));\n font-size: 1rem;\n line-height: 1.25rem;\n text-align: center;\n margin: 0 0.5rem;\n}\n.codeInput-component > div input[type=number]::-webkit-inner-spin-button, .codeInput-component > div input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.codeInput-component > div input:-moz-placeholder {\n border: 1px solid var(--wild-sand, #dddddd);\n color: var(--body-font-color-2, var(--silver, #9B9B9B));\n}\n.codeInput-component > div input:placeholder-shown {\n border: 1px solid var(--wild-sand, #dddddd);\n color: var(--body-font-color-2, var(--silver, #9B9B9B));\n}\n.codeInput-component > div input:not(:-moz-placeholder) {\n border: 1px solid var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.codeInput-component > div input:not(:placeholder-shown) {\n border: 1px solid var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.codeInput-component > div input:first-child {\n margin-left: 0;\n}\n.codeInput-component > div input:last-child {\n margin-right: 0;\n}";
|
|
8806
|
+
styleInject(css_248z$m);
|
|
8807
8807
|
|
|
8808
8808
|
function CodeInput(_a) {
|
|
8809
8809
|
var className = _a.className, initValue = _a.initValue, value = _a.value, _b = _a.numInputs, numInputs = _b === void 0 ? 6 : _b, _c = _a.shouldAutoFocus, shouldAutoFocus = _c === void 0 ? true : _c, placeholder = _a.placeholder, renderSeparator = _a.renderSeparator, _d = _a.inputType, inputType = _d === void 0 ? "text" : _d, onChange = _a.onChange, onPaste = _a.onPaste;
|
|
@@ -8856,8 +8856,8 @@ function CustomPaginationActions(_a) {
|
|
|
8856
8856
|
React.createElement(Button, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", variant: "outlined", color: "body1" }, "Last")));
|
|
8857
8857
|
}
|
|
8858
8858
|
|
|
8859
|
-
var css_248z$
|
|
8860
|
-
styleInject(css_248z$
|
|
8859
|
+
var css_248z$l = ".dataTable-component-v2 {\n position: relative;\n height: 100%;\n}\n.dataTable-component-v2 .MuiTableContainer-root {\n margin-bottom: 5rem;\n}\n.dataTable-component-v2 .MuiTableContainer-root::-webkit-scrollbar {\n display: block;\n}\n.dataTable-component-v2 .MuiTableContainer-root::-webkit-scrollbar-track:horizontal {\n position: absolute;\n bottom: -20px;\n}\n.dataTable-component-v2 .MuiTableContainer-root::-webkit-scrollbar-track:vertical {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 8px !important;\n border-top-right-radius: 8px !important;\n}\n.dataTable-component-v2 .MuiTableContainer-root::-webkit-scrollbar-track {\n height: 2.5rem;\n width: 2.5rem;\n padding: 2rem;\n background-clip: content-box;\n border-bottom-left-radius: 8px;\n}\n.dataTable-component-v2 .MuiTableContainer-root::-webkit-scrollbar-thumb {\n background: var(--body-font-color-2, var(--silver, #9B9B9B));\n border-radius: 24px;\n border-top: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-bottom: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-right: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-left: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n}\n.dataTable-component-v2 .MuiTableContainer-root > table thead {\n border-bottom: 1px solid transparent;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th {\n vertical-align: middle;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.sortable {\n cursor: pointer;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.sortable .MuiTableSortLabel-root .MuiTableSortLabel-icon path {\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.sortable:hover .MuiTableSortLabel-root .MuiTableSortLabel-icon {\n opacity: 0.5;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th,\n.dataTable-component-v2 .MuiTableContainer-root > table td {\n white-space: nowrap;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th > .cellContainer,\n.dataTable-component-v2 .MuiTableContainer-root > table td > .cellContainer {\n width: -moz-max-content;\n width: max-content;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.stickyLastCol::before,\n.dataTable-component-v2 .MuiTableContainer-root > table td.stickyLastCol::before {\n content: \"\";\n width: 19px;\n height: -webkit-fill-available;\n display: block;\n position: absolute;\n top: 0;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.stickyFirstCol::after,\n.dataTable-component-v2 .MuiTableContainer-root > table td.stickyFirstCol::after {\n content: \"\";\n width: 19px;\n height: -webkit-fill-available;\n display: block;\n position: absolute;\n top: 0;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.leftStickyEffect::before, .dataTable-component-v2 .MuiTableContainer-root > table th.rightStickyEffect::before,\n.dataTable-component-v2 .MuiTableContainer-root > table td.leftStickyEffect::before,\n.dataTable-component-v2 .MuiTableContainer-root > table td.rightStickyEffect::before {\n content: \"\";\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.leftStickyEffect::after, .dataTable-component-v2 .MuiTableContainer-root > table th.rightStickyEffect::after,\n.dataTable-component-v2 .MuiTableContainer-root > table td.leftStickyEffect::after,\n.dataTable-component-v2 .MuiTableContainer-root > table td.rightStickyEffect::after {\n content: \"\";\n background-size: 16px 16px, 16px 16px;\n background-repeat: no-repeat, no-repeat;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.leftStickyEffect,\n.dataTable-component-v2 .MuiTableContainer-root > table td.leftStickyEffect {\n left: 0;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.leftStickyEffect::after,\n.dataTable-component-v2 .MuiTableContainer-root > table td.leftStickyEffect::after {\n background-position: top left, bottom left;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.rightStickyEffect,\n.dataTable-component-v2 .MuiTableContainer-root > table td.rightStickyEffect {\n right: 0;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table th.rightStickyEffect::after,\n.dataTable-component-v2 .MuiTableContainer-root > table td.rightStickyEffect::after {\n right: 0;\n background-position: top right, bottom right;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table tr {\n position: relative;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table tr td .cellContainer {\n display: flex;\n justify-content: left;\n width: -moz-max-content;\n width: max-content;\n min-width: 100%;\n}\n.dataTable-component-v2 .MuiTableContainer-root > table tr td.centered .cellContainer {\n justify-content: center;\n}\n.dataTable-component-v2 .MuiTablePagination-root {\n overflow: visible;\n}\n.dataTable-component-v2 .MuiTablePagination-root .MuiTablePagination-selectLabel,\n.dataTable-component-v2 .MuiTablePagination-root .MuiInputBase-root {\n display: none;\n}\n.dataTable-component-v2 .MuiTablePagination-root .MuiTablePagination-toolbar {\n padding-right: 1.25rem;\n}\n.dataTable-component-v2 .MuiTablePagination-root .MuiTablePagination-actions {\n margin-right: 0.75rem;\n}\n\n.colManagerMenu .MuiListItemText-root .MuiCheckbox-root {\n margin-right: 0.75rem;\n}";
|
|
8860
|
+
styleInject(css_248z$l);
|
|
8861
8861
|
|
|
8862
8862
|
var bottomLeftCorner = "data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fillRule%3D%22evenodd%22%20clipRule%3D%22evenodd%22%20d%3D%22M8%208C3.58172%208%20-1.56562e-07%204.41828%20-3.49691e-07%200L0%208L8%208Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E";
|
|
8863
8863
|
|
|
@@ -9018,8 +9018,8 @@ function DataTableRow(_a) {
|
|
|
9018
9018
|
React.createElement(TableCell, { className: "rightStickyEffect stickyEffect" })));
|
|
9019
9019
|
}
|
|
9020
9020
|
|
|
9021
|
-
var css_248z$
|
|
9022
|
-
styleInject(css_248z$
|
|
9021
|
+
var css_248z$k = ".search-component-v2 {\n width: 100%;\n}\n.search-component-v2 .inputContainer {\n width: 100%;\n padding: 1.25rem 1.5rem;\n background-color: var(--background-color-1, var(--white, #FFFFFF));\n border-radius: 16px;\n box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n}\n.search-component-v2 .inputContainer > *:not(:first-child) {\n margin-left: 1rem;\n}\n.search-component-v2 .inputContainer input {\n flex: 1;\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.25rem;\n border: none;\n outline: none;\n color: var(--primary-brand-color, var(--grape, #69006E));\n background: none;\n}\n.search-component-v2 .inputContainer input::-moz-placeholder {\n color: var(--silver, #9B9B9B);\n}\n.search-component-v2 .inputContainer input::placeholder {\n color: var(--silver, #9B9B9B);\n}";
|
|
9022
|
+
styleInject(css_248z$k);
|
|
9023
9023
|
|
|
9024
9024
|
function Search(_a) {
|
|
9025
9025
|
var _b = _a.initValue, initValue = _b === void 0 ? "" : _b, name = _a.name, onChange = _a.onChange, _c = _a.intervalTime, intervalTime = _c === void 0 ? 800 : _c, placeholder = _a.placeholder, onClose = _a.onClose, _d = _a.className, className = _d === void 0 ? "" : _d, useClickAway = _a.useClickAway, onEnter = _a.onEnter, _e = _a.useKeyDownForChange, useKeyDownForChange = _e === void 0 ? false : _e;
|
|
@@ -9092,8 +9092,8 @@ function Search(_a) {
|
|
|
9092
9092
|
React.createElement(Icon, { actionIcon: true, className: "close", name: "X18", onClick: onClose }))));
|
|
9093
9093
|
}
|
|
9094
9094
|
|
|
9095
|
-
var css_248z$
|
|
9096
|
-
styleInject(css_248z$
|
|
9095
|
+
var css_248z$j = ".dropdown-component-v2 .prefixIcon {\n margin-right: 0.5rem;\n}\n.dropdown-component-v2 .MuiFormLabel-root,\n.dropdown-component-v2 .MuiFormLabel-root.Mui-focused {\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n font-weight: 700;\n font-size: 0.875rem;\n line-height: 1.125rem;\n max-width: 52rem;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n transform: translate(14px, -9px) !important;\n}\n.dropdown-component-v2 .MuiFormLabel-root > div,\n.dropdown-component-v2 .MuiFormLabel-root.Mui-focused > div {\n display: flex;\n align-items: \"center\";\n}\n.dropdown-component-v2 .MuiFormLabel-root > div .MuiSvgIcon-root,\n.dropdown-component-v2 .MuiFormLabel-root.Mui-focused > div .MuiSvgIcon-root {\n margin-left: 0.5rem;\n}\n.dropdown-component-v2 .filled fieldset {\n border-color: var(--secondary-brand-color, var(--teal, #0ABDAE)) !important;\n}\n.dropdown-component-v2 fieldset legend span {\n font-weight: 700;\n font-size: 0.875rem;\n line-height: 1.125rem;\n max-width: 52rem;\n}";
|
|
9096
|
+
styleInject(css_248z$j);
|
|
9097
9097
|
|
|
9098
9098
|
function Dropdown(_a) {
|
|
9099
9099
|
var placeholder = _a.placeholder, label = _a.label, keepOpenOnClick = _a.keepOpenOnClick, name = _a.name, _b = _a.className, className = _b === void 0 ? "" : _b, extraSelectProps = _a.extraSelectProps, variant = _a.variant, labelIconColor = _a.labelIconColor, onChange = _a.onChange, defaultValue = _a.defaultValue, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? "bottom-right" : _c, _d = _a.iconOnly, iconOnly = _d === void 0 ? false : _d, chevronIconOverride = _a.chevronIconOverride, renderValue = _a.renderValue, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.typographyVariant, typographyVariant = _f === void 0 ? "button" : _f, _g = _a.size, size = _g === void 0 ? "medium" : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.color, color = _j === void 0 ? "primary" : _j, _k = _a.value, value = _k === void 0 ? undefined : _k, _l = _a.multiSelect, multiSelect = _l === void 0 ? false : _l, searchProps = _a.searchProps, stickyActions = _a.stickyActions, prefixIcon = _a.prefixIcon, onOpen = _a.onOpen, onClose = _a.onClose;
|
|
@@ -9318,8 +9318,8 @@ function DataTable(_a) {
|
|
|
9318
9318
|
ActionsComponent: CustomPaginationActions }))));
|
|
9319
9319
|
}
|
|
9320
9320
|
|
|
9321
|
-
var css_248z$
|
|
9322
|
-
styleInject(css_248z$
|
|
9321
|
+
var css_248z$i = ".dateTimeSelector.dateTimeCalendar {\n background: var(--white, #FFFFFF);\n}\n.dateTimeSelector .MuiMultiSectionDigitalClock-root,\n.dateTimeSelector .MuiMultiSectionDigitalClockSection-root {\n flex: 1;\n}\n.dateTimeSelector .MuiMultiSectionDigitalClock-root .MuiMultiSectionDigitalClockSection-item.Mui-selected,\n.dateTimeSelector .MuiMultiSectionDigitalClockSection-root .MuiMultiSectionDigitalClockSection-item.Mui-selected {\n background-color: var(--primary-brand-color, var(--grape, #69006E)) !important;\n}";
|
|
9322
|
+
styleInject(css_248z$i);
|
|
9323
9323
|
|
|
9324
9324
|
function DatePicker(_a) {
|
|
9325
9325
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
@@ -9379,8 +9379,8 @@ function DateTimeCalendar(_a) {
|
|
|
9379
9379
|
} })));
|
|
9380
9380
|
}
|
|
9381
9381
|
|
|
9382
|
-
var css_248z$
|
|
9383
|
-
styleInject(css_248z$
|
|
9382
|
+
var css_248z$h = ".divider-component-v2 {\n width: 100%;\n}";
|
|
9383
|
+
styleInject(css_248z$h);
|
|
9384
9384
|
|
|
9385
9385
|
function Divider(_a) {
|
|
9386
9386
|
var _b = _a.height, height = _b === void 0 ? 1 : _b, _c = _a.color, color = _c === void 0 ? "wildSand" : _c;
|
|
@@ -9407,8 +9407,8 @@ function CountryDropdown(_a) {
|
|
|
9407
9407
|
return React.createElement(Dropdown, __assign({}, args, { value: value, defaultValue: defaultValue, options: options, onChange: onChange }));
|
|
9408
9408
|
}
|
|
9409
9409
|
|
|
9410
|
-
var css_248z$
|
|
9411
|
-
styleInject(css_248z$
|
|
9410
|
+
var css_248z$g = ".emptyContent-component-v2 {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n width: 100%;\n height: 100%;\n padding: 2rem;\n box-sizing: border-box;\n background: var(--cloud, #F4F4F4);\n align-self: stretch;\n justify-self: stretch;\n border-radius: 32px;\n}\n.emptyContent-component-v2 > .MuiStack-root {\n width: 32rem;\n text-align: center;\n}\n.emptyContent-component-v2 > .MuiStack-root .MuiTypography-h3 {\n margin-top: 1rem;\n}\n.emptyContent-component-v2 > .MuiStack-root .MuiTypography-body1L {\n display: block;\n margin-top: 0.5rem;\n}\n.emptyContent-component-v2 > .MuiStack-root button {\n margin-top: 1rem;\n}";
|
|
9411
|
+
styleInject(css_248z$g);
|
|
9412
9412
|
|
|
9413
9413
|
function EmptyContent(_a) {
|
|
9414
9414
|
var title = _a.title, desc = _a.desc, _b = _a.iconName, iconName = _b === void 0 ? "EmptyFolder44" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, button = _a.button;
|
|
@@ -9422,8 +9422,8 @@ function EmptyContent(_a) {
|
|
|
9422
9422
|
button && button));
|
|
9423
9423
|
}
|
|
9424
9424
|
|
|
9425
|
-
var css_248z$
|
|
9426
|
-
styleInject(css_248z$
|
|
9425
|
+
var css_248z$f = ".fileUpload-component-v2 {\n position: relative;\n width: 100%;\n}\n.fileUpload-component-v2 > .fileUploadContainer {\n box-sizing: border-box;\n text-align: center;\n cursor: pointer;\n width: 100%;\n padding: 3rem 2rem;\n display: flex;\n position: relative;\n}\n.fileUpload-component-v2 > .fileUploadContainer fieldset {\n position: absolute;\n margin: 0;\n padding: 0 0 0 1rem !important;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-radius: 8px;\n border: 1px dashed var(--pebble, #EAEAEA);\n text-align: left;\n position: absolute;\n padding-inline: 0.75em;\n margin-inline: unset;\n}\n.fileUpload-component-v2 > .fileUploadContainer img {\n max-width: 100%;\n}\n.fileUpload-component-v2 > .fileUploadContainer.hasDropdown fieldset {\n border-bottom-right-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n}\n.fileUpload-component-v2 .dropdown-component-v2 {\n flex: 1;\n margin-top: 0;\n position: relative;\n left: 1px;\n width: calc(100% - 2px);\n}\n.fileUpload-component-v2 .dropdown-component-v2 > .MuiInputBase-root:not(:focus):not(:hover):not(:active) {\n outline-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.fileUpload-component-v2 .dropdown-component-v2 > .MuiInputBase-root {\n max-width: unset;\n border-top-right-radius: 0 !important;\n border-top-left-radius: 0 !important;\n}";
|
|
9426
|
+
styleInject(css_248z$f);
|
|
9427
9427
|
|
|
9428
9428
|
function FileUpload(_a) {
|
|
9429
9429
|
var label = _a.label, onChange = _a.onChange, _b = _a.defaultIconName, defaultIconName = _b === void 0 ? "Upload44" : _b, placeholder = _a.placeholder, support = _a.support, dropdown = _a.dropdown;
|
|
@@ -9526,8 +9526,8 @@ function Link(_a) {
|
|
|
9526
9526
|
return React.createElement(material.Link, __assign({}, props, { variant: variant, color: color, className: classes }), children);
|
|
9527
9527
|
}
|
|
9528
9528
|
|
|
9529
|
-
var css_248z$
|
|
9530
|
-
styleInject(css_248z$
|
|
9529
|
+
var css_248z$e = ".subNav-component-v2 {\n flex-wrap: wrap;\n}\n.subNav-component-v2.dir-row button:not(:last-child) {\n margin-right: 2px;\n}\n.subNav-component-v2.dir-column button:not(:first-child) {\n margin-top: 1.25rem;\n}\n.subNav-component-v2 button.selected {\n pointer-events: none;\n}\n.subNav-component-v2 button.default, .subNav-component-v2 button.text {\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n outline: none;\n}\n.subNav-component-v2 button.default span, .subNav-component-v2 button.text span {\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.subNav-component-v2 button.default:not(:hover), .subNav-component-v2 button.text:not(:hover) {\n background: none;\n}\n.subNav-component-v2 button.default:hover, .subNav-component-v2 button.text:hover {\n outline: none;\n}\n.subNav-component-v2 button.default:active, .subNav-component-v2 button.text:active {\n outline: none !important;\n}\n.subNav-component-v2 button.default {\n text-transform: none;\n}\n.subNav-component-v2 button.default span {\n text-transform: none;\n}\n.subNav-component-v2 button.default.selected {\n background-color: var(--cloud, #F4F4F4);\n}\n.subNav-component-v2 button.text span {\n color: var(--silver, #9B9B9B);\n}\n.subNav-component-v2 button.text:hover, .subNav-component-v2 button.text.selected {\n background: none;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.subNav-component-v2 button.text:hover span, .subNav-component-v2 button.text.selected span {\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}";
|
|
9530
|
+
styleInject(css_248z$e);
|
|
9531
9531
|
|
|
9532
9532
|
function SubNav(_a) {
|
|
9533
9533
|
var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? "row" : _c, initialSelected = _a.initialSelected, selected = _a.selected, onClick = _a.onClick, className = _a.className, _d = _a.menuVariant, menuVariant = _d === void 0 ? "default" : _d, btnOverride = _a.btnOverride;
|
|
@@ -9559,8 +9559,8 @@ function SubNav(_a) {
|
|
|
9559
9559
|
}));
|
|
9560
9560
|
}
|
|
9561
9561
|
|
|
9562
|
-
var css_248z$
|
|
9563
|
-
styleInject(css_248z$
|
|
9562
|
+
var css_248z$d = ".filter-bar-component-v2 {\n background: var(--shade100, #F3F2F2);\n width: 100%;\n box-sizing: border-box;\n}\n.filter-bar-component-v2 .DDItem {\n padding-left: 2rem;\n}\n.filter-bar-component-v2 .DDItem .MuiInputBase-input {\n padding-right: 0 !important;\n}\n.filter-bar-component-v2 .addFilterBox {\n padding: 0 1.5rem;\n position: relative;\n cursor: pointer;\n}\n.filter-bar-component-v2 .addFilterBox .MuiLink-root {\n text-decoration: none;\n}\n.filter-bar-component-v2 .addFilterBox .search-component-v2 .inputContainer {\n padding: 0;\n background: unset;\n box-shadow: none;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer {\n position: absolute;\n top: 4rem;\n width: -moz-max-content;\n width: max-content;\n min-width: 100%;\n box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1490196078);\n border-radius: 16px;\n min-width: 300;\n background: var(--background-color-1, var(--white, #FFFFFF));\n box-sizing: border-box;\n z-index: 1000;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .subNav-component-v2 {\n justify-content: space-between;\n margin: 0;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .subNav-component-v2 button {\n flex: 1;\n border-radius: 0;\n background: var(--cloud, #F4F4F4);\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .subNav-component-v2 button.selected {\n background: var(--white, #FFFFFF);\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .subNav-component-v2 button:first-child, .filter-bar-component-v2 .addFilterBox .dropMenuContainer .subNav-component-v2 button:first-child:hover {\n border-top-left-radius: 4px;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .subNav-component-v2 button:last-child, .filter-bar-component-v2 .addFilterBox .dropMenuContainer .subNav-component-v2 button:last-child:hover {\n border-top-right-radius: 4px;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .dropMenu-component-v2 {\n box-shadow: none;\n margin-top: 0;\n padding: 1.5rem;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .dropMenu-component-v2 .MuiMenuItem-root {\n padding: 0.5rem;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .dropMenu-component-v2 .MuiMenuItem-root.isTitle {\n padding-top: 0;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer .dropMenu-component-v2 .MuiTypography-body1L {\n font-size: 0.875rem;\n}\n.filter-bar-component-v2 .addFilterBox .dropMenuContainer > button {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n padding: 0.75rem;\n}\n.filter-bar-component-v2 .pillContainer {\n padding: 0.75rem;\n min-height: 2rem;\n overflow-x: auto;\n}\n.filter-bar-component-v2 .pillContainer .MuiSvgIcon-root {\n padding-right: 0;\n padding-left: 0.5rem;\n}\n.filter-bar-component-v2 .pillContainer .MuiChip-root {\n flex-direction: row-reverse;\n}\n.filter-bar-component-v2 .pillContainer .MuiChip-root.disabled {\n pointer-events: all !important;\n}\n.filter-bar-component-v2 .pillContainer .MuiChip-root .MuiChip-label {\n display: flex;\n align-items: center;\n}\n.filter-bar-component-v2 .pillContainer .MuiChip-root .MuiChip-label .MuiSvgIcon-root {\n margin-right: 0.5rem;\n}\n.filter-bar-component-v2 .pillContainer .MuiChip-root .MuiChip-label .MuiSvgIcon-root path {\n fill: var(--white, #FFFFFF);\n}\n.filter-bar-component-v2 .pillContainer:not(.empty) {\n border-left: 1px solid var(--wild-sand, #dddddd);\n}\n.filter-bar-component-v2 .actionContainer {\n border-left: 1px solid var(--wild-sand, #dddddd);\n padding: 0 2rem;\n padding-left: 2rem;\n}\n.filter-bar-component-v2 .actionContainer .MuiTypography-root {\n cursor: pointer;\n}";
|
|
9563
|
+
styleInject(css_248z$d);
|
|
9564
9564
|
|
|
9565
9565
|
function FilterBar(_a) {
|
|
9566
9566
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -13989,8 +13989,8 @@ function GenericWrapper(_a) {
|
|
|
13989
13989
|
content);
|
|
13990
13990
|
}
|
|
13991
13991
|
|
|
13992
|
-
var css_248z$
|
|
13993
|
-
styleInject(css_248z$
|
|
13992
|
+
var css_248z$c = ".groupedActions-component {\n display: flex;\n}\n.groupedActions-component > *:first-child, .groupedActions-component > *:first-child.dropdown-component-v2 .MuiInputBase-root {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.groupedActions-component > *:last-child, .groupedActions-component > *:last-child.dropdown-component-v2 .MuiInputBase-root {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.groupedActions-component > *:nth-child(n+2):not(:last-child), .groupedActions-component > *:nth-child(n+2):not(:last-child).dropdown-component-v2 .MuiInputBase-root {\n border-radius: 0;\n}\n.groupedActions-component.contained > *:nth-child(n+2):not(:last-child) {\n margin-left: 1px;\n}\n.groupedActions-component.contained > *:last-child {\n margin-left: 1px;\n}\n.groupedActions-component.outlined > *:nth-child(n+2):not(:last-child), .groupedActions-component.outlined > *:nth-child(n+2):not(:last-child).dropdown-component-v2 .MuiInputBase-root, .groupedActions-component.outlined > *:not(:first-child):active, .groupedActions-component.outlined > *:not(:first-child):active.dropdown-component-v2 .MuiInputBase-root, .groupedActions-component.outlined > *:last-child, .groupedActions-component.outlined > *:last-child.dropdown-component-v2 .MuiInputBase-root {\n border-left: none !important;\n}";
|
|
13993
|
+
styleInject(css_248z$c);
|
|
13994
13994
|
|
|
13995
13995
|
function GroupedActions(_a) {
|
|
13996
13996
|
var _b = _a.components, components = _b === void 0 ? [] : _b, classNames$1 = _a.classNames, _c = _a.variant, variant = _c === void 0 ? "contained" : _c;
|
|
@@ -14004,8 +14004,8 @@ function GroupedActions(_a) {
|
|
|
14004
14004
|
return React.createElement(Box, { className: classes }, components);
|
|
14005
14005
|
}
|
|
14006
14006
|
|
|
14007
|
-
var css_248z$
|
|
14008
|
-
styleInject(css_248z$
|
|
14007
|
+
var css_248z$b = ".header-component-v2 {\n max-width: 31rem;\n width: 100%;\n}\n.header-component-v2 > * {\n width: -moz-fit-content;\n width: fit-content;\n}\n.header-component-v2 .header .headerText,\n.header-component-v2 .header .headerText span,\n.header-component-v2 .desc span,\n.header-component-v2 .support span {\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 31rem;\n display: block;\n text-wrap: nowrap;\n width: 100%;\n}\n.header-component-v2 .header,\n.header-component-v2 .desc,\n.header-component-v2 .support {\n width: -moz-fit-content;\n width: fit-content;\n}\n.header-component-v2 .header {\n flex: 1;\n margin-top: 0;\n}\n.header-component-v2 .header .postHeader,\n.header-component-v2 .header .preHeader {\n display: inline-block;\n width: -moz-fit-content;\n width: fit-content;\n text-wrap: nowrap;\n}\n.header-component-v2 .header .preHeader {\n margin-right: 1rem;\n}\n.header-component-v2 .header .postHeader {\n margin-left: 1.5rem;\n}\n.header-component-v2 .support {\n flex: 1;\n line-height: 0.75rem;\n display: block;\n margin-bottom: 1px;\n}\n.header-component-v2 .desc {\n flex: 1;\n margin-top: 1rem;\n border-color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}";
|
|
14008
|
+
styleInject(css_248z$b);
|
|
14009
14009
|
|
|
14010
14010
|
//TODO when bottom line is secondary color, it means it is in a editable state, clicking it would transform it into a text field with check and x
|
|
14011
14011
|
//https://www.figma.com/proto/OQkvkOI4CMyrcPbuza16e3/Analytics?type=design&node-id=232-14879&t=kNKIjcU4MImW1jef-0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=232%3A14512&show-proto-sidebar=1
|
|
@@ -14029,8 +14029,8 @@ function Header(_a) {
|
|
|
14029
14029
|
React.createElement(Typography$1, { variant: "body1L", className: "desc ".concat(descTooltip ? "showTooltip" : "") }, desc)));
|
|
14030
14030
|
}
|
|
14031
14031
|
|
|
14032
|
-
var css_248z$
|
|
14033
|
-
styleInject(css_248z$
|
|
14032
|
+
var css_248z$a = ".iconPill-component-v2 {\n position: relative;\n}\n.iconPill-component-v2 span {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n background: var(--background-color-1, var(--white, #FFFFFF));\n border: 1px solid var(--wild-sand, #dddddd);\n font-size: 0.625rem;\n border-radius: 20px;\n font-weight: bold;\n top: -0.625rem;\n right: -0.625rem;\n width: 1.25rem;\n height: 1.25rem;\n}\n.iconPill-component-v2.s10 span {\n top: -0.25rem;\n right: -0.75rem;\n width: 0.75rem;\n height: 0.75rem;\n font-size: 0.5rem;\n}\n.iconPill-component-v2.s14 span {\n top: -0.3rem;\n right: -0.7rem;\n width: 0.75rem;\n height: 0.75rem;\n font-size: 0.5rem;\n}\n.iconPill-component-v2.s18 span {\n top: -0.5rem;\n right: -0.5rem;\n width: 1rem;\n height: 1rem;\n}\n.iconPill-component-v2.s32 span {\n top: -0.75rem;\n right: -0.75rem;\n width: 1.5rem;\n height: 1.5rem;\n font-size: 0.85rem;\n}\n.iconPill-component-v2.s44 span {\n top: -0.75rem;\n right: -0.75rem;\n width: 1.5rem;\n height: 1.5rem;\n font-size: 1rem;\n}";
|
|
14033
|
+
styleInject(css_248z$a);
|
|
14034
14034
|
|
|
14035
14035
|
var IconPill = React.forwardRef(function (_a, ref) {
|
|
14036
14036
|
var _b = _a.count, count = _b === void 0 ? 0 : _b, _c = _a.iconName, iconName = _c === void 0 ? "Domainauthenticated24" : _c, color = _a.color;
|
|
@@ -14051,8 +14051,8 @@ var IconPill = React.forwardRef(function (_a, ref) {
|
|
|
14051
14051
|
React.createElement(Icon, { name: iconName, color: defaultColor }));
|
|
14052
14052
|
});
|
|
14053
14053
|
|
|
14054
|
-
var css_248z$
|
|
14055
|
-
styleInject(css_248z$
|
|
14054
|
+
var css_248z$9 = ".informationGroup-component-v2 {\n display: flex;\n}\n.informationGroup-component-v2:first-child {\n padding-bottom: 2rem;\n}\n.informationGroup-component-v2:last-child {\n padding-top: 2rem;\n}\n.informationGroup-component-v2:not(:first-child):not(:last-child) {\n padding: 2rem 0;\n}\n.informationGroup-component-v2:not(:last-child) {\n border-bottom: 1px solid var(--wild-sand, #dddddd);\n}\n.informationGroup-component-v2 > div {\n max-width: 31.25rem;\n width: 100%;\n}\n.informationGroup-component-v2 > div:first-child {\n margin-right: 3rem;\n}\n.informationGroup-component-v2 > div:last-child {\n margin-top: 0.5rem;\n display: flex;\n flex-direction: column;\n}\n.informationGroup-component-v2 > div:last-child > div:not(:first-child) {\n margin-top: 2.5rem;\n}\n.informationGroup-component-v2 > div:last-child .dropdown-component-v2 .MuiInputBase-root,\n.informationGroup-component-v2 > div:last-child .dropdown-component-v2 {\n width: 100%;\n}\n.informationGroup-component-v2 > div:last-child .autocomplete-dropdown-container {\n z-index: 10000000;\n}";
|
|
14055
|
+
styleInject(css_248z$9);
|
|
14056
14056
|
|
|
14057
14057
|
function InformationGroup(_a) {
|
|
14058
14058
|
var title = _a.title, desc = _a.desc, rightContent = _a.rightContent, children = _a.children;
|
|
@@ -14065,8 +14065,8 @@ function InformationGroup(_a) {
|
|
|
14065
14065
|
children));
|
|
14066
14066
|
}
|
|
14067
14067
|
|
|
14068
|
-
var css_248z$
|
|
14069
|
-
styleInject(css_248z$
|
|
14068
|
+
var css_248z$8 = ".inlineTextEdit-component-v2 {\n border-bottom: var(--secondary-brand-color, var(--teal, #0ABDAE));\n border-bottom-style: dashed;\n position: relative;\n}\n.inlineTextEdit-component-v2 .hasPlaceholder {\n opacity: 0.5;\n}\n.inlineTextEdit-component-v2.editing .actions {\n position: absolute;\n right: -4.875rem;\n top: -2px;\n}\n.inlineTextEdit-component-v2.editing .actions .confirm {\n margin-right: 0.25rem;\n}\n.inlineTextEdit-component-v2.editing .actions .cancel svg {\n width: 10px;\n}\n.inlineTextEdit-component-v2 input,\n.inlineTextEdit-component-v2 textarea,\n.inlineTextEdit-component-v2 .MuiInputBase-root {\n width: 100%;\n border: none;\n padding: 0 !important;\n outline: none;\n}\n.inlineTextEdit-component-v2 input:active, .inlineTextEdit-component-v2 input:focus,\n.inlineTextEdit-component-v2 textarea:active,\n.inlineTextEdit-component-v2 textarea:focus,\n.inlineTextEdit-component-v2 .MuiInputBase-root:active,\n.inlineTextEdit-component-v2 .MuiInputBase-root:focus {\n border: none;\n}\n.inlineTextEdit-component-v2 > span,\n.inlineTextEdit-component-v2 input,\n.inlineTextEdit-component-v2 textarea,\n.inlineTextEdit-component-v2 .MuiBox-root,\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2,\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2 .MuiTextField-root,\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2 .MuiTextField-root .MuiInputBase-root,\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2 .MuiTextField-root .MuiInputBase-root input {\n font-family: inherit;\n font-weight: inherit;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n}\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2 .MuiTextField-root .MuiInputBase-root::before {\n content: unset;\n}\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2 .MuiTextField-root .MuiInputBase-root::after {\n content: unset !important;\n}\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2 .MuiTextField-root .MuiInputBase-root input,\n.inlineTextEdit-component-v2 .MuiBox-root .textfield-component-v2 .MuiTextField-root .MuiInputBase-root textarea {\n border: none;\n padding-top: 0;\n height: unset;\n}";
|
|
14069
|
+
styleInject(css_248z$8);
|
|
14070
14070
|
|
|
14071
14071
|
function InlineTextEdit(_a) {
|
|
14072
14072
|
var _b, _c;
|
|
@@ -19478,8 +19478,8 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
|
|
|
19478
19478
|
useFlexGap: PropTypes.bool
|
|
19479
19479
|
} : void 0;
|
|
19480
19480
|
|
|
19481
|
-
var css_248z$
|
|
19482
|
-
styleInject(css_248z$
|
|
19481
|
+
var css_248z$7 = ".metricCard-component {\n min-width: 250px;\n width: 100%;\n max-width: 35.25rem;\n box-sizing: border-box;\n box-shadow: none !important;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: 2rem;\n}\n.metricCard-component.card {\n padding: 2rem;\n background: var(--cloud, #F4F4F4);\n}\n.metricCard-component.plain {\n background: none !important;\n}\n.metricCard-component.withRightContent {\n max-width: 72rem;\n}\n.metricCard-component > .rightContent {\n flex: 1;\n align-items: flex-end;\n}\n.metricCard-component > .rightContent img {\n border-radius: 24px;\n border: 1px solid var(--wild-sand, #dddddd);\n width: 100%;\n min-width: 150px;\n max-width: 225px;\n max-height: 18rem;\n}\n.metricCard-component > div:not(.rightContent) {\n flex: 1;\n}\n.metricCard-component > div:not(.rightContent) > img + .heading,\n.metricCard-component > div:not(.rightContent) > img + .subHeading,\n.metricCard-component > div:not(.rightContent) > img + .metricRows {\n margin-top: 2rem;\n}\n.metricCard-component > div:not(.rightContent) > .heading ~ div,\n.metricCard-component > div:not(.rightContent) .subHeading ~ div {\n margin-top: 1.5rem;\n}\n.metricCard-component > div:not(.rightContent) > img {\n border-radius: 48px;\n max-width: 100%;\n max-height: 18.75rem;\n margin: 0 auto;\n}\n.metricCard-component > div:not(.rightContent) > .heading .MuiSvgIcon-root {\n margin-right: 1rem;\n}\n.metricCard-component > div:not(.rightContent) > .subHeading.withProgress {\n margin-top: 1rem;\n}\n.metricCard-component > div:not(.rightContent) > .subHeading > .MuiStack-root {\n flex: 1;\n}\n.metricCard-component > div:not(.rightContent) > .subHeading > .MuiStack-root > .desc {\n display: grid;\n}\n.metricCard-component > div:not(.rightContent) > .subHeading > .MuiStack-root > .progress {\n height: calc(1rem - 2px);\n background: var(--white, #FFFFFF);\n}\n.metricCard-component > div:not(.rightContent) > .subHeading > .MuiStack-root > .progress + .data {\n margin-left: 1rem;\n font-size: 4rem;\n position: relative;\n top: -12px;\n}\n.metricCard-component > div:not(.rightContent) > .subHeading > .MuiStack-root > .data + .desc {\n margin-left: 2rem;\n}\n.metricCard-component > div:not(.rightContent) > .subHeading .MuiChip-root {\n margin-left: 2rem;\n}\n.metricCard-component > div:not(.rightContent) > .subHeading .MuiChip-root .MuiSvgIcon-root {\n padding-right: 0.5rem;\n}\n.metricCard-component > div:not(.rightContent) > .metricRows .MuiStack-root .MuiTypography-root:first-child {\n margin-right: 1rem;\n}\n.metricCard-component > div:not(.rightContent) > .metricRows .MuiStack-root:not(:last-child) {\n padding-bottom: 1rem;\n border-bottom: 1px solid var(--wild-sand, #dddddd);\n}\n.metricCard-component > div:not(.rightContent) > .metricRows .MuiStack-root:not(:first-child) {\n margin-top: 1rem;\n}\n.metricCard-component > div:not(.rightContent) > .floatingRow {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}";
|
|
19482
|
+
styleInject(css_248z$7);
|
|
19483
19483
|
|
|
19484
19484
|
function MetricCard(_a) {
|
|
19485
19485
|
var _b, _c, _d, _e;
|
|
@@ -19531,6 +19531,141 @@ function MetricCard(_a) {
|
|
|
19531
19531
|
rightContent && React.createElement(Stack, { className: "rightContent" }, rightContent));
|
|
19532
19532
|
}
|
|
19533
19533
|
|
|
19534
|
+
var css_248z$6 = ".resourceCard-component-v2 {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 21rem;\n padding: 1.5rem;\n background: var(--cloud, #F4F4F4);\n border-radius: 24px !important;\n box-shadow: none !important;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n}\n.resourceCard-component-v2.clickable {\n cursor: pointer;\n}\n.resourceCard-component-v2 > .content {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.resourceCard-component-v2 .header {\n flex-shrink: 0;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n.resourceCard-component-v2 .header .titleSection {\n flex: 1;\n min-width: 0;\n}\n.resourceCard-component-v2 .header .chip {\n flex-shrink: 0;\n}\n.resourceCard-component-v2 .header .support {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.5rem;\n color: var(--silver, #9B9B9B);\n margin-top: 0.5rem;\n}\n.resourceCard-component-v2 .header .support .MuiTypography-root {\n color: inherit;\n}\n.resourceCard-component-v2 .imageContainer {\n position: relative;\n flex: 1 1 0;\n min-height: 0;\n margin-top: auto;\n border-radius: 24px;\n overflow: hidden;\n background: var(--pebble, #EAEAEA);\n}\n.resourceCard-component-v2 .imageContainer img,\n.resourceCard-component-v2 .imageContainer .imagePlaceholder {\n display: block;\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.resourceCard-component-v2 .imageContainer .imagePlaceholder {\n background: var(--wild-sand, #dddddd);\n}\n.resourceCard-component-v2 .imageContainer.hasOverlay .overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.45);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.resourceCard-component-v2 .imageContainer.hasOverlay:hover .overlay {\n opacity: 1;\n}\n.resourceCard-component-v2.menuOpen .imageContainer.hasOverlay .overlay {\n opacity: 1;\n}\n.resourceCard-component-v2 .actions {\n width: calc(100% - 3rem);\n max-width: 12.5rem;\n}\n.resourceCard-component-v2 .actions .MuiButton-root {\n width: 100%;\n min-height: 2.5rem;\n border-radius: 12px;\n text-transform: none;\n}\n.resourceCard-component-v2 .actions .moreButton {\n background: rgba(75, 74, 74, 0.85);\n color: var(--white, #FFFFFF);\n}\n.resourceCard-component-v2 .actions .moreButton:hover {\n background: rgba(75, 74, 74, 0.95);\n}";
|
|
19535
|
+
styleInject(css_248z$6);
|
|
19536
|
+
|
|
19537
|
+
function ResourceCard(_a) {
|
|
19538
|
+
var title = _a.title, description = _a.description, chip = _a.chip, support = _a.support, imageUrl = _a.imageUrl, primaryAction = _a.primaryAction, _b = _a.primaryActionLabel, primaryActionLabel = _b === void 0 ? "Action" : _b, secondaryAction = _a.secondaryAction, _c = _a.secondaryActionLabel, secondaryActionLabel = _c === void 0 ? "Secondary Action" : _c, _d = _a.additionalActions, additionalActions = _d === void 0 ? [] : _d, className = _a.className;
|
|
19539
|
+
var _e = React.useState(undefined), menuAnchor = _e[0], setMenuAnchor = _e[1];
|
|
19540
|
+
var hasAdditionalActions = additionalActions.length > 0;
|
|
19541
|
+
var hasSecondaryOrAdditional = !!secondaryAction || hasAdditionalActions;
|
|
19542
|
+
var isSinglePrimaryAction = !!primaryAction && !hasSecondaryOrAdditional;
|
|
19543
|
+
var showHoverOverlay = !isSinglePrimaryAction && (!!primaryAction || hasSecondaryOrAdditional);
|
|
19544
|
+
function handleCardClick() {
|
|
19545
|
+
if (isSinglePrimaryAction && primaryAction) {
|
|
19546
|
+
primaryAction();
|
|
19547
|
+
}
|
|
19548
|
+
}
|
|
19549
|
+
function handleCardKeyDown(event) {
|
|
19550
|
+
if (!isSinglePrimaryAction || !primaryAction) {
|
|
19551
|
+
return;
|
|
19552
|
+
}
|
|
19553
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
19554
|
+
event.preventDefault();
|
|
19555
|
+
primaryAction();
|
|
19556
|
+
}
|
|
19557
|
+
}
|
|
19558
|
+
function handlePrimaryActionClick(event) {
|
|
19559
|
+
event.stopPropagation();
|
|
19560
|
+
primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction();
|
|
19561
|
+
}
|
|
19562
|
+
function handleSecondaryActionClick(event) {
|
|
19563
|
+
event.stopPropagation();
|
|
19564
|
+
secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction();
|
|
19565
|
+
}
|
|
19566
|
+
function handleMenuOpen(event) {
|
|
19567
|
+
event.stopPropagation();
|
|
19568
|
+
setMenuAnchor(event.currentTarget);
|
|
19569
|
+
}
|
|
19570
|
+
function handleMenuClose() {
|
|
19571
|
+
setMenuAnchor(undefined);
|
|
19572
|
+
}
|
|
19573
|
+
var classes = classNames("resourceCard-component-v2", className, {
|
|
19574
|
+
clickable: isSinglePrimaryAction,
|
|
19575
|
+
menuOpen: !!menuAnchor,
|
|
19576
|
+
});
|
|
19577
|
+
return (React.createElement(Card, { className: classes, onClick: isSinglePrimaryAction ? handleCardClick : undefined, onKeyDown: isSinglePrimaryAction ? handleCardKeyDown : undefined, role: isSinglePrimaryAction ? "button" : undefined, tabIndex: isSinglePrimaryAction ? 0 : undefined },
|
|
19578
|
+
React.createElement(Stack$1, { className: "content", spacing: 0 },
|
|
19579
|
+
React.createElement(Stack$1, { className: "header", direction: "row", justifyContent: "space-between", alignItems: "flex-start" },
|
|
19580
|
+
React.createElement(Stack$1, { className: "titleSection", spacing: 0.5 },
|
|
19581
|
+
React.createElement(Typography, { variant: "body1L", semiBold: true, noWrap: true }, title),
|
|
19582
|
+
description &&
|
|
19583
|
+
React.createElement(Typography, { variant: "body2L", color: "silver.main", noWrap: true }, description),
|
|
19584
|
+
support &&
|
|
19585
|
+
React.createElement("div", { className: "support" }, support)),
|
|
19586
|
+
chip &&
|
|
19587
|
+
React.createElement(Stack$1, { className: "chip", alignItems: "flex-end" }, chip)),
|
|
19588
|
+
React.createElement("div", { className: classNames("imageContainer", { hasOverlay: showHoverOverlay }) },
|
|
19589
|
+
imageUrl
|
|
19590
|
+
? React.createElement("img", { src: imageUrl, alt: title })
|
|
19591
|
+
: React.createElement("div", { className: "imagePlaceholder", "aria-hidden": "true" }),
|
|
19592
|
+
showHoverOverlay &&
|
|
19593
|
+
React.createElement("div", { className: "overlay" },
|
|
19594
|
+
React.createElement(Stack$1, { className: "actions", spacing: 1 },
|
|
19595
|
+
primaryAction &&
|
|
19596
|
+
React.createElement(Button, { variant: "contained", color: "secondary", onClick: handlePrimaryActionClick }, primaryActionLabel),
|
|
19597
|
+
secondaryAction &&
|
|
19598
|
+
React.createElement(Button, { variant: "contained", color: "white", onClick: handleSecondaryActionClick }, secondaryActionLabel),
|
|
19599
|
+
hasAdditionalActions &&
|
|
19600
|
+
React.createElement(React.Fragment, null,
|
|
19601
|
+
React.createElement(Button$1, { className: "moreButton", variant: "contained", onClick: handleMenuOpen }, "..."),
|
|
19602
|
+
React.createElement(DropMenu, { options: additionalActions, popoverProps: {
|
|
19603
|
+
anchorEl: menuAnchor,
|
|
19604
|
+
open: !!menuAnchor,
|
|
19605
|
+
onClose: handleMenuClose,
|
|
19606
|
+
} }))))))));
|
|
19607
|
+
}
|
|
19608
|
+
|
|
19609
|
+
function computeResourceCardGridColumns(_a) {
|
|
19610
|
+
var containerWidth = _a.containerWidth, maxCardWidth = _a.maxCardWidth, minCardWidth = _a.minCardWidth, gap = _a.gap;
|
|
19611
|
+
if (containerWidth <= 0) {
|
|
19612
|
+
return 1;
|
|
19613
|
+
}
|
|
19614
|
+
var maxColumns = Math.max(1, Math.floor((containerWidth + gap) / (minCardWidth + gap)));
|
|
19615
|
+
for (var columnCount = 1; columnCount <= maxColumns; columnCount++) {
|
|
19616
|
+
var cardWidth = (containerWidth - (columnCount - 1) * gap) / columnCount;
|
|
19617
|
+
if (cardWidth <= maxCardWidth) {
|
|
19618
|
+
return columnCount;
|
|
19619
|
+
}
|
|
19620
|
+
}
|
|
19621
|
+
return maxColumns;
|
|
19622
|
+
}
|
|
19623
|
+
|
|
19624
|
+
var css_248z$5 = ".resourceCardGrid-component-v2 {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n gap: var(--resource-card-grid-gap, 1.5rem);\n grid-template-columns: repeat(var(--resource-card-grid-columns, 1), minmax(0, 1fr));\n align-items: stretch;\n}\n.resourceCardGrid-component-v2 > .resourceCard-component-v2 {\n width: 100%;\n min-width: 0;\n}";
|
|
19625
|
+
styleInject(css_248z$5);
|
|
19626
|
+
|
|
19627
|
+
var DEFAULT_MAX_CARD_WIDTH = 455;
|
|
19628
|
+
var DEFAULT_MIN_CARD_WIDTH = 240;
|
|
19629
|
+
var DEFAULT_GAP = 24;
|
|
19630
|
+
function ResourceCardGrid(_a) {
|
|
19631
|
+
var children = _a.children, _b = _a.maxCardWidth, maxCardWidth = _b === void 0 ? DEFAULT_MAX_CARD_WIDTH : _b, _c = _a.minCardWidth, minCardWidth = _c === void 0 ? DEFAULT_MIN_CARD_WIDTH : _c, _d = _a.gap, gap = _d === void 0 ? DEFAULT_GAP : _d, className = _a.className;
|
|
19632
|
+
var containerRef = React.useRef(null);
|
|
19633
|
+
var _e = React.useState(1), columnCount = _e[0], setColumnCount = _e[1];
|
|
19634
|
+
React.useLayoutEffect(function () {
|
|
19635
|
+
var container = containerRef.current;
|
|
19636
|
+
if (!container) {
|
|
19637
|
+
return;
|
|
19638
|
+
}
|
|
19639
|
+
function updateLayout() {
|
|
19640
|
+
var element = containerRef.current;
|
|
19641
|
+
if (!element) {
|
|
19642
|
+
return;
|
|
19643
|
+
}
|
|
19644
|
+
var width = element.getBoundingClientRect().width;
|
|
19645
|
+
setColumnCount(computeResourceCardGridColumns({
|
|
19646
|
+
containerWidth: width,
|
|
19647
|
+
maxCardWidth: maxCardWidth,
|
|
19648
|
+
minCardWidth: minCardWidth,
|
|
19649
|
+
gap: gap,
|
|
19650
|
+
}));
|
|
19651
|
+
}
|
|
19652
|
+
updateLayout();
|
|
19653
|
+
var resizeObserver = new ResizeObserver(updateLayout);
|
|
19654
|
+
resizeObserver.observe(container);
|
|
19655
|
+
window.addEventListener("resize", updateLayout);
|
|
19656
|
+
return function () {
|
|
19657
|
+
resizeObserver.disconnect();
|
|
19658
|
+
window.removeEventListener("resize", updateLayout);
|
|
19659
|
+
};
|
|
19660
|
+
}, [gap, maxCardWidth, minCardWidth]);
|
|
19661
|
+
var classes = classNames("resourceCardGrid-component-v2", className);
|
|
19662
|
+
var gridStyle = {
|
|
19663
|
+
"--resource-card-grid-columns": columnCount,
|
|
19664
|
+
"--resource-card-grid-gap": "".concat(gap, "px"),
|
|
19665
|
+
};
|
|
19666
|
+
return (React.createElement(Box, { ref: containerRef, className: classes, style: gridStyle }, children));
|
|
19667
|
+
}
|
|
19668
|
+
|
|
19534
19669
|
function Radio(_a) {
|
|
19535
19670
|
var props = __rest(_a, []);
|
|
19536
19671
|
return React.createElement(material.Radio, __assign({}, props));
|
|
@@ -21496,6 +21631,8 @@ exports.PhoneTextField = PhoneTextField;
|
|
|
21496
21631
|
exports.PopupModel = PopupModel;
|
|
21497
21632
|
exports.PopupsFactory = PopupsFactory;
|
|
21498
21633
|
exports.Radio = Radio;
|
|
21634
|
+
exports.ResourceCard = ResourceCard;
|
|
21635
|
+
exports.ResourceCardGrid = ResourceCardGrid;
|
|
21499
21636
|
exports.ResourceEdit = ResourceEdit;
|
|
21500
21637
|
exports.ScopePicker = ScopePicker;
|
|
21501
21638
|
exports.Search = Search;
|
|
@@ -21541,6 +21678,7 @@ exports.capitalizeFirstLetter = capitalizeFirstLetter;
|
|
|
21541
21678
|
exports.cleanPostHogId = cleanPostHogId;
|
|
21542
21679
|
exports.clearImpersonificationTree = clearImpersonificationTree;
|
|
21543
21680
|
exports.clearStorage = clearStorage;
|
|
21681
|
+
exports.computeResourceCardGridColumns = computeResourceCardGridColumns;
|
|
21544
21682
|
exports.copyToClipboard = copyToClipboard;
|
|
21545
21683
|
exports.createAccount = createAccount;
|
|
21546
21684
|
exports.createBrand = createBrand;
|