orcs-design-system 3.2.36 → 3.2.39

package/es/assets/Colour/index.js

@@ -8,7 +8,7 @@ export const Colour = styled("div").withConfig({
   componentId: "sc-uyvdow-0"
 })(props => {
   return css({
-    backgroundColor: themeGet("colors.".concat(props.bg))(props),
+    backgroundColor: themeGet(`colors.${props.bg}`)(props),
     width: "75px",
     height: "75px"
   });

package/es/components/ActionsMenu/index.js

@@ -14,7 +14,7 @@ const crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:
 const StyledActionsMenuContainer = styled.div.withConfig({
   displayName: "ActionsMenu__StyledActionsMenuContainer",
   componentId: "sc-yvbni2-0"
-})(["pointer-events:none;opacity:0;visibility:hidden;&.visible{visibility:visible;opacity:1;pointer-events:auto;}"]);
+})(["pointer-events:none;opacity:0;visibility:hidden;&.hack-for-legacy-tests{position:absolute;pointer-events:none;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border-width:0;}&.visible{visibility:visible;opacity:1;pointer-events:auto;}"]);
 const Wrapper = styled.div.withConfig({
   displayName: "ActionsMenu__Wrapper",
   componentId: "sc-yvbni2-1"
@@ -40,18 +40,14 @@ export const ActionsMenuHeading = styled(props => {
   // // Only sets `aria-labelledby` on the Popover root element
   // // if this component is mounted inside it.
   useLayoutEffect(() => {
-    var _actionMenu$setLabelI;
-    actionMenu === null || actionMenu === void 0 || (_actionMenu$setLabelI = actionMenu.setLabelId) === null || _actionMenu$setLabelI === void 0 || _actionMenu$setLabelI.call(actionMenu, id);
-    return () => {
-      var _actionMenu$setLabelI2;
-      return actionMenu === null || actionMenu === void 0 || (_actionMenu$setLabelI2 = actionMenu.setLabelId) === null || _actionMenu$setLabelI2 === void 0 ? void 0 : _actionMenu$setLabelI2.call(actionMenu, undefined);
-    };
+    actionMenu?.setLabelId?.(id);
+    return () => actionMenu?.setLabelId?.(undefined);
   }, [id, actionMenu]);
   return /*#__PURE__*/_jsx("div", {
     ...props,
     onKeyUp: e => {
-      if (e.key === commonKeys.ENTER && props !== null && props !== void 0 && props.canClick) {
-        props === null || props === void 0 || props.onClick();
+      if (e.key === commonKeys.ENTER && props?.canClick) {
+        props?.onClick();
       }
     }
   });
@@ -63,7 +59,6 @@ export const ActionsMenuHeading = styled(props => {
   componentId: "sc-yvbni2-5"
 })(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], props => themeGet("colors.white")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontWeights.1")(props), props => themeGet("colors.greyDarkest")(props), props => props.canClick ? "pointer" : "default");
 export const ActionsMenuItem = styled(props => {
-  var _actionMenu$getItemPr;
   const {
     id,
     onItemClick,
@@ -77,14 +72,14 @@ export const ActionsMenuItem = styled(props => {
   const disabled = props.disabled;
   let newProps = {
     ...others,
-    ...((actionMenu === null || actionMenu === void 0 || (_actionMenu$getItemPr = actionMenu.getItemProps) === null || _actionMenu$getItemPr === void 0 ? void 0 : _actionMenu$getItemPr.call(actionMenu)) || {})
+    ...(actionMenu?.getItemProps?.() || {})
   };
   const {
     onClick: originalOnClick
   } = newProps;
   const onClick = useMemo(() => e => {
-    onItemClick === null || onItemClick === void 0 || onItemClick(e);
-    originalOnClick === null || originalOnClick === void 0 || originalOnClick(e);
+    onItemClick?.(e);
+    originalOnClick?.(e);
   }, [originalOnClick, onItemClick]);
   if (Component === "button") {
     newProps = {
@@ -127,14 +122,14 @@ export const ActionsMenuBody = _ref => {
     open: toggleState,
     onOpenChange: (_, e) => {
       if (e) {
-        onToggle === null || onToggle === void 0 || onToggle(e);
+        onToggle?.(e);
       }
     }
   });
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([actionMenu.refs.setReference, childrenRef]);
   const ref = useMergeRefs([actionMenu.refs.setFloating]);
-  const triggerProps = {
+  const triggerProps = useMemo(() => ({
     ariaLabel,
     "aria-label": ariaLabel,
     onFocus: onTriggerFocus,
@@ -146,7 +141,7 @@ export const ActionsMenuBody = _ref => {
       "data-state": actionMenu.open ? "open" : "closed",
       "data-testid": dataTestId
     })
-  };
+  }), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId]);
   let triggerComponent = /*#__PURE__*/_jsx(Control, {
     ...triggerProps,
     children: /*#__PURE__*/_jsx(Icon, {
@@ -154,9 +149,9 @@ export const ActionsMenuBody = _ref => {
     })
   });
   if (customTriggerComponent) {
-    triggerComponent = /*#__PURE__*/React.cloneElement(customTriggerComponent, {
+    triggerComponent = /*#__PURE__*/_jsx("div", {
       ...triggerProps,
-      ...((customTriggerComponent === null || customTriggerComponent === void 0 ? void 0 : customTriggerComponent.props) || {})
+      children: customTriggerComponent
     });
   }
   const value = useMemo(() => ({
@@ -168,24 +163,15 @@ export const ActionsMenuBody = _ref => {
     },
     actionMenu
   }), [closeOnClick, closeMenu, id, actionMenu]);
-  const visible = actionMenu.context.open;
-  const ActionMenuContent = /*#__PURE__*/_jsx(StyledActionsMenuContainer, {
-    ref: ref,
-    style: {
-      ...actionMenu.floatingStyles,
-      zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
-    },
-    "aria-labelledby": actionMenu.labelId,
-    ...actionMenu.getFloatingProps(props),
-    className: "actionMenu-content ".concat(visible ? "visible" : ""),
-    "aria-hidden": visible ? "false" : "true",
-    "data-testid": "".concat(dataTestId, "__menu"),
-    children: /*#__PURE__*/_jsx(Menu, {
-      menuWidth: menuWidth,
-      isOpen: toggleState,
-      children: children
-    })
-  });
+  const style = useMemo(() => ({
+    ...actionMenu.floatingStyles,
+    zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
+  }), [actionMenu.floatingStyles, actionMenu.refs.reference]);
+  const menuDataTestId = useMemo(() => `${dataTestId}__menu`, [dataTestId]);
+  const {
+    getFloatingProps
+  } = actionMenu;
+  const floatingProps = useMemo(() => getFloatingProps(props), [getFloatingProps, props]);
   const component = /*#__PURE__*/_jsx(ActionMenuContext.Provider, {
     value: value,
     children: /*#__PURE__*/_jsxs(Wrapper, {
@@ -195,16 +181,39 @@ export const ActionsMenuBody = _ref => {
         children: /*#__PURE__*/_jsx(FloatingFocusManager, {
           context: actionMenu.context,
           modal: true,
-          children: ActionMenuContent
+          children: /*#__PURE__*/_jsx(StyledActionsMenuContainer, {
+            "aria-labelledby": actionMenu.labelId,
+            "data-testid": menuDataTestId,
+            ...floatingProps,
+            style: style,
+            className: "actionMenu-content visible",
+            "aria-hidden": "false",
+            ref: ref,
+            children: /*#__PURE__*/_jsx(Menu, {
+              menuWidth: menuWidth,
+              isOpen: toggleState,
+              children: children
+            })
+          })
         })
-      }) : (
+      }) :
+      /*#__PURE__*/
       /* * HACK: Fixing all the broken tests in teamform-app-ui is too
       time consuming * right this moment with a lot of the tests asserting
       against ActionsMenu items. * Rendering the markup even when closed
       but in a hidden state ensures that tests pass. * Ideally, we would
       update all the tests in teamform-app-ui to open the ActionsMenu *
       before assertion. **/
-      ActionMenuContent)]
+      _jsx(StyledActionsMenuContainer, {
+        "aria-labelledby": actionMenu.labelId,
+        "data-testid": menuDataTestId,
+        className: "actionMenu-content hack-for-legacy-tests",
+        children: /*#__PURE__*/_jsx(Menu, {
+          menuWidth: menuWidth,
+          isOpen: toggleState,
+          children: children
+        })
+      })]
     })
   });
   return theme ? /*#__PURE__*/_jsx(ThemeProvider, {

package/es/components/ActionsMenu/useActionMenu.js

@@ -14,8 +14,8 @@ export default function useActionMenu(_ref) {
   const [labelId, setLabelId] = useState();
   const [descriptionId, setDescriptionId] = useState();
   const arrowRef = useRef();
-  const open = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
-  const setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setUncontrolledOpen;
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
   const data = useFloating({
     placement,
     open,

package/es/components/Avatar/index.js

@@ -114,7 +114,7 @@ const Shape = styled("div").withConfig({
   alignItems: "center",
   justifyContent: "center",
   textAlign: "center",
-  textTransform: "".concat(props => props.uppercase ? "uppercase" : "none"),
+  textTransform: `${props => props.uppercase ? "uppercase" : "none"}`,
   a: {
     color: themeGet("colors.greyDarkest")(props)
   },
@@ -166,7 +166,7 @@ const Title = styled(_ref => {
     ...props
   } = _ref;
   const Heading = Header[titleLevel];
-  return /*#__PURE__*/React.cloneElement( /*#__PURE__*/_jsx(Heading, {}), props);
+  return /*#__PURE__*/React.cloneElement(/*#__PURE__*/_jsx(Heading, {}), props);
 }).withConfig({
   displayName: "Avatar__Title",
   componentId: "sc-1wtet2j-4"
@@ -276,7 +276,7 @@ const Avatar = _ref2 => {
     if (imageAlt) {
       return imageAlt;
     } else if (typeof title === "string") {
-      return "Avatar for ".concat(title);
+      return `Avatar for ${title}`;
     }
   }, [imageAlt, title]);
   const component = /*#__PURE__*/_jsxs(AvatarWrapper, {
@@ -351,10 +351,10 @@ Avatar.propTypes = {
   /** Specifies the alt text for an image. This must be specified if image prop is used and title prop is not a string. */
   imageAlt: (props, propName) => {
     if (props.image && props.title && typeof props.title !== "string" && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Avatar component. When `image` is provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Avatar component. When \`image\` is provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Avatar component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Avatar component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components/Badge/index.js

@@ -20,7 +20,7 @@ const Item = styled("span").withConfig({
   display: "inline-block",
   position: "relative",
   pt: themeGet("space.2")(props),
-  pb: "calc(".concat(themeGet("space.2")(props), " + 1px)"),
+  pb: `calc(${themeGet("space.2")(props)} + 1px)`,
   px: themeGet("space.3")(props),
   cursor: "default",
   borderRadius: 1,

package/es/components/Button/index.js

@@ -109,18 +109,18 @@ const getVariantStyle = props => {
   if (props.disabled) return styles.disabled;
   return styles[props.variant] || styles.default;
 };
-const getSpace = getter => props => themeGet("space.".concat(getter(props)))(props);
+const getSpace = getter => props => themeGet(`space.${getter(props)}`)(props);
 const buttonStyles = css(["background:", ";color:", ";border-color:", ";display:flex;align-items:center;justify-content:center;appearance:none;box-shadow:none;margin:0;text-decoration:none;text-align:center;font-family:", ";font-weight:", ";border-radius:", ";transition:", ";border-width:", ";cursor:", ";width:", ";height:auto;font-size:", ";padding:", " ", ";svg{margin-right:", ";margin-left:", ";}&:hover{background:", ";border-color:", ";border-width:", ";border-style:solid;}&:focus{outline:0;box-shadow:", " ", ";}", " ", ""], themeGet(VARIANT_COLORS.default.background), themeGet(VARIANT_COLORS.default.color), themeGet("colors.primary"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("borderWidths.1"), props => props.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer", props => props.fullWidth ? "100%" : "auto", props => {
   let fontSize = 2;
   if (props.large && props.iconOnly) fontSize = 5;
   if (props.large) fontSize = 3;
   if (props.small) fontSize = 1;
-  return themeGet("fontSizes.".concat(fontSize))(props);
+  return themeGet(`fontSizes.${fontSize}`)(props);
 }, getSpace(props => props.large ? "s" : props.small ? "xxs" : "xs"), getSpace(props => props.large ? "r" : props.small ? "s" : "between"), getSpace(props => !props.iconLeft ? "" : props.small ? "xs" : "s"), getSpace(props => !props.iconRight ? "" : props.small ? "xs" : "s"), themeGet(VARIANT_COLORS.default.hovered.background), themeGet("colors.primaryDark"), themeGet("borderWidths.1"), themeGet("shadows.thinOutline"), themeGet("colors.primaryDarker"), getVariantStyle, compose(space, layout, color, border));
 const attrs = props => ({
   "data-testid": props.dataTestId || props["data-testid"],
   disabled: props.disabled || props.variant == "disabled",
-  className: "".concat(props.className || "", " variant-").concat(props.variant || "default")
+  className: `${props.className || ""} variant-${props.variant || "default"}`
 });
 const StyledButton = styled("button").withConfig({
   shouldForwardProp
@@ -173,10 +173,10 @@ const buttonPropTypes = {
   /** Specifies aria-label for iconOnly buttons. This is only required if the iconOnly button is used, as it doesn't have supporting text for accessibility.*/
   ariaLabel: (props, propName) => {
     if (props.iconOnly && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Button component. When `iconOnly` is true, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Button component. When \`iconOnly\` is true, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType for `".concat(propName, "` supplied to Button component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType for \`${propName}\` supplied to Button component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components/ButtonGroup/index.js

@@ -56,7 +56,7 @@ const ButtonGroupLabel = styled("label").withConfig({
   borderRadius: themeGet("radii.2")(props),
   display: "flex",
   alignItems: "center",
-  padding: "0 ".concat(themeGet("space.3")(props)),
+  padding: `0 ${themeGet("space.3")(props)}`,
   transition: themeGet("transition.transitionDefault")(props),
   fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.2")(props),

package/es/components/Checkbox/index.js

@@ -24,7 +24,7 @@ const Control = styled.input.attrs({
 }).withConfig({
   displayName: "Checkbox__Control",
   componentId: "sc-p4d19b-2"
-})(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;pointer-events:none;&:focus{+ div{border-radius:2px;box-shadow:", ";}}+ div{transition:", ";&:before{background-color:", ";}> div{color:", ";}}:focus + div div:after{opacity:0.2;}:checked{+ div div:before{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;.animate&{animation:", " 300ms forwards ease-out;}}}&:not(:checked) + div div:before{.animate&{animation:", " 300ms forwards ease-out;}}"], props => props.colour ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors." + props.colour + "30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props), themeGet("transition.transitionDefault"), props => props.colour ? themeGet("colors.".concat(props.colour))(props) : themeGet("colors.greyDarker")(props), props => props.colour ? themeGet("colors.".concat(props.colour))(props) : themeGet("colors.greyDarker")(props), checkboxOn, checkboxOff);
+})(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;pointer-events:none;&:focus{+ div{border-radius:2px;box-shadow:", ";}}+ div{transition:", ";&:before{background-color:", ";}> div{color:", ";}}:focus + div div:after{opacity:0.2;}:checked{+ div div:before{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;.animate&{animation:", " 300ms forwards ease-out;}}}&:not(:checked) + div div:before{.animate&{animation:", " 300ms forwards ease-out;}}"], props => props.colour ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors." + props.colour + "30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props), themeGet("transition.transitionDefault"), props => props.colour ? themeGet(`colors.${props.colour}`)(props) : themeGet("colors.greyDarker")(props), props => props.colour ? themeGet(`colors.${props.colour}`)(props) : themeGet("colors.greyDarker")(props), checkboxOn, checkboxOff);
 const Box = styled.div.withConfig({
   displayName: "Checkbox__Box",
   componentId: "sc-p4d19b-3"
@@ -114,10 +114,10 @@ Checkbox.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 Checkbox component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Checkbox 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 Checkbox component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Checkbox component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components/DatePicker/index.js

@@ -77,12 +77,12 @@ const DatePickerContainer = styled.div.withConfig({
   if (props.width) {
     if (props.width.includes("px")) {
       const widthValue = parseInt(props.width, 10);
-      return "".concat(widthValue * 2, "px");
+      return `${widthValue * 2}px`;
     }
     return props.width;
   }
   return "calc(134px * 2)";
-}, props => props.width ? props.width : "134px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "134px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.height ? props.height : "40px", props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
+}, props => props.width ? props.width : "134px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "134px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => `${themeGet("radii.2")(props)} 0 0 ${themeGet("radii.2")(props)}`, props => `0 ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 0`, props => `0 ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 0`, props => `0 ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 0`, props => props.height ? props.height : "40px", props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
 
 /**
  *

package/es/components/Divider/index.js

@@ -10,7 +10,7 @@ const Item = styled.div.withConfig({
 }).withConfig({
   displayName: "Divider__Item",
   componentId: "sc-106mlj-0"
-})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, props => props.thick ? "3px" : "1px", props => props.spanGrid ? "1 / -1" : "auto", props => props.dash && props.thick && props.light ? "dashed 3px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick && props.inverted ? "dashed 3px ".concat(themeGet("colors.white20")(props)) : props.dash && props.inverted ? "dashed 1px ".concat(themeGet("colors.white20")(props)) : props.dash && props.light ? "dashed 1px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick ? "dashed 3px ".concat(themeGet("colors.black20")(props)) : props.dash ? "dashed 1px ".concat(themeGet("colors.black20")(props)) : "none", props => props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props));
+})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, props => props.thick ? "3px" : "1px", props => props.spanGrid ? "1 / -1" : "auto", props => props.dash && props.thick && props.light ? `dashed 3px ${themeGet("colors.black10")(props)}` : props.dash && props.thick && props.inverted ? `dashed 3px ${themeGet("colors.white20")(props)}` : props.dash && props.inverted ? `dashed 1px ${themeGet("colors.white20")(props)}` : props.dash && props.light ? `dashed 1px ${themeGet("colors.black10")(props)}` : props.dash && props.thick ? `dashed 3px ${themeGet("colors.black20")(props)}` : props.dash ? `dashed 1px ${themeGet("colors.black20")(props)}` : "none", props => props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props));
 export default function Divider(_ref) {
   let {
     light,

package/es/components/Header/Header.stories.js

@@ -17,10 +17,10 @@ export default {
   component: Header
 };
 export const defaultHeader = () => /*#__PURE__*/_jsxs(Header, {
-  appName: "App Name",
-  userName: "Michael",
+  appName: `App Name`,
+  userName: `Michael`,
   avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
-  clientInfo: "Tenant: ci2153 Workspace: 20k-v5 [lb5ctx]  UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]",
+  clientInfo: `Tenant: ci2153 Workspace: 20k-v5 [lb5ctx]  UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]`,
   logoutFunction: action("clicked-logout"),
   sideMenuContent: /*#__PURE__*/_jsxs(StyledLink, {
     href: "#",
@@ -150,11 +150,11 @@ export const headerWithWorkspaceSwitching = () => {
     })]
   });
   return /*#__PURE__*/_jsx(Header, {
-    appName: "App Name",
+    appName: `App Name`,
     currentWorkspace: currentWorkspace,
-    userName: "Michael",
+    userName: `Michael`,
     avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
-    clientInfo: "Tenant: ci2153 Workspace: 20k-v5 [lb5ctx]  UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]",
+    clientInfo: `Tenant: ci2153 Workspace: 20k-v5 [lb5ctx]  UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]`,
     logoutFunction: action("clicked-logout"),
     workspaceSwitcherContent: select,
     navToggleId: "headerWithWorkspaceSwitching",

package/es/components/Header/index.js

@@ -381,7 +381,7 @@ const MobileNavToggle = styled("input").withConfig({
   }
 }));
 const MobileNavMenu = styled("div").attrs(props => ({
-  "aria-hidden": "".concat(!props.isOpen)
+  "aria-hidden": `${!props.isOpen}`
 })).withConfig({
   displayName: "Header__MobileNavMenu",
   componentId: "sc-yf04b-20"
@@ -596,7 +596,7 @@ export default function Header(_ref) {
         }), /*#__PURE__*/_jsx(MobileMenuToggle, {
           theme: theme,
           onClick: toggleMobileMenu,
-          "aria-expanded": "".concat(mobileMenuIsOpen),
+          "aria-expanded": `${mobileMenuIsOpen}`,
           "aria-label": "Menu",
           children: /*#__PURE__*/_jsx(Hamburger, {
             id: "hamburger-menu-icon"

package/es/components/HeaderSimple/HeaderSimple.stories.js

@@ -7,8 +7,8 @@ export default {
   component: HeaderSimple
 };
 export const defaultHeader = () => /*#__PURE__*/_jsx(HeaderSimple, {
-  appName: "App Name",
-  userName: "Michael",
+  appName: `App Name`,
+  userName: `Michael`,
   avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
   avatarAlt: "Avatar for Michael",
   currentWorskapce: "Org Design Workspace"

package/es/components/Icon/index.js

@@ -65,7 +65,7 @@ const Icon = /*#__PURE__*/React.forwardRef(function Icon(_ref, ref) {
       spin: spin,
       symbol: symbol,
       transform: transform,
-      title: title && "Icon-".concat(title)
+      title: title && `Icon-${title}`
     })
   });
   return theme ? /*#__PURE__*/_jsx(ThemeProvider, {