@dxc-technology/halstack-react 0.0.0-59b9187 → 0.0.0-5a4d834

package/common/coreTokens.js

@@ -112,10 +112,10 @@ var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(k
   return CoreColorTokens[key];
 };
 /**
- * Halstack Spacing Principles
+ * Halstack Spacing Values
  * @link https://developer.dxc.com/halstack/next/principles/spacing/
  */
-var SpacingTokens = {
+var CoreSpacingTokens = {
   spacing_0: "0rem",
   spacing_2: "0.125rem",
   spacing_4: "0.25rem",
@@ -132,11 +132,10 @@ var SpacingTokens = {
   spacing_96: "6rem",
   spacing_112: "7rem"
 };
-var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), SpacingTokens), {}, {
+var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), CoreSpacingTokens), {}, {
   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;
@@ -289,7 +312,6 @@ export declare const componentTokens: {
         disabledColor: string;
         disabledButtonBackgroundColor: string;
         disabledButtonBorderColor: string;
-        disabledBorderColor: string;
         optionBackgroundColor: string;
         hoverOptionBackgroundColor: string;
         activeOptionBackgroundColor: string;
@@ -329,7 +351,6 @@ export declare const componentTokens: {
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
         dragoverDropBackgroundColor: string;
-        activeFileItemIconBackgrounColor: string;
         errorFileItemBorderColor: string;
         errorFileItemBackgroundColor: string;
         errorFilePreviewBackgroundColor: string;
@@ -530,8 +551,8 @@ export declare const componentTokens: {
         totalItemsContainerMarginLeft: string;
     };
     paragraph: {
-        fontColor: string;
         display: string;
+        fontColor: string;
         fontSize: string;
         fontWeight: string;
     };
@@ -999,7 +1020,13 @@ export declare const componentTokens: {
         helperTextLineHeight: string;
         disabledHelperTextFontColor: string;
         prefixColor: string;
+        prefixDividerBorderWidth: string;
+        prefixDividerBorderStyle: string;
+        prefixDividerPaddingRight: string;
         suffixColor: string;
+        suffixDividerBorderStyle: string;
+        suffixDividerBorderWidth: string;
+        suffixDividerPaddingLeft: string;
         disabledPrefixColor: string;
         disabledSuffixColor: string;
         placeholderFontColor: string;
@@ -1174,6 +1201,12 @@ export type OpinionatedTheme = {
         fontColor: string;
         iconColor: string;
     };
+    contextualMenu: {
+        accentColor: string;
+        baseColor: string;
+        fontColor: string;
+        iconColor: string;
+    };
     dateInput: {
         baseColor: string;
         selectedFontColor: string;
@@ -1325,6 +1358,17 @@ export declare const defaultTranslatedComponentLabels: {
         warningTitleText: string;
         errorTitleText: string;
     };
+    barChart: {
+        ariaLabel: string;
+        filterLabel: string;
+        filterPlaceholder: string;
+        loadingDataMessage: string;
+        noDataMessageBody: string;
+        noDataMessageTitle: string;
+        noMatchesMessageBody: string;
+        noMatchesMessageTitle: string;
+        retryButtonLabel: string;
+    };
     dateInput: {
         invalidDateErrorMessage: string;
     };

package/common/variables.js

@@ -20,18 +20,18 @@ var componentTokens = exports.componentTokens = {
     assistiveTextFontColor: _coreTokens["default"].color_grey_700,
     disabledAssistiveTextFontColor: _coreTokens["default"].color_grey_500,
     assistiveTextMinWidth: "100px",
-    assistiveTextPaddingRight: "24px",
-    assistiveTextPaddingLeft: "0px",
+    assistiveTextPaddingRight: _coreTokens["default"].spacing_24,
+    assistiveTextPaddingLeft: _coreTokens["default"].spacing_0,
     titleLabelFontFamily: _coreTokens["default"].type_sans,
     titleLabelFontSize: _coreTokens["default"].type_scale_03,
     titleLabelFontWeight: _coreTokens["default"].type_regular,
     titleLabelFontStyle: _coreTokens["default"].type_normal,
     titleLabelFontColor: _coreTokens["default"].color_black,
     disabledTitleLabelFontColor: _coreTokens["default"].color_grey_500,
-    titleLabelPaddingTop: "0px",
-    titleLabelPaddingBottom: "0px",
-    titleLabelPaddingLeft: "0px",
-    titleLabelPaddingRight: "16px",
+    titleLabelPaddingTop: _coreTokens["default"].spacing_0,
+    titleLabelPaddingBottom: _coreTokens["default"].spacing_0,
+    titleLabelPaddingLeft: _coreTokens["default"].spacing_0,
+    titleLabelPaddingRight: _coreTokens["default"].spacing_16,
     focusBorderColor: _coreTokens["default"].color_blue_600,
     focusBorderStyle: _coreTokens["default"].border_solid,
     focusBorderThickness: "2px",
@@ -43,8 +43,8 @@ var componentTokens = exports.componentTokens = {
     iconColor: _coreTokens["default"].color_purple_700,
     disabledIconColor: _coreTokens["default"].color_grey_500,
     iconSize: "24px",
-    iconMarginLeft: "0px",
-    iconMarginRight: "12px",
+    iconMarginLeft: _coreTokens["default"].spacing_0,
+    iconMarginRight: _coreTokens["default"].spacing_12,
     accordionGroupSeparatorBorderColor: _coreTokens["default"].color_grey_200_a,
     accordionGroupSeparatorBorderThickness: "1px",
     accordionGroupSeparatorBorderRadius: "0px",
@@ -57,17 +57,17 @@ var componentTokens = exports.componentTokens = {
     titleFontStyle: _coreTokens["default"].type_normal,
     titleFontWeight: _coreTokens["default"].type_bold,
     titleTextTransform: _coreTokens["default"].type_uppercase,
-    titlePaddingRight: "0px",
-    titlePaddingLeft: "0px",
+    titlePaddingRight: _coreTokens["default"].spacing_0,
+    titlePaddingLeft: _coreTokens["default"].spacing_0,
     inlineTextFontFamily: _coreTokens["default"].type_sans,
     inlineTextFontColor: _coreTokens["default"].color_black,
     inlineTextFontSize: _coreTokens["default"].type_scale_01,
     inlineTextFontStyle: _coreTokens["default"].type_normal,
     inlineTextFontWeight: _coreTokens["default"].type_regular,
-    inlineTextPaddingLeft: "0px",
-    inlineTextPaddingRight: "0px",
-    contentPaddingLeft: "0px",
-    contentPaddingRight: "0px",
+    inlineTextPaddingLeft: _coreTokens["default"].spacing_0,
+    inlineTextPaddingRight: _coreTokens["default"].spacing_0,
+    contentPaddingLeft: _coreTokens["default"].spacing_0,
+    contentPaddingRight: _coreTokens["default"].spacing_0,
     contentPaddingTop: "20px",
     contentPaddingBottom: "30px",
     borderRadius: "4px",
@@ -78,8 +78,8 @@ var componentTokens = exports.componentTokens = {
     warningBorderColor: _coreTokens["default"].color_yellow_700,
     errorBorderColor: _coreTokens["default"].color_red_700,
     iconSize: "24px",
-    iconPaddingLeft: "0px",
-    iconPaddingRight: "0px",
+    iconPaddingLeft: _coreTokens["default"].spacing_0,
+    iconPaddingRight: _coreTokens["default"].spacing_0,
     infoIconColor: _coreTokens["default"].color_blue_800,
     successIconColor: _coreTokens["default"].color_green_700,
     warningIconColor: _coreTokens["default"].color_yellow_700,
@@ -121,7 +121,7 @@ var componentTokens = exports.componentTokens = {
     bulletIconWidth: "1.5rem",
     bulletHeight: "5px",
     bulletWidth: "5px",
-    bulletMarginRight: "0.5rem"
+    bulletMarginRight: _coreTokens["default"].spacing_8
   },
   button: {
     labelFontLineHeight: _coreTokens["default"].type_leading_normal,
@@ -195,7 +195,7 @@ var componentTokens = exports.componentTokens = {
     fontColor: _coreTokens["default"].color_black,
     disabledFontColor: _coreTokens["default"].color_grey_500,
     focusColor: _coreTokens["default"].color_blue_600,
-    checkLabelSpacing: "8px"
+    checkLabelSpacing: _coreTokens["default"].spacing_8
   },
   chip: {
     backgroundColor: _coreTokens["default"].color_grey_200,
@@ -210,12 +210,12 @@ var componentTokens = exports.componentTokens = {
     borderRadius: "80px",
     borderThickness: _coreTokens["default"].border_width_0,
     borderStyle: _coreTokens["default"].border_solid,
-    contentPaddingLeft: "16px",
-    contentPaddingRight: "16px",
-    contentPaddingTop: "0px",
-    contentPaddingBottom: "0px",
+    contentPaddingLeft: _coreTokens["default"].spacing_16,
+    contentPaddingRight: _coreTokens["default"].spacing_16,
+    contentPaddingTop: _coreTokens["default"].spacing_0,
+    contentPaddingBottom: _coreTokens["default"].spacing_0,
     iconSize: "24px",
-    iconSpacing: "8px",
+    iconSpacing: _coreTokens["default"].spacing_8,
     iconColor: _coreTokens["default"].color_grey_800,
     hoverIconColor: _coreTokens["default"].color_grey_900,
     activeIconColor: _coreTokens["default"].color_black,
@@ -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,
@@ -285,10 +308,10 @@ var componentTokens = exports.componentTokens = {
     buttonIconSize: "20px",
     buttonIconSpacing: "10px",
     buttonIconColor: _coreTokens["default"].color_black,
-    buttonPaddingTop: "0px",
-    buttonPaddingBottom: "0px",
-    buttonPaddingLeft: "16px",
-    buttonPaddingRight: "16px",
+    buttonPaddingTop: _coreTokens["default"].spacing_0,
+    buttonPaddingBottom: _coreTokens["default"].spacing_0,
+    buttonPaddingLeft: _coreTokens["default"].spacing_16,
+    buttonPaddingRight: _coreTokens["default"].spacing_16,
     buttonHeight: "40px",
     buttonBorderRadius: "4px",
     buttonBorderStyle: _coreTokens["default"].border_none,
@@ -297,12 +320,11 @@ var componentTokens = exports.componentTokens = {
     disabledColor: _coreTokens["default"].color_grey_500,
     disabledButtonBackgroundColor: _coreTokens["default"].color_transparent,
     disabledButtonBorderColor: _coreTokens["default"].color_transparent,
-    disabledBorderColor: _coreTokens["default"].color_transparent,
     optionBackgroundColor: _coreTokens["default"].color_white,
     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,
@@ -311,11 +333,11 @@ var componentTokens = exports.componentTokens = {
     optionIconColor: _coreTokens["default"].color_black,
     optionPaddingTop: "6px",
     optionPaddingBottom: "6px",
-    optionPaddingLeft: "16px",
-    optionPaddingRight: "16px",
+    optionPaddingLeft: _coreTokens["default"].spacing_16,
+    optionPaddingRight: _coreTokens["default"].spacing_16,
     caretIconSize: "24px",
     caretIconColor: _coreTokens["default"].color_black,
-    caretIconSpacing: "12px",
+    caretIconSpacing: _coreTokens["default"].spacing_12,
     borderRadius: "4px",
     borderStyle: _coreTokens["default"].border_none,
     borderThickness: _coreTokens["default"].border_width_0,
@@ -337,7 +359,6 @@ var componentTokens = exports.componentTokens = {
     focusDropBorderColor: _coreTokens["default"].color_blue_600,
     disabledDropBorderColor: _coreTokens["default"].color_grey_500,
     dragoverDropBackgroundColor: _coreTokens["default"].color_blue_50,
-    activeFileItemIconBackgrounColor: _coreTokens["default"].color_grey_300,
     errorFileItemBorderColor: _coreTokens["default"].color_red_700,
     errorFileItemBackgroundColor: _coreTokens["default"].color_red_50,
     errorFilePreviewBackgroundColor: _coreTokens["default"].color_red_200,
@@ -383,7 +404,7 @@ var componentTokens = exports.componentTokens = {
     bottomLinksDividerColor: _coreTokens["default"].color_blue_600,
     bottomLinksDividerThickness: "1px",
     bottomLinksDividerStyle: _coreTokens["default"].border_solid,
-    bottomLinksDividerSpacing: "8px",
+    bottomLinksDividerSpacing: _coreTokens["default"].spacing_8,
     bottomLinksFontFamily: _coreTokens["default"].type_sans,
     bottomLinksFontSize: _coreTokens["default"].type_scale_01,
     bottomLinksFontStyle: _coreTokens["default"].type_normal,
@@ -399,7 +420,7 @@ var componentTokens = exports.componentTokens = {
     logoHeight: "32px",
     logoWidth: "auto",
     socialLinksSize: "24px",
-    socialLinksGutter: "16px",
+    socialLinksGutter: _coreTokens["default"].spacing_16,
     socialLinksColor: _coreTokens["default"].color_white
   },
   header: {
@@ -425,10 +446,10 @@ var componentTokens = exports.componentTokens = {
     overlayColor: _coreTokens["default"].color_grey_800_a,
     overlayOpacity: "0.7",
     overlayZindex: "1600",
-    paddingTop: "0px",
-    paddingBottom: "0px",
-    paddingRight: "24px",
-    paddingLeft: "24px",
+    paddingTop: _coreTokens["default"].spacing_0,
+    paddingBottom: _coreTokens["default"].spacing_0,
+    paddingRight: _coreTokens["default"].spacing_24,
+    paddingLeft: _coreTokens["default"].spacing_24,
     underlinedColor: _coreTokens["default"].color_black,
     underlinedThickness: "2px",
     underlinedStyle: _coreTokens["default"].border_solid,
@@ -486,8 +507,8 @@ var componentTokens = exports.componentTokens = {
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
     iconSize: "16px",
-    iconSpacing: "4px",
-    underlineSpacing: "0px",
+    iconSpacing: _coreTokens["default"].spacing_4,
+    underlineSpacing: _coreTokens["default"].spacing_0,
     underlineStyle: _coreTokens["default"].border_solid,
     underlineThickness: "1px",
     disabledFontColor: _coreTokens["default"].color_grey_500,
@@ -526,20 +547,20 @@ var componentTokens = exports.componentTokens = {
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
     fontTextTransform: "none",
-    verticalPadding: "0.75rem",
-    horizontalPadding: "2rem",
-    marginRight: "40px",
+    verticalPadding: _coreTokens["default"].spacing_12,
+    horizontalPadding: _coreTokens["default"].spacing_32,
+    marginRight: _coreTokens["default"].spacing_40,
     marginLeft: "20px",
-    itemsPerPageSelectorMarginLeft: "0px",
-    itemsPerPageSelectorMarginRight: "0.5rem",
+    itemsPerPageSelectorMarginLeft: _coreTokens["default"].spacing_0,
+    itemsPerPageSelectorMarginRight: _coreTokens["default"].spacing_8,
     pageSelectorMarginRight: "30px",
-    pageSelectorMarginLeft: "0px",
-    totalItemsContainerMarginRight: "2.5rem",
-    totalItemsContainerMarginLeft: "0px"
+    pageSelectorMarginLeft: _coreTokens["default"].spacing_0,
+    totalItemsContainerMarginRight: _coreTokens["default"].spacing_40,
+    totalItemsContainerMarginLeft: _coreTokens["default"].spacing_0
   },
   paragraph: {
-    fontColor: _coreTokens["default"].color_black,
     display: "block",
+    fontColor: _coreTokens["default"].color_black,
     fontSize: _coreTokens["default"].type_scale_03,
     fontWeight: _coreTokens["default"].type_regular
   },
@@ -725,10 +746,10 @@ var componentTokens = exports.componentTokens = {
     linkFontTextTransform: "none",
     linkFontLetterSpacing: _coreTokens["default"].type_spacing_wide_01,
     linkTextDecoration: _coreTokens["default"].type_no_line,
-    linkMarginTop: "4px",
-    linkMarginBottom: "4px",
-    linkMarginRight: "16px",
-    linkMarginLeft: "16px",
+    linkMarginTop: _coreTokens["default"].spacing_4,
+    linkMarginBottom: _coreTokens["default"].spacing_4,
+    linkMarginRight: _coreTokens["default"].spacing_16,
+    linkMarginLeft: _coreTokens["default"].spacing_16,
     linkFocusColor: _coreTokens["default"].color_blue_600,
     scrollBarThumbColor: _coreTokens["default"].color_grey_200_a,
     scrollBarTrackColor: _coreTokens["default"].color_transparent
@@ -832,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,
@@ -842,7 +863,7 @@ var componentTokens = exports.componentTokens = {
     thumbShift: "1.25rem",
     trackHeight: "12px",
     trackWidth: "36px",
-    spaceBetweenLabelSwitch: "8px"
+    spaceBetweenLabelSwitch: _coreTokens["default"].spacing_8
   },
   table: {
     rowSeparatorThickness: "1px",
@@ -855,8 +876,8 @@ var componentTokens = exports.componentTokens = {
     dataFontWeight: _coreTokens["default"].type_regular,
     dataFontColor: _coreTokens["default"].color_black,
     dataFontTextTransform: "none",
-    dataPaddingTop: "16px",
-    dataPaddingBottom: "16px",
+    dataPaddingTop: _coreTokens["default"].spacing_16,
+    dataPaddingBottom: _coreTokens["default"].spacing_16,
     dataPaddingRight: "20px",
     dataPaddingLeft: "20px",
     dataPaddingTopReduced: _coreTokens["default"].spacing_8,
@@ -877,8 +898,8 @@ var componentTokens = exports.componentTokens = {
     headerFontWeight: _coreTokens["default"].type_regular,
     headerFontColor: _coreTokens["default"].color_white,
     headerFontTextTransform: "none",
-    headerPaddingTop: "16px",
-    headerPaddingBottom: "16px",
+    headerPaddingTop: _coreTokens["default"].spacing_16,
+    headerPaddingBottom: _coreTokens["default"].spacing_16,
     headerPaddingRight: "20px",
     headerPaddingLeft: "20px",
     headerPaddingTopReduced: _coreTokens["default"].spacing_8,
@@ -932,10 +953,10 @@ var componentTokens = exports.componentTokens = {
     fontSize: _coreTokens["default"].type_scale_02,
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
-    labelPaddingTop: "0px",
-    labelPaddingBottom: "0px",
-    labelPaddingLeft: "16px",
-    labelPaddingRight: "16px",
+    labelPaddingTop: _coreTokens["default"].spacing_0,
+    labelPaddingBottom: _coreTokens["default"].spacing_0,
+    labelPaddingLeft: _coreTokens["default"].spacing_16,
+    labelPaddingRight: _coreTokens["default"].spacing_16,
     height: "40px",
     iconColor: _coreTokens["default"].color_white,
     iconSectionWidth: "40px",
@@ -1007,7 +1028,13 @@ var componentTokens = exports.componentTokens = {
     helperTextLineHeight: _coreTokens["default"].type_leading_normal,
     disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
     prefixColor: _coreTokens["default"].color_grey_700,
+    prefixDividerBorderWidth: "1px",
+    prefixDividerBorderStyle: _coreTokens["default"].border_solid,
+    prefixDividerPaddingRight: _coreTokens["default"].spacing_8,
     suffixColor: _coreTokens["default"].color_grey_700,
+    suffixDividerBorderStyle: _coreTokens["default"].border_solid,
+    suffixDividerBorderWidth: "1px",
+    suffixDividerPaddingLeft: _coreTokens["default"].spacing_8,
     disabledPrefixColor: _coreTokens["default"].color_grey_400,
     disabledSuffixColor: _coreTokens["default"].color_grey_400,
     placeholderFontColor: _coreTokens["default"].color_grey_800_a,
@@ -1153,13 +1180,13 @@ var componentTokens = exports.componentTokens = {
   }
 };
 var spaces = exports.spaces = {
-  xxsmall: "6px",
-  xsmall: "16px",
-  small: "24px",
-  medium: "36px",
-  large: "48px",
-  xlarge: "64px",
-  xxlarge: "100px"
+  xxsmall: _coreTokens["default"].spacing_4,
+  xsmall: _coreTokens["default"].spacing_8,
+  small: _coreTokens["default"].spacing_12,
+  medium: _coreTokens["default"].spacing_16,
+  large: _coreTokens["default"].spacing_24,
+  xlarge: _coreTokens["default"].spacing_32,
+  xxlarge: _coreTokens["default"].spacing_48
 };
 var responsiveSizes = exports.responsiveSizes = {
   xsmall: "20",
@@ -1188,6 +1215,17 @@ var defaultTranslatedComponentLabels = exports.defaultTranslatedComponentLabels
     warningTitleText: "warning",
     errorTitleText: "error"
   },
+  barChart: {
+    ariaLabel: "Single data series line chart",
+    filterLabel: "Filter displayed data",
+    filterPlaceholder: "Select series...",
+    loadingDataMessage: "Loading data...",
+    noDataMessageBody: "There is no data available.",
+    noDataMessageTitle: "No data available",
+    noMatchesMessageBody: "Try changing the filters or reloading the data.",
+    noMatchesMessageTitle: "No matching data",
+    retryButtonLabel: "Retry"
+  },
   dateInput: {
     invalidDateErrorMessage: "Invalid date."
   },

package/container/Container.stories.tsx

@@ -108,7 +108,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>1</b>
+          <b tabIndex={0}>1</b>
         </DxcContainer>
         <DxcContainer
           border={{ width: "1px", style: "solid", color: "color_black" }}
@@ -116,7 +116,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>2</b>
+          <b tabIndex={0}>2</b>
         </DxcContainer>
         <DxcContainer
           border={{ width: "1px", style: "solid", color: "color_black" }}
@@ -124,7 +124,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>3</b>
+          <b tabIndex={0}>3</b>
         </DxcContainer>
       </DxcContainer>
     </ExampleContainer>