orcs-design-system 3.3.61 → 3.3.63

package/es/GlobalStyles.js

@@ -3,5 +3,5 @@ import { themeGet } from "@styled-system/theme-get";
 // GLOBAL STYLES
 // For browser reset, setting global box sizing and font sizing etc.
 
-const GlobalStyles = createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:auto;width:100%;overflow-y:auto;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
+const GlobalStyles = /*#__PURE__*/createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:auto;width:100%;overflow-y:auto;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
 export default GlobalStyles;

package/es/assets/Colour/index.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { css } from "styled-components";
-export const Colour = styled("div").withConfig({
+export const Colour = /*#__PURE__*/styled("div").withConfig({
   shouldForwardProp,
   displayName: "Colour",
   componentId: "sc-uyvdow-0"

package/es/components/ActionsMenu/ActionsMenu.animations.js

@@ -1,10 +1,10 @@
 import { keyframes } from "styled-components";
-export const crossFadeIn = keyframes(["0%{opacity:0;}75%{opacity:0;}100%{opacity:1;}"]);
-export const beforeDotCollapsing = keyframes(["0%{transform:translate(0,-6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
-export const beforeDotExpanding = keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,-6px);}"]);
-export const afterDotCollapsing = keyframes(["0%{transform:translate(0,6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
-export const afterDotExpanding = keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,6px);}"]);
-export const beforeCrossExpanding = keyframes(["0%{height:4px;transform:rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:18px;transform:translate(0,-7px) rotate(-45deg);}"]);
-export const beforeCrossCollapsing = keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:4px;transform:rotate(-45deg);}"]);
-export const afterCrossExpanding = keyframes(["0%{height:4px;transform:rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:18px;transform:translate(0,-7px) rotate(45deg);}"]);
-export const afterCrossCollapsing = keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:4px;transform:rotate(45deg);}"]);
+export const crossFadeIn = /*#__PURE__*/keyframes(["0%{opacity:0;}75%{opacity:0;}100%{opacity:1;}"]);
+export const beforeDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translate(0,-6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
+export const beforeDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,-6px);}"]);
+export const afterDotCollapsing = /*#__PURE__*/keyframes(["0%{transform:translate(0,6px);}50%{transform:translate(0,0);}100%{transform:translate(0,0);}"]);
+export const afterDotExpanding = /*#__PURE__*/keyframes(["0%{transform:translate(0,0);}50%{transform:translate(0,0);}100%{transform:translate(0,6px);}"]);
+export const beforeCrossExpanding = /*#__PURE__*/keyframes(["0%{height:4px;transform:rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:18px;transform:translate(0,-7px) rotate(-45deg);}"]);
+export const beforeCrossCollapsing = /*#__PURE__*/keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(-45deg);}50%{height:4px;transform:rotate(-45deg);}100%{height:4px;transform:rotate(-45deg);}"]);
+export const afterCrossExpanding = /*#__PURE__*/keyframes(["0%{height:4px;transform:rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:18px;transform:translate(0,-7px) rotate(45deg);}"]);
+export const afterCrossCollapsing = /*#__PURE__*/keyframes(["0%{height:18px;transform:translate(0,-7px) rotate(45deg);}50%{height:4px;transform:rotate(45deg);}100%{height:4px;transform:rotate(45deg);}"]);

package/es/components/ActionsMenu/index.js

@@ -11,31 +11,31 @@ import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui
 import { getFloatingUiRootElement, getFloatingUiZIndex } from "../../utils/floatingUiHelpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ActionMenuContext = /*#__PURE__*/createContext({});
-const StyledActionsMenuContainer = styled.div.withConfig({
-  displayName: "ActionsMenu__StyledActionsMenuContainer",
+const StyledActionsMenuContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StyledActionsMenuContainer",
   componentId: "sc-yvbni2-0"
 })(["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",
+const Wrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Wrapper",
   componentId: "sc-yvbni2-1"
 })(["", " ", " position:relative;width:auto;"], space, layout);
-const Control = styled.button.withConfig({
-  displayName: "ActionsMenu__Control",
+const Control = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Control",
   componentId: "sc-yvbni2-2"
 })(["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:", ";width:", ";height:", ";border-radius:", ";border:", ";", " ", " &: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 => props.disabled ? "not-allowed" : "pointer", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "35px" : "30px", props => props.variant === "circle" ? "50%" : themeGet("radii.2")(props), props => props.variant === "circle" ? "solid 2px" : "solid 1px", props => props.variant === "default" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : "white", props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyLight")(props)), props => props.variant === "circle" && css(["background-color:", ";border-color:", ";"], props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props), props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.greyDarkest")(props)), props => props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.primary")(props), beforeDotCollapsing, afterDotCollapsing, beforeCrossExpanding, afterCrossExpanding, beforeDotExpanding, afterDotExpanding, beforeCrossCollapsing, afterCrossCollapsing);
-const Dots = styled.div.withConfig({
-  displayName: "ActionsMenu__Dots",
+const Dots = /*#__PURE__*/styled.div.withConfig({
+  displayName: "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 => 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",
+const Cross = /*#__PURE__*/styled.div.withConfig({
+  displayName: "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 => props.variant === "circle" ? themeGet("colors.white")(props) : themeGet("colors.greyDarker")(props));
-const Menu = styled.div.withConfig({
-  displayName: "ActionsMenu__Menu",
+const Menu = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Menu",
   componentId: "sc-yvbni2-5"
 })(["display:block;width:", ";z-index:5;background-color:", ";border:1px solid ", ";box-shadow:", ";border-radius:", ";"], props => props.menuWidth ? props.menuWidth : "auto", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => themeGet("radii.2")(props));
-export const ActionsMenuHeading = styled(props => {
+export const ActionsMenuHeading = /*#__PURE__*/styled(props => {
   const {
     actionMenu
   } = useContext(ActionMenuContext);
@@ -59,15 +59,15 @@ export const ActionsMenuHeading = styled(props => {
   tabIndex: "0",
   role: "button"
 }).withConfig({
-  displayName: "ActionsMenu__ActionsMenuHeading",
+  displayName: "ActionsMenuHeading",
   componentId: "sc-yvbni2-6"
 })(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], props => themeGet("colors.greyDark")(props), props => themeGet("fontSizes.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("colors.greyLighter")(props), props => props.canClick ? "pointer" : "default");
-const ActionMenuItemStyles = css(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover{background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}&#other{padding:6px 8px;}"], props => props.selected ? themeGet("colors.success20")(props) : "transparent", themeGet("colors.white"), themeGet("colors.greyDarkest"), themeGet("fontSizes.0"), themeGet("fontSizes.0"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("transition.transitionDefault"), themeGet("colors.primaryLightest"), themeGet("radii.2"), themeGet("radii.2"), themeGet("radii.2"), themeGet("radii.2"), themeGet("radii.2"));
-const StyledNavLink = styled(NavLink).withConfig({
-  displayName: "ActionsMenu__StyledNavLink",
+const ActionMenuItemStyles = /*#__PURE__*/css(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover{background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}&#other{padding:6px 8px;}"], props => props.selected ? themeGet("colors.success20")(props) : "transparent", themeGet("colors.white"), themeGet("colors.greyDarkest"), themeGet("fontSizes.0"), themeGet("fontSizes.0"), themeGet("fonts.main"), themeGet("fontWeights.2"), themeGet("transition.transitionDefault"), themeGet("colors.primaryLightest"), themeGet("radii.2"), themeGet("radii.2"), themeGet("radii.2"), themeGet("radii.2"), themeGet("radii.2"));
+const StyledNavLink = /*#__PURE__*/styled(NavLink).withConfig({
+  displayName: "StyledNavLink",
   componentId: "sc-yvbni2-7"
 })(["text-decoration:none;"]);
-export const ActionsMenuItem = styled(props => {
+export const ActionsMenuItem = /*#__PURE__*/styled(props => {
   const {
     id,
     onItemClick,
@@ -119,7 +119,7 @@ export const ActionsMenuItem = styled(props => {
 }).attrs({
   role: "menuitem"
 }).withConfig({
-  displayName: "ActionsMenu__ActionsMenuItem",
+  displayName: "ActionsMenuItem",
   componentId: "sc-yvbni2-8"
 })(["", ""], _ref => {
   let {

package/es/components/Avatar/index.js

@@ -10,7 +10,7 @@ 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);
-export const COLOR_CHANGE = keyframes(["0%{background-position:-468px 0;}100%{background-position:468px 0;}"]);
+export const COLOR_CHANGE = /*#__PURE__*/keyframes(["0%{background-position:-468px 0;}100%{background-position:468px 0;}"]);
 
 // Helper function to resolve customSize values
 const resolveCustomSize = (customSize, props) => {
@@ -24,8 +24,8 @@ const resolveCustomSize = (customSize, props) => {
     return themeGet(`avatarScale.${customSize}`)(props) || customSize;
   }
 };
-const AvatarWrapper = styled("div").withConfig({
-  displayName: "Avatar__AvatarWrapper",
+const AvatarWrapper = /*#__PURE__*/styled("div").withConfig({
+  displayName: "AvatarWrapper",
   componentId: "sc-1wtet2j-0"
 })(css({
   boxSizing: "border-box",
@@ -49,8 +49,8 @@ const AvatarWrapper = styled("div").withConfig({
     inverted: {}
   }
 }), avatarStyles);
-const TextContent = styled("div").withConfig({
-  displayName: "Avatar__TextContent",
+const TextContent = /*#__PURE__*/styled("div").withConfig({
+  displayName: "TextContent",
   componentId: "sc-1wtet2j-1"
 })(css({
   marginLeft: "s",
@@ -74,8 +74,8 @@ const TextContent = styled("div").withConfig({
     }
   }
 }));
-const Image = styled("img").withConfig({
-  displayName: "Avatar__Image",
+const Image = /*#__PURE__*/styled("img").withConfig({
+  displayName: "Image",
   componentId: "sc-1wtet2j-2"
 })(props => css({
   width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
@@ -116,8 +116,8 @@ const Image = styled("img").withConfig({
     }
   }
 }));
-const Shape = styled("div").withConfig({
-  displayName: "Avatar__Shape",
+const Shape = /*#__PURE__*/styled("div").withConfig({
+  displayName: "Shape",
   componentId: "sc-1wtet2j-3"
 })(props => css({
   width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
@@ -178,7 +178,7 @@ const Shape = styled("div").withConfig({
     }
   }
 }));
-const Title = styled(_ref => {
+const Title = /*#__PURE__*/styled(_ref => {
   let {
     titleLevel,
     ...props
@@ -186,7 +186,7 @@ const Title = styled(_ref => {
   const Heading = Header[titleLevel];
   return /*#__PURE__*/React.cloneElement(/*#__PURE__*/_jsx(Heading, {}), props);
 }).withConfig({
-  displayName: "Avatar__Title",
+  displayName: "Title",
   componentId: "sc-1wtet2j-4"
 })(props => css({
   fontSize: themeGet("fontSizes.2")(props),
@@ -238,8 +238,8 @@ const Title = styled(_ref => {
     }
   }
 }));
-const Subtitle = styled(Text).withConfig({
-  displayName: "Avatar__Subtitle",
+const Subtitle = /*#__PURE__*/styled(Text).withConfig({
+  displayName: "Subtitle",
   componentId: "sc-1wtet2j-5"
 })(props => css({
   color: themeGet("colors.greyDark")(props),
@@ -265,14 +265,14 @@ const Subtitle = styled(Text).withConfig({
     default: {}
   }
 }));
-const LocalTime = styled(Popover).withConfig({
-  displayName: "Avatar__LocalTime",
+const LocalTime = /*#__PURE__*/styled(Popover).withConfig({
+  displayName: "LocalTime",
   componentId: "sc-1wtet2j-6"
 })(["position:absolute;top:0;left:0;"]);
 
 // HeaderAvatar specific styles
-const HeaderAvatarWrapper = styled("div").withConfig({
-  displayName: "Avatar__HeaderAvatarWrapper",
+const HeaderAvatarWrapper = /*#__PURE__*/styled("div").withConfig({
+  displayName: "HeaderAvatarWrapper",
   componentId: "sc-1wtet2j-7"
 })(_ref2 => {
   let {
@@ -292,8 +292,8 @@ const HeaderAvatarWrapper = styled("div").withConfig({
     background: "transparent"
   };
 }, avatarStyles);
-const HeaderAvatarBorder = styled("div").withConfig({
-  displayName: "Avatar__HeaderAvatarBorder",
+const HeaderAvatarBorder = /*#__PURE__*/styled("div").withConfig({
+  displayName: "HeaderAvatarBorder",
   componentId: "sc-1wtet2j-8"
 })(_ref3 => {
   let {
@@ -314,8 +314,8 @@ const HeaderAvatarBorder = styled("div").withConfig({
     background: "#fff"
   };
 });
-const HeaderAvatarLoading = styled("div").withConfig({
-  displayName: "Avatar__HeaderAvatarLoading",
+const HeaderAvatarLoading = /*#__PURE__*/styled("div").withConfig({
+  displayName: "HeaderAvatarLoading",
   componentId: "sc-1wtet2j-9"
 })(["width:", ";height:", ";background:linear-gradient( to right,rgba(0,0,0,0.1) 5%,rgba(0,0,0,0.05) 65%,rgba(0,0,0,0.1) 70% );background-size:200px;animation:", " 20s linear infinite;"], _ref4 => {
   let {
@@ -328,8 +328,8 @@ const HeaderAvatarLoading = styled("div").withConfig({
   } = _ref5;
   return $size;
 }, COLOR_CHANGE);
-const HeaderAvatarImage = styled("img").withConfig({
-  displayName: "Avatar__HeaderAvatarImage",
+const HeaderAvatarImage = /*#__PURE__*/styled("img").withConfig({
+  displayName: "HeaderAvatarImage",
   componentId: "sc-1wtet2j-10"
 })(_ref6 => {
   let {
@@ -347,8 +347,8 @@ const HeaderAvatarImage = styled("img").withConfig({
     display: "block"
   };
 });
-const HeaderAvatarShape = styled("div").withConfig({
-  displayName: "Avatar__HeaderAvatarShape",
+const HeaderAvatarShape = /*#__PURE__*/styled("div").withConfig({
+  displayName: "HeaderAvatarShape",
   componentId: "sc-1wtet2j-11"
 })(_ref7 => {
   let {
@@ -371,7 +371,7 @@ const HeaderAvatarShape = styled("div").withConfig({
     alignItems: "center",
     justifyContent: "center",
     ...backgroundStyles,
-    color: "#222",
+    color: "#fff",
     fontWeight: 600,
     fontSize: `calc(${$size} / 2.5)`,
     borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
@@ -383,8 +383,8 @@ const HeaderAvatarShape = styled("div").withConfig({
     })
   };
 });
-const HeaderAvatarAction = styled("button").withConfig({
-  displayName: "Avatar__HeaderAvatarAction",
+const HeaderAvatarAction = /*#__PURE__*/styled("button").withConfig({
+  displayName: "HeaderAvatarAction",
   componentId: "sc-1wtet2j-12"
 })(_ref8 => {
   let {
@@ -413,8 +413,8 @@ const HeaderAvatarAction = styled("button").withConfig({
     }
   };
 });
-const IconContainer = styled("div").withConfig({
-  displayName: "Avatar__IconContainer",
+const IconContainer = /*#__PURE__*/styled("div").withConfig({
+  displayName: "IconContainer",
   componentId: "sc-1wtet2j-13"
 })(_ref9 => {
   let {
@@ -455,6 +455,7 @@ const Avatar = _ref0 => {
     sizing,
     image,
     gradient,
+    fallbackGradient,
     imageAlt,
     initials,
     title,
@@ -483,6 +484,10 @@ const Avatar = _ref0 => {
     }
   }, [imageAlt, title]);
 
+  // Resolve a default icon color suitable on accent/gradient backgrounds
+  // Prefer theme tokens if available to avoid hard-coded colors
+  const defaultIconColor = theme?.colors?.iconOnAccent || theme?.colors?.iconDefault || theme?.colors?.white || "white";
+
   // HeaderAvatar logic
   if (headerAvatar) {
     // Sizing logic
@@ -503,15 +508,19 @@ const Avatar = _ref0 => {
     }) : /*#__PURE__*/_jsx(HeaderAvatarShape, {
       $size: size,
       $shape: shape,
-      $gradient: gradient,
+      $gradient: gradient || fallbackGradient,
       children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "users"]
+        icon: ["fas", "users"],
+        color: defaultIconColor
       }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "tag"]
+        icon: ["fas", "tag"],
+        color: defaultIconColor
       }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "users"]
+        icon: ["fas", "users"],
+        color: defaultIconColor
       }) : /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "user"]
+        icon: ["fas", "user"],
+        color: defaultIconColor
       })
     });
     const avatarContent = /*#__PURE__*/_jsx(HeaderAvatarWrapper, {
@@ -548,11 +557,11 @@ const Avatar = _ref0 => {
             children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
               icon: ["fas", "camera"],
               size: sizing === "large" ? "lg" : "1x",
-              color: "white"
+              color: defaultIconColor
             }) : /*#__PURE__*/_jsx(Icon, {
               icon: ["fas", "image"],
               size: sizing === "large" ? "lg" : "1x",
-              color: "white"
+              color: defaultIconColor
             })
           }), avatarContent]
         })
@@ -577,15 +586,19 @@ const Avatar = _ref0 => {
       type: type,
       className: type == "inverted" ? "inverted" : "",
       uppercase: uppercase,
-      gradient: gradient,
+      gradient: gradient || fallbackGradient,
       children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "users"]
+        icon: ["fas", "users"],
+        color: defaultIconColor
       }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "tag"]
+        icon: ["fas", "tag"],
+        color: defaultIconColor
       }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "users"]
+        icon: ["fas", "users"],
+        color: defaultIconColor
       }) : /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "user"]
+        icon: ["fas", "user"],
+        color: defaultIconColor
       })
     }), (hasTitle || hasSubtitle) && /*#__PURE__*/_jsxs(TextContent, {
       type: type,
@@ -611,7 +624,7 @@ const Avatar = _ref0 => {
         icon: true,
         children: /*#__PURE__*/_jsx(Icon, {
           icon: ["fas", "clock"],
-          color: "white",
+          color: defaultIconColor,
           transform: "grow-2"
         })
       })
@@ -634,6 +647,10 @@ Avatar.propTypes = {
   type: PropTypes.oneOf(["inverted", "default"]),
   /** Specifies a source path for an image */
   image: PropTypes.string,
+  /** Specifies the gradient for the avatar background */
+  gradient: PropTypes.string,
+  /** Specifies the fallback gradient when no image is provided */
+  fallbackGradient: PropTypes.string,
   /** 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] === "")) {
@@ -804,6 +821,20 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
+    "gradient": {
+      "description": "Specifies the gradient for the avatar background",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fallbackGradient": {
+      "description": "Specifies the fallback gradient when no image is provided",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "imageAlt": {
       "description": "Specifies the alt text for an image. This must be specified if image prop is used and title prop is not a string.",
       "type": {

package/es/components/Badge/index.js

@@ -7,9 +7,9 @@ import shouldForwardProp from "@styled-system/should-forward-prop";
 import { themeGet } from "@styled-system/theme-get";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BadgeStyles = compose(space, layout, color);
-const Item = styled("span").withConfig({
+const Item = /*#__PURE__*/styled("span").withConfig({
   shouldForwardProp,
-  displayName: "Badge__Item",
+  displayName: "Item",
   componentId: "sc-9r75kj-0"
 }).attrs(props => ({
   "data-testid": props["data-testid"] ? props["data-testid"] : null

package/es/components/Box/index.js

@@ -7,9 +7,9 @@ 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, background);
-const BoxWrapper = styled("div").withConfig({
+const BoxWrapper = /*#__PURE__*/styled("div").withConfig({
   shouldForwardProp,
-  displayName: "Box__BoxWrapper",
+  displayName: "BoxWrapper",
   componentId: "sc-jr1api-0"
 }).attrs(props => ({
   "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null

package/es/components/Breadcrumbs/index.js

@@ -6,16 +6,16 @@ import { themeGet } from "@styled-system/theme-get";
 import StyledLink from "../StyledLink";
 import Popover from "../Popover";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BreadcrumbsWrapper = styled("nav").attrs({
+const BreadcrumbsWrapper = /*#__PURE__*/styled("nav").attrs({
   "aria-label": "breadcrumb"
 }).withConfig({
-  displayName: "Breadcrumbs__BreadcrumbsWrapper",
+  displayName: "BreadcrumbsWrapper",
   componentId: "sc-qbw4kn-0"
 })(["", " ", ""], space, layout);
-const List = styled("ol").withConfig({
+const List = /*#__PURE__*/styled("ol").withConfig({
   shouldForwardProp: prop => !["variant"].includes(prop)
 }).withConfig({
-  displayName: "Breadcrumbs__List",
+  displayName: "List",
   componentId: "sc-qbw4kn-1"
 })(["display:flex;flex-direction:", ";flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px;text-shadow:", ";", ""], _ref => {
   let {
@@ -28,10 +28,10 @@ const List = styled("ol").withConfig({
   } = _ref2;
   return variant === "white" ? "0 0px 5px rgba(0,0,0,0.2)" : "none";
 }, space);
-const Item = styled("li").withConfig({
+const Item = /*#__PURE__*/styled("li").withConfig({
   shouldForwardProp: prop => !["variant", "isLast"].includes(prop)
 }).withConfig({
-  displayName: "Breadcrumbs__Item",
+  displayName: "Item",
   componentId: "sc-qbw4kn-2"
 })(["display:flex;gap:5px;align-items:center;color:", ";font-size:", ";line-height:1.5;font-weight:", ";& > a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}", ""], _ref3 => {
   let {

package/es/components/Button/index.js

@@ -8,7 +8,16 @@ import Loading from "../Loading";
 import { themeGet } from "@styled-system/theme-get";
 import { Link } from "react-router-dom";
 import { omit } from "lodash";
+
+// Custom shouldForwardProp that also filters out borderRadius and borderColor
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const customShouldForwardProp = prop => {
+  // Filter out styled-system props that shouldn't go to DOM
+  if (["borderRadius", "borderColor"].includes(prop)) {
+    return false;
+  }
+  return shouldForwardProp(prop);
+};
 export const VARIANT_COLORS = {
   default: {
     background: "colors.primary",
@@ -156,7 +165,7 @@ const getVariantStyle = props => {
   return styles[props.variant] || styles.default;
 };
 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 => {
+const buttonStyles = /*#__PURE__*/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;
@@ -168,23 +177,23 @@ const attrs = props => ({
   disabled: props.disabled || props.variant == "disabled",
   className: `${props.className || ""} variant-${props.variant || "default"}`
 });
-const StyledButton = styled("button").withConfig({
-  shouldForwardProp
+const StyledButton = /*#__PURE__*/styled("button").withConfig({
+  shouldForwardProp: customShouldForwardProp
 }).attrs(attrs).withConfig({
-  displayName: "Button__StyledButton",
+  displayName: "StyledButton",
   componentId: "sc-10uojnk-0"
 })(["", ""], buttonStyles);
-const linkStyles = css(["width:", ";display:", ";align-items:", ";"], props => props.width || "fit-content", props => props.height || props.width ? "flex" : props.display || "inline-block", props => props.alignItems || "center");
-const StyledButtonLink = styled.a.withConfig({
-  shouldForwardProp
+const linkStyles = /*#__PURE__*/css(["width:", ";display:", ";align-items:", ";"], props => props.width || "fit-content", props => props.height || props.width ? "flex" : props.display || "inline-block", props => props.alignItems || "center");
+const StyledButtonLink = /*#__PURE__*/styled.a.withConfig({
+  shouldForwardProp: customShouldForwardProp
 }).attrs(attrs).withConfig({
-  displayName: "Button__StyledButtonLink",
+  displayName: "StyledButtonLink",
   componentId: "sc-10uojnk-1"
 })(["", " ", ""], buttonStyles, linkStyles);
-const StyledReactButtonLink = styled(Link).withConfig({
-  shouldForwardProp
+const StyledReactButtonLink = /*#__PURE__*/styled(Link).withConfig({
+  shouldForwardProp: customShouldForwardProp
 }).attrs(attrs).withConfig({
-  displayName: "Button__StyledReactButtonLink",
+  displayName: "StyledReactButtonLink",
   componentId: "sc-10uojnk-2"
 })(["", " ", ""], buttonStyles, linkStyles);
 const buttonPropTypes = {

package/es/components/ButtonGroup/index.js

@@ -5,8 +5,8 @@ import { themeGet } from "@styled-system/theme-get";
 import Flex from "../Flex/";
 import { css } from "@styled-system/css";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ButtonGroupControlLabel = styled("div").withConfig({
-  displayName: "ButtonGroup__ButtonGroupControlLabel",
+const ButtonGroupControlLabel = /*#__PURE__*/styled("div").withConfig({
+  displayName: "ButtonGroupControlLabel",
   componentId: "sc-g7627n-0"
 })(props => css({
   color: props.labelDark ? themeGet("colors.greyDark") : themeGet("colors.white")(props),
@@ -14,8 +14,8 @@ const ButtonGroupControlLabel = styled("div").withConfig({
   fontWeight: themeGet("fontWeights.1")(props),
   marginRight: themeGet("space.3")(props)
 }));
-const ButtonGroupWrapper = styled("div").withConfig({
-  displayName: "ButtonGroup__ButtonGroupWrapper",
+const ButtonGroupWrapper = /*#__PURE__*/styled("div").withConfig({
+  displayName: "ButtonGroupWrapper",
   componentId: "sc-g7627n-1"
 })(props => css({
   display: "flex",
@@ -25,10 +25,10 @@ const ButtonGroupWrapper = styled("div").withConfig({
   padding: "4px",
   height: themeGet("appScale.inputHeightDefault")(props)
 }));
-const ButtonGroupRadio = styled.input.attrs({
+const ButtonGroupRadio = /*#__PURE__*/styled.input.attrs({
   type: "radio"
 }).withConfig({
-  displayName: "ButtonGroup__ButtonGroupRadio",
+  displayName: "ButtonGroupRadio",
   componentId: "sc-g7627n-2"
 })(props => css({
   opacity: "0",
@@ -48,8 +48,8 @@ const ButtonGroupRadio = styled.input.attrs({
     }
   }
 }));
-const ButtonGroupLabel = styled("label").withConfig({
-  displayName: "ButtonGroup__ButtonGroupLabel",
+const ButtonGroupLabel = /*#__PURE__*/styled("label").withConfig({
+  displayName: "ButtonGroupLabel",
   componentId: "sc-g7627n-3"
 })(props => css({
   height: "100%",

package/es/components/Card/index.js

@@ -7,16 +7,16 @@ import Flex from "../Flex/";
 import { H3, H4 } from "../Typography";
 import { themeGet } from "@styled-system/theme-get";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Item = styled(Box).withConfig({
-  displayName: "Card__Item",
+const Item = /*#__PURE__*/styled(Box).withConfig({
+  displayName: "Item",
   componentId: "sc-yfq75p-0"
 })(["word-break:break-word;"]);
-const ChangeIcon = styled.div.withConfig({
-  displayName: "Card__ChangeIcon",
+const ChangeIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChangeIcon",
   componentId: "sc-yfq75p-1"
 })(["display:inline-block;width:14px;height:2px;background-size:14px 14px;background-color:", ";margin:0 0 0 ", ";", ""], props => themeGet("colors.greyDark")(props), props => themeGet("space.3")(props), props => props.changeIcon === "arrowUp" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;"]) : props.changeIcon === "arrowDown" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;transform:rotate(180deg);"]) : css([""]));
-const ChangeValue = styled.small.withConfig({
-  displayName: "Card__ChangeValue",
+const ChangeValue = /*#__PURE__*/styled.small.withConfig({
+  displayName: "ChangeValue",
   componentId: "sc-yfq75p-2"
 })(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";margin:0 0 0 ", ";"], props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.0")(props), props => themeGet("colors.greyDark")(props), props => themeGet("space.3")(props));