@dxc-technology/halstack-react 0.0.0-1b3d457 → 0.0.0-1b8b460

package/HalstackContext.js

@@ -85,7 +85,7 @@ var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
 };
 
 var parseTheme = function parseTheme(theme) {
-  var _theme$accordion$font, _theme$accordion, _theme$accordion$font2, _theme$accordion2, _theme$accordion$acce, _theme$accordion3, _theme$accordion$acce2, _theme$accordion4, _theme$accordion$acce3, _theme$accordion5, _setOpacity, _theme$accordion6, _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, _addLightness, _theme$button11, _addLightness2, _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$fontColor2, _theme$chip3, _theme$dateInput$sele, _theme$dateInput, _theme$dateInput$sele2, _theme$dateInput2, _setOpacity2, _theme$dateInput3, _theme$dropdown$baseC, _theme$dropdown, _theme$dropdown$fontC, _theme$dropdown2, _theme$dropdown$optio, _theme$dropdown3, _theme$dropdown$optio2, _theme$dropdown4, _setOpacity3, _theme$dropdown5, _setOpacity4, _theme$dropdown6, _setOpacity5, _theme$dropdown7, _setOpacity6, _theme$dropdown8, _theme$dropdown$fontC2, _theme$dropdown9, _theme$dropdown$fontC3, _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, _setOpacity7, _theme$header6, _theme$header$logo, _theme$header7, _theme$header$logoRes, _theme$header8, _theme$header$content, _theme$header9, _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$quickNav$fontC, _theme$quickNav, _theme$quickNav$accen, _theme$quickNav2, _setOpacity8, _theme$quickNav3, _theme$radioGroup$bas, _theme$radioGroup, _theme$radioGroup$fon, _theme$radioGroup2, _theme$radioGroup$fon2, _theme$radioGroup3, _theme$radioGroup$fon3, _theme$radioGroup4, _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, _setOpacity9, _theme$select6, _theme$select$fontCol4, _theme$select7, _subLightness6, _theme$select8, _subLightness7, _theme$select9, _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, _subLightness8, _theme$slider8, _subLightness9, _theme$slider9, _setOpacity10, _theme$slider10, _theme$spinner$accent, _theme$spinner, _theme$spinner$baseCo, _theme$spinner2, _theme$spinner$fontCo, _theme$spinner3, _theme$spinner$fontCo2, _theme$spinner4, _theme$switch$checked, _theme$switch, _theme$switch$fontCol, _theme$switch2, _setOpacity11, _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, _addLightness3, _theme$tabs5, _addLightness4, _theme$tabs6, _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, _setOpacity12, _theme$textInput8, _setOpacity13, _theme$textInput9, _setOpacity14, _theme$textInput10, _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, _subLightness10, _theme$toggleGroup6, _subLightness11, _theme$toggleGroup7, _addLightness5, _theme$toggleGroup8, _addLightness6, _theme$toggleGroup9, _subLightness12, _theme$toggleGroup10, _theme$wizard$baseCol, _theme$wizard, _theme$wizard$fontCol, _theme$wizard2, _theme$wizard$baseCol2, _theme$wizard3, _theme$wizard$fontCol2, _theme$wizard4, _theme$wizard$fontCol3, _theme$wizard5, _theme$wizard$fontCol4, _theme$wizard6, _theme$wizard$fontCol5, _theme$wizard7, _setOpacity15, _theme$wizard8, _setOpacity16, _theme$wizard9, _setOpacity17, _theme$wizard10, _setOpacity18, _theme$wizard11;
+  var _theme$accordion$font, _theme$accordion, _theme$accordion$font2, _theme$accordion2, _theme$accordion$acce, _theme$accordion3, _theme$accordion$acce2, _theme$accordion4, _theme$accordion$acce3, _theme$accordion5, _setOpacity, _theme$accordion6, _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, _addLightness, _theme$button11, _addLightness2, _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$fontColor2, _theme$chip3, _theme$dateInput$sele, _theme$dateInput, _theme$dateInput$sele2, _theme$dateInput2, _setOpacity2, _theme$dateInput3, _theme$dropdown$baseC, _theme$dropdown, _theme$dropdown$fontC, _theme$dropdown2, _theme$dropdown$optio, _theme$dropdown3, _theme$dropdown$optio2, _theme$dropdown4, _setOpacity3, _theme$dropdown5, _setOpacity4, _theme$dropdown6, _setOpacity5, _theme$dropdown7, _setOpacity6, _theme$dropdown8, _theme$dropdown$fontC2, _theme$dropdown9, _theme$dropdown$fontC3, _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, _setOpacity7, _theme$header6, _theme$header$logo, _theme$header7, _theme$header$logoRes, _theme$header8, _theme$header$content, _theme$header9, _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$quickNav$fontC, _theme$quickNav, _setOpacity8, _theme$quickNav2, _theme$radioGroup$bas, _theme$radioGroup, _theme$radioGroup$fon, _theme$radioGroup2, _theme$radioGroup$fon2, _theme$radioGroup3, _theme$radioGroup$fon3, _theme$radioGroup4, _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, _setOpacity9, _theme$select6, _theme$select$fontCol4, _theme$select7, _subLightness6, _theme$select8, _subLightness7, _theme$select9, _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, _subLightness8, _theme$slider8, _subLightness9, _theme$slider9, _setOpacity10, _theme$slider10, _theme$spinner$accent, _theme$spinner, _theme$spinner$baseCo, _theme$spinner2, _theme$spinner$fontCo, _theme$spinner3, _theme$spinner$fontCo2, _theme$spinner4, _theme$switch$checked, _theme$switch, _theme$switch$fontCol, _theme$switch2, _setOpacity11, _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, _addLightness3, _theme$tabs5, _addLightness4, _theme$tabs6, _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, _setOpacity12, _theme$textInput8, _setOpacity13, _theme$textInput9, _setOpacity14, _theme$textInput10, _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, _subLightness10, _theme$toggleGroup6, _subLightness11, _theme$toggleGroup7, _addLightness5, _theme$toggleGroup8, _addLightness6, _theme$toggleGroup9, _subLightness12, _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, _setOpacity15, _theme$wizard8, _setOpacity16, _theme$wizard9, _setOpacity17, _theme$wizard10, _setOpacity18, _theme$wizard11;
 
   var componentTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
   var accordionTokens = componentTokensCopy.accordion;
@@ -167,8 +167,7 @@ var parseTheme = function parseTheme(theme) {
   progressBarTokens.helperTextFontColor = (_theme$progressBar$fo3 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar5 = theme.progressBar) === null || _theme$progressBar5 === void 0 ? void 0 : _theme$progressBar5.fontColor) !== null && _theme$progressBar$fo3 !== void 0 ? _theme$progressBar$fo3 : progressBarTokens.helperTextFontColor;
   var quickNavTokens = componentTokensCopy.quickNav;
   quickNavTokens.fontColor = (_theme$quickNav$fontC = theme === null || theme === void 0 ? void 0 : (_theme$quickNav = theme.quickNav) === null || _theme$quickNav === void 0 ? void 0 : _theme$quickNav.fontColor) !== null && _theme$quickNav$fontC !== void 0 ? _theme$quickNav$fontC : quickNavTokens.fontColor;
-  quickNavTokens.selectedFontColor = (_theme$quickNav$accen = theme === null || theme === void 0 ? void 0 : (_theme$quickNav2 = theme.quickNav) === null || _theme$quickNav2 === void 0 ? void 0 : _theme$quickNav2.accentColor) !== null && _theme$quickNav$accen !== void 0 ? _theme$quickNav$accen : quickNavTokens.selectedFontColor;
-  quickNavTokens.hoverFontColor = (_setOpacity8 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$quickNav3 = theme.quickNav) === null || _theme$quickNav3 === void 0 ? void 0 : _theme$quickNav3.accentColor, 0.7)) !== null && _setOpacity8 !== void 0 ? _setOpacity8 : quickNavTokens.hoverFontColor;
+  quickNavTokens.hoverFontColor = (_setOpacity8 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$quickNav2 = theme.quickNav) === null || _theme$quickNav2 === void 0 ? void 0 : _theme$quickNav2.accentColor, 0.7)) !== null && _setOpacity8 !== void 0 ? _setOpacity8 : quickNavTokens.hoverFontColor;
   var radioGroupTokens = componentTokensCopy.radioGroup;
   radioGroupTokens.radioInputColor = (_theme$radioGroup$bas = theme === null || theme === void 0 ? void 0 : (_theme$radioGroup = theme.radioGroup) === null || _theme$radioGroup === void 0 ? void 0 : _theme$radioGroup.baseColor) !== null && _theme$radioGroup$bas !== void 0 ? _theme$radioGroup$bas : radioGroupTokens.radioInputColor;
   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;
@@ -242,12 +241,12 @@ var parseTheme = function parseTheme(theme) {
   toggleGroupTokens.unselectedHoverBackgroundColor = (_subLightness12 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBaseColor, 8)) !== null && _subLightness12 !== void 0 ? _subLightness12 : 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$fontCol = theme === null || theme === void 0 ? void 0 : (_theme$wizard2 = theme.wizard) === null || _theme$wizard2 === void 0 ? void 0 : _theme$wizard2.fontColor) !== null && _theme$wizard$fontCol !== void 0 ? _theme$wizard$fontCol : wizardTokens.selectedStepFontColor;
+  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.selectedFontColor) !== null && _theme$wizard$selecte !== void 0 ? _theme$wizard$selecte : wizardTokens.selectedStepFontColor;
   wizardTokens.selectedStepBorderColor = (_theme$wizard$baseCol2 = theme === null || theme === void 0 ? void 0 : (_theme$wizard3 = theme.wizard) === null || _theme$wizard3 === void 0 ? void 0 : _theme$wizard3.baseColor) !== null && _theme$wizard$baseCol2 !== void 0 ? _theme$wizard$baseCol2 : wizardTokens.selectedStepBorderColor;
-  wizardTokens.visitedLabelFontColor = (_theme$wizard$fontCol2 = theme === null || theme === void 0 ? void 0 : (_theme$wizard4 = theme.wizard) === null || _theme$wizard4 === void 0 ? void 0 : _theme$wizard4.fontColor) !== null && _theme$wizard$fontCol2 !== void 0 ? _theme$wizard$fontCol2 : wizardTokens.visitedLabelFontColor;
-  wizardTokens.selectedLabelFontColor = (_theme$wizard$fontCol3 = theme === null || theme === void 0 ? void 0 : (_theme$wizard5 = theme.wizard) === null || _theme$wizard5 === void 0 ? void 0 : _theme$wizard5.fontColor) !== null && _theme$wizard$fontCol3 !== void 0 ? _theme$wizard$fontCol3 : wizardTokens.selectedLabelFontColor;
-  wizardTokens.visitedHelperTextFontColor = (_theme$wizard$fontCol4 = theme === null || theme === void 0 ? void 0 : (_theme$wizard6 = theme.wizard) === null || _theme$wizard6 === void 0 ? void 0 : _theme$wizard6.fontColor) !== null && _theme$wizard$fontCol4 !== void 0 ? _theme$wizard$fontCol4 : wizardTokens.visitedHelperTextFontColor;
-  wizardTokens.selectedHelperTextFontColor = (_theme$wizard$fontCol5 = theme === null || theme === void 0 ? void 0 : (_theme$wizard7 = theme.wizard) === null || _theme$wizard7 === void 0 ? void 0 : _theme$wizard7.fontColor) !== null && _theme$wizard$fontCol5 !== void 0 ? _theme$wizard$fontCol5 : wizardTokens.selectedHelperTextFontColor;
+  wizardTokens.visitedLabelFontColor = (_theme$wizard$fontCol = theme === null || theme === void 0 ? void 0 : (_theme$wizard4 = theme.wizard) === null || _theme$wizard4 === void 0 ? void 0 : _theme$wizard4.fontColor) !== null && _theme$wizard$fontCol !== void 0 ? _theme$wizard$fontCol : wizardTokens.visitedLabelFontColor;
+  wizardTokens.selectedLabelFontColor = (_theme$wizard$fontCol2 = theme === null || theme === void 0 ? void 0 : (_theme$wizard5 = theme.wizard) === null || _theme$wizard5 === void 0 ? void 0 : _theme$wizard5.fontColor) !== null && _theme$wizard$fontCol2 !== void 0 ? _theme$wizard$fontCol2 : wizardTokens.selectedLabelFontColor;
+  wizardTokens.visitedHelperTextFontColor = (_theme$wizard$fontCol3 = theme === null || theme === void 0 ? void 0 : (_theme$wizard6 = theme.wizard) === null || _theme$wizard6 === void 0 ? void 0 : _theme$wizard6.fontColor) !== null && _theme$wizard$fontCol3 !== void 0 ? _theme$wizard$fontCol3 : wizardTokens.visitedHelperTextFontColor;
+  wizardTokens.selectedHelperTextFontColor = (_theme$wizard$fontCol4 = theme === null || theme === void 0 ? void 0 : (_theme$wizard7 = theme.wizard) === null || _theme$wizard7 === void 0 ? void 0 : _theme$wizard7.fontColor) !== null && _theme$wizard$fontCol4 !== void 0 ? _theme$wizard$fontCol4 : wizardTokens.selectedHelperTextFontColor;
   wizardTokens.unvisitedStepBorderColor = (_setOpacity15 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$wizard8 = theme.wizard) === null || _theme$wizard8 === void 0 ? void 0 : _theme$wizard8.fontColor, 0.6)) !== null && _setOpacity15 !== void 0 ? _setOpacity15 : wizardTokens.unvisitedStepBorderColor;
   wizardTokens.unvisitedStepFontColor = (_setOpacity16 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$wizard9 = theme.wizard) === null || _theme$wizard9 === void 0 ? void 0 : _theme$wizard9.fontColor, 0.6)) !== null && _setOpacity16 !== void 0 ? _setOpacity16 : wizardTokens.unvisitedStepFontColor;
   wizardTokens.unvisitedLabelFontColor = (_setOpacity17 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$wizard10 = theme.wizard) === null || _theme$wizard10 === void 0 ? void 0 : _theme$wizard10.fontColor, 0.6)) !== null && _setOpacity17 !== void 0 ? _setOpacity17 : wizardTokens.unvisitedLabelFontColor;

package/accordion/types.d.ts

@@ -56,6 +56,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
      */

package/accordion-group/types.d.ts

@@ -31,6 +31,7 @@ export declare type AccordionPropsType = {
      */
     disabled?: boolean;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
      */

package/box/types.d.ts

@@ -31,6 +31,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
      */

package/card/types.d.ts

@@ -47,6 +47,7 @@ declare type Props = {
      */
     margin?: Space | Size;
     /**
+     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
      * Size of the padding to be applied to the content area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
      */

package/checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import CheckboxPropsType from "./types";
-declare const DxcCheckbox: ({ checked, defaultChecked, value, label, labelPosition, name, disabled, optional, onChange, margin, size, tabIndex, }: CheckboxPropsType) => JSX.Element;
+declare const DxcCheckbox: React.ForwardRefExoticComponent<CheckboxPropsType & React.RefAttributes<HTMLDivElement>>;
 export default DxcCheckbox;

package/checkbox/Checkbox.js

@@ -46,7 +46,7 @@ var checkedIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
 }));
 
-var DxcCheckbox = function DxcCheckbox(_ref) {
+var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
       _ref$defaultChecked = _ref.defaultChecked,
       defaultChecked = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked,
@@ -96,7 +96,6 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
   var handleKeyboard = function handleKeyboard(event) {
     switch (event.key) {
       case " ":
-      case "Space":
         event.preventDefault();
         handleCheckboxChange();
     }
@@ -110,7 +109,8 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
     margin: margin,
     size: size,
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
-    backgroundType: backgroundType
+    backgroundType: backgroundType,
+    ref: ref
   }, label && labelPosition === "before" && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
     id: labelId,
     disabled: disabled,
@@ -140,7 +140,7 @@ var DxcCheckbox = function DxcCheckbox(_ref) {
     disabled: disabled,
     backgroundType: backgroundType
   }, optional && "".concat(translatedLabels.formFields.optionalLabel, " "), label)));
-};
+});
 
 var sizes = {
   small: "120px",
@@ -174,7 +174,7 @@ var getDisabledColor = function getDisabledColor(props, element) {
   }
 };
 
-var getNotDisabledColor = function getNotDisabledColor(props, element) {
+var getEnabledColor = function getEnabledColor(props, element) {
   switch (element) {
     case "check":
       return props.backgroundType && props.backgroundType === "dark" ? props.theme.checkColorOnDark : props.theme.checkColor;
@@ -197,7 +197,7 @@ var getNotDisabledColor = function getNotDisabledColor(props, element) {
 };
 
 var LabelContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n"])), function (props) {
-  return props.disabled ? getDisabledColor(props, "label") : getNotDisabledColor(props, "label");
+  return props.disabled ? getDisabledColor(props, "label") : getEnabledColor(props, "label");
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -210,19 +210,21 @@ var ValueInput = _styledComponents["default"].input(_templateObject2 || (_templa
 
 var CheckboxContainer = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
 
-var Checkbox = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 18px;\n  width: 18px;\n  border: solid 2px\n    ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  color: ", ";\n\n  &:focus {\n    outline: 2px solid\n      ", ";\n    outline-offset: 2px;\n  }\n  svg {\n    position: absolute;\n    width: 22px;\n    height: 22px;\n  }\n  ", "\n"])), function (props) {
-  return props.disabled ? getDisabledColor(props, "border") : getNotDisabledColor(props, "border");
+var Checkbox = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 18px;\n  width: 18px;\n  border: 2px solid\n    ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  color: ", ";\n\n  &:focus {\n    outline: 2px solid\n      ", ";\n    outline-offset: 2px;\n  }\n  svg {\n    position: absolute;\n    width: 22px;\n    height: 22px;\n  }\n  ", "\n"])), function (props) {
+  return props.disabled ? getDisabledColor(props, "border") : getEnabledColor(props, "border");
 }, function (props) {
-  return props.checked ? props.disabled ? getDisabledColor(props, "check") : getNotDisabledColor(props, "check") : "transparent";
+  return props.checked ? props.disabled ? getDisabledColor(props, "check") : getEnabledColor(props, "check") : "transparent";
 }, function (props) {
-  return props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "background");
+  return props.disabled ? getDisabledColor(props, "background") : getEnabledColor(props, "background");
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
 }, function (props) {
   return props.disabled && "pointer-events: none;";
 });
 
-var MainContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n  gap: ", ";\n\n  &:hover ", " {\n    border: 2px solid\n      ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+var MainContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  cursor: ", ";\n\n  &:hover ", " {\n    border: 2px solid\n      ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+  return props.theme.checkLabelSpacing;
+}, function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
@@ -236,14 +238,12 @@ var MainContainer = _styledComponents["default"].div(_templateObject5 || (_templ
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 }, function (props) {
   return props.disabled ? "not-allowed" : "pointer";
-}, function (props) {
-  return props.theme.checkLabelSpacing;
 }, Checkbox, function (props) {
-  return props.disabled ? getDisabledColor(props, "border") : getNotDisabledColor(props, "hoverBorder");
+  return props.disabled ? getDisabledColor(props, "border") : getEnabledColor(props, "hoverBorder");
 }, function (props) {
-  return props.checked ? props.disabled ? getDisabledColor(props, "check") : getNotDisabledColor(props, "check") : "transparent";
+  return props.checked ? props.disabled ? getDisabledColor(props, "check") : getEnabledColor(props, "check") : "transparent";
 }, function (props) {
-  return props.disabled ? getDisabledColor(props, "background") : getNotDisabledColor(props, "hoverBackground");
+  return props.disabled ? getDisabledColor(props, "background") : getEnabledColor(props, "hoverBackground");
 });
 
 var _default = DxcCheckbox;

package/checkbox/Checkbox.stories.tsx

@@ -4,7 +4,7 @@ import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DarkContainer from "../../.storybook/components/DarkSection";
-import { userEvent } from "@storybook/testing-library";
+import styled from "styled-components";
 
 export default {
   title: "Checkbox",
@@ -17,29 +17,33 @@ const Checkbox = () => (
       <Title title="Default" theme="light" level={4} />
       <DxcCheckbox label="Checkbox" />
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Focused" theme="light" level={4} />
-      <DxcCheckbox label="Focused" />
-    </ExampleContainer>
     <ExampleContainer>
       <Title title="Checked" theme="light" level={4} />
       <DxcCheckbox label="Checkbox" defaultChecked />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Optional" theme="light" level={4} />
-      <DxcCheckbox label="Checkbox" optional />
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Disabled and checked" theme="light" level={4} />
-      <DxcCheckbox label="Checkbox" disabled defaultChecked />
+      <Title title="Disabled, checked and optional" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled defaultChecked optional />
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled and optional" theme="light" level={4} />
-      <DxcCheckbox label="Checkbox" disabled optional />
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcCheckbox label="Focused" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcCheckbox label="Hovered" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered and checked" theme="light" level={4} />
+      <DxcCheckbox label="Hovered" defaultChecked />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Disabled, optional and checked" theme="light" level={4} />
-      <DxcCheckbox label="Checkbox" disabled optional defaultChecked />
+      <Title title="Optional" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" optional />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Label after" theme="light" level={4} />
@@ -53,25 +57,9 @@ const Checkbox = () => (
       <Title title="Optional with label after" theme="light" level={4} />
       <DxcCheckbox label="Checkbox" optional labelPosition="after" />
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled and checked with label after" theme="light" level={4} />
-      <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
-    </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled and optional with label after" theme="light" level={4} />
-      <DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled, optional and checked with label after" theme="light" level={4} />
-      <DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered" theme="light" level={4} />
-      <DxcCheckbox label="Hovered" />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered and checked" theme="light" level={4} />
-      <DxcCheckbox label="Hovered" defaultChecked />
+      <DxcCheckbox label="Checkbox" disabled labelPosition="after" optional />
     </ExampleContainer>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
@@ -84,20 +72,28 @@ const Checkbox = () => (
           <DxcCheckbox label="Checkbox" defaultChecked />
         </ExampleContainer>
         <ExampleContainer>
-          <Title title="Optional" theme="dark" level={4} />
-          <DxcCheckbox label="Checkbox" optional />
+          <Title title="Disabled" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled />
         </ExampleContainer>
         <ExampleContainer>
-          <Title title="Disabled and checked" theme="dark" level={4} />
-          <DxcCheckbox label="Checkbox" disabled defaultChecked />
+          <Title title="Disabled, checked and optional" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled defaultChecked optional />
         </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled and optional" theme="dark" level={4} />
-          <DxcCheckbox label="Checkbox" disabled optional />
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Focused" theme="dark" level={4} />
+          <DxcCheckbox label="Focused" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered" theme="dark" level={4} />
+          <DxcCheckbox label="Hovered" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered and checked" theme="dark" level={4} />
+          <DxcCheckbox label="Hovered" defaultChecked />
         </ExampleContainer>
         <ExampleContainer>
-          <Title title="Disabled, optional and checked" theme="dark" level={4} />
-          <DxcCheckbox label="Checkbox" disabled optional defaultChecked />
+          <Title title="Optional" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" optional />
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Label after" theme="dark" level={4} />
@@ -111,25 +107,9 @@ const Checkbox = () => (
           <Title title="Optional with label after" theme="dark" level={4} />
           <DxcCheckbox label="Checkbox" optional labelPosition="after" />
         </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled and checked with label after" theme="dark" level={4} />
-          <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
-        </ExampleContainer>
         <ExampleContainer>
           <Title title="Disabled and optional with label after" theme="dark" level={4} />
-          <DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled, optional and checked with label after" theme="dark" level={4} />
-          <DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-hover">
-          <Title title="Hovered" theme="dark" level={4} />
-          <DxcCheckbox label="Hovered" />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-hover">
-          <Title title="Hovered and checked" theme="dark" level={4} />
-          <DxcCheckbox label="Hovered" defaultChecked />
+          <DxcCheckbox label="Checkbox" disabled labelPosition="after" optional />
         </ExampleContainer>
       </DarkContainer>
     </BackgroundColorProvider>
@@ -178,11 +158,51 @@ const Checkbox = () => (
       <Title title="Xxlarge" theme="light" level={4} />
       <DxcCheckbox label="Xxlarge" margin="xxlarge" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Overflow container" theme="light" level={4} />
+      <ScrollableContainer id="scroll-container">
+        <DxcCheckbox label="Checkbox" defaultChecked />
+        <DxcCheckbox label="Checkbox" defaultChecked />
+        <DxcCheckbox label="Checkbox" />
+        <DxcCheckbox label="Checkbox" defaultChecked />
+        <DxcCheckbox label="Checkbox" />
+        <DxcCheckbox label="Checkbox" />
+        <DxcCheckbox label="Checkbox" />
+        <DxcCheckbox label="Checkbox" defaultChecked />
+      </ScrollableContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Label overflow" theme="light" level={4} />
+      <SmallContainer>
+        <DxcCheckbox label="Very long label to check its overflowing" defaultChecked />
+        <DxcCheckbox label="Very long label to check its overflowing" labelPosition="after" />
+      </SmallContainer>
+    </ExampleContainer>
   </>
 );
 
 export const Chromatic = Checkbox.bind({});
+
 Chromatic.play = async () => {
-  await userEvent.tab();
-  await userEvent.tab();
+  const listEl = document.getElementById("scroll-container");
+  listEl?.scrollTo?.({ top: 50 });
 };
+
+const ScrollableContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 200px;
+  height: 200px;
+  border: 1px solid #000;
+  padding: 14px;
+  overflow: auto;
+`;
+
+const SmallContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 150px;
+  height: 150px;
+`;

package/checkbox/types.d.ts

@@ -61,4 +61,8 @@ declare type Props = {
      */
     tabIndex?: number;
 };
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
 export default Props;