@dxc-technology/halstack-react 12.1.0 → 12.2.0

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

@@ -9,7 +9,7 @@ exports["default"] = exports.HalstackProvider = exports.HalstackLanguageContext
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _color = _interopRequireDefault(require("color"));
-var _styledComponents = require("styled-components");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _variables = require("./common/variables");
 var _templateObject;
 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); }
@@ -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;
@@ -300,11 +310,11 @@ var HalstackProvider = exports.HalstackProvider = function HalstackProvider(_ref
   var parsedLabels = (0, _react.useMemo)(function () {
     return labels ? parseLabels(labels) : _variables.defaultTranslatedComponentLabels;
   }, [labels]);
-  return /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
+  return /*#__PURE__*/_react["default"].createElement(Halstack, null, /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
     value: parsedTheme
-  }, /*#__PURE__*/_react["default"].createElement(GlobalStyle, null), /*#__PURE__*/_react["default"].createElement(HalstackLanguageContext.Provider, {
+  }, /*#__PURE__*/_react["default"].createElement(HalstackLanguageContext.Provider, {
     value: parsedLabels
-  }, children));
+  }, children)));
 };
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
+var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
 var _default = exports["default"] = HalstackContext;

package/breadcrumbs/types.d.ts

@@ -3,10 +3,34 @@ type Item = {
     label: string;
 };
 type Props = {
+    /**
+     * Provides a label that describes the type of navigation enabled by
+     * the component.
+     */
     ariaLabel?: string;
+    /**
+     * Array of objects representing the items of the breadcrumbs.
+     */
     items: Item[];
+    /**
+     * Number of items before showing a collapsed version of the
+     * breadcrumbs. It can't be lower than two (root/collapsed action and
+     * current page).
+     */
     itemsBeforeCollapse?: number;
+    /**
+     * Callback for custom navigation with third-party libraries such as
+     * Next ('useRouter') or React Router ('useNavigate').
+     * This function will be called when an item is clicked,
+     * receiving its 'href' as a parameter.
+     * @param href
+     * @returns
+     */
     onItemClick?: (href: string) => void;
+    /**
+     * When items are collapsed, whether the root item should always be
+     * displayed or not.
+     */
     showRoot?: boolean;
 };
 export type ItemPropsType = Item & {

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/container/types.d.ts

@@ -43,27 +43,129 @@ type Overflow = OverflowValues | {
     y?: OverflowValues;
 };
 type Props = {
+    /**
+     * Based on the CSS property background allows configuring all properties related to the background of a container.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background
+     */
+    background?: Background;
+    /**
+     * Based on the CSS property border allows configuring all properties related to the border of a container.
+     */
+    border?: Border;
+    /**
+     * Sets the border-radius CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+     */
+    borderRadius?: string;
+    /**
+     * Sets the box-shadow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+     */
+    boxShadow?: string;
+    /**
+     * Sets the box-sizing CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
+     */
     boxSizing?: "border-box" | "content-box";
+    /**
+     * Custom content inside the container.
+     */
+    children: React.ReactNode;
+    /**
+     * Sets the display CSS property.
+     * The set of values is limited to the ones related to the outer display type.
+     * If you want to apply any pattern from the inner box and how the children are laid out,
+     * we recommend you to use the Flex and Grid components.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/display
+     */
     display?: "block" | "inline-block" | "inline" | "none";
-    width?: string;
+    /**
+     * Sets the float CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
+     */
+    float?: "left" | "right" | "none";
+    /**
+     * Sets the height CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/height
+     */
     height?: string;
+    /**
+     * Based on the CSS property inset this prop is a shorthand that corresponds
+     * to the top, right, bottom, and/or left properties.
+     */
+    inset?: Inset;
+    /**
+     * Size of the margin to be applied to the component.
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
+     * in order to specify different margin sizes.
+     */
+    margin?: Space;
+    /**
+     * Sets the max-height CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+     */
     maxWidth?: string;
+    /**
+     * Sets the max-width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+     */
     maxHeight?: string;
+    /**
+     * Sets the min-height CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+     */
     minWidth?: string;
+    /**
+     * Sets the min-width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+     */
     minHeight?: string;
-    padding?: Space;
-    border?: Border;
-    borderRadius?: string;
-    margin?: Space;
+    /**
+     * Based on the CSS property outline allows configuring all properties related
+     * to the outline of a container.
+     */
+    outline?: Outline;
+    /**
+     * Sets the overflow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
     overflow?: Overflow;
+    /**
+     * Size of the margin to be applied to the component.
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
+     * in order to specify different margin sizes.
+     */
+    padding?: Space;
+    /**
+     * Sets the position CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
     position?: "static" | "relative" | "absolute" | "fixed" | "sticky";
-    inset?: Inset;
-    float?: "left" | "right" | "none";
+    /**
+     * Sets the width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/width
+     */
+    width?: string;
+    /**
+     * Sets the z-index CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
+     */
     zIndex?: "auto" | number;
-    background?: Background;
-    boxShadow?: string;
-    outline?: Outline;
-    children: React.ReactNode;
 };
 export type StyledProps = Omit<Props, "display" | "width" | "height" | "opacity" | "overflow"> & {
     $display?: "block" | "inline-block" | "inline" | "none";

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; }
@@ -52,6 +53,7 @@ var DxcContextualMenu = function DxcContextualMenu(_ref) {
   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)
@@ -87,7 +89,9 @@ var DxcContextualMenu = function DxcContextualMenu(_ref) {
       setFirstUpdate(false);
     }
   }, [firstUpdate, selectedItemId]);
-  return /*#__PURE__*/_react["default"].createElement(ContextualMenu, {
+  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, {
@@ -100,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"].h2(_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;