scorer-ui-kit 2.6.4 → 2.6.6

package/dist/index.js

@@ -2384,7 +2384,7 @@ var InputContainer$1 = styled__default.div(_templateObject2$d || (_templateObjec
   var hasAction = _ref2.hasAction;
   return hasAction && styled.css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n    ", "{\n      padding-right: 200px;\n\n      // Used to control password manager injection.\n      background-position: calc(100% - 50px) 50% !important;\n    }\n  "])), StyledInput$1);
 });
-var UnitKey = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  flex: 0 1;\n  font-size: 12px;\n  font-family: var(--font-ui);\n  color: var(--input-color-unit);\n  margin-top: 1px;\n"])));
+var UnitKey = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  flex: 0 1;\n  font-size: 12px;\n  font-family: var(--font-ui);\n  color: var(--input-color-unit);\n  margin-top: 1px;\n  white-space: nowrap;\n"])));
 var Container$6 = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  \n  ", ";\n"])), function (_ref3) {
   var fieldState = _ref3.fieldState;
   return fieldState && styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n    &:focus-within ", " {\n      transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n      box-shadow: 0 3px 3px var(--input-", "-focused-shadow-color, var(--input-", "-shadow-color));\n    }\n  "])), InputContainer$1, fieldState, fieldState);
@@ -5946,49 +5946,52 @@ var FilterDropdownContainer = function FilterDropdownContainer(_ref) {
 
 var _excluded$o = ["icon", "hasFlipArrow", "isSortAscending", "isOpen", "design", "children"];
 var _templateObject$I, _templateObject2$B, _templateObject3$x, _templateObject4$s, _templateObject5$p, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$d, _templateObject10$9;
-var FlipWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+var LeftIconWrapper$1 = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  ", ";\n  padding: 0 6px;\n"])), function (_ref) {
   var isSortAscending = _ref.isSortAscending;
   return isSortAscending && styled.css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n      transform: scaleY(-1);\n  "])));
 });
 var fadeInAnimation = styled.keyframes(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
-var FlipArrowContainer = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose([""])));
-var StyledButton$4 = styled__default.button(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  ", ";\n  border-radius: 3px;\n  height: var(--common-height);\n\n  ", ";\n\n  text-align: left;\n  font-size: 12px;\n  font-weight: 500;\n  text-decoration: none;\n  color: var(--filter-button-text-color);\n  font-family: var(--font-ui);\n  transition:\n    opacity ", " ", ",\n    background-color ", " ", ",\n    box-shadow ", " ", ",\n    color ", " ", ",\n    border ", " ", ";\n\n  animation: ", " ", " ", ";\n\n  ", " {\n    padding: 0 9px;\n    display: flex;\n    align-items: center;\n    [stroke]{\n      transition: stroke ", " ", ";\n    }\n  }\n\n  &:hover:enabled, &:active:enabled {\n    color: var(--grey-12);\n    \n    ", ";\n    \n    ", " {\n      [stroke]{\n        stroke: var(--primary-9);\n      }\n    }\n    \n    ", ";\n      \n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 50%;\n  }\n\n  ", ";\n\n"])), resetButtonStyles, function (_ref2) {
+var FlipArrowContainer = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref2) {
   var design = _ref2.design;
-  return design === 'basic' ? "\n        background-color: transparent;\n        border: 1px solid transparent;\n      " : "\n        background-color: var(--filter-button-background-color);\n        border: var(--filter-button-stroke-color) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n      ";
-}, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, fadeInAnimation, animation.speed.slower, animation.easing.primary.out, IconWrapper, animation.speed.fast, animation.easing.primary.out, function (_ref3) {
+  return design === 'default' ? "padding: 0px 12px 0px 8px;" : "padding: 0px 8px;";
+});
+var StyledButton$4 = styled__default.button(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  ", ";\n  border-radius: 3px;\n  height: var(--common-height);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  padding: 4px 10px 4px 4px;\n\n  ", ";\n\n  ", ";\n\n  text-align: left;\n  font-size: 12px;\n  font-weight: 500;\n  text-decoration: none;\n  color: var(--filter-button-text-color);\n  font-family: var(--font-ui);\n  transition:\n    opacity ", " ", ",\n    background-color ", " ", ",\n    box-shadow ", " ", ",\n    color ", " ", ",\n    border ", " ", ";\n\n  animation: ", " ", " ", ";\n\n  ", " {\n    display: flex;\n    align-items: center;\n    [stroke]{\n      transition: stroke ", " ", ";\n    }\n  }\n\n  &:hover:enabled, &:active:enabled {\n    color: var(--grey-12);\n\n    ", ";\n\n    ", " {\n      [stroke]{\n        stroke: var(--primary-9);\n      }\n    }\n\n    ", ";\n\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 50%;\n  }\n\n  ", ";\n\n"])), resetButtonStyles, function (_ref3) {
   var design = _ref3.design;
+  return design === 'basic' ? "\n        background-color: transparent;\n        border: 1px solid transparent;\n        padding: 4px;\n      " : "\n        background-color: var(--filter-button-background-color);\n        border: var(--filter-button-stroke-color) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n      ";
+}, function (_ref4) {
+  var hasFlipArrow = _ref4.hasFlipArrow;
+  return hasFlipArrow && "padding: 4px 0px 4px 4px;";
+}, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, animation.speed.fast, animation.easing.primary.out, fadeInAnimation, animation.speed.slower, animation.easing.primary.out, IconWrapper, animation.speed.fast, animation.easing.primary.out, function (_ref5) {
+  var design = _ref5.design;
   return design === 'basic' ? '' : styled.css(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n      box-shadow: 0px 4px 9px 0px var(--primary-a2);\n      border-color: var(--primary-7);\n    "])));
-}, IconWrapper, function (_ref4) {
-  var isOpen = _ref4.isOpen;
+}, IconWrapper, function (_ref6) {
+  var isOpen = _ref6.isOpen;
   return !isOpen && styled.css(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n      ", " ", " {\n        [stroke]{\n          stroke: var(--grey-12);\n        }\n      };\n    "])), FlipArrowContainer, IconWrapper);
-}, function (_ref5) {
-  var isOpen = _ref5.isOpen,
-    hasFlipArrow = _ref5.hasFlipArrow;
-  return isOpen && hasFlipArrow && styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-9);\n    border: solid 1px var(--primary-9);\n    color: var(--white-1);\n\n    &, &:hover:enabled, &:active:enabled {\n      color: var(--white-1);\n      ", " {\n        [stroke]{\n          stroke: var(--white-1);\n        }\n      }\n    }\n    \n    ", " ", " {\n      [stroke]{\n        stroke: var(--white-1);\n      }\n    };\n  "])), IconWrapper, FlipArrowContainer, IconWrapper);
-});
-var InnerContainer$3 = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n"])));
-var ButtonText = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n  padding-right: ", ";\n"])), function (_ref6) {
-  var hasFlipArrow = _ref6.hasFlipArrow;
-  return hasFlipArrow ? '3px' : '20px';
-});
-var FilterButton = function FilterButton(_ref7) {
-  var icon = _ref7.icon,
-    _ref7$hasFlipArrow = _ref7.hasFlipArrow,
-    hasFlipArrow = _ref7$hasFlipArrow === void 0 ? false : _ref7$hasFlipArrow,
-    _ref7$isSortAscending = _ref7.isSortAscending,
-    isSortAscending = _ref7$isSortAscending === void 0 ? false : _ref7$isSortAscending,
-    isOpen = _ref7.isOpen,
-    _ref7$design = _ref7.design,
-    design = _ref7$design === void 0 ? 'default' : _ref7$design,
-    children = _ref7.children,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded$o);
+}, function (_ref7) {
+  var isOpen = _ref7.isOpen,
+    hasFlipArrow = _ref7.hasFlipArrow;
+  return isOpen && hasFlipArrow && styled.css(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-9);\n    border: solid 1px var(--primary-9);\n    color: var(--white-1);\n\n    &, &:hover:enabled, &:active:enabled {\n      color: var(--white-1);\n      ", " {\n        [stroke]{\n          stroke: var(--white-1);\n        }\n      }\n    }\n\n    ", " ", " {\n      [stroke]{\n        stroke: var(--white-1);\n      }\n    };\n  "])), IconWrapper, FlipArrowContainer, IconWrapper);
+});
+var InnerContainer$3 = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
+var ButtonText = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose([""])));
+var FilterButton = function FilterButton(_ref8) {
+  var icon = _ref8.icon,
+    _ref8$hasFlipArrow = _ref8.hasFlipArrow,
+    hasFlipArrow = _ref8$hasFlipArrow === void 0 ? false : _ref8$hasFlipArrow,
+    _ref8$isSortAscending = _ref8.isSortAscending,
+    isSortAscending = _ref8$isSortAscending === void 0 ? false : _ref8$isSortAscending,
+    isOpen = _ref8.isOpen,
+    _ref8$design = _ref8.design,
+    design = _ref8$design === void 0 ? 'default' : _ref8$design,
+    children = _ref8.children,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded$o);
   return React__default.createElement(StyledButton$4, Object.assign({
     type: 'button'
   }, props, {
     isOpen: isOpen,
     hasFlipArrow: hasFlipArrow,
     design: design
-  }), React__default.createElement(InnerContainer$3, null, React__default.createElement(FlipWrapper, Object.assign({}, {
+  }), React__default.createElement(InnerContainer$3, null, React__default.createElement(LeftIconWrapper$1, Object.assign({}, {
     isSortAscending: isSortAscending
   }), React__default.createElement(Icon, {
     icon: icon,
@@ -5997,7 +6000,9 @@ var FilterButton = function FilterButton(_ref7) {
     color: 'filter-button-icon-color'
   })), React__default.createElement(ButtonText, Object.assign({}, {
     hasFlipArrow: hasFlipArrow
-  }), children), hasFlipArrow && React__default.createElement(FlipArrowContainer, null, React__default.createElement(Icon, {
+  }), children), hasFlipArrow && React__default.createElement(FlipArrowContainer, Object.assign({}, {
+    design: design
+  }), React__default.createElement(Icon, {
     icon: isOpen ? 'Up' : 'Down',
     size: 6,
     color: 'grey-11'
@@ -7381,6 +7386,30 @@ var FilterBar = function FilterBar(_ref4) {
   })));
 };
 
+var _excluded$y = ["options", "categoryLabel", "selectedIndex", "design", "onToggle"];
+var ToggleButton = function ToggleButton(_ref) {
+  var options = _ref.options,
+    categoryLabel = _ref.categoryLabel,
+    selectedIndex = _ref.selectedIndex,
+    _ref$design = _ref.design,
+    design = _ref$design === void 0 ? 'basic' : _ref$design,
+    onToggle = _ref.onToggle,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+  var onToggleCallback = React.useCallback(function (currentIndex) {
+    var selected = currentIndex === 1 ? 0 : 1;
+    onToggle(selected, options[selected].value);
+  }, [onToggle, options]);
+  if (selectedIndex !== 0 && selectedIndex !== 1) return null;
+  return React__default.createElement(FilterButton, Object.assign({
+    icon: options[selectedIndex].icon,
+    onClick: function onClick() {
+      return onToggleCallback(selectedIndex);
+    }
+  }, {
+    design: design
+  }, props), categoryLabel + " : " + options[selectedIndex].text);
+};
+
 var _templateObject$U, _templateObject2$M, _templateObject3$H;
 var Container$B = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n"])));
 var StatusCounter = styled__default.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 14px;;\n  top: -12px;\n  border-radius: 4px;\n  height: 14px;\n  min-width: 14px;\n  padding: 2px;\n  font-size: 10px;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color var(--speed-slow) var(--easing-primary-in-out);\n  background-color: ", ";\n"])), function (_ref) {
@@ -8373,7 +8402,7 @@ var LineUI = function LineUI(_ref) {
   })));
 };
 
-var _excluded$y = ["loop", "autoPlay", "controls", "muted"];
+var _excluded$z = ["loop", "autoPlay", "controls", "muted"];
 var _templateObject$Z, _templateObject2$R, _templateObject3$M, _templateObject4$F, _templateObject5$A;
 var Container$D = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 0;\n  user-select: none;\n  touch-action: none;\n  /* box-shadow: 0 10px 20px hsla(195deg, 65%, 5%, 35%); */\n  /* border: 10px solid hsla(195deg, 45%, 35%, 45%); */\n  /* border-radius:3px; */\n\n  width: auto;\n  /* transform: translateY(-70%); */\n"])));
 var Video$1 = styled__default.video(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  width:  100%;\n  height: 100%;\n  border-radius: 3px;\n  background-color: hsla(0deg, 0%, 0%, 35%);\n"])));
@@ -8404,7 +8433,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
     controls = _ref$videoOptions$con === void 0 ? false : _ref$videoOptions$con,
     _ref$videoOptions$mut = _ref$videoOptions.muted,
     muted = _ref$videoOptions$mut === void 0 ? true : _ref$videoOptions$mut,
-    videoOptions = _objectWithoutPropertiesLoose(_ref$videoOptions, _excluded$y),
+    videoOptions = _objectWithoutPropertiesLoose(_ref$videoOptions, _excluded$z),
     _ref$options = _ref.options;
   _ref$options = _ref$options === void 0 ? {} : _ref$options;
   var showHandleFinder = _ref$options.showHandleFinder,
@@ -8582,7 +8611,7 @@ var LineUIVideo = function LineUIVideo(_ref) {
   })));
 };
 
-var _excluded$z = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
+var _excluded$A = ["id", "enabled", "peerAddress", "maxConnectionAttempts", "rtcConfiguration", "setStatus", "setError", "autoPlay", "muted"];
 var _templateObject$_;
 var Video$2 = styled__default.video(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  /* width: 800px; */\n"])));
 var WebRTCPlayer = function WebRTCPlayer(_ref) {
@@ -8602,7 +8631,7 @@ var WebRTCPlayer = function WebRTCPlayer(_ref) {
     autoPlay = _ref$autoPlay === void 0 ? true : _ref$autoPlay,
     _ref$muted = _ref.muted,
     muted = _ref$muted === void 0 ? true : _ref$muted,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var _useState = React.useState(0),
     connectionAttempts = _useState[0],
     setConnectionAttempts = _useState[1];
@@ -9055,7 +9084,7 @@ var LineUI$1 = function LineUI(_ref) {
   })));
 };
 
-var _excluded$A = ["name", "points"];
+var _excluded$B = ["name", "points"];
 var getMidpoint = function getMidpoint(pointA, pointB) {
   return {
     x: pointA.x + (pointB.x - pointA.x) * 0.5,
@@ -9126,7 +9155,7 @@ var LineReducer = (function (state, action) {
         var newState = action.state.map(function (_ref) {
           var name = _ref.name,
             points = _ref.points,
-            rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+            rest = _objectWithoutPropertiesLoose(_ref, _excluded$B);
           return _extends({
             name: name,
             points: points.map(function (_ref2) {
@@ -9214,7 +9243,7 @@ var IntroductionText = function IntroductionText(_ref) {
   return React__default.createElement(Container$G, null, children);
 };
 
-var _excluded$B = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
+var _excluded$C = ["icon", "size", "weight", "label", "linkTo", "noBorder", "tagSize"];
 var _templateObject$12, _templateObject2$U, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$w, _templateObject7$v;
 var TextContainer$2 = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
 var StyledLink = styled__default(reactRouterDom.Link)(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n"])));
@@ -9248,7 +9277,7 @@ var Tag = function Tag(_ref6) {
     _ref6$noBorder = _ref6.noBorder,
     noBorder = _ref6$noBorder === void 0 ? false : _ref6$noBorder,
     tagSize = _ref6.tagSize,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded$C);
   var iconTagSize = React.useMemo(function () {
     return tagSize === 'compact' ? 8 : 10;
   }, [tagSize]);
@@ -9913,7 +9942,7 @@ var TypeTable = function TypeTable(_ref4) {
   })));
 };
 
-var _excluded$C = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
+var _excluded$D = ["type", "placeholder", "defaultValue", "rowKey", "alignment", "toLink", "saveCallback"];
 var _templateObject$1c, _templateObject2$11, _templateObject3$W, _templateObject4$P, _templateObject5$J, _templateObject6$B, _templateObject7$z, _templateObject8$r, _templateObject9$k, _templateObject10$g;
 var Container$M = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -9943,7 +9972,7 @@ var EditCell = function EditCell(_ref4) {
     _ref4$toLink = _ref4.toLink,
     toLink = _ref4$toLink === void 0 ? '' : _ref4$toLink,
     saveCallback = _ref4.saveCallback,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded$D);
   var _useState = React.useState(false),
     isEditMode = _useState[0],
     setIsEditMode = _useState[1];
@@ -11630,7 +11659,7 @@ var Controls = function Controls(_ref) {
   return React__default.createElement(Container$T, null, React__default.createElement(PTZControl, null, React__default.createElement(Up, null), React__default.createElement(Down, null), React__default.createElement(Left, null), React__default.createElement(Right, null)), React__default.createElement(ZoomBase, null, React__default.createElement(Up$2, null), React__default.createElement(Up$1, null)), debug && React__default.createElement("pre", null, JSON.stringify(state, null, 2)));
 };
 
-var _excluded$D = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
+var _excluded$E = ["isEmptyWithIcon", "status", "noticeIcon", "hasNotice", "noticeMessage", "noticeTitle", "emptyIcon"];
 var _templateObject$1k, _templateObject2$18, _templateObject3$11, _templateObject4$W, _templateObject5$Q, _templateObject6$D, _templateObject7$A, _templateObject8$s;
 var Container$U = styled__default.div(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 170px;\n  border-radius: 3px;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  position: relative;\n\n  ", " {\n    height: 100%;\n    width: 100%;\n    text-align: center;\n    img, video {\n      border-radius: 3px;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      height: 100%;\n      width: 100%;\n      object-fit: cover;\n    }\n"])), MediaBoxWrapper);
 var EmptyWithIcon = styled__default.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  ", "\n;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), function (_ref) {
@@ -11660,7 +11689,7 @@ var MediaStream = function MediaStream(_ref4) {
     noticeMessage = _ref4.noticeMessage,
     noticeTitle = _ref4.noticeTitle,
     emptyIcon = _ref4.emptyIcon,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded$E);
   return React__default.createElement(Container$U, null, isEmptyWithIcon ? React__default.createElement(EmptyWithIcon, {
     hasPadding: hasNotice
   }, React__default.createElement(Icon, {
@@ -11731,7 +11760,7 @@ var PanelMetaData = function PanelMetaData(_ref6) {
   }, rightTitle), rightSubTitle && React__default.createElement(SubTitle, null, rightSubTitle)));
 };
 
-var _excluded$E = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
+var _excluded$F = ["streamProps", "panelMetaData", "customBottom", "panelOnClick"];
 var _templateObject$1m;
 var CameraPanelWrapper = styled__default.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose(["\n  width: 300px;\n  height: 230px;\n  border-radius: 3px;\n  box-shadow: 0 2px 10px 0 var(--grey-a5);\n  background-color: linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%);\n  }\n\n  ", ";\n"])), function (_ref) {
   var hasOnClick = _ref.hasOnClick;
@@ -11742,7 +11771,7 @@ var NewComponent = function NewComponent(_ref2) {
     panelMetaData = _ref2.panelMetaData,
     customBottom = _ref2.customBottom,
     panelOnClick = _ref2.panelOnClick,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$F);
   return React__default.createElement(CameraPanelWrapper, Object.assign({
     onClick: panelOnClick,
     hasOnClick: panelOnClick === undefined ? false : true
@@ -11771,12 +11800,12 @@ var TagList = function TagList(_ref) {
   }));
 };
 
-var _excluded$F = ["onDebouncedChange", "defaultValue"];
+var _excluded$G = ["onDebouncedChange", "defaultValue"];
 var DebouncedSearcher = function DebouncedSearcher(_ref) {
   var _ref$onDebouncedChang = _ref.onDebouncedChange,
     onDebouncedChange = _ref$onDebouncedChang === void 0 ? function () {} : _ref$onDebouncedChang,
     defaultValue = _ref.defaultValue,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   var _useState = React.useState(defaultValue || ''),
     typedValue = _useState[0],
     setTypedValue = _useState[1];
@@ -11802,7 +11831,7 @@ var DebouncedSearcher = function DebouncedSearcher(_ref) {
   }));
 };
 
-var _excluded$G = ["design", "size", "position", "text"];
+var _excluded$H = ["design", "size", "position", "text"];
 var _templateObject$1p, _templateObject2$1a, _templateObject3$13, _templateObject4$Y, _templateObject5$S, _templateObject6$F;
 var Container$W = styled__default.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose([""])));
 var Title$6 = styled__default.div(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-10);\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 17px;\n"])), function (_ref) {
@@ -11840,7 +11869,7 @@ var ActionsBar = function ActionsBar(_ref3) {
       size = _ref4.size,
       position = _ref4.position,
       text = _ref4.text,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded$G);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded$H);
     return React__default.createElement(ButtonWithIcon, Object.assign({
       key: index,
       design: design || 'secondary',
@@ -12141,7 +12170,7 @@ var ConfirmationModal = function ConfirmationModal(_ref3) {
   }, rightButtonText)));
 };
 
-var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$i, _templateObject11$c, _templateObject12$a;
+var _templateObject$1s, _templateObject2$1d, _templateObject3$16, _templateObject4$$, _templateObject5$V, _templateObject6$H, _templateObject7$D, _templateObject8$v, _templateObject9$n, _templateObject10$i, _templateObject11$c, _templateObject12$a, _templateObject13$9;
 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"])));
 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"])));
 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"])));
@@ -12156,13 +12185,16 @@ var ExtraAction = styled__default.button(_templateObject7$D || (_templateObject7
 var Breadcrumbs = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n"])));
 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"])));
 var BreadcrumbIcon = styled__default.div(_templateObject10$i || (_templateObject10$i = _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"])));
-var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\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 0.25s ease;\n  &:hover {\n    color: var(--grey-12);\n  }\n"])));
-var RightArea = styled__default.div(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  align-items: center;\n  display: flex;\n  justify-content: right;\n"])));
+var HomeIcon = styled__default(BreadcrumbIcon)(_templateObject11$c || (_templateObject11$c = _taggedTemplateLiteralLoose(["\n  padding-bottom: 1px;\n  svg path {\n    transition: stroke var(--speed-normal) var(--easing-primary-out);\n  }\n"])));
+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);
+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"])));
 var UtilityHeader = function UtilityHeader(_ref2) {
   var _ref2$showBreadcrumbs = _ref2.showBreadcrumbs,
     showBreadcrumbs = _ref2$showBreadcrumbs === void 0 ? true : _ref2$showBreadcrumbs,
     _ref2$breadcrumbs = _ref2.breadcrumbs,
     breadcrumbs = _ref2$breadcrumbs === void 0 ? [] : _ref2$breadcrumbs,
+    _ref2$showHomeIcon = _ref2.showHomeIcon,
+    showHomeIcon = _ref2$showHomeIcon === void 0 ? true : _ref2$showHomeIcon,
     backLink = _ref2.backLink,
     _ref2$$iconInGutter = _ref2.$iconInGutter,
     $iconInGutter = _ref2$$iconInGutter === void 0 ? true : _ref2$$iconInGutter,
@@ -12194,12 +12226,17 @@ var UtilityHeader = function UtilityHeader(_ref2) {
   })), "Back") : null, hasBreadcrumbs ? React__default.createElement(Breadcrumbs, null, breadcrumbs.map(function (breadcrumb, index) {
     var text = breadcrumb.text,
       href = breadcrumb.href;
+    var isFirst = index === 0;
     var isLast = index === breadcrumbs.length - 1;
     return React__default.createElement(React__default.Fragment, {
       key: index
     }, React__default.createElement(Breadcrumb, null, React__default.createElement(BreadcrumbLink, {
       to: href
-    }, text), !isLast ? React__default.createElement(BreadcrumbIcon, null, React__default.createElement(Icon, {
+    }, isFirst && showHomeIcon ? React__default.createElement(HomeIcon, null, React__default.createElement(Icon, {
+      icon: "Home",
+      size: 11,
+      color: 'grey-10'
+    })) : null, text), !isLast ? React__default.createElement(BreadcrumbIcon, null, React__default.createElement(Icon, {
       icon: "Right",
       size: 6,
       color: 'grey-8'
@@ -12343,7 +12380,7 @@ var ResizeLine = function ResizeLine(_ref4) {
   }))), React__default.createElement(Line, null)));
 };
 
-var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$9, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
+var _templateObject$1w, _templateObject2$1h, _templateObject3$19, _templateObject4$12, _templateObject5$Y, _templateObject6$J, _templateObject7$F, _templateObject8$x, _templateObject9$o, _templateObject10$j, _templateObject11$d, _templateObject12$b, _templateObject13$a, _templateObject14$7, _templateObject15$5, _templateObject16$5, _templateObject17$5, _templateObject18$3, _templateObject19$3;
 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"])));
 var MainArea = styled__default.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex: 1;\n\n  ", "\n"])), function (_ref) {
   var $layout = _ref.$layout,
@@ -12381,7 +12418,7 @@ var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _
     $minDimension = _ref8.$minDimension;
   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;
 });
-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) {
+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) {
   var $size = _ref9.$size;
   return $size;
 }, function (_ref10) {
@@ -12698,7 +12735,7 @@ var ContentArea = styled__default.div(_templateObject6$K || (_templateObject6$K
   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');
 });
 
-var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$a, _templateObject14$8, _templateObject15$6;
+var _templateObject$1y, _templateObject2$1j, _templateObject3$1b, _templateObject4$14, _templateObject5$_, _templateObject6$L, _templateObject7$H, _templateObject8$y, _templateObject9$p, _templateObject10$k, _templateObject11$e, _templateObject12$c, _templateObject13$b, _templateObject14$8, _templateObject15$6;
 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) {
   var compact = _ref.compact;
   return compact && styled.css(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n    font-size:14px;\n  "])));
@@ -12719,7 +12756,7 @@ var ContextActionA = styled__default(reactRouterDom.Link)(_templateObject10$k ||
   var $isActive = _ref4.$isActive;
   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);
 });
-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) {
+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) {
   var menuOpen = _ref5.menuOpen;
   return menuOpen && styled.css(_templateObject14$8 || (_templateObject14$8 = _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);
 }, ContextIcon$1, IconWrapper, function (_ref6) {
@@ -12897,7 +12934,7 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
   };
 };
 
-var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b;
+var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$c;
 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"])));
 var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
 var SubmenuContainerInner = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n"])));
@@ -12915,7 +12952,7 @@ var ContextContainer = styled__default.div(_templateObject12$d || (_templateObje
   return mobileMenu ? '30px' : '70px';
 }, SubmenuContainer, function (_ref3) {
   var open = _ref3.open;
-  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);
+  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);
 });
 var NavigationItem = function NavigationItem(_ref4) {
   var item = _ref4.item,
@@ -13006,7 +13043,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
   return output;
 };
 
-var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$9;
+var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$d, _templateObject14$9;
 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"])));
 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"])));
 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"])));
@@ -13022,7 +13059,7 @@ var PushContainer = styled__default.div(_templateObject9$r || (_templateObject9$
 var Container$10 = styled__default.div(_templateObject11$g || (_templateObject11$g = _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) {
   var open = _ref2.open,
     desktopSize = _ref2.desktopSize;
-  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$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n      transition: width var(--speed-normal) var(--easing-primary-in);\n    "]))), LogoType, open ? 1 : 0);
+  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);
 });
 var ContainerInner = styled__default.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n  width: var(--global-menu-width-open);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var MainMenu = function MainMenu(_ref3) {
@@ -13216,7 +13253,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
   }), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
 };
 
-var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$a;
+var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$e, _templateObject14$a;
 var DrawerTop = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
 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);
 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"])));
@@ -13234,7 +13271,7 @@ var FooterMeta = styled__default.div(_templateObject12$f || (_templateObject12$f
   var icon = _ref2.icon;
   return icon !== '' ? '31px;' : '21px;';
 });
-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"])));
+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"])));
 var FooterText = styled__default.div(_templateObject14$a || (_templateObject14$a = _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) {
   var icon = _ref3.icon;
   return icon !== '' ? '136px;' : '164px;';
@@ -13399,7 +13436,7 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
   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')));
 };
 
-var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$e;
+var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$f;
 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"])));
 var ContainerStatic = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n"])), CoreStyle, function (_ref) {
   var themeColor = _ref.themeColor;
@@ -13417,7 +13454,7 @@ var ContainerLinked = styled__default.div(_templateObject7$N || (_templateObject
 var Container$15 = styled__default.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref4) {
   var ready = _ref4.ready,
     minWidth = _ref4.minWidth;
-  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;");
+  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;");
 });
 var TopBarBadge = function TopBarBadge(_ref5) {
   var text = _ref5.text,
@@ -13484,7 +13521,7 @@ var TopBarBadge = function TopBarBadge(_ref5) {
   }), badgeComponent);
 };
 
-var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$q, _templateObject11$j, _templateObject12$h, _templateObject13$f;
+var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$q, _templateObject11$j, _templateObject12$h, _templateObject13$g;
 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"])));
 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"])));
 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"])));
@@ -13506,7 +13543,7 @@ var Drawer = styled__default.div(_templateObject11$j || (_templateObject11$j = _
   var isOpen = _ref3.isOpen;
   return isOpen && styled.css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n    right: 0;\n    opacity: 1;\n    visibility: visible;\n  "])));
 });
-var NotificationsContainer = styled__default.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n    overflow-y: scroll;\n    margin-right: -17px;\n"])));
+var NotificationsContainer = styled__default.div(_templateObject13$g || (_templateObject13$g = _taggedTemplateLiteralLoose(["\n    overflow-y: scroll;\n    margin-right: -17px;\n"])));
 var TopBar = function TopBar(_ref4) {
   var _ref4$hasNotification = _ref4.hasNotifications,
     hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
@@ -13649,7 +13686,7 @@ var TabList = function TabList(_ref) {
   return React__default.createElement(TabListWrapper, null, children);
 };
 
-var _excluded$H = ["children", "tabFor", "onClick"];
+var _excluded$I = ["children", "tabFor", "onClick"];
 var _templateObject$1J, _templateObject2$1t, _templateObject3$1l;
 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"])));
 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) {
@@ -13669,7 +13706,7 @@ var Tab = function Tab(_ref5) {
   var children = _ref5.children,
     tabFor = _ref5.tabFor,
     onClick = _ref5.onClick,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded$I);
   var _useContext = React.useContext(TabContext),
     selected = _useContext.selected,
     setSelected = _useContext.setSelected;
@@ -13684,19 +13721,19 @@ var Tab = function Tab(_ref5) {
   }, children));
 };
 
-var _excluded$I = ["children", "tabId"];
+var _excluded$J = ["children", "tabId"];
 var _templateObject$1K;
 var Container$17 = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n"])));
 var TabContent = function TabContent(_ref) {
   var children = _ref.children,
     tabId = _ref.tabId,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var _useContext = React.useContext(TabContext),
     selected = _useContext.selected;
   return selected === tabId ? React__default.createElement(Container$17, Object.assign({}, props), children) : null;
 };
 
-var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
+var _excluded$K = ["tabFor", "icon", "closeId", "counter", "status"];
 var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1d;
 var Container$18 = styled__default.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n  ", "\n  flex-basis: auto;\n  flex-grow: 1;\n"])), resetButtonStyles);
 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) {
@@ -13713,7 +13750,7 @@ var MobileTab = function MobileTab(_ref3) {
     closeId = _ref3.closeId,
     counter = _ref3.counter,
     status = _ref3.status,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$K);
   var _useContext = React.useContext(TabContext),
     selected = _useContext.selected,
     setSelected = _useContext.setSelected;
@@ -13734,7 +13771,7 @@ var MobileTab = function MobileTab(_ref3) {
   }))));
 };
 
-var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
+var _excluded$L = ["icon", "title", "subtitle", "tabFor"];
 var _templateObject$1M, _templateObject2$1v, _templateObject3$1n, _templateObject4$1e, _templateObject5$16, _templateObject6$T;
 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) {
   var active = _ref.active;
@@ -13757,7 +13794,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
     title = _ref5.title,
     subtitle = _ref5.subtitle,
     tabFor = _ref5.tabFor,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded$L);
   var _useContext = React.useContext(TabContext),
     selected = _useContext.selected,
     setSelected = _useContext.setSelected;
@@ -13819,7 +13856,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
   })));
 };
 
-var _excluded$L = ["closeId", "closeText"];
+var _excluded$M = ["closeId", "closeText"];
 var _templateObject$1O, _templateObject2$1x, _templateObject3$1o;
 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);
 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"])));
@@ -13828,7 +13865,7 @@ var CloseButton$1 = function CloseButton(_ref) {
   var closeId = _ref.closeId,
     _ref$closeText = _ref.closeText,
     closeText = _ref$closeText === void 0 ? 'CLOSE MENU' : _ref$closeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
   var _useContext = React.useContext(TabContext),
     setSelected = _useContext.setSelected;
   return React__default.createElement(StyledButton$7, Object.assign({
@@ -13926,7 +13963,7 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
   }) : React__default.createElement(SvgLogoMark, null)));
 };
 
-var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
+var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
 var _templateObject$1S;
 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"])));
 var MobileUserMenu = function MobileUserMenu(_ref) {
@@ -13940,7 +13977,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
     loggedInUser = _ref.loggedInUser,
     onLogout = _ref.onLogout,
     onLanguageToggle = _ref.onLanguageToggle,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$M);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var _useContext = React.useContext(TabContext),
     setSelected = _useContext.setSelected;
   var handleCloseMenu = React.useCallback(function () {
@@ -13961,7 +13998,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
   })));
 };
 
-var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
+var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
 var _templateObject$1T, _templateObject2$1B;
 var CLOSE_ID = 'closeMenu';
 var NOTI_TAB = 'notifications';
@@ -13990,7 +14027,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
     customDrawer = _ref.customDrawer,
     onLogout = _ref.onLogout,
     onLanguageToggle = _ref.onLanguageToggle,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
   return React__default.createElement(Container$1e, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
     home: home,
     logoMark: logoMark
@@ -14048,7 +14085,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
   })))));
 };
 
-var _excluded$O = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
+var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
 var GlobalUI = function GlobalUI(_ref) {
   var content = _ref.content,
     home = _ref.home,
@@ -14063,7 +14100,7 @@ var GlobalUI = function GlobalUI(_ref) {
     legacyLayout = _ref.legacyLayout,
     children = _ref.children,
     onMenuToggle = _ref.onMenuToggle,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var _useBreakpoints = useBreakpoints(),
     isLarge = _useBreakpoints.isLarge;
   return isLarge ? React__default.createElement(Layout, null, React__default.createElement(MainMenu, Object.assign({}, {
@@ -14089,7 +14126,7 @@ var GlobalUI = function GlobalUI(_ref) {
   }, props))), React__default.createElement(ContentArea, null, children));
 };
 
-var _excluded$P = ["children"];
+var _excluded$Q = ["children"];
 var _templateObject$1U, _templateObject2$1C, _templateObject3$1q, _templateObject4$1f, _templateObject5$17, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
 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"])));
 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"])));
@@ -14114,7 +14151,7 @@ var Logo$2 = function Logo(_ref2) {
 };
 var Sidebar = function Sidebar(_ref3) {
   var children = _ref3.children,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$P);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$Q);
   return React__default.createElement(Container$1f, Object.assign({}, props), children);
 };
 
@@ -14222,6 +14259,7 @@ exports.TextArea = TextArea;
 exports.TextAreaField = TextAreaField;
 exports.TextField = TextField;
 exports.ThemeVariables = ThemeVariables;
+exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.TopBar = TopBar;
 exports.TypeTable = TypeTable;