orcs-design-system 3.2.37 → 3.2.39

package/es/components/Popover/index.js

@@ -28,9 +28,8 @@ const TooltipControl = styled.div.withConfig({
 const StyledPopover = styled.div.withConfig({
   displayName: "Popover__StyledPopover",
   componentId: "sc-1bwoak-2"
-})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;}&.visible{opacity:1;pointer-events:auto;visibility:visible;}& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.greyMid"));
+})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;overflow:hidden;}&.visible{opacity:1;pointer-events:auto;visibility:visible;}& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.greyMid"));
 export default function Popover(_ref) {
-  var _refs$floating;
   let {
     children,
     direction = "right",
@@ -93,9 +92,12 @@ export default function Popover(_ref) {
     ...floatingStyles,
     zIndex: getFloatingUiZIndex(context.refs.reference)
   }), [floatingStyles, context.refs.reference]);
-  const containsLinks = (_refs$floating = refs.floating) === null || _refs$floating === void 0 || (_refs$floating = _refs$floating.current) === null || _refs$floating === void 0 ? void 0 : _refs$floating.querySelectorAll("a").length;
-  const visiblePopoverClassName = useMemo(() => "Tooltip popover visible ".concat(directionClass), [directionClass]);
-  const floatingProps = useMemo(() => getFloatingProps(props), [getFloatingProps, props]);
+  const containsLinks = refs.floating?.current?.querySelectorAll("a").length;
+  const visiblePopoverClassName = useMemo(() => `Tooltip popover visible ${directionClass}`, [directionClass]);
+  const floatingProps = useMemo(() => getFloatingProps({
+    ...props,
+    className: `${props.className} ${visiblePopoverClassName}`
+  }), [getFloatingProps, props, visiblePopoverClassName]);
   return /*#__PURE__*/_jsxs(Container, {
     inlineBlock: inlineBlock,
     ...props,

package/es/components/ProgressBar/index.js

@@ -17,8 +17,8 @@ const Fill = styled.div.withConfig({
     const sixPxInPercentage = 6 / props.containerWidthPx * 100;
     const minPixelValue = 1; // Minimum pixel value for visibility
     const minPercentageValue = minPixelValue / props.containerWidthPx * 100;
-    const calculatedWidth = "calc(".concat(props.fillWidth, "% - ").concat(sixPxInPercentage, "%)");
-    return "max(".concat(calculatedWidth, ", ").concat(minPercentageValue, "%)");
+    const calculatedWidth = `calc(${props.fillWidth}% - ${sixPxInPercentage}%)`;
+    return `max(${calculatedWidth}, ${minPercentageValue}%)`;
   }
   return "0";
 }, expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));

package/es/components/RadioButton/index.js

@@ -208,10 +208,10 @@ RadioButton.propTypes = {
   // ariaLabel prop must be specified if label is not provided
   ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Radio component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Radio component. When \`label\` is not provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Radio component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Radio component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components/Range/index.js

@@ -8,8 +8,23 @@ const vars = {
   trackHeight: "4px",
   thumbDiameter: "20px"
 };
-const thumb = props => "\n    margin-top: -8px;\n    box-sizing: border-box;\n    border: none;\n    width: ".concat(vars.thumbDiameter, ";\n    height: ").concat(vars.thumbDiameter, ";\n    border-radius: ").concat(vars.thumbDiameter, ";\n    background: ").concat(themeGet("colors.primary")(props), ";\n");
-const track = props => "\n    box-sizing: border-box;\n    border: none;\n    width: 100%;\n    height: ".concat(vars.trackHeight, ";\n\t  background: ").concat(themeGet("colors.greyLight")(props), ";\n    border-radius: 4px;\n");
+const thumb = props => `
+    margin-top: -8px;
+    box-sizing: border-box;
+    border: none;
+    width: ${vars.thumbDiameter};
+    height: ${vars.thumbDiameter};
+    border-radius: ${vars.thumbDiameter};
+    background: ${themeGet("colors.primary")(props)};
+`;
+const track = props => `
+    box-sizing: border-box;
+    border: none;
+    width: 100%;
+    height: ${vars.trackHeight};
+	  background: ${themeGet("colors.greyLight")(props)};
+    border-radius: 4px;
+`;
 const Wrapper = styled.div.withConfig({
   displayName: "Range__Wrapper",
   componentId: "sc-zb0zps-0"

package/es/components/Select/index.js

@@ -44,7 +44,7 @@ const MultiValueRemove = props => {
     ...props,
     innerProps: {
       ...innerProps,
-      "aria-label": "Remove ".concat(data.label)
+      "aria-label": `Remove ${data.label}`
     }
   });
 };
@@ -75,7 +75,6 @@ const SELECT_TYPES = {
  *
  */
 const Select = /*#__PURE__*/forwardRef((props, ref) => {
-  var _SELECT_TYPES$props$s;
   const theme = useTheme();
   const inputRef = useInputFocus(ref, props.focus);
   const {
@@ -180,11 +179,11 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         theme
       }),
       overflow: "hidden",
-      border: "1px solid ".concat(props.invalid ? themeGet("colors.danger")({
+      border: `1px solid ${props.invalid ? themeGet("colors.danger")({
         theme
       }) : themeGet("colors.black30")({
         theme
-      }))
+      })}`
     }),
     container: (provided, state) => ({
       ...provided,
@@ -301,9 +300,9 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         color: themeGet("colors.white")({
           theme
         }),
-        borderLeft: "solid 1px ".concat(themeGet("colors.primaryDark")({
+        borderLeft: `solid 1px ${themeGet("colors.primaryDark")({
           theme
-        })),
+        })}`,
         padding: "6.5px 6px 6.5px 5px",
         display: state.data.isFixed ? "none" : provided.display,
         cursor: "pointer",
@@ -353,9 +352,9 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const components = {
     MultiValueRemove,
-    ...((props === null || props === void 0 ? void 0 : props.components) || {})
+    ...(props?.components || {})
   };
-  const SelectComponent = (_SELECT_TYPES$props$s = SELECT_TYPES[props === null || props === void 0 ? void 0 : props.selectType]) !== null && _SELECT_TYPES$props$s !== void 0 ? _SELECT_TYPES$props$s : SELECT_TYPES.default;
+  const SelectComponent = SELECT_TYPES[props?.selectType] ?? SELECT_TYPES.default;
   const component = /*#__PURE__*/_jsxs(Wrapper, {
     inverted: props.inverted,
     "data-testid": props["data-testid"],
@@ -397,10 +396,10 @@ Select.propTypes = {
   // ariaLabel prop must be specified if label is not provided
   ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Select component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Select component. When \`label\` is not provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Select component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },
@@ -411,10 +410,10 @@ Select.propTypes = {
   /** Specifies the ID for the rendered Select box. If you use the label prop label will automatically point to this ID, so this is required. */
   inputId: (props, propName) => {
     if (props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Select component. When `label` is provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Select component. When \`label\` is provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Select component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components/SideNav/SideNav.stories.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import SideNav from "./index";
-import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, Redirect, useParams } from "react-router-dom";
+import { BrowserRouter as Router, Route, Link, Routes, useParams, useMatch, Navigate } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
 import { far } from "@fortawesome/free-regular-svg-icons";
@@ -59,59 +59,46 @@ const PageCard = _ref2 => {
   });
 };
 const SideBarWithConfig = () => {
-  const location = useLocation();
+  const isHome = useMatch("/");
+  const isProfile = useMatch("/profile");
+  const isSearch = useMatch("/search");
   const items = [{
     iconName: "building",
     name: "Home",
     component: makeLinkComponent("/"),
     actionType: "link",
-    isActive: matchPath(location.pathname, {
-      path: "/",
-      exact: true
-    })
+    isActive: !!isHome
   }, {
     iconName: "user",
     name: "My profile",
     component: makeLinkComponent("/profile"),
     actionType: "link",
-    isActive: matchPath(location.pathname, {
-      path: "/profile"
-    })
+    isActive: !!isProfile
   }, {
     iconName: "id-card",
     name: "Search Page",
     component: makeLinkComponent("/search"),
     actionType: "link",
-    isActive: matchPath(location.pathname, {
-      path: "/search"
-    })
+    isActive: isSearch
   }, {
     iconName: "snowflake",
     name: "Filter",
-    hide: !matchPath(location.pathname, {
-      path: "/search"
-    }),
+    hide: !isSearch,
     // Specify hide if you want to hide this item
     component: makePanelComponent("Filter"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: matchPath(location.pathname, {
-      path: "/search"
-    }),
+    pageSpecific: isSearch,
     isExpandedByDefault: true
   }, {
     iconName: "sun",
     name: "People",
-    hide: !matchPath(location.pathname, {
-      path: "/profile"
-    }),
+    hide: !isProfile,
     // Specify hide if you want to hide this item
     component: makePanelComponent("People"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: matchPath(location.pathname, {
-      path: "/profile"
-    }),
+    pageSpecific: isProfile,
     isExpandedByDefault: true
   }, {
     iconName: "bell",
@@ -128,7 +115,7 @@ const SideBarWithConfig = () => {
     component: makePanelComponent("BrowseTeams", /*#__PURE__*/_jsx(Flex, {
       flexDirection: "column",
       children: ["Team 1", "Team 2", "Team 3"].map(team => /*#__PURE__*/_jsx(Link, {
-        to: "/teams/".concat(team),
+        to: `/teams/${team}`,
         children: team
       }, team))
     })),
@@ -172,30 +159,32 @@ const SideBarWithConfig = () => {
     children: [/*#__PURE__*/_jsx(SideNav, {
       items: items,
       sideNavHeight: "500px"
-    }), /*#__PURE__*/_jsxs(Switch, {
+    }), /*#__PURE__*/_jsxs(Routes, {
       children: [/*#__PURE__*/_jsx(Route, {
-        exact: true,
         path: "/",
-        children: /*#__PURE__*/_jsx(PageCard, {
+        element: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Home"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/profile",
-        children: /*#__PURE__*/_jsx(PageCard, {
+        element: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Profile route"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/teams/:teamId",
-        children: /*#__PURE__*/_jsx(PageCard, {
+        element: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx(Teams, {})
         })
-      }), /*#__PURE__*/_jsx(Redirect, {
-        from: "/iframe.html",
-        to: "/"
+      }), /*#__PURE__*/_jsx(Route, {
+        path: "/iframe.html",
+        element: /*#__PURE__*/_jsx(Navigate, {
+          to: "/",
+          replace: true
+        })
       })]
     })]
   });

package/es/components/SideNav/index.js

@@ -20,12 +20,12 @@ const SideNavWrapper = styled("div").withConfig({
   maxWidth: "max-content",
   fontFamily: themeGet("fonts.main")(props),
   borderRadius: themeGet("radii.2")(props),
-  border: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+  border: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
   boxShadow: themeGet("shadows.boxDefault")(props),
   display: "flex",
   alignItems: "stretch",
   alignContent: "stretch",
-  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
+  [`@media screen and (max-width: ${SMALL_SCREEN_BREAKPOINT}px)`]: {
     borderRadius: "0",
     width: "100%",
     height: "auto",
@@ -54,8 +54,8 @@ const SideNavItems = styled("div").withConfig({
   justifyContent: "flex-start",
   textAlign: "center",
   position: "relative",
-  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
-    height: "calc(".concat(themeGet("space.r")(props), " * 2 + 30px)"),
+  [`@media screen and (max-width: ${SMALL_SCREEN_BREAKPOINT}px)`]: {
+    height: `calc(${themeGet("space.r")(props)} * 2 + 30px)`,
     flexDirection: "row",
     justifyContent: "space-around",
     alignItems: "center"
@@ -64,27 +64,7 @@ const SideNavItems = styled("div").withConfig({
 const PanelControlTooltip = styled(Popover).withConfig({
   displayName: "SideNav__PanelControlTooltip",
   componentId: "sc-1heo0i9-2"
-})(props => css({
-  alignSelf: "center",
-  position: props.hideExpandedControl ? "absolute" : "relative",
-  right: props.hideExpandedControl ? "r" : "initial",
-  top: "r",
-  display: props.hideExpandedControl ? "block" : "none !important",
-  borderTop: props.hideExpandedControl ? "none" : "solid 1px",
-  borderTopColor: themeGet("colors.greyLighter")(props),
-  paddingTop: props.hideExpandedControl ? "0" : "r",
-  width: props.hideExpandedControl ? "auto" : "100%",
-  justifyContent: "center",
-  "&:focus": {
-    outline: "0"
-  },
-  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
-    border: "none"
-  },
-  "& .popoverText": {
-    marginTop: props.hideExpandedControl ? "0" : "s"
-  }
-}));
+})(["position:absolute;right:", ";top:", ";"], themeGet("space.r"), themeGet("space.r"));
 const PanelControl = styled("button").withConfig({
   displayName: "SideNav__PanelControl",
   componentId: "sc-1heo0i9-3"
@@ -112,16 +92,16 @@ const SideNavExpanded = styled("div").withConfig({
   height: "inherit",
   overflowY: "auto",
   padding: "r",
-  borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+  borderLeft: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
   "&:focus": {
     outline: "0"
   },
-  ["@media screen and (max-width: ".concat(SMALL_SCREEN_BREAKPOINT, "px)")]: {
+  [`@media screen and (max-width: ${SMALL_SCREEN_BREAKPOINT}px)`]: {
     width: "100%",
     minWidth: "initial",
     maxWidth: "initial",
     borderLeft: "none",
-    borderBottom: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+    borderBottom: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
     height: "calc(" + themeGet("appScale.sidebarMobileHeight")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")"
   }
 }));
@@ -202,7 +182,7 @@ const SideNav = _ref => {
       handleItemClick: handleItemClick,
       navItemRefs: navItemRefs
     }, item.index);
-    if (item.pageSpecific && !orderedItems[index - 1].pageSpecific) {
+    if (item.pageSpecific && !orderedItems[index - 1].pageSpecific && !isSmallScreen) {
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Divider, {
           light: true,
@@ -230,7 +210,6 @@ const SideNav = _ref => {
         children: [item.component(), /*#__PURE__*/_jsx(PanelControlTooltip, {
           width: "80px",
           textAlign: "center",
-          hideExpandedControl: true,
           direction: "left",
           text: "Hide panel",
           children: /*#__PURE__*/_jsx(PanelControl, {

package/es/components/Sidebar/index.js

@@ -93,7 +93,7 @@ export const SidebarTab = styled("button").attrs(props => ({
   },
   "&.Sidebar__Badge": {
     "&::before": {
-      content: "\"".concat(props.badge, "\""),
+      content: `"${props.badge}"`,
       position: "absolute",
       top: "8px",
       right: "calc(50% - 19px)",

package/es/components/StyledLink/StyledLink.stories.js

@@ -3,7 +3,7 @@ import StyledLink from ".";
 import Box from "../Box";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/StyledLink",
@@ -72,11 +72,10 @@ export const reactLink = () => /*#__PURE__*/_jsxs(BrowserRouter, {
   children: [routes.map(route => /*#__PURE__*/_jsx(StyledLink, {
     to: route.path,
     children: route.label
-  }, route.path)), /*#__PURE__*/_jsx(Switch, {
+  }, route.path)), /*#__PURE__*/_jsx(Routes, {
     children: routes.map(route => /*#__PURE__*/_jsx(Route, {
       path: route.path,
-      exact: route.exact,
-      children: /*#__PURE__*/_jsxs("div", {
+      element: /*#__PURE__*/_jsxs("div", {
         style: {
           padding: "100px"
         },

package/es/components/Table/Table.stories.js

@@ -81,8 +81,8 @@ export const NestedTreeStructure = () => {
       const type = types[cell.getValue()];
       return /*#__PURE__*/_jsx(Box, {
         children: /*#__PURE__*/_jsx(Badge, {
-          variant: type === null || type === void 0 ? void 0 : type.variant,
-          children: type === null || type === void 0 ? void 0 : type.label
+          variant: type?.variant,
+          children: type?.label
         })
       });
     }

package/es/components/Table/getExpandColumnConfig.js

@@ -18,7 +18,7 @@ const getHiglightedSearchTerm = _ref => {
     searchTerm,
     matchHighlightColor
   } = _ref;
-  const regex = new RegExp("(".concat(searchTerm, ")"), "i");
+  const regex = new RegExp(`(${searchTerm})`, "i");
   return value.split(regex).map((part, i) => part.match(regex) ? /*#__PURE__*/_jsx(StyledHighlight, {
     matchHighlightColor: matchHighlightColor,
     children: part
@@ -35,7 +35,7 @@ const GroupedCell = props => {
       matchHighlightColor
     },
     enableFilterMatchHighlighting
-  } = (table === null || table === void 0 ? void 0 : table.options) || {};
+  } = table?.options || {};
   const searchTerm = table.getState().globalFilter;
   const value = get(row.original, firstCol.accessorKey);
   let renderedCellValue = value;
@@ -68,7 +68,7 @@ const HeaderCell = props => {
     tableConfig
   } = props;
   let headerMarkup = firstCol.header;
-  if ( /*#__PURE__*/React.isValidElement(firstCol.Header)) {
+  if (/*#__PURE__*/React.isValidElement(firstCol.Header)) {
     headerMarkup = firstCol.Header;
   }
   if (typeof firstCol.Header === "function") {
@@ -85,7 +85,7 @@ const HeaderCell = props => {
   });
 };
 HeaderCell.propTypes = PropTypes.Obj;
-export default ((firstCol, tableConfig) => ({
+export default (firstCol, tableConfig) => ({
   "mrt-row-expand": {
     Header: props => /*#__PURE__*/_jsx(HeaderCell, {
       ...props,
@@ -107,4 +107,4 @@ export default ((firstCol, tableConfig) => ({
       grow: firstCol.grow
     } : {})
   }
-}));
+});

package/es/components/Table/muiStyleOverrides.js

@@ -37,8 +37,7 @@ const muiStyleOverrides = {
       borderBottomStyle = "dashed";
     }
     if (!row.originalSubRows && table.options.enableExpanding) {
-      var _row$getParentRow;
-      const subRows = (_row$getParentRow = row.getParentRow()) === null || _row$getParentRow === void 0 ? void 0 : _row$getParentRow.subRows;
+      const subRows = row.getParentRow()?.subRows;
       if (!subRows) {
         borderBottomStyle = "none";
       } else {

package/es/components/Tabs/index.js

@@ -74,7 +74,7 @@ export const TabItem = styled("div").withConfig({
         borderRadius: "50%",
         fontSize: themeGet("fontSizes.0")(props),
         fontWeight: themeGet("fontWeights.2")(props),
-        content: "\"".concat(props.notification, "\""),
+        content: `"${props.notification}"`,
         bg: themeGet("colors.danger")(props),
         color: themeGet("colors.white")(props),
         zIndex: 4
@@ -94,11 +94,11 @@ export const Tab = _ref => {
     active: active,
     notification: notification,
     role: "presentation",
-    className: "".concat(active ? "active" : "", " ").concat(notification ? "notification notification-" + notification : ""),
+    className: `${active ? "active" : ""} ${notification ? "notification notification-" + notification : ""}`,
     ...props,
     children: React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
       role: "tab",
-      "aria-selected": "".concat(active)
+      "aria-selected": `${active}`
     }))
   });
   return theme ? /*#__PURE__*/_jsx(ThemeProvider, {

package/es/components/Tag/index.js

@@ -16,7 +16,7 @@ const TagValue = styled.button.attrs(props => ({
 })).withConfig({
   displayName: "Tag__TagValue",
   componentId: "sc-1dh2aa8-1"
-})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:", ";display:flex;align-items:center;flex-wrap:nowrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], props => themeGet("fontSizes.1")(props), props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "default" : "pointer", props => props.showEdit || props.showInfo || props.showRemove ? "15px 0 0 15px" : "15px", props => props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : themeGet("colors.primary")(props), props => props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault"), props => props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black80")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props), props => props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningLighter")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props)), props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props), props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? "rgba(255,255,255,0.3)" : props.selected ? "rgba(0,0,0,0.3)" : themeGet("colors.primary20")(props)));
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:", ";display:flex;align-items:center;flex-wrap:nowrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], props => themeGet("fontSizes.1")(props), props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "default" : "pointer", props => props.showEdit || props.showInfo || props.showRemove ? "15px 0 0 15px" : "15px", props => props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : themeGet("colors.primary")(props), props => props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault"), props => props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black80")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props), props => props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningLighter")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props), props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? "rgba(255,255,255,0.3)" : props.selected ? "rgba(0,0,0,0.3)" : themeGet("colors.primary20")(props)));
 const TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
   componentId: "sc-1dh2aa8-2"
@@ -24,11 +24,11 @@ const TagValueText = styled.div.withConfig({
 const TagActionIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagActionIconWrapper",
   componentId: "sc-1dh2aa8-3"
-})(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], props => props.showRemove ? "0" : "0 15px 15px 0", props => props.showRemove && props.small ? "0 5px 0 6px" : props.showRemove ? "0 7px 0 7px" : props.showInfo && props.small ? "0 10px 0 9px" : props.showInfo ? "0 12px 0 11px" : props.small ? "0 6px 0 6px" : "0 8px 0 8px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props)), props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props))) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
+})(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], props => props.showRemove ? "0" : "0 15px 15px 0", props => props.showRemove && props.small ? "0 5px 0 6px" : props.showRemove ? "0 7px 0 7px" : props.showInfo && props.small ? "0 10px 0 9px" : props.showInfo ? "0 12px 0 11px" : props.small ? "0 6px 0 6px" : "0 8px 0 8px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
 const TagRemoveIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagRemoveIconWrapper",
   componentId: "sc-1dh2aa8-4"
-})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], props => props.small ? "0 8px 3px 7px" : "0 10px 3px 9px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props)), props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props))) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
+})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], props => props.small ? "0 8px 3px 7px" : "0 10px 3px 9px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
 const TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
   componentId: "sc-1dh2aa8-5"
@@ -84,7 +84,7 @@ export default function Tag(_ref) {
         highlighted: highlighted,
         disabled: disabled,
         small: small,
-        imageAlt: "Avatar for ".concat(children),
+        imageAlt: `Avatar for ${children}`,
         image: personEntity.avatarSrc,
         initials: personEntity.initials
       }), /*#__PURE__*/_jsxs(TagValueText, {

package/es/components/TextArea/index.js

@@ -140,10 +140,10 @@ TextArea.propTypes = {
   /** Specifies aria-label for TextArea. This is only required if not using the label prop.*/
   ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for TextArea component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for TextArea component. When \`label\` is not provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to TextArea component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to TextArea component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },