@7shifts/sous-chef 4.3.0 → 4.4.0

package/dist/index.js

@@ -4673,7 +4673,7 @@ var IconMinus = React.forwardRef(function (_ref, ref) {
       viewBox: "0 0 24 24"
     }), React__default["default"].createElement("path", {
       fill: "currentColor",
-      d: "M19.714 10H4.286C3.576 10 3 10.597 3 11.333v1.334C3 13.403 3.576 14 4.286 14h15.428c.71 0 1.286-.597 1.286-1.333v-1.334c0-.736-.576-1.333-1.286-1.333Z"
+      d: "M4.286 10.5C3.575 10.5 3 11.17 3 12s.575 1.5 1.286 1.5h15.428c.711 0 1.286-.67 1.286-1.5s-.575-1.5-1.286-1.5H4.286Z"
     }));
   }
   return React__default["default"].createElement("svg", _extends({
@@ -4686,7 +4686,7 @@ var IconMinus = React.forwardRef(function (_ref, ref) {
     viewBox: "0 0 24 24"
   }), React__default["default"].createElement("path", {
     fill: "currentColor",
-    d: "M20.625 10.875H3.375A.375.375 0 0 0 3 11.25v1.5c0 .207.168.375.375.375h17.25A.375.375 0 0 0 21 12.75v-1.5a.375.375 0 0 0-.375-.375Z"
+    d: "M3.964 11C3.43 11 3 11.446 3 12s.43 1 .964 1h16.072c.534 0 .964-.446.964-1s-.43-1-.964-1H3.964Z"
   }));
 });
 IconMinus.displayName = 'IconMinus';
@@ -4979,7 +4979,7 @@ var IconPlus = React.forwardRef(function (_ref, ref) {
       viewBox: "0 0 24 24"
     }), React__default["default"].createElement("path", {
       fill: "currentColor",
-      d: "M22.287 9.429h-7.714V1.714C14.573.768 13.805 0 12.859 0h-1.715C10.198 0 9.43.768 9.43 1.714V9.43H1.716C.769 9.429 0 10.196 0 11.143v1.714c0 .947.768 1.714 1.715 1.714H9.43v7.715c0 .946.768 1.714 1.714 1.714h1.715c.946 0 1.714-.768 1.714-1.714V14.57h7.714c.947 0 1.715-.767 1.715-1.714v-1.714c0-.947-.768-1.714-1.715-1.714Z"
+      d: "M13.43 3.422c0-.79-.638-1.429-1.428-1.429-.79 0-1.43.639-1.43 1.429v7.143H3.43a1.427 1.427 0 1 0 0 2.857h7.143v7.143c0 .79.638 1.428 1.428 1.428.79 0 1.429-.638 1.429-1.428v-7.143h7.143c.79 0 1.428-.639 1.428-1.429s-.638-1.428-1.428-1.428H13.43V3.422Z"
     }));
   }
   return React__default["default"].createElement("svg", _extends({
@@ -4992,9 +4992,7 @@ var IconPlus = React.forwardRef(function (_ref, ref) {
     viewBox: "0 0 24 24"
   }), React__default["default"].createElement("path", {
     fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M23.607 10.875h-10.48V.403a.375.375 0 0 0-.376-.375h-1.5a.375.375 0 0 0-.375.375v10.472H.396a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h10.48v10.458c0 .207.168.375.375.375h1.5a.375.375 0 0 0 .375-.375V13.125h10.48a.375.375 0 0 0 .376-.375v-1.5a.375.375 0 0 0-.375-.375Z",
-    clipRule: "evenodd"
+    d: "M13.073 3.065c0-.594-.478-1.072-1.072-1.072-.593 0-1.071.478-1.071 1.072v7.857H3.073c-.594 0-1.072.477-1.072 1.071s.478 1.072 1.072 1.072h7.857v7.857c0 .593.478 1.071 1.072 1.071.593 0 1.07-.477 1.07-1.071v-7.857h7.858c.594 0 1.072-.478 1.072-1.072 0-.594-.478-1.071-1.072-1.071h-7.857V3.065Z"
   }));
 });
 IconPlus.displayName = 'IconPlus';
@@ -5430,10 +5428,10 @@ var IconTimes = React.forwardRef(function (_ref, ref) {
     }, props, {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
-      viewBox: "0 0 24 25"
+      viewBox: "0 0 24 24"
     }), React__default["default"].createElement("path", {
       fill: "currentColor",
-      d: "M3.416.592a2.002 2.002 0 0 0-2.83 2.83L9.17 12 .592 20.584a2.002 2.002 0 0 0 2.83 2.83L12 14.83l8.584 8.578a2.002 2.002 0 0 0 2.83-2.83L14.83 12l8.578-8.584a2.002 2.002 0 0 0-2.83-2.83L12 9.17 3.416.592Z"
+      d: "M5.562 3.444a1.502 1.502 0 0 0-2.123 2.123L9.877 12l-6.433 6.438a1.502 1.502 0 0 0 2.123 2.123L12 14.123l6.438 6.433a1.502 1.502 0 0 0 2.123-2.123L14.123 12l6.433-6.438a1.502 1.502 0 0 0-2.123-2.123L12 9.877 5.562 3.444Z"
     }));
   }
   return React__default["default"].createElement("svg", _extends({
@@ -5446,9 +5444,7 @@ var IconTimes = React.forwardRef(function (_ref, ref) {
     viewBox: "0 0 24 24"
   }), React__default["default"].createElement("path", {
     fill: "currentColor",
-    fillRule: "evenodd",
-    d: "m23.348 21.772-9.761-9.774 9.76-9.81a.375.375 0 0 0 0-.53L22.288.597a.375.375 0 0 0-.53 0l-9.761 9.81L2.23.597a.375.375 0 0 0-.53 0l-1.06 1.06a.375.375 0 0 0 0 .531l9.764 9.81L.64 21.772a.375.375 0 0 0 0 .53l1.061 1.06a.375.375 0 0 0 .53 0l9.765-9.773 9.76 9.774a.375.375 0 0 0 .531 0l1.06-1.061a.375.375 0 0 0 0-.53Z",
-    clipRule: "evenodd"
+    d: "M3.33 4.92a1.125 1.125 0 0 1 1.59-1.59L12 10.41l7.08-7.08a1.125 1.125 0 0 1 1.59 1.59L13.59 12l7.08 7.08a1.125 1.125 0 0 1-1.59 1.59L12 13.59l-7.08 7.08a1.125 1.125 0 0 1-1.59-1.59L10.41 12 3.33 4.92Z"
   }));
 });
 IconTimes.displayName = 'IconTimes';
@@ -8012,17 +8008,10 @@ var IconSparkle = React.forwardRef(function (_ref, ref) {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24"
-    }), React__default["default"].createElement("g", {
-      clipPath: "url(#clip0_10467_577)"
-    }, React__default["default"].createElement("path", {
+    }), React__default["default"].createElement("path", {
       fill: "currentColor",
-      d: "M15.208 4.335 18.001 5.5l1.164 2.793a.375.375 0 0 0 .672 0L21 5.5l2.793-1.165a.375.375 0 0 0 0-.67L21 2.5 19.837-.293a.376.376 0 0 0-.672 0L18.001 2.5l-2.793 1.164a.375.375 0 0 0 0 .671Zm8.586 14.33L21 17.5l-1.164-2.793a.376.376 0 0 0-.672 0L18.001 17.5l-2.793 1.164a.375.375 0 0 0 0 .672l2.793 1.164 1.164 2.793a.375.375 0 0 0 .672 0L21 20.5l2.793-1.164a.375.375 0 0 0 0-.672ZM18 11.482a.752.752 0 0 0-.414-.671L12.31 8.168 9.672 2.882c-.255-.51-1.087-.51-1.342 0L5.692 8.168.415 10.812a.75.75 0 0 0 0 1.343L5.692 14.8l2.638 5.286a.75.75 0 0 0 1.342 0l2.638-5.286 5.277-2.643a.753.753 0 0 0 .414-.673Z"
-    })), React__default["default"].createElement("defs", null, React__default["default"].createElement("clipPath", {
-      id: "clip0_10467_577"
-    }, React__default["default"].createElement("path", {
-      fill: "#fff",
-      d: "M0 0h24v24H0z"
-    }))));
+      d: "M15.352 6.02a.546.546 0 0 0 0 1.019l2.648 1 .994 2.666c.08.212.281.354.506.354a.542.542 0 0 0 .506-.354L21 8.039l2.648-1a.546.546 0 0 0 0-1.02L21 5.02l-.994-2.665A.542.542 0 0 0 19.5 2a.542.542 0 0 0-.506.354L18 5.02l-2.648 1Zm-5.738-.562a.747.747 0 0 0-1.36 0L5.78 10.837.436 13.323a.754.754 0 0 0-.436.69c0 .296.169.56.436.683l5.348 2.487L8.25 22.56a.747.747 0 0 0 1.36 0l2.47-5.383 5.348-2.487a.752.752 0 0 0 .436-.684.752.752 0 0 0-.436-.684l-5.344-2.481-2.47-5.384Z"
+    }));
   }
   return React__default["default"].createElement("svg", _extends({
     style: getIconStyles(styleProps),
@@ -8034,7 +8023,7 @@ var IconSparkle = React.forwardRef(function (_ref, ref) {
     viewBox: "0 0 24 24"
   }), React__default["default"].createElement("path", {
     fill: "currentColor",
-    d: "M20.25 1c.413 0 .75.337.75.75V4h2.25c.413 0 .75.338.75.75s-.337.75-.75.75H21v2.25c0 .412-.337.75-.75.75a.752.752 0 0 1-.75-.75V5.5h-2.25a.752.752 0 0 1-.75-.75c0-.412.337-.75.75-.75h2.25V1.75c0-.413.337-.75.75-.75Zm0 13.5c.413 0 .75.338.75.75v2.25h2.25c.413 0 .75.337.75.75s-.337.75-.75.75H21v2.25c0 .413-.337.75-.75.75a.752.752 0 0 1-.75-.75V19h-2.25a.752.752 0 0 1-.75-.75c0-.413.337-.75.75-.75h2.25v-2.25c0-.412.337-.75.75-.75ZM6.413 9.644l-3.872 1.79 3.871 1.786a1.5 1.5 0 0 1 .732.732l1.786 3.871 1.786-3.871a1.5 1.5 0 0 1 .73-.732l3.873-1.786-3.872-1.786a1.5 1.5 0 0 1-.731-.73L8.93 5.044 7.144 8.917a1.5 1.5 0 0 1-.732.731v-.004Zm-.629 4.94-5.348-2.47a.747.747 0 0 1 0-1.36l5.348-2.47L8.25 2.936a.747.747 0 0 1 1.36 0l2.47 5.348 5.348 2.466a.747.747 0 0 1 0 1.36l-5.344 2.474-2.47 5.344a.747.747 0 0 1-1.36 0l-2.47-5.344Z"
+    d: "M20.25 2c.413 0 .75.337.75.75V5h2.25c.413 0 .75.338.75.75s-.337.75-.75.75H21v2.25c0 .412-.337.75-.75.75a.752.752 0 0 1-.75-.75V6.5h-2.25a.752.752 0 0 1-.75-.75c0-.412.337-.75.75-.75h2.25V2.75c0-.413.337-.75.75-.75ZM6.413 10.644l-3.872 1.79 3.871 1.786a1.5 1.5 0 0 1 .732.732l1.786 3.871 1.786-3.871a1.5 1.5 0 0 1 .73-.732l3.873-1.786-3.872-1.786a1.5 1.5 0 0 1-.731-.73L8.93 6.044 7.144 9.917a1.5 1.5 0 0 1-.732.731v-.004Zm-.629 4.94-5.348-2.47a.747.747 0 0 1 0-1.36l5.348-2.47L8.25 3.936a.747.747 0 0 1 1.36 0l2.47 5.348 5.348 2.466a.747.747 0 0 1 0 1.36l-5.344 2.474-2.47 5.344a.747.747 0 0 1-1.36 0l-2.47-5.344Z"
   }));
 });
 IconSparkle.displayName = 'IconSparkle';
@@ -12508,7 +12497,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
 var styles$12 = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
 
 var _excluded$bj = ["name", "id", "checked", "onChange", "onBlur", "label", "caption", "error", "disabled", "testId"];
-/** CheckboxField form element. */
+/** A simple check box with an option beside it. Allows the user to confirm a statement or enable an option with a simple boolean action. Use for things like agreeing to terms, or enabling one or more options in a list (where multiple selections are allowed). */
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
     inputId = _ref.id,
@@ -15250,7 +15239,7 @@ var useSelectField = function useSelectField(_ref) {
 
 var styles$B = {"select-field__suffix":"_vqC1M"};
 
-/** Component to make possible choose from a predefined options. */
+/** Simple dropdown field where the user chooses one option from a predefined list. */
 var SelectField = function SelectField(props) {
   var _useSelectField = useSelectField(props),
     fieldProps = _useSelectField.fieldProps,
@@ -15266,7 +15255,7 @@ var SelectField = function SelectField(props) {
 };
 
 var _excluded$b6 = ["name", "value", "options", "onChange", "onBlur", "placeholder", "defaultValue", "menuShouldScrollIntoView", "disabled", "prefix", "testId", "creatableButton", "onCreate"];
-/** Toolbar component to make a possible selection from predefined options. */
+/** ToolbarSelect is a compact dropdown filter for use in toolbars. It lets a user narrow page content or a paired component content by selecting from a predefined list of options. */
 var ToolbarSelect = function ToolbarSelect(_ref) {
   var name = _ref.name,
     value = _ref.value,
@@ -15821,6 +15810,7 @@ var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoG
   };
 };
 
+/**  A basic open input field used to get text from the user, with options to add a prefix or suffix element if necessary. Accepts any characters, so do not use it if you want to limit the format of the input to numbers only.  */
 var TextAreaField = function TextAreaField(_ref) {
   var _classnames;
   var name = _ref.name,
@@ -15933,6 +15923,7 @@ var TextFieldElement = function TextFieldElement(_ref, ref) {
     suffix: suffix
   }, React__default["default"].createElement("input", _extends({}, inputProps))));
 };
+/** A basic open input field used to get text from the user, with options to add a prefix or suffix element if necessary. Accepts any characters, so do not use it if you want to limit the format of the input to numbers only.  */
 var TextField = React.forwardRef(TextFieldElement);
 
 var styles$r = {"pill-select-field":"_Yti6k","pill-select-field__creating-input":"_dw-VP","pill-select-field__custom-input":"_JXakU","pill-select-field__add-new-input":"_MsKVV","pill-select-field__creating-custom-input":"_ZxEwG","pill-select-field__removable-icon":"_Odw1V"};
@@ -16049,7 +16040,7 @@ var CreatableOption = function CreatableOption(_ref) {
   }, __('enterOption')), !!newOptionLabel && newOptionLabel)));
 };
 
-/** PillSelectField form element. */
+/** A field where the user can select one or more from a vertical line of pills. Can also be made fully reactive allowing users to add and delete their own options.  Use this to select from a more visual list with a limited number of options, like selecting the day of the week.  */
 var PillSelectField = function PillSelectField(_ref) {
   var name = _ref.name,
     inputId = _ref.id,
@@ -16363,7 +16354,7 @@ var BoxOptions = function BoxOptions(_ref) {
   }));
 };
 
-/** RadioGroupField form element. */
+/** A list of radio options appearing either as an input or box. Use when the user can only select one option from a visual list and the user needs to be able to see all the options to make an informed decision. */
 var RadioGroupField = function RadioGroupField(_ref) {
   var name = _ref.name,
     value = _ref.value,
@@ -16464,7 +16455,7 @@ var groupCriterias = function groupCriterias(criterias) {
   return groupedCriterias;
 };
 
-/** It allows show and hide the password as well as displaying the criteria. */
+/** A field used for passwords. It obfuscates the input by default, but has the option to reveal the input. Can also include required password criteria. */
 var PasswordField = function PasswordField(_ref) {
   var _classnames, _classNames;
   var name = _ref.name,
@@ -16534,7 +16525,7 @@ var PasswordField = function PasswordField(_ref) {
   }))));
 };
 
-/** Component to make possible choose from a predefined options. */
+/** A dropdown style field that lets you select and input more than one option within the field. Uses removable chips to represent selected items.  */
 var MultiSelectField = function MultiSelectField(_ref) {
   var name = _ref.name,
     inputId = _ref.id,
@@ -16655,7 +16646,7 @@ var CustomList = function CustomList(_ref) {
 
 var _excluded$b3 = ["loadOptions"];
 /**
- * Component to make possible choose from async options. It looks exactly as the [SelectField](./?path=/docs/forms-selectfield--default) but, this one handles asynchronous options.
+ * A variation of select field that loads a dynamic list of options from a source rather than a fixed set of options. Use when you need to select from a dynamic list that can change such as roles, employees, locations, etc.
  * Instead of passing a `options` props, this component requires a `loadOptions` prop.
  * */
 var AsyncSelectField = function AsyncSelectField(_ref) {
@@ -16778,7 +16769,7 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
 
 var inputStyles = {"text-field":"_t-FNM","date-field":"_7xqY4","text-field--invalid":"_tANT5","date-field--invalid":"_oq75Z","text-field--prefixed":"_rlqRc","date-field--prefixed":"_fXM80","text-field--suffixed":"_uSKjx","date-field--suffixed":"_eEMy6"};
 
-/** DateField form element. */
+/** A dropdown style field for selecting a single specific date. It will load a calendar widget when activated allowing the user to find and pick a day. */
 var DateField = function DateField(_ref) {
   var _classnames;
   var name = _ref.name,
@@ -17199,7 +17190,7 @@ var ToDateElement = function ToDateElement(_ref, ref) {
 };
 var ToDate = React.forwardRef(ToDateElement);
 
-/** DateRangeField form element. */
+/** A dropdown style field with 2 inputs. It allows the user to select a specific start date and end date separately to create a range of dates. . */
 var DateRangeField = function DateRangeField(_ref) {
   var _classnames, _disabledDays$start, _disabledDays$end;
   var name = _ref.name,
@@ -17296,7 +17287,7 @@ var DateRangeField = function DateRangeField(_ref) {
   })));
 };
 
-/** WeekField form element. */
+/** A special dropdown style field used to select a single week from a calendar widget. Selections must always be 7 consecutive days, but you may customize the day of the week the selectable range starts on. */
 var WeekField = function WeekField(_ref) {
   var _classnames;
   var name = _ref.name,
@@ -17601,9 +17592,9 @@ var TimeFieldElement = function TimeFieldElement(_ref, forwardedRef) {
 // exporting TimeField with all props for use in TimeRangeField
 var TimeRangeSelector = React.forwardRef(TimeFieldElement);
 /**
- * `TimeField` are like `TextField` but it auto-format the value when the user leaves the field.
+ * A special field design for selecting a specific time of the day. Users can choose from a dropdown of preset time intervals, or type directly into the field. When the user leaves the field, the input is automatically formatted into either AM/PM time or 24h time.
  *
- * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
+ * **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
 var TimeField = React.forwardRef(TimeFieldElement);
 
@@ -17668,6 +17659,7 @@ var TimeRangeStart = function TimeRangeStart(_ref) {
   });
 };
 
+/** A special input field for selecting a time range. Comprised of 2 individual time fields, the user selects a start time and an end time individually to. */
 var TimeRangeField = function TimeRangeField(_ref) {
   var _classnames;
   var name = _ref.name,
@@ -17835,9 +17827,9 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, forwardedRef) {
   }, formatThousandsSparator(inputProps.value.toString() || ''))));
 };
 /**
- * `CurrencyField` is like `TextField` but it auto-format the value when the user leaves the field.
+ * A variation of a TextField, but it only accepts numbers, and will auto format the number into a currency format when the user leaves the field. Use anytime the user must enter a currency value and nothing else.
  *
- * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
+ * **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
@@ -17921,8 +17913,7 @@ var NumberFieldElement = function NumberFieldElement(_ref, ref) {
   }))));
 };
 /**
- * `NumberField` is an extended `TextField` input with validation and formatting in place to properly display number values.
- * In its default state it only allows whole numbers, but it can be configured to allow decimals and negative values.
+ * A special text input field that only accepts numbers. It has validation and formatting in place to properly display number values. In its default state it only allows whole numbers, but it can be configured to allow decimals and negative values.
  */
 var NumberField = React.forwardRef(NumberFieldElement);
 
@@ -17938,8 +17929,7 @@ var PercentageElement = function PercentageElement(_ref, ref) {
   }));
 };
 /**
- * `PercentageField` is an extended `TextField` input with validation and formatting in place to properly display percentage values.
- * In its default state it only allows integers between 0 and 100, but it can be configured to allow decimals and negative values.
+ * A special text input field that only accepts numbers. Comes with validation and formatting in place to properly display percentage values. In its default state it only allows integers between 0 and 100, but it can be configured to allow decimals and negative values.
  */
 var PercentageField = React.forwardRef(PercentageElement);
 
@@ -62466,7 +62456,7 @@ var SevenShiftsLogo = function SevenShiftsLogo() {
   }));
 };
 
-var styles$9 = {"primary-nav-header":"_6bVLs","primary-nav-header--collapsed":"_AYwpG","primary-nav-header--with-shadow":"_IpBk1"};
+var styles$9 = {"primary-nav-header":"_6bVLs","primary-nav-header--collapsed":"_AYwpG","primary-nav-header--with-shadow":"_IpBk1","primary-nav-header__toggle":"_lK6PV"};
 
 var SevenShiftsShortLogo = function SevenShiftsShortLogo() {
   return React__default["default"].createElement("svg", {
@@ -62508,6 +62498,9 @@ function PrimaryNavContextProvider(_ref) {
   var _useState = React.useState(false),
     isHoveringNav = _useState[0],
     setIsHoveringNav = _useState[1];
+  var _useState2 = React.useState(false),
+    isFocusWithin = _useState2[0],
+    setIsFocusWithin = _useState2[1];
   var _useLocalStorage = useLocalStorage('vertical-nav-is-expanded', true),
     isInternalNavExpanded = _useLocalStorage[0],
     setIsInternalNavExpanded = _useLocalStorage[1];
@@ -62519,10 +62512,12 @@ function PrimaryNavContextProvider(_ref) {
       setIsNavExpanded: setIsInternalNavExpanded,
       isHoveringNav: isHoveringNav,
       setIsHoveringNav: setIsHoveringNav,
-      isOpen: isNavExpanded || isHoveringNav,
+      isFocusWithin: isFocusWithin,
+      setIsFocusWithin: setIsFocusWithin,
+      isOpen: isNavExpanded || isHoveringNav || isFocusWithin,
       contentRef: contentRef
     };
-  }, [isNavExpanded, setIsInternalNavExpanded, isHoveringNav, setIsHoveringNav]);
+  }, [isNavExpanded, setIsInternalNavExpanded, isHoveringNav, setIsHoveringNav, isFocusWithin, setIsFocusWithin]);
   return React__default["default"].createElement(PrimaryNavContext.Provider, {
     value: contextValues
   }, children);
@@ -62573,7 +62568,8 @@ var PrimaryNavHeader = function PrimaryNavHeader(_ref) {
     setIsNavExpanded = _usePrimaryNavContext.setIsNavExpanded,
     isNavExpanded = _usePrimaryNavContext.isNavExpanded,
     contentRef = _usePrimaryNavContext.contentRef,
-    setIsHoveringNav = _usePrimaryNavContext.setIsHoveringNav;
+    setIsHoveringNav = _usePrimaryNavContext.setIsHoveringNav,
+    setIsFocusWithin = _usePrimaryNavContext.setIsFocusWithin;
   var _useScrollDetector = useScrollDetector(contentRef),
     isScrolled = _useScrollDetector.isScrolled;
   var CollapsedLogo = function CollapsedLogo() {
@@ -62587,13 +62583,17 @@ var PrimaryNavHeader = function PrimaryNavHeader(_ref) {
   }, React__default["default"].createElement(Inline, {
     justifyContent: "space-between",
     alignItems: "center"
-  }, isOpen ? React__default["default"].createElement(ExpandedLogo, null) : React__default["default"].createElement(CollapsedLogo, null), isOpen && React__default["default"].createElement(Button, {
-    theme: "link-icon",
+  }, isOpen ? React__default["default"].createElement(ExpandedLogo, null) : React__default["default"].createElement(CollapsedLogo, null), isOpen && React__default["default"].createElement("button", {
+    type: "button",
+    className: styles$9['primary-nav-header__toggle'],
+    "aria-label": isNavExpanded ? 'Collapse navigation' : 'Expand navigation',
+    "aria-expanded": isNavExpanded,
     onClick: function onClick() {
       var nextExpanded = !isNavExpanded;
       setIsNavExpanded(nextExpanded);
       if (!nextExpanded) {
         setIsHoveringNav(false);
+        setIsFocusWithin(false);
       }
       if (onToggleExpand) {
         onToggleExpand(nextExpanded ? 'expanded' : 'collapsed');
@@ -62610,7 +62610,8 @@ var PrimaryNav = function PrimaryNav(_ref) {
     onToggleExpand = _ref.onToggleExpand,
     footer = _ref.footer,
     shortLogo = _ref.shortLogo,
-    longLogo = _ref.longLogo;
+    longLogo = _ref.longLogo,
+    ariaLabel = _ref.ariaLabel;
   return React__default["default"].createElement(PrimaryNavContextProvider, {
     isExpanded: isExpanded
   }, React__default["default"].createElement(PrimaryNavContent, {
@@ -62618,7 +62619,8 @@ var PrimaryNav = function PrimaryNav(_ref) {
     onToggleExpand: onToggleExpand,
     footer: footer,
     shortLogo: shortLogo,
-    longLogo: longLogo
+    longLogo: longLogo,
+    ariaLabel: ariaLabel
   }, children));
 };
 var PrimaryNavContent = function PrimaryNavContent(_ref2) {
@@ -62627,32 +62629,55 @@ var PrimaryNavContent = function PrimaryNavContent(_ref2) {
     onToggleExpand = _ref2.onToggleExpand,
     footer = _ref2.footer,
     shortLogo = _ref2.shortLogo,
-    longLogo = _ref2.longLogo;
+    longLogo = _ref2.longLogo,
+    _ref2$ariaLabel = _ref2.ariaLabel,
+    ariaLabel = _ref2$ariaLabel === void 0 ? 'Main' : _ref2$ariaLabel;
   var _usePrimaryNavContext = usePrimaryNavContext(),
     setIsHoveringNav = _usePrimaryNavContext.setIsHoveringNav,
+    setIsFocusWithin = _usePrimaryNavContext.setIsFocusWithin,
     isOpen = _usePrimaryNavContext.isOpen,
     contentRef = _usePrimaryNavContext.contentRef;
   var _useProviderConfig = useProviderConfig(),
     theme = _useProviderConfig.theme;
-  return React__default["default"].createElement("div", {
+  return React__default["default"].createElement("nav", {
+    "aria-label": ariaLabel,
     className: classnames__default["default"](styles$8['primary-nav'], (_classNames = {}, _classNames[styles$8['primary-nav--dark']] = theme === 'dark', _classNames[styles$8['primary-nav--collapsed']] = !isOpen, _classNames[styles$8['primary-nav--expanded']] = isOpen, _classNames)),
     onMouseEnter: function onMouseEnter() {
       return setIsHoveringNav(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHoveringNav(false);
+    },
+    onFocus: function onFocus(e) {
+      // Only expand on keyboard focus, not on mouse-driven focus
+      // (e.g. clicking an item). :focus-visible reflects the
+      // browser's own heuristic for "focus should be visible".
+      var isKeyboardFocus = false;
+      try {
+        isKeyboardFocus = e.target instanceof Element && e.target.matches(':focus-visible');
+      } catch (_unused) {
+        // :focus-visible not supported in this environment
+      }
+      if (isKeyboardFocus) {
+        setIsFocusWithin(true);
+      }
+    },
+    onBlur: function onBlur(e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setIsFocusWithin(false);
+      }
     }
   }, React__default["default"].createElement(PrimaryNavHeader, {
     onToggleExpand: onToggleExpand,
     shortLogo: shortLogo,
     longLogo: longLogo
-  }), React__default["default"].createElement("div", {
+  }), React__default["default"].createElement("ul", {
     ref: contentRef,
     className: styles$8['primary-nav__content']
   }, children), footer);
 };
 
-var styles$7 = {"primary-nav-item":"_mWULf","primary-nav-item__content":"_GkDWn","primary-nav-item__icon":"_3LYJx","primary-nav-item__label":"_oz5bt","primary-nav-item__small-badge":"_yCxLl","fade-in":"_aMyIG","primary-nav-item__sub-items":"_SFpch","primary-nav-item--active":"_zfy2L","primary-nav-item--active-subitem":"_els3B","primary-nav-item--has-active-sub-item":"_-RLI8"};
+var styles$7 = {"primary-nav-item":"_mWULf","primary-nav-item__link":"_PiWFg","primary-nav-item__content":"_GkDWn","primary-nav-item__icon":"_3LYJx","primary-nav-item__label":"_oz5bt","primary-nav-item__label--hidden":"_MFqwx","primary-nav-item__small-badge":"_yCxLl","fade-in":"_aMyIG","primary-nav-item__sub-items":"_SFpch","primary-nav-item--active":"_zfy2L","primary-nav-item--active-subitem":"_els3B","primary-nav-item--has-active-sub-item":"_-RLI8"};
 
 var styles$6 = {"primary-nav-item-badge__small":"_S2i4R","fade-in":"_D9NA6"};
 
@@ -62685,15 +62710,16 @@ var PrimaryNavItemBadge = function PrimaryNavItemBadge(_ref) {
   return null;
 };
 
-var _excluded$1 = ["children", "icon", "isActive", "label", "badge", "onClick"];
+var _excluded$1 = ["children", "icon", "isActive", "label", "badge", "onClick", "href"];
 var PrimaryNavItem = function PrimaryNavItem(_ref) {
-  var _classNames;
+  var _classNames, _classNames2;
   var children = _ref.children,
     icon = _ref.icon,
     isActive = _ref.isActive,
     label = _ref.label,
     badge = _ref.badge,
     onClick = _ref.onClick,
+    href = _ref.href,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _getDataProps = getDataProps(rest),
     dataProps = _getDataProps.dataProps;
@@ -62704,7 +62730,7 @@ var PrimaryNavItem = function PrimaryNavItem(_ref) {
     isTruncated = _useState[0],
     setIsTruncated = _useState[1];
   var handleLabelMouseEnter = function handleLabelMouseEnter() {
-    if (labelRef.current) {
+    if (isOpen && labelRef.current) {
       setIsTruncated(labelRef.current.scrollWidth > labelRef.current.clientWidth);
     }
   };
@@ -62722,38 +62748,50 @@ var PrimaryNavItem = function PrimaryNavItem(_ref) {
     }
     return sum;
   }, 0);
-  return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$7['primary-nav-item'], (_classNames = {}, _classNames[styles$7['primary-nav-item--active']] = isActive, _classNames[styles$7['primary-nav-item--active-subitem']] = hasActiveSubItem, _classNames[styles$7['primary-nav-item--has-active-sub-item']] = hasActiveSubItem, _classNames))
-  }, React__default["default"].createElement("button", _extends({
-    onClick: onClick
-  }, dataProps), React__default["default"].createElement("div", {
+  var innerContent = React__default["default"].createElement("div", {
     className: styles$7['primary-nav-item__content']
   }, React__default["default"].createElement("div", {
-    className: styles$7['primary-nav-item__icon']
-  }, updatedIcon), isOpen && React__default["default"].createElement("span", {
+    className: styles$7['primary-nav-item__icon'],
+    "aria-hidden": "true"
+  }, updatedIcon), React__default["default"].createElement("span", {
     ref: labelRef,
-    className: styles$7['primary-nav-item__label'],
-    title: isTruncated ? label : undefined,
+    className: classnames__default["default"](styles$7['primary-nav-item__label'], (_classNames = {}, _classNames[styles$7['primary-nav-item__label--hidden']] = !isOpen, _classNames)),
+    title: isOpen && isTruncated ? label : undefined,
     onMouseEnter: handleLabelMouseEnter
   }, label), React__default["default"].createElement(PrimaryNavItemBadge, {
     badge: badge,
     hasSubItems: hasSubItems,
     hasActiveSubItem: hasActiveSubItem,
     sumOfSubItemsBadges: sumOfSubItemsBadges
-  }))), children && hasActiveSubItem && React__default["default"].createElement("div", {
+  }));
+  var ariaCurrent = isActive ? 'page' : undefined;
+  return React__default["default"].createElement("li", {
+    className: classnames__default["default"](styles$7['primary-nav-item'], (_classNames2 = {}, _classNames2[styles$7['primary-nav-item--active']] = isActive, _classNames2[styles$7['primary-nav-item--active-subitem']] = hasActiveSubItem, _classNames2[styles$7['primary-nav-item--has-active-sub-item']] = hasActiveSubItem, _classNames2))
+  }, href ? React__default["default"].createElement(reactRouterDom.Link, _extends({
+    className: styles$7['primary-nav-item__link'],
+    onClick: onClick,
+    to: href,
+    "aria-current": ariaCurrent
+  }, dataProps), innerContent) : React__default["default"].createElement("button", _extends({
+    type: "button",
+    className: styles$7['primary-nav-item__link'],
+    onClick: onClick,
+    "aria-current": ariaCurrent
+  }, dataProps), innerContent), hasSubItems && hasActiveSubItem && React__default["default"].createElement("ul", {
     className: styles$7['primary-nav-item__sub-items']
   }, children));
 };
 
-var styles$5 = {"primary-nav-sub-item":"_kWT6L","primary-nav-sub-item__content":"_c3utS","primary-nav-sub-item__content--collapsed":"_3IImx","primary-nav-sub-item__content--paywalled":"_WwagZ","primary-nav-sub-item__icon":"_uDuDj","primary-nav-sub-item__label":"_Kg1TF","primary-nav-sub-item__circle":"_uMbkq","fade-in":"_eIHTO","primary-nav-sub-item--active":"_nkaWg"};
+var styles$5 = {"primary-nav-sub-item":"_kWT6L","primary-nav-sub-item__link":"_KXtsV","primary-nav-sub-item__label--hidden":"_nTZxa","primary-nav-sub-item__content":"_c3utS","primary-nav-sub-item__content--collapsed":"_3IImx","primary-nav-sub-item__content--paywalled":"_WwagZ","primary-nav-sub-item__icon":"_uDuDj","primary-nav-sub-item__label":"_Kg1TF","primary-nav-sub-item__circle":"_uMbkq","fade-in":"_eIHTO","primary-nav-sub-item--active":"_nkaWg"};
 
-var _excluded = ["children", "isActive", "badge", "onClick", "isPaywalled"];
+var _excluded = ["children", "isActive", "badge", "onClick", "href", "isPaywalled"];
 var PrimaryNavSubItem = function PrimaryNavSubItem(_ref) {
   var _classNames, _classNames2;
   var children = _ref.children,
     isActive = _ref.isActive,
     badge = _ref.badge,
     onClick = _ref.onClick,
+    href = _ref.href,
     isPaywalled = _ref.isPaywalled,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _usePrimaryNavContext = usePrimaryNavContext(),
@@ -62765,20 +62803,20 @@ var PrimaryNavSubItem = function PrimaryNavSubItem(_ref) {
     isTruncated = _useState[0],
     setIsTruncated = _useState[1];
   var handleLabelMouseEnter = function handleLabelMouseEnter() {
-    if (labelRef.current) {
+    if (isOpen && labelRef.current) {
       setIsTruncated(labelRef.current.scrollWidth > labelRef.current.clientWidth);
     }
   };
-  return React__default["default"].createElement("button", _extends({
-    onClick: onClick
-  }, dataProps), React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$5['primary-nav-sub-item'], (_classNames = {}, _classNames[styles$5['primary-nav-sub-item--active']] = isActive, _classNames))
-  }, React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$5['primary-nav-sub-item__content'], (_classNames2 = {}, _classNames2[styles$5['primary-nav-sub-item__content--collapsed']] = !isOpen, _classNames2[styles$5['primary-nav-sub-item__content--paywalled']] = isPaywalled && isOpen, _classNames2))
-  }, !isOpen ? React__default["default"].createElement("div", {
-    className: styles$5['primary-nav-sub-item__circle']
-  }) : React__default["default"].createElement(React.Fragment, null, isPaywalled && React__default["default"].createElement("div", {
-    className: styles$5['primary-nav-sub-item__icon']
+  var innerContent = React__default["default"].createElement("div", {
+    className: classnames__default["default"](styles$5['primary-nav-sub-item__content'], (_classNames = {}, _classNames[styles$5['primary-nav-sub-item__content--collapsed']] = !isOpen, _classNames[styles$5['primary-nav-sub-item__content--paywalled']] = isPaywalled && isOpen, _classNames))
+  }, !isOpen ? React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement("div", {
+    className: styles$5['primary-nav-sub-item__circle'],
+    "aria-hidden": "true"
+  }), React__default["default"].createElement("span", {
+    className: styles$5['primary-nav-sub-item__label--hidden']
+  }, children)) : React__default["default"].createElement(React.Fragment, null, isPaywalled && React__default["default"].createElement("div", {
+    className: styles$5['primary-nav-sub-item__icon'],
+    "aria-hidden": "true"
   }, React__default["default"].createElement(IconAward, {
     size: "medium",
     color: COLORS['upsell-color']
@@ -62789,13 +62827,29 @@ var PrimaryNavSubItem = function PrimaryNavSubItem(_ref) {
     title: isTruncated ? children : undefined
   }, children)), !!badge && isOpen && React__default["default"].createElement("div", {
     className: styles$5['primary-nav-sub-item__badge']
-  }, typeof badge === 'number' ? React__default["default"].createElement(Badge, null, badge > 99 ? '99+' : badge) : React__default["default"].createElement(Chip, null, badge)))));
+  }, typeof badge === 'number' ? React__default["default"].createElement(Badge, null, badge > 99 ? '99+' : badge) : React__default["default"].createElement(Chip, null, badge)));
+  var ariaCurrent = isActive ? 'page' : undefined;
+  return React__default["default"].createElement("li", {
+    className: classnames__default["default"](styles$5['primary-nav-sub-item'], (_classNames2 = {}, _classNames2[styles$5['primary-nav-sub-item--active']] = isActive, _classNames2))
+  }, href ? React__default["default"].createElement(reactRouterDom.Link, _extends({
+    className: styles$5['primary-nav-sub-item__link'],
+    onClick: onClick,
+    to: href,
+    "aria-current": ariaCurrent
+  }, dataProps), innerContent) : React__default["default"].createElement("button", _extends({
+    type: "button",
+    className: styles$5['primary-nav-sub-item__link'],
+    onClick: onClick,
+    "aria-current": ariaCurrent
+  }, dataProps), innerContent));
 };
 
 var styles$4 = {"primary-nav-divider":"_qN8Zl"};
 
 var PrimaryNavDivider = function PrimaryNavDivider() {
-  return React__default["default"].createElement("div", {
+  return React__default["default"].createElement("li", {
+    role: "separator",
+    "aria-orientation": "horizontal",
     className: styles$4['primary-nav-divider']
   });
 };
@@ -62809,7 +62863,7 @@ var PrimaryNavFooter = function PrimaryNavFooter(_ref) {
     contentRef = _usePrimaryNavContext.contentRef;
   var _useScrollDetector = useScrollDetector(contentRef),
     hasScroll = _useScrollDetector.hasScroll;
-  return React__default["default"].createElement("div", {
+  return React__default["default"].createElement("ul", {
     className: classnames__default["default"](styles$3['primary-nav-footer'], (_classNames = {}, _classNames[styles$3['primary-nav-footer--with-shadow']] = hasScroll, _classNames))
   }, children);
 };