@galaxy-ds/core 1.1.47 → 1.1.51

package/dist/index.js

@@ -35671,7 +35671,7 @@ var Dialog = function (props) {
         default:
             variantIcon = platform === 'web' ? React__default["default"].createElement(InfoCircleIcon, null) : React__default["default"].createElement(InfoIcon, null);
     }
-    return (React__default["default"].createElement(Dialog$2, { className: clsx(classes.root, 'gds-modal', platform === 'web' ? 'gds-modal--web' : 'gds-modal--desktop'), open: props.open, closeAfterTransition: true, hideBackdrop: true },
+    return (React__default["default"].createElement(Dialog$2, { className: clsx(classes.root, 'gds-modal', platform === 'web' ? 'gds-modal--web' : 'gds-modal--desktop'), open: props.open, closeAfterTransition: true, hideBackdrop: true, onClose: props.handleClose },
         React__default["default"].createElement("div", { className: clsx(classes.root, 'gds-modal_paper') },
             React__default["default"].createElement("div", { className: clsx(classes.root, 'gds-modal_header') },
                 platform === 'web' ? ('') : (React__default["default"].createElement(LeapLogoIcon, { className: clsx(classes.root, 'gds-modal_logo') })),
@@ -35685,7 +35685,8 @@ var Dialog = function (props) {
                 React__default["default"].createElement(DialogActions$1, null, children)))));
 };
 
-var useStyles$a = makeStyles(function () {
+// Use theme.shape.borderRadius to detect if it's Desktop or not
+var useStyles$a = makeStyles(function (theme) {
     return createStyles({
         bgWrapper: function (props) { return ({
             background: "url(" + props.bgImageURL + ") no-repeat",
@@ -35693,18 +35694,37 @@ var useStyles$a = makeStyles(function () {
             backgroundPosition: props.bgPosition + " center",
             backgroundColor: props.bgColor ? props.bgColor + " !important" : '',
         }); },
+        titleVis: function (props) { return ({
+            display: props.titleVisibility === undefined
+                ? theme.shape.borderRadius === 0
+                    ? ''
+                    : 'none'
+                : props.titleVisibility
+                    ? ''
+                    : 'none',
+        }); },
+        containerDivider: function (props) { return ({
+            borderLeft: props.divider === undefined
+                ? theme.shape.borderRadius === 0
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none'
+                : props.divider
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none',
+        }); },
     });
 });
 var HeaderToolbar = function (_a) {
-    var title = _a.title, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _b = _a.bgPosition, bgPosition = _b === void 0 ? 'center' : _b, bgSize = _a.bgSize; __rest(_a, ["title", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize"]);
-    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize });
-    return (React__default["default"].createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper) },
-        React__default["default"].createElement(Box$2, { display: "flex", justifyContent: "space-between", style: { width: '100%' } },
+    var _b;
+    var title = _a.title, titleVisibility = _a.titleVisibility, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _c = _a.bgPosition, bgPosition = _c === void 0 ? 'center' : _c, bgSize = _a.bgSize, divider = _a.divider; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider"]);
+    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize, titleVisibility: titleVisibility, divider: divider });
+    return (React__default["default"].createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper, (_b = {}, _b['with-title'] = titleVisibility, _b)) },
+        React__default["default"].createElement(Box$2, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", style: { width: '100%' } },
             React__default["default"].createElement(Box$2, { display: "flex", flexDirection: "column", justifyContent: "stretch" },
-                title && (React__default["default"].createElement(Box$2, { className: "gds-header-toolbar-title", mb: 3 },
+                title && (React__default["default"].createElement(Box$2, { className: clsx("gds-header-toolbar-title", classes.titleVis), mb: 3 },
                     React__default["default"].createElement(Typography, { variant: "h1", color: "primary" }, title))),
                 left),
-            right && (React__default["default"].createElement(Box$2, { className: "gds-buttons-w-divider", borderLeft: "1px solid " + common.brand.utility.border }, right)))));
+            right && (React__default["default"].createElement(Box$2, { className: clsx("gds-buttons-w-divider", classes.containerDivider) }, right)))));
 };
 
 function LoaderIcon(props) {
@@ -45674,7 +45694,7 @@ styleInject(css_248z$2);
 var css_248z$1 = ".rdrCalendarWrapper{\n  color: #000000;\n  font-size: 12px;\n}\n\n.rdrDateDisplayWrapper{\n  background-color: rgb(239, 242, 247);\n}\n\n.rdrDateDisplay{\n  margin: 0.833em;\n}\n\n.rdrDateDisplayItem{\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);\n  border: 1px solid transparent;\n}\n\n.rdrDateDisplayItem input{\n    cursor: pointer;\n    height: 2.5em;\n    line-height: 2.5em;\n    border: 0px;\n    background: transparent;\n    width: 100%;\n    color: #849095;\n  }\n\n.rdrDateDisplayItemActive{\n  border-color: currentColor;\n}\n\n.rdrDateDisplayItemActive input{\n    color: #7d888d\n  }\n\n.rdrMonthAndYearWrapper {\n  align-items: center;\n  height: 60px;\n  padding-top: 10px;\n}\n\n.rdrMonthAndYearPickers{\n  font-weight: 600;\n}\n\n.rdrMonthAndYearPickers select{\n    -moz-appearance: none;\n         appearance: none;\n    -webkit-appearance: none;\n    border: 0;\n    background: transparent;\n    padding: 10px 30px 10px 10px;\n    border-radius: 4px;\n    outline: 0;\n    color: #3e484f;\n    background: url(\"data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>\") no-repeat;\n    background-position: right 8px center;\n    cursor: pointer;\n    text-align: center\n  }\n\n.rdrMonthAndYearPickers select:hover{\n      background-color: rgba(0,0,0,0.07);\n    }\n\n.rdrMonthPicker, .rdrYearPicker{\n  margin: 0 5px\n}\n\n.rdrNextPrevButton {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 0 0.833em;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  background: #EFF2F7\n}\n\n.rdrNextPrevButton:hover{\n    background: #E1E7F0;\n  }\n\n.rdrNextPrevButton i {\n    display: block;\n    width: 0;\n    height: 0;\n    padding: 0;\n    text-align: center;\n    border-style: solid;\n    margin: auto;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrPprevButton i {\n    border-width: 4px 6px 4px 4px;\n    border-color: transparent rgb(52, 73, 94) transparent transparent;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrNextButton i {\n    margin: 0 0 0 7px;\n    border-width: 4px 4px 4px 6px;\n    border-color: transparent transparent transparent rgb(52, 73, 94);\n    transform: translate(3px, 0px);\n  }\n\n.rdrWeekDays {\n  padding: 0 0.833em;\n}\n\n.rdrMonth{\n  padding: 0 0.833em 1.666em 0.833em;\n}\n\n.rdrMonth .rdrWeekDays {\n    padding: 0;\n  }\n\n.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{\n  display: none;\n}\n\n.rdrWeekDay {\n  font-weight: 400;\n  line-height: 2.667em;\n  color: rgb(132, 144, 149);\n}\n\n.rdrDay {\n  background: transparent;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border: 0;\n  padding: 0;\n  line-height: 3.000em;\n  height: 3.000em;\n  text-align: center;\n  color: #1d2429\n}\n\n.rdrDay:focus {\n    outline: 0;\n  }\n\n.rdrDayNumber {\n  outline: 0;\n  font-weight: 300;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  top: 5px;\n  bottom: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.rdrDayToday .rdrDayNumber span{\n  font-weight: 500\n}\n\n.rdrDayToday .rdrDayNumber span:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    left: 50%;\n    transform: translate(-50%, 0);\n    width: 18px;\n    height: 2px;\n    border-radius: 2px;\n    background: #3d91ff;\n  }\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{\n      background: #fff;\n    }\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{\n          color: rgba(255, 255, 255, 0.85);\n        }\n\n.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{\n  background: currentColor;\n  position: absolute;\n  top: 5px;\n  left: 0;\n  right: 0;\n  bottom: 5px;\n}\n\n.rdrSelected{\n  left: 2px;\n  right: 2px;\n}\n\n.rdrInRange{}\n\n.rdrStartEdge{\n  border-top-left-radius: 1.042em;\n  border-bottom-left-radius: 1.042em;\n  left: 2px;\n}\n\n.rdrEndEdge{\n  border-top-right-radius: 1.042em;\n  border-bottom-right-radius: 1.042em;\n  right: 2px;\n}\n\n.rdrSelected{\n  border-radius: 1.042em;\n}\n\n.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{\n    border-top-left-radius: 1.042em;\n    border-bottom-left-radius: 1.042em;\n    left: 2px;\n  }\n\n.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{\n    border-top-right-radius: 1.042em;\n    border-bottom-right-radius: 1.042em;\n    right: 2px;\n  }\n\n.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{\n    border-top-left-radius: 1.333em;\n    border-bottom-left-radius: 1.333em;\n    border-left-width: 1px;\n    left: 0px;\n  }\n\n.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{\n   border-top-right-radius: 1.333em;\n   border-bottom-right-radius: 1.333em;\n   border-right-width: 1px;\n   right: 0px;\n }\n\n.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{\n  background: rgba(255, 255, 255, 0.09);\n  position: absolute;\n  top: 3px;\n  left: 0px;\n  right: 0px;\n  bottom: 3px;\n  pointer-events: none;\n  border: 0px solid currentColor;\n  z-index: 1;\n}\n\n.rdrDayStartPreview{\n  border-top-width: 1px;\n  border-left-width: 1px;\n  border-bottom-width: 1px;\n  border-top-left-radius: 1.333em;\n  border-bottom-left-radius: 1.333em;\n  left: 0px;\n}\n\n.rdrDayInPreview{\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.rdrDayEndPreview{\n  border-top-width: 1px;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  border-top-right-radius: 1.333em;\n  border-bottom-right-radius: 1.333em;\n  right: 2px;\n  right: 0px;\n}\n\n.rdrDefinedRangesWrapper{\n  font-size: 12px;\n  width: 226px;\n  border-right: solid 1px #eff2f7;\n  background: #fff;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected{\n    color: currentColor;\n    font-weight: 600;\n  }\n\n.rdrStaticRange{\n  border: 0;\n  cursor: pointer;\n  display: block;\n  outline: 0;\n  border-bottom: 1px solid #eff2f7;\n  padding: 0;\n  background: #fff\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{\n      background: #eff2f7;\n    }\n\n.rdrStaticRangeLabel{\n  display: block;\n  outline: 0;\n  line-height: 18px;\n  padding: 10px 20px;\n  text-align: left;\n}\n\n.rdrInputRanges{\n  padding: 10px 0;\n}\n\n.rdrInputRange{\n  align-items: center;\n  padding: 5px 20px;\n}\n\n.rdrInputRangeInput{\n  width: 30px;\n  height: 30px;\n  line-height: 30px;\n  border-radius: 4px;\n  text-align: center;\n  border: solid 1px rgb(222, 231, 235);\n  margin-right: 10px;\n  color: rgb(108, 118, 122)\n}\n\n.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{\n    border-color: rgb(180, 191, 196);\n    outline: 0;\n    color: #333;\n  }\n\n.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{\n  content: '';\n  border: 1px solid currentColor;\n  border-radius: 1.333em;\n  position: absolute;\n  top: -2px;\n  bottom: -2px;\n  left: 0px;\n  right: 0px;\n  background: transparent;\n}\n\n.rdrDayPassive{\n  pointer-events: none;\n}\n\n.rdrDayPassive .rdrDayNumber span{\n    color: #d5dce0;\n  }\n\n.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{\n    display: none;\n  }\n\n.rdrDayDisabled {\n  background-color: rgb(248, 248, 248);\n}\n\n.rdrDayDisabled .rdrDayNumber span{\n    color: #aeb9bf;\n  }\n\n.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{\n    filter: grayscale(100%) opacity(60%);\n  }\n\n.rdrMonthName{\n  text-align: left;\n  font-weight: 600;\n  color: #849095;\n  padding: 0.833em;\n}\n";
 styleInject(css_248z$1);
 
-var css_248z = ".leap-4d-date-picker {\n  --primary: #1e365e;\n  --primary-lighter: #0060aa;\n  --selection-bg-color: #dceef9;\n  --text-default: #444;\n  --text-grey-secondary: #6b6b6b;\n  --text-muted: #aab0b8;\n  --background-grey: #eee;\n  --background-grey-lighter: #f3f3f3;\n  --border-color: #d8d8d8;\n  --input-focus-color: #32abe2;\n}\n\n.leap-4d-date-picker.rdrDateRangePickerWrapper,\n.leap-4d-calendar.rdrCalendarWrapper {\n  box-shadow: 0 0 1px rgba(0, 0, 0, 1);\n}\n\n/* Defined Ranges */\n.rdrDefinedRangesWrapper {\n  width: 120px;\n  border-color: var(--border-color);\n}\n\n.rdrInputRanges {\n  display: none;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected {\n  color: var(--primary) !important;\n  background-color: var(--selection-bg-color);\n}\n\n.rdrStaticRangeLabel {\n  line-height: 1rem;\n  padding: 0.625rem 1.5rem;\n}\n\n/* Calendar */\n.rdrDateDisplayWrapper {\n  background-color: var(--background-grey);\n}\n\n.rdrDateDisplay {\n  margin: 0.5rem 0.75rem;\n}\n\n.rdrDateDisplayItem {\n  border-radius: 2px;\n}\n\n.rdrDateDisplayItem input {\n  height: 1.5rem;\n  line-height: 1.5rem;\n}\n\n.rdrDateDisplayItemActive {\n  border-color: var(--input-focus-color);\n}\n\n.rdrMonthAndYearWrapper {\n  height: 2rem;\n  padding-top: 0;\n  /* background-color: var(--background-grey-lighter); */\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n}\n\n.leap-4d-calendar .rdrMonthAndYearWrapper {\n  border-top: none;\n}\n\n.rdrMonthAndYearPickers select {\n  padding: 8px 24px 8px 8px;\n  font-size: 13px;\n  color: var(--primary);\n  border-radius: 0;\n}\n\n.rdrMonthAndYearPickers select:hover {\n  background-color: var(--selection-bg-color);\n}\n\n.rdrMonthName {\n  padding: 0.5rem 0.5rem 0.25rem;\n  text-align: center;\n  color: var(--text-grey-secondary);\n}\n\n.rdrMonth {\n  padding: 0 1em 0.5em;\n  width: 18.5em;\n}\n\n.rdrMonth:only-child {\n  width: 100%;\n}\n\n.rdrDay {\n  height: 2em;\n  line-height: 2em;\n}\n\n.rdrWeekDay {\n  color: var(--text-muted);\n  font-weight: 600;\n  line-height: 2em;\n}\n\n.rdrSelected,\n.rdrInRange,\n.rdrStartEdge,\n.rdrEndEdge {\n  top: 1px;\n  bottom: 1px;\n}\n\n.rdrDayNumber span {\n  color: var(--text-default);\n}\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {\n  color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span {\n  font-weight: 600;\n}\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {\n  background-color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span:after {\n  background-color: var(--primary);\n  bottom: -1px;\n  width: 15px;\n  height: 1px;\n}\n\n.rdrNextPrevButton {\n  margin: 0 0.75rem;\n  background: none;\n}\n\n.rdrNextPrevButton i {\n  width: 24px;\n  height: 24px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3964 7.14645C12.5917 6.95118 12.9083 6.95118 13.1036 7.14645L17.6036 11.6464C17.7988 11.8417 17.7988 12.1583 17.6036 12.3536L13.1036 16.8536C12.9083 17.0488 12.5917 17.0488 12.3964 16.8536C12.2012 16.6583 12.2012 16.3417 12.3964 16.1464L16.0429 12.5H6.75C6.47386 12.5 6.25 12.2761 6.25 12C6.25 11.7239 6.47386 11.5 6.75 11.5H16.0429L12.3964 7.85355C12.2012 7.65829 12.2012 7.34171 12.3964 7.14645Z' fill='%231E365E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5Z' fill='%231E365E'/%3E%3C/svg%3E%0A\");\n  background-repeat: no-repeat;\n  padding: 0;\n  margin: 0;\n}\n\n.rdrPprevButton i {\n  border: none;\n  transform: rotate(-180deg);\n}\n\n.rdrNextButton i {\n  border: none;\n  transform: none;\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,\n.rdrStaticRange:focus .rdrStaticRangeLabel {\n  background-color: var(--selection-bg-color);\n}\n";
+var css_248z = ".leap-4d-date-picker {\n  --primary: #1e365e;\n  --primary-lighter: #0060aa;\n  --selection-bg-color: #dceef9;\n  --text-default: #444;\n  --text-grey-secondary: #6b6b6b;\n  --text-muted: #aab0b8;\n  --background-grey: #eee;\n  --background-grey-lighter: #f3f3f3;\n  --border-color: #d8d8d8;\n  --input-focus-color: #32abe2;\n}\n\n.leap-4d-date-picker.rdrDateRangePickerWrapper,\n.leap-4d-calendar.rdrCalendarWrapper {\n  box-shadow: 0 0 1px rgba(0, 0, 0, 1);\n}\n\n/* Defined Ranges */\n.rdrDefinedRangesWrapper {\n  width: 120px;\n  border-color: var(--border-color);\n}\n\n.rdrInputRanges {\n  display: none;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected {\n  color: var(--primary) !important;\n  background-color: var(--selection-bg-color);\n}\n\n.rdrStaticRangeLabel {\n  line-height: 1rem;\n  padding: 0.625rem 1.5rem;\n}\n\n/* Calendar */\n.rdrDateDisplayWrapper {\n  background-color: var(--background-grey);\n}\n\n.rdrDateDisplay {\n  margin: 0.5rem 0.75rem;\n}\n\n.rdrDateDisplayItem {\n  border-radius: 2px;\n}\n\n.rdrDateDisplayItem input {\n  height: 1.5rem;\n  line-height: 1.5rem;\n}\n\n.rdrDateDisplayItemActive {\n  border-color: var(--input-focus-color);\n}\n\n.rdrMonthAndYearWrapper {\n  height: 2rem;\n  padding-top: 0;\n  /* background-color: var(--background-grey-lighter); */\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n}\n\n.leap-4d-calendar .rdrMonthAndYearWrapper {\n  border-top: none;\n}\n\n.rdrMonthAndYearPickers select {\n  padding: 8px 24px 8px 8px;\n  font-size: 13px;\n  color: var(--primary);\n  border-radius: 0;\n}\n\n.rdrMonthAndYearPickers select:hover {\n  background-color: var(--selection-bg-color);\n}\n\n.rdrMonthAndYearPickers select option {\n  background-color: white;\n}\n\n.rdrMonthName {\n  padding: 0.5rem 0.5rem 0.25rem;\n  text-align: center;\n  color: var(--text-grey-secondary);\n}\n\n.rdrMonth {\n  padding: 0 1em 0.5em;\n  width: 18.5em;\n}\n\n.rdrMonth:only-child {\n  width: 100%;\n}\n\n.rdrDay {\n  height: 2em;\n  line-height: 2em;\n}\n\n.rdrWeekDay {\n  color: var(--text-muted);\n  font-weight: 600;\n  line-height: 2em;\n}\n\n.rdrSelected,\n.rdrInRange,\n.rdrStartEdge,\n.rdrEndEdge {\n  top: 1px;\n  bottom: 1px;\n}\n\n.rdrDayNumber span {\n  color: var(--text-default);\n}\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,\n.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {\n  color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span {\n  font-weight: 600;\n}\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,\n.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {\n  background-color: var(--primary);\n}\n\n.rdrDayToday .rdrDayNumber span:after {\n  background-color: var(--primary);\n  bottom: -1px;\n  width: 15px;\n  height: 1px;\n}\n\n.rdrNextPrevButton {\n  margin: 0 0.75rem;\n  background: none;\n}\n\n.rdrNextPrevButton i {\n  width: 24px;\n  height: 24px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3964 7.14645C12.5917 6.95118 12.9083 6.95118 13.1036 7.14645L17.6036 11.6464C17.7988 11.8417 17.7988 12.1583 17.6036 12.3536L13.1036 16.8536C12.9083 17.0488 12.5917 17.0488 12.3964 16.8536C12.2012 16.6583 12.2012 16.3417 12.3964 16.1464L16.0429 12.5H6.75C6.47386 12.5 6.25 12.2761 6.25 12C6.25 11.7239 6.47386 11.5 6.75 11.5H16.0429L12.3964 7.85355C12.2012 7.65829 12.2012 7.34171 12.3964 7.14645Z' fill='%231E365E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5Z' fill='%231E365E'/%3E%3C/svg%3E%0A\");\n  background-repeat: no-repeat;\n  padding: 0;\n  margin: 0;\n}\n\n.rdrPprevButton i {\n  border: none;\n  transform: rotate(-180deg);\n}\n\n.rdrNextButton i {\n  border: none;\n  transform: none;\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,\n.rdrStaticRange:focus .rdrStaticRangeLabel {\n  background-color: var(--selection-bg-color);\n}\n";
 styleInject(css_248z);
 
 var DateRangePicker = function (_a) {
@@ -47807,15 +47827,15 @@ var themeWeb = createTheme({
                     minHeight: 50,
                     paddingLeft: 16,
                     paddingRight: 16,
-                    '& .gds-header-toolbar-title': {
-                        display: 'none',
-                    },
                     '& .gds-buttons-w-divider': {
-                        borderLeft: 'none',
+                        paddingLeft: 16,
                     },
                     '& .MuiInputBase-root, & .MuiButtonBase-root': {
                         maxHeight: 32,
                     },
+                    '&.with-title': {
+                        padding: 16,
+                    }
                 },
             },
         },