orcs-design-system 3.4.2 → 3.4.4

package/es/GlobalStyles.js

@@ -3,5 +3,5 @@ import { themeGet } from "@styled-system/theme-get";
 // GLOBAL STYLES
 // For browser reset, setting global box sizing and font sizing etc.
 
-const GlobalStyles = /*#__PURE__*/createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:auto;width:100%;overflow-y:auto;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
+const GlobalStyles = /*#__PURE__*/createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*::before,*::after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:auto;width:100%;overflow-y:auto;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
 export default GlobalStyles;

package/es/components/ActionsMenu/index.js

@@ -28,7 +28,7 @@ const Wrapper = /*#__PURE__*/styled.div.withConfig({
 const Control = /*#__PURE__*/styled.button.withConfig({
   displayName: "Control",
   componentId: "sc-yvbni2-2"
-})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;transition:", ";cursor:", ";", " &[data-state=\"open\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&:before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&:after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => variant({
+})(["position:relative;display:flex;align-items:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;text-decoration:none;text-align:center;transition:", ";cursor:", ";", " &[data-state=\"open\"] .actionsMenu__dots{&::before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&::after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"open\"] .actionsMenu__cross{&::before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&::after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__dots{&::before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&::after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}&[data-state=\"closed\"] .actionsMenu__cross{&::before{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}&::after{animation:500ms ", " cubic-bezier(0.68,-0.6,0.32,1.6) forwards;}}"], props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "not-allowed" : "pointer", props => variant({
   variants: {
     default: {
       width: "30px",
@@ -59,17 +59,17 @@ const Control = /*#__PURE__*/styled.button.withConfig({
 const Dots = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dots",
   componentId: "sc-yvbni2-3"
-})(["border-radius:2px;height:4px;width:4px;&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;}&:before{transform:translate(0,-6px);}&:after{transform:translate(0,6px);}", ""], props => variant({
+})(["border-radius:2px;height:4px;width:4px;&::before,&::after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;}&::before{transform:translate(0,-6px);}&::after{transform:translate(0,6px);}", ""], props => variant({
   variants: {
     default: {
       backgroundColor: themeGet("colors.greyDarker")(props),
-      "&:before, &:after": {
+      "&::before, &::after": {
         backgroundColor: themeGet("colors.greyDarker")(props)
       }
     },
     circle: {
       backgroundColor: themeGet("colors.white")(props),
-      "&:before, &:after": {
+      "&::before, &::after": {
         backgroundColor: themeGet("colors.white")(props)
       }
     }
@@ -78,15 +78,15 @@ const Dots = /*#__PURE__*/styled.div.withConfig({
 const Cross = /*#__PURE__*/styled.div.withConfig({
   displayName: "Cross",
   componentId: "sc-yvbni2-4"
-})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);&:before,&:after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;}&:before{transform:rotate(-45deg);}&:after{transform:rotate(45deg);}", ""], crossFadeIn, props => variant({
+})(["animation:1500ms ", " ease-in-out forwards;opacity:0;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);&::before,&::after{content:\"\";display:block;position:absolute;border-radius:2px;height:4px;width:4px;}&::before{transform:rotate(-45deg);}&::after{transform:rotate(45deg);}", ""], crossFadeIn, props => variant({
   variants: {
     default: {
-      "&:before, &:after": {
+      "&::before, &::after": {
         backgroundColor: themeGet("colors.greyDarker")(props)
       }
     },
     circle: {
-      "&:before, &:after": {
+      "&::before, &::after": {
         backgroundColor: themeGet("colors.white")(props)
       }
     }

package/es/components/Checkbox/index.js

@@ -60,7 +60,7 @@ const Control = /*#__PURE__*/styled.input.attrs({
 }).withConfig({
   displayName: "Control",
   componentId: "sc-p4d19b-2"
-})(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;pointer-events:none;&:focus{+ div{border-radius:2px;", "}}+ div{transition:", ";&:before{", "}> div{", "}}&:focus + div div:after{opacity:0.2;}&:checked{+ div div:before{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;.animate&{animation:", " 300ms forwards ease-out;}}}&:not(:checked) + div div:before{.animate&{animation:", " 300ms forwards ease-out;}}"], props => {
+})(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;pointer-events:none;&:focus{+ div{border-radius:2px;", "}}+ div{transition:", ";&::before{", "}> div{", "}}&:focus + div div::after{opacity:0.2;}&:checked{+ div div::before{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;.animate&{animation:", " 300ms forwards ease-out;}}}&:not(:checked) + div div::before{.animate&{animation:", " 300ms forwards ease-out;}}"], props => {
   const shadow = themeGet("shadows.thickOutline")(props);
   const focusColors = getCheckboxFocusColors(props);
   return variant({
@@ -137,11 +137,11 @@ const Control = /*#__PURE__*/styled.input.attrs({
 const Box = /*#__PURE__*/styled.div.withConfig({
   displayName: "Box",
   componentId: "sc-p4d19b-3"
-})(["position:relative;height:20px;width:20px;&:before{content:\"\";display:block;position:absolute;left:8px;top:8px;height:4px;width:4px;border-radius:100%;z-index:1;opacity:0;margin:0;pointer-events:none;background-color:", ";}"], props => themeGet("colors.black50")(props));
+})(["position:relative;height:20px;width:20px;&::before{content:\"\";display:block;position:absolute;left:8px;top:8px;height:4px;width:4px;border-radius:100%;z-index:1;opacity:0;margin:0;pointer-events:none;background-color:", ";}"], props => themeGet("colors.black50")(props));
 const Check = /*#__PURE__*/styled.div.withConfig({
   displayName: "Check",
   componentId: "sc-p4d19b-4"
-})(["position:relative;display:inline-block;width:20px;height:20px;border:2px solid;border-radius:", ";overflow:hidden;z-index:1;color:", ";", " &:before{content:\"\";position:absolute;transform:rotate(45deg);display:block;margin-top:-4px;margin-left:6px;width:0;height:0;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0 inset;@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){width:1px;height:1px;}}}"], props => themeGet("radii.1")(props), props => themeGet("colors.greyDarker")(props), props => {
+})(["position:relative;display:inline-block;width:20px;height:20px;border:2px solid;border-radius:", ";overflow:hidden;z-index:1;color:", ";", " &::before{content:\"\";position:absolute;transform:rotate(45deg);display:block;margin-top:-4px;margin-left:6px;width:0;height:0;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0 inset;@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){width:1px;height:1px;}}}"], props => themeGet("radii.1")(props), props => themeGet("colors.greyDarker")(props), props => {
   const colors = getCheckboxColors(props);
   return variant({
     variants: createCheckboxVariants({

package/es/components/CodeBlock/index.js

@@ -73,7 +73,12 @@ const CopyButton = /*#__PURE__*/styled("button").attrs({
     opacity: 0.6
   }
 }));
+const omitMaxHeightProp = (prop, defaultValidatorFn) => {
+  const isValidProp = typeof defaultValidatorFn === "function" ? defaultValidatorFn(prop) : true;
+  return prop !== "maxHeight" && isValidProp;
+};
 const PreTag = /*#__PURE__*/styled("pre").withConfig({
+  shouldForwardProp: omitMaxHeightProp,
   displayName: "PreTag",
   componentId: "sc-1yib7z6-4"
 })(props => css({
@@ -86,6 +91,7 @@ const PreTag = /*#__PURE__*/styled("pre").withConfig({
   fontFamily: "monospace"
 }));
 const EditableCodeContainer = /*#__PURE__*/styled("div").withConfig({
+  shouldForwardProp: omitMaxHeightProp,
   displayName: "EditableCodeContainer",
   componentId: "sc-1yib7z6-5"
 })(props => css({

package/es/components/DatePicker/index.js

@@ -78,7 +78,7 @@ const DatePickerLabel = /*#__PURE__*/styled.label.withConfig({
 const DatePickerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "DatePickerContainer",
   componentId: "sc-15292wq-1"
-})([".SingleDatePicker{width:", ";}.DateRangePicker{width:", ";}.SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:", ";}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:transparent;border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:absolute;top:auto;right:0;transform:none;&:hover,&:focus{outline:0;svg path{fill:", ";}}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], props => props.width ? props.width : "134px", props => {
+})([".SingleDatePicker{width:", ";}.DateRangePicker{width:", ";}.SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:", ";}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:transparent;border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:absolute;top:auto;right:0;transform:none;&:hover,&:focus{outline:0;svg path{fill:", ";}}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight::before,.DayPickerKeyboardShortcuts_show__topRight::before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover::before,.DayPickerKeyboardShortcuts_show__topRight:hover::before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], props => props.width ? props.width : "134px", props => {
   if (props.width) {
     if (props.width.includes("px")) {
       const widthValue = parseInt(props.width, 10);

package/es/components/Expandable/index.js

@@ -18,7 +18,7 @@ const Item = /*#__PURE__*/styled.div.withConfig({
 const Button = /*#__PURE__*/styled.button.withConfig({
   displayName: "Button",
   componentId: "sc-na4gdb-1"
-})(["position:relative;display:block;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;cursor:pointer;width:100%;margin:0;font-size:", ";text-align:left;color:", ";padding:", ";}border-left:solid 3px ", ";border-radius:", ";background:", ";transition:", ";&:hover{background:", ";border-left:solid 3px ", ";}&:focus{outline:0;border-left:solid 3px ", ";}&:after,&:before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);width:2px;height:12px;right:", ";background-color:", ";transition:", ";}&:before{transform:", ";}&:after{transform:translateY(-50%) rotate(90deg);}"], props => themeGet("fontSizes.3")(props), props => themeGet("colors.greyDarker")(props), props => props.small ? "8px 33px 8px 8px" : "18px 48px 18px 16px", props => themeGet("colors.greyLightest")(props), props => themeGet("radii.1")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyLighter")(props), props => themeGet("colors.greyLighter")(props), props => themeGet("colors.primary")(props), props => props.small ? "16px" : "24px", props => themeGet("colors.greyDark")(props), props => themeGet("transition.transitionDefault")(props), props => props.open ? "translateY(-50%) rotate(90deg)" : "translateY(-50%)");
+})(["position:relative;display:block;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;cursor:pointer;width:100%;margin:0;font-size:", ";text-align:left;color:", ";padding:", ";}border-left:solid 3px ", ";border-radius:", ";background:", ";transition:", ";&:hover{background:", ";border-left:solid 3px ", ";}&:focus{outline:0;border-left:solid 3px ", ";}&::after,&::before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);width:2px;height:12px;right:", ";background-color:", ";transition:", ";}&::before{transform:", ";}&::after{transform:translateY(-50%) rotate(90deg);}"], props => themeGet("fontSizes.3")(props), props => themeGet("colors.greyDarker")(props), props => props.small ? "8px 33px 8px 8px" : "18px 48px 18px 16px", props => themeGet("colors.greyLightest")(props), props => themeGet("radii.1")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyLighter")(props), props => themeGet("colors.greyLighter")(props), props => themeGet("colors.primary")(props), props => props.small ? "16px" : "24px", props => themeGet("colors.greyDark")(props), props => themeGet("transition.transitionDefault")(props), props => props.open ? "translateY(-50%) rotate(90deg)" : "translateY(-50%)");
 const Text = /*#__PURE__*/styled.div.withConfig({
   displayName: "Text",
   componentId: "sc-na4gdb-2"

package/es/components/Popover/index.js

@@ -41,7 +41,7 @@ const TooltipControl = /*#__PURE__*/styled.div.withConfig({
 const StyledPopover = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPopover",
   componentId: "sc-1bwoak-2"
-})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;overflow:hidden;}&.visible{opacity:1;pointer-events:auto;visibility:visible;}& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.greyMid"));
+})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;overflow:hidden;}&.visible{opacity:1;pointer-events:auto;visibility:visible;}& a{font-size:", ";}&::before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&::after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}&.top{&::before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&::after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&::before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&::after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&::before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&::after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&::before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&::after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&::before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&::after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&::before{left:auto;right:-6px;transform:rotate(180deg);}&::after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&::before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&::after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.greyMid"));
 
 /**
  * Prevents the browser from scrolling to the previously focused element

package/es/components/Range/index.js

@@ -18,7 +18,7 @@ const track = props => "\n    box-sizing: border-box;\n    border: none;\n    wi
 const Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "Wrapper",
   componentId: "sc-zb0zps-0"
-})(["", " ", " position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;&:before{content:\"", "\";font-size:10px;font-weight:bold;}&:after{content:\"", "\";font-size:10px;font-weight:bold;}", ""], space, layout, props => props.minValue, props => props.maxValue, props => props.inverted ? css(["&:before,&:after{color:", ";}input{&:focus{background:rgba(255,255,255,0.1);}&::-webkit-slider-runnable-track{background:", ";}&::-moz-range-track{background:", ";}&::-ms-track{background:", ";}}output{color:", ";}"], themeGet("colors.white")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.white")(props)) : css([""]));
+})(["", " ", " position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;&::before{content:\"", "\";font-size:10px;font-weight:bold;}&::after{content:\"", "\";font-size:10px;font-weight:bold;}", ""], space, layout, props => props.minValue, props => props.maxValue, props => props.inverted ? css(["&::before,&::after{color:", ";}input{&:focus{background:rgba(255,255,255,0.1);}&::-webkit-slider-runnable-track{background:", ";}&::-moz-range-track{background:", ";}&::-ms-track{background:", ";}}output{color:", ";}"], themeGet("colors.white")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.greyDark")(props), themeGet("colors.white")(props)) : css([""]));
 const Input = /*#__PURE__*/styled.input.attrs({
   type: "range"
 }).withConfig({

package/es/components/SideNavV2/NavItem.js

@@ -20,10 +20,10 @@ const IconWrapper = /*#__PURE__*/styled.span.withConfig({
   displayName: "IconWrapper",
   componentId: "sc-1qz1q0h-0"
 })(["display:inline-flex;align-items:center;justify-content:center;width:", ";flex-shrink:0;> *{width:", " !important;max-width:", ";}"], ICON_COLUMN_WIDTH, ICON_COLUMN_WIDTH, ICON_COLUMN_WIDTH);
-const sharedNavItemStyles = /*#__PURE__*/styledCss(["cursor:pointer;text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:grid;grid-template-columns:", ";place-items:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";", " @media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;}"], themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), ICON_COLUMN_WIDTH, themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), sharedNavItemHoverStyles, BREAKPOINTS.SMALL_SCREEN);
+const sharedNavItemStyles = props => styledCss(["cursor:pointer;text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:grid;grid-template-columns:", ";place-items:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";", " @media screen and (max-width:", "px){width:auto;max-height:30px;height:30px;overflow:visible;}&:focus{outline:0;}"], themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), ICON_COLUMN_WIDTH, themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), !props.active && sharedNavItemHoverStyles, BREAKPOINTS.SMALL_SCREEN);
 const expandedNavItemStyles = props => styledCss(["grid-template-columns:", " 1fr;gap:", ";justify-items:start;align-items:center;padding-left:0;.nav-item-text{font-size:", ";line-height:1;font-weight:", ";color:", ";text-align:left;justify-self:start;padding-left:", ";}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}"], ICON_COLUMN_WIDTH, themeGet("space.s"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.greyDarker"), themeGet("space.s"), props.active ? themeGet("colors.greyDarkest") : themeGet("colors.primary"));
 const variantActiveStyles = {
-  expandableItem: () => styledCss(["color:", ";path{fill:", ";}:after{height:calc(100% + ", " + ", ");position:absolute;right:-", ";top:-", ";content:\"\";border-right:3px solid ", ";z-index:5;}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}@media screen and (max-width:", "px){:after{border-top:3px solid ", ";border-right:none;transform:translateY(-10px);right:auto;width:100%;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("space.xs"), themeGet("space.xs"), themeGet("space.xs"), themeGet("space.xs"), themeGet("colors.primary"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
+  expandableItem: () => styledCss(["color:", ";path{fill:", ";}&:hover .nav-item-text,&:focus .nav-item-text{color:", ";}@media screen and (max-width:", "px){&::after{content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:0;border-top:3px solid ", ";transform:translateY(-10px);z-index:10;}}"], themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"), themeGet("colors.primary"), BREAKPOINTS.SMALL_SCREEN, themeGet("colors.primary")),
   default: styledCss(["", ""], props => sharedNavItemActiveStylesProps(props))
 };
 const getActiveStyles = props => {
@@ -36,11 +36,11 @@ const getActiveStyles = props => {
 const SideNavItemLink = /*#__PURE__*/styled.div.withConfig({
   displayName: "SideNavItemLink",
   componentId: "sc-1qz1q0h-1"
-})(["& > a{", " ", " ", "}"], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
+})(["& > a{", " ", " ", "}"], props => sharedNavItemStyles(props), props => props.isExpanded ? expandedNavItemStyles(props) : "", props => getActiveStyles(props));
 const SideNavItem = /*#__PURE__*/styled("button").withConfig({
   displayName: "SideNavItem",
   componentId: "sc-1qz1q0h-2"
-})(["", " ", " ", ""], sharedNavItemStyles, props => props.isExpanded ? expandedNavItemStyles(props) : "", getActiveStyles);
+})(["", " ", " ", ""], props => sharedNavItemStyles(props), props => props.isExpanded ? expandedNavItemStyles(props) : "", props => getActiveStyles(props));
 const BadgeNumber = /*#__PURE__*/styled("div").withConfig({
   displayName: "BadgeNumber",
   componentId: "sc-1qz1q0h-3"
@@ -76,22 +76,45 @@ const BadgeDot = /*#__PURE__*/styled("div").withConfig({
 const SideNavItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "SideNavItemWrapper",
   componentId: "sc-1qz1q0h-5"
-})(props => css(_objectSpread(_objectSpread({
+})(props => css(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   padding: themeGet("space.xs")(props),
   borderRadius: themeGet("radii.2")(props),
   width: "100%",
+  position: "relative",
   "&:nth-child(1 of .bottom-aligned) ": {
     marginTop: props.bottomAligned && "auto"
-  },
-  "&:has(button:hover), &:has(a:hover)": {
+  }
+}, !props.isActive && !props.isLink && {
+  "&:has(button:hover)": {
+    backgroundColor: themeGet("colors.greyLightest")(props)
+  }
+}), !props.isActive && props.isLink && {
+  "&:has(a:hover):not(:has(a.active))": {
     backgroundColor: themeGet("colors.greyLightest")(props)
   }
-}, props.isActive && props.isLink && {
+}), props.isActive && props.isLink && {
   backgroundColor: themeGet("colors.primaryLightest")(props)
+}), props.isActive && props.isExpandable && {
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    right: "-9px",
+    top: "0",
+    bottom: "0",
+    width: "3px",
+    backgroundColor: themeGet("colors.primary")(props),
+    zIndex: 5
+  }
 }), {}, {
-  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
+  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: _objectSpread(_objectSpread({
     padding: themeGet("space.xs")(props)
-  }
+  }, props.isActive && props.isExpandable && {
+    "&::after": {
+      display: "none"
+    }
+  }), props.isActive && props.isLink && {
+    backgroundColor: themeGet("colors.primaryLightest")(props)
+  })
 })));
 
 /**
@@ -139,6 +162,7 @@ const NavItem = _ref => {
         ref: el => navItemRefs.current[item.index] = el,
         children: /*#__PURE__*/_jsxs(Component, {
           item: item,
+          className: isActive ? "active" : "",
           children: [/*#__PURE__*/_jsx(IconWrapper, {
             children: /*#__PURE__*/_jsx(Icon, {
               icon: ["far", item.iconName],
@@ -175,19 +199,21 @@ const NavItem = _ref => {
       }), item.index);
     }
   }, [item, isActive, isExpanded, isSmallScreen, handleItemClick, navItemRefs]);
-  return isSmallScreen ? /*#__PURE__*/_jsx(Popover, {
-    text: item.name,
-    direction: "top",
-    textAlign: "center",
-    width: "fit-content",
-    tabIndex: "-1",
-    children: renderedNavItem
-  }) : /*#__PURE__*/_jsx(SideNavItemWrapper, {
+  const isExpandable = item.actionType === "component";
+  return /*#__PURE__*/_jsx(SideNavItemWrapper, {
     className: item.bottomAligned && "bottom-aligned",
     bottomAligned: item.bottomAligned,
     isActive: isActive,
     isLink: item.actionType === "link",
-    children: renderedNavItem
+    isExpandable: isExpandable,
+    children: isSmallScreen ? /*#__PURE__*/_jsx(Popover, {
+      text: item.name,
+      direction: "top",
+      textAlign: "center",
+      width: "fit-content",
+      tabIndex: "-1",
+      children: renderedNavItem
+    }) : renderedNavItem
   });
 };
 NavItem.propTypes = {

package/es/components/SideNavV2/components/BaseSection.js

@@ -12,7 +12,18 @@ import themeGet from "@styled-system/theme-get";
 import Divider from "../../Divider";
 import sharedNavItemHoverStyles, { sharedNavItemActiveStyles, sharedNavItemBaseStyles } from "../styles/sharedHoverStyles";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ItemList = /*#__PURE__*/styled.ul.withConfig({
+const createShouldForwardProp = blockedProps => function shouldForwardProp(prop, defaultValidatorFn) {
+  if (blockedProps.includes(prop)) {
+    return false;
+  }
+  if (typeof defaultValidatorFn === "function") {
+    return defaultValidatorFn(prop);
+  }
+  return true;
+};
+const ItemList = /*#__PURE__*/styled("ul").withConfig({
+  shouldForwardProp: createShouldForwardProp(["isExpanded"])
+}).withConfig({
   displayName: "ItemList",
   componentId: "sc-1y67u5l-0"
 })(["list-style:none;padding:0;margin:0;align-items:", ";text-align:", ";display:flex;flex-direction:column;gap:", ";"], props => props.isExpanded ? "flex-start" : "center", props => props.isExpanded ? "left" : "center", props => themeGet("space.xs")(props));
@@ -20,7 +31,9 @@ const ItemName = /*#__PURE__*/styled.span.withConfig({
   displayName: "ItemName",
   componentId: "sc-1y67u5l-1"
 })(["font-size:", ";"], props => themeGet("fontSizes.1")(props));
-export const Item = /*#__PURE__*/styled.li.withConfig({
+export const Item = /*#__PURE__*/styled("li").withConfig({
+  shouldForwardProp: createShouldForwardProp(["isExpanded", "alignRight"])
+}).withConfig({
   displayName: "Item",
   componentId: "sc-1y67u5l-2"
 })(["display:flex;width:100%;gap:", ";justify-content:", ";align-items:center;a{display:flex;gap:", ";align-items:center;font-size:", ";text-decoration:none;padding:", " ", ";flex:1;", " ", " ", "}"], props => themeGet("space.xs")(props), props => {

package/es/components/SideNavV2/components/ExpandedPanel.js

@@ -65,7 +65,7 @@ const ExpandedPanel = _ref => {
   return /*#__PURE__*/_jsxs(Box, {
     position: "relative",
     height: "100%",
-    zIndex: "1",
+    zIndex: isSmallScreen ? "1000" : "1",
     children: [/*#__PURE__*/_jsxs(SideNavExpanded, {
       ref: el => {
         expandedRef.current = el;

package/es/components/SideNavV2/sections/SideNavCurrentViewSection.js

@@ -28,7 +28,7 @@ const UnstyledNavLink = /*#__PURE__*/styled(NavLink).withConfig({
 const ActiveAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "ActiveAvatar",
   componentId: "sc-12clz4a-3"
-})(["position:relative;&:before{content:\"\";position:absolute;right:0;transform:translateX(10px);width:0px;height:0px;border-style:solid;border-width:7px 8px 7px 0;border-color:transparent ", " transparent transparent;", "}}"], themeGet("colors.greyLighter"), props => props.isSmallScreen && "\n        right: auto;\n        top: 0;\n        transform: translate(5px, -13px);\n        border-width: 8px 7px 0 7px;\n        border-color: ".concat(props.theme.colors.greyLighter, " transparent transparent transparent;\n      "));
+})(["position:relative;&::before{content:\"\";position:absolute;right:0;transform:translateX(10px);width:0px;height:0px;border-style:solid;border-width:7px 8px 7px 0;border-color:transparent ", " transparent transparent;", "}}"], themeGet("colors.greyLighter"), props => props.isSmallScreen && "\n        right: auto;\n        top: 0;\n        transform: translate(5px, -13px);\n        border-width: 8px 7px 0 7px;\n        border-color: ".concat(props.theme.colors.greyLighter, " transparent transparent transparent;\n      "));
 const CurrentViewContent = _ref => {
   var _subNav$;
   let {

package/es/components/SideNavV2/styles/SideNavV2.styles.js

@@ -6,14 +6,25 @@ import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import Popover from "../../Popover";
 import { BREAKPOINTS, EXPANDED_SIZE, SIDENAV_WIDTHS } from "../constants/sideNav";
+const createShouldForwardProp = blockedProps => function shouldForwardProp(prop, defaultValidatorFn) {
+  if (blockedProps.includes(prop)) {
+    return false;
+  }
+  if (typeof defaultValidatorFn === "function") {
+    return defaultValidatorFn(prop);
+  }
+  return true;
+};
+const filterIsExpandedProp = createShouldForwardProp(["isExpanded"]);
 export const SideNavWrapper = /*#__PURE__*/styled("div").withConfig({
+  shouldForwardProp: createShouldForwardProp(["sideNavHeight"]),
   displayName: "SideNavWrapper",
   componentId: "sc-y5tsj2-0"
 })(props => css({
   bg: themeGet("colors.white")(props),
   color: themeGet("colors.greyDarkest")(props),
-  minHeight: "100%",
-  height: "100%",
+  minHeight: props.sideNavHeight || "100%",
+  height: props.sideNavHeight || "100%",
   maxWidth: "max-content",
   fontFamily: themeGet("fonts.main")(props),
   borderRight: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
@@ -36,11 +47,12 @@ export const SideNavWrapper = /*#__PURE__*/styled("div").withConfig({
     position: "fixed",
     bottom: "0",
     left: "0",
-    zIndex: "6",
+    zIndex: "1000",
     flexDirection: "column-reverse"
   }
 }));
 export const SideNavItems = /*#__PURE__*/styled("div").withConfig({
+  shouldForwardProp: filterIsExpandedProp,
   displayName: "SideNavItems",
   componentId: "sc-y5tsj2-1"
 })(props => css(_objectSpread(_objectSpread({
@@ -70,7 +82,9 @@ export const SideNavItems = /*#__PURE__*/styled("div").withConfig({
     flexDirection: "row",
     justifyContent: "space-around",
     alignItems: "center",
-    width: "auto"
+    width: "auto",
+    zIndex: 0,
+    position: "relative"
   }
 })));
 export const PanelControlTooltip = /*#__PURE__*/styled(Popover).withConfig({
@@ -144,6 +158,7 @@ export const ResizeHandle = /*#__PURE__*/styled("div").withConfig({
   }
 }));
 export const ToggleHandle = /*#__PURE__*/styled("button").withConfig({
+  shouldForwardProp: filterIsExpandedProp,
   displayName: "ToggleHandle",
   componentId: "sc-y5tsj2-5"
 })(props => css({
@@ -244,13 +259,14 @@ export const SideNavExpanded = /*#__PURE__*/styled("div").withConfig({
   // Always inherit height on desktop
   overflowY: "auto",
   overflowX: "hidden",
-  padding: "16px",
+  padding: "10px 16px 16px 16px",
   borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
+  zIndex: 1,
   "&:focus": {
     outline: "0"
   },
   ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
-    width: "100%",
+    width: "100vw",
     minWidth: "initial",
     maxWidth: "initial",
     borderLeft: "none",
@@ -258,6 +274,11 @@ export const SideNavExpanded = /*#__PURE__*/styled("div").withConfig({
     height: props.height ? "".concat(props.height, "px") : "auto",
     // Only apply height on mobile
     minHeight: props.large ? "".concat(EXPANDED_SIZE.largeMin, "px") : "".concat(EXPANDED_SIZE.normalMin, "px"),
-    maxHeight: props.large ? "".concat(EXPANDED_SIZE.largeMax, "px") : "".concat(EXPANDED_SIZE.normalMax, "px")
+    maxHeight: props.large ? "".concat(EXPANDED_SIZE.largeMax, "px") : "".concat(EXPANDED_SIZE.normalMax, "px"),
+    zIndex: 1001,
+    position: "absolute",
+    bottom: "100%",
+    left: "0",
+    right: "0"
   }
 }));

package/es/components/SideNavV2/styles/sharedHoverStyles.js

@@ -6,7 +6,7 @@ import { themeGet } from "@styled-system/theme-get";
  * Provides consistent grey background and primary color on hover
  * Works for both collapsed and expanded states
  */
-const sharedNavItemHoverStyles = /*#__PURE__*/css(["&:hover:not(.active),&:focus:not(.active){outline:none;background-color:", ";color:", ";}path{transition:", ";}&:hover:not(.active) path,&:focus:not(.active) path{fill:", ";}"], themeGet("colors.greyLightest"), themeGet("colors.primary"), themeGet("transition.transitionDefault"), themeGet("colors.primary"));
+const sharedNavItemHoverStyles = /*#__PURE__*/css(["&:hover:not(.active),&:focus:not(.active),&:active:not(.active){outline:none;background-color:", ";color:", ";}path{transition:", ";}&:hover:not(.active) path,&:focus:not(.active) path,&:active:not(.active) path{fill:", ";}"], themeGet("colors.greyLightest"), themeGet("colors.primary"), themeGet("transition.transitionDefault"), themeGet("colors.primary"));
 
 /**
  * Shared active state styles for all SideNav menu items

package/es/components/Tabs/index.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TabsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabsContainer",
   componentId: "sc-15tpvnt-0"
-})(["position:relative;width:100%;height:", ";&:after{content:\"\";position:absolute;bottom:0;width:100%;height:100%;background-color:", ";border-bottom:2px solid ", ";z-index:0;}"], themeGet("appScale.tabsHeight"), themeGet("colors.white"), themeGet("colors.greyLighter"));
+})(["position:relative;width:100%;height:", ";&::after{content:\"\";position:absolute;bottom:0;width:100%;height:100%;background-color:", ";border-bottom:2px solid ", ";z-index:0;}"], themeGet("appScale.tabsHeight"), themeGet("colors.white"), themeGet("colors.greyLighter"));
 const TabWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabWrapper",
   componentId: "sc-15tpvnt-1"

package/es/components/TextInput/index.js

@@ -56,7 +56,7 @@ const Label = /*#__PURE__*/styled.label.withConfig({
 })(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.1")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? "40px" : "12px", props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
   let inputHeight = themeGet("appScale.inputHeightLarge")(props);
   return "calc(".concat(inputHeight, " / 3)");
-}, props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props)) : css([""]), props => props.mandatory ? css(["&:after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]));
+}, props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props)) : css([""]), props => props.mandatory ? css(["&::after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]));
 const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     inverted,

package/es/components/Toggle/index.js

@@ -18,11 +18,11 @@ const Input = /*#__PURE__*/styled.input.attrs({
 }).withConfig({
   displayName: "Input",
   componentId: "sc-f6l22k-1"
-})(["opacity:0;position:absolute;visibility:", ";margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}&:checked{+ label{background:", ";&:after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], props => props.srHide ? "hidden" : "visible", props => themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props), props => themeGet("colors.success")(props), props => themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props));
+})(["opacity:0;position:absolute;visibility:", ";margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}&:checked{+ label{background:", ";&::after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], props => props.srHide ? "hidden" : "visible", props => themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props), props => themeGet("colors.success")(props), props => themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props));
 const Item = /*#__PURE__*/styled.label.withConfig({
   displayName: "Item",
   componentId: "sc-f6l22k-2"
-})(["cursor:pointer;flex:0 0 auto;margin:0;display:block;position:relative;transition:", ";background:", ";width:", ";height:", ";border-radius:", ";&:after{content:\"\";position:absolute;top:3px;left:3px;background:", ";transition:", ";width:", ";height:", ";border-radius:", ";}&:active{&:after{width:", ";}}", ";"], props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyDarker")(props), props => props.small ? "36px" : "44px", props => props.small ? "20px" : "24px", props => props.small ? "10px" : "12px", props => themeGet("colors.white")(props), props => themeGet("transition.transitionDefault")(props), props => props.small ? "14px" : "18px", props => props.small ? "14px" : "18px", props => props.small ? "7px" : "9px", props => props.small ? "20px" : "24px", props => props.disabled ? css(["opacity:0.5;"]) : css([""]));
+})(["cursor:pointer;flex:0 0 auto;margin:0;display:block;position:relative;transition:", ";background:", ";width:", ";height:", ";border-radius:", ";&::after{content:\"\";position:absolute;top:3px;left:3px;background:", ";transition:", ";width:", ";height:", ";border-radius:", ";}&:active{&::after{width:", ";}}", ";"], props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyDarker")(props), props => props.small ? "36px" : "44px", props => props.small ? "20px" : "24px", props => props.small ? "10px" : "12px", props => themeGet("colors.white")(props), props => themeGet("transition.transitionDefault")(props), props => props.small ? "14px" : "18px", props => props.small ? "14px" : "18px", props => props.small ? "7px" : "9px", props => props.small ? "20px" : "24px", props => props.disabled ? css(["opacity:0.5;"]) : css([""]));
 const Label = /*#__PURE__*/styled.label.withConfig({
   displayName: "Label",
   componentId: "sc-f6l22k-3"

package/es/components.test.js

@@ -1,4 +1,4 @@
 import * as components from ".";
 test("all components exported", () => {
-  expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Breadcrumbs\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"ButtonLink\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"CodeBlock\",\n      \"ColorPicker\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"FloatingPanels\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"PanelLink\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"RenderCurrentViewSection\",\n      \"Select\",\n      \"SideNavStateProvider\",\n      \"SideNavV2\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Table\",\n      \"Tabs\",\n      \"TabsAlt\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"TreeNav\",\n      \"Typography\",\n      \"VARIANT_COLORS\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n      \"useSideNavStateContext\",\n    ]\n  ");
+  expect(Object.keys(components)).toEqual(["ActionsMenu", "ActionsMenuBody", "ActionsMenuHeading", "ActionsMenuItem", "Avatar", "Badge", "Box", "Breadcrumbs", "Button", "ButtonGroupContainer", "ButtonGroupItem", "ButtonLink", "Card", "Checkbox", "Code", "CodeBlock", "ColorPicker", "DatePicker", "Divider", "Expandable", "Flex", "FlexItem", "FloatingPanels", "GlobalStyles", "Grid", "GridItem", "H1", "H2", "H3", "H4", "H5", "H6", "Header", "HeaderSimple", "Icon", "Loading", "Modal", "Notification", "P", "PanelLink", "Popover", "ProgressBar", "Quote", "RadioButton", "Range", "RenderCurrentViewSection", "Select", "SideNavStateProvider", "SideNavV2", "Small", "Spacer", "StatusDot", "StyledLink", "SystemThemeProvider", "Table", "Tabs", "Tag", "Text", "TextArea", "TextInput", "Toggle", "TreeNav", "Typography", "VARIANT_COLORS", "getOptionByValue", "styleLink", "systemThemeCollapsed", "systemtheme", "useSideNavStateContext"]);
 });

package/es/index.js

@@ -41,8 +41,6 @@ export { default as StatusDot } from "./components/StatusDot";
 export { default as StyledLink, styleLink } from "./components/StyledLink";
 export { default as Table } from "./components/Table";
 export { default as Tabs } from "./components/Tabs";
-/** @deprecated Use Tabs component instead. TabsAlt will be removed in a future version. */
-export { default as TabsAlt } from "./components/TabsAlt";
 export { default as Tag } from "./components/Tag";
 export { default as TextInput } from "./components/TextInput";
 export { default as TextArea } from "./components/TextArea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "engines": {
     "node": ">=20.0.0"
   },
@@ -15,7 +15,7 @@
     "orcs"
   ],
   "homepage": "https://styleguide.orchestrated.io",
-  "license": "SEE LICENSE IN LICENCE",
+  "license": "MIT",
   "module": "es/index.js",
   "main": "es/index.js",
   "repository": {
@@ -42,7 +42,8 @@
     "deploy-storybook": "storybook-to-ghpages",
     "playroom": "playroom start",
     "build-playroom": "playroom build",
-    "dev": "nodemon --ignore es/ ./scripts/dev.js"
+    "dev": "nodemon --ignore es/ ./scripts/dev.js",
+    "test:github-packages-auth": "node scripts/test-github-packages-auth.js"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -71,12 +72,14 @@
     "react-router-dom": "^5.3.4",
     "react-select": "^5.10.2",
     "styled-components": "^6.1.19",
+    "stylis": "^4.3.1",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
     "@babel/eslint-parser": "^7.24.7",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-class-properties": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
@@ -109,6 +112,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^27.5.2",
+    "eslint-plugin-local-rules": "^3.0.2",
     "audit-ci": "^7.1.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.1.0",

package/es/components/TabsAlt/TabsAlt.stories.js

@@ -1,124 +0,0 @@
-import React from "react";
-import TabsAlt from ".";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import Box from "../Box";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  title: "Components/TabsAlt",
-  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
-    boxBorder: "default",
-    shadow: "default",
-    pb: "200px",
-    children: storyFn()
-  })],
-  component: TabsAlt
-};
-const tabsList = [{
-  label: "Details",
-  path: "/details"
-}, {
-  label: "Strategy",
-  path: "/strategy"
-}, {
-  label: "Associations",
-  path: "/associations"
-}, {
-  label: "Visualisation",
-  path: "/visualisation"
-}, {
-  label: "Principles",
-  path: "/principles"
-}, {
-  label: "Planner",
-  path: "/planner"
-}, {
-  label: "Forecast",
-  path: "/forecast"
-}, {
-  label: "Team Builder",
-  path: "/teambuilder"
-}, {
-  label: "History",
-  path: "/history",
-  isVisible: false
-}];
-export const defaultTabs = () => /*#__PURE__*/_jsxs(BrowserRouter, {
-  children: [/*#__PURE__*/_jsx(TabsAlt, {
-    tabsList: tabsList
-  }), /*#__PURE__*/_jsx(Switch, {
-    children: tabsList.map(tab => /*#__PURE__*/_jsx(Route, {
-      path: tab.path,
-      children: /*#__PURE__*/_jsxs(Box, {
-        p: "l",
-        mt: "l",
-        children: ["ROUTE RENDERED: ", tab.label]
-      })
-    }, tab.path))
-  })]
-});
-defaultTabs.storyName = "Default";
-export const clickableTabs = () => {
-  const handleTabClick = tabLabel => {
-    alert("Clicked on ".concat(tabLabel, " tab!"));
-  };
-  const clickableTabsList = [{
-    label: "Details",
-    path: "/details",
-    onClick: () => handleTabClick("Details")
-  }, {
-    label: "Strategy",
-    path: "/strategy",
-    onClick: () => handleTabClick("Strategy")
-  }, {
-    label: "Associations",
-    path: "/associations",
-    onClick: () => handleTabClick("Associations")
-  }, {
-    label: "Visualisation",
-    path: "/visualisation",
-    onClick: () => handleTabClick("Visualisation")
-  }, {
-    label: "Principles",
-    path: "/principles",
-    onClick: () => handleTabClick("Principles")
-  }, {
-    label: "Planner",
-    path: "/planner",
-    onClick: () => handleTabClick("Planner")
-  }, {
-    label: "Forecast",
-    path: "/forecast",
-    onClick: () => handleTabClick("Forecast")
-  }, {
-    label: "Team Builder",
-    path: "/teambuilder",
-    onClick: () => handleTabClick("Team Builder")
-  }, {
-    label: "History",
-    path: "/history",
-    onClick: () => handleTabClick("History")
-  }];
-  return /*#__PURE__*/_jsx(BrowserRouter, {
-    children: /*#__PURE__*/_jsxs(Box, {
-      p: "l",
-      children: [/*#__PURE__*/_jsx("h3", {
-        children: "Clickable Tabs (including More menu items)"
-      }), /*#__PURE__*/_jsx("p", {
-        children: "All tabs have onClick handlers. Check the More menu items too!"
-      }), /*#__PURE__*/_jsx(TabsAlt, {
-        tabsList: clickableTabsList
-      })]
-    })
-  });
-};
-clickableTabs.storyName = "Clickable Tabs";
-defaultTabs.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "defaultTabs"
-};
-clickableTabs.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "clickableTabs"
-};

package/es/components/TabsAlt/index.js

@@ -1,279 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useState, useRef, useEffect, useCallback, createElement as _createElement } from "react";
-import styled, { css } from "styled-components";
-import { NavLink, useLocation } from "react-router-dom";
-import { isEqual } from "lodash";
-import ActionsMenu, { ActionsMenuItem } from "../ActionsMenu";
-import Icon from "../Icon";
-import FlexItem from "../Flex";
-import { themeGet } from "@styled-system/theme-get";
-import PropTypes from "prop-types";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TabsContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TabsContainer",
-  componentId: "sc-hkpvfu-0"
-})(["position:relative;width:100%;height:", ";&:after{content:\"\";position:absolute;bottom:0;width:100%;height:100%;background-color:", ";border-bottom:2px solid ", ";z-index:0;}"], themeGet("appScale.tabsHeight"), themeGet("colors.white"), themeGet("colors.greyLighter"));
-const TabWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TabWrapper",
-  componentId: "sc-hkpvfu-1"
-})(["position:relative;width:100%;z-index:1;height:inherit;"]);
-const VisibleTabs = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VisibleTabs",
-  componentId: "sc-hkpvfu-2"
-})(["flex-shrink:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;height:inherit;"]);
-const activeTabStyle = /*#__PURE__*/css(["background-color:", ";color:", ";border-bottom:2px solid ", ";cursor:default;&:hover,&:focus{background-color:", ";color:", ";box-shadow:none;}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"));
-const TabStyles = /*#__PURE__*/css(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:0 ", ";height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
-  let {
-    fullWidth
-  } = _ref;
-  return fullWidth ? "100%" : "fit-content";
-}, themeGet("colors.greyLighter"), themeGet("space.4"), themeGet("appScale.tabsHeight"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyDark"), _ref2 => {
-  let {
-    tabInShowMore
-  } = _ref2;
-  return tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
-}, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
-const NavTab = /*#__PURE__*/styled(NavLink).withConfig({
-  displayName: "NavTab",
-  componentId: "sc-hkpvfu-3"
-})(["", ""], TabStyles);
-const Tab = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Tab",
-  componentId: "sc-hkpvfu-4"
-})(["", ""], TabStyles);
-const ShowMoreButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ShowMoreButton",
-  componentId: "sc-hkpvfu-5"
-})(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";background-color:", ";border-bottom:2px solid ", ";transition:", ";padding:0 ", ";height:", ";color:", ";display:", ";align-items:center;cursor:pointer;&:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.4"), themeGet("appScale.tabsHeight"), themeGet("colors.greyDark"), _ref3 => {
-  let {
-    showMoreVisible
-  } = _ref3;
-  return showMoreVisible ? "flex" : "none";
-}, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
-const ShowMoreTabs = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ShowMoreTabs",
-  componentId: "sc-hkpvfu-6"
-})(["border-radius:", ";background-color:", ";width:fit-content;overflow:hidden;display:flex;gap:1px;flex-direction:column;justify-content:flex-start;box-shadow:", ";& [class^=\"TabsAlt__Tab\"]{border:0;padding:", ";text-align:left;}"], themeGet("radii.2"), themeGet("colors.greyLighter"), themeGet("shadows.boxDefault"), themeGet("space.3"));
-const tabsGap = 0;
-
-/**
- * TabsAlt Component
- *
- * @deprecated This component is deprecated and will be removed in a future version.
- * Please migrate to the `Tabs` component instead. TabsAlt was an alternative implementation
- * that has been consolidated into Tabs. Both components are currently available during
- * the migration period, but TabsAlt should not be used in new code.
- *
- * Migration: Replace `TabsAlt` with `Tabs` - the API is identical and the styling
- * has been improved in the Tabs component.
- */
-const TabsAlt = _ref4 => {
-  let {
-    tabsList
-  } = _ref4;
-  // Deprecation warning - shown in development mode only
-  if (process.env.NODE_ENV !== "production") {
-    console.warn("TabsAlt component is deprecated and will be removed in a future version. " + "Please migrate to the Tabs component instead. TabsAlt was an alternative implementation " + "that has been consolidated into Tabs. Both components are available during the migration " + "period, but TabsAlt should not be used in new code.");
-  }
-  const [isMounted, setIsMounted] = useState(false);
-  const containerRef = useRef(null);
-  const containerVisibleWidth = useRef(0);
-  const [showMoreTabs, setShowMoreTabs] = useState([]);
-  const calculateVisibility = useCallback(actionElements => {
-    var _showMoreButton$offse;
-    const showMoreButton = document.getElementById("show-more-button");
-    const showMoreButtonWidth = (_showMoreButton$offse = showMoreButton === null || showMoreButton === void 0 ? void 0 : showMoreButton.offsetWidth) !== null && _showMoreButton$offse !== void 0 ? _showMoreButton$offse : 0;
-    // as we loop through the tabs, we need to calculate the width of the visible tabs.
-    let calculatedWidth = showMoreTabs.length ? showMoreButtonWidth : 0;
-
-    // variable for the list of hidden tabs which will be put to react state
-    const newShowMoreTabs = [];
-    [...actionElements].filter(el => el.tagName === "A") // this ensures that the ShowMore button is not included in this logic
-    .forEach((actionEl, i) => {
-      // visibleElementsWidth will be increased by
-      // the corresponding width of the element + gapWidth
-      calculatedWidth += actionEl.offsetWidth + tabsGap;
-
-      // compare computed widths and push into newShowMoreTabs if current tab width is bigger than container width
-      if (calculatedWidth >= containerVisibleWidth.current) {
-        newShowMoreTabs.push(i);
-      }
-    });
-    if (!isEqual(showMoreTabs, newShowMoreTabs)) {
-      // update React state with the list of hidden tabs
-      setShowMoreTabs(newShowMoreTabs);
-    }
-  }, [showMoreTabs]);
-  useEffect(() => {
-    var _containerRef$current;
-    const actionElements = ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children) || [];
-    const resizeObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        if (entry.contentBoxSize) {
-          const contentBoxSize = entry.contentBoxSize[0];
-
-          // Math.ceil is necessary to round up and return
-          // the smallest integer for the size of observed element
-          containerVisibleWidth.current = Math.ceil(contentBoxSize.inlineSize);
-
-          // invoke the functions which calculates tabs visibility
-          // and sets data to the list of hidden tabs
-          calculateVisibility(actionElements);
-        }
-      }
-    });
-
-    // This is to help in cases where useEffect callback is triggered before React repaint.
-    if (!isMounted) {
-      setTimeout(() => {
-        setIsMounted(true);
-        calculateVisibility(actionElements);
-      }, 500);
-    } else {
-      // adding ResizeObserver to the observed container
-      resizeObserver.observe(containerRef.current);
-    }
-  }, [calculateVisibility, isMounted]);
-  const visibleTabsList = tabsList.filter(tab => {
-    var _tab$isVisible;
-    return (_tab$isVisible = tab.isVisible) !== null && _tab$isVisible !== void 0 ? _tab$isVisible : true;
-  });
-  const showMoreTabsList = visibleTabsList.filter((_tab, i) => showMoreTabs.includes(i));
-  const location = useLocation();
-  const showMoreItemActive = showMoreTabsList.find(action => {
-    try {
-      return location.pathname.endsWith(action.path);
-    } catch (_unused) {
-      // Fallback for environments without router context
-      return false;
-    }
-  });
-  return /*#__PURE__*/_jsx(TabsContainer, {
-    children: /*#__PURE__*/_jsx(TabWrapper, {
-      children: /*#__PURE__*/_jsxs(VisibleTabs, {
-        style: {
-          gap: tabsGap
-        },
-        ref: containerRef,
-        role: "tablist",
-        children: [visibleTabsList.map((tab, i) => {
-          const sharedProps = {
-            className: tab.className,
-            id: tab.id,
-            "data-testid": tab["data-testid"],
-            key: tab.path,
-            tabInShowMore: showMoreTabs.includes(i),
-            role: "tab"
-          };
-          if (tab !== null && tab !== void 0 && tab.onClick) {
-            return /*#__PURE__*/_createElement(Tab, _objectSpread(_objectSpread({}, sharedProps), {}, {
-              onClick: tab === null || tab === void 0 ? void 0 : tab.onClick,
-              key: tab.id
-            }), tab.label);
-          }
-          return /*#__PURE__*/_createElement(NavTab, _objectSpread(_objectSpread({}, sharedProps), {}, {
-            to: tab.path,
-            key: tab.id || tab.path
-          }), tab.label);
-        }), /*#__PURE__*/_jsx(ActionsMenu, {
-          direction: "bottom-end",
-          role: "presentation",
-          renderTrigger: props => /*#__PURE__*/_jsxs(ShowMoreButton, _objectSpread(_objectSpread({}, props), {}, {
-            showMoreVisible: showMoreTabsList.length,
-            id: "show-more-button",
-            className: showMoreItemActive && "hasActive",
-            role: "tab",
-            children: [/*#__PURE__*/_jsx(FlexItem, {
-              flex: "0 0 auto",
-              children: "More"
-            }), /*#__PURE__*/_jsx(FlexItem, {
-              flex: "0 0 auto",
-              children: /*#__PURE__*/_jsx(Icon, {
-                icon: ["fas", "chevron-down"],
-                title: "Down",
-                ml: "xs",
-                size: "sm"
-              })
-            })]
-          })),
-          closeOnClick: true,
-          children: /*#__PURE__*/_jsx(ShowMoreTabs, {
-            children: showMoreTabsList.map(tab => {
-              const sharedProps = {
-                className: tab.className,
-                id: tab.id,
-                "data-testid": tab["data-testid"],
-                fullWidth: true
-              };
-              if (tab !== null && tab !== void 0 && tab.onClick) {
-                return /*#__PURE__*/_jsx(ActionsMenuItem, _objectSpread(_objectSpread({}, sharedProps), {}, {
-                  Component: Tab,
-                  onClick: tab.onClick,
-                  children: tab.label
-                }), tab.path);
-              }
-              return /*#__PURE__*/_jsx(ActionsMenuItem, _objectSpread(_objectSpread({}, sharedProps), {}, {
-                Component: NavTab,
-                to: tab.path,
-                children: tab.label
-              }), tab.path);
-            })
-          })
-        })]
-      })
-    })
-  });
-};
-TabsAlt.propTypes = {
-  /**
-   * Array of tab objects to display.
-   * Each tab object should have: label (string, required), path (string, required),
-   * isVisible (bool, optional, defaults to true), onClick (function, optional).
-   *
-   * @deprecated Use Tabs component instead - same API, improved styling.
-   */
-  tabsList: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    path: PropTypes.string.isRequired,
-    isVisible: PropTypes.bool,
-    onClick: PropTypes.func
-  })).isRequired
-};
-TabsAlt.__docgenInfo = {
-  "description": "TabsAlt Component\n\n@deprecated This component is deprecated and will be removed in a future version.\nPlease migrate to the `Tabs` component instead. TabsAlt was an alternative implementation\nthat has been consolidated into Tabs. Both components are currently available during\nthe migration period, but TabsAlt should not be used in new code.\n\nMigration: Replace `TabsAlt` with `Tabs` - the API is identical and the styling\nhas been improved in the Tabs component.",
-  "methods": [],
-  "displayName": "TabsAlt",
-  "props": {
-    "tabsList": {
-      "description": "Array of tab objects to display.\nEach tab object should have: label (string, required), path (string, required),\nisVisible (bool, optional, defaults to true), onClick (function, optional).\n\n@deprecated Use Tabs component instead - same API, improved styling.",
-      "type": {
-        "name": "arrayOf",
-        "value": {
-          "name": "shape",
-          "value": {
-            "label": {
-              "name": "string",
-              "required": true
-            },
-            "path": {
-              "name": "string",
-              "required": true
-            },
-            "isVisible": {
-              "name": "bool",
-              "required": false
-            },
-            "onClick": {
-              "name": "func",
-              "required": false
-            }
-          }
-        }
-      },
-      "required": true
-    }
-  }
-};
-export default TabsAlt;