scorer-ui-kit 2.7.0 → 2.8.1

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/index.js CHANGED
@@ -2342,7 +2342,7 @@ var Input = function Input(_ref4) {
2342
2342
 
2343
2343
  var _excluded$5 = ["htmlFor", "labelText", "direction", "rightAlign", "required", "children"];
2344
2344
  var _templateObject$i, _templateObject2$c, _templateObject3$b, _templateObject4$a, _templateObject5$8;
2345
- var LabelText = styled__default.span(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
2345
+ var LabelText = styled__default.span(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n align-items: center;\n gap: 8px;\n \n ", "\n"])), function (_ref) {
2346
2346
  var required = _ref.required;
2347
2347
  return required && styled.css(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: var(--input-required-dot-display);\n height: 8px;\n width: 8px;\n background-color: var(--primary-9);\n border-radius: 4px;\n }\n "])));
2348
2348
  });
@@ -7487,7 +7487,7 @@ var ToggleButton = function ToggleButton(_ref) {
7487
7487
  }
7488
7488
  }, {
7489
7489
  design: design
7490
- }, props), categoryLabel + " : " + options[selectedIndex].text);
7490
+ }, props), categoryLabel && categoryLabel + ": ", "" + options[selectedIndex].text);
7491
7491
  };
7492
7492
 
7493
7493
  var _templateObject$U, _templateObject2$M, _templateObject3$H;
@@ -12236,60 +12236,100 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
12236
12236
  }, rightButtonText)));
12237
12237
  };
12238
12238
 
12239
- var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$10, _templateObject5$W, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$g, _templateObject11$b, _templateObject12$a, _templateObject13$9;
12240
- var Container$Y = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n margin-top: var(--utility-header-padding-top);\n padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n height: 48px;\n width: 100%;\n display: flex;\n"])));
12241
- var LeftArea = styled__default.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
12242
- var BackLinkIcon = styled__default.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n flex: 1; \n > div {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
12243
- var BackLink = styled__default(reactRouterDom.Link)(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n margin-left: ", ";\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n ", "\n"])), function (props) {
12244
- return props.$iconInGutter ? '-24px' : '0';
12245
- }, BackLinkIcon, BackLinkIcon, function (_ref) {
12246
- var $showDivider = _ref.$showDivider;
12247
- return $showDivider && styled.css(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: inline-block;\n height: 12px;\n width: 1px;\n padding-left: 8px;\n border-right: 1px solid var(--grey-10);\n }\n "])));
12248
- });
12249
- var ExtraActionIcon = styled__default.div(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
12250
- var ExtraAction = styled__default.button(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n cursor: pointer;\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n"])), ExtraActionIcon, ExtraActionIcon);
12251
- var Breadcrumbs = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
12252
- var Breadcrumb = styled__default.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n"])));
12253
- var BreadcrumbIcon = styled__default.div(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
12254
- var HomeIcon = styled__default(BreadcrumbIcon)(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n padding-bottom: 1px;\n svg path {\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n"])));
12255
- var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n transition: color var(--speed-normal) var(--easing-primary-out);\n\n &:hover {\n color: var(--grey-12);\n ", " svg {\n path {\n stroke: var(--grey-12);\n }\n }\n }\n"])), HomeIcon);
12256
- var RightArea = styled__default.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
12257
- var UtilityHeader = function UtilityHeader(_ref2) {
12258
- var _ref2$showBreadcrumbs = _ref2.showBreadcrumbs,
12259
- showBreadcrumbs = _ref2$showBreadcrumbs === void 0 ? true : _ref2$showBreadcrumbs,
12260
- _ref2$breadcrumbs = _ref2.breadcrumbs,
12261
- breadcrumbs = _ref2$breadcrumbs === void 0 ? [] : _ref2$breadcrumbs,
12262
- _ref2$showHomeIcon = _ref2.showHomeIcon,
12263
- showHomeIcon = _ref2$showHomeIcon === void 0 ? true : _ref2$showHomeIcon,
12264
- backLink = _ref2.backLink,
12265
- _ref2$$iconInGutter = _ref2.$iconInGutter,
12266
- $iconInGutter = _ref2$$iconInGutter === void 0 ? true : _ref2$$iconInGutter,
12267
- _ref2$showShareLink = _ref2.showShareLink,
12268
- showShareLink = _ref2$showShareLink === void 0 ? false : _ref2$showShareLink,
12269
- shareLink = _ref2.shareLink;
12270
- var _useState = React.useState("Share"),
12239
+ var _templateObject$1s, _templateObject2$1d;
12240
+ var ExtraActionIcon = styled__default.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n"])));
12241
+ var ExtraAction = styled__default.button(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n cursor: pointer;\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n \n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n"])), ExtraActionIcon, ExtraActionIcon);
12242
+ var UtilityHeaderShare = function UtilityHeaderShare(_ref) {
12243
+ var show = _ref.show,
12244
+ link = _ref.link,
12245
+ _ref$label = _ref.label,
12246
+ label = _ref$label === void 0 ? 'Share' : _ref$label,
12247
+ _ref$copiedLabel = _ref.copiedLabel,
12248
+ copiedLabel = _ref$copiedLabel === void 0 ? 'Copied' : _ref$copiedLabel;
12249
+ var _useState = React.useState(label),
12271
12250
  copyActionText = _useState[0],
12272
12251
  setCopyActionText = _useState[1];
12273
12252
  var _useCopyToClipboard = useCopyToClipboard(),
12274
12253
  copyToClipboard = _useCopyToClipboard.copyToClipboard;
12275
- var hasBreadcrumbs = showBreadcrumbs && breadcrumbs.length > 0;
12276
12254
  var clickHandlerShareLink = React.useCallback(function () {
12277
- copyToClipboard(shareLink ? shareLink : window.location.href);
12278
- setCopyActionText("Copied");
12255
+ copyToClipboard(link ? link : window.location.href);
12256
+ setCopyActionText(copiedLabel);
12279
12257
  setTimeout(function () {
12280
- return setCopyActionText("Share");
12258
+ return setCopyActionText(copyActionText);
12281
12259
  }, 2000);
12282
- }, [shareLink, copyToClipboard]);
12283
- return React__default.createElement(Container$Y, null, React__default.createElement(LeftArea, null, backLink ? React__default.createElement(BackLink, Object.assign({
12284
- to: backLink,
12285
- "$showDivider": hasBreadcrumbs
12260
+ }, [link, copiedLabel, copyActionText, copyToClipboard]);
12261
+ React.useEffect(function () {
12262
+ setCopyActionText(label);
12263
+ }, [label]);
12264
+ if (!show) {
12265
+ return null;
12266
+ }
12267
+ return React__default.createElement(ExtraAction, {
12268
+ onClick: clickHandlerShareLink
12269
+ }, React__default.createElement(ExtraActionIcon, null, React__default.createElement(Icon, {
12270
+ icon: "Link",
12271
+ size: 16,
12272
+ color: "grey-10"
12273
+ })), copyActionText);
12274
+ };
12275
+
12276
+ var _templateObject$1t, _templateObject2$1e, _templateObject3$16;
12277
+ var BackLinkIcon = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 16px;\n height: 16px;\n justify-content: center;\n align-items: center;\n flex: 1;\n > div {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
12278
+ var BackLink = styled__default(reactRouterDom.Link)(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 0;\n align-items: center;\n gap: 8px;\n color: var(--grey-10);\n text-align: center;\n font-family: var(--font-ui);\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n border: none;\n background: none;\n text-decoration: none;\n transition: color 0.25s ease;\n margin-left: ", ";\n\n ", "{\n svg * {\n transition: stroke 0.25s ease;\n }\n }\n\n &:hover {\n color: var(--grey-12);\n ", "{\n svg * {\n stroke: var(--grey-12);\n }\n }\n }\n\n ", "\n"])), function (props) {
12279
+ return props.$iconInGutter ? '-24px' : '0';
12280
+ }, BackLinkIcon, BackLinkIcon, function (_ref) {
12281
+ var $showDivider = _ref.$showDivider;
12282
+ return $showDivider && styled.css(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n &::after {\n content: '';\n display: inline-block;\n height: 12px;\n width: 1px;\n padding-left: 8px;\n border-right: 1px solid var(--grey-10);\n }\n "])));
12283
+ });
12284
+ var UtilityHeaderBack = function UtilityHeaderBack(_ref2) {
12285
+ var _ref2$show = _ref2.show,
12286
+ show = _ref2$show === void 0 ? true : _ref2$show,
12287
+ link = _ref2.link,
12288
+ _ref2$label = _ref2.label,
12289
+ label = _ref2$label === void 0 ? 'Back' : _ref2$label,
12290
+ $showDivider = _ref2.$showDivider,
12291
+ $iconInGutter = _ref2.$iconInGutter;
12292
+ if (!show) {
12293
+ return null;
12294
+ }
12295
+ return React__default.createElement(BackLink, Object.assign({
12296
+ to: link
12286
12297
  }, {
12298
+ $showDivider: $showDivider,
12287
12299
  $iconInGutter: $iconInGutter
12288
12300
  }), React__default.createElement(BackLinkIcon, null, React__default.createElement(Icon, {
12289
12301
  icon: "Back",
12290
12302
  size: 16,
12291
12303
  color: "grey-10"
12292
- })), "Back") : null, hasBreadcrumbs ? React__default.createElement(Breadcrumbs, null, breadcrumbs.map(function (breadcrumb, index) {
12304
+ })), label);
12305
+ };
12306
+
12307
+ var _templateObject$1u, _templateObject2$1f, _templateObject3$17, _templateObject4$10, _templateObject5$W, _templateObject6$H, _templateObject7$D, _templateObject8$v;
12308
+ var Container$Y = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n margin-top: var(--utility-header-padding-top);\n padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n height: 48px;\n width: 100%;\n display: flex;\n"])));
12309
+ var LeftArea = styled__default.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
12310
+ var Breadcrumbs = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
12311
+ var Breadcrumb = styled__default.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n"])));
12312
+ var BreadcrumbIcon = styled__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
12313
+ var HomeIcon = styled__default(BreadcrumbIcon)(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n padding-bottom: 1px;\n svg path {\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n"])));
12314
+ var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n transition: color var(--speed-normal) var(--easing-primary-out);\n\n &:hover {\n color: var(--grey-12);\n ", " svg {\n path {\n stroke: var(--grey-12);\n }\n }\n }\n"])), HomeIcon);
12315
+ var RightArea = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n flex: 1;\n align-items: center;\n display: flex;\n justify-content: right;\n"])));
12316
+ var UtilityHeader = function UtilityHeader(_ref) {
12317
+ var _ref$showBreadcrumbs = _ref.showBreadcrumbs,
12318
+ showBreadcrumbs = _ref$showBreadcrumbs === void 0 ? true : _ref$showBreadcrumbs,
12319
+ _ref$breadcrumbs = _ref.breadcrumbs,
12320
+ breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
12321
+ _ref$showHomeIcon = _ref.showHomeIcon,
12322
+ showHomeIcon = _ref$showHomeIcon === void 0 ? true : _ref$showHomeIcon,
12323
+ back = _ref.back,
12324
+ share = _ref.share,
12325
+ _ref$$iconInGutter = _ref.$iconInGutter,
12326
+ $iconInGutter = _ref$$iconInGutter === void 0 ? true : _ref$$iconInGutter;
12327
+ var hasBreadcrumbs = showBreadcrumbs && breadcrumbs.length > 0;
12328
+ return React__default.createElement(Container$Y, null, React__default.createElement(LeftArea, null, back && React__default.createElement(UtilityHeaderBack, Object.assign({
12329
+ "$showDivider": hasBreadcrumbs
12330
+ }, {
12331
+ $iconInGutter: $iconInGutter
12332
+ }, back)), hasBreadcrumbs ? React__default.createElement(Breadcrumbs, null, breadcrumbs.map(function (breadcrumb, index) {
12293
12333
  var text = breadcrumb.text,
12294
12334
  href = breadcrumb.href;
12295
12335
  var isFirst = index === 0;
@@ -12307,13 +12347,7 @@ var UtilityHeader = function UtilityHeader(_ref2) {
12307
12347
  size: 6,
12308
12348
  color: 'grey-8'
12309
12349
  })) : null));
12310
- })) : null), React__default.createElement(RightArea, null, showShareLink ? React__default.createElement(ExtraAction, {
12311
- onClick: clickHandlerShareLink
12312
- }, React__default.createElement(ExtraActionIcon, null, React__default.createElement(Icon, {
12313
- icon: "Link",
12314
- size: 16,
12315
- color: "grey-10"
12316
- })), copyActionText) : null));
12350
+ })) : null), React__default.createElement(RightArea, null, React__default.createElement(UtilityHeaderShare, Object.assign({}, share))));
12317
12351
  };
12318
12352
 
12319
12353
  var TabContext = React__default.createContext({
@@ -12333,10 +12367,10 @@ var Tabs = function Tabs(_ref) {
12333
12367
  }, children);
12334
12368
  };
12335
12369
 
12336
- var _templateObject$1t, _templateObject2$1e, _templateObject3$17, _templateObject4$11, _templateObject5$X;
12337
- var Container$Z = styled__default.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
12338
- var HeaderArea = styled__default.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n 24px\n var(--content-layout-padding-right)\n 32px\n var(--content-layout-padding-left);\n \n"])));
12339
- var TabArea = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-4);\n"])));
12370
+ var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$11, _templateObject5$X;
12371
+ var Container$Z = styled__default.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n\n min-height: 100%;\n display: flex;\n"])));
12372
+ var HeaderArea = styled__default.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n 24px\n var(--content-layout-padding-right)\n 32px\n var(--content-layout-padding-left);\n \n"])));
12373
+ var TabArea = styled__default.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n border-bottom: 1px solid var(--grey-4);\n"])));
12340
12374
  var TabAreaInner = styled__default.div(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n flex: 1;\n width: 100%;\n padding: \n 0\n var(--content-layout-padding-right)\n 0\n var(--content-layout-padding-left);\n"])));
12341
12375
  var Content = styled__default.div(_templateObject5$X || (_templateObject5$X = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: var(--max-content-width);\n padding: \n var(--content-layout-padding-top)\n var(--content-layout-padding-right)\n var(--content-layout-padding-bottom)\n var(--content-layout-padding-left);\n\n display: flex;\n flex: 1;\n flex-direction: column;\n"])));
12342
12376
  var ContentLayout = function ContentLayout(_ref) {
@@ -12354,12 +12388,12 @@ var ContentLayout = function ContentLayout(_ref) {
12354
12388
  }, UtilityHeaderOptions ? React__default.createElement(UtilityHeader, Object.assign({}, UtilityHeaderOptions)) : null, PageHeaderArea ? React__default.createElement(HeaderArea, null, PageHeaderArea) : null, TabsElementArea ? React__default.createElement(Tabs, null, React__default.createElement(TabArea, null, React__default.createElement(TabAreaInner, null, TabsElementArea)), React__default.createElement(Content, null, children)) : React__default.createElement(Content, null, children));
12355
12389
  };
12356
12390
 
12357
- var _templateObject$1u, _templateObject2$1f;
12358
- var FullWidthContainer = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
12391
+ var _templateObject$1w, _templateObject2$1h;
12392
+ var FullWidthContainer = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n"])), function (_ref) {
12359
12393
  var $contentHeight = _ref.$contentHeight;
12360
12394
  return $contentHeight + 'px';
12361
12395
  });
12362
- var FullWidthInner = styled__default.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n input {width: 100%;}\n"])));
12396
+ var FullWidthInner = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n input {width: 100%;}\n"])));
12363
12397
  var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
12364
12398
  var children = _ref2.children;
12365
12399
  var innerElement = React.useRef(null);
@@ -12378,10 +12412,10 @@ var FullWidthContentBlock = function FullWidthContentBlock(_ref2) {
12378
12412
  }, children));
12379
12413
  };
12380
12414
 
12381
- var _templateObject$1v, _templateObject2$1g, _templateObject3$18, _templateObject4$12, _templateObject5$Y, _templateObject6$I, _templateObject7$E, _templateObject8$w;
12382
- var Inner$1 = styled__default.div(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
12383
- var Line = styled__default.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
12384
- var IconContainer$3 = styled__default.div(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
12415
+ var _templateObject$1x, _templateObject2$1i, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$I, _templateObject7$E, _templateObject8$w;
12416
+ var Inner$1 = styled__default.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 0 0 200px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
12417
+ var Line = styled__default.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n background: var(--grey-10);\n flex: 1;\n"])));
12418
+ var IconContainer$3 = styled__default.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n flex: 0 0 20px;\n svg {\n path {\n stroke: var(--grey-11);\n }\n }\n"])));
12385
12419
  var IconDefault = styled__default.svg(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n transform: ", ";\n"])), function (_ref) {
12386
12420
  var $layout = _ref.$layout;
12387
12421
  return $layout === 'horizontal' ? 'rotate(0deg)' : 'rotate(90deg)';
@@ -12446,12 +12480,12 @@ var ResizeLine = function ResizeLine(_ref4) {
12446
12480
  }))), React__default.createElement(Line, null)));
12447
12481
  };
12448
12482
 
12449
- var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$h, _templateObject11$c, _templateObject12$b, _templateObject13$a, _templateObject14$8, _templateObject15$6, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
12450
- var DebugData = styled__default.div(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 10;\n bottom: 20px;\n left: 20px;\n background: #ededed99;\n border: grey 1px solid;\n padding: 20px;\n line-height: 20px;\n font-size: 12px;\n div {\n display: block;\n }\n span {\n display: inline-block;\n width: 130px;\n font-weight: 600;\n }\n"])));
12451
- var MainArea = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
12483
+ var _templateObject$1y, _templateObject2$1j, _templateObject3$1a, _templateObject4$13, _templateObject5$Z, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$n, _templateObject10$g, _templateObject11$b, _templateObject12$a, _templateObject13$9, _templateObject14$8, _templateObject15$6, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
12484
+ var DebugData = styled__default.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 10;\n bottom: 20px;\n left: 20px;\n background: #ededed99;\n border: grey 1px solid;\n padding: 20px;\n line-height: 20px;\n font-size: 12px;\n div {\n display: block;\n }\n span {\n display: inline-block;\n width: 130px;\n font-weight: 600;\n }\n"])));
12485
+ var MainArea = styled__default.div(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 1;\n\n ", "\n"])), function (_ref) {
12452
12486
  var $layout = _ref.$layout,
12453
12487
  $minDimension = _ref.$minDimension;
12454
- return $layout === 'vertical' ? styled.css(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
12488
+ return $layout === 'vertical' ? styled.css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
12455
12489
  });
12456
12490
  var SideAreaInner = styled__default.div(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n display: flex;\n flex: 1;\n height: 100%;\n transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
12457
12491
  var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex: 0 0 ", "px;\n display: ", ";\n transition: \n min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n \n ", "\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref2) {
@@ -12469,22 +12503,22 @@ var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _
12469
12503
  var $layout = _ref5.$layout,
12470
12504
  $collapseState = _ref5.$collapseState,
12471
12505
  $minDimension = _ref5.$minDimension;
12472
- return $collapseState === 'collapsing' ? styled.css(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
12506
+ return $collapseState === 'collapsing' ? styled.css(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n transition: none;\n ", ";\n ", "{\n flex: 0 0 ", "px;\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension, $minDimension) : null;
12473
12507
  }, function (_ref6) {
12474
12508
  var $collapseState = _ref6.$collapseState;
12475
- return $collapseState === 'collapsed' ? styled.css(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
12509
+ return $collapseState === 'collapsed' ? styled.css(_templateObject10$g || (_templateObject10$g = _taggedTemplateLiteralLoose(["\n ", "{\n display: none;\n }\n "])), SideAreaInner) : null;
12476
12510
  }, function (_ref7) {
12477
12511
  var $layout = _ref7.$layout,
12478
12512
  $collapseState = _ref7.$collapseState,
12479
12513
  $minDimension = _ref7.$minDimension;
12480
- return $collapseState === 'peeking' ? styled.css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
12514
+ return $collapseState === 'peeking' ? styled.css(_templateObject11$b || (_templateObject11$b = _taggedTemplateLiteralLoose(["\n ", ";\n ", "{\n min-width: ", "px;\n opacity: 0.5;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
12481
12515
  }, function (_ref8) {
12482
12516
  var $layout = _ref8.$layout,
12483
12517
  $collapseState = _ref8.$collapseState,
12484
12518
  $minDimension = _ref8.$minDimension;
12485
- return $collapseState === 'opening' ? styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", "{\n min-width: ", "px;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
12519
+ return $collapseState === 'opening' ? styled.css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", "{\n min-width: ", "px;\n }\n "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
12486
12520
  });
12487
- var DragContainer = styled__default.div(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n flex: 0 0 ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: col-resize;\n \n > div {\n transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n }\n\n &:hover > div {\n opacity: 1;\n }\n\n ", "\n\n"])), function (_ref9) {
12521
+ var DragContainer = styled__default.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n flex: 0 0 ", "px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: col-resize;\n \n > div {\n transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n }\n\n &:hover > div {\n opacity: 1;\n }\n\n ", "\n\n"])), function (_ref9) {
12488
12522
  var $size = _ref9.$size;
12489
12523
  return $size;
12490
12524
  }, function (_ref10) {
@@ -12784,12 +12818,12 @@ var clampInt = function clampInt(value, lower, upper) {
12784
12818
  return clampedInt;
12785
12819
  };
12786
12820
 
12787
- var _templateObject$1x, _templateObject2$1i, _templateObject3$1a, _templateObject4$14, _templateObject5$_, _templateObject6$K, _templateObject7$G;
12821
+ var _templateObject$1z, _templateObject2$1k, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$K, _templateObject7$G;
12788
12822
  var MOBILE_CLOSE_HEIGHT = 50;
12789
12823
  var MOBILE_NAVBAR_HEIGHT = 68;
12790
- var Layout = styled__default.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
12791
- var MobileLayout = styled__default.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose([""])));
12792
- var Content$1 = styled__default.div(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
12824
+ var Layout = styled__default.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
12825
+ var MobileLayout = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose([""])));
12826
+ var Content$1 = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n padding: 0;\n flex: 1;\n overflow: auto;\n\n & > div {\n max-width: 1400px;\n }\n\n ", "\n"])), function (_ref) {
12793
12827
  var maxWidth = _ref.maxWidth;
12794
12828
  return maxWidth && styled.css(_templateObject4$14 || (_templateObject4$14 = _taggedTemplateLiteralLoose(["\n & > div {\n max-width: ", ";\n }\n "])), maxWidth);
12795
12829
  });
@@ -12801,28 +12835,28 @@ var ContentArea = styled__default.div(_templateObject6$K || (_templateObject6$K
12801
12835
  return legacyLayout && styled.css(_templateObject7$G || (_templateObject7$G = _taggedTemplateLiteralLoose(["\n padding: ", ";\n\n @media ", " {\n padding: ", ";\n }\n\n @media ", " {\n max-width: ", ";\n padding: ", ";\n }\n "])), paddingOverride ? paddingOverride : '40px 20px', deviceMediaQuery.medium, paddingOverride ? paddingOverride : '40px', deviceMediaQuery.large, maxWidth ? maxWidth : "1200px", paddingOverride ? paddingOverride : '70px 90px');
12802
12836
  });
12803
12837
 
12804
- var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$i, _templateObject11$d, _templateObject12$c, _templateObject13$b, _templateObject14$9, _templateObject15$7;
12805
- var ContextTitle = styled__default.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n opacity: 0;\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref) {
12838
+ var _templateObject$1A, _templateObject2$1l, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$o, _templateObject10$h, _templateObject11$c, _templateObject12$b, _templateObject13$a, _templateObject14$9, _templateObject15$7;
12839
+ var ContextTitle = styled__default.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n opacity: 0;\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref) {
12806
12840
  var compact = _ref.compact;
12807
- return compact && styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
12841
+ return compact && styled.css(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n font-size:14px;\n "])));
12808
12842
  });
12809
- var ContextIcon$1 = styled__default.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n background-color: var(--global-menu-icon-background-default);\n transition: background-color var(--speed-fast) var(--easing-primary-out);\n \n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])));
12843
+ var ContextIcon$1 = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n background-color: var(--global-menu-icon-background-default);\n transition: background-color var(--speed-fast) var(--easing-primary-out);\n \n flex: 0 0 40px;\n width: 40px;\n height: 40px;\n margin: 0 20px;\n\n border-radius: 7px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n svg {\n display: block;\n }\n"])));
12810
12844
  var ContextIndicator = styled__default.div(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n width: 12px;\n height: 12px;\n flex: 0 0 14px;\n margin: 0 20px 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n \n opacity: 0;\n transition: opacity 0 var(--easing-primary-out);\n\n svg {\n display: block;\n height: 12px;\n width: 12px;\n }\n"])));
12811
12845
  var ContextActionBaseCSS$1 = styled.css(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n -webkit-tap-highlight-color: transparent;\n border: none;\n background: none;\n display: flex;\n justify-content:left;\n align-items:center;\n flex-wrap: wrap;\n cursor: pointer;\n width: 100%;\n outline: none;\n padding: 0;\n text-decoration: none;\n font-family: var(--font-ui);\n font-weight: 500;\n font-size: 16px;\n color: var(--grey-11);\n\n &:hover{\n color: var(--grey-12);\n }\n"])));
12812
12846
  var StyledAnchor = styled__default.a(_templateObject6$L || (_templateObject6$L = _taggedTemplateLiteralLoose(["\n display: flex;\n text-decoration: none;\n"])));
12813
12847
  var ExternalIconWrapper = styled__default.div(_templateObject7$H || (_templateObject7$H = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
12814
12848
  var ContextWrapper = styled__default.div(_templateObject8$y || (_templateObject8$y = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n"])), ContextActionBaseCSS$1, function (_ref2) {
12815
12849
  var $menuOpen = _ref2.$menuOpen;
12816
- return $menuOpen && styled.css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
12850
+ return $menuOpen && styled.css(_templateObject9$o || (_templateObject9$o = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n"])), ContextTitle);
12817
12851
  }, ContextIcon$1, IconWrapper);
12818
- var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
12852
+ var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$h || (_templateObject10$h = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref3) {
12819
12853
  var $menuOpen = _ref3.$menuOpen;
12820
- return $menuOpen && styled.css(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
12854
+ return $menuOpen && styled.css(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n "])), ContextTitle);
12821
12855
  }, ContextIcon$1, IconWrapper, function (_ref4) {
12822
12856
  var $isActive = _ref4.$isActive;
12823
- return $isActive && styled.css(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n color: var(--grey-12);\n\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
12857
+ return $isActive && styled.css(_templateObject12$b || (_templateObject12$b = _taggedTemplateLiteralLoose(["\n color: var(--grey-12);\n\n ", ",\n &:hover ", "{\n background-color: var(--global-menu-icon-background-active);\n }\n "])), ContextIcon$1, ContextIcon$1);
12824
12858
  });
12825
- var ContextActionButton$1 = styled__default.button(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
12859
+ var ContextActionButton$1 = styled__default.button(_templateObject13$a || (_templateObject13$a = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n &:hover ", "{\n opacity: 1;\n background-color: var(--global-menu-icon-background-hover);\n\n ", "{\n [stroke]{\n stroke: var(--inverse);\n }\n }\n }\n\n ", "\n"])), ContextActionBaseCSS$1, function (_ref5) {
12826
12860
  var menuOpen = _ref5.menuOpen;
12827
12861
  return menuOpen && styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n opacity: 1;\n }\n\n ", "{\n opacity: 1;\n transition: opacity var(--speed-normal) var(--easing-primary-in-out) var(--speed-fast);\n }\n "])), ContextTitle, ContextIndicator);
12828
12862
  }, ContextIcon$1, IconWrapper, function (_ref6) {
@@ -13000,25 +13034,25 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
13000
13034
  };
13001
13035
  };
13002
13036
 
13003
- var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$j, _templateObject11$e, _templateObject12$d, _templateObject13$c;
13004
- var Submenu = styled__default.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
13005
- var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
13006
- var SubmenuContainerInner = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
13037
+ var _templateObject$1B, _templateObject2$1m, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$p, _templateObject10$i, _templateObject11$d, _templateObject12$c, _templateObject13$b;
13038
+ var Submenu = styled__default.ul(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
13039
+ var SubmenuHeader = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
13040
+ var SubmenuContainerInner = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
13007
13041
  var SubmenuItemTitle = styled__default.span(_templateObject4$16 || (_templateObject4$16 = _taggedTemplateLiteralLoose(["\n display: block;\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n"])));
13008
13042
  var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$10 || (_templateObject5$10 = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n"])), resetButtonStyles);
13009
13043
  var ExternalIconWrapper$1 = styled__default.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n margin-left: 15px;\n"])));
13010
13044
  var SubmenuItemAnchor = styled__default.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n"])), resetButtonStyles);
13011
13045
  var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n display: block;\n height: 30px;\n padding-left: 40px;\n position: relative;\n\n &::after {\n display: block;\n content: '';\n height: 1px;\n width: 14px;\n position: absolute;\n left: 0;\n top: 10px;\n background: var(--dividing-line);\n }\n\n ", ", ", "{\n font-family: var(--font-ui);\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-11);\n\n ", ";\n\n }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
13012
13046
  var isActive = _ref.isActive;
13013
- return styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && styled.css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
13047
+ return styled.css(_templateObject9$p || (_templateObject9$p = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && styled.css(_templateObject10$i || (_templateObject10$i = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
13014
13048
  });
13015
- var SubmenuContainer = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
13016
- var ContextContainer = styled__default.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
13049
+ var SubmenuContainer = styled__default.div(_templateObject11$d || (_templateObject11$d = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
13050
+ var ContextContainer = styled__default.div(_templateObject12$c || (_templateObject12$c = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
13017
13051
  var mobileMenu = _ref2.mobileMenu;
13018
13052
  return mobileMenu ? '30px' : '70px';
13019
13053
  }, SubmenuContainer, function (_ref3) {
13020
13054
  var open = _ref3.open;
13021
- return open && styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n ", "{\n grid-template-rows: 1fr;\n \n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n \n opacity: 1;\n }\n "])), SubmenuContainer);
13055
+ return open && styled.css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", "{\n grid-template-rows: 1fr;\n \n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n \n opacity: 1;\n }\n "])), SubmenuContainer);
13022
13056
  });
13023
13057
  var NavigationItem = function NavigationItem(_ref4) {
13024
13058
  var item = _ref4.item,
@@ -13109,23 +13143,23 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
13109
13143
  return output;
13110
13144
  };
13111
13145
 
13112
- var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$k, _templateObject11$f, _templateObject12$e, _templateObject13$d, _templateObject14$a;
13113
- var Logo = styled__default(reactRouterDom.Link)(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
13114
- var LogoMark = styled__default.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
13115
- var LogoType = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
13146
+ var _templateObject$1C, _templateObject2$1n, _templateObject3$1e, _templateObject4$17, _templateObject5$11, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$q, _templateObject10$j, _templateObject11$e, _templateObject12$d, _templateObject13$c, _templateObject14$a;
13147
+ var Logo = styled__default(reactRouterDom.Link)(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
13148
+ var LogoMark = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
13149
+ var LogoType = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
13116
13150
  var SVGObject = styled__default.object(_templateObject4$17 || (_templateObject4$17 = _taggedTemplateLiteralLoose([""])));
13117
13151
  var SVGObjectText = styled__default.object(_templateObject5$11 || (_templateObject5$11 = _taggedTemplateLiteralLoose(["\n max-width: 180px;\n"])));
13118
13152
  var NavigationContainer = styled__default.div(_templateObject6$N || (_templateObject6$N = _taggedTemplateLiteralLoose([""])));
13119
13153
  var MenuFooter = styled__default.div(_templateObject7$J || (_templateObject7$J = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: flex-end;\n"])));
13120
13154
  var FooterItemContainer = styled__default.div(_templateObject8$A || (_templateObject8$A = _taggedTemplateLiteralLoose(["\n min-height: 70px;\n"])));
13121
- var PushContainer = styled__default.div(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
13155
+ var PushContainer = styled__default.div(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n position: relative;\n height: 100%;\n ", ";\n"])), function (_ref) {
13122
13156
  var isPinned = _ref.isPinned;
13123
- return styled.css(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
13157
+ return styled.css(_templateObject10$j || (_templateObject10$j = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), isPinned ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)");
13124
13158
  });
13125
- var Container$10 = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref2) {
13159
+ var Container$10 = styled__default.div(_templateObject11$e || (_templateObject11$e = _taggedTemplateLiteralLoose(["\n z-index: 99;\n position: fixed;\n top: 0;\n left: 0;\n ", "\n\n box-sizing: border-box;\n height: 100%;\n padding: 20px 0 0 0;\n overflow: hidden;\n"])), function (_ref2) {
13126
13160
  var open = _ref2.open,
13127
13161
  desktopSize = _ref2.desktopSize;
13128
- return styled.css(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : styled.css(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
13162
+ return styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
13129
13163
  });
13130
13164
  var ContainerInner = styled__default.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
13131
13165
  var MainMenu = function MainMenu(_ref3) {
@@ -13225,17 +13259,17 @@ var MainMenu = function MainMenu(_ref3) {
13225
13259
  })) : null))), document.body));
13226
13260
  };
13227
13261
 
13228
- var _templateObject$1B, _templateObject2$1m, _templateObject3$1e, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$s, _templateObject10$l;
13229
- var MetaConatiner = styled__default.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n margin: 10px 10px;\n border: 1px solid var(--grey-3);\n background-color: var(--grey-a2);\n border-radius: 5px;\n &:active {\n box-shadow: 4px 4px var(--grey-a2);\n }\n"])));
13230
- var LabelTitle = styled__default.div(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: var(--font-ui);\n margin-top: 2px;\n"])));
13231
- var LabelContent = styled__default.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n font-size: 10px;\n padding-left: 10px;\n max-width: 200px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 4px 0 5px 0;\n white-space: nowrap;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n"])));
13262
+ var _templateObject$1D, _templateObject2$1o, _templateObject3$1f, _templateObject4$18, _templateObject5$12, _templateObject6$O, _templateObject7$K, _templateObject8$B, _templateObject9$r, _templateObject10$k;
13263
+ var MetaConatiner = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n margin: 10px 10px;\n border: 1px solid var(--grey-3);\n background-color: var(--grey-a2);\n border-radius: 5px;\n &:active {\n box-shadow: 4px 4px var(--grey-a2);\n }\n"])));
13264
+ var LabelTitle = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n max-width: 130px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0.76;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n font-family: var(--font-ui);\n margin-top: 2px;\n"])));
13265
+ var LabelContent = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n font-size: 10px;\n padding-left: 10px;\n max-width: 200px;\n overflow-wrap: initial;\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 4px 0 5px 0;\n white-space: nowrap;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n"])));
13232
13266
  var LabelNotes = styled__default.div(_templateObject4$18 || (_templateObject4$18 = _taggedTemplateLiteralLoose(["\n padding-left: 10px;\n max-width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 5px 0 8px 0;\n max-height: 23px;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-8);\n font-family: var(--font-data);\n"])));
13233
13267
  var TitleContainer = styled__default.div(_templateObject5$12 || (_templateObject5$12 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap:6px;\n flex-direction: row;\n align-items: center;\n margin-left: 10px;\n margin: 3px 0 5px 10px;\n"])));
13234
13268
  var Container$11 = styled__default.div(_templateObject6$O || (_templateObject6$O = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n"])));
13235
13269
  var TitleBox = styled__default.div(_templateObject7$K || (_templateObject7$K = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
13236
13270
  var IconBox = styled__default.div(_templateObject8$B || (_templateObject8$B = _taggedTemplateLiteralLoose(["\n padding: 1px 5px 0 0;\n opacity: 0;\n ", ":hover & {\n opacity: 1;\n cursor: pointer;\n }\n"])), Container$11);
13237
- var CopyTextBox = styled__default.pre(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: var(--font-data);\n right:10px;\n margin-top: -23px;\n"])));
13238
- var CopyBox = styled__default.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n"])));
13271
+ var CopyTextBox = styled__default.pre(_templateObject9$r || (_templateObject9$r = _taggedTemplateLiteralLoose(["\n padding: 5px;\n font-size: 10px;\n line-height: 1.2;\n box-shadow: 2px 2px 4px (195deg 16% 72% / 72%);\n border: 1px solid var(--grey-8);\n background-color: var(--grey-2);\n border-radius: 5px;\n opacity: 0.76;\n font-weight: 500;\n color: var(--grey-11);\n position: absolute;\n max-width: 170px;\n white-space: pre-wrap;\n font-family: var(--font-data);\n right:10px;\n margin-top: -23px;\n"])));
13272
+ var CopyBox = styled__default.div(_templateObject10$k || (_templateObject10$k = _taggedTemplateLiteralLoose(["\n"])));
13239
13273
  var UserDrawerMeta = function UserDrawerMeta(_ref) {
13240
13274
  var item = _ref.item,
13241
13275
  onUserDrawerMetaClick = _ref.onUserDrawerMetaClick,
@@ -13298,10 +13332,10 @@ var UserDrawerMeta = function UserDrawerMeta(_ref) {
13298
13332
  }, notes) : null)));
13299
13333
  };
13300
13334
 
13301
- var _templateObject$1C, _templateObject2$1n, _templateObject3$1f, _templateObject4$19;
13302
- var Container$12 = styled__default.div(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid var(--dividing-line);\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])));
13303
- var ColumnContainer = styled__default.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
13304
- var Title$8 = styled__default.div(_templateObject3$1f || (_templateObject3$1f = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
13335
+ var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObject4$19;
13336
+ var Container$12 = styled__default.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid var(--dividing-line);\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])));
13337
+ var ColumnContainer = styled__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
13338
+ var Title$8 = styled__default.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
13305
13339
  var SubTitle$1 = styled__default.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n padding-top: 2px;\n opacity: 0.5;\n"])));
13306
13340
  var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
13307
13341
  var _ref$icon = _ref.icon,
@@ -13319,25 +13353,25 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
13319
13353
  }), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
13320
13354
  };
13321
13355
 
13322
- var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$m, _templateObject11$g, _templateObject12$f, _templateObject13$e, _templateObject14$b;
13323
- var DrawerTop = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
13324
- var DrawerBottom = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
13325
- var DrawerHeader = styled__default.h2(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n padding: 0;\n margin: 0 0 5px;\n"])));
13356
+ var _templateObject$1F, _templateObject2$1q, _templateObject3$1h, _templateObject4$1a, _templateObject5$13, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$s, _templateObject10$l, _templateObject11$f, _templateObject12$e, _templateObject13$d, _templateObject14$b;
13357
+ var DrawerTop = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose([""])));
13358
+ var DrawerBottom = styled__default.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
13359
+ var DrawerHeader = styled__default.h2(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n padding: 0;\n margin: 0 0 5px;\n"])));
13326
13360
  var CurrentUser = styled__default.div(_templateObject4$1a || (_templateObject4$1a = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 15px;\n border-bottom: var(--dividing-line) 1px solid;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
13327
13361
  var UserOptions = styled__default.div(_templateObject5$13 || (_templateObject5$13 = _taggedTemplateLiteralLoose(["\n padding: 20px 20px 10px 20px;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13328
13362
  var Logout = styled__default.div(_templateObject6$P || (_templateObject6$P = _taggedTemplateLiteralLoose(["\n padding: 0 20px;\n"])));
13329
13363
  var LinkMenu = styled__default.ul(_templateObject7$L || (_templateObject7$L = _taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 12px 0 0 0;\n list-style: none;\n"])));
13330
13364
  var LinkMenuItem = styled__default.li(_templateObject8$C || (_templateObject8$C = _taggedTemplateLiteralLoose(["\n padding: 10px 0;\n"])));
13331
- var IconWrapperFooter = styled__default.div(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n padding-right: 20px;\n"])));
13332
- var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 400;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
13365
+ var IconWrapperFooter = styled__default.div(_templateObject9$s || (_templateObject9$s = _taggedTemplateLiteralLoose(["\n width: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n padding-right: 20px;\n"])));
13366
+ var LinkMenuItemA = styled__default(reactRouterDom.Link)(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n ", ";\n display: block;\n width: 100%;\n font-size: 14px;\n font-weight: 400;\n color: var(--grey-10);\n text-decoration: none;\n\n &:hover {\n color: var(--primary-9);\n }\n\n ", ";\n"])), resetButtonStyles, function (_ref) {
13333
13367
  var isActive = _ref.isActive;
13334
- return isActive && styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
13368
+ return isActive && styled.css(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--primary-9);\n }\n "])));
13335
13369
  });
13336
- var FooterMeta = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
13370
+ var FooterMeta = styled__default.div(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n border-top: var(--dividing-line) 1px solid;\n margin-top: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n font-size: 10px;\n font-weight: 400;\n color: var(--grey-a11);\n padding: 10px;\n padding-left: ", ";\n"])), function (_ref2) {
13337
13371
  var icon = _ref2.icon;
13338
13372
  return icon !== '' ? '31px;' : '21px;';
13339
13373
  });
13340
- var NavigationContainer$1 = styled__default.div(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n max-height: 300px;\n overflow: scroll;\n overflow-x: hidden;\n overflow-y: auto;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13374
+ var NavigationContainer$1 = styled__default.div(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n max-height: 300px;\n overflow: scroll;\n overflow-x: hidden;\n overflow-y: auto;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13341
13375
  var FooterText = styled__default.div(_templateObject14$b || (_templateObject14$b = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref3) {
13342
13376
  var icon = _ref3.icon;
13343
13377
  return icon !== '' ? '136px;' : '164px;';
@@ -13453,10 +13487,10 @@ var UserMenu = function UserMenu(_ref4) {
13453
13487
  }, title)) : null));
13454
13488
  };
13455
13489
 
13456
- var _templateObject$1E, _templateObject2$1p, _templateObject3$1h, _templateObject4$1b, _templateObject5$14, _templateObject6$Q, _templateObject7$M, _templateObject8$D;
13457
- var Container$13 = styled__default.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
13458
- var ImgWrapper = styled__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
13459
- var EmptyImg = styled__default.div(_templateObject3$1h || (_templateObject3$1h = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
13490
+ var _templateObject$1G, _templateObject2$1r, _templateObject3$1i, _templateObject4$1b, _templateObject5$14, _templateObject6$Q, _templateObject7$M, _templateObject8$D;
13491
+ var Container$13 = styled__default.div(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 18px 20px 12px 20px;\n height: 122px;\n"])));
13492
+ var ImgWrapper = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n border-radius: 5px;\n overflow: hidden;\n height: 40px;\n width: 40px;\n flex-shrink: 0;\n"])));
13493
+ var EmptyImg = styled__default.div(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n background-color: var(--grey-5);\n width: 100%;\n height: 100%;\n"])));
13460
13494
  var Image$2 = styled__default.div(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-image: url(", ");\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n display: ", ";\n"])), function (p) {
13461
13495
  return p.image;
13462
13496
  }, function (p) {
@@ -13476,10 +13510,10 @@ var NotificationItem = function NotificationItem(_ref) {
13476
13510
  }) : React__default.createElement(EmptyImg, null)), React__default.createElement(InfoContainer, null, React__default.createElement(Title$9, null, title), React__default.createElement(Message, null, message), React__default.createElement(TimeMsg, null, time)));
13477
13511
  };
13478
13512
 
13479
- var _templateObject$1F, _templateObject2$1q, _templateObject3$1i;
13480
- var Container$14 = styled__default.div(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
13481
- var StatusContainer = styled__default.h2(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n padding: 10px 0 10px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--grey-12);\n border-bottom: var(--dividing-line) 1px solid;\n margin: 0;\n"])));
13482
- var NotificationWrapper = styled__default.div(_templateObject3$1i || (_templateObject3$1i = _taggedTemplateLiteralLoose(["\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13513
+ var _templateObject$1H, _templateObject2$1s, _templateObject3$1j;
13514
+ var Container$14 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
13515
+ var StatusContainer = styled__default.h2(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n padding: 10px 0 10px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--grey-12);\n border-bottom: var(--dividing-line) 1px solid;\n margin: 0;\n"])));
13516
+ var NotificationWrapper = styled__default.div(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border-bottom: var(--dividing-line) 1px solid;\n"])));
13483
13517
  var renderNotifications = function renderNotifications(items, type) {
13484
13518
  return items.map(function (item, index) {
13485
13519
  return React__default.createElement(NotificationWrapper, {
@@ -13502,25 +13536,25 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
13502
13536
  return React__default.createElement(Container$14, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
13503
13537
  };
13504
13538
 
13505
- var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$n, _templateObject11$h, _templateObject12$g, _templateObject13$f;
13506
- var CoreStyle = styled.css(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 32px;\n padding: 8px;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n border-radius: 3px;\n\n font-family: Lato;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 85.714% */\n white-space: nowrap;\n\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
13507
- var ContainerStatic = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
13539
+ var _templateObject$1I, _templateObject2$1t, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$t, _templateObject10$m, _templateObject11$g, _templateObject12$f, _templateObject13$e;
13540
+ var CoreStyle = styled.css(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 32px;\n padding: 8px;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n border-radius: 3px;\n\n font-family: Lato;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 85.714% */\n white-space: nowrap;\n\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
13541
+ var ContainerStatic = styled__default.div(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
13508
13542
  var themeColor = _ref.themeColor;
13509
- return themeColor ? styled.css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
13543
+ return themeColor ? styled.css(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
13510
13544
  });
13511
13545
  var DefaultText = styled__default.span(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
13512
13546
  var LinkText = styled__default.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
13513
13547
  var ContainerLinked = styled__default.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n a {\n ", ";\n\n text-decoration: none;\n\n ", ";\n\n &:hover {\n ", ";\n }\n }\n"])), CoreStyle, function (_ref2) {
13514
13548
  var themeColor = _ref2.themeColor;
13515
- return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
13549
+ return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject9$t || (_templateObject9$t = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
13516
13550
  }, function (_ref3) {
13517
13551
  var themeColor = _ref3.themeColor;
13518
- return themeColor ? styled.css(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose(["\n background-color: var(--", "-9);\n border: 2px solid var(--", "-9);\n color: var(--white-12);\n "])), themeColor, themeColor) : styled.css(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
13552
+ return themeColor ? styled.css(_templateObject10$m || (_templateObject10$m = _taggedTemplateLiteralLoose(["\n background-color: var(--", "-9);\n border: 2px solid var(--", "-9);\n color: var(--white-12);\n "])), themeColor, themeColor) : styled.css(_templateObject11$g || (_templateObject11$g = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
13519
13553
  });
13520
- var Container$15 = styled__default.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
13554
+ var Container$15 = styled__default.div(_templateObject12$f || (_templateObject12$f = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
13521
13555
  var ready = _ref4.ready,
13522
13556
  minWidth = _ref4.minWidth;
13523
- return styled.css(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n \n visibility: ", ";\n opacity: ", ";\n\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", ", ", "{\n /* Required to accurately measure container sizes and ensure hover doesn't resize. */\n ", ";\n }\n "])), ready ? 'visible' : 'hidden', ready ? '1' : '0', DefaultText, LinkText, ready && "min-width: " + minWidth + "px;");
13557
+ return styled.css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n \n visibility: ", ";\n opacity: ", ";\n\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", ", ", "{\n /* Required to accurately measure container sizes and ensure hover doesn't resize. */\n ", ";\n }\n "])), ready ? 'visible' : 'hidden', ready ? '1' : '0', DefaultText, LinkText, ready && "min-width: " + minWidth + "px;");
13524
13558
  });
13525
13559
  var TopBarBadge = function TopBarBadge(_ref5) {
13526
13560
  var text = _ref5.text,
@@ -13587,10 +13621,10 @@ var TopBarBadge = function TopBarBadge(_ref5) {
13587
13621
  }), badgeComponent);
13588
13622
  };
13589
13623
 
13590
- var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$o, _templateObject11$i, _templateObject12$h, _templateObject13$g;
13591
- var Container$16 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
13592
- var RightArea$1 = styled__default.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
13593
- var SearchBar = styled__default.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
13624
+ var _templateObject$1J, _templateObject2$1u, _templateObject3$1l, _templateObject4$1d, _templateObject5$16, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$u, _templateObject10$n, _templateObject11$h, _templateObject12$g, _templateObject13$f;
13625
+ var Container$16 = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
13626
+ var RightArea$1 = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
13627
+ var SearchBar = styled__default.div(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
13594
13628
  var IconWrapper$4 = styled__default.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])));
13595
13629
  var SearchInput = styled__default.input(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-data);\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent; \n color: var(--grey-10);\n font-size: 14px;\n\n &::placeholder {\n font-family: var(--font-data);\n font-weight: 400;\n font-style: italic;\n font-size: 14px;\n color: var(--grey-8);\n }\n"])), removeAutoFillStyle);
13596
13630
  var ButtonArea = styled__default.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
@@ -13599,17 +13633,17 @@ var DrawerToggle = styled__default.button.attrs({
13599
13633
  type: 'button'
13600
13634
  })(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n position: relative;\n flex: 0 56px;\n width: 56px;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: none;\n outline: none;\n cursor: pointer;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n height: 5px;\n background-color: transparent;\n border-radius: 2px 2px 0 0;\n }\n \n transition: background-color var(--speed-normal) var(--easing-primary-out);\n \n svg {\n transition: transform var(--speed-normal) var(--easing-primary-out);\n }\n\n &:hover {\n opacity: 0.9;\n &::after {\n background-color: var(--primary-6);\n }\n }\n \n ", "\n"])), function (_ref) {
13601
13635
  var isActive = _ref.isActive;
13602
- return isActive && styled.css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
13636
+ return isActive && styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
13603
13637
  });
13604
- var DrawerPortalWrapper = styled__default.div(_templateObject10$o || (_templateObject10$o = _taggedTemplateLiteralLoose([""])));
13605
- var Drawer = styled__default.div(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n \n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
13638
+ var DrawerPortalWrapper = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
13639
+ var Drawer = styled__default.div(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n \n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
13606
13640
  var baseWidth = _ref2.baseWidth;
13607
13641
  return baseWidth ? baseWidth : "200px";
13608
13642
  }, function (_ref3) {
13609
13643
  var isOpen = _ref3.isOpen;
13610
- return isOpen && styled.css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
13644
+ return isOpen && styled.css(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
13611
13645
  });
13612
- var NotificationsContainer = styled__default.div(_templateObject13$g || (_templateObject13$g = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
13646
+ var NotificationsContainer = styled__default.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
13613
13647
  var TopBar = function TopBar(_ref4) {
13614
13648
  var _ref4$hasNotification = _ref4.hasNotifications,
13615
13649
  hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
@@ -13739,8 +13773,8 @@ var TopBar = function TopBar(_ref4) {
13739
13773
  }, customDrawer.customComponent)), document.body));
13740
13774
  };
13741
13775
 
13742
- var _templateObject$1I;
13743
- var TabListWrapper = styled__default.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
13776
+ var _templateObject$1K;
13777
+ var TabListWrapper = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
13744
13778
  var TabList = function TabList(_ref) {
13745
13779
  var children = _ref.children,
13746
13780
  defaultTabId = _ref.defaultTabId;
@@ -13753,11 +13787,11 @@ var TabList = function TabList(_ref) {
13753
13787
  };
13754
13788
 
13755
13789
  var _excluded$I = ["children", "tabFor", "onClick"];
13756
- var _templateObject$1J, _templateObject2$1t, _templateObject3$1l;
13757
- var TabComponent = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
13758
- var TabLabel = styled__default.label(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n height: 40px;\n ", "\n font-size: 15px;\n font-weight: ", ";\n letter-spacing: 0.09px;\n color: ", ";\n cursor: pointer;\n border-bottom: ", ";\n padding-top: 6px;\n padding-bottom: 14px;\n flex-shrink: 0;\n user-select: none;\n"])), function (_ref) {
13790
+ var _templateObject$1L, _templateObject2$1v, _templateObject3$1m;
13791
+ var TabComponent = styled__default.div(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
13792
+ var TabLabel = styled__default.label(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n height: 40px;\n ", "\n font-size: 15px;\n font-weight: ", ";\n letter-spacing: 0.09px;\n color: ", ";\n cursor: pointer;\n border-bottom: ", ";\n padding-top: 6px;\n padding-bottom: 14px;\n flex-shrink: 0;\n user-select: none;\n"])), function (_ref) {
13759
13793
  var theme = _ref.theme;
13760
- return styled.css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13794
+ return styled.css(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
13761
13795
  }, function (_ref2) {
13762
13796
  var active = _ref2.active;
13763
13797
  return active ? '600' : '500';
@@ -13788,8 +13822,8 @@ var Tab = function Tab(_ref5) {
13788
13822
  };
13789
13823
 
13790
13824
  var _excluded$J = ["children", "tabId"];
13791
- var _templateObject$1K;
13792
- var Container$17 = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n"])));
13825
+ var _templateObject$1M;
13826
+ var Container$17 = styled__default.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n"])));
13793
13827
  var TabContent = function TabContent(_ref) {
13794
13828
  var children = _ref.children,
13795
13829
  tabId = _ref.tabId,
@@ -13800,11 +13834,11 @@ var TabContent = function TabContent(_ref) {
13800
13834
  };
13801
13835
 
13802
13836
  var _excluded$K = ["tabFor", "icon", "closeId", "counter", "status"];
13803
- var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1e;
13804
- var Container$18 = styled__default.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
13805
- var LinkTab = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
13837
+ var _templateObject$1N, _templateObject2$1w, _templateObject3$1n, _templateObject4$1e;
13838
+ var Container$18 = styled__default.button(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
13839
+ var LinkTab = styled__default.div(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
13806
13840
  var theme = _ref.theme;
13807
- return styled.css(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
13841
+ return styled.css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
13808
13842
  }, function (_ref2) {
13809
13843
  var isActive = _ref2.isActive,
13810
13844
  theme = _ref2.theme;
@@ -13838,10 +13872,10 @@ var MobileTab = function MobileTab(_ref3) {
13838
13872
  };
13839
13873
 
13840
13874
  var _excluded$L = ["icon", "title", "subtitle", "tabFor"];
13841
- var _templateObject$1M, _templateObject2$1v, _templateObject3$1n, _templateObject4$1f, _templateObject5$17, _templateObject6$T;
13842
- var Container$19 = styled__default.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
13875
+ var _templateObject$1O, _templateObject2$1x, _templateObject3$1o, _templateObject4$1f, _templateObject5$17, _templateObject6$T;
13876
+ var Container$19 = styled__default.div(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
13843
13877
  var active = _ref.active;
13844
- return active ? styled.css(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13878
+ return active ? styled.css(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
13845
13879
  }, IconWrapper);
13846
13880
  var Title$a = styled__default.div(_templateObject4$1f || (_templateObject4$1f = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-family: ", ";\n letter-spacing: 0.09px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref2) {
13847
13881
  var theme = _ref2.theme;
@@ -13885,9 +13919,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
13885
13919
  }), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
13886
13920
  };
13887
13921
 
13888
- var _templateObject$1N, _templateObject2$1w;
13889
- var Container$1a = styled__default.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
13890
- var TabListWrapper$1 = styled__default.div(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n padding-top: 10px;\n padding-left: ", ";\n box-shadow: 0 -5px 5px 0 var(--black-a1);\n border-bottom: 1px solid var(--grey-6);\n overflow-y: auto;\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* Internet Explorer 10+ */\n &::-webkit-scrollbar { /* WebKit */\n width: 0;\n height: 0;\n }\n"])), function (_ref) {
13922
+ var _templateObject$1P, _templateObject2$1y;
13923
+ var Container$1a = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose([""])));
13924
+ var TabListWrapper$1 = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n padding-top: 10px;\n padding-left: ", ";\n box-shadow: 0 -5px 5px 0 var(--black-a1);\n border-bottom: 1px solid var(--grey-6);\n overflow-y: auto;\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* Internet Explorer 10+ */\n &::-webkit-scrollbar { /* WebKit */\n width: 0;\n height: 0;\n }\n"])), function (_ref) {
13891
13925
  var paddingLeft = _ref.paddingLeft;
13892
13926
  return paddingLeft ? paddingLeft : '87px';
13893
13927
  });
@@ -13923,10 +13957,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
13923
13957
  };
13924
13958
 
13925
13959
  var _excluded$M = ["closeId", "closeText"];
13926
- var _templateObject$1O, _templateObject2$1x, _templateObject3$1o;
13927
- var StyledButton$7 = styled__default.button(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n ", "\n \n font-family: var(--font-ui);\n background-color: var(--global-element-background);\n border-top: 1px solid var(--dividing-line);\n font-weight: 400;\n color: var(--grey-10);\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
13928
- var IconContainer$4 = styled__default.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
13929
- var TextWrapper$1 = styled__default.div(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13960
+ var _templateObject$1Q, _templateObject2$1z, _templateObject3$1p;
13961
+ var StyledButton$7 = styled__default.button(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose(["\n ", "\n \n font-family: var(--font-ui);\n background-color: var(--global-element-background);\n border-top: 1px solid var(--dividing-line);\n font-weight: 400;\n color: var(--grey-10);\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
13962
+ var IconContainer$4 = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
13963
+ var TextWrapper$1 = styled__default.div(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
13930
13964
  var CloseButton$1 = function CloseButton(_ref) {
13931
13965
  var closeId = _ref.closeId,
13932
13966
  _ref$closeText = _ref.closeText,
@@ -13945,9 +13979,9 @@ var CloseButton$1 = function CloseButton(_ref) {
13945
13979
  })), React__default.createElement(TextWrapper$1, null, closeText));
13946
13980
  };
13947
13981
 
13948
- var _templateObject$1P, _templateObject2$1y;
13949
- var Container$1b = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
13950
- var ContentWrapper = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
13982
+ var _templateObject$1R, _templateObject2$1A;
13983
+ var Container$1b = styled__default.div(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
13984
+ var ContentWrapper = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
13951
13985
  var MobileNavbarContent = function MobileNavbarContent(_ref) {
13952
13986
  var closeId = _ref.closeId,
13953
13987
  children = _ref.children;
@@ -13956,9 +13990,9 @@ var MobileNavbarContent = function MobileNavbarContent(_ref) {
13956
13990
  return selected === closeId ? null : React__default.createElement(Container$1b, null, React__default.createElement(ContentWrapper, null, children));
13957
13991
  };
13958
13992
 
13959
- var _templateObject$1Q, _templateObject2$1z;
13960
- var Container$1c = styled__default.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose([""])));
13961
- var ItemWrapper = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
13993
+ var _templateObject$1S, _templateObject2$1B;
13994
+ var Container$1c = styled__default.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose([""])));
13995
+ var ItemWrapper = styled__default.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
13962
13996
  var MobileMenu = function MobileMenu(_ref) {
13963
13997
  var content = _ref.content,
13964
13998
  supportUrl = _ref.supportUrl,
@@ -14007,10 +14041,10 @@ var MobileMenu = function MobileMenu(_ref) {
14007
14041
  })));
14008
14042
  };
14009
14043
 
14010
- var _templateObject$1R, _templateObject2$1A, _templateObject3$1p;
14011
- var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
14012
- var LogoMark$1 = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
14013
- var SVGObject$1 = styled__default.object(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose([""])));
14044
+ var _templateObject$1T, _templateObject2$1C, _templateObject3$1q;
14045
+ var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
14046
+ var LogoMark$1 = styled__default.div(_templateObject2$1C || (_templateObject2$1C = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
14047
+ var SVGObject$1 = styled__default.object(_templateObject3$1q || (_templateObject3$1q = _taggedTemplateLiteralLoose([""])));
14014
14048
  var MobileLogoLink = function MobileLogoLink(_ref) {
14015
14049
  var _ref$home = _ref.home,
14016
14050
  home = _ref$home === void 0 ? "/" : _ref$home,
@@ -14030,8 +14064,8 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
14030
14064
  };
14031
14065
 
14032
14066
  var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
14033
- var _templateObject$1S;
14034
- var Container$1d = styled__default.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n \n z-index: 100;\n display: flex;\n flex-direction: column;\n"])));
14067
+ var _templateObject$1U;
14068
+ var Container$1d = styled__default.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n \n z-index: 100;\n display: flex;\n flex-direction: column;\n"])));
14035
14069
  var MobileUserMenu = function MobileUserMenu(_ref) {
14036
14070
  var closeId = _ref.closeId,
14037
14071
  hasLanguage = _ref.hasLanguage,
@@ -14065,14 +14099,14 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
14065
14099
  };
14066
14100
 
14067
14101
  var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
14068
- var _templateObject$1T, _templateObject2$1B;
14102
+ var _templateObject$1V, _templateObject2$1D;
14069
14103
  var CLOSE_ID = 'closeMenu';
14070
14104
  var NOTI_TAB = 'notifications';
14071
14105
  var USER_TAB = 'user';
14072
14106
  var MENU_TAB = 'menu';
14073
14107
  var CUSTOM_TAB = 'custom';
14074
- var Container$1e = styled__default.nav(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 99;\n"])));
14075
- var HeaderContainer = styled__default.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: ", "px;\n border-bottom: var(--dividing-line) 1px solid;\n\n ", " {\n flex-basis: 0;\n flex-grow: 3;\n }\n"])), MOBILE_NAVBAR_HEIGHT, TabListWrapper);
14108
+ var Container$1e = styled__default.nav(_templateObject$1V || (_templateObject$1V = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 99;\n"])));
14109
+ var HeaderContainer = styled__default.div(_templateObject2$1D || (_templateObject2$1D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: ", "px;\n border-bottom: var(--dividing-line) 1px solid;\n\n ", " {\n flex-basis: 0;\n flex-grow: 3;\n }\n"])), MOBILE_NAVBAR_HEIGHT, TabListWrapper);
14076
14110
  var MobileNavbar = function MobileNavbar(_ref) {
14077
14111
  var content = _ref.content,
14078
14112
  home = _ref.home,
@@ -14193,16 +14227,16 @@ var GlobalUI = function GlobalUI(_ref) {
14193
14227
  };
14194
14228
 
14195
14229
  var _excluded$Q = ["children"];
14196
- var _templateObject$1U, _templateObject2$1C, _templateObject3$1q, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
14197
- var Container$1f = styled__default.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
14198
- var LogoContainer = styled__default.div(_templateObject2$1C || (_templateObject2$1C = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
14199
- var LogoTopText = styled__default.div(_templateObject3$1q || (_templateObject3$1q = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
14230
+ var _templateObject$1W, _templateObject2$1E, _templateObject3$1r, _templateObject4$1g, _templateObject5$18, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$v;
14231
+ var Container$1f = styled__default.div(_templateObject$1W || (_templateObject$1W = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
14232
+ var LogoContainer = styled__default.div(_templateObject2$1E || (_templateObject2$1E = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
14233
+ var LogoTopText = styled__default.div(_templateObject3$1r || (_templateObject3$1r = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
14200
14234
  var LogoBottomText = styled__default.div(_templateObject4$1g || (_templateObject4$1g = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 400;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
14201
14235
  var SidebarBox = styled__default.div(_templateObject5$18 || (_templateObject5$18 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
14202
14236
  var SidebarHeading = styled__default.div(_templateObject6$U || (_templateObject6$U = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
14203
14237
  var SidebarLinkHeading = styled__default.div(_templateObject7$P || (_templateObject7$P = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
14204
14238
  var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$G || (_templateObject8$G = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
14205
- var SLink = styled__default(reactRouterDom.Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
14239
+ var SLink = styled__default(reactRouterDom.Link)(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
14206
14240
  var SidebarLink = function SidebarLink(_ref) {
14207
14241
  var title = _ref.title,
14208
14242
  to = _ref.to;