@activecollab/components 1.0.273 → 1.0.275

package/dist/index.js

@@ -269,7 +269,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$1c = ["children", "active", "variant", "size", "className"];
+  var _excluded$1f = ["children", "active", "variant", "size", "className"];
   /**
    * @component Button
    * @description
@@ -299,7 +299,7 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$1c);
+      args = _objectWithoutProperties(_ref, _excluded$1f);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       className: classNames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
@@ -373,12 +373,12 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$1b = ["className", "disabled"];
+  var _excluded$1e = ["className", "disabled"];
   var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$1b);
+      rest = _objectWithoutProperties(_ref, _excluded$1e);
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
       variant: "contained",
@@ -410,11 +410,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$1a = ["children", "className"];
+  var _excluded$1d = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$1a);
+      rest = _objectWithoutProperties(_ref, _excluded$1d);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
       className: classNames__default["default"]("c-btn-group", className)
@@ -474,7 +474,7 @@
     return React.useContext(MenuContext);
   };
 
-  var _excluded$19 = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
+  var _excluded$1c = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       anchorEl = _ref.anchorEl,
@@ -487,7 +487,7 @@
       initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
       _ref$strategy = _ref.strategy,
       strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-      rest = _objectWithoutProperties(_ref, _excluded$19);
+      rest = _objectWithoutProperties(_ref, _excluded$1c);
     var _useState = React.useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       exited = _useState2[0],
@@ -576,12 +576,12 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$18 = ["className", "disableBackgroundColor"];
+  var _excluded$1b = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
       _ref$disableBackgroun = _ref.disableBackgroundColor,
       disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-      rest = _objectWithoutProperties(_ref, _excluded$18);
+      rest = _objectWithoutProperties(_ref, _excluded$1b);
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classNames__default["default"]("c-overlay", className),
       $disableBackgroundColor: disableBackgroundColor
@@ -621,7 +621,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$17 = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
+  var _excluded$1a = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -638,7 +638,7 @@
       _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
       disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, _excluded$17);
+      rest = _objectWithoutProperties(_ref, _excluded$1a);
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
     var _useLayerContext = useLayerContext(),
@@ -698,7 +698,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$16 = ["children", "className", "innerRef", "style"];
+  var _excluded$19 = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -706,7 +706,7 @@
       innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutProperties(_ref, _excluded$16);
+      rest = _objectWithoutProperties(_ref, _excluded$19);
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
       className: classNames__default["default"]("c-bubble", className),
@@ -1022,7 +1022,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$15 = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$18 = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -1053,7 +1053,7 @@
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$15);
+      props = _objectWithoutProperties(_ref, _excluded$18);
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
@@ -1076,13 +1076,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$14 = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$17 = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
       className = _ref.className,
       leftElement = _ref.leftElement,
       rightElement = _ref.rightElement,
-      props = _objectWithoutProperties(_ref, _excluded$14);
+      props = _objectWithoutProperties(_ref, _excluded$17);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classNames__default["default"]("c-menu-header", className),
       ref: ref
@@ -1107,11 +1107,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$13 = ["children", "className"];
+  var _excluded$16 = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$13);
+      props = _objectWithoutProperties(_ref, _excluded$16);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
       className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
@@ -1135,11 +1135,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$12 = ["children", "className"];
+  var _excluded$15 = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$12);
+      props = _objectWithoutProperties(_ref, _excluded$15);
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({
       className: classNames__default["default"]("c-list-item", className),
       ref: ref,
@@ -1148,21 +1148,21 @@
   });
   ListItem.displayName = "ListItem";
 
-  var _excluded$11 = ["className"];
+  var _excluded$14 = ["className"];
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$11);
+      props = _objectWithoutProperties(_ref, _excluded$14);
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, _extends({
       className: classNames__default["default"]("c-list-separator", className)
     }, props));
   };
   ListSeparator.displayName = "ListSeparator";
 
-  var _excluded$10 = ["children", "className"];
+  var _excluded$13 = ["children", "className"];
   var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$10);
+      props = _objectWithoutProperties(_ref, _excluded$13);
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({
       className: className,
       ref: ref,
@@ -1188,7 +1188,7 @@
     return size === "big" && styled.css(["width:40px;"]);
   });
 
-  var _excluded$$ = ["children", "className", "variant", "size", "active"];
+  var _excluded$12 = ["children", "className", "variant", "size", "active"];
 
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -1218,7 +1218,7 @@
       variant = _ref.variant,
       size = _ref.size,
       active = _ref.active,
-      args = _objectWithoutProperties(_ref, _excluded$$);
+      args = _objectWithoutProperties(_ref, _excluded$12);
     return /*#__PURE__*/React__default["default"].createElement(StyledIconButton, _extends({
       className: className,
       variant: variant,
@@ -7080,14 +7080,14 @@
   });
   StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 
-  var _excluded$_ = ["children", "className", "separator"];
+  var _excluded$11 = ["children", "className", "separator"];
   var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _dimensions$width, _childDimensions$widt;
     var children = _ref.children,
       className = _ref.className,
       _ref$separator = _ref.separator,
       separator = _ref$separator === void 0 ? "/" : _ref$separator,
-      rest = _objectWithoutProperties(_ref, _excluded$_);
+      rest = _objectWithoutProperties(_ref, _excluded$11);
     var internalRef = React.useRef(null);
     var listWrapperRef = React.useRef(null);
     var olRef = React.useRef(null);
@@ -7254,10 +7254,10 @@
     return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
   });
 
-  var _excluded$Z = ["children"];
+  var _excluded$10 = ["children"];
   var TooltipAnimation = function TooltipAnimation(_ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$Z);
+      props = _objectWithoutProperties(_ref, _excluded$10);
     return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
       timeout: 0
     }, props), children);
@@ -7332,12 +7332,12 @@
   });
   Tooltip.displayName = "Tooltip";
 
-  var _excluded$Y = ["weight", "children"];
+  var _excluded$$ = ["weight", "children"];
   var Body2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$Y);
+      props = _objectWithoutProperties(_ref, _excluded$$);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 2",
       weight: weight,
@@ -7384,7 +7384,7 @@
   });
   StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
 
-  var _excluded$X = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
+  var _excluded$_ = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
       icon = _ref.icon,
@@ -7394,7 +7394,7 @@
       tooltipText = _ref.tooltipText,
       onClearAll = _ref.onClearAll,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$X);
+      args = _objectWithoutProperties(_ref, _excluded$_);
     return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
       ref: ref,
       className: className
@@ -7703,7 +7703,7 @@
   StyledDatePicker.displayName = "StyledDatePicker";
   StyledDayPicker.displayName = "StyledDayPicker";
 
-  var _excluded$W = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
+  var _excluded$Z = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
   var DatePicker = function DatePicker(_ref) {
     var className = _ref.className,
       onChange = _ref.onChange,
@@ -7725,7 +7725,7 @@
       _ref$fixedWeeks = _ref.fixedWeeks,
       fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
       defaultModifiers = _ref.modifiers,
-      rest = _objectWithoutProperties(_ref, _excluded$W);
+      rest = _objectWithoutProperties(_ref, _excluded$Z);
     var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
       enteredTo = _useState2[0],
@@ -8617,10 +8617,10 @@
     componentId: "sc-x4ge7a-0"
   })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
 
-  var _excluded$V = ["className"];
+  var _excluded$Y = ["className"];
   var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$V);
+      rest = _objectWithoutProperties(_ref, _excluded$Y);
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--linear", className)
@@ -8634,10 +8634,10 @@
     componentId: "sc-1f35d5h-0"
   })(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
 
-  var _excluded$U = ["className"];
+  var _excluded$X = ["className"];
   var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$U);
+      rest = _objectWithoutProperties(_ref, _excluded$X);
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--dots", className)
@@ -8646,7 +8646,7 @@
   DotsLoader.displayName = "DotsLoader";
 
   var rotateAnimation = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
-  var StyledSpinnerLoader = styled__default["default"].div.withConfig({
+  var StyledSpinnerLoader$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSpinnerLoader",
     componentId: "sc-1ht53g9-0"
   })(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
@@ -8659,7 +8659,7 @@
     return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
   });
 
-  var _excluded$T = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
+  var _excluded$W = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
   var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$radius = _ref.radius,
       radius = _ref$radius === void 0 ? 10 : _ref$radius,
@@ -8674,8 +8674,8 @@
       _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
       rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$T);
-    return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
+      rest = _objectWithoutProperties(_ref, _excluded$W);
+    return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader$1, _extends({
       ref: ref,
       className: className,
       $diameter: radius * 2,
@@ -8688,7 +8688,7 @@
   });
   SpinnerLoader.displayName = "SpinnerLoader";
 
-  var _excluded$S = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
+  var _excluded$V = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
   exports.SortDirection = void 0;
   (function (SortDirection) {
     SortDirection["None"] = "none";
@@ -8736,7 +8736,7 @@
       loading = _ref.loading,
       _ref$loadingRows = _ref.loadingRows,
       loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
-      args = _objectWithoutProperties(_ref, _excluded$S);
+      args = _objectWithoutProperties(_ref, _excluded$V);
     var _useState = React.useState(sortDirection),
       _useState2 = _slicedToArray(_useState, 2),
       columnDirection = _useState2[0],
@@ -9138,7 +9138,7 @@
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$R = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$U = ["children", "className", "type", "hover", "useOptimizedShadow"];
   /**
    * This is a component description and should sit directly above your component
    */
@@ -9151,7 +9151,7 @@
       hover = _ref$hover === void 0 ? false : _ref$hover,
       _ref$useOptimizedShad = _ref.useOptimizedShadow,
       useOptimizedShadow = _ref$useOptimizedShad === void 0 ? false : _ref$useOptimizedShad,
-      rest = _objectWithoutProperties(_ref, _excluded$R);
+      rest = _objectWithoutProperties(_ref, _excluded$U);
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classNames__default["default"](className, {
         "ac-shadow--raised--lg": !useOptimizedShadow && hover && type === "paper-1",
@@ -9204,7 +9204,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$Q = ["children", "className", "hoverable", "paperType"];
+  var _excluded$T = ["children", "className", "hoverable", "paperType"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -9212,7 +9212,7 @@
       hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
       _ref$paperType = _ref.paperType,
       paperType = _ref$paperType === void 0 ? "paper-2" : _ref$paperType,
-      rest = _objectWithoutProperties(_ref, _excluded$Q);
+      rest = _objectWithoutProperties(_ref, _excluded$T);
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
       className: classNames__default["default"]("c-card", className),
@@ -9291,12 +9291,12 @@
   });
   EntityCard$1.displayName = "EntityCard";
 
-  var _excluded$P = ["weight", "children"];
+  var _excluded$S = ["weight", "children"];
   var Title1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "light" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$P);
+      props = _objectWithoutProperties(_ref, _excluded$S);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
       variant: "Title 1",
@@ -9305,12 +9305,12 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$O = ["weight", "children"];
+  var _excluded$R = ["weight", "children"];
   var Title2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "light" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$O);
+      props = _objectWithoutProperties(_ref, _excluded$R);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
       variant: "Title 2",
@@ -9319,10 +9319,10 @@
   });
   Title2.displayName = "Title2";
 
-  var _excluded$N = ["children"];
+  var _excluded$Q = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$N);
+      props = _objectWithoutProperties(_ref, _excluded$Q);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
       variant: "Header 2",
@@ -9331,10 +9331,10 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$M = ["children"];
+  var _excluded$P = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$M);
+      props = _objectWithoutProperties(_ref, _excluded$P);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
       variant: "Header 3",
@@ -9343,12 +9343,12 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$L = ["weight", "children"];
+  var _excluded$O = ["weight", "children"];
   var Body1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$L);
+      props = _objectWithoutProperties(_ref, _excluded$O);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
       weight: weight,
@@ -9357,12 +9357,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$K = ["weight", "children"];
+  var _excluded$N = ["weight", "children"];
   var Caption1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$K);
+      props = _objectWithoutProperties(_ref, _excluded$N);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
       weight: weight,
@@ -9371,12 +9371,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$J = ["weight", "children"];
+  var _excluded$M = ["weight", "children"];
   var Caption2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$J);
+      props = _objectWithoutProperties(_ref, _excluded$M);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
       weight: weight,
@@ -9403,7 +9403,7 @@
     componentId: "sc-1idn4je-1"
   })(["&.c-signifier--animate-enter{opacity:0;transform:translateY(var(--signifier-in));}&.c-signifier--animate-enter-active{opacity:1;transform:translateY(0%);transition-duration:300ms;}&.c-signifier--animate-exit{transform:translateY(0%);opacity:1;}&.c-signifier--animate-exit-active{transform:translateY(var(--signifier-out));opacity:0;transition-duration:300ms;}"]);
   StyledSignifierTransition.displayName = "StyledSignifierTransition";
-  var StyledIcon = styled__default["default"].svg.withConfig({
+  var StyledIcon$1 = styled__default["default"].svg.withConfig({
     displayName: "Styles__StyledIcon",
     componentId: "sc-1idn4je-2"
   })(["", ""], {
@@ -9411,7 +9411,7 @@
     "lineHeight": "1rem",
     "marginRight": "0.25rem"
   });
-  StyledIcon.displayName = "StyledIcon";
+  StyledIcon$1.displayName = "StyledIcon";
 
   var signifierTypes = ["EyeIcon", "EyeSmallIcon", "PencilIcon", "PencilSmallIcon", "EyeOffIcon", "EyeOffSmallIcon", "ChecklistIcon", "ChecklistSmallIcon", "WarningTriangleIcon", "WarningTriangleSmallIcon", "DependencyIcon", "DependencySmallIcon", "MessageIcon", "MessageSmallIcon", "ClockStopwatchIcon", "ClockStopwatchSmallIcon", "ClockIcon", "ClockSmallIcon", "DollarOffIcon", "DollarOffSmallIcon", "DollarIcon", "DollarSmallIcon", "DollarCheckmarkIcon", "DollarCheckmarkSmallIcon", "DollarClockIcon", "DollarClockSmallIcon", "BellOffIcon", "BellOffSmallIcon", "LockIcon", "LockSmallIcon", "RecurringCheckmarkIcon", "RecurringCheckmarkSmallIcon"];
   var Signifier = function Signifier(_ref) {
@@ -9457,7 +9457,7 @@
       return /*#__PURE__*/React__default["default"].createElement(StyledSignifier, {
         className: classNames__default["default"]("c-signifier", className),
         $direction: direction
-      }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
+      }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
         as: Component
       }), value !== null && /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.SwitchTransition, {
         mode: "out-in"
@@ -9492,7 +9492,7 @@
     return props.size + "px";
   });
 
-  var _excluded$I = ["url", "alt", "size", "className", "children"];
+  var _excluded$L = ["url", "alt", "size", "className", "children"];
   /**
    * @component Avatar
    * @description
@@ -9525,7 +9525,7 @@
       size = _ref$size === void 0 ? 24 : _ref$size,
       className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$I);
+      rest = _objectWithoutProperties(_ref, _excluded$L);
     return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
       className: className
     }, children, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
@@ -9547,13 +9547,13 @@
     return props.$color && styled.css(["background-color:", ";"], props.$color);
   });
 
-  var _excluded$H = ["color", "size", "className"];
+  var _excluded$K = ["color", "size", "className"];
   var Dot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var color = _ref.color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 8 : _ref$size,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$H);
+      rest = _objectWithoutProperties(_ref, _excluded$K);
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
       className: classNames__default["default"]("c-dot", className),
       ref: ref,
@@ -9590,7 +9590,7 @@
   });
   StyledTagText.displayName = "StyledTagText";
 
-  var _excluded$G = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$J = ["name", "color", "showText", "showDot", "className"];
   var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
       color = _ref.color,
@@ -9599,7 +9599,7 @@
       _ref$showDot = _ref.showDot,
       showDot = _ref$showDot === void 0 ? true : _ref$showDot,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$G);
+      rest = _objectWithoutProperties(_ref, _excluded$J);
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
       className: classNames__default["default"]("c-tag", className),
       ref: ref
@@ -9701,11 +9701,11 @@
   });
   Option.displayName = "Option";
 
-  var StyledInput$2 = styled__default["default"].input.withConfig({
+  var StyledInput$3 = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-y7zymm-0"
   })(["display:none;"]);
-  StyledInput$2.displayName = "StyledInput";
+  StyledInput$3.displayName = "StyledInput";
   var StyledLabel = styled__default["default"].label.withConfig({
     displayName: "Styles__StyledLabel",
     componentId: "sc-y7zymm-1"
@@ -9714,12 +9714,12 @@
   var StyledCheckbox$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledCheckbox",
     componentId: "sc-y7zymm-2"
-  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput$2, StyledLabel, StyledInput$2, StyledLabel, StyledInput$2, StyledLabel, function (props) {
-    return props.hover && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$2, StyledLabel);
-  }, StyledInput$2, StyledLabel);
+  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, StyledInput$3, StyledLabel, function (props) {
+    return props.hover && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$3, StyledLabel);
+  }, StyledInput$3, StyledLabel);
   StyledCheckbox$1.displayName = "StyledCheckbox";
 
-  var _excluded$F = ["className", "hover", "id"];
+  var _excluded$I = ["className", "hover", "id"];
   /**
    * Checkbox component
    */
@@ -9728,14 +9728,14 @@
       hover = _ref.hover,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? "checkbox" : _ref$id,
-      rest = _objectWithoutProperties(_ref, _excluded$F);
+      rest = _objectWithoutProperties(_ref, _excluded$I);
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
       className: classNames__default["default"]("c-checkbox", {
         "c-checkbox__hover": hover,
         "c-checkbox__controlled": typeof hover === "boolean"
       }, className),
       hover: hover
-    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$3, _extends({
       id: id,
       className: "c-checkbox--input",
       type: "checkbox",
@@ -9915,7 +9915,7 @@
   StyledScrollShadowLeft.displayName = "StyledScrollShadowLeft";
   StyledScrollShadowRight.displayName = "StyledScrollShadowRight";
 
-  var _excluded$E = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
+  var _excluded$H = ["children", "className", "disableVertical", "disableHorizontal", "invertHorizontal", "invertVertical", "innerColor", "outerColor"];
   var ScrollShadow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -9929,7 +9929,7 @@
       invertVertical = _ref$invertVertical === void 0 ? false : _ref$invertVertical,
       innerColor = _ref.innerColor,
       outerColor = _ref.outerColor,
-      rest = _objectWithoutProperties(_ref, _excluded$E);
+      rest = _objectWithoutProperties(_ref, _excluded$H);
     var _useState = React.useState({
         top: 0,
         right: 0,
@@ -10049,7 +10049,7 @@
     return height;
   };
 
-  var _excluded$D = ["as", "className", "invert", "style"];
+  var _excluded$G = ["as", "className", "invert", "style"];
   var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$as = _ref.as,
       as = _ref$as === void 0 ? "div" : _ref$as,
@@ -10057,7 +10057,7 @@
       _ref$invert = _ref.invert,
       invert = _ref$invert === void 0 ? false : _ref$invert,
       style = _ref.style,
-      rest = _objectWithoutProperties(_ref, _excluded$D);
+      rest = _objectWithoutProperties(_ref, _excluded$G);
     var internalRef = useInitScrollRef(null, invert);
     var handleRef = useForkRef(internalRef, ref);
     var props = _objectSpread2(_objectSpread2({}, rest), {}, {
@@ -10493,7 +10493,7 @@
     return !props.$disabled && props.$invalid && styled.css(["border-color:var(--red-alert);"]);
   });
   StyledInputWrapper.displayName = "StyledInputWrapper";
-  var StyledInput$1 = styled__default["default"].input.withConfig({
+  var StyledInput$2 = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-1"
   })(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", ""], function (props) {
@@ -10503,9 +10503,9 @@
   }, function (props) {
     return props.$loading && styled.css(["cursor:progress;"]);
   });
-  StyledInput$1.displayName = "StyledInput";
+  StyledInput$2.displayName = "StyledInput";
 
-  var _excluded$C = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef"];
+  var _excluded$F = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
@@ -10521,7 +10521,7 @@
       startAdornment = _ref.startAdornment,
       endAdornment = _ref.endAdornment,
       wrapRef = _ref.wrapRef,
-      rest = _objectWithoutProperties(_ref, _excluded$C);
+      rest = _objectWithoutProperties(_ref, _excluded$F);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
     var handleWrapperClick = React.useCallback(function () {
@@ -10536,7 +10536,7 @@
       className: classNames__default["default"]("c-input-wrapper", className),
       onClick: handleWrapperClick,
       ref: wrapRef
-    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({
+    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, _extends({
       ref: handleRef,
       type: type,
       $size: size,
@@ -10573,14 +10573,14 @@
   }, StyledRadioLabel);
   StyledRadioButton$1.displayName = "StyledRadioButton";
 
-  var _excluded$B = ["className", "id", "hover"];
+  var _excluded$E = ["className", "id", "hover"];
   var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
       _ref$id = _ref.id,
       id = _ref$id === void 0 ? "radio" : _ref$id,
       hover = _ref.hover,
-      props = _objectWithoutProperties(_ref, _excluded$B);
+      props = _objectWithoutProperties(_ref, _excluded$E);
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton$1, {
       className: classNames__default["default"]("c-radio-btn", {
         "c-radio-btn__hover": hover,
@@ -10788,7 +10788,7 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$A = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue"];
+  var _excluded$D = ["type", "mode", "target", "options", "selected", "position", "onChange", "actionIcon", "actionLabel", "placeholder", "emptyAction", "disableSearch", "forceCloseMenu", "selectClassName", "keepSameOptionsOrder", "onSelectOpen", "onSelectClose", "renderOption", "handleDefaultOptionChange", "preselectDefaultValue"];
   var Select = function Select(_ref) {
     var _ref$type = _ref.type,
       type = _ref$type === void 0 ? "single" : _ref$type,
@@ -10822,7 +10822,7 @@
       handleDefaultOptionChange = _ref.handleDefaultOptionChange,
       _ref$preselectDefault = _ref.preselectDefaultValue,
       preselectDefaultValue = _ref$preselectDefault === void 0 ? type === "single" : _ref$preselectDefault,
-      prop = _objectWithoutProperties(_ref, _excluded$A);
+      prop = _objectWithoutProperties(_ref, _excluded$D);
     var childNode = React.useRef();
     var elementRef = React.useRef(null);
     var handleRef = useForkRef(childNode, elementRef);
@@ -11068,7 +11068,7 @@
   });
   StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
 
-  var _excluded$z = ["children", "active", "disabled", "className", "role"];
+  var _excluded$C = ["children", "active", "disabled", "className", "role"];
   var Item = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$active = _ref.active,
@@ -11077,7 +11077,7 @@
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
       role = _ref.role,
-      rest = _objectWithoutProperties(_ref, _excluded$z);
+      rest = _objectWithoutProperties(_ref, _excluded$C);
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
       className: classNames__default["default"]("c-nav__item", {
         "c-nav__item--active": active
@@ -11118,11 +11118,11 @@
   });
   StyledExpandSingle.displayName = "StyledExpandSingle";
 
-  var _excluded$y = ["expanded"];
+  var _excluded$B = ["expanded"];
   var ExpandSingle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
       expanded = _ref$expanded === void 0 ? false : _ref$expanded,
-      rest = _objectWithoutProperties(_ref, _excluded$y);
+      rest = _objectWithoutProperties(_ref, _excluded$B);
     return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
       ref: ref,
       viewBox: "0 0 24 24",
@@ -11412,7 +11412,7 @@
   };
   Nav.displayName = "Nav";
 
-  var _excluded$x = ["children", "as", "disablePointerEvents"];
+  var _excluded$A = ["children", "as", "disablePointerEvents"];
   var InputAdornmentBase = styled__default["default"].div.withConfig({
     displayName: "InputAdornment__InputAdornmentBase",
     componentId: "sc-1xfjx1z-0"
@@ -11429,7 +11429,7 @@
     var children = _ref.children,
       as = _ref.as,
       disablePointerEvents = _ref.disablePointerEvents,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
+      rest = _objectWithoutProperties(_ref, _excluded$A);
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(InputAdornmentBase, _extends({}, rest, {
       as: Component,
@@ -11439,11 +11439,11 @@
   });
   InputAdornment.displayName = "InputAdornment";
 
-  var _excluded$w = ["expanded"];
+  var _excluded$z = ["expanded"];
   var ExpandAll = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
       expanded = _ref$expanded === void 0 ? false : _ref$expanded,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$z);
     return /*#__PURE__*/React__default["default"].createElement(StyledExpand, _extends({
       ref: ref,
       viewBox: "0 0 24 24"
@@ -11561,14 +11561,14 @@
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$v = ["className", "disabled", "invalid"];
+  var _excluded$y = ["className", "disabled", "invalid"];
   var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$y);
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       $invalid: invalid,
       ref: ref,
@@ -11600,7 +11600,7 @@
     function () {});
   }
 
-  var _excluded$u = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose"];
+  var _excluded$x = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose"];
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
   };
@@ -11619,7 +11619,7 @@
       _ref$open = _ref.open,
       defaultOpen = _ref$open === void 0 ? false : _ref$open,
       onClose = _ref.onClose,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$x);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -11757,7 +11757,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$t = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
+  var _excluded$w = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       onClose = _ref.onClose,
@@ -11781,7 +11781,7 @@
       bodyClassName = _ref.bodyClassName,
       _ref$disableBackgroun2 = _ref.disableBackgroundClick,
       disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -11872,13 +11872,13 @@
   });
   StyledHeader.displayName = "StyledHeader";
 
-  var _excluded$s = ["className", "size", "children"];
+  var _excluded$v = ["className", "size", "children"];
   var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "small" : _ref$size,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
       className: classNames__default["default"]("c-header", className),
@@ -11894,7 +11894,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$r = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
+  var _excluded$u = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
   var AutoResizeTextarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$minRows = _ref.minRows,
       minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
@@ -11910,7 +11910,7 @@
       cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
       onKeyDown = _ref.onKeyDown,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, _excluded$r);
+      rest = _objectWithoutProperties(_ref, _excluded$u);
     var innerRef = React.useRef(null);
     var _useState = React.useState(minRows),
       _useState2 = _slicedToArray(_useState, 2),
@@ -12186,7 +12186,7 @@
   });
   StyledChoose.displayName = "StyledChoose";
 
-  var _excluded$q = ["children", "disabled", "active", "className"];
+  var _excluded$t = ["children", "disabled", "active", "className"];
   /**
    * Choose component
    */
@@ -12197,7 +12197,7 @@
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$q);
+      args = _objectWithoutProperties(_ref, _excluded$t);
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
       className: classNames__default["default"]("c-choose", className),
@@ -12293,21 +12293,21 @@
   StyledLinkElements.displayName = "StyledLinkElements";
   StyledLink.displayName = "StyledLink";
 
-  var _excluded$p = ["children", "className"];
+  var _excluded$s = ["children", "className"];
   /**
    * Back link component
    */
   var BackLink = function BackLink(_ref) {
     var children = _ref.children,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$p);
+      args = _objectWithoutProperties(_ref, _excluded$s);
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
       className: classNames__default["default"]("c-back-link", className)
     }, args), children);
   };
   BackLink.displayName = "BackLink";
 
-  var _excluded$o = ["as", "children", "variant", "size", "disabled", "className"];
+  var _excluded$r = ["as", "children", "variant", "size", "disabled", "className"];
   /**
    * Link component
    */
@@ -12320,7 +12320,7 @@
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$o);
+      args = _objectWithoutProperties(_ref, _excluded$r);
     var Component = as || "a";
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       ref: ref,
@@ -12431,7 +12431,7 @@
   })(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
   StyledDialogActions.displayName = "StyledDialogActions";
 
-  var _excluded$n = ["children", "className", "disableDefaultHeading"];
+  var _excluded$q = ["children", "className", "disableDefaultHeading"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogTitle = function DialogTitle(_ref) {
@@ -12439,7 +12439,7 @@
       className = _ref.className,
       _ref$disableDefaultHe = _ref.disableDefaultHeading,
       disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
-      rest = _objectWithoutProperties(_ref, _excluded$n);
+      rest = _objectWithoutProperties(_ref, _excluded$q);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
@@ -12448,13 +12448,13 @@
   };
   DialogTitle.displayName = "DialogTitle";
 
-  var _excluded$m = ["className", "children"];
+  var _excluded$p = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogContent = function DialogContent(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$m);
+      rest = _objectWithoutProperties(_ref, _excluded$p);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
@@ -12475,13 +12475,13 @@
   };
   DialogContentDivider.displayName = "DialogContentDivider";
 
-  var _excluded$l = ["className", "children"];
+  var _excluded$o = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$l);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
@@ -12735,7 +12735,7 @@
   });
   StyledPressed.displayName = "StyledPressed";
 
-  var _excluded$k = ["children", "active", "className"];
+  var _excluded$n = ["children", "active", "className"];
   /**
    * Pressed wrapper for button component
    * @deprecated
@@ -12745,7 +12745,7 @@
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$k);
+      args = _objectWithoutProperties(_ref, _excluded$n);
     return /*#__PURE__*/React__default["default"].createElement(StyledPressed, _extends({
       active: active,
       ref: ref,
@@ -13198,7 +13198,7 @@
   StyledToastMessage.displayName = "StyledToastMessage";
   StyledCloseSmallIcon.displayName = "StyledCloseSmallIcon";
 
-  var _excluded$j = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
+  var _excluded$m = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
   var ToastMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var text = _ref.text,
       type = _ref.type,
@@ -13209,7 +13209,7 @@
       dropShadow = _ref$dropShadow === void 0 ? false : _ref$dropShadow,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$j);
+      rest = _objectWithoutProperties(_ref, _excluded$m);
     var handleOnClose = React.useCallback(function () {
       if (typeof onClose === "function") {
         onClose();
@@ -13233,7 +13233,7 @@
   });
   ToastMessage.displayName = "ToastMessage";
 
-  var _excluded$i = ["in", "children", "style", "timeout"];
+  var _excluded$l = ["in", "children", "style", "timeout"];
   var defaultStyle$1 = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in-out"),
@@ -13261,7 +13261,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$i);
+      rest = _objectWithoutProperties(_ref, _excluded$l);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -13276,7 +13276,7 @@
   };
   Fade.displayName = "Fade";
 
-  var _excluded$h = ["in", "children", "style", "timeout", "initialDirection"];
+  var _excluded$k = ["in", "children", "style", "timeout", "initialDirection"];
   var Slide = function Slide(_ref) {
     var _ref$in = _ref.in,
       inProp = _ref$in === void 0 ? false : _ref$in,
@@ -13286,7 +13286,7 @@
       timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
       _ref$initialDirection = _ref.initialDirection,
       initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
-      rest = _objectWithoutProperties(_ref, _excluded$h);
+      rest = _objectWithoutProperties(_ref, _excluded$k);
     var directionSign;
     switch (initialDirection) {
       case "right":
@@ -13339,12 +13339,12 @@
     return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
   });
 
-  var _excluded$g = ["children", "direction"];
+  var _excluded$j = ["children", "direction"];
   var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
     var children = _ref.children,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "left" : _ref$direction,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$j);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
       timeout: 200,
       classNames: "c-slide",
@@ -13387,7 +13387,7 @@
   };
   ResizeTransition.displayName = "ResizeTransition";
 
-  var _excluded$f = ["in", "children", "style", "timeout"];
+  var _excluded$i = ["in", "children", "style", "timeout"];
   var defaultStyle = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in"),
@@ -13421,7 +13421,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$f);
+      rest = _objectWithoutProperties(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -13495,7 +13495,7 @@
   });
   StyledValueButton.displayName = "StyledValueButton";
 
-  var _excluded$e = ["active", "alwaysShowIcon", "icon", "label", "value"];
+  var _excluded$h = ["active", "alwaysShowIcon", "icon", "label", "value"];
   var ValueButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
@@ -13504,7 +13504,7 @@
       icon = _ref.icon,
       label = _ref.label,
       value = _ref.value,
-      args = _objectWithoutProperties(_ref, _excluded$e);
+      args = _objectWithoutProperties(_ref, _excluded$h);
     return /*#__PURE__*/React__default["default"].createElement(StyledValueButton, _extends({
       className: "c-value-button"
     }, args, {
@@ -13533,12 +13533,12 @@
   })(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
   StyledButton.displayName = "StyledButton";
 
-  var _excluded$d = ["children", "type"];
+  var _excluded$g = ["children", "type"];
   var Trigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "button" : _ref$type,
-      rest = _objectWithoutProperties(_ref, _excluded$d);
+      rest = _objectWithoutProperties(_ref, _excluded$g);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({
       ref: ref,
       role: "button",
@@ -13584,7 +13584,7 @@
   });
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$c = ["children", "type", "size", "invalid", "open", "endAdornment"];
+  var _excluded$f = ["children", "type", "size", "invalid", "open", "endAdornment"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
@@ -13596,7 +13596,7 @@
       _ref$open = _ref.open,
       open = _ref$open === void 0 ? false : _ref$open,
       endAdornment = _ref.endAdornment,
-      rest = _objectWithoutProperties(_ref, _excluded$c);
+      rest = _objectWithoutProperties(_ref, _excluded$f);
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
       ref: ref,
       role: "button",
@@ -13643,11 +13643,11 @@
   });
   StyledToggle.displayName = "StyledToggle";
 
-  var _excluded$b = ["hovered", "className"];
+  var _excluded$e = ["hovered", "className"];
   var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var hovered = _ref.hovered,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$b);
+      args = _objectWithoutProperties(_ref, _excluded$e);
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
       className: classNames__default["default"]("c-toggle", className),
       $isHovered: hovered,
@@ -13800,7 +13800,7 @@
   });
   ChipCloseIcon.displayName = "ChipCloseIcon";
 
-  var _excluded$a = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "variant", "typographyProps"];
+  var _excluded$d = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "variant", "typographyProps"];
   var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var leftAdornment = _ref.leftAdornment,
       label = _ref.label,
@@ -13812,7 +13812,7 @@
       closeClassName = _ref.closeClassName,
       variant = _ref.variant,
       typographyProps = _ref.typographyProps,
-      rest = _objectWithoutProperties(_ref, _excluded$a);
+      rest = _objectWithoutProperties(_ref, _excluded$d);
     var showClose = typeof onClose === "function";
     var _variant = React.useMemo(function () {
       if (typeof variant !== "undefined") {
@@ -13888,7 +13888,7 @@
     return isFirst.current;
   };
 
-  var _excluded$9 = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear"];
+  var _excluded$c = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
     var _ref$options = _ref.options,
@@ -13921,7 +13921,7 @@
       scrollWrapper = _ref.scrollWrapper,
       onClose = _ref.onClose,
       onClear = _ref.onClear,
-      prop = _objectWithoutProperties(_ref, _excluded$9);
+      prop = _objectWithoutProperties(_ref, _excluded$c);
     var selectedName = React.useMemo(function () {
       var value = "";
       if (!selected) {
@@ -14135,7 +14135,7 @@
         if (!open && limitChips > 0 && elements.length > limitChips) {
           _hidden = elements.splice(limitChips, elements.length - limitChips).length;
         }
-        return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/React__default["default"].createElement(_StyledTypography, {
+        return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/React__default["default"].createElement(_StyledTypography$1, {
           variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
         }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
       }
@@ -14187,7 +14187,7 @@
       $autoSize: autoSize,
       $open: open,
       ref: chipWrapper
-    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$1, {
+    }, startAdornment, /*#__PURE__*/React__default["default"].createElement(StyledInput$2, {
       className: "c-combo-box-input",
       onBlur: handleBlur,
       onFocus: onOpen,
@@ -14275,7 +14275,7 @@
   }, function (p) {
     return p.$_css2;
   });
-  var _StyledTypography = styled__default["default"](Typography).withConfig({
+  var _StyledTypography$1 = styled__default["default"](Typography).withConfig({
     displayName: "ComboBox___StyledTypography",
     componentId: "sc-uvsz9l-1"
   })(["display:flex;flex-shrink:0;align-items:center;"]);
@@ -14310,11 +14310,11 @@
   })(["display:flex;justify-content:center;gap:12px;align-items:center;height:32px;padding:4px 16px 4px 4px;position:relative;background:none;border:none;cursor:pointer;&:before{content:\"\";display:block;height:2px;width:0%;position:absolute;left:16px;background:var(--color-primary);transition:ease 0.3s all;border-radius:30px;opacity:0;}&:hover{", "{color:var(--page-paper-main);}&:before{height:32px;width:100%;left:0;opacity:1;}", "{fill:var(--page-paper-main);transform:rotate(90deg);transition:ease 0.3s;}}"], StyledText, StyledAddCrossIcon);
   StyledAddToListButton.displayName = "StyledAddToListButton";
 
-  var _excluded$8 = ["text", "className"];
+  var _excluded$b = ["text", "className"];
   var AddToListButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var text = _ref.text,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$8);
+      rest = _objectWithoutProperties(_ref, _excluded$b);
     return /*#__PURE__*/React__default["default"].createElement(StyledAddToListButton, _extends({
       ref: ref,
       className: classNames__default["default"]("c--add-to-list-btn", className)
@@ -14497,11 +14497,11 @@
   };
   ProgressRing.displayName = "ProgressRing";
 
-  var _excluded$7 = ["radius"];
+  var _excluded$a = ["radius"];
   var ProgressPie = function ProgressPie(_ref) {
     var _ref$radius = _ref.radius,
       radius = _ref$radius === void 0 ? 20 : _ref$radius,
-      rest = _objectWithoutProperties(_ref, _excluded$7);
+      rest = _objectWithoutProperties(_ref, _excluded$a);
     return /*#__PURE__*/React__default["default"].createElement(ProgressRing, _extends({}, rest, {
       stroke: radius,
       radius: radius
@@ -14825,7 +14825,7 @@
   ThumbsDownIcon.displayName = "ThumbsDownIcon";
   var ThumbsDownIcon$1 = ThumbsDownIcon;
 
-  var _excluded$6 = ["invalid", "required", "size", "children", "className", "weight"];
+  var _excluded$9 = ["invalid", "required", "size", "children", "className", "weight"];
   var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
@@ -14837,7 +14837,7 @@
       className = _ref.className,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "bold" : _ref$weight,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$9);
     var color = invalid ? "alert" : "primary";
     var variant = size === "regular" ? "Body 2" : "Caption 1";
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
@@ -14869,7 +14869,7 @@
     return $disabled && styled.css(["visibility:visible;"]);
   });
   StyledSpan.displayName = "StyledSpan";
-  var StyledInput = styled__default["default"](Typography).withConfig({
+  var StyledInput$1 = styled__default["default"](Typography).withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-1wapx2a-2"
   })(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{display:none;}"], {
@@ -14894,9 +14894,9 @@
     "whiteSpace": "nowrap",
     "width": "100%"
   });
-  StyledInput.displayName = "StyledInput";
+  StyledInput$1.displayName = "StyledInput";
 
-  var _excluded$5 = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
+  var _excluded$8 = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
   var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$variant = _ref.variant,
@@ -14906,7 +14906,7 @@
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       inputProps = _ref.inputProps,
       wrapRef = _ref.wrapRef,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$8);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
     var handleBlur = React.useCallback(function (evt) {
@@ -14923,7 +14923,7 @@
       forwardedAs: "span",
       weight: weight,
       $disabled: disabled
-    }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({}, inputProps, {
+    }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({}, inputProps, {
       ref: handleRef,
       forwardedAs: "input",
       variant: variant,
@@ -14935,13 +14935,13 @@
   });
   EditableContent.displayName = "EditableContent";
 
-  var _excluded$4 = ["onSave", "onCancel", "value", "inputProps"];
+  var _excluded$7 = ["onSave", "onCancel", "value", "inputProps"];
   var EditableText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var onSave = _ref.onSave,
       onCancel = _ref.onCancel,
       value = _ref.value,
       inputProps = _ref.inputProps,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$7);
     var _useState = React.useState(value),
       _useState2 = _slicedToArray(_useState, 2),
       currentValue = _useState2[0],
@@ -14999,11 +14999,11 @@
   });
   EditableText.displayName = "EditableText";
 
-  var _excluded$3 = ["withDocuments"];
+  var _excluded$6 = ["withDocuments"];
   var FolderIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var _ref$withDocuments = _ref.withDocuments,
       withDocuments = _ref$withDocuments === void 0 ? false : _ref$withDocuments,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$6);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 100,
       height: 100,
@@ -15146,7 +15146,7 @@
     return $renderAs === "list" && styled.css(["justify-self:flex-end;"]);
   });
 
-  var _excluded$2 = ["children", "gap", "renderAs"];
+  var _excluded$5 = ["children", "gap", "renderAs"];
   var EntityGroupContext = /*#__PURE__*/React__default["default"].createContext({
     renderAs: "grid"
   });
@@ -15155,7 +15155,7 @@
       gap = _ref.gap,
       _ref$renderAs = _ref.renderAs,
       renderAs = _ref$renderAs === void 0 ? "grid" : _ref$renderAs,
-      rest = _objectWithoutProperties(_ref, _excluded$2);
+      rest = _objectWithoutProperties(_ref, _excluded$5);
     return /*#__PURE__*/React__default["default"].createElement(EntityGroupContext.Provider, {
       value: {
         renderAs: renderAs
@@ -15167,14 +15167,14 @@
   };
   EntityGroup.displayName = "EntityGroup";
 
-  var _excluded$1 = ["children", "isCollection", "background", "className", "as"];
+  var _excluded$4 = ["children", "isCollection", "background", "className", "as"];
   var EntityCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       isCollection = _ref.isCollection,
       background = _ref.background,
       className = _ref.className,
       as = _ref.as,
-      rest = _objectWithoutProperties(_ref, _excluded$1);
+      rest = _objectWithoutProperties(_ref, _excluded$4);
     var _useContext = React.useContext(EntityGroupContext),
       renderAs = _useContext.renderAs;
     var classSuffix = "c-entity-card-".concat(renderAs);
@@ -15193,13 +15193,13 @@
   });
   EntityCard.displayName = "EntityCard";
 
-  var _excluded = ["listOrder", "listWidth", "visibleFromBreakpoint", "className"];
+  var _excluded$3 = ["listOrder", "listWidth", "visibleFromBreakpoint", "className"];
   var EntityProperty = function EntityProperty(_ref) {
     var listOrder = _ref.listOrder,
       listWidth = _ref.listWidth,
       visibleFromBreakpoint = _ref.visibleFromBreakpoint,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$3);
     var _useContext = React.useContext(EntityGroupContext),
       renderAs = _useContext.renderAs;
     var classSuffix = "c-entity-property-".concat(renderAs);
@@ -15773,6 +15773,10 @@
       size = _ref$size === void 0 ? 34 : _ref$size,
       children = _ref.children;
     var _children = React.Children.toArray(children).slice(0, limit);
+    var handleVariant = React.useMemo(function () {
+      if (size >= 34) return "Caption 1";
+      return "Caption 2";
+    }, [size]);
     return /*#__PURE__*/React__default["default"].createElement(AvatarGroupsStyles, null, _children.map(function (child) {
       var item = child;
       return /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
@@ -15788,11 +15792,489 @@
         marginInlineStart: "-8px"
       }
     }, /*#__PURE__*/React__default["default"].createElement(Typography, {
-      variant: "Caption 1",
+      variant: handleVariant,
       weight: "medium"
     }, "+", React.Children.count(children) - limit)));
   };
 
+  var StyledCommandPallete = styled__default["default"].div.withConfig({
+    displayName: "CommandPalletestyles__StyledCommandPallete",
+    componentId: "sc-16m145d-0"
+  })(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;mark{background-color:var(--color-primary-300);color:var(--color-theme-900);}"], FontStyle);
+  var StyledCommandPalleteWrapper = styled__default["default"].div.withConfig({
+    displayName: "CommandPalletestyles__StyledCommandPalleteWrapper",
+    componentId: "sc-16m145d-1"
+  })(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){padding-bottom:8px;padding-top:8px;}"]);
+  var StyledCommandPalleteHeader = styled__default["default"].div.withConfig({
+    displayName: "CommandPalletestyles__StyledCommandPalleteHeader",
+    componentId: "sc-16m145d-2"
+  })(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;border-bottom:1px solid var(--color-theme-400);"]);
+  var StyledSearchIcon = styled__default["default"].div.withConfig({
+    displayName: "CommandPalletestyles__StyledSearchIcon",
+    componentId: "sc-16m145d-3"
+  })(["margin-right:8px;svg{vertical-align:middle;}"]);
+  var StyledInput = styled__default["default"].input.withConfig({
+    displayName: "CommandPalletestyles__StyledInput",
+    componentId: "sc-16m145d-4"
+  })(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
+  var StyledParameter = styled__default["default"].span.withConfig({
+    displayName: "CommandPalletestyles__StyledParameter",
+    componentId: "sc-16m145d-5"
+  })(["color:var(--color-theme-transparent-500);margin-right:8px;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
+  var StyledActionWrapper = styled__default["default"].div.withConfig({
+    displayName: "CommandPalletestyles__StyledActionWrapper",
+    componentId: "sc-16m145d-6"
+  })(["align-items:center;display:flex;gap:8px;"]);
+  var StyledIcon = styled__default["default"].div.withConfig({
+    displayName: "CommandPalletestyles__StyledIcon",
+    componentId: "sc-16m145d-7"
+  })(["margin-right:8px;svg{vertical-align:middle;}"]);
+  var StyledCommandPalleteList = styled__default["default"].ul.withConfig({
+    displayName: "CommandPalletestyles__StyledCommandPalleteList",
+    componentId: "sc-16m145d-8"
+  })(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
+  var StyledHeading = styled__default["default"].p.withConfig({
+    displayName: "CommandPalletestyles__StyledHeading",
+    componentId: "sc-16m145d-9"
+  })(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);
+
+  // prettier-ignore
+  var StyledCommandPalleteItem = styled__default["default"].li.withConfig({
+    displayName: "CommandPalletestyles__StyledCommandPalleteItem",
+    componentId: "sc-16m145d-10"
+  })(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;background-color:", ";&:focus{background-color:var(--color-theme-200);}&::before{display:", ";background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}&:focus{outline:none;}"], function (_ref) {
+    var $selected = _ref.$selected;
+    return $selected ? "var(--color-theme-200)" : "transparent";
+  }, function (_ref2) {
+    var $selected = _ref2.$selected;
+    return $selected ? "block" : "none";
+  });
+  var StyledCommandPalleteCommandItem = styled__default["default"](StyledCommandPalleteItem).withConfig({
+    displayName: "CommandPalletestyles__StyledCommandPalleteCommandItem",
+    componentId: "sc-16m145d-11"
+  })(["user-select:none;"]);
+  var StyledSpinnerLoader = styled__default["default"](SpinnerLoader).withConfig({
+    displayName: "CommandPalletestyles__StyledSpinnerLoader",
+    componentId: "sc-16m145d-12"
+  })(["margin-right:4px;"]);
+
+  var ModeContext = /*#__PURE__*/React.createContext({
+    mode: "default",
+    setMode: function setMode() {
+      return null;
+    }
+  });
+  var ModeContextProvider = ModeContext.Provider;
+  var useModeContext = function useModeContext() {
+    return React.useContext(ModeContext);
+  };
+
+  var SelectedContext = /*#__PURE__*/React.createContext({
+    selected: 0,
+    setSelected: function setSelected() {
+      return null;
+    }
+  });
+  var SelectedContextProvider = SelectedContext.Provider;
+  var useSelectedContext = function useSelectedContext() {
+    return React.useContext(SelectedContext);
+  };
+
+  var SearchContext = /*#__PURE__*/React.createContext({
+    search: "",
+    onChangeSearch: function onChangeSearch() {
+      return null;
+    }
+  });
+  var SearchContextProvider = SearchContext.Provider;
+  var useSearchContext = function useSearchContext() {
+    return React.useContext(SearchContext);
+  };
+
+  var _excluded$2 = ["title", "renderIcon", "className", "index"];
+  var CommandPalleteCommandItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var title = _ref.title,
+      renderIcon = _ref.renderIcon,
+      className = _ref.className,
+      index = _ref.index,
+      rest = _objectWithoutProperties(_ref, _excluded$2);
+    var icon = renderIcon();
+    var _useSelectedContext = useSelectedContext(),
+      selected = _useSelectedContext.selected,
+      setSelected = _useSelectedContext.setSelected;
+    var onMouseEnter = function onMouseEnter() {
+      setSelected(index);
+    };
+    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteCommandItem, _extends({}, rest, {
+      ref: ref,
+      className: classNames__default["default"]("cp-item cp-command", className),
+      tabIndex: 1,
+      "aria-selected": selected === index,
+      onMouseEnter: onMouseEnter,
+      $selected: index === selected
+    }), /*#__PURE__*/React__default["default"].createElement(StyledIcon, null, icon), /*#__PURE__*/React__default["default"].createElement(_StyledTypography, {
+      overflow: "truncate",
+      whitespace: "no-wrap",
+      variant: "Body 1",
+      color: "primary"
+    }, title), /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null));
+  });
+  CommandPalleteCommandItem.displayName = "CommandPalleteCommandItem";
+  var _StyledTypography = styled__default["default"](Typography).withConfig({
+    displayName: "CommandPalleteCommandItem___StyledTypography",
+    componentId: "sc-12i2mxl-0"
+  })(["flex:1;"]);
+
+  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+  var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
+    var handleChange = _ref.handleChange,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      commandsLength = _ref.commandsLength,
+      itemsLength = _ref.itemsLength;
+    var inputRef = React.useRef(null);
+    var _useModeContext = useModeContext(),
+      mode = _useModeContext.mode,
+      setMode = _useModeContext.setMode;
+    var _useSelectedContext = useSelectedContext(),
+      setSelected = _useSelectedContext.setSelected,
+      selected = _useSelectedContext.selected;
+    var _useSearchContext = useSearchContext(),
+      search = _useSearchContext.search,
+      onChangeSearch = _useSearchContext.onChangeSearch;
+    var focusInput = function focusInput() {
+      if (inputRef && inputRef.current) {
+        inputRef.current.focus();
+      }
+    };
+    var clearInput = function clearInput() {
+      if (inputRef && inputRef.current) {
+        onChangeSearch("");
+      }
+    };
+    var checkIfNumber = function checkIfNumber(event) {
+      var regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/);
+      return !event.key.match(regex) && event.preventDefault();
+    };
+    React.useEffect(function () {
+      if (search.length > 0) {
+        if (itemsLength > commandsLength) {
+          setSelected(commandsLength);
+        } else {
+          setSelected(0);
+        }
+      }
+    }, [search, commandsLength, itemsLength, setSelected]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteHeader, {
+      className: "cp-header"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledSearchIcon, null, /*#__PURE__*/React__default["default"].createElement(SearchLargeIcon$1, null)), mode === "id" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
+      ref: inputRef,
+      autoFocus: true,
+      placeholder: mode === "id" ? "22" : "Search or jump to",
+      type: mode === "id" ? "number" : "text",
+      "aria-autocomplete": "list",
+      autoCapitalize: "none",
+      autoComplete: "off",
+      autoCorrect: "off",
+      role: "combobox",
+      spellCheck: false,
+      value: search,
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "Backspace" && mode !== "default" && search.length === 0) {
+          setMode("default");
+        }
+        if (mode === "id" && !isChrome) {
+          checkIfNumber(e);
+        }
+        if (e.key === "Enter") {
+          var selectedItem = document.querySelectorAll(".cp-item")[selected];
+          if (itemsLength > 0) {
+            selectedItem.click();
+          }
+        }
+      },
+      onChange: function onChange(e) {
+        var inputText = e.target.value;
+        if (inputText.startsWith("#")) {
+          setMode("id");
+          clearInput();
+        }
+        handleChange(e);
+      },
+      onPaste: function onPaste(e) {
+        var pastedText = e.clipboardData.getData("text");
+        if (pastedText.startsWith("#")) {
+          setMode("id");
+          !isChrome && onChangeSearch(pastedText.slice(1));
+        }
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, {
+      "aria-busy": true,
+      "aria-label": "Loading...",
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      role: "progressbar"
+    }) : null, mode !== "id" && search.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+      title: "Search by ID",
+      placement: "top"
+    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      onKeyPress: function onKeyPress(e) {
+        if (e.key === "Enter") {
+          setMode("id");
+          clearInput();
+          focusInput();
+        }
+      },
+      onClick: function onClick() {
+        setMode("id");
+        clearInput();
+        focusInput();
+      },
+      variant: "text gray"
+    }, /*#__PURE__*/React__default["default"].createElement(HashtagIcon$1, null))) : null, search.length > 0 || mode === "id" ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+      title: mode === "id" ? "Close ID mode" : "Clear",
+      placement: "top"
+    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      variant: "text gray",
+      onKeyPress: function onKeyPress(e) {
+        if (e.key === "Enter") {
+          setMode("default");
+          clearInput();
+          focusInput();
+        }
+      },
+      onClick: function onClick() {
+        setMode("default");
+        clearInput();
+        focusInput();
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(CloseIcon$1, null))) : null));
+  };
+  CommandPalleteHeader.displayName = "CommandPalleteItem";
+
+  var findHiglightSearch = function findHiglightSearch(searchValue, target) {
+    if (searchValue && target) {
+      var purifiedTarget = target === null || target === void 0 ? void 0 : target.replace(/<script.*?>.*?<\/script>/gi, "");
+      var parser = new DOMParser();
+      var doc = parser.parseFromString(purifiedTarget, "text/html");
+      var text = doc.body.textContent || "";
+      var regex = new RegExp("(".concat(searchValue, ")"), "gi");
+      return text.replace(regex, "<mark>$1</mark>");
+    }
+    return "";
+  };
+
+  var _excluded$1 = ["title", "renderIcon", "className", "index"];
+  var CommandPalleteItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var title = _ref.title,
+      renderIcon = _ref.renderIcon,
+      className = _ref.className,
+      index = _ref.index,
+      rest = _objectWithoutProperties(_ref, _excluded$1);
+    var icon = renderIcon && renderIcon();
+    var _useSelectedContext = useSelectedContext(),
+      selected = _useSelectedContext.selected,
+      setSelected = _useSelectedContext.setSelected;
+    var _useSearchContext = useSearchContext(),
+      search = _useSearchContext.search;
+    var onMouseEnter = function onMouseEnter() {
+      setSelected(index);
+    };
+    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteItem, _extends({}, rest, {
+      ref: ref,
+      className: classNames__default["default"]("cp-item", className),
+      tabIndex: 1,
+      "aria-selected": selected === index,
+      onMouseEnter: onMouseEnter,
+      $selected: index === selected
+    }), /*#__PURE__*/React__default["default"].createElement(StyledIcon, null, icon), search && title ? /*#__PURE__*/React__default["default"].createElement(Typography, {
+      overflow: "truncate",
+      whitespace: "no-wrap",
+      variant: "Body 1",
+      color: "primary",
+      dangerouslySetInnerHTML: {
+        __html: findHiglightSearch(search, title)
+      }
+    }) : null);
+  });
+  CommandPalleteItem.displayName = "CommandPalleteItem";
+
+  var CommandPalleteList = function CommandPalleteList(_ref) {
+    var children = _ref.children,
+      heading = _ref.heading,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? false : _ref$visible;
+    return visible ? /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteList, {
+      className: "cp-list",
+      tabIndex: -1,
+      role: "listbox"
+    }, heading ? /*#__PURE__*/React__default["default"].createElement(StyledHeading, {
+      tabIndex: -1
+    }, heading) : null, children) : null;
+  };
+  CommandPalleteList.displayName = "CommandPalleteList";
+
+  var hasChildren = function hasChildren(element) {
+    return /*#__PURE__*/React.isValidElement(element) && Boolean(element.props.children);
+  };
+  var hasComplexChildren = function hasComplexChildren(element) {
+    return /*#__PURE__*/React.isValidElement(element) && hasChildren(element) && React.Children.toArray(element.props.children).reduce(function (response, child) {
+      return response || /*#__PURE__*/React.isValidElement(child);
+    }, false);
+  };
+  var deepMap = function deepMap(children, deepMapFn) {
+    return React.Children.toArray(children).map(function (child, index, mapChildren) {
+      if ( /*#__PURE__*/React.isValidElement(child) && hasComplexChildren(child)) {
+        return deepMapFn( /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
+          children: deepMap(child.props.children, deepMapFn)
+        })));
+      }
+      return deepMapFn(child, index, mapChildren);
+    });
+  };
+
+  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode"];
+  var CommandPallete = function CommandPallete(_ref) {
+    var children = _ref.children,
+      onChangeSearch = _ref.onChangeSearch,
+      search = _ref.search,
+      mode = _ref.mode,
+      setMode = _ref.setMode,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+    var listWrapperRef = React.useRef(null);
+    var handleChange = function handleChange(e) {
+      onChangeSearch(e.target.value);
+    };
+    var scrollToTop = function scrollToTop() {
+      var _listWrapperRef$curre;
+      (_listWrapperRef$curre = listWrapperRef.current) === null || _listWrapperRef$curre === void 0 ? void 0 : _listWrapperRef$curre.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    };
+    var scrollToBottom = function scrollToBottom() {
+      var _listWrapperRef$curre2;
+      (_listWrapperRef$curre2 = listWrapperRef.current) === null || _listWrapperRef$curre2 === void 0 ? void 0 : _listWrapperRef$curre2.scrollTo({
+        top: listWrapperRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    };
+    var filterChildren = React.useMemo(function () {
+      var itemsLength = 0;
+      var commandsLength = 0;
+      var items = deepMap(children, function (child) {
+        var item = child;
+        var clonedElement;
+        if (item && item.type === CommandPalleteList) {
+          clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2({}, item.props));
+        }
+        if (item && item.type === CommandPalleteCommandItem) {
+          clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
+            index: itemsLength,
+            selected: selected
+          }));
+          itemsLength++;
+          commandsLength++;
+        }
+        if (item && item.type === CommandPalleteItem) {
+          clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
+            index: itemsLength,
+            selected: selected
+          }));
+          itemsLength++;
+        }
+        return clonedElement;
+      });
+      return {
+        items: items,
+        itemsLength: itemsLength,
+        commandsLength: commandsLength
+      };
+    }, [children, selected]);
+    var handleChangeSelected = function handleChangeSelected(direction) {
+      var items = document.querySelectorAll(".cp-item");
+      var index = 0;
+      var newIndex = 0;
+      var newItem = null;
+      if (direction === "down") {
+        items.forEach(function (_, i) {
+          if (i === selected) {
+            index = i;
+          }
+        });
+        newIndex = index === items.length - 1 ? 0 : index + 1;
+      } else if (direction === "up") {
+        items.forEach(function (_, i) {
+          if (i === selected) {
+            index = i;
+          }
+        });
+        newIndex = !index ? items.length - 1 : index - 1;
+      } else {
+        setSelected(0);
+      }
+      newItem = items[newIndex];
+      if (newItem && typeof newIndex === "number") {
+        setSelected(newIndex);
+        newItem.scrollIntoView({
+          behavior: "smooth",
+          block: newIndex ? "center" : "end"
+        });
+      }
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Dialog, rest, /*#__PURE__*/React__default["default"].createElement(SearchContextProvider, {
+      value: {
+        search: search,
+        onChangeSearch: onChangeSearch
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(SelectedContextProvider, {
+      value: {
+        selected: selected,
+        setSelected: setSelected
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledCommandPallete, {
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          handleChangeSelected("down");
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          handleChangeSelected("up");
+        }
+        if (e.key === "End") {
+          e.preventDefault();
+          scrollToBottom();
+          setSelected(filterChildren.itemsLength - 1);
+        }
+        if (e.key === "Home") {
+          e.preventDefault();
+          scrollToTop();
+          setSelected(0);
+        }
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ModeContextProvider, {
+      value: {
+        mode: mode,
+        setMode: setMode
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(CommandPalleteHeader, {
+      handleChange: handleChange,
+      commandsLength: filterChildren.commandsLength,
+      itemsLength: filterChildren.itemsLength
+    })), /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteWrapper, {
+      ref: listWrapperRef
+    }, filterChildren.items)))));
+  };
+  CommandPallete.displayName = "CommandPallete";
+  CommandPallete.List = CommandPalleteList;
+  CommandPallete.Item = CommandPalleteItem;
+  CommandPallete.CommandItem = CommandPalleteCommandItem;
+
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
   exports.AccordionItem = AccordionItem;
@@ -15861,6 +16343,7 @@
   exports.CollapseAllIcon = CollapseAllIcon$1;
   exports.CollapseExpandSingleIcon = CollapseExpandSingleIcon$1;
   exports.ComboBox = ComboBox;
+  exports.CommandPallete = CommandPallete;
   exports.CompleteCheckbox = CompleteCheckbox;
   exports.ComputerIcon = ComputerIcon$1;
   exports.ConfirmDialog = ConfirmDialog;