@7shifts/sous-chef 4.3.0 → 4.4.0

package/dist/index.modern.js

@@ -4660,7 +4660,7 @@ const IconMinus = forwardRef((_ref, ref) => {
       viewBox: "0 0 24 24"
     }), React__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.createElement("svg", _extends({
@@ -4673,7 +4673,7 @@ const IconMinus = forwardRef((_ref, ref) => {
     viewBox: "0 0 24 24"
   }), React__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';
@@ -4966,7 +4966,7 @@ const IconPlus = forwardRef((_ref, ref) => {
       viewBox: "0 0 24 24"
     }), React__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.createElement("svg", _extends({
@@ -4979,9 +4979,7 @@ const IconPlus = forwardRef((_ref, ref) => {
     viewBox: "0 0 24 24"
   }), React__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';
@@ -5417,10 +5415,10 @@ const IconTimes = forwardRef((_ref, ref) => {
     }, props, {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
-      viewBox: "0 0 24 25"
+      viewBox: "0 0 24 24"
     }), React__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.createElement("svg", _extends({
@@ -5433,9 +5431,7 @@ const IconTimes = forwardRef((_ref, ref) => {
     viewBox: "0 0 24 24"
   }), React__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';
@@ -7999,17 +7995,10 @@ const IconSparkle = forwardRef((_ref, ref) => {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24"
-    }), React__default.createElement("g", {
-      clipPath: "url(#clip0_10467_577)"
-    }, React__default.createElement("path", {
+    }), React__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.createElement("defs", null, React__default.createElement("clipPath", {
-      id: "clip0_10467_577"
-    }, React__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.createElement("svg", _extends({
     style: getIconStyles(styleProps),
@@ -8021,7 +8010,7 @@ const IconSparkle = forwardRef((_ref, ref) => {
     viewBox: "0 0 24 24"
   }), React__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';
@@ -12527,7 +12516,7 @@ const useCheckBoxFieldControllers = ({
 var styles$12 = {"check-box-field":"_Id4qm","check-box-field__caption":"_s9d-m","check-box-field__custom-input":"_kmvBP"};
 
 const _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). */
 const CheckboxField = _ref => {
   let {
       name,
@@ -15293,7 +15282,7 @@ const 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. */
 const SelectField = props => {
   const {
     fieldProps,
@@ -15310,7 +15299,7 @@ const SelectField = props => {
 };
 
 const _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. */
 const ToolbarSelect = _ref => {
   let {
       name,
@@ -15844,6 +15833,7 @@ const useGrowTextAreaRef = (minHeight, maxHeight, autoGrow, forwardedRef) => {
   };
 };
 
+/**  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.  */
 const TextAreaField = ({
   name,
   id: inputId,
@@ -15957,6 +15947,7 @@ const TextFieldElement = (_ref, ref) => {
     suffix: suffix
   }, React__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.  */
 const TextField = 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"};
@@ -16066,7 +16057,7 @@ const CreatableOption = ({
   }, __('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.  */
 const PillSelectField = ({
   name,
   id: inputId,
@@ -16379,7 +16370,7 @@ const BoxOptions = ({
   }, row)));
 };
 
-/** 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. */
 const RadioGroupField = ({
   name,
   value,
@@ -16476,7 +16467,7 @@ const 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. */
 const PasswordField = ({
   name,
   id: inputId,
@@ -16547,7 +16538,7 @@ const PasswordField = ({
   }))));
 };
 
-/** 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.  */
 const MultiSelectField = ({
   name,
   id: inputId,
@@ -16659,7 +16650,7 @@ const CustomList = _ref => {
 
 const _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.
  * */
 const AsyncSelectField = _ref => {
@@ -16772,7 +16763,7 @@ const useDateFieldControllers = ({
 
 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. */
 const DateField = ({
   name,
   id: inputId,
@@ -17161,7 +17152,7 @@ const ToDateElement = ({
 };
 const ToDate = 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. . */
 const DateRangeField = ({
   name,
   id: inputId,
@@ -17256,7 +17247,7 @@ const DateRangeField = ({
   })));
 };
 
-/** 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. */
 const WeekField = ({
   name,
   id: inputId,
@@ -17521,9 +17512,9 @@ const TimeFieldElement = (_ref, forwardedRef) => {
 // exporting TimeField with all props for use in TimeRangeField
 const TimeRangeSelector = 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**.
  */
 const TimeField = forwardRef(TimeFieldElement);
 
@@ -17590,6 +17581,7 @@ const TimeRangeStart = ({
   });
 };
 
+/** 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. */
 const TimeRangeField = ({
   name,
   id: inputId,
@@ -17757,9 +17749,9 @@ const 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**.
  */
 const CurrencyField = forwardRef(CurrencyFieldElement);
 
@@ -17843,8 +17835,7 @@ const 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.
  */
 const NumberField = forwardRef(NumberFieldElement);
 
@@ -17861,8 +17852,7 @@ const 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.
  */
 const PercentageField = forwardRef(PercentageElement);
 
@@ -63772,7 +63762,7 @@ const 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"};
 
 const SevenShiftsShortLogo = () => {
   return React__default.createElement("svg", {
@@ -63813,6 +63803,7 @@ function PrimaryNavContextProvider({
   isExpanded: externalIsExpanded
 }) {
   const [isHoveringNav, setIsHoveringNav] = useState(false);
+  const [isFocusWithin, setIsFocusWithin] = useState(false);
   const [isInternalNavExpanded, setIsInternalNavExpanded] = useLocalStorage('vertical-nav-is-expanded', true);
   const isNavExpanded = externalIsExpanded !== undefined ? externalIsExpanded : isInternalNavExpanded;
   const contentRef = React__default.useRef(null);
@@ -63821,9 +63812,11 @@ function PrimaryNavContextProvider({
     setIsNavExpanded: setIsInternalNavExpanded,
     isHoveringNav,
     setIsHoveringNav,
-    isOpen: isNavExpanded || isHoveringNav,
+    isFocusWithin,
+    setIsFocusWithin,
+    isOpen: isNavExpanded || isHoveringNav || isFocusWithin,
     contentRef
-  }), [isNavExpanded, setIsInternalNavExpanded, isHoveringNav, setIsHoveringNav]);
+  }), [isNavExpanded, setIsInternalNavExpanded, isHoveringNav, setIsHoveringNav, isFocusWithin, setIsFocusWithin]);
   return React__default.createElement(PrimaryNavContext.Provider, {
     value: contextValues
   }, children);
@@ -63870,7 +63863,8 @@ const PrimaryNavHeader = ({
     setIsNavExpanded,
     isNavExpanded,
     contentRef,
-    setIsHoveringNav
+    setIsHoveringNav,
+    setIsFocusWithin
   } = usePrimaryNavContext();
   const {
     isScrolled
@@ -63885,13 +63879,17 @@ const PrimaryNavHeader = ({
   }, React__default.createElement(Inline, {
     justifyContent: "space-between",
     alignItems: "center"
-  }, isOpen ? React__default.createElement(ExpandedLogo, null) : React__default.createElement(CollapsedLogo, null), isOpen && React__default.createElement(Button, {
-    theme: "link-icon",
+  }, isOpen ? React__default.createElement(ExpandedLogo, null) : React__default.createElement(CollapsedLogo, null), isOpen && React__default.createElement("button", {
+    type: "button",
+    className: styles$9['primary-nav-header__toggle'],
+    "aria-label": isNavExpanded ? 'Collapse navigation' : 'Expand navigation',
+    "aria-expanded": isNavExpanded,
     onClick: () => {
       const nextExpanded = !isNavExpanded;
       setIsNavExpanded(nextExpanded);
       if (!nextExpanded) {
         setIsHoveringNav(false);
+        setIsFocusWithin(false);
       }
       if (onToggleExpand) {
         onToggleExpand(nextExpanded ? 'expanded' : 'collapsed');
@@ -63908,7 +63906,8 @@ const PrimaryNav = ({
   onToggleExpand,
   footer,
   shortLogo,
-  longLogo
+  longLogo,
+  ariaLabel
 }) => {
   return React__default.createElement(PrimaryNavContextProvider, {
     isExpanded: isExpanded
@@ -63917,7 +63916,8 @@ const PrimaryNav = ({
     onToggleExpand: onToggleExpand,
     footer: footer,
     shortLogo: shortLogo,
-    longLogo: longLogo
+    longLogo: longLogo,
+    ariaLabel: ariaLabel
   }, children));
 };
 const PrimaryNavContent = ({
@@ -63925,35 +63925,57 @@ const PrimaryNavContent = ({
   onToggleExpand,
   footer,
   shortLogo,
-  longLogo
+  longLogo,
+  ariaLabel: _ariaLabel = 'Main'
 }) => {
   const {
     setIsHoveringNav,
+    setIsFocusWithin,
     isOpen,
     contentRef
   } = usePrimaryNavContext();
   const {
     theme
   } = useProviderConfig();
-  return React__default.createElement("div", {
+  return React__default.createElement("nav", {
+    "aria-label": _ariaLabel,
     className: classnames(styles$8['primary-nav'], {
       [styles$8['primary-nav--dark']]: theme === 'dark',
       [styles$8['primary-nav--collapsed']]: !isOpen,
       [styles$8['primary-nav--expanded']]: isOpen
     }),
     onMouseEnter: () => setIsHoveringNav(true),
-    onMouseLeave: () => setIsHoveringNav(false)
+    onMouseLeave: () => setIsHoveringNav(false),
+    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".
+      let 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: e => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setIsFocusWithin(false);
+      }
+    }
   }, React__default.createElement(PrimaryNavHeader, {
     onToggleExpand: onToggleExpand,
     shortLogo: shortLogo,
     longLogo: longLogo
-  }), React__default.createElement("div", {
+  }), React__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"};
 
@@ -63988,7 +64010,7 @@ const PrimaryNavItemBadge = ({
   return null;
 };
 
-const _excluded$1 = ["children", "icon", "isActive", "label", "badge", "onClick"];
+const _excluded$1 = ["children", "icon", "isActive", "label", "badge", "onClick", "href"];
 const PrimaryNavItem = _ref => {
   let {
       children,
@@ -63996,7 +64018,8 @@ const PrimaryNavItem = _ref => {
       isActive,
       label,
       badge,
-      onClick
+      onClick,
+      href
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const {
@@ -64008,7 +64031,7 @@ const PrimaryNavItem = _ref => {
   const labelRef = useRef(null);
   const [isTruncated, setIsTruncated] = useState(false);
   const handleLabelMouseEnter = () => {
-    if (labelRef.current) {
+    if (isOpen && labelRef.current) {
       setIsTruncated(labelRef.current.scrollWidth > labelRef.current.clientWidth);
     }
   };
@@ -64024,42 +64047,56 @@ const PrimaryNavItem = _ref => {
     }
     return sum;
   }, 0);
-  return React__default.createElement("div", {
-    className: classnames(styles$7['primary-nav-item'], {
-      [styles$7['primary-nav-item--active']]: isActive,
-      [styles$7['primary-nav-item--active-subitem']]: hasActiveSubItem,
-      [styles$7['primary-nav-item--has-active-sub-item']]: hasActiveSubItem
-    })
-  }, React__default.createElement("button", _extends({
-    onClick: onClick
-  }, dataProps), React__default.createElement("div", {
+  const innerContent = React__default.createElement("div", {
     className: styles$7['primary-nav-item__content']
   }, React__default.createElement("div", {
-    className: styles$7['primary-nav-item__icon']
-  }, updatedIcon), isOpen && React__default.createElement("span", {
+    className: styles$7['primary-nav-item__icon'],
+    "aria-hidden": "true"
+  }, updatedIcon), React__default.createElement("span", {
     ref: labelRef,
-    className: styles$7['primary-nav-item__label'],
-    title: isTruncated ? label : undefined,
+    className: classnames(styles$7['primary-nav-item__label'], {
+      [styles$7['primary-nav-item__label--hidden']]: !isOpen
+    }),
+    title: isOpen && isTruncated ? label : undefined,
     onMouseEnter: handleLabelMouseEnter
   }, label), React__default.createElement(PrimaryNavItemBadge, {
     badge: badge,
     hasSubItems: hasSubItems,
     hasActiveSubItem: hasActiveSubItem,
     sumOfSubItemsBadges: sumOfSubItemsBadges
-  }))), children && hasActiveSubItem && React__default.createElement("div", {
+  }));
+  const ariaCurrent = isActive ? 'page' : undefined;
+  return React__default.createElement("li", {
+    className: classnames(styles$7['primary-nav-item'], {
+      [styles$7['primary-nav-item--active']]: isActive,
+      [styles$7['primary-nav-item--active-subitem']]: hasActiveSubItem,
+      [styles$7['primary-nav-item--has-active-sub-item']]: hasActiveSubItem
+    })
+  }, href ? React__default.createElement(Link$1, _extends({
+    className: styles$7['primary-nav-item__link'],
+    onClick: onClick,
+    to: href,
+    "aria-current": ariaCurrent
+  }, dataProps), innerContent) : React__default.createElement("button", _extends({
+    type: "button",
+    className: styles$7['primary-nav-item__link'],
+    onClick: onClick,
+    "aria-current": ariaCurrent
+  }, dataProps), innerContent), hasSubItems && hasActiveSubItem && React__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"};
 
-const _excluded = ["children", "isActive", "badge", "onClick", "isPaywalled"];
+const _excluded = ["children", "isActive", "badge", "onClick", "href", "isPaywalled"];
 const PrimaryNavSubItem = _ref => {
   let {
       children,
       isActive,
       badge,
       onClick,
+      href,
       isPaywalled
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -64072,25 +64109,23 @@ const PrimaryNavSubItem = _ref => {
   const labelRef = useRef(null);
   const [isTruncated, setIsTruncated] = useState(false);
   const handleLabelMouseEnter = () => {
-    if (labelRef.current) {
+    if (isOpen && labelRef.current) {
       setIsTruncated(labelRef.current.scrollWidth > labelRef.current.clientWidth);
     }
   };
-  return React__default.createElement("button", _extends({
-    onClick: onClick
-  }, dataProps), React__default.createElement("div", {
-    className: classnames(styles$5['primary-nav-sub-item'], {
-      [styles$5['primary-nav-sub-item--active']]: isActive
-    })
-  }, React__default.createElement("div", {
+  const innerContent = React__default.createElement("div", {
     className: classnames(styles$5['primary-nav-sub-item__content'], {
       [styles$5['primary-nav-sub-item__content--collapsed']]: !isOpen,
       [styles$5['primary-nav-sub-item__content--paywalled']]: isPaywalled && isOpen
     })
-  }, !isOpen ? React__default.createElement("div", {
-    className: styles$5['primary-nav-sub-item__circle']
-  }) : React__default.createElement(Fragment, null, isPaywalled && React__default.createElement("div", {
-    className: styles$5['primary-nav-sub-item__icon']
+  }, !isOpen ? React__default.createElement(Fragment, null, React__default.createElement("div", {
+    className: styles$5['primary-nav-sub-item__circle'],
+    "aria-hidden": "true"
+  }), React__default.createElement("span", {
+    className: styles$5['primary-nav-sub-item__label--hidden']
+  }, children)) : React__default.createElement(Fragment, null, isPaywalled && React__default.createElement("div", {
+    className: styles$5['primary-nav-sub-item__icon'],
+    "aria-hidden": "true"
   }, React__default.createElement(IconAward, {
     size: "medium",
     color: COLORS['upsell-color']
@@ -64101,13 +64136,31 @@ const PrimaryNavSubItem = _ref => {
     title: isTruncated ? children : undefined
   }, children)), !!badge && isOpen && React__default.createElement("div", {
     className: styles$5['primary-nav-sub-item__badge']
-  }, typeof badge === 'number' ? React__default.createElement(Badge, null, badge > 99 ? '99+' : badge) : React__default.createElement(Chip, null, badge)))));
+  }, typeof badge === 'number' ? React__default.createElement(Badge, null, badge > 99 ? '99+' : badge) : React__default.createElement(Chip, null, badge)));
+  const ariaCurrent = isActive ? 'page' : undefined;
+  return React__default.createElement("li", {
+    className: classnames(styles$5['primary-nav-sub-item'], {
+      [styles$5['primary-nav-sub-item--active']]: isActive
+    })
+  }, href ? React__default.createElement(Link$1, _extends({
+    className: styles$5['primary-nav-sub-item__link'],
+    onClick: onClick,
+    to: href,
+    "aria-current": ariaCurrent
+  }, dataProps), innerContent) : React__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"};
 
 const PrimaryNavDivider = () => {
-  return React__default.createElement("div", {
+  return React__default.createElement("li", {
+    role: "separator",
+    "aria-orientation": "horizontal",
     className: styles$4['primary-nav-divider']
   });
 };
@@ -64123,7 +64176,7 @@ const PrimaryNavFooter = ({
   const {
     hasScroll
   } = useScrollDetector(contentRef);
-  return React__default.createElement("div", {
+  return React__default.createElement("ul", {
     className: classnames(styles$3['primary-nav-footer'], {
       [styles$3['primary-nav-footer--with-shadow']]: hasScroll
     })