orcs-design-system 3.2.36 → 3.2.39

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;
   },

package/es/components/TextInput/index.js

@@ -24,23 +24,23 @@ const IconWrapper = styled.label.withConfig({
   componentId: "sc-shde0o-1"
 })(["display:flex;align-items:center;position:relative;svg{opacity:0.4;position:absolute;}", ";"], props => props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 3 - 1px)");
+  return `calc(${inputHeight} / 3 - 1px)`;
 }) : props.iconLeft && props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 2 + 3px)");
+  return `calc(${inputHeight} / 2 + 3px)`;
 }) : props.iconRight && !props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 3 - 1px)");
+  return `calc(${inputHeight} / 3 - 1px)`;
 }) : props.iconRight && props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
   let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return "calc(".concat(inputHeight, " / 2 + 3px)");
+  return `calc(${inputHeight} / 2 + 3px)`;
 }) : css([""]));
-const InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? "100%" : "auto", props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
+const InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? `100%` : `auto`, props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
   let left = props.iconLeft ? 36 : 10;
   let right = props.iconRight ? 36 : 10;
   let top = props.floating ? 25 : 5;
   let bottom = 6;
-  return "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px");
+  return `${top}px ${right}px ${bottom}px ${left}px`;
 }, props => props.invalid ? themeGet("colors.danger")(props) : props.valid ? themeGet("colors.success")(props) : themeGet("colors.black30")(props), props => props.floating ? css(["&::placeholder{color:transparent;}&:not(:placeholder-shown){~ label{transform:translateY(-10px);font-size:", ";}}&:-ms-input-placeholder:not(:focus){~ label{transform:translateY(-10px);font-size:", ";}}&:not(:-ms-input-placeholder){~ label{transform:translateY(-10px);font-size:", ";}}"], themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props)) : css(["&::placeholder{color:", ";}"], themeGet("colors.grey")(props)), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.floating ? css(["&::placeholder{color:", ";}~ label{transform:translateY(-10px);font-size:", ";color:", ";}"], themeGet("colors.greyLight")(props), themeGet("fontSizes.0")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)) : css([""]));
 const Input = styled("input").attrs(props => ({
   "data-testid": props["data-testid"] ? props["data-testid"] : null
@@ -57,9 +57,9 @@ const NumberInput = styled(NumericFormat).attrs(props => ({
 const Label = styled.label.withConfig({
   displayName: "TextInput__Label",
   componentId: "sc-shde0o-4"
-})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.1")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? "40px" : "12px", props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
+})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.1")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? `40px` : `12px`, props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
   let inputHeight = themeGet("appScale.inputHeightLarge")(props);
-  return "calc(".concat(inputHeight, " / 3)");
+  return `calc(${inputHeight} / 3)`;
 }, props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props)) : css([""]), props => props.mandatory ? css(["&:after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]));
 const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -91,7 +91,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   const label = useMemo(() => {
     if (numberProps && numberProps.prefix) {
-      return "".concat(props.label, " ").concat(numberProps.prefix);
+      return `${props.label} ${numberProps.prefix}`;
     }
     return props.label;
   }, [props.label, numberProps]);
@@ -166,10 +166,10 @@ TextInput.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 TextInput component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for TextInput 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 TextInput component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to TextInput component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components.test.js

@@ -1,4 +1,75 @@
 import * as components from ".";
 test("all components exported", () => {
-  expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"ButtonLink\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"Select\",\n      \"SideNav\",\n      \"Sidebar\",\n      \"SidebarClose\",\n      \"SidebarPanel\",\n      \"SidebarPanels\",\n      \"SidebarTab\",\n      \"SidebarTabs\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Tab\",\n      \"Table\",\n      \"TabsContainer\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"TreeNav\",\n      \"Typography\",\n      \"VARIANT_COLORS\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n    ]\n  ");
+  expect(Object.keys(components)).toMatchInlineSnapshot(`
+    Array [
+      "ActionsMenu",
+      "ActionsMenuBody",
+      "ActionsMenuHeading",
+      "ActionsMenuItem",
+      "Avatar",
+      "Badge",
+      "Box",
+      "Button",
+      "ButtonGroupContainer",
+      "ButtonGroupItem",
+      "ButtonLink",
+      "Card",
+      "Checkbox",
+      "Code",
+      "DatePicker",
+      "Divider",
+      "Expandable",
+      "Flex",
+      "FlexItem",
+      "GlobalStyles",
+      "Grid",
+      "GridItem",
+      "H1",
+      "H2",
+      "H3",
+      "H4",
+      "H5",
+      "H6",
+      "Header",
+      "HeaderSimple",
+      "Icon",
+      "Loading",
+      "Modal",
+      "Notification",
+      "P",
+      "Popover",
+      "ProgressBar",
+      "Quote",
+      "RadioButton",
+      "Range",
+      "Select",
+      "SideNav",
+      "Sidebar",
+      "SidebarClose",
+      "SidebarPanel",
+      "SidebarPanels",
+      "SidebarTab",
+      "SidebarTabs",
+      "Small",
+      "Spacer",
+      "StatusDot",
+      "StyledLink",
+      "SystemThemeProvider",
+      "Tab",
+      "Table",
+      "TabsContainer",
+      "Tag",
+      "Text",
+      "TextArea",
+      "TextInput",
+      "Toggle",
+      "TreeNav",
+      "Typography",
+      "VARIANT_COLORS",
+      "getOptionByValue",
+      "styleLink",
+      "systemThemeCollapsed",
+      "systemtheme",
+    ]
+  `);
 });

package/es/systemThemeCollapsed.js

@@ -190,9 +190,9 @@ export const borderWidths = [0, "1px", "2px", "3px"];
 
 // SHADOWS
 export const shadows = {
-  boxDefault: "0 2px 5px 0 ".concat(colors.black10),
-  thinOutline: "0 0 0 1px",
-  thickOutline: "0 0 0 3px"
+  boxDefault: `0 2px 5px 0 ${colors.black10}`,
+  thinOutline: `0 0 0 1px`,
+  thickOutline: `0 0 0 3px`
 };
 
 // ANIMATION
@@ -203,12 +203,12 @@ export const transition = {
 // RESPONSIVE MEDIA BREAKPOINTS
 export const breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
 export const mediaQueries = {
-  screenXS: "@media screen and (min-width: ".concat(breakpoints[0], ")"),
-  screenS: "@media screen and (min-width: ".concat(breakpoints[1], ")"),
-  screenM: "@media screen and (min-width: ".concat(breakpoints[2], ")"),
-  screenL: "@media screen and (min-width: ".concat(breakpoints[3], ")"),
-  screenXL: "@media screen and (min-width: ".concat(breakpoints[4], ")"),
-  screenXXL: "@media screen and (min-width: ".concat(breakpoints[5], ")")
+  screenXS: `@media screen and (min-width: ${breakpoints[0]})`,
+  screenS: `@media screen and (min-width: ${breakpoints[1]})`,
+  screenM: `@media screen and (min-width: ${breakpoints[2]})`,
+  screenL: `@media screen and (min-width: ${breakpoints[3]})`,
+  screenXL: `@media screen and (min-width: ${breakpoints[4]})`,
+  screenXXL: `@media screen and (min-width: ${breakpoints[5]})`
 };
 
 // APP-SPECIFIC DIMENSIONS

package/es/systemtheme.js

@@ -189,9 +189,9 @@ export const borderWidths = [0, "1px", "2px", "3px"];
 
 // SHADOWS
 export const shadows = {
-  boxDefault: "0 2px 5px 0 ".concat(colors.black10),
-  thinOutline: "0 0 0 1px",
-  thickOutline: "0 0 0 3px"
+  boxDefault: `0 2px 5px 0 ${colors.black10}`,
+  thinOutline: `0 0 0 1px`,
+  thickOutline: `0 0 0 3px`
 };
 
 // ANIMATION
@@ -202,12 +202,12 @@ export const transition = {
 // RESPONSIVE MEDIA BREAKPOINTS
 export const breakpoints = ["450px", "675px", "900px", "1100px", "1400px", "1900px"];
 export const mediaQueries = {
-  screenXS: "@media screen and (min-width: ".concat(breakpoints[0], ")"),
-  screenS: "@media screen and (min-width: ".concat(breakpoints[1], ")"),
-  screenM: "@media screen and (min-width: ".concat(breakpoints[2], ")"),
-  screenL: "@media screen and (min-width: ".concat(breakpoints[3], ")"),
-  screenXL: "@media screen and (min-width: ".concat(breakpoints[4], ")"),
-  screenXXL: "@media screen and (min-width: ".concat(breakpoints[5], ")")
+  screenXS: `@media screen and (min-width: ${breakpoints[0]})`,
+  screenS: `@media screen and (min-width: ${breakpoints[1]})`,
+  screenM: `@media screen and (min-width: ${breakpoints[2]})`,
+  screenL: `@media screen and (min-width: ${breakpoints[3]})`,
+  screenXL: `@media screen and (min-width: ${breakpoints[4]})`,
+  screenXXL: `@media screen and (min-width: ${breakpoints[5]})`
 };
 
 // APP-SPECIFIC DIMENSIONS

package/es/utils/floatingUiHelpers.js

@@ -1,20 +1,15 @@
 const getFloatingUiZIndex = triggerRef => {
-  var _activeModalRef$conta;
   const activeModalRef = document.getElementById("modal-overlay");
-  if (activeModalRef && triggerRef.current && activeModalRef !== null && activeModalRef !== void 0 && (_activeModalRef$conta = activeModalRef.contains) !== null && _activeModalRef$conta !== void 0 && _activeModalRef$conta.call(activeModalRef, triggerRef.current)) {
+  if (activeModalRef && triggerRef.current && activeModalRef?.contains?.(triggerRef.current)) {
     return 1100;
   }
   return 900;
 };
 const REACT_SELECT_MENU = "react-select-menu";
-const isRenderedInReactSelectMenu = triggerRef => {
-  var _document$getElementB, _document$getElementB2;
-  return (_document$getElementB = document.getElementById(REACT_SELECT_MENU)) === null || _document$getElementB === void 0 || (_document$getElementB2 = _document$getElementB.contains) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.call(_document$getElementB, triggerRef.current);
-};
+const isRenderedInReactSelectMenu = triggerRef => document.getElementById(REACT_SELECT_MENU)?.contains?.(triggerRef.current);
 const getFloatingUiRootElement = triggerRef => {
-  var _activeModalRef$conta2;
   const activeModalRef = document.getElementById("modal-overlay");
-  const isRenderedInModal = activeModalRef === null || activeModalRef === void 0 || (_activeModalRef$conta2 = activeModalRef.contains) === null || _activeModalRef$conta2 === void 0 ? void 0 : _activeModalRef$conta2.call(activeModalRef, triggerRef.current);
+  const isRenderedInModal = activeModalRef?.contains?.(triggerRef.current);
   if (isRenderedInModal) {
     return document.getElementById("modal");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.36",
+  "version": "3.2.39",
   "engines": {
     "node": "20.12.2"
   },
@@ -47,9 +47,10 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@floating-ui/react": "^0.26.19",
-    "@mui/icons-material": "^5.15.18",
-    "@mui/material": "^5.15.18",
-    "@mui/x-date-pickers": "^7.5.0",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
+    "@mui/utils": "^6.0.2",
+    "@mui/x-date-pickers": "^7.16.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
@@ -59,13 +60,13 @@
     "polished": "^3.7.1",
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
-    "react-arborist": "^3.2.0",
+    "react-arborist": "^3.4.0",
     "react-cool-onclickoutside": "^1.5.9",
     "react-dates": "^21.8.0",
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
     "react-number-format": "^5.3.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.26.2",
     "react-select": "^5.7.4",
     "styled-system": "^5.1.5"
   },
@@ -78,10 +79,10 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.12.5",
     "@chromatic-com/storybook": "^1.5.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/fontawesome-svg-core": "file:libs/fortawesome-fontawesome-svg-core-1.3.0.tgz",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "git://github.com/FortAwesome/react-fontawesome.git#0.1.13",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@storybook/addon-a11y": "^8.1.7",
@@ -98,7 +99,7 @@
     "@storybook/mdx1-csf": "^1.0.0",
     "@storybook/preset-create-react-app": "^8.1.7",
     "@storybook/react": "^8.1.7",
-    "@storybook/react-webpack5": "^8.1.7",
+    "@storybook/react-webpack5": "^8.2.9",
     "@storybook/storybook-deployer": "2.8.16",
     "@storybook/theming": "^8.1.7",
     "@testing-library/jest-dom": "^5.11.6",
@@ -143,7 +144,6 @@
     "webpack-cli": "^5.1.4"
   },
   "overrides": {
-    "@mui/utils": "6.0.0-alpha.9",
     "braces": "3.0.3",
     "eslint-plugin-testing-library": "^5.11.1",
     "jest": "$jest",
@@ -152,11 +152,16 @@
     "postcss": "^8.4.31",
     "react-scripts": "5.0.1",
     "remark-parse": "10.0.2",
-    "react": "$react",
-    "react-dom": "$react-dom",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "5.2.2",
     "webpack-dev-middleware": "6.1.2",
-    "ws": "8.17.1"
+    "ws": "8.17.1",
+    "express": {
+      "path-to-regexp": "0.1.10"
+    },
+    "send": "0.19.0",
+    "redux": "4.2.1"
   },
   "browserslist": [
     ">0.2%",