orcs-design-system 3.1.17 → 3.1.19

package/es/components/ActionsMenu/index.js

@@ -135,7 +135,8 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     menuWidth = _ref.menuWidth,
     customTriggerComponent = _ref.customTriggerComponent,
     children = _ref.children,
-    ariaLabel = _ref.ariaLabel,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "Options Menu" : _ref$ariaLabel,
     props = _objectWithoutProperties(_ref, _excluded2);
   var _useState = useState({
       menuLeftPosition: menuLeftPosition,
@@ -363,6 +364,17 @@ ActionsMenuBody.__docgenInfo = {
   "methods": [],
   "displayName": "ActionsMenuBody",
   "props": {
+    "ariaLabel": {
+      "defaultValue": {
+        "value": "\"Options Menu\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "onToggle": {
       "description": "",
       "type": {
@@ -440,13 +452,6 @@ ActionsMenuBody.__docgenInfo = {
         "name": "object"
       },
       "required": false
-    },
-    "ariaLabel": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
     }
   }
 };

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

@@ -14,7 +14,7 @@ export var defaultAvatar = function defaultAvatar() {
     title: "Ayden Lundgre",
     initials: "AL",
     subtitle: "Senior Business Analyst",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
   });
 };
 defaultAvatar.storyName = "Default";
@@ -37,7 +37,7 @@ export var imageOnly = function imageOnly() {
   return /*#__PURE__*/React.createElement(Spacer, {
     my: 4
   }, /*#__PURE__*/React.createElement(Avatar, {
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Ayden Lundgre"
   }));
 };
@@ -58,7 +58,7 @@ export var nameLink = function nameLink() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Ayden Lundgre"
   });
 };
@@ -76,7 +76,7 @@ export var small = function small() {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
   }), /*#__PURE__*/React.createElement(Avatar, {
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -85,7 +85,7 @@ export var small = function small() {
     subtitle: "Senior Business Analyst",
     imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
   }));
 };
 small.storyName = "Small";
@@ -103,7 +103,7 @@ export var large = function large() {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
   }), /*#__PURE__*/React.createElement(Avatar, {
     sizing: "large",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -112,7 +112,7 @@ export var large = function large() {
     subtitle: "Senior Business Analyst",
     imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
   }));
 };
 large.storyName = "Large";
@@ -138,7 +138,7 @@ export var subtitleContent = function subtitleContent() {
     }, "Ayden Lundgre"),
     imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
       mt: "xs"
     }, "Senior Business Analyst")
@@ -148,7 +148,7 @@ export var subtitleContent = function subtitleContent() {
       href: "#"
     }, "Ayden Lundgre"),
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Avatar for Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Flex, {
       flexWrap: "wrap"
@@ -170,7 +170,7 @@ export var localTime = function localTime() {
       href: "#"
     }, "Ayden Lundgre"),
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Avatar for Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
       mt: "xs"
@@ -190,7 +190,7 @@ export var inverted = function inverted() {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
   }), /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -198,7 +198,7 @@ export var inverted = function inverted() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Avatar for Ayden Lundgre"
   }), /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
@@ -216,7 +216,7 @@ export var inverted = function inverted() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
+    image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
     imageAlt: "Avatar for Ayden Lundgre"
   })));
 };

package/es/components/Button/Button.stories.js

@@ -111,18 +111,21 @@ export var iconOnly = function iconOnly() {
   }, /*#__PURE__*/React.createElement(Button, {
     small: true,
     iconOnly: true,
-    p: "s"
+    p: "s",
+    "aria-label": "Show calendar"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["far", "calendar-alt"]
   })), /*#__PURE__*/React.createElement(Button, {
     iconOnly: true,
-    p: "s"
+    p: "s",
+    "aria-label": "Show calendar"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["far", "calendar-alt"]
   })), /*#__PURE__*/React.createElement(Button, {
     large: true,
     iconOnly: true,
-    p: "s"
+    p: "s",
+    "aria-label": "Show calendar"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["far", "calendar-alt"]
   })), /*#__PURE__*/React.createElement(Flex, {
@@ -135,7 +138,8 @@ export var iconOnly = function iconOnly() {
     variant: "success",
     onClick: action("clicked"),
     width: "33px",
-    height: "32px"
+    height: "32px",
+    "aria-label": "Confirm"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "check"]
   })), /*#__PURE__*/React.createElement(Button, {
@@ -143,7 +147,8 @@ export var iconOnly = function iconOnly() {
     variant: "successAlternate",
     onClick: action("clicked"),
     width: "33px",
-    height: "32px"
+    height: "32px",
+    "aria-label": "Confirm"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "check"]
   })), /*#__PURE__*/React.createElement(Button, {
@@ -151,7 +156,8 @@ export var iconOnly = function iconOnly() {
     variant: "danger",
     onClick: action("clicked"),
     width: "33px",
-    height: "32px"
+    height: "32px",
+    "aria-label": "Cancel"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"]
   })), /*#__PURE__*/React.createElement(Button, {
@@ -159,7 +165,8 @@ export var iconOnly = function iconOnly() {
     variant: "dangerAlternate",
     onClick: action("clicked"),
     width: "33px",
-    height: "32px"
+    height: "32px",
+    "aria-label": "Cancel"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"]
   })))));

package/es/components/HeaderSimple/HeaderSimple.stories.js

@@ -9,7 +9,8 @@ export var defaultHeader = function defaultHeader() {
   return /*#__PURE__*/React.createElement(HeaderSimple, {
     appName: "App Name",
     userName: "Michael",
-    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85368bfb13dac1205e_harry.png",
+    avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
+    avatarAlt: "Avatar for Michael",
     currentWorskapce: "Org Design Workspace"
   });
 };
@@ -19,7 +20,8 @@ export var headerWithSearch = function headerWithSearch() {
     variant: "search",
     appName: "App Name",
     userName: "Michael",
-    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85368bfb13dac1205e_harry.png",
+    avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
+    avatarAlt: "Avatar for Michael",
     currentWorskapce: "Org Design Workspace",
     searchComponent: /*#__PURE__*/React.createElement(TextInput, {
       fullWidth: true,

package/es/components/HeaderSimple/index.js

@@ -86,6 +86,7 @@ var HeaderSimple = function HeaderSimple(_ref) {
   var appName = _ref.appName,
     userName = _ref.userName,
     avatarSource = _ref.avatarSource,
+    avatarAlt = _ref.avatarAlt,
     searchComponent = _ref.searchComponent,
     dataTestId = _ref.dataTestId,
     variant = _ref.variant,
@@ -113,7 +114,8 @@ var HeaderSimple = function HeaderSimple(_ref) {
     type: "inverted",
     sizing: "small",
     title: userName,
-    image: avatarSource
+    image: avatarSource,
+    imageAlt: avatarAlt
   })));
 };
 HeaderSimple.propTypes = {
@@ -127,6 +129,8 @@ HeaderSimple.propTypes = {
   userName: PropTypes.node,
   /** Source path for avatar image. */
   avatarSource: PropTypes.node,
+  /** Alt text for avatar image. */
+  avatarAlt: PropTypes.string,
   /** Can specify a component to be used for searching */
   searchComponent: PropTypes.node,
   /** Applies the chosen theme to the entire header. */
@@ -178,6 +182,13 @@ HeaderSimple.__docgenInfo = {
       },
       "required": false
     },
+    "avatarAlt": {
+      "description": "Alt text for avatar image.",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "searchComponent": {
       "description": "Can specify a component to be used for searching",
       "type": {

package/es/components/Popover/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "direction", "width", "textAlign", "text", "inlineBlock", "theme", "variant", "enableSelectAll", "tabIndex"];
-import React, { useId, useMemo, useState } from "react";
+import React, { useId, useState } from "react";
 import PropTypes from "prop-types";
 import styled, { css, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
@@ -10,14 +10,13 @@ import { keys } from "lodash";
 import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
 import { useKeepInView, directions } from "../../hooks/keepInView";
-import useIsVisible from "../../hooks/isVisible";
 var Container = styled.div.withConfig({
   displayName: "Popover__Container",
   componentId: "sc-1bwoak-0"
 })(["", " ", " display:", ";position:relative;&:hover,&:focus-within{.popoverText{opacity:1;z-index:100;visibility:visible;pointer-events:auto;}}"], space, layout, function (props) {
   return props.inlineBlock ? "inline-block !important" : "block !important";
 });
-var TooltipControl = styled.button.withConfig({
+var TooltipControl = styled.div.withConfig({
   displayName: "Popover__TooltipControl",
   componentId: "sc-1bwoak-1"
 })(["border:none;background:none;padding:0;cursor:help;font-size:1em;transition:", ";&:hover,&:focus{outline:0;color:", ";}"], function (props) {
@@ -87,10 +86,6 @@ export default function Popover(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     inViewDirection = _useState2[0],
     setInViewDirection = _useState2[1];
-  var _useIsVisible = useIsVisible(),
-    _useIsVisible2 = _slicedToArray(_useIsVisible, 2),
-    isActive = _useIsVisible2[0],
-    tooltip = _useIsVisible2[1];
   var toolTipId = useId();
   var _useKeepInView = useKeepInView({
       direction: direction,
@@ -99,13 +94,6 @@ export default function Popover(_ref2) {
     _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
     ref = _useKeepInView2[0],
     setIsShown = _useKeepInView2[1];
-  var ariaLabel = useMemo(function () {
-    if (props.ariaLabel) {
-      return props.ariaLabel;
-    } else if (typeof text === "string") {
-      return text;
-    }
-  }, [props.ariaLabel, text]);
   var component = /*#__PURE__*/React.createElement(Container, _extends({
     inlineBlock: inlineBlock
   }, props, {
@@ -114,28 +102,23 @@ export default function Popover(_ref2) {
     },
     onMouseLeave: function onMouseLeave() {
       return setIsShown(false);
-    }
-  }), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
-    tabIndex: tabIndex,
-    "aria-label": ariaLabel,
-    "aria-expanded": "".concat(isActive),
+    },
     "aria-describedby": toolTipId
+  }), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
+    tabIndex: tabIndex
   }, /*#__PURE__*/React.createElement(Icon, {
     transform: "grow-4",
     icon: ["fas", "question-circle"]
   })), !!text && /*#__PURE__*/React.createElement(Text, {
     ref: ref,
-    role: "list",
+    role: "tooltip",
     className: "popoverText",
     textAlign: textAlign,
     direction: inViewDirection,
     width: width,
-    enableSelectAll: enableSelectAll
-  }, /*#__PURE__*/React.createElement("span", {
-    id: toolTipId,
-    role: "listitem",
-    ref: tooltip
-  }, text)), children);
+    enableSelectAll: enableSelectAll,
+    id: toolTipId
+  }, text), children);
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;

package/es/components/Select/Select.stories.js

@@ -100,11 +100,13 @@ export var SpecificHeightSelect = function SpecificHeightSelect() {
   }, /*#__PURE__*/React.createElement(Select, {
     height: "30px",
     padding: "0 8px",
-    options: options
+    options: options,
+    "aria-label": "Select label"
   }), /*#__PURE__*/React.createElement(Select, {
     height: "56px",
     padding: "4px 12px",
-    options: options
+    options: options,
+    "aria-label": "Select label"
   })));
 };
 defaultSelect.story = {
@@ -113,7 +115,8 @@ defaultSelect.story = {
 export var multiSelect = function multiSelect() {
   return /*#__PURE__*/React.createElement(Select, {
     options: options,
-    isMulti: true
+    isMulti: true,
+    "aria-label": "Select label"
   });
 };
 multiSelect.story = {
@@ -159,7 +162,8 @@ export var multiSelectWithFixedOptions = function multiSelectWithFixedOptions()
     value: selected,
     isMulti: true,
     isClearable: false,
-    onChange: onChange
+    onChange: onChange,
+    "aria-label": "Select label"
   });
 };
 multiSelectWithFixedOptions.story = {
@@ -175,11 +179,13 @@ export var invertedSelect = function invertedSelect() {
     mb: "l"
   }, /*#__PURE__*/React.createElement(Select, {
     options: options,
-    inverted: true
+    inverted: true,
+    "aria-label": "Select label"
   }), /*#__PURE__*/React.createElement(Select, {
     options: options,
     inverted: true,
-    isMulti: true
+    isMulti: true,
+    "aria-label": "Select label"
   })));
 };
 invertedSelect.story = {
@@ -188,7 +194,8 @@ invertedSelect.story = {
 export var withDataIdSelect = function withDataIdSelect() {
   return /*#__PURE__*/React.createElement(Select, {
     options: options,
-    "data-testid": "test-this-component"
+    "data-testid": "test-this-component",
+    "aria-label": "Select label"
   });
 };
 withDataIdSelect.story = {
@@ -197,7 +204,8 @@ withDataIdSelect.story = {
 export var withSelectedValueSelect = function withSelectedValueSelect() {
   return /*#__PURE__*/React.createElement(Select, {
     options: options,
-    defaultValue: getOptionByValue(options, "chocolate")
+    defaultValue: getOptionByValue(options, "chocolate"),
+    "aria-label": "Select label"
   });
 };
 withSelectedValueSelect.storyName = "With Selected Value";
@@ -205,7 +213,8 @@ export var withCreatableSelect = function withCreatableSelect() {
   return /*#__PURE__*/React.createElement(Select, {
     options: options,
     selectType: "creatable",
-    isMulti: true
+    isMulti: true,
+    "aria-label": "Select label"
   });
 };
 withCreatableSelect.storyName = "With Creatable";
@@ -213,7 +222,8 @@ export var withAsyncSelect = function withAsyncSelect() {
   return /*#__PURE__*/React.createElement(Select, {
     defaultOptions: options,
     selectType: "async",
-    isMulti: true
+    isMulti: true,
+    "aria-label": "Select label"
   });
 };
 withAsyncSelect.storyName = "With Async";
@@ -221,7 +231,8 @@ export var withGroupedOptions = function withGroupedOptions() {
   return /*#__PURE__*/React.createElement(Select, {
     options: groupedOptions,
     isMulti: true,
-    menuIsOpen: true
+    menuIsOpen: true,
+    "aria-label": "Select label"
   });
 };
 withGroupedOptions.storyName = "With Grouped Options";

package/es/components/Select/index.js

@@ -251,7 +251,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         fontSize: themeGet("fontSizes.0")({
           theme: theme
         }),
-        color: themeGet("colors.grey")({
+        color: themeGet("colors.greyDark")({
           theme: theme
         })
       });

package/es/components/Tag/Tag.stories.js

@@ -213,7 +213,7 @@ export var personTag = function personTag() {
   }, /*#__PURE__*/React.createElement(Tag, {
     disabled: true,
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     disabled: true,
@@ -225,7 +225,7 @@ export var personTag = function personTag() {
     personEntity: true
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     personEntity: {
@@ -236,7 +236,7 @@ export var personTag = function personTag() {
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     selected: true,
@@ -250,7 +250,7 @@ export var personTag = function personTag() {
     selected: true,
     highlighted: true,
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     selected: true,
@@ -271,7 +271,7 @@ export var personTagSmall = function personTagSmall() {
     small: true,
     disabled: true,
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     small: true,
@@ -286,7 +286,7 @@ export var personTagSmall = function personTagSmall() {
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     small: true,
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     small: true,
@@ -300,7 +300,7 @@ export var personTagSmall = function personTagSmall() {
     small: true,
     selected: true,
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     small: true,
@@ -317,7 +317,7 @@ export var personTagSmall = function personTagSmall() {
     selected: true,
     highlighted: true,
     personEntity: {
-      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+      avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
     }
   }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
     small: true,

package/es/components/TextInput/TextInput.stories.js

@@ -100,7 +100,6 @@ export var withIcons = function withIcons() {
     label: "Phone number",
     placeholder: "E.g. (03) 9451 1786",
     iconLeft: ["fas", "phone"],
-    "aria-hidden-by": "test",
     "data-testid": "test-id"
   }), /*#__PURE__*/React.createElement(TextInput, {
     id: "textInput10",

package/es/components/TreeNav/index.js

@@ -1,46 +1,51 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["data"];
+/* eslint-disable */
 import React from "react";
 import styled from "styled-components";
 import { css } from "@styled-system/css";
 import PropTypes from "prop-types";
 import { themeGet } from "@styled-system/theme-get";
 import Icon from "../Icon";
-import Flex from "../Flex";
 import Badge from "../Badge";
 import Checkbox from "../Checkbox";
 import { Small } from "../Typography";
 import { Tree } from "react-arborist";
-var TreeItemWrapper = styled("div").withConfig({
+var TreeItemWrapper = styled("button").withConfig({
   displayName: "TreeNav__TreeItemWrapper",
   componentId: "sc-13iwmeo-0"
 })(function (props) {
   return css({
+    appearance: "none",
+    border: "none",
+    fontFamily: "inherit",
+    background: "none",
     padding: "5px",
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
     marginRight: "5px",
     cursor: "pointer",
     borderRadius: themeGet("radii.2")(props),
     transition: themeGet("transition.transitionDefault")(props),
     "&:hover, &:focus": {
+      outline: "none",
       backgroundColor: themeGet("colors.primary10")(props)
     }
   });
 });
 var Node = function Node(_ref) {
   var node = _ref.node,
-    style = _ref.style,
-    dragHandle = _ref.dragHandle;
+    style = _ref.style;
   /* This node instance can do many things. See the API reference. */
   return /*#__PURE__*/React.createElement(TreeItemWrapper, {
     style: style,
     className: "treeitem-wrapper",
-    ref: dragHandle,
     onClick: function onClick() {
       return node.toggle();
     }
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center"
   }, node.isLeaf ? /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "chevron-down"],
     title: "Select item",
@@ -69,7 +74,7 @@ var Node = function Node(_ref) {
   }), /*#__PURE__*/React.createElement(Small, null, node.data.name), node.data.badgeText && /*#__PURE__*/React.createElement(Badge, {
     variant: node.data.badgeColour,
     ml: "auto"
-  }, node.data.badgeText)));
+  }, node.data.badgeText));
 };
 Node.propTypes = {
   isLeaf: PropTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.17",
+  "version": "3.1.19",
   "engines": {
     "node": "18.17.1"
   },