orcs-design-system 3.3.29 → 3.3.30

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -336,6 +336,23 @@ export const keepInViewExample = () => /*#__PURE__*/_jsxs(Flex, {
   })]
 });
 keepInViewExample.storyName = "Keep In View Example";
+export const circleVariantActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
+  variant: "circle",
+  children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+    href: "https://orchestrated.io/",
+    children: "Open details page"
+  }), /*#__PURE__*/_jsx(BrowserRouter, {
+    children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+      as: Link,
+      to: "/",
+      children: "Edit"
+    })
+  }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+    onClick: action("clicked"),
+    children: "Remove"
+  })]
+});
+circleVariantActionsMenu.storyName = "Circle Variant";
 defaultActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -365,4 +382,9 @@ keepInViewExample.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "keepInViewExample"
+};
+circleVariantActionsMenu.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "circleVariantActionsMenu"
 };

package/es/components/ActionsMenu/index.js

@@ -8,6 +8,7 @@ import useActionMenu from "./useActionMenu";
 import { crossFadeIn, beforeDotCollapsing, beforeDotExpanding, afterDotCollapsing, afterDotExpanding, beforeCrossExpanding, beforeCrossCollapsing, afterCrossExpanding, afterCrossCollapsing } from "./ActionsMenu.animations";
 import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
 import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
+import { variant } from "styled-system";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ActionMenuContext = /*#__PURE__*/createContext({});
 const StyledActionsMenuContainer = styled.div.withConfig({
@@ -21,15 +22,35 @@ const Wrapper = styled.div.withConfig({
 const Control = styled.button.withConfig({
   displayName: "ActionsMenu__Control",
   componentId: "sc-yvbni2-2"
-})(["position:relative;background-color:", ";border:solid 1px ", ";display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;border-color:", ";}&[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("colors.white")(props), props => themeGet("colors.greyLight")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
+})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;border-radius:", ";transition:", ";cursor:pointer;width:30px;height:30px;&:hover,&:focus{outline:0;border-color:", ";}", " &[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), variant({
+  prop: "variant",
+  variants: {
+    default: {
+      backgroundColor: "white",
+      border: "solid 1px",
+      borderColor: "greyLight",
+      width: "30px",
+      height: "30px",
+      borderRadius: 2
+    },
+    circle: {
+      backgroundColor: "greyDarkest",
+      border: "solid 2px",
+      borderColor: "greyDarkest",
+      width: "35px",
+      height: "35px",
+      borderRadius: "50%"
+    }
+  }
+}), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
 const Dots = styled.div.withConfig({
   displayName: "ActionsMenu__Dots",
   componentId: "sc-yvbni2-3"
-})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:translate(0,-6px);}&:after{transform:translate(0,6px);}"], props => themeGet("colors.greyDarker")(props), props => themeGet("colors.greyDarker")(props));
+})(["border-radius:2px;height:4px;width:4px;background-color:", ";&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:translate(0,-6px);}&:after{transform:translate(0,6px);}"], props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props), props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props));
 const Cross = styled.div.withConfig({
   displayName: "ActionsMenu__Cross",
   componentId: "sc-yvbni2-4"
-})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:rotate(-45deg);}&:after{transform:rotate(45deg);}"], crossFadeIn, props => themeGet("colors.greyDarker")(props));
+})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;background-color:", ";}&:before{transform:rotate(-45deg);}&:after{transform:rotate(45deg);}"], crossFadeIn, props => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props));
 const Menu = styled.div.withConfig({
   displayName: "ActionsMenu__Menu",
   componentId: "sc-yvbni2-5"
@@ -128,6 +149,7 @@ export const ActionsMenuBody = _ref2 => {
     closeMenu,
     closeOnClick = false,
     "data-testid": dataTestId = "ActionsMenu",
+    variant = "default",
     ...props
   } = _ref2;
   const id = useId();
@@ -157,10 +179,13 @@ export const ActionsMenuBody = _ref2 => {
   }), [ariaLabel, onTriggerFocus, id, actionMenu, onToggle, props, triggerRef, dataTestId]);
   let triggerComponent = /*#__PURE__*/_jsxs(Control, {
     ...triggerProps,
+    variant: variant,
     children: [/*#__PURE__*/_jsx(Dots, {
-      className: "actionsMenu__dots"
+      className: "actionsMenu__dots",
+      variant: variant
     }), /*#__PURE__*/_jsx(Cross, {
-      className: "actionsMenu__cross"
+      className: "actionsMenu__cross",
+      variant: variant
     })]
   });
   if (renderTrigger) {
@@ -257,7 +282,8 @@ ActionsMenuBody.propTypes = {
   "data-testid": PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   theme: PropTypes.object,
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  variant: PropTypes.oneOf(["default", "circle"])
 };
 const ActionsMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [toggleState, setToggle] = useState(false);
@@ -288,7 +314,9 @@ ActionsMenu.propTypes = {
   /** Specifies the colour theme */
   theme: PropTypes.object,
   /** Specifies the aria-label for the button */
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  /** Specifies the variant of the ActionsMenu */
+  variant: PropTypes.oneOf(["default", "circle"])
 };
 ActionsMenu.__docgenInfo = {
   "description": "",
@@ -395,6 +423,20 @@ ActionsMenu.__docgenInfo = {
         "name": "string"
       },
       "required": false
+    },
+    "variant": {
+      "description": "Specifies the variant of the ActionsMenu",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"default\"",
+          "computed": false
+        }, {
+          "value": "\"circle\"",
+          "computed": false
+        }]
+      },
+      "required": false
     }
   }
 };
@@ -448,6 +490,24 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": false
     },
+    "variant": {
+      "defaultValue": {
+        "value": "\"default\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"default\"",
+          "computed": false
+        }, {
+          "value": "\"circle\"",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
     "onTriggerFocus": {
       "description": "",
       "type": {

package/es/components/Avatar/Avatar.stories.js

@@ -5,6 +5,7 @@ import Box from "../Box";
 import Spacer from "../Spacer";
 import StyledLink from "../StyledLink";
 import Avatar from ".";
+import { action } from "@storybook/addon-actions";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Avatar",
@@ -368,6 +369,41 @@ export const alternateShapes = () => /*#__PURE__*/_jsxs(Spacer, {
   })]
 });
 alternateShapes.storyName = "Alternate Shapes";
+export const headerAvatarVariants = () => {
+  const handleClick = action("Button action triggered");
+  return /*#__PURE__*/_jsxs(Flex, {
+    gap: "xxl",
+    alignItems: "center",
+    p: "xxl",
+    bg: "greyDarkest",
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      headerAvatar: true,
+      sizing: "large",
+      image: "https://randomuser.me/api/portraits/men/32.jpg",
+      imageAlt: "Avatar for John Doe",
+      onClick: handleClick
+    }), /*#__PURE__*/_jsx(Avatar, {
+      headerAvatar: true,
+      sizing: "small",
+      image: "https://randomuser.me/api/portraits/men/32.jpg",
+      imageAlt: "Avatar for John Doe"
+    }), /*#__PURE__*/_jsx(Avatar, {
+      headerAvatar: true,
+      sizing: "large",
+      shape: "square",
+      image: "https://images.unsplash.com/photo-1464802686167-b939a6910659?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      imageAlt: "Avatar for Nebula UI",
+      onClick: handleClick
+    }), /*#__PURE__*/_jsx(Avatar, {
+      headerAvatar: true,
+      sizing: "small",
+      shape: "square",
+      image: "https://images.unsplash.com/photo-1464802686167-b939a6910659?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      imageAlt: "Avatar for Nebula UI"
+    })]
+  });
+};
+headerAvatarVariants.storyName = "Header Avatar Variants";
 defaultAvatar.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -432,4 +468,9 @@ alternateShapes.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "alternateShapes"
+};
+headerAvatarVariants.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "headerAvatarVariants"
 };

package/es/components/Avatar/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
-import { space, layout, variant } from "styled-system";
+import { space, layout, variant, position, compose } from "styled-system";
 import PropTypes from "prop-types";
 import Header, { Text } from "../Typography";
 import Icon from "../Icon";
@@ -9,14 +9,28 @@ import StatusDot from "../StatusDot";
 import css from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const avatarStyles = compose(space, layout, position);
+
+// Helper function to resolve customSize values
+const resolveCustomSize = (customSize, props) => {
+  if (!customSize) return null;
+
+  // Check if customSize is a pixel value or a theme value
+  if (customSize.includes("px") || customSize.includes("rem") || customSize.includes("em") || customSize.includes("%")) {
+    return customSize;
+  } else {
+    // It's a theme value, resolve it using themeGet
+    return themeGet(`avatarScale.${customSize}`)(props) || customSize;
+  }
+};
 const AvatarWrapper = styled("div").withConfig({
   displayName: "Avatar__AvatarWrapper",
   componentId: "sc-1wtet2j-0"
-})(layout, space, css({
+})(css({
   boxSizing: "border-box",
-  position: "relative",
   display: "flex",
-  alignItems: "center"
+  alignItems: "center",
+  position: "relative"
 }), props => variant({
   prop: "sizing",
   variants: {
@@ -33,7 +47,7 @@ const AvatarWrapper = styled("div").withConfig({
   variants: {
     inverted: {}
   }
-}));
+}), avatarStyles);
 const TextContent = styled("div").withConfig({
   displayName: "Avatar__TextContent",
   componentId: "sc-1wtet2j-1"
@@ -63,10 +77,13 @@ const Image = styled("img").withConfig({
   displayName: "Avatar__Image",
   componentId: "sc-1wtet2j-2"
 })(props => css({
-  width: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
-  height: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
+  width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
+  height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
   flex: "0 0 auto",
   backgroundColor: themeGet("colors.greyLighter")(props),
+  objectFit: "cover",
+  objectPosition: "center",
+  objectRepeat: "no-repeat",
   border: "0",
   display: "block",
   borderRadius: "50%"
@@ -74,12 +91,12 @@ const Image = styled("img").withConfig({
   prop: "sizing",
   variants: {
     small: {
-      width: themeGet("appScale.avatarSmall")(props),
-      height: themeGet("appScale.avatarSmall")(props)
+      width: themeGet("avatarScale.avatarSmall")(props),
+      height: themeGet("avatarScale.avatarSmall")(props)
     },
     large: {
-      width: themeGet("appScale.avatarLarge")(props),
-      height: themeGet("appScale.avatarLarge")(props)
+      width: themeGet("avatarScale.avatarLarge")(props),
+      height: themeGet("avatarScale.avatarLarge")(props)
     }
   }
 }), props => variant({
@@ -102,8 +119,8 @@ const Shape = styled("div").withConfig({
   displayName: "Avatar__Shape",
   componentId: "sc-1wtet2j-3"
 })(props => css({
-  width: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
-  height: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
+  width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
+  height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   flex: "0 0 auto",
   background: `linear-gradient(135deg, ${themeGet("colors.primaryLightest")(props)}, ${themeGet("colors.primaryLight")(props)})`,
@@ -125,12 +142,12 @@ const Shape = styled("div").withConfig({
   prop: "sizing",
   variants: {
     small: {
-      width: themeGet("appScale.avatarSmall")(props),
-      height: themeGet("appScale.avatarSmall")(props)
+      width: themeGet("avatarScale.avatarSmall")(props),
+      height: themeGet("avatarScale.avatarSmall")(props)
     },
     large: {
-      width: themeGet("appScale.avatarLarge")(props),
-      height: themeGet("appScale.avatarLarge")(props)
+      width: themeGet("avatarScale.avatarLarge")(props),
+      height: themeGet("avatarScale.avatarLarge")(props)
     },
     default: {}
   }
@@ -251,7 +268,126 @@ const LocalTime = styled(Popover).withConfig({
   displayName: "Avatar__LocalTime",
   componentId: "sc-1wtet2j-6"
 })(["position:absolute;top:0;left:0;"]);
-const Avatar = _ref2 => {
+
+// HeaderAvatar specific styles
+const HeaderAvatarWrapper = styled("div").withConfig({
+  displayName: "Avatar__HeaderAvatarWrapper",
+  componentId: "sc-1wtet2j-7"
+})(_ref2 => {
+  let {
+    $size,
+    $shape
+  } = _ref2;
+  return {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: $size,
+    height: $size,
+    boxShadow: "0px 3px 6px rgba(0,0,0,0.15)",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
+    background: "transparent"
+  };
+}, avatarStyles);
+const HeaderAvatarBorder = styled("div").withConfig({
+  displayName: "Avatar__HeaderAvatarBorder",
+  componentId: "sc-1wtet2j-8"
+})(_ref3 => {
+  let {
+    $size,
+    $shape,
+    $sizing
+  } = _ref3;
+  return {
+    width: $size,
+    height: $size,
+    border: $sizing === "large" ? "6px solid #fff" : "4px solid #fff",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#fff"
+  };
+});
+const HeaderAvatarImage = styled("img").withConfig({
+  displayName: "Avatar__HeaderAvatarImage",
+  componentId: "sc-1wtet2j-9"
+})(_ref4 => {
+  let {
+    $size,
+    $shape
+  } = _ref4;
+  return {
+    width: $size,
+    height: $size,
+    objectFit: "cover",
+    objectPosition: "center",
+    objectRepeat: "no-repeat",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
+    display: "block"
+  };
+});
+const HeaderAvatarShape = styled("div").withConfig({
+  displayName: "Avatar__HeaderAvatarShape",
+  componentId: "sc-1wtet2j-10"
+})(_ref5 => {
+  let {
+    $size,
+    $shape
+  } = _ref5;
+  return {
+    width: $size,
+    height: $size,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#e6e6e6",
+    color: "#222",
+    fontWeight: 600,
+    fontSize: `calc(${$size} / 2.5)`,
+    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
+    ...($shape === "hexagon" && {
+      clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
+    }),
+    ...($shape === "tag" && {
+      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
+    })
+  };
+});
+const HeaderAvatarAction = styled("button").withConfig({
+  displayName: "Avatar__HeaderAvatarAction",
+  componentId: "sc-1wtet2j-11"
+})(_ref6 => {
+  let {
+    $shape,
+    ...props
+  } = _ref6;
+  return {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    transform: $shape === "circle" ? "translate(-5%, 5%)" : "translate(20%, -20%)",
+    width: "36px",
+    height: "36px",
+    borderRadius: "50%",
+    background: "#e6e6e6",
+    border: "solid 2px #fff",
+    boxShadow: "0 2px 8px 0 rgba(0,0,0,0.10)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    zIndex: 2,
+    padding: 0,
+    transition: "background 0.2s ease-in-out",
+    "&:hover, &:focus": {
+      background: themeGet("colors.primaryLighter")(props)
+    }
+  };
+});
+const Avatar = _ref7 => {
   let {
     sizing,
     image,
@@ -263,12 +399,14 @@ const Avatar = _ref2 => {
     subtitleContent,
     type,
     theme,
-    shape,
+    shape = "circle",
     localTime,
     uppercase = true,
     customSize,
+    headerAvatar = false,
+    onClick,
     ...props
-  } = _ref2;
+  } = _ref7;
   const hasTitle = !!title;
   const hasSubtitle = !!subtitle;
   const hasSubtitleContent = !!subtitleContent;
@@ -279,6 +417,63 @@ const Avatar = _ref2 => {
       return `Avatar for ${title}`;
     }
   }, [imageAlt, title]);
+
+  // HeaderAvatar logic
+  if (headerAvatar) {
+    // Sizing logic
+    let size = theme?.avatarScale?.headerAvatarDefault || "65px";
+    if (sizing === "large") {
+      size = theme?.avatarScale?.headerAvatarLarge || "150px";
+    }
+    if (customSize) {
+      size = resolveCustomSize(customSize, {
+        theme
+      }) || customSize;
+    }
+    return /*#__PURE__*/_jsxs(HeaderAvatarWrapper, {
+      ...props,
+      $size: size,
+      $shape: shape,
+      children: [/*#__PURE__*/_jsx(HeaderAvatarBorder, {
+        $size: size,
+        $shape: shape,
+        $sizing: sizing,
+        children: image ? /*#__PURE__*/_jsx(HeaderAvatarImage, {
+          src: image,
+          alt: alt,
+          $size: size,
+          $shape: shape
+        }) : /*#__PURE__*/_jsx(HeaderAvatarShape, {
+          $size: size,
+          $shape: shape,
+          children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "users"]
+          }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "tag"]
+          }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "users"]
+          }) : /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "user"]
+          })
+        })
+      }), onClick && sizing === "large" && /*#__PURE__*/_jsx(HeaderAvatarAction, {
+        $size: size,
+        $shape: shape,
+        onClick: onClick,
+        "aria-label": "Edit avatar",
+        children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "camera"],
+          size: "lg",
+          color: "greyDarker"
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "edit"],
+          size: "lg",
+          color: "greyDarker",
+          transform: "right-1"
+        })
+      })]
+    });
+  }
   const component = /*#__PURE__*/_jsxs(AvatarWrapper, {
     ...props,
     type: type,
@@ -343,10 +538,11 @@ const Avatar = _ref2 => {
 Avatar.propTypes = {
   /** Changes the sizing of the Avatar component */
   sizing: PropTypes.oneOf(["small", "large", "default"]),
-  /* If specifying custom sizing, provide a string with the size in pixels */
+  /* If specifying custom sizing, provide a string with the size including units (e.g. "65px") */
   customSize: PropTypes.string,
   /** Changes the shape of the Avatar component */
-  shape: PropTypes.oneOf(["square", "hexagon", "tag", "default"]),
+  shape: PropTypes.oneOf(["circle", "square", "hexagon", "tag"]),
+  // circle is the default so doesn't explicitly need to be specified
   /** Specifies the inverted type for dark backgrounds */
   type: PropTypes.oneOf(["inverted", "default"]),
   /** Specifies a source path for an image */
@@ -376,7 +572,11 @@ Avatar.propTypes = {
   /** Specifies local time */
   localTime: PropTypes.string,
   /** Specifies the colour theme */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** Specifies whether to render the avatar in headerAvatar mode */
+  headerAvatar: PropTypes.bool,
+  /** Specifies the onClick handler for the action button in headerAvatar mode */
+  onClick: PropTypes.func
 };
 Avatar.__docgenInfo = {
   "description": "",
@@ -413,6 +613,30 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
+    "shape": {
+      "defaultValue": {
+        "value": "\"circle\"",
+        "computed": false
+      },
+      "description": "Changes the shape of the Avatar component",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"circle\"",
+          "computed": false
+        }, {
+          "value": "\"square\"",
+          "computed": false
+        }, {
+          "value": "\"hexagon\"",
+          "computed": false
+        }, {
+          "value": "\"tag\"",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
     "uppercase": {
       "defaultValue": {
         "value": "true",
@@ -424,6 +648,17 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
+    "headerAvatar": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "Specifies whether to render the avatar in headerAvatar mode",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "sizing": {
       "description": "Changes the sizing of the Avatar component",
       "type": {
@@ -448,26 +683,6 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
-    "shape": {
-      "description": "Changes the shape of the Avatar component",
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "\"square\"",
-          "computed": false
-        }, {
-          "value": "\"hexagon\"",
-          "computed": false
-        }, {
-          "value": "\"tag\"",
-          "computed": false
-        }, {
-          "value": "\"default\"",
-          "computed": false
-        }]
-      },
-      "required": false
-    },
     "type": {
       "description": "Specifies the inverted type for dark backgrounds",
       "type": {
@@ -553,6 +768,13 @@ Avatar.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "onClick": {
+      "description": "Specifies the onClick handler for the action button in headerAvatar mode",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

package/es/components/Box/index.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from "react";
 import styled, { ThemeProvider } from "styled-components";
-import { space, layout, flexbox, color, border, position, variant, compose } from "styled-system";
+import { space, layout, flexbox, color, border, position, variant, background, compose } from "styled-system";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { css } from "@styled-system/css";
 import PropTypes from "prop-types";
 import { themeGet } from "@styled-system/theme-get";
 import { jsx as _jsx } from "react/jsx-runtime";
-const boxStyles = compose(space, layout, flexbox, color, border, position);
+const boxStyles = compose(space, layout, flexbox, color, border, position, background);
 const BoxWrapper = styled("div").withConfig({
   shouldForwardProp,
   displayName: "Box__BoxWrapper",