orcs-design-system 3.2.37 → 3.2.40

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;&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;}&.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,7 +122,7 @@ export const ActionsMenuBody = _ref => {
     open: toggleState,
     onOpenChange: (_, e) => {
       if (e) {
-        onToggle === null || onToggle === void 0 || onToggle(e);
+        onToggle?.(e);
       }
     }
   });
@@ -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(() => ({
@@ -172,7 +167,7 @@ export const ActionsMenuBody = _ref => {
     ...actionMenu.floatingStyles,
     zIndex: getFloatingUiZIndex(actionMenu.refs.reference)
   }), [actionMenu.floatingStyles, actionMenu.refs.reference]);
-  const menuDataTestId = useMemo(() => "".concat(dataTestId, "__menu"), [dataTestId]);
+  const menuDataTestId = useMemo(() => `${dataTestId}__menu`, [dataTestId]);
   const {
     getFloatingProps
   } = actionMenu;

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, {

package/es/components/Modal/Modal.stories.js

@@ -47,7 +47,43 @@ export const basicModal = () => /*#__PURE__*/_jsx(Basic, {});
 basicModal.parameters = {
   docs: {
     source: {
-      code: "\nconst Basic = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  return (\n    <>\n      <Button onClick={handleOnButtonClick}>\n        Open basic modal\n      </Button>\n      <Modal\n        ariaLabel=\"Modal Title\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n      >\n        <Spacer mb=\"r\">\n          <H3>Modal Title</H3>\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const Basic = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  return (
+    <>
+      <Button onClick={handleOnButtonClick}>
+        Open basic modal
+      </Button>
+      <Modal
+        ariaLabel="Modal Title"
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+      >
+        <Spacer mb="r">
+          <H3>Modal Title</H3>
+          <P>
+            Content of the modal. Modal accepts any child components or content.
+          </P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };
@@ -100,7 +136,80 @@ export const advancedModal = () => /*#__PURE__*/_jsx(Advanced, {});
 advancedModal.parameters = {
   docs: {
     source: {
-      code: "\nconst Advanced = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modal Title</H3>;\n\n  const modalFooter = (\n    <Button onClick={handleOnConfirm}>Go to full article</Button>\n  );\n\n  return (\n    <>\n      <Button onClick={handleOnButtonClick}>\n        Open advanced modal\n      </Button>\n      <Modal\n        maxWidth=\"500px\"\n        maxHeight=\"400px\"\n        height=\"90vh\"\n        width=\"90vw\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n      >\n        <Spacer my=\"r\">\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n            This content will be scrollable if it exeeds the height of the\n            modal.\n          </P>\n          <P>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n            culpa qui officia deserunt mollit anim id est laborum.\n          </P>\n          <P>\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n            quae ab illo inventore veritatis et quasi architecto beatae vitae\n            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores\n            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,\n            sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis\n            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut\n            aliquid ex ea commodi consequatur? Quis autem vel eum iure\n            reprehenderit qui in ea voluptate velit esse quam nihil molestiae\n            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n            pariatur?\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const Advanced = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalHeader = <H3>Modal Title</H3>;
+
+  const modalFooter = (
+    <Button onClick={handleOnConfirm}>Go to full article</Button>
+  );
+
+  return (
+    <>
+      <Button onClick={handleOnButtonClick}>
+        Open advanced modal
+      </Button>
+      <Modal
+        maxWidth="500px"
+        maxHeight="400px"
+        height="90vh"
+        width="90vw"
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        headerContent={modalHeader}
+        footerContent={modalFooter}
+      >
+        <Spacer my="r">
+          <P>
+            Content of the modal. Modal accepts any child components or content.
+            This content will be scrollable if it exeeds the height of the
+            modal.
+          </P>
+          <P>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </P>
+          <P>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae
+            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+            sed quia non numquam eius modi tempora incidunt ut labore et dolore
+            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+            aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
+            pariatur?
+          </P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };
@@ -159,7 +268,61 @@ export const basicDialogueModal = () => /*#__PURE__*/_jsx(BasicDialogue, {});
 basicDialogueModal.parameters = {
   docs: {
     source: {
-      code: "\nconst BasicDialogue = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} px=\"l\">\n          OK\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)}>\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n\n  return (\n    <>\n      <Button\n        onClick={handleOnButtonClick}\n        variant=\"danger\"\n        iconLeft\n      >\n        <Icon icon={[\"fas\", \"trash\"]} />\n        Delete data\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        footerContent={modalFooter}\n      >\n        <Spacer mb=\"r\">\n          <P weight=\"bold\" marginBottom=\"sm\">\n            This will remove all data from the application.\n          </P>\n          <P>Do you wish to continue?</P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const BasicDialogue = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalFooter = (
+    <Flex>
+      <Spacer mr="s">
+        <Button onClick={handleOnConfirm} px="l">
+          OK
+        </Button>
+        <Button variant="ghost" onClick={onToggleModal(false)}>
+          Cancel
+        </Button>
+      </Spacer>
+    </Flex>
+  );
+
+  return (
+    <>
+      <Button
+        onClick={handleOnButtonClick}
+        variant="danger"
+        iconLeft
+      >
+        <Icon icon={["fas", "trash"]} />
+        Delete data
+      </Button>
+      <Modal
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        footerContent={modalFooter}
+      >
+        <Spacer mb="r">
+          <P weight="bold" marginBottom="sm">
+            This will remove all data from the application.
+          </P>
+          <P>Do you wish to continue?</P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };
@@ -231,7 +394,66 @@ export const editDialogueModal = () => /*#__PURE__*/_jsx(EditDialogue, {});
 editDialogueModal.parameters = {
   docs: {
     source: {
-      code: "\nconst EditDialogue = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modify Details</H3>;\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} variant=\"success\" iconLeft>\n          <Icon icon={[\"fas\", \"save\"]} />\n          Save\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)} iconLeft>\n          <Icon icon={[\"fas\", \"times\"]} />\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n  return (\n    <>\n      <Button onClick={handleOnButtonClick} iconLeft>\n        <Icon icon={[\"fas\", \"edit\"]} />\n        Modify Details\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n      >\n        <Spacer my=\"r\">\n          <TextInput\n            id=\"textInput1\"\n            key=\"textInput1\"\n            type=\"text\"\n            fullWidth\n            label=\"Name\"\n            placeholder=\"E.g. Awesome Project\"\n          />\n          <TextArea id=\"TextArea01\" label=\"Description\" fullWidth />\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const EditDialogue = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalHeader = <H3>Modify Details</H3>;
+
+  const modalFooter = (
+    <Flex>
+      <Spacer mr="s">
+        <Button onClick={handleOnConfirm} variant="success" iconLeft>
+          <Icon icon={["fas", "save"]} />
+          Save
+        </Button>
+        <Button variant="ghost" onClick={onToggleModal(false)} iconLeft>
+          <Icon icon={["fas", "times"]} />
+          Cancel
+        </Button>
+      </Spacer>
+    </Flex>
+  );
+  return (
+    <>
+      <Button onClick={handleOnButtonClick} iconLeft>
+        <Icon icon={["fas", "edit"]} />
+        Modify Details
+      </Button>
+      <Modal
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        headerContent={modalHeader}
+        footerContent={modalFooter}
+      >
+        <Spacer my="r">
+          <TextInput
+            id="textInput1"
+            key="textInput1"
+            type="text"
+            fullWidth
+            label="Name"
+            placeholder="E.g. Awesome Project"
+          />
+          <TextArea id="TextArea01" label="Description" fullWidth />
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };

package/es/components/Modal/index.js

@@ -81,7 +81,7 @@ const Modal = _ref => {
   }, [restProps.ariaLabel, headerContent]);
   const focusLastActiveElement = useCallback(() => {
     if (!lastActiveElement) return;
-    if (lastActiveElement !== null && lastActiveElement !== void 0 && lastActiveElement.dataset.actionMenuId && isHidden(lastActiveElement === null || lastActiveElement === void 0 ? void 0 : lastActiveElement.parentNode)) {
+    if (lastActiveElement?.dataset.actionMenuId && isHidden(lastActiveElement?.parentNode)) {
       const actionMenu = document.getElementById(lastActiveElement.dataset.actionMenuId);
       actionMenu.focus();
     } else {