orcs-design-system 3.2.48 → 3.3.0

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

@@ -110,6 +110,30 @@ export const large = () => /*#__PURE__*/_jsxs(Spacer, {
   })]
 });
 large.storyName = "Large";
+export const customSize = () => /*#__PURE__*/_jsxs(Flex, {
+  gap: "r",
+  children: [/*#__PURE__*/_jsx(Avatar, {
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
+    imageAlt: "Avatar for Ayden Lundgre",
+    customSize: "28px"
+  }), /*#__PURE__*/_jsx(Avatar, {
+    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Avatar for Innovation Lab",
+    customSize: "28px",
+    shape: "square"
+  }), /*#__PURE__*/_jsx(Avatar, {
+    image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
+    imageAlt: "Avatar for Innovation Lab",
+    customSize: "28px",
+    shape: "hexagon"
+  }), /*#__PURE__*/_jsx(Avatar, {
+    image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
+    imageAlt: "Avatar for Tag",
+    customSize: "28px",
+    shape: "tag"
+  })]
+});
+large.storyName = "customSize";
 export const titleLevel = () => /*#__PURE__*/_jsx(Spacer, {
   my: 4,
   children: /*#__PURE__*/_jsx(Avatar, {
@@ -379,6 +403,11 @@ large.__docgenInfo = {
   "methods": [],
   "displayName": "large"
 };
+customSize.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "customSize"
+};
 titleLevel.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Avatar/index.js

@@ -63,8 +63,8 @@ const Image = styled("img").withConfig({
   displayName: "Avatar__Image",
   componentId: "sc-1wtet2j-2"
 })(props => css({
-  width: themeGet("appScale.avatarDefault")(props),
-  height: themeGet("appScale.avatarDefault")(props),
+  width: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
+  height: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
   flex: "0 0 auto",
   backgroundColor: themeGet("colors.greyLighter")(props),
   border: "0",
@@ -102,12 +102,12 @@ const Shape = styled("div").withConfig({
   displayName: "Avatar__Shape",
   componentId: "sc-1wtet2j-3"
 })(props => css({
-  width: themeGet("appScale.avatarDefault")(props),
-  height: themeGet("appScale.avatarDefault")(props),
+  width: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
+  height: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   flex: "0 0 auto",
-  backgroundColor: themeGet("colors.greyLighter")(props),
-  color: props.whiteInitials ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props),
+  background: `linear-gradient(135deg, ${themeGet("colors.primaryLightest")(props)}, ${themeGet("colors.primaryLight")(props)})`,
+  color: themeGet("colors.white")(props),
   border: "0",
   display: "flex",
   borderRadius: "50%",
@@ -266,7 +266,7 @@ const Avatar = _ref2 => {
     shape,
     localTime,
     uppercase = true,
-    whiteInitials,
+    customSize,
     ...props
   } = _ref2;
   const hasTitle = !!title;
@@ -287,13 +287,14 @@ const Avatar = _ref2 => {
       src: image,
       sizing: sizing,
       shape: shape,
-      alt: alt
+      alt: alt,
+      customSize: customSize
     }) : /*#__PURE__*/_jsx(Shape, {
       shape: shape,
       sizing: sizing,
+      customSize: customSize,
       type: type,
       className: type == "inverted" ? "inverted" : "",
-      whiteInitials: whiteInitials,
       uppercase: uppercase,
       children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
         icon: ["fas", "users"]
@@ -342,6 +343,8 @@ 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 */
+  customSize: PropTypes.string,
   /** Changes the shape of the Avatar component */
   shape: PropTypes.oneOf(["square", "hexagon", "tag", "default"]),
   /** Specifies the inverted type for dark backgrounds */
@@ -362,8 +365,6 @@ Avatar.propTypes = {
   initials: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /** Specifies custom content for avatar subtitle */
   subtitleContent: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-  /** Turns white initials on for custom `Circle` backgrounds */
-  whiteInitials: PropTypes.bool,
   /** Specifies whether to use uppercase for initials */
   uppercase: PropTypes.bool,
   /** Specifies title / name as just plain text, or an element like a hyperlink or react router link */
@@ -440,6 +441,13 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
+    "customSize": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "shape": {
       "description": "Changes the shape of the Avatar component",
       "type": {
@@ -513,13 +521,6 @@ Avatar.__docgenInfo = {
       },
       "required": false
     },
-    "whiteInitials": {
-      "description": "Turns white initials on for custom `Circle` backgrounds",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
     "title": {
       "description": "Specifies title / name as just plain text, or an element like a hyperlink or react router link",
       "type": {

package/es/components/Box/index.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from "react";
 import styled, { ThemeProvider } from "styled-components";
-import { space, layout, color, border, variant, compose } from "styled-system";
+import { space, layout, flexbox, color, border, variant, 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, color, border);
+const boxStyles = compose(space, layout, flexbox, color, border);
 const BoxWrapper = styled("div").withConfig({
   shouldForwardProp,
   displayName: "Box__BoxWrapper",

package/es/components/Flex/index.js

@@ -1,12 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
-import { space, layout, flexbox, compose } from "styled-system";
+import { space, layout, flexbox, color, border, compose } from "styled-system";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import styledPropTypes from "@styled-system/prop-types";
 import { jsx as _jsx } from "react/jsx-runtime";
-const FlexStyles = compose(space, layout, flexbox);
+const FlexStyles = compose(space, layout, flexbox, color, border);
 const FlexWrapper = styled("div").withConfig({
   shouldForwardProp,
   displayName: "Flex__FlexWrapper",

package/es/components/FloatingPanels/FloatingPanels.styles.js

@@ -53,7 +53,7 @@ export const PanelWrapper = styled.div.withConfig({
 export const PanelHeader = styled.button.withConfig({
   displayName: "FloatingPanelsstyles__PanelHeader",
   componentId: "sc-1by914f-2"
-})(["font-family:", ";box-shadow:0 0 4px rgba(0,0,0,0.1);color:", ";width:100%;margin-left:-13px;margin-top:-46px;border-radius:", ";appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 12px;height:46px;position:fixed;width:300px;border-bottom:", ";border:solid 1px ", ";z-index:1;cursor:pointer;user-select:none;transition:padding 0.3s ease-in-out;&:focus{outline:none;}"], themeGet("fonts.main"), themeGet("colors.greyDarkest"), _ref10 => {
+})(["font-family:", ";box-shadow:0 0 4px rgba(0,0,0,0.1);color:", ";width:100%;margin-left:-13px;margin-top:-46px;border-radius:", ";appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 12px;height:46px;position:absolute;width:300px;border-bottom:", ";border:solid 1px ", ";z-index:1;cursor:pointer;user-select:none;transition:padding 0.3s ease-in-out;&:focus{outline:none;}"], themeGet("fonts.main"), themeGet("colors.greyDarkest"), _ref10 => {
   let {
     isExpanded
   } = _ref10;

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

@@ -1,76 +1,71 @@
-import React, { useState } from "react";
-import { action } from "@storybook/addon-actions";
-import Header from "../Header";
-import StyledLink from "../StyledLink";
-import Icon from "../Icon";
-import { Small } from "../Typography";
+import React from "react";
+import Header from ".";
 import TextInput from "../TextInput";
-import Select from "../Select";
 import Box from "../Box";
+import Flex from "../Flex";
+import { Small } from "../Typography";
+import Toggle from "../Toggle";
+import Divider from "../Divider";
+import Icon from "../Icon";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Header",
+  component: Header,
   decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
-    height: "500px",
+    height: "350px",
+    bg: "greyLightest",
+    p: "r",
     children: storyFn()
-  })],
-  component: Header
-};
-export const defaultHeader = () => /*#__PURE__*/_jsxs(Header, {
-  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]`,
-  logoutFunction: action("clicked-logout"),
-  sideMenuContent: /*#__PURE__*/_jsxs(StyledLink, {
-    href: "#",
-    children: [/*#__PURE__*/_jsx(Icon, {
-      icon: ["fas", "cog"],
-      mr: "s"
-    }), "Settings"]
-  }),
-  navToggleId: "defaultHeader",
-  children: [/*#__PURE__*/_jsx(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    active: true,
-    children: "Summary"
-  }), /*#__PURE__*/_jsx(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    children: "Find"
-  }), /*#__PURE__*/_jsx(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    children: "Visualisation"
   })]
+};
+const dummyLogo = /*#__PURE__*/_jsx("svg", {
+  width: "67",
+  height: "41",
+  viewBox: "0 0 67 41",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M45.0353 4.66312C45.8331 3.77669 46.7195 3.04539 47.6281 2.46921C49.2236 1.47198 50.9079 0.940125 52.6364 0.940125V15.411C51.3732 11.0232 48.6475 7.25591 45.0353 4.66312ZM66.5533 40.9401H15.2957C6.87461 40.9401 0.0712891 34.1146 0.0712891 25.7157C0.0712891 17.6714 6.3206 11.0675 14.232 10.5135V0.940125C16.0048 0.940125 17.7555 1.44982 19.3954 2.46921C20.304 3.02323 21.1904 3.75453 21.9882 4.59663C25.2458 2.31409 29.1904 0.984446 33.4674 0.984446C33.4674 10.2254 30.1433 20.9734 19.3289 20.9955H33.3566C32.9577 19.2005 31.3178 17.8709 29.3677 17.8487H37.5228C35.5727 17.8487 33.9328 19.2005 33.5339 21.0177H46.6087C49.2236 21.0177 51.8164 21.5274 54.2541 22.5468C56.6696 23.544 58.8857 25.0288 60.725 26.8681C62.5865 28.7296 64.0491 30.9235 65.0464 33.339C66.0436 35.7324 66.5533 38.3252 66.5533 40.9401ZM22.8525 10.7795C23.1849 11.6437 24.0713 12.6188 25.3123 13.3279C26.5533 14.0371 27.8386 14.3252 28.7472 14.1922C28.4148 13.3279 27.5284 12.3529 26.2874 11.6437C25.0464 10.9346 23.761 10.6465 22.8525 10.7795ZM41.5117 13.3279C40.2707 14.0371 38.9854 14.3252 38.0768 14.1922C38.4092 13.3279 39.2957 12.3529 40.5367 11.6437C41.7777 10.9346 43.063 10.6465 43.9716 10.7795C43.6613 11.6437 42.7527 12.6188 41.5117 13.3279Z",
+    fill: "#283841"
+  })
 });
-defaultHeader.storyName = "Default Header";
-export const headerWithSearch = () => /*#__PURE__*/_jsx(Header, {
-  variant: "search",
-  appName: "App Name",
-  userName: "Michael",
-  avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
-  logoutFunction: action("clicked-logout"),
-  searchComponent: /*#__PURE__*/_jsx(TextInput, {
-    fullWidth: true,
-    id: "search",
-    type: "text",
-    placeholder: "Search for...",
-    iconRight: ["fas", "search"]
-  }, "search"),
-  navToggleId: "headerWithSearch"
-});
-headerWithSearch.storyName = "Alternative Header with search";
-export const headerWithSearchAndLinks = () => /*#__PURE__*/_jsxs(Header, {
-  variant: "searchAndLinks",
-  appName: "App Name",
-  userName: "Michael",
-  avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
-  logoutFunction: action("clicked-logout"),
+const UserMenuContent = () => {
+  const [checked, setChecked] = React.useState(false);
+  const handleToggleChange = () => {
+    setChecked(!checked);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Small, {
+      fontWeight: "600",
+      fontSize: "0",
+      children: "Compact theme"
+    }), /*#__PURE__*/_jsx(Toggle, {
+      id: "compactTheme",
+      label: checked ? "On" : "Off",
+      small: true,
+      onChange: handleToggleChange
+    }), /*#__PURE__*/_jsx(Divider, {
+      light: true
+    }), /*#__PURE__*/_jsxs(Flex, {
+      alignItems: "center",
+      gap: "s",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "sign-out-alt"]
+      }), /*#__PURE__*/_jsx(Small, {
+        fontWeight: "600",
+        children: "Logout"
+      })]
+    })]
+  });
+};
+export const defaultHeader = () => /*#__PURE__*/_jsx(Header, {
+  appName: "Powercorp directory",
+  logo: dummyLogo,
+  userName: "Michael Jenkins (michael.jenkins@powercorp.com)",
+  avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
+  avatarAlt: "Avatar for Michael",
+  avatarInitials: "MJ",
+  currentWorkspace: "Org Design Workspace",
   searchComponent: /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "search",
@@ -78,109 +73,11 @@ export const headerWithSearchAndLinks = () => /*#__PURE__*/_jsxs(Header, {
     placeholder: "Search for...",
     iconRight: ["fas", "search"]
   }, "search"),
-  navToggleId: "headerWithSearchAndLinks",
-  children: [/*#__PURE__*/_jsx(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    children: "Summary"
-  }), /*#__PURE__*/_jsx(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    children: "Teams"
-  }), /*#__PURE__*/_jsx(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    children: "People"
-  }), /*#__PURE__*/_jsx(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    children: "Reports"
-  })]
+  userMenuContent: /*#__PURE__*/_jsx(UserMenuContent, {})
 });
-headerWithSearch.storyName = "Alternative Header with search";
-export const headerWithWorkspaceSwitching = () => {
-  const options = [{
-    label: "Workspace A"
-  }, {
-    label: "Workspace B"
-  }];
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [selected, setSelected] = useState([{
-    label: "Workspace A"
-  }]);
-  const onChange = value => {
-    setSelected(value);
-  };
-  const currentWorkspace = "Workspace A";
-  const select = /*#__PURE__*/_jsx(Select, {
-    id: "WorkspaceSelect",
-    "data-testid": "select-workspace-dropdown",
-    placeholder: "Select a workspace",
-    options: options,
-    value: selected,
-    onChange: onChange,
-    height: "30px",
-    padding: "0 8px",
-    inverted: true
-  });
-  const internalAppLinks = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(StyledLink, {
-      href: "#",
-      target: "_blank",
-      children: ["App 1 Name", /*#__PURE__*/_jsx(Small, {
-        children: "This is a description of other app in suite"
-      })]
-    }), /*#__PURE__*/_jsxs(StyledLink, {
-      href: "#",
-      target: "_blank",
-      children: ["App 2 Name", /*#__PURE__*/_jsx(Small, {
-        children: "This is a description of other app in suite"
-      })]
-    })]
-  });
-  const externalAppLinks = /*#__PURE__*/_jsxs(StyledLink, {
-    href: "#",
-    target: "_blank",
-    children: ["External App Name", /*#__PURE__*/_jsx(Small, {
-      children: "This is a description of external 3rd party app"
-    })]
-  });
-  return /*#__PURE__*/_jsx(Header, {
-    appName: `App Name`,
-    currentWorkspace: currentWorkspace,
-    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]`,
-    logoutFunction: action("clicked-logout"),
-    workspaceSwitcherContent: select,
-    navToggleId: "headerWithWorkspaceSwitching",
-    appSwitcher: true,
-    internalAppSwitcherContent: internalAppLinks,
-    externalAppSwitcherContent: externalAppLinks
-  });
-};
-headerWithWorkspaceSwitching.storyName = "Header with workspace switching";
+defaultHeader.storyName = "Default Header";
 defaultHeader.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "defaultHeader"
-};
-headerWithSearch.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "headerWithSearch"
-};
-headerWithSearchAndLinks.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "headerWithSearchAndLinks"
-};
-headerWithWorkspaceSwitching.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "headerWithWorkspaceSwitching"
 };

package/es/components/Header/Header.styles.js

@@ -0,0 +1,116 @@
+import styled from "styled-components";
+import { space, layout } from "styled-system";
+import css from "@styled-system/css";
+import { themeGet } from "@styled-system/theme-get";
+import Box from "../Box";
+export const Bar = styled("header").attrs(props => ({
+  "data-testid": props.dataTestId
+})).withConfig({
+  displayName: "Headerstyles__Bar",
+  componentId: "sc-xs8ba0-0"
+})(props => ({
+  height: themeGet("appScale.navBarSize")(props)
+}), css({
+  width: "100%",
+  zIndex: 12,
+  position: "sticky",
+  top: "0",
+  display: "flex",
+  alignItems: "center",
+  bg: "transparent",
+  gap: "r",
+  p: "r"
+}), space);
+export const AppName = styled("div").withConfig({
+  displayName: "Headerstyles__AppName",
+  componentId: "sc-xs8ba0-1"
+})(props => css({
+  background: themeGet("colors.white")(props),
+  width: "fit-content",
+  display: "flex",
+  alignItems: "center",
+  gap: ["0", "0", "0", "s"],
+  px: "s",
+  height: "38px",
+  borderRadius: themeGet("radii.2")(props),
+  border: `1px solid ${themeGet("colors.greyLight")(props)}`,
+  boxShadow: themeGet("shadows.boxDefault")(props),
+  fontSize: themeGet("fontSizes.1")(props),
+  fontWeight: themeGet("fontWeights.2")(props),
+  color: themeGet("colors.greyDarkest")(props),
+  img: {
+    height: "22px",
+    width: "auto"
+  },
+  svg: {
+    height: "22px",
+    width: "auto"
+  },
+  a: {
+    fontSize: themeGet("fontSizes.1")(props),
+    fontWeight: themeGet("fontWeights.2")(props),
+    color: themeGet("colors.greyDarkest")(props)
+  }
+}), space);
+export const SearchContainer = styled("div").withConfig({
+  displayName: "Headerstyles__SearchContainer",
+  componentId: "sc-xs8ba0-2"
+})(props => css({
+  maxWidth: "600px",
+  flex: "1 1 auto",
+  borderRadius: themeGet("radii.2")(props),
+  boxShadow: themeGet("shadows.boxDefault")(props)
+}), space, layout);
+export const UserMenuToggle = styled("button").withConfig({
+  displayName: "Headerstyles__UserMenuToggle",
+  componentId: "sc-xs8ba0-3"
+})(props => css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "xs",
+  padding: "0",
+  cursor: "pointer",
+  border: "none",
+  appearance: "none",
+  bg: "transparent",
+  color: themeGet("colors.greyDark")(props),
+  fontSize: themeGet("fontSizes.1")(props),
+  fontWeight: themeGet("fontWeights.2")(props),
+  "svg path": {
+    transition: "fill 300ms ease-in-out"
+  },
+  "&:focus, &:hover": {
+    outline: "none",
+    "svg path": {
+      fill: themeGet("colors.primary")(props)
+    }
+  }
+}));
+export const AvatarBorder = styled(Box).withConfig({
+  displayName: "Headerstyles__AvatarBorder",
+  componentId: "sc-xs8ba0-4"
+})(css({
+  background: "linear-gradient(0deg, rgba(155,81,224,1) 0%, rgba(0,145,234,1) 100%)"
+}));
+export const UserMenuContainer = styled(Box).withConfig({
+  displayName: "Headerstyles__UserMenuContainer",
+  componentId: "sc-xs8ba0-5"
+})(props => css({
+  borderRadius: `19px ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 19px`,
+  position: "relative"
+}));
+export const UserMenuContent = styled(Box).withConfig({
+  displayName: "Headerstyles__UserMenuContent",
+  componentId: "sc-xs8ba0-6"
+})(props => css({
+  position: "absolute",
+  gap: "s",
+  top: "calc(100% + 8px)",
+  right: "0",
+  zIndex: themeGet("zIndices.2")(props),
+  opacity: props.isOpen ? 1 : 0,
+  transform: props.isOpen ? "translateY(0)" : "translateY(-10px)",
+  pointerEvents: props.isOpen ? "all" : "none",
+  transition: "opacity 0.3s ease, transform 0.3s ease"
+}));