@dxc-technology/halstack-react 0.0.0-2c43bcf → 0.0.0-2c7db3b

package/HalstackContext.d.ts

@@ -219,6 +219,29 @@ declare const HalstackContext: React.Context<DeepPartial<{
         focusBorderThickness: string;
         focusBorderRadius: string;
     };
+    contextualMenu: {
+        fontFamily: string;
+        backgroundColor: string;
+        borderColor: string;
+        menuItemFontColor: string;
+        menuItemFontSize: string;
+        menuItemFontStyle: string;
+        menuItemFontWeight: string;
+        menuItemLineHeight: string;
+        hoverMenuItemBackgroundColor: string;
+        activeMenuItemBackgroundColor: string;
+        selectedMenuItemBackgroundColor: string;
+        hoverSelectedMenuItemBackgroundColor: string;
+        activeSelectedMenuItemBackgroundColor: string;
+        selectedMenuItemFontWeight: string;
+        sectionTitleFontColor: string;
+        sectionTitleFontSize: string;
+        sectionTitleFontStyle: string;
+        sectionTitleFontWeight: string;
+        sectionTitleLineHeight: string;
+        iconColor: string;
+        iconSize: string;
+    };
     dateInput: {
         pickerBackgroundColor: string;
         pickerFontColor: string;

package/HalstackContext.js

@@ -54,7 +54,7 @@ var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
   return allTokensCopy;
 };
 var parseTheme = function parseTheme(theme) {
-  var _theme$alert$baseColo, _theme$alert, _theme$alert$accentCo, _theme$alert2, _theme$alert$accentCo2, _theme$alert3, _theme$alert$overlayC, _theme$alert4, _theme$accordion$assi, _theme$accordion, _theme$accordion$titl, _theme$accordion2, _theme$accordion$acce, _theme$accordion3, _theme$accordion$acce2, _theme$accordion4, _addLightness, _theme$accordion5, _theme$box$baseColor, _theme$box, _theme$button$primary, _theme$button, _theme$button$baseCol, _theme$button2, _theme$button$baseCol2, _theme$button3, _theme$button$seconda, _theme$button4, _theme$button$baseCol3, _theme$button5, _theme$button$baseCol4, _theme$button6, _theme$button$baseCol5, _theme$button7, _subLightness, _theme$button8, _subLightness2, _theme$button9, _subLightness3, _theme$button10, _addLightness2, _theme$button11, _addLightness3, _theme$button12, _theme$checkbox$baseC, _theme$checkbox, _theme$checkbox$baseC2, _theme$checkbox2, _theme$checkbox$check, _theme$checkbox3, _theme$checkbox$fontC, _theme$checkbox4, _subLightness4, _theme$checkbox5, _subLightness5, _theme$checkbox6, _theme$chip$baseColor, _theme$chip, _theme$chip$fontColor, _theme$chip2, _theme$chip$iconColor, _theme$chip3, _subLightness6, _theme$chip4, _subLightness7, _theme$chip5, _theme$dateInput$base, _theme$dateInput, _theme$dateInput$sele, _theme$dateInput2, _subLightness8, _theme$dateInput3, _theme$dateInput$sele2, _theme$dateInput4, _theme$dateInput$base2, _theme$dateInput5, _subLightness9, _theme$dateInput6, _theme$dateInput$sele3, _theme$dateInput7, _addLightness4, _theme$dateInput8, _addLightness5, _theme$dateInput9, _addLightness6, _theme$dateInput10, _theme$dialog$baseCol, _theme$dialog, _theme$dialog$closeIc, _theme$dialog2, _theme$dialog$overlay, _theme$dialog3, _theme$dropdown$baseC, _theme$dropdown, _theme$dropdown$fontC, _theme$dropdown2, _theme$dropdown$fontC2, _theme$dropdown3, _theme$dropdown$fontC3, _theme$dropdown4, _theme$dropdown$optio, _theme$dropdown5, _theme$dropdown$optio2, _theme$dropdown6, _subLightness10, _theme$dropdown7, _subLightness11, _theme$dropdown8, _subLightness12, _theme$dropdown9, _subLightness13, _theme$dropdown10, _theme$fileInput$font, _theme$fileInput, _theme$fileInput$font2, _theme$fileInput2, _theme$fileInput$font3, _theme$fileInput3, _theme$fileInput$font4, _theme$fileInput4, _theme$footer$baseCol, _theme$footer, _theme$footer$fontCol, _theme$footer2, _theme$footer$fontCol2, _theme$footer3, _theme$footer$fontCol3, _theme$footer4, _theme$footer$accentC, _theme$footer5, _theme$footer$logo, _theme$footer6, _theme$header$baseCol, _theme$header, _theme$header$accentC, _theme$header2, _theme$header$menuBas, _theme$header3, _theme$header$fontCol, _theme$header4, _theme$header$hamburg, _theme$header5, _addLightness7, _theme$header6, _theme$header$logo, _theme$header7, _theme$header$logoRes, _theme$header8, _theme$header$content, _theme$header9, _theme$header$overlay, _theme$header10, _theme$link$baseColor, _theme$link, _theme$link$baseColor2, _theme$link2, _theme$navTabs$baseCo, _theme$navTabs, _theme$navTabs$baseCo2, _theme$navTabs2, _theme$navTabs$baseCo3, _theme$navTabs3, _theme$navTabs$baseCo4, _theme$navTabs4, _theme$navTabs$accent, _theme$navTabs5, _addLightness8, _theme$navTabs6, _addLightness9, _theme$navTabs7, _theme$paginator$base, _theme$paginator, _theme$paginator$font, _theme$paginator2, _theme$progressBar$ac, _theme$progressBar, _theme$progressBar$ba, _theme$progressBar2, _theme$progressBar$fo, _theme$progressBar3, _theme$progressBar$fo2, _theme$progressBar4, _theme$progressBar$fo3, _theme$progressBar5, _theme$progressBar$ov, _theme$progressBar6, _theme$progressBar$ov2, _theme$progressBar7, _theme$quickNav$fontC, _theme$quickNav, _theme$quickNav$accen, _theme$quickNav2, _theme$radioGroup$bas, _theme$radioGroup, _theme$radioGroup$fon, _theme$radioGroup2, _theme$radioGroup$fon2, _theme$radioGroup3, _theme$radioGroup$fon3, _theme$radioGroup4, _subLightness14, _theme$radioGroup5, _subLightness15, _theme$radioGroup6, _theme$select$selecte, _theme$select, _theme$select$fontCol, _theme$select2, _theme$select$fontCol2, _theme$select3, _theme$select$fontCol3, _theme$select4, _theme$select$optionF, _theme$select5, _addLightness10, _theme$select6, _theme$select$fontCol4, _theme$select7, _theme$select$hoverBo, _theme$select8, _subLightness16, _theme$select9, _subLightness17, _theme$select10, _theme$sidenav$baseCo, _theme$sidenav, _theme$slider$fontCol, _theme$slider, _theme$slider$fontCol2, _theme$slider2, _theme$slider$fontCol3, _theme$slider3, _theme$slider$baseCol, _theme$slider4, _theme$slider$baseCol2, _theme$slider5, _theme$slider$baseCol3, _theme$slider6, _theme$slider$baseCol4, _theme$slider7, _theme$slider$totalLi, _theme$slider8, _subLightness18, _theme$slider9, _subLightness19, _theme$slider10, _theme$spinner$accent, _theme$spinner, _theme$spinner$baseCo, _theme$spinner2, _theme$spinner$overla, _theme$spinner3, _theme$spinner$fontCo, _theme$spinner4, _theme$spinner$fontCo2, _theme$spinner5, _theme$spinner$overla2, _theme$spinner6, _theme$spinner$overla3, _theme$spinner7, _theme$switch$checked, _theme$switch, _theme$switch$fontCol, _theme$switch2, _addLightness11, _theme$switch3, _theme$table$baseColo, _theme$table, _theme$table$headerFo, _theme$table2, _theme$table$cellFont, _theme$table3, _theme$table$headerFo2, _theme$table4, _theme$tabs$baseColor, _theme$tabs, _theme$tabs$baseColor2, _theme$tabs2, _theme$tabs$baseColor3, _theme$tabs3, _theme$tabs$baseColor4, _theme$tabs4, _addLightness12, _theme$tabs5, _addLightness13, _theme$tabs6, _theme$tag$fontColor, _theme$tag, _theme$tag$iconColor, _theme$tag2, _theme$textInput$font, _theme$textInput, _theme$textInput$font2, _theme$textInput2, _theme$textInput$font3, _theme$textInput3, _theme$textInput$font4, _theme$textInput4, _theme$textInput$font5, _theme$textInput5, _theme$textInput$font6, _theme$textInput6, _theme$textInput$font7, _theme$textInput7, _theme$textInput$hove, _theme$textInput8, _addLightness14, _theme$textInput9, _addLightness15, _theme$textInput10, _addLightness16, _theme$textInput11, _theme$textarea$fontC, _theme$textarea, _theme$textarea$fontC2, _theme$textarea2, _theme$textarea$fontC3, _theme$textarea3, _theme$textarea$hover, _theme$textarea4, _addLightness17, _theme$textarea5, _theme$toggleGroup$se, _theme$toggleGroup, _theme$toggleGroup$se2, _theme$toggleGroup2, _theme$toggleGroup$un, _theme$toggleGroup3, _theme$toggleGroup$se3, _theme$toggleGroup4, _theme$toggleGroup$un2, _theme$toggleGroup5, _subLightness20, _theme$toggleGroup6, _subLightness21, _theme$toggleGroup7, _addLightness18, _theme$toggleGroup8, _addLightness19, _theme$toggleGroup9, _subLightness22, _theme$toggleGroup10, _theme$wizard$baseCol, _theme$wizard, _theme$wizard$selecte, _theme$wizard2, _theme$wizard$baseCol2, _theme$wizard3, _theme$wizard$fontCol, _theme$wizard4, _theme$wizard$fontCol2, _theme$wizard5, _theme$wizard$fontCol3, _theme$wizard6, _theme$wizard$fontCol4, _theme$wizard7, _addLightness20, _theme$wizard8, _addLightness21, _theme$wizard9, _addLightness22, _theme$wizard10, _addLightness23, _theme$wizard11;
+  var _theme$alert$baseColo, _theme$alert, _theme$alert$accentCo, _theme$alert2, _theme$alert$accentCo2, _theme$alert3, _theme$alert$overlayC, _theme$alert4, _theme$accordion$assi, _theme$accordion, _theme$accordion$titl, _theme$accordion2, _theme$accordion$acce, _theme$accordion3, _theme$accordion$acce2, _theme$accordion4, _addLightness, _theme$accordion5, _theme$box$baseColor, _theme$box, _theme$button$primary, _theme$button, _theme$button$baseCol, _theme$button2, _theme$button$baseCol2, _theme$button3, _theme$button$seconda, _theme$button4, _theme$button$baseCol3, _theme$button5, _theme$button$baseCol4, _theme$button6, _theme$button$baseCol5, _theme$button7, _subLightness, _theme$button8, _subLightness2, _theme$button9, _subLightness3, _theme$button10, _addLightness2, _theme$button11, _addLightness3, _theme$button12, _theme$checkbox$baseC, _theme$checkbox, _theme$checkbox$baseC2, _theme$checkbox2, _theme$checkbox$check, _theme$checkbox3, _theme$checkbox$fontC, _theme$checkbox4, _subLightness4, _theme$checkbox5, _subLightness5, _theme$checkbox6, _theme$chip$baseColor, _theme$chip, _theme$chip$fontColor, _theme$chip2, _theme$chip$iconColor, _theme$chip3, _subLightness6, _theme$chip4, _subLightness7, _theme$chip5, _theme$contextualMenu, _theme$contextualMenu2, _subLightness8, _theme$contextualMenu3, _subLightness9, _theme$contextualMenu4, _theme$contextualMenu5, _theme$contextualMenu6, _subLightness10, _theme$contextualMenu7, _subLightness11, _theme$contextualMenu8, _theme$contextualMenu9, _theme$contextualMenu10, _theme$contextualMenu11, _theme$contextualMenu12, _theme$contextualMenu13, _theme$contextualMenu14, _theme$dateInput$base, _theme$dateInput, _theme$dateInput$sele, _theme$dateInput2, _subLightness12, _theme$dateInput3, _theme$dateInput$sele2, _theme$dateInput4, _theme$dateInput$base2, _theme$dateInput5, _subLightness13, _theme$dateInput6, _theme$dateInput$sele3, _theme$dateInput7, _addLightness4, _theme$dateInput8, _addLightness5, _theme$dateInput9, _addLightness6, _theme$dateInput10, _theme$dialog$baseCol, _theme$dialog, _theme$dialog$closeIc, _theme$dialog2, _theme$dialog$overlay, _theme$dialog3, _theme$dropdown$baseC, _theme$dropdown, _theme$dropdown$fontC, _theme$dropdown2, _theme$dropdown$fontC2, _theme$dropdown3, _theme$dropdown$fontC3, _theme$dropdown4, _theme$dropdown$optio, _theme$dropdown5, _theme$dropdown$optio2, _theme$dropdown6, _subLightness14, _theme$dropdown7, _subLightness15, _theme$dropdown8, _subLightness16, _theme$dropdown9, _subLightness17, _theme$dropdown10, _theme$fileInput$font, _theme$fileInput, _theme$fileInput$font2, _theme$fileInput2, _theme$fileInput$font3, _theme$fileInput3, _theme$fileInput$font4, _theme$fileInput4, _theme$footer$baseCol, _theme$footer, _theme$footer$fontCol, _theme$footer2, _theme$footer$fontCol2, _theme$footer3, _theme$footer$fontCol3, _theme$footer4, _theme$footer$accentC, _theme$footer5, _theme$footer$logo, _theme$footer6, _theme$header$baseCol, _theme$header, _theme$header$accentC, _theme$header2, _theme$header$menuBas, _theme$header3, _theme$header$fontCol, _theme$header4, _theme$header$hamburg, _theme$header5, _addLightness7, _theme$header6, _theme$header$logo, _theme$header7, _theme$header$logoRes, _theme$header8, _theme$header$content, _theme$header9, _theme$header$overlay, _theme$header10, _theme$link$baseColor, _theme$link, _theme$link$baseColor2, _theme$link2, _theme$navTabs$baseCo, _theme$navTabs, _theme$navTabs$baseCo2, _theme$navTabs2, _theme$navTabs$baseCo3, _theme$navTabs3, _theme$navTabs$baseCo4, _theme$navTabs4, _theme$navTabs$accent, _theme$navTabs5, _addLightness8, _theme$navTabs6, _addLightness9, _theme$navTabs7, _theme$paginator$base, _theme$paginator, _theme$paginator$font, _theme$paginator2, _theme$progressBar$ac, _theme$progressBar, _theme$progressBar$ba, _theme$progressBar2, _theme$progressBar$fo, _theme$progressBar3, _theme$progressBar$fo2, _theme$progressBar4, _theme$progressBar$fo3, _theme$progressBar5, _theme$progressBar$ov, _theme$progressBar6, _theme$progressBar$ov2, _theme$progressBar7, _theme$quickNav$fontC, _theme$quickNav, _theme$quickNav$accen, _theme$quickNav2, _theme$radioGroup$bas, _theme$radioGroup, _theme$radioGroup$fon, _theme$radioGroup2, _theme$radioGroup$fon2, _theme$radioGroup3, _theme$radioGroup$fon3, _theme$radioGroup4, _subLightness18, _theme$radioGroup5, _subLightness19, _theme$radioGroup6, _theme$select$selecte, _theme$select, _theme$select$fontCol, _theme$select2, _theme$select$fontCol2, _theme$select3, _theme$select$fontCol3, _theme$select4, _theme$select$optionF, _theme$select5, _addLightness10, _theme$select6, _theme$select$fontCol4, _theme$select7, _theme$select$hoverBo, _theme$select8, _subLightness20, _theme$select9, _subLightness21, _theme$select10, _theme$sidenav$baseCo, _theme$sidenav, _theme$slider$fontCol, _theme$slider, _theme$slider$fontCol2, _theme$slider2, _theme$slider$fontCol3, _theme$slider3, _theme$slider$baseCol, _theme$slider4, _theme$slider$baseCol2, _theme$slider5, _theme$slider$baseCol3, _theme$slider6, _theme$slider$baseCol4, _theme$slider7, _theme$slider$totalLi, _theme$slider8, _subLightness22, _theme$slider9, _subLightness23, _theme$slider10, _theme$spinner$accent, _theme$spinner, _theme$spinner$baseCo, _theme$spinner2, _theme$spinner$overla, _theme$spinner3, _theme$spinner$fontCo, _theme$spinner4, _theme$spinner$fontCo2, _theme$spinner5, _theme$spinner$overla2, _theme$spinner6, _theme$spinner$overla3, _theme$spinner7, _theme$switch$checked, _theme$switch, _theme$switch$fontCol, _theme$switch2, _addLightness11, _theme$switch3, _theme$table$baseColo, _theme$table, _theme$table$headerFo, _theme$table2, _theme$table$cellFont, _theme$table3, _theme$table$headerFo2, _theme$table4, _theme$tabs$baseColor, _theme$tabs, _theme$tabs$baseColor2, _theme$tabs2, _theme$tabs$baseColor3, _theme$tabs3, _theme$tabs$baseColor4, _theme$tabs4, _addLightness12, _theme$tabs5, _addLightness13, _theme$tabs6, _theme$tag$fontColor, _theme$tag, _theme$tag$iconColor, _theme$tag2, _theme$textInput$font, _theme$textInput, _theme$textInput$font2, _theme$textInput2, _theme$textInput$font3, _theme$textInput3, _theme$textInput$font4, _theme$textInput4, _theme$textInput$font5, _theme$textInput5, _theme$textInput$font6, _theme$textInput6, _theme$textInput$font7, _theme$textInput7, _theme$textInput$hove, _theme$textInput8, _addLightness14, _theme$textInput9, _addLightness15, _theme$textInput10, _addLightness16, _theme$textInput11, _theme$textarea$fontC, _theme$textarea, _theme$textarea$fontC2, _theme$textarea2, _theme$textarea$fontC3, _theme$textarea3, _theme$textarea$hover, _theme$textarea4, _addLightness17, _theme$textarea5, _theme$toggleGroup$se, _theme$toggleGroup, _theme$toggleGroup$se2, _theme$toggleGroup2, _theme$toggleGroup$un, _theme$toggleGroup3, _theme$toggleGroup$se3, _theme$toggleGroup4, _theme$toggleGroup$un2, _theme$toggleGroup5, _subLightness24, _theme$toggleGroup6, _subLightness25, _theme$toggleGroup7, _addLightness18, _theme$toggleGroup8, _addLightness19, _theme$toggleGroup9, _subLightness26, _theme$toggleGroup10, _theme$wizard$baseCol, _theme$wizard, _theme$wizard$selecte, _theme$wizard2, _theme$wizard$baseCol2, _theme$wizard3, _theme$wizard$fontCol, _theme$wizard4, _theme$wizard$fontCol2, _theme$wizard5, _theme$wizard$fontCol3, _theme$wizard6, _theme$wizard$fontCol4, _theme$wizard7, _addLightness20, _theme$wizard8, _addLightness21, _theme$wizard9, _addLightness22, _theme$wizard10, _addLightness23, _theme$wizard11;
   var componentTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
   var alertTokens = componentTokensCopy.alert;
   alertTokens.infoBackgroundColor = (_theme$alert$baseColo = theme === null || theme === void 0 ? void 0 : (_theme$alert = theme.alert) === null || _theme$alert === void 0 ? void 0 : _theme$alert.baseColor) !== null && _theme$alert$baseColo !== void 0 ? _theme$alert$baseColo : alertTokens.infoBackgroundColor;
@@ -95,13 +95,23 @@ var parseTheme = function parseTheme(theme) {
   chipTokens.iconColor = (_theme$chip$iconColor = theme === null || theme === void 0 ? void 0 : (_theme$chip3 = theme.chip) === null || _theme$chip3 === void 0 ? void 0 : _theme$chip3.iconColor) !== null && _theme$chip$iconColor !== void 0 ? _theme$chip$iconColor : chipTokens.iconColor;
   chipTokens.hoverIconColor = (_subLightness6 = subLightness(10, theme === null || theme === void 0 ? void 0 : (_theme$chip4 = theme.chip) === null || _theme$chip4 === void 0 ? void 0 : _theme$chip4.iconColor)) !== null && _subLightness6 !== void 0 ? _subLightness6 : chipTokens.hoverIconColor;
   chipTokens.activeIconColor = (_subLightness7 = subLightness(30, theme === null || theme === void 0 ? void 0 : (_theme$chip5 = theme.chip) === null || _theme$chip5 === void 0 ? void 0 : _theme$chip5.iconColor)) !== null && _subLightness7 !== void 0 ? _subLightness7 : chipTokens.activeIconColor;
+  var contextualMenu = componentTokensCopy.contextualMenu;
+  contextualMenu.selectedMenuItemBackgroundColor = (_theme$contextualMenu = theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu2 = theme.contextualMenu) === null || _theme$contextualMenu2 === void 0 ? void 0 : _theme$contextualMenu2.accentColor) !== null && _theme$contextualMenu !== void 0 ? _theme$contextualMenu : contextualMenu.selectedMenuItemBackgroundColor;
+  contextualMenu.hoverSelectedMenuItemBackgroundColor = (_subLightness8 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu3 = theme.contextualMenu) === null || _theme$contextualMenu3 === void 0 ? void 0 : _theme$contextualMenu3.accentColor)) !== null && _subLightness8 !== void 0 ? _subLightness8 : contextualMenu.hoverSelectedMenuItemBackgroundColor;
+  contextualMenu.activeSelectedMenuItemBackgroundColor = (_subLightness9 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu4 = theme.contextualMenu) === null || _theme$contextualMenu4 === void 0 ? void 0 : _theme$contextualMenu4.accentColor)) !== null && _subLightness9 !== void 0 ? _subLightness9 : contextualMenu.activeSelectedMenuItemBackgroundColor;
+  contextualMenu.backgroundColor = (_theme$contextualMenu5 = theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu6 = theme.contextualMenu) === null || _theme$contextualMenu6 === void 0 ? void 0 : _theme$contextualMenu6.baseColor) !== null && _theme$contextualMenu5 !== void 0 ? _theme$contextualMenu5 : contextualMenu.backgroundColor;
+  contextualMenu.hoverMenuItemBackgroundColor = (_subLightness10 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu7 = theme.contextualMenu) === null || _theme$contextualMenu7 === void 0 ? void 0 : _theme$contextualMenu7.baseColor)) !== null && _subLightness10 !== void 0 ? _subLightness10 : contextualMenu.hoverMenuItemBackgroundColor;
+  contextualMenu.activeMenuItemBackgroundColor = (_subLightness11 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu8 = theme.contextualMenu) === null || _theme$contextualMenu8 === void 0 ? void 0 : _theme$contextualMenu8.baseColor)) !== null && _subLightness11 !== void 0 ? _subLightness11 : contextualMenu.activeMenuItemBackgroundColor;
+  contextualMenu.menuItemFontColor = (_theme$contextualMenu9 = theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu10 = theme.contextualMenu) === null || _theme$contextualMenu10 === void 0 ? void 0 : _theme$contextualMenu10.fontColor) !== null && _theme$contextualMenu9 !== void 0 ? _theme$contextualMenu9 : contextualMenu.menuItemFontColor;
+  contextualMenu.sectionTitleFontColor = (_theme$contextualMenu11 = theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu12 = theme.contextualMenu) === null || _theme$contextualMenu12 === void 0 ? void 0 : _theme$contextualMenu12.fontColor) !== null && _theme$contextualMenu11 !== void 0 ? _theme$contextualMenu11 : contextualMenu.sectionTitleFontColor;
+  contextualMenu.iconColor = (_theme$contextualMenu13 = theme === null || theme === void 0 ? void 0 : (_theme$contextualMenu14 = theme.contextualMenu) === null || _theme$contextualMenu14 === void 0 ? void 0 : _theme$contextualMenu14.iconColor) !== null && _theme$contextualMenu13 !== void 0 ? _theme$contextualMenu13 : contextualMenu.iconColor;
   var dateTokens = componentTokensCopy.dateInput;
   dateTokens.pickerSelectedBackgroundColor = (_theme$dateInput$base = theme === null || theme === void 0 ? void 0 : (_theme$dateInput = theme.dateInput) === null || _theme$dateInput === void 0 ? void 0 : _theme$dateInput.baseColor) !== null && _theme$dateInput$base !== void 0 ? _theme$dateInput$base : dateTokens.pickerSelectedBackgroundColor;
   dateTokens.pickerSelectedFontColor = (_theme$dateInput$sele = theme === null || theme === void 0 ? void 0 : (_theme$dateInput2 = theme.dateInput) === null || _theme$dateInput2 === void 0 ? void 0 : _theme$dateInput2.selectedFontColor) !== null && _theme$dateInput$sele !== void 0 ? _theme$dateInput$sele : dateTokens.pickerSelectedFontColor;
-  dateTokens.pickerActiveBackgroundColor = (_subLightness8 = subLightness(8, theme === null || theme === void 0 ? void 0 : (_theme$dateInput3 = theme.dateInput) === null || _theme$dateInput3 === void 0 ? void 0 : _theme$dateInput3.baseColor)) !== null && _subLightness8 !== void 0 ? _subLightness8 : dateTokens.pickerActiveBackgroundColor;
+  dateTokens.pickerActiveBackgroundColor = (_subLightness12 = subLightness(8, theme === null || theme === void 0 ? void 0 : (_theme$dateInput3 = theme.dateInput) === null || _theme$dateInput3 === void 0 ? void 0 : _theme$dateInput3.baseColor)) !== null && _subLightness12 !== void 0 ? _subLightness12 : dateTokens.pickerActiveBackgroundColor;
   dateTokens.pickerActiveFontColor = (_theme$dateInput$sele2 = theme === null || theme === void 0 ? void 0 : (_theme$dateInput4 = theme.dateInput) === null || _theme$dateInput4 === void 0 ? void 0 : _theme$dateInput4.selectedFontColor) !== null && _theme$dateInput$sele2 !== void 0 ? _theme$dateInput$sele2 : dateTokens.pickerActiveFontColor;
   dateTokens.pickerCurrentYearFontColor = (_theme$dateInput$base2 = theme === null || theme === void 0 ? void 0 : (_theme$dateInput5 = theme.dateInput) === null || _theme$dateInput5 === void 0 ? void 0 : _theme$dateInput5.baseColor) !== null && _theme$dateInput$base2 !== void 0 ? _theme$dateInput$base2 : dateTokens.pickerCurrentYearFontColor;
-  dateTokens.pickerHeaderActiveBackgroundColor = (_subLightness9 = subLightness(8, theme === null || theme === void 0 ? void 0 : (_theme$dateInput6 = theme.dateInput) === null || _theme$dateInput6 === void 0 ? void 0 : _theme$dateInput6.baseColor)) !== null && _subLightness9 !== void 0 ? _subLightness9 : dateTokens.pickerHeaderActiveBackgroundColor;
+  dateTokens.pickerHeaderActiveBackgroundColor = (_subLightness13 = subLightness(8, theme === null || theme === void 0 ? void 0 : (_theme$dateInput6 = theme.dateInput) === null || _theme$dateInput6 === void 0 ? void 0 : _theme$dateInput6.baseColor)) !== null && _subLightness13 !== void 0 ? _subLightness13 : dateTokens.pickerHeaderActiveBackgroundColor;
   dateTokens.pickerHeaderActiveFontColor = (_theme$dateInput$sele3 = theme === null || theme === void 0 ? void 0 : (_theme$dateInput7 = theme.dateInput) === null || _theme$dateInput7 === void 0 ? void 0 : _theme$dateInput7.selectedFontColor) !== null && _theme$dateInput$sele3 !== void 0 ? _theme$dateInput$sele3 : dateTokens.pickerHeaderActiveFontColor;
   dateTokens.pickerHoverBackgroundColor = (_addLightness4 = addLightness(52, theme === null || theme === void 0 ? void 0 : (_theme$dateInput8 = theme.dateInput) === null || _theme$dateInput8 === void 0 ? void 0 : _theme$dateInput8.baseColor)) !== null && _addLightness4 !== void 0 ? _addLightness4 : dateTokens.pickerHoverBackgroundColor;
   dateTokens.pickerCurrentDateBorderColor = (_addLightness5 = addLightness(42, theme === null || theme === void 0 ? void 0 : (_theme$dateInput9 = theme.dateInput) === null || _theme$dateInput9 === void 0 ? void 0 : _theme$dateInput9.baseColor)) !== null && _addLightness5 !== void 0 ? _addLightness5 : dateTokens.pickerCurrentDateBorderColor;
@@ -117,10 +127,10 @@ var parseTheme = function parseTheme(theme) {
   dropdownTokens.caretIconColor = (_theme$dropdown$fontC3 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown4 = theme.dropdown) === null || _theme$dropdown4 === void 0 ? void 0 : _theme$dropdown4.fontColor) !== null && _theme$dropdown$fontC3 !== void 0 ? _theme$dropdown$fontC3 : dropdownTokens.caretIconColor;
   dropdownTokens.optionFontColor = (_theme$dropdown$optio = theme === null || theme === void 0 ? void 0 : (_theme$dropdown5 = theme.dropdown) === null || _theme$dropdown5 === void 0 ? void 0 : _theme$dropdown5.optionFontColor) !== null && _theme$dropdown$optio !== void 0 ? _theme$dropdown$optio : dropdownTokens.optionFontColor;
   dropdownTokens.optionIconColor = (_theme$dropdown$optio2 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown6 = theme.dropdown) === null || _theme$dropdown6 === void 0 ? void 0 : _theme$dropdown6.optionFontColor) !== null && _theme$dropdown$optio2 !== void 0 ? _theme$dropdown$optio2 : dropdownTokens.optionIconColor;
-  dropdownTokens.hoverButtonBackgroundColor = (_subLightness10 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$dropdown7 = theme.dropdown) === null || _theme$dropdown7 === void 0 ? void 0 : _theme$dropdown7.baseColor)) !== null && _subLightness10 !== void 0 ? _subLightness10 : dropdownTokens.hoverButtonBackgroundColor;
-  dropdownTokens.activeButtonBackgroundColor = (_subLightness11 = subLightness(12, theme === null || theme === void 0 ? void 0 : (_theme$dropdown8 = theme.dropdown) === null || _theme$dropdown8 === void 0 ? void 0 : _theme$dropdown8.baseColor)) !== null && _subLightness11 !== void 0 ? _subLightness11 : dropdownTokens.activeButtonBackgroundColor;
-  dropdownTokens.hoverOptionBackgroundColor = (_subLightness12 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$dropdown9 = theme.dropdown) === null || _theme$dropdown9 === void 0 ? void 0 : _theme$dropdown9.baseColor)) !== null && _subLightness12 !== void 0 ? _subLightness12 : dropdownTokens.hoverOptionBackgroundColor;
-  dropdownTokens.activeOptionBackgroundColor = (_subLightness13 = subLightness(20, theme === null || theme === void 0 ? void 0 : (_theme$dropdown10 = theme.dropdown) === null || _theme$dropdown10 === void 0 ? void 0 : _theme$dropdown10.baseColor)) !== null && _subLightness13 !== void 0 ? _subLightness13 : dropdownTokens.activeOptionBackgroundColor;
+  dropdownTokens.hoverButtonBackgroundColor = (_subLightness14 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$dropdown7 = theme.dropdown) === null || _theme$dropdown7 === void 0 ? void 0 : _theme$dropdown7.baseColor)) !== null && _subLightness14 !== void 0 ? _subLightness14 : dropdownTokens.hoverButtonBackgroundColor;
+  dropdownTokens.activeButtonBackgroundColor = (_subLightness15 = subLightness(12, theme === null || theme === void 0 ? void 0 : (_theme$dropdown8 = theme.dropdown) === null || _theme$dropdown8 === void 0 ? void 0 : _theme$dropdown8.baseColor)) !== null && _subLightness15 !== void 0 ? _subLightness15 : dropdownTokens.activeButtonBackgroundColor;
+  dropdownTokens.hoverOptionBackgroundColor = (_subLightness16 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$dropdown9 = theme.dropdown) === null || _theme$dropdown9 === void 0 ? void 0 : _theme$dropdown9.baseColor)) !== null && _subLightness16 !== void 0 ? _subLightness16 : dropdownTokens.hoverOptionBackgroundColor;
+  dropdownTokens.activeOptionBackgroundColor = (_subLightness17 = subLightness(20, theme === null || theme === void 0 ? void 0 : (_theme$dropdown10 = theme.dropdown) === null || _theme$dropdown10 === void 0 ? void 0 : _theme$dropdown10.baseColor)) !== null && _subLightness17 !== void 0 ? _subLightness17 : dropdownTokens.activeOptionBackgroundColor;
   var fileInputTokens = componentTokensCopy.fileInput;
   fileInputTokens.labelFontColor = (_theme$fileInput$font = theme === null || theme === void 0 ? void 0 : (_theme$fileInput = theme.fileInput) === null || _theme$fileInput === void 0 ? void 0 : _theme$fileInput.fontColor) !== null && _theme$fileInput$font !== void 0 ? _theme$fileInput$font : fileInputTokens.labelFontColor;
   fileInputTokens.helperTextFontColor = (_theme$fileInput$font2 = theme === null || theme === void 0 ? void 0 : (_theme$fileInput2 = theme.fileInput) === null || _theme$fileInput2 === void 0 ? void 0 : _theme$fileInput2.fontColor) !== null && _theme$fileInput$font2 !== void 0 ? _theme$fileInput$font2 : fileInputTokens.helperTextFontColor;
@@ -174,8 +184,8 @@ var parseTheme = function parseTheme(theme) {
   radioGroupTokens.labelFontColor = (_theme$radioGroup$fon = theme === null || theme === void 0 ? void 0 : (_theme$radioGroup2 = theme.radioGroup) === null || _theme$radioGroup2 === void 0 ? void 0 : _theme$radioGroup2.fontColor) !== null && _theme$radioGroup$fon !== void 0 ? _theme$radioGroup$fon : radioGroupTokens.labelFontColor;
   radioGroupTokens.helperTextFontColor = (_theme$radioGroup$fon2 = theme === null || theme === void 0 ? void 0 : (_theme$radioGroup3 = theme.radioGroup) === null || _theme$radioGroup3 === void 0 ? void 0 : _theme$radioGroup3.fontColor) !== null && _theme$radioGroup$fon2 !== void 0 ? _theme$radioGroup$fon2 : radioGroupTokens.helperTextFontColor;
   radioGroupTokens.radioInputLabelFontColor = (_theme$radioGroup$fon3 = theme === null || theme === void 0 ? void 0 : (_theme$radioGroup4 = theme.radioGroup) === null || _theme$radioGroup4 === void 0 ? void 0 : _theme$radioGroup4.fontColor) !== null && _theme$radioGroup$fon3 !== void 0 ? _theme$radioGroup$fon3 : radioGroupTokens.radioInputLabelFontColor;
-  radioGroupTokens.hoverRadioInputColor = (_subLightness14 = subLightness(10, theme === null || theme === void 0 ? void 0 : (_theme$radioGroup5 = theme.radioGroup) === null || _theme$radioGroup5 === void 0 ? void 0 : _theme$radioGroup5.baseColor)) !== null && _subLightness14 !== void 0 ? _subLightness14 : radioGroupTokens.radioInputColor;
-  radioGroupTokens.activeRadioInputColor = (_subLightness15 = subLightness(25, theme === null || theme === void 0 ? void 0 : (_theme$radioGroup6 = theme.radioGroup) === null || _theme$radioGroup6 === void 0 ? void 0 : _theme$radioGroup6.baseColor)) !== null && _subLightness15 !== void 0 ? _subLightness15 : radioGroupTokens.radioInputColor;
+  radioGroupTokens.hoverRadioInputColor = (_subLightness18 = subLightness(10, theme === null || theme === void 0 ? void 0 : (_theme$radioGroup5 = theme.radioGroup) === null || _theme$radioGroup5 === void 0 ? void 0 : _theme$radioGroup5.baseColor)) !== null && _subLightness18 !== void 0 ? _subLightness18 : radioGroupTokens.radioInputColor;
+  radioGroupTokens.activeRadioInputColor = (_subLightness19 = subLightness(25, theme === null || theme === void 0 ? void 0 : (_theme$radioGroup6 = theme.radioGroup) === null || _theme$radioGroup6 === void 0 ? void 0 : _theme$radioGroup6.baseColor)) !== null && _subLightness19 !== void 0 ? _subLightness19 : radioGroupTokens.radioInputColor;
   var selectTokens = componentTokensCopy.select;
   selectTokens.selectedListOptionBackgroundColor = (_theme$select$selecte = theme === null || theme === void 0 ? void 0 : (_theme$select = theme.select) === null || _theme$select === void 0 ? void 0 : _theme$select.selectedOptionBackgroundColor) !== null && _theme$select$selecte !== void 0 ? _theme$select$selecte : selectTokens.selectedListOptionBackgroundColor;
   selectTokens.valueFontColor = (_theme$select$fontCol = theme === null || theme === void 0 ? void 0 : (_theme$select2 = theme.select) === null || _theme$select2 === void 0 ? void 0 : _theme$select2.fontColor) !== null && _theme$select$fontCol !== void 0 ? _theme$select$fontCol : selectTokens.valueFontColor;
@@ -185,8 +195,8 @@ var parseTheme = function parseTheme(theme) {
   selectTokens.placeholderFontColor = (_addLightness10 = addLightness(30, theme === null || theme === void 0 ? void 0 : (_theme$select6 = theme.select) === null || _theme$select6 === void 0 ? void 0 : _theme$select6.fontColor)) !== null && _addLightness10 !== void 0 ? _addLightness10 : selectTokens.placeholderFontColor;
   selectTokens.collapseIndicatorColor = (_theme$select$fontCol4 = theme === null || theme === void 0 ? void 0 : (_theme$select7 = theme.select) === null || _theme$select7 === void 0 ? void 0 : _theme$select7.fontColor) !== null && _theme$select$fontCol4 !== void 0 ? _theme$select$fontCol4 : selectTokens.collapseIndicatorColor;
   selectTokens.hoverInputBorderColor = (_theme$select$hoverBo = theme === null || theme === void 0 ? void 0 : (_theme$select8 = theme.select) === null || _theme$select8 === void 0 ? void 0 : _theme$select8.hoverBorderColor) !== null && _theme$select$hoverBo !== void 0 ? _theme$select$hoverBo : selectTokens.hoverInputBorderColor;
-  selectTokens.selectedHoverListOptionBackgroundColor = (_subLightness16 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$select9 = theme.select) === null || _theme$select9 === void 0 ? void 0 : _theme$select9.selectedOptionBackgroundColor)) !== null && _subLightness16 !== void 0 ? _subLightness16 : selectTokens.selectedHoverListOptionBackgroundColor;
-  selectTokens.selectedActiveListOptionBackgroundColor = (_subLightness17 = subLightness(15, theme === null || theme === void 0 ? void 0 : (_theme$select10 = theme.select) === null || _theme$select10 === void 0 ? void 0 : _theme$select10.selectedOptionBackgroundColor)) !== null && _subLightness17 !== void 0 ? _subLightness17 : selectTokens.selectedActiveListOptionBackgroundColor;
+  selectTokens.selectedHoverListOptionBackgroundColor = (_subLightness20 = subLightness(5, theme === null || theme === void 0 ? void 0 : (_theme$select9 = theme.select) === null || _theme$select9 === void 0 ? void 0 : _theme$select9.selectedOptionBackgroundColor)) !== null && _subLightness20 !== void 0 ? _subLightness20 : selectTokens.selectedHoverListOptionBackgroundColor;
+  selectTokens.selectedActiveListOptionBackgroundColor = (_subLightness21 = subLightness(15, theme === null || theme === void 0 ? void 0 : (_theme$select10 = theme.select) === null || _theme$select10 === void 0 ? void 0 : _theme$select10.selectedOptionBackgroundColor)) !== null && _subLightness21 !== void 0 ? _subLightness21 : selectTokens.selectedActiveListOptionBackgroundColor;
   var sideNavTokens = componentTokensCopy.sidenav;
   sideNavTokens.backgroundColor = (_theme$sidenav$baseCo = theme === null || theme === void 0 ? void 0 : (_theme$sidenav = theme.sidenav) === null || _theme$sidenav === void 0 ? void 0 : _theme$sidenav.baseColor) !== null && _theme$sidenav$baseCo !== void 0 ? _theme$sidenav$baseCo : sideNavTokens.backgroundColor;
   var sliderTokens = componentTokensCopy.slider;
@@ -198,8 +208,8 @@ var parseTheme = function parseTheme(theme) {
   sliderTokens.tickBackgroundColor = (_theme$slider$baseCol3 = theme === null || theme === void 0 ? void 0 : (_theme$slider6 = theme.slider) === null || _theme$slider6 === void 0 ? void 0 : _theme$slider6.baseColor) !== null && _theme$slider$baseCol3 !== void 0 ? _theme$slider$baseCol3 : sliderTokens.tickBackgroundColor;
   sliderTokens.trackLineColor = (_theme$slider$baseCol4 = theme === null || theme === void 0 ? void 0 : (_theme$slider7 = theme.slider) === null || _theme$slider7 === void 0 ? void 0 : _theme$slider7.baseColor) !== null && _theme$slider$baseCol4 !== void 0 ? _theme$slider$baseCol4 : sliderTokens.trackLineColor;
   sliderTokens.totalLineColor = (_theme$slider$totalLi = theme === null || theme === void 0 ? void 0 : (_theme$slider8 = theme.slider) === null || _theme$slider8 === void 0 ? void 0 : _theme$slider8.totalLineColor) !== null && _theme$slider$totalLi !== void 0 ? _theme$slider$totalLi : sliderTokens.totalLineColor;
-  sliderTokens.hoverThumbBackgroundColor = (_subLightness18 = subLightness(15, theme === null || theme === void 0 ? void 0 : (_theme$slider9 = theme.slider) === null || _theme$slider9 === void 0 ? void 0 : _theme$slider9.baseColor)) !== null && _subLightness18 !== void 0 ? _subLightness18 : sliderTokens.thumbBackgroundColor;
-  sliderTokens.activeThumbBackgroundColor = (_subLightness19 = subLightness(15, theme === null || theme === void 0 ? void 0 : (_theme$slider10 = theme.slider) === null || _theme$slider10 === void 0 ? void 0 : _theme$slider10.baseColor)) !== null && _subLightness19 !== void 0 ? _subLightness19 : sliderTokens.thumbBackgroundColor;
+  sliderTokens.hoverThumbBackgroundColor = (_subLightness22 = subLightness(15, theme === null || theme === void 0 ? void 0 : (_theme$slider9 = theme.slider) === null || _theme$slider9 === void 0 ? void 0 : _theme$slider9.baseColor)) !== null && _subLightness22 !== void 0 ? _subLightness22 : sliderTokens.thumbBackgroundColor;
+  sliderTokens.activeThumbBackgroundColor = (_subLightness23 = subLightness(15, theme === null || theme === void 0 ? void 0 : (_theme$slider10 = theme.slider) === null || _theme$slider10 === void 0 ? void 0 : _theme$slider10.baseColor)) !== null && _subLightness23 !== void 0 ? _subLightness23 : sliderTokens.thumbBackgroundColor;
   var spinnerTokens = componentTokensCopy.spinner;
   spinnerTokens.trackCircleColor = (_theme$spinner$accent = theme === null || theme === void 0 ? void 0 : (_theme$spinner = theme.spinner) === null || _theme$spinner === void 0 ? void 0 : _theme$spinner.accentColor) !== null && _theme$spinner$accent !== void 0 ? _theme$spinner$accent : spinnerTokens.trackCircleColor;
   spinnerTokens.totalCircleColor = (_theme$spinner$baseCo = theme === null || theme === void 0 ? void 0 : (_theme$spinner2 = theme.spinner) === null || _theme$spinner2 === void 0 ? void 0 : _theme$spinner2.baseColor) !== null && _theme$spinner$baseCo !== void 0 ? _theme$spinner$baseCo : spinnerTokens.totalCircleColor;
@@ -251,11 +261,11 @@ var parseTheme = function parseTheme(theme) {
   toggleGroupTokens.unselectedBackgroundColor = (_theme$toggleGroup$un = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup3 = theme.toggleGroup) === null || _theme$toggleGroup3 === void 0 ? void 0 : _theme$toggleGroup3.unselectedBaseColor) !== null && _theme$toggleGroup$un !== void 0 ? _theme$toggleGroup$un : toggleGroupTokens.unselectedBackgroundColor;
   toggleGroupTokens.unselectedActiveBackgroundColor = (_theme$toggleGroup$se3 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup4 = theme.toggleGroup) === null || _theme$toggleGroup4 === void 0 ? void 0 : _theme$toggleGroup4.selectedBaseColor) !== null && _theme$toggleGroup$se3 !== void 0 ? _theme$toggleGroup$se3 : toggleGroupTokens.unselectedActiveBackgroundColor;
   toggleGroupTokens.unselectedFontColor = (_theme$toggleGroup$un2 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup5 = theme.toggleGroup) === null || _theme$toggleGroup5 === void 0 ? void 0 : _theme$toggleGroup5.unselectedFontColor) !== null && _theme$toggleGroup$un2 !== void 0 ? _theme$toggleGroup$un2 : toggleGroupTokens.unselectedFontColor;
-  toggleGroupTokens.selectedHoverBackgroundColor = (_subLightness20 = subLightness(8, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup6 = theme.toggleGroup) === null || _theme$toggleGroup6 === void 0 ? void 0 : _theme$toggleGroup6.selectedBaseColor)) !== null && _subLightness20 !== void 0 ? _subLightness20 : toggleGroupTokens.selectedHoverBackgroundColor;
-  toggleGroupTokens.selectedActiveBackgroundColor = (_subLightness21 = subLightness(18, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup7 = theme.toggleGroup) === null || _theme$toggleGroup7 === void 0 ? void 0 : _theme$toggleGroup7.selectedBaseColor)) !== null && _subLightness21 !== void 0 ? _subLightness21 : toggleGroupTokens.selectedActiveBackgroundColor;
+  toggleGroupTokens.selectedHoverBackgroundColor = (_subLightness24 = subLightness(8, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup6 = theme.toggleGroup) === null || _theme$toggleGroup6 === void 0 ? void 0 : _theme$toggleGroup6.selectedBaseColor)) !== null && _subLightness24 !== void 0 ? _subLightness24 : toggleGroupTokens.selectedHoverBackgroundColor;
+  toggleGroupTokens.selectedActiveBackgroundColor = (_subLightness25 = subLightness(18, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup7 = theme.toggleGroup) === null || _theme$toggleGroup7 === void 0 ? void 0 : _theme$toggleGroup7.selectedBaseColor)) !== null && _subLightness25 !== void 0 ? _subLightness25 : toggleGroupTokens.selectedActiveBackgroundColor;
   toggleGroupTokens.selectedDisabledBackgroundColor = (_addLightness18 = addLightness(57, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup8 = theme.toggleGroup) === null || _theme$toggleGroup8 === void 0 ? void 0 : _theme$toggleGroup8.selectedBaseColor)) !== null && _addLightness18 !== void 0 ? _addLightness18 : toggleGroupTokens.selectedDisabledBackgroundColor;
   toggleGroupTokens.selectedDisabledFontColor = (_addLightness19 = addLightness(42, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup9 = theme.toggleGroup) === null || _theme$toggleGroup9 === void 0 ? void 0 : _theme$toggleGroup9.selectedBaseColor)) !== null && _addLightness19 !== void 0 ? _addLightness19 : toggleGroupTokens.selectedDisabledFontColor;
-  toggleGroupTokens.unselectedHoverBackgroundColor = (_subLightness22 = subLightness(10, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBaseColor)) !== null && _subLightness22 !== void 0 ? _subLightness22 : toggleGroupTokens.unselectedHoverBackgroundColor;
+  toggleGroupTokens.unselectedHoverBackgroundColor = (_subLightness26 = subLightness(10, theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBaseColor)) !== null && _subLightness26 !== void 0 ? _subLightness26 : toggleGroupTokens.unselectedHoverBackgroundColor;
   var wizardTokens = componentTokensCopy.wizard;
   wizardTokens.selectedStepBackgroundColor = (_theme$wizard$baseCol = theme === null || theme === void 0 ? void 0 : (_theme$wizard = theme.wizard) === null || _theme$wizard === void 0 ? void 0 : _theme$wizard.baseColor) !== null && _theme$wizard$baseCol !== void 0 ? _theme$wizard$baseCol : wizardTokens.selectedStepBackgroundColor;
   wizardTokens.selectedStepFontColor = (_theme$wizard$selecte = theme === null || theme === void 0 ? void 0 : (_theme$wizard2 = theme.wizard) === null || _theme$wizard2 === void 0 ? void 0 : _theme$wizard2.selectedStepFontColor) !== null && _theme$wizard$selecte !== void 0 ? _theme$wizard$selecte : wizardTokens.selectedStepFontColor;

package/common/coreTokens.d.ts

@@ -92,7 +92,6 @@ export type CoreColorTokens = keyof typeof CoreColorTokens;
 declare const CoreTokens: {
     inherit: string;
     type_sans: string;
-    type_scale_root: string;
     type_scale_08: string;
     type_scale_07: string;
     type_scale_06: string;

package/common/coreTokens.js

@@ -136,7 +136,6 @@ var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens),
   inherit: "inherit",
   // Typography
   type_sans: "Open Sans, sans-serif",
-  type_scale_root: "16px",
   type_scale_08: "3.75rem",
   type_scale_07: "2.5rem",
   type_scale_06: "2rem",

package/common/variables.d.ts

@@ -217,6 +217,29 @@ export declare const componentTokens: {
         focusBorderThickness: string;
         focusBorderRadius: string;
     };
+    contextualMenu: {
+        fontFamily: string;
+        backgroundColor: string;
+        borderColor: string;
+        menuItemFontColor: string;
+        menuItemFontSize: string;
+        menuItemFontStyle: string;
+        menuItemFontWeight: string;
+        menuItemLineHeight: string;
+        hoverMenuItemBackgroundColor: string;
+        activeMenuItemBackgroundColor: string;
+        selectedMenuItemBackgroundColor: string;
+        hoverSelectedMenuItemBackgroundColor: string;
+        activeSelectedMenuItemBackgroundColor: string;
+        selectedMenuItemFontWeight: string;
+        sectionTitleFontColor: string;
+        sectionTitleFontSize: string;
+        sectionTitleFontStyle: string;
+        sectionTitleFontWeight: string;
+        sectionTitleLineHeight: string;
+        iconColor: string;
+        iconSize: string;
+    };
     dateInput: {
         pickerBackgroundColor: string;
         pickerFontColor: string;
@@ -1172,6 +1195,12 @@ export type OpinionatedTheme = {
         fontColor: string;
         iconColor: string;
     };
+    contextualMenu: {
+        accentColor: string;
+        baseColor: string;
+        fontColor: string;
+        iconColor: string;
+    };
     dateInput: {
         baseColor: string;
         selectedFontColor: string;

package/common/variables.js

@@ -225,6 +225,29 @@ var componentTokens = exports.componentTokens = {
     focusBorderThickness: _coreTokens["default"].border_width_2,
     focusBorderRadius: _coreTokens["default"].border_radius_medium
   },
+  contextualMenu: {
+    fontFamily: _coreTokens["default"].type_sans,
+    backgroundColor: _coreTokens["default"].color_white,
+    borderColor: _coreTokens["default"].color_grey_200,
+    menuItemFontColor: _coreTokens["default"].color_grey_900,
+    menuItemFontSize: _coreTokens["default"].type_scale_02,
+    menuItemFontStyle: _coreTokens["default"].type_normal,
+    menuItemFontWeight: _coreTokens["default"].type_regular,
+    menuItemLineHeight: "24px",
+    hoverMenuItemBackgroundColor: _coreTokens["default"].color_grey_100,
+    activeMenuItemBackgroundColor: _coreTokens["default"].color_grey_100,
+    selectedMenuItemBackgroundColor: _coreTokens["default"].color_purple_100,
+    hoverSelectedMenuItemBackgroundColor: _coreTokens["default"].color_purple_200,
+    activeSelectedMenuItemBackgroundColor: _coreTokens["default"].color_purple_200,
+    selectedMenuItemFontWeight: _coreTokens["default"].type_semibold,
+    sectionTitleFontColor: _coreTokens["default"].color_grey_900,
+    sectionTitleFontSize: _coreTokens["default"].type_scale_03,
+    sectionTitleFontStyle: _coreTokens["default"].type_normal,
+    sectionTitleFontWeight: _coreTokens["default"].type_semibold,
+    sectionTitleLineHeight: "24px",
+    iconColor: _coreTokens["default"].color_grey_900,
+    iconSize: "16px"
+  },
   dateInput: {
     pickerBackgroundColor: _coreTokens["default"].color_white,
     pickerFontColor: _coreTokens["default"].color_black,
@@ -301,7 +324,7 @@ var componentTokens = exports.componentTokens = {
     hoverOptionBackgroundColor: _coreTokens["default"].color_grey_100,
     activeOptionBackgroundColor: _coreTokens["default"].color_grey_300,
     optionFontFamily: _coreTokens["default"].type_sans,
-    optionFontSize: _coreTokens["default"].type_scale_root,
+    optionFontSize: _coreTokens["default"].type_scale_03,
     optionFontStyle: _coreTokens["default"].type_normal,
     optionFontWeight: _coreTokens["default"].type_regular,
     optionFontColor: _coreTokens["default"].color_black,
@@ -830,7 +853,7 @@ var componentTokens = exports.componentTokens = {
     disabledLabelFontColor: _coreTokens["default"].color_grey_500,
     disabledLabelFontStyle: _coreTokens["default"].type_normal,
     labelFontFamily: _coreTokens["default"].type_sans,
-    labelFontSize: _coreTokens["default"].type_scale_root,
+    labelFontSize: _coreTokens["default"].type_scale_03,
     labelFontStyle: _coreTokens["default"].type_normal,
     labelFontWeight: _coreTokens["default"].type_regular,
     labelFontColor: _coreTokens["default"].color_black,

package/contextual-menu/ContextualMenu.js

@@ -10,11 +10,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
 var _Divider = _interopRequireDefault(require("../divider/Divider"));
 var _Inset = _interopRequireDefault(require("../inset/Inset"));
 var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -48,15 +49,20 @@ var DxcContextualMenu = function DxcContextualMenu(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedItemId = _useState2[0],
     setSelectedItemId = _useState2[1];
+  var contextualMenuRef = (0, _react.useRef)(null);
   var itemsWithId = (0, _react.useMemo)(function () {
     return addIdToItems(items);
   }, [items]);
+  var colorsTheme = (0, _useTheme["default"])();
   var renderSection = function renderSection(section, currentSectionIndex, length) {
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: "section-".concat(currentSectionIndex)
     }, /*#__PURE__*/_react["default"].createElement("li", {
-      role: "group"
-    }, section.title != null && /*#__PURE__*/_react["default"].createElement(Title, null, section.title), /*#__PURE__*/_react["default"].createElement(SectionList, null, section.items.map(function (item, index) {
+      role: "group",
+      "aria-labelledby": section.title
+    }, section.title != null && /*#__PURE__*/_react["default"].createElement(Title, {
+      id: section.title
+    }, section.title), /*#__PURE__*/_react["default"].createElement(SectionList, null, section.items.map(function (item, index) {
       return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
         item: item,
         key: "".concat(item.label, "-").concat(index)
@@ -68,8 +74,26 @@ var DxcContextualMenu = function DxcContextualMenu(_ref) {
       color: "lightGrey"
     })));
   };
-  return /*#__PURE__*/_react["default"].createElement(ContextualMenu, {
-    role: "menu"
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    firstUpdate = _useState4[0],
+    setFirstUpdate = _useState4[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (selectedItemId !== -1 && firstUpdate) {
+      var _contextualMenuEl$scr;
+      var contextualMenuEl = contextualMenuRef === null || contextualMenuRef === void 0 ? void 0 : contextualMenuRef.current;
+      var selectedItemEl = contextualMenuEl === null || contextualMenuEl === void 0 ? void 0 : contextualMenuEl.querySelector("[aria-selected='true']");
+      contextualMenuEl === null || contextualMenuEl === void 0 ? void 0 : (_contextualMenuEl$scr = contextualMenuEl.scrollTo) === null || _contextualMenuEl$scr === void 0 ? void 0 : _contextualMenuEl$scr.call(contextualMenuEl, {
+        top: (selectedItemEl === null || selectedItemEl === void 0 ? void 0 : selectedItemEl.offsetTop) - (contextualMenuEl === null || contextualMenuEl === void 0 ? void 0 : contextualMenuEl.clientHeight) / 2
+      });
+      setFirstUpdate(false);
+    }
+  }, [firstUpdate, selectedItemId]);
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.contextualMenu
+  }, /*#__PURE__*/_react["default"].createElement(ContextualMenu, {
+    role: "menu",
+    ref: contextualMenuRef
   }, /*#__PURE__*/_react["default"].createElement(ContextualMenuContext.Provider, {
     value: {
       selectedItemId: selectedItemId,
@@ -80,9 +104,33 @@ var DxcContextualMenu = function DxcContextualMenu(_ref) {
       item: item,
       key: "".concat(item.label, "-").concat(index)
     });
-  })));
+  }))));
 };
-var ContextualMenu = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  margin: 0;\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  padding: ", " ", ";\n  display: grid;\n  gap: ", ";\n  min-width: 248px;\n  max-height: 100%;\n  background-color: ", ";\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.25rem;\n  }\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 0.25rem;\n  }\n"])), _coreTokens["default"].color_grey_200, _coreTokens["default"].spacing_16, _coreTokens["default"].spacing_8, _coreTokens["default"].spacing_4, _coreTokens["default"].color_white, _coreTokens["default"].color_grey_700, _coreTokens["default"].color_grey_300);
+var ContextualMenu = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  margin: 0;\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  padding: ", " ", ";\n  display: grid;\n  gap: ", ";\n  min-width: 248px;\n  max-height: 100%;\n  background-color: ", ";\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 0.25rem;\n  }\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 0.25rem;\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.borderColor;
+}, _coreTokens["default"].spacing_16, _coreTokens["default"].spacing_8, _coreTokens["default"].spacing_4, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.backgroundColor;
+}, _coreTokens["default"].color_grey_700, _coreTokens["default"].color_grey_300);
 var SectionList = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  gap: ", ";\n"])), _coreTokens["default"].spacing_4);
-var Title = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0 0 ", " 0;\n  padding: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 24px;\n"])), _coreTokens["default"].spacing_4, _coreTokens["default"].spacing_4, _coreTokens["default"].color_grey_900, _coreTokens["default"].type_sans, _coreTokens["default"].type_scale_03, _coreTokens["default"].type_semibold);
+var Title = _styledComponents["default"].h2(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0 0 ", " 0;\n  padding: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), _coreTokens["default"].spacing_4, _coreTokens["default"].spacing_4, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.sectionTitleFontColor;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.fontFamily;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.sectionTitleFontSize;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.sectionTitleFontStyle;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.sectionTitleFontWeight;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.sectionTitleLineHeight;
+});
 var _default = exports["default"] = DxcContextualMenu;

package/contextual-menu/ContextualMenu.stories.tsx

@@ -4,10 +4,11 @@ import DxcContextualMenu, { ContextualMenuContext } from "./ContextualMenu";
 import DxcContainer from "../container/Container";
 import SingleItem from "./SingleItem";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { userEvent, within } from "@storybook/test";
 import DxcBadge from "../badge/Badge";
 import { disabledRules } from "../../test/accessibility/rules/specific/contextual-menu/disabledRules";
 import preview from "../../.storybook/preview";
+import { ThemeProvider } from "styled-components";
+import useTheme from "../useTheme";
 
 export default {
   title: "Contextual Menu",
@@ -29,7 +30,7 @@ const items = [{ label: "Item 1" }, { label: "Item 2" }, { label: "Item 3" }, {
 
 const sections = [
   {
-    title: "Team repositories",
+    title: "Section title",
     items: [{ label: "Approved locations" }, { label: "Approved locations" }, { label: "Approved locations" }],
   },
   {
@@ -54,7 +55,7 @@ const groupItems = [
                 icon: "bookmark",
                 badge: <DxcBadge color="purple" label="Experimental" />,
               },
-              { label: "Selected Item 3" },
+              { label: "Selected Item 3", selectedByDefault: true },
             ],
           },
         ],
@@ -77,7 +78,7 @@ const itemsWithIcon = [
   {
     label: "Item 1",
     icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
         <path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z" />
       </svg>
     ),
@@ -114,7 +115,7 @@ const sectionsWithScroll = [
       { label: "Approved locations" },
       { label: "Approved locations" },
       { label: "Approved locations" },
-      { label: "Approved locations" },
+      { label: "Approved locations", selectedByDefault: true },
     ],
   },
 ];
@@ -124,7 +125,7 @@ const itemsWithTruncatedText = [
     label: "Item with a very long label that should be truncated",
     badge: <DxcBadge color="green" label="New" />,
     icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
         <path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z" />
       </svg>
     ),
@@ -135,7 +136,7 @@ const itemsWithTruncatedText = [
   },
 ];
 
-const ContextualMenu = () => (
+export const Chromatic = () => (
   <>
     <Title title="Default" theme="light" level={3} />
     <ExampleContainer>
@@ -171,7 +172,7 @@ const ContextualMenu = () => (
         <DxcContextualMenu items={itemsWithTruncatedText} />
       </DxcContainer>
     </ExampleContainer>
-    <Title title="With scroll" theme="light" level={3} />
+    <Title title="With auto-scroll" theme="light" level={3} />
     <ExampleContainer>
       <DxcContainer height="300px" width="300px">
         <DxcContextualMenu items={sectionsWithScroll} />
@@ -186,47 +187,45 @@ const ContextualMenu = () => (
   </>
 );
 
-export const Chromatic = ContextualMenu.bind({});
-Chromatic.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByText("Grouped Item 1"));
-  await userEvent.click(canvas.getByText("Grouped Item 2"));
-  await userEvent.click(canvas.getByText("Selected Item 3"));
-};
+export const SingleItemStates = () => {
+  const colorsTheme = useTheme();
 
-export const SingleItemStates = () => (
-  <DxcContainer width="300px">
-    <ContextualMenuContext.Provider value={{ selectedItemId: -1, setSelectedItemId: () => {} }}>
-      <Title title="Default" theme="light" level={3} />
-      <ExampleContainer>
-        <SingleItem {...items[0]} id={0} depthLevel={0} />
-      </ExampleContainer>
-      <Title title="Focus" theme="light" level={3} />
-      <ExampleContainer pseudoState="pseudo-focus">
-        <SingleItem {...items[0]} id={0} depthLevel={0} />
-      </ExampleContainer>
-      <Title title="Hover" theme="light" level={3} />
-      <ExampleContainer pseudoState="pseudo-hover">
-        <SingleItem {...items[0]} id={0} depthLevel={0} />
-      </ExampleContainer>
-      <Title title="Active" theme="light" level={3} />
-      <ExampleContainer pseudoState="pseudo-active">
-        <SingleItem {...items[0]} id={0} depthLevel={0} />
-      </ExampleContainer>
-    </ContextualMenuContext.Provider>
-    <ContextualMenuContext.Provider value={{ selectedItemId: 0, setSelectedItemId: () => {} }}>
-      <Title title="Selected" theme="light" level={3} />
-      <ExampleContainer>
-        <SingleItem {...items[0]} id={0} depthLevel={0} />
-      </ExampleContainer>
-      <Title title="Selected hover" theme="light" level={3} />
-      <ExampleContainer pseudoState="pseudo-hover">
-        <SingleItem {...items[0]} id={0} depthLevel={0} />
-      </ExampleContainer>
-      <Title title="Selected active" theme="light" level={3} />
-      <ExampleContainer pseudoState="pseudo-active">
-        <SingleItem {...items[0]} id={0} depthLevel={0} />
-      </ExampleContainer>
-    </ContextualMenuContext.Provider>
-  </DxcContainer>
-);
+  return (
+    <ThemeProvider theme={colorsTheme.contextualMenu}>
+      <DxcContainer width="300px">
+        <ContextualMenuContext.Provider value={{ selectedItemId: -1, setSelectedItemId: () => {} }}>
+          <Title title="Default" theme="light" level={3} />
+          <ExampleContainer>
+            <SingleItem {...items[0]} id={0} depthLevel={0} />
+          </ExampleContainer>
+          <Title title="Focus" theme="light" level={3} />
+          <ExampleContainer pseudoState="pseudo-focus">
+            <SingleItem {...items[0]} id={0} depthLevel={0} />
+          </ExampleContainer>
+          <Title title="Hover" theme="light" level={3} />
+          <ExampleContainer pseudoState="pseudo-hover">
+            <SingleItem {...items[0]} id={0} depthLevel={0} />
+          </ExampleContainer>
+          <Title title="Active" theme="light" level={3} />
+          <ExampleContainer pseudoState="pseudo-active">
+            <SingleItem {...items[0]} id={0} depthLevel={0} />
+          </ExampleContainer>
+        </ContextualMenuContext.Provider>
+        <ContextualMenuContext.Provider value={{ selectedItemId: 0, setSelectedItemId: () => {} }}>
+          <Title title="Selected" theme="light" level={3} />
+          <ExampleContainer>
+            <SingleItem {...items[0]} id={0} depthLevel={0} />
+          </ExampleContainer>
+          <Title title="Selected hover" theme="light" level={3} />
+          <ExampleContainer pseudoState="pseudo-hover">
+            <SingleItem {...items[0]} id={0} depthLevel={0} />
+          </ExampleContainer>
+          <Title title="Selected active" theme="light" level={3} />
+          <ExampleContainer pseudoState="pseudo-active">
+            <SingleItem {...items[0]} id={0} depthLevel={0} />
+          </ExampleContainer>
+        </ContextualMenuContext.Provider>
+      </DxcContainer>
+    </ThemeProvider>
+  );
+};