orcs-design-system 2.1.27 → 2.1.29

package/es/components/Popover/Popover.stories.js

@@ -10,7 +10,7 @@ export default {
   title: "Components/Popover",
   decorators: [function (storyFn) {
     return /*#__PURE__*/React.createElement(Box, {
-      p: "5"
+      p: "6"
     }, /*#__PURE__*/React.createElement(Flex, {
       justifyContent: "space-around"
     }, storyFn()));

package/es/components/Popover/index.js

@@ -26,7 +26,7 @@ var TooltipControl = styled.div.withConfig({
 var Text = styled.div.withConfig({
   displayName: "Popover__Text",
   componentId: "sc-1bwoak-2"
-})(["position:absolute;font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;left:100%;top:50%;color:", ";outline:0;padding:", " ", ";border-radius:", ";transform:translateX(10px) translateY(-50%);width:", ";background:", ";transition:all 300ms ease-in-out;opacity:0;z-index:-100;visibility:hidden;pointer-events:none;user-select:", ";&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";left:-10px;display:block;height:100%;top:0;position:absolute;z-index:-1;width:calc(100% + 10px);}", ";"], function (props) {
+})(["position:absolute;font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;left:100%;top:50%;color:", ";outline:0;padding:", " ", ";border-radius:", ";transform:translateX(10px) translateY(-50%);width:", ";background:", ";border:1px solid ", ";box-shadow:", ";transition:all 300ms ease-in-out;transition-delay:300ms;opacity:0;z-index:-100;visibility:hidden;pointer-events:none;user-select:", ";&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}", ";"], function (props) {
   return themeGet("fontSizes.0")(props);
 }, function (props) {
   return themeGet("fontSizes.1")(props);
@@ -35,7 +35,7 @@ var Text = styled.div.withConfig({
 }, function (props) {
   return props.textAlign ? props.textAlign : "left";
 }, function (props) {
-  return themeGet("colors.white")(props);
+  return themeGet("colors.greyDarkest")(props);
 }, function (props) {
   return themeGet("space.3")(props);
 }, function (props) {
@@ -45,14 +45,20 @@ var Text = styled.div.withConfig({
 }, function (props) {
   return props.width ? props.width : "200px";
 }, function (props) {
-  return themeGet("colors.greyDarkest")(props);
+  return themeGet("colors.white")(props);
+}, function (props) {
+  return themeGet("colors.greyLight")(props);
+}, function (props) {
+  return themeGet("shadows.boxDefault")(props);
 }, function (props) {
   return props.enableSelectAll ? "all" : "auto";
 }, function (props) {
-  return themeGet("colors.greyDarkest")(props);
+  return themeGet("colors.white")(props);
+}, function (props) {
+  return themeGet("colors.grey")(props);
 }, function (_ref) {
   var direction = _ref.direction;
-  return direction === "top" ? css(["left:50%;top:auto;bottom:100%;transform:translateX(-50%) translateY(-10px);&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:0;top:0;width:100%;height:calc(100% + 10px);}"]) : direction === "topRight" ? css(["left:100%;top:auto;bottom:100%;transform:translateX(5px) translateY(-5px);&:before{left:0;top:auto;margin-top:0;bottom:-5px;margin-left:-5px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:-10px;top:0;width:40px;height:calc(100% + 10px);}"]) : direction === "right" ? css([""]) : direction === "bottomRight" ? css(["left:100%;top:100%;bottom:auto;transform:translateX(5px) translateY(5px);&:before{left:0;bottom:auto;margin-top:0;top:-5px;margin-left:-5px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:-10px;top:-10px;width:40px;height:calc(100% + 10px);}"]) : direction === "bottom" ? css(["left:50%;top:100%;transform:translateX(-50%) translateY(10px);&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:0;top:auto;bottom:0;width:100%;height:calc(100% + 10px);}"]) : direction === "bottomLeft" ? css(["right:100%;left:auto;top:100%;bottom:auto;transform:translateX(-5px) translateY(5px);&:before{right:0;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-5px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{left:auto;right:-10px;top:-10px;width:40px;height:calc(100% + 10px);}"]) : direction === "left" ? css(["left:auto;right:100%;transform:translateX(-10px) translateY(-50%);&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-10px;}"]) : direction === "topLeft" ? css(["right:100%;left:auto;top:auto;bottom:100%;transform:translateX(-5px) translateY(-5px);&:before{right:0;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-5px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{left:auto;right:-10px;top:0;width:40px;height:calc(100% + 10px);}"]) : css([""]);
+  return direction === "top" ? css(["left:50%;top:auto;bottom:100%;transform:translateX(-50%) translateY(-10px);&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}"]) : direction === "topRight" ? css(["left:100%;top:auto;bottom:100%;transform:translateX(5px) translateY(-5px);&:before{left:0;top:auto;margin-top:0;bottom:-5px;margin-left:-5px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:0;top:auto;margin-top:0;bottom:-6px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}"]) : direction === "right" ? css([""]) : direction === "bottomRight" ? css(["left:100%;top:100%;bottom:auto;transform:translateX(5px) translateY(5px);&:before{left:0;bottom:auto;margin-top:0;top:-5px;margin-left:-5px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:0;bottom:auto;margin-top:0;top:-6px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}"]) : direction === "bottom" ? css(["left:50%;top:100%;transform:translateX(-50%) translateY(10px);&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}"]) : direction === "bottomLeft" ? css(["right:100%;left:auto;top:100%;bottom:auto;transform:translateX(-5px) translateY(5px);&:before{right:0;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-5px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:0;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}"]) : direction === "left" ? css(["left:auto;right:100%;transform:translateX(-10px) translateY(-50%);&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}"]) : direction === "topLeft" ? css(["right:100%;left:auto;top:auto;bottom:100%;transform:translateX(-5px) translateY(-5px);&:before{right:0;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-5px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:0;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}"]) : css([""]);
 });
 /**
  * This popover component is intended to be used to supplement buttons (or other elements) that require some helper text. It supports customisation of direction and width. This is so that you can ensure that the popover doesn't run off the screen, and that the width suits the amount of text in the popover.

package/es/components/SideNav/SideNav.stories.js

@@ -42,6 +42,13 @@ var BrowseTeams = function BrowseTeams() {
   }, "Browse teams"), /*#__PURE__*/React.createElement(P, null, "Browse teams content"));
 };
 
+var Calendar = function Calendar() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(H5, {
+    fontWeight: "bold",
+    mb: "r"
+  }, "Calendar"), /*#__PURE__*/React.createElement(P, null, "Calendar content"));
+};
+
 var items = [{
   iconName: "user",
   name: "My profile",
@@ -64,6 +71,14 @@ var items = [{
   component: BrowseTeams,
   actionType: "component" // Use 'component' for a component
 
+}, {
+  iconName: "calendar-alt",
+  name: "Calendar",
+  pageSpecific: true,
+  // Specify pageSpecific if you want this item to appear below a divider line separating common nav items from page/route specific items
+  component: Calendar,
+  actionType: "component" // Use 'component' for a component
+
 }, {
   iconName: "times-circle",
   name: "Logout",

package/es/components/SideNav/index.js

@@ -13,8 +13,7 @@ import { themeGet } from "@styled-system/theme-get";
 import PropTypes from "prop-types";
 import Icon from "../Icon";
 import Popover from "../Popover";
-import Flex from "../Flex";
-import { H5 } from "../Typography";
+import Divider from "../Divider";
 var SideNavWrapper = styled("div").withConfig({
   displayName: "SideNav__SideNavWrapper",
   componentId: "sc-1heo0i9-0"
@@ -67,12 +66,7 @@ var SideNavItems = styled("div").withConfig({
       flexDirection: "row",
       minHeight: "initial",
       minWidth: "initial",
-      justifyContent: "space-around",
-      "&:hover, &:focus": {
-        "& .sideNavItemName": {
-          display: "none"
-        }
-      }
+      justifyContent: "space-around"
     }
   });
 });
@@ -83,10 +77,21 @@ var PanelControlTooltip = styled(Popover).withConfig({
   return css({
     alignSelf: props.showItemNames ? "flex-end" : "center",
     position: props.hideExpandedControl ? "absolute" : "relative",
-    right: props.hideExpandedControl ? "0" : "initial",
-    display: props.hideExpandedControl ? "block" : "flex",
+    right: props.hideExpandedControl ? "r" : "initial",
+    display: props.hideExpandedControl ? "block" : "none !important",
+    borderTop: props.hideExpandedControl ? "none" : "solid 1px",
+    borderTopColor: themeGet("colors.greyLighter")(props),
+    paddingTop: props.hideExpandedControl ? "0" : "r",
+    width: props.hideExpandedControl ? "auto" : "100%",
+    justifyContent: props.showItemNames ? "flex-end" : "center",
     "&:focus": {
       outline: "0"
+    },
+    "@media screen and (max-width: 900px)": {
+      border: "none"
+    },
+    "& .popoverText": {
+      marginTop: props.hideExpandedControl ? "0" : "s"
     }
   });
 });
@@ -101,20 +106,62 @@ var PanelControl = styled("button").withConfig({
     background: themeGet("colors.greyLighter")(props),
     color: themeGet("colors.greyDarker")(props),
     fontSize: "1.2rem",
+    display: "flex",
     alignItems: "center",
     justifyContent: "center",
     cursor: "pointer",
     border: "none"
   });
 });
+var SideNavItemPopover = styled(Popover).withConfig({
+  displayName: "SideNav__SideNavItemPopover",
+  componentId: "sc-1heo0i9-4"
+})(function (props) {
+  return css({
+    width: "100%",
+    marginBottom: props.bottomAligned ? "0" : "s",
+    marginTop: props.bottomAligned ? "s" : "0",
+    "&:hover,&:focus-within": {
+      "& .popoverText": {
+        opacity: props.showItemNames ? "0" : "1",
+        zIndex: props.showItemNames ? "-100" : "100",
+        visibility: props.showItemNames ? "hidden" : "visible",
+        pointerEvents: props.showItemNames ? "none" : "auto",
+        display: props.showItemNames ? "none" : "initial"
+      }
+    },
+    "&:focus-within": {
+      "& .popoverText": {
+        opacity: props.active ? "0" : "1",
+        zIndex: props.active ? "-100" : "100",
+        visibility: props.active ? "hidden" : "visible",
+        pointerEvents: props.active ? "none" : "auto",
+        display: props.active ? "none" : "initial"
+      }
+    },
+    "@media screen and (max-width: 900px)": {
+      width: "auto",
+      marginBottom: "0",
+      marginTop: "0",
+      "&:hover,&:focus-within": {
+        "& .popoverText": {
+          opacity: "0",
+          zIndex: "-100",
+          visibility: "hidden",
+          pointerEvents: "none",
+          display: "none"
+        }
+      }
+    }
+  });
+});
 var SideNavItem = styled("button").attrs(function (props) {
   return {
-    className: props.badge ? "Sidebar__Badge" : "",
-    marginTop: props.bottomAligned ? "auto" : "0"
+    className: props.badge ? "Sidebar__Badge" : ""
   };
 }).withConfig({
   displayName: "SideNav__SideNavItem",
-  componentId: "sc-1heo0i9-4"
+  componentId: "sc-1heo0i9-5"
 })(function (props) {
   return css({
     fontFamily: themeGet("fonts.main")(props),
@@ -129,8 +176,6 @@ var SideNavItem = styled("button").attrs(function (props) {
     cursor: "pointer",
     border: "none",
     padding: "s",
-    marginBottom: props.bottomAligned ? "0" : "s",
-    marginTop: props.bottomAligned ? "s" : "0",
     fontSize: "1.4rem",
     fontWeight: themeGet("fontWeights.1")(props),
     color: themeGet("colors.greyDarker")(props),
@@ -149,9 +194,7 @@ var SideNavItem = styled("button").attrs(function (props) {
       }
     },
     "@media screen and (max-width: 900px)": {
-      width: "auto",
-      marginBottom: "0",
-      marginTop: "0"
+      width: "auto"
     }
   });
 }, function (props) {
@@ -175,19 +218,16 @@ var SideNavItem = styled("button").attrs(function (props) {
 });
 var SideNavItemLink = styled("div").attrs(function (props) {
   return {
-    className: props.badge ? "Sidebar__Badge" : "",
-    marginTop: props.bottomAligned ? "auto" : "0"
+    className: props.badge ? "Sidebar__Badge" : ""
   };
 }).withConfig({
   displayName: "SideNav__SideNavItemLink",
-  componentId: "sc-1heo0i9-5"
+  componentId: "sc-1heo0i9-6"
 })(function (props) {
   return css({
     cursor: "pointer",
     padding: "s",
     textDecoration: "none",
-    marginBottom: props.bottomAligned ? "0" : "s",
-    marginTop: props.bottomAligned ? "s" : "0",
     borderRadius: themeGet("radii.2")(props),
     width: "100%",
     path: {
@@ -203,9 +243,7 @@ var SideNavItemLink = styled("div").attrs(function (props) {
       }
     },
     "@media screen and (max-width: 900px)": {
-      width: "auto",
-      marginBottom: "0",
-      marginTop: "0"
+      width: "auto"
     },
     "& > a": {
       fontFamily: themeGet("fonts.main")(props),
@@ -252,7 +290,7 @@ var SideNavItemLink = styled("div").attrs(function (props) {
 });
 var BottomAlignedNavItems = styled("div").withConfig({
   displayName: "SideNav__BottomAlignedNavItems",
-  componentId: "sc-1heo0i9-6"
+  componentId: "sc-1heo0i9-7"
 })(function () {
   return css({
     marginTop: "auto",
@@ -268,7 +306,7 @@ var BottomAlignedNavItems = styled("div").withConfig({
 });
 var BadgeNumber = styled("div").withConfig({
   displayName: "SideNav__BadgeNumber",
-  componentId: "sc-1heo0i9-7"
+  componentId: "sc-1heo0i9-8"
 })(function (props) {
   return css({
     position: "absolute",
@@ -288,7 +326,7 @@ var BadgeNumber = styled("div").withConfig({
 });
 var SideNavItemName = styled("div").withConfig({
   displayName: "SideNav__SideNavItemName",
-  componentId: "sc-1heo0i9-8"
+  componentId: "sc-1heo0i9-9"
 })(function (props) {
   return css({
     lineHeight: "0",
@@ -304,7 +342,7 @@ var SideNavItemName = styled("div").withConfig({
 });
 var SideNavExpanded = styled("div").withConfig({
   displayName: "SideNav__SideNavExpanded",
-  componentId: "sc-1heo0i9-9"
+  componentId: "sc-1heo0i9-10"
 })(function (props) {
   return css({
     position: "relative",
@@ -340,7 +378,14 @@ var NavItem = function NavItem(_ref) {
     "aria-label": item.name
   });
 
-  return item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemLink, {
+  return item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemPopover, {
+    text: item.name,
+    textAlign: "center",
+    width: "100px",
+    active: item.index === activeItem,
+    bottomAligned: item.bottomAligned,
+    showItemNames: showItemNames
+  }, /*#__PURE__*/React.createElement(SideNavItemLink, {
     key: item.index,
     active: item.index === activeItem,
     bottomAligned: item.bottomAligned
@@ -350,7 +395,14 @@ var NavItem = function NavItem(_ref) {
     icon: ["far", item.iconName]
   }), showItemNames && /*#__PURE__*/React.createElement(SideNavItemName, {
     className: "sideNavItemName"
-  }, item.name))) : /*#__PURE__*/React.createElement(SideNavItem, _extends({
+  }, item.name)))) : /*#__PURE__*/React.createElement(SideNavItemPopover, {
+    text: item.name,
+    textAlign: "center",
+    width: "100px",
+    active: item.index === activeItem,
+    bottomAligned: item.bottomAligned,
+    showItemNames: showItemNames
+  }, /*#__PURE__*/React.createElement(SideNavItem, _extends({
     key: item.index,
     active: item.index === activeItem,
     onClick: function onClick() {
@@ -361,7 +413,7 @@ var NavItem = function NavItem(_ref) {
     icon: ["far", item.iconName]
   }), showItemNames && /*#__PURE__*/React.createElement(SideNavItemName, {
     className: "sideNavItemName"
-  }, item.name));
+  }, item.name)));
 };
 
 var SideNav = function SideNav(_ref2) {
@@ -395,7 +447,10 @@ var SideNav = function SideNav(_ref2) {
     });
   });
   var topAlignedItems = allItems.filter(function (item) {
-    return !item.bottomAligned;
+    return !item.bottomAligned && !item.pageSpecific;
+  });
+  var pageSpecificItems = allItems.filter(function (item) {
+    return !item.bottomAligned && item.pageSpecific;
   });
   var bottomAlignedItems = allItems.filter(function (item) {
     return item.bottomAligned;
@@ -438,28 +493,7 @@ var SideNav = function SideNav(_ref2) {
     });
   };
 
-  return /*#__PURE__*/React.createElement(SideNavWrapper, null, /*#__PURE__*/React.createElement(SideNavItems, null, /*#__PURE__*/React.createElement(Flex, {
-    width: "100%",
-    alignItems: "center",
-    mb: "s",
-    justifyContent: showItemNames === true ? "space-between" : "center"
-  }, showItemNames === true && /*#__PURE__*/React.createElement(H5, {
-    fontWeight: "bold",
-    fontSize: "1.4rem",
-    color: "greyDarker"
-  }, "Navigation"), /*#__PURE__*/React.createElement(PanelControlTooltip, {
-    width: "178px",
-    textAlign: "center",
-    showItemNames: showItemNames,
-    text: showItemNames === true ? "Hide navigation item names" : "Show navigation item names"
-  }, /*#__PURE__*/React.createElement(PanelControl, {
-    onClick: toggleItemNames,
-    "aria-label": "toggle navigation item names"
-  }, showItemNames === true ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-left"]
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-right"]
-  })))), topAlignedItems.map(function (item) {
+  return /*#__PURE__*/React.createElement(SideNavWrapper, null, /*#__PURE__*/React.createElement(SideNavItems, null, topAlignedItems.map(function (item) {
     var Component = item.component;
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
@@ -469,8 +503,14 @@ var SideNav = function SideNav(_ref2) {
       activeItem: activeItem,
       handleItemClick: handleItemClick
     });
-  }), bottomAlignedItems.length > 0 && ( // Render the special-container only if there are bottom-aligned items
-  isGreaterThan900 ? /*#__PURE__*/React.createElement(BottomAlignedNavItems, null, bottomAlignedItems.map(function (item) {
+  }), pageSpecificItems.length > 0 &&
+  /*#__PURE__*/
+  // Render the special-container only if there are bottom-aligned items
+  React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    light: true,
+    mt: "s",
+    mb: "r"
+  }), pageSpecificItems.map(function (item) {
     var Component = item.component;
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
@@ -480,7 +520,31 @@ var SideNav = function SideNav(_ref2) {
       activeItem: activeItem,
       handleItemClick: handleItemClick
     });
-  })) : bottomAlignedItems.map(function (item) {
+  })), bottomAlignedItems.length > 0 && ( // Render the special-container only if there are bottom-aligned items
+  isGreaterThan900 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomAlignedNavItems, null, bottomAlignedItems.map(function (item) {
+    var Component = item.component;
+    return /*#__PURE__*/React.createElement(NavItem, {
+      key: item.index,
+      item: item,
+      Component: Component,
+      showItemNames: showItemNames,
+      activeItem: activeItem,
+      handleItemClick: handleItemClick
+    });
+  })), /*#__PURE__*/React.createElement(PanelControlTooltip, {
+    width: "180px",
+    textAlign: "center",
+    mt: "r",
+    showItemNames: showItemNames,
+    text: showItemNames === true ? "Hide navigation item names" : "Show navigation item names"
+  }, /*#__PURE__*/React.createElement(PanelControl, {
+    onClick: toggleItemNames,
+    "aria-label": "toggle navigation item names"
+  }, showItemNames === true ? /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "chevron-left"]
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "chevron-right"]
+  })))) : bottomAlignedItems.map(function (item) {
     var Component = item.component;
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
@@ -494,10 +558,9 @@ var SideNav = function SideNav(_ref2) {
     active: expandedItem === activeItem,
     large: allItems[expandedItem] && allItems[expandedItem].large
   }, /*#__PURE__*/React.createElement(PanelControlTooltip, {
-    width: "78px",
+    width: "80px",
     textAlign: "center",
     hideExpandedControl: true,
-    mr: "r",
     direction: "left",
     text: "Hide panel"
   }, /*#__PURE__*/React.createElement(PanelControl, {
@@ -505,8 +568,10 @@ var SideNav = function SideNav(_ref2) {
       return handleItemClick(allItems[expandedItem].index, allItems[expandedItem].actionType, allItems[expandedItem].onClick);
     },
     "aria-label": "toggle panel"
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, isGreaterThan900 === true ? /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "chevron-left"]
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "chevron-down"]
   }))), allItems[expandedItem].component()) : null);
 };
 

package/es/systemThemeCollapsed.js

@@ -196,7 +196,7 @@ export var colors = {
   danger90: rgba(danger, 0.9)
 }; // BORDERS
 
-export var radii = [0, "2px", "6px"];
+export var radii = [0, "3px", "6px"];
 export var borderWidths = [0, "1px", "2px", "3px"]; // SHADOWS
 
 export var shadows = {

package/es/systemtheme.js

@@ -195,7 +195,7 @@ export var colors = {
   danger90: rgba(danger, 0.9)
 }; // BORDERS
 
-export var radii = [0, "2px", "6px"];
+export var radii = [0, "3px", "6px"];
 export var borderWidths = [0, "1px", "2px", "3px"]; // SHADOWS
 
 export var shadows = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.1.27",
+  "version": "2.1.29",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",