@dxc-technology/halstack-react 0.0.0-bd47c58 → 0.0.0-bd89f9e

package/common/coreTokens.js

@@ -1,11 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var CORE_TOKENS = {
-  inherit: "inherit",
+exports.getCoreColorToken = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Halstack Color Palette 
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
+ */
+var CoreColorTokens = {
   // Color
   // Absolutes
   color_black: "#000000",
@@ -99,7 +106,34 @@ var CORE_TOKENS = {
   color_orange_600: "#f38f20",
   color_orange_700: "#c26c0a",
   color_orange_800: "#915108",
-  color_orange_900: "#613605",
+  color_orange_900: "#613605"
+};
+var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(key) {
+  return CoreColorTokens[key];
+};
+/**
+ * Halstack Spacing Principles 
+ * @link https://developer.dxc.com/halstack/next/principles/spacing/
+ */
+var SpacingTokens = {
+  spacing_0: "0rem",
+  spacing_2: "0.125rem",
+  spacing_4: "0.25rem",
+  spacing_8: "0.5rem",
+  spacing_12: "0.75rem",
+  spacing_16: "1rem",
+  spacing_24: "1.5rem",
+  spacing_32: "2rem",
+  spacing_40: "2.5rem",
+  spacing_48: "3rem",
+  spacing_56: "3.5rem",
+  spacing_64: "4rem",
+  spacing_80: "5rem",
+  spacing_96: "6rem",
+  spacing_112: "7rem"
+};
+var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), SpacingTokens), {}, {
+  inherit: "inherit",
   // Typography
   type_sans: "Open Sans, sans-serif",
   type_scale_root: "16px",
@@ -134,22 +168,6 @@ var CORE_TOKENS = {
   type_leading_normal: "1.5em",
   type_leading_loose_01: "1.715em",
   type_leading_loose_02: "2em",
-  // Spacing
-  spacing_0: "0rem",
-  spacing_2: "0.125rem",
-  spacing_4: "0.25rem",
-  spacing_8: "0.5rem",
-  spacing_12: "0.75rem",
-  spacing_16: "1rem",
-  spacing_24: "1.5rem",
-  spacing_32: "2rem",
-  spacing_40: "2.5rem",
-  spacing_48: "3rem",
-  spacing_56: "3.5rem",
-  spacing_64: "4rem",
-  spacing_80: "5rem",
-  spacing_96: "6rem",
-  spacing_112: "7rem",
   // Border
   border_width_0: "0px",
   border_width_1: "1px",
@@ -162,6 +180,5 @@ var CORE_TOKENS = {
   border_solid: "solid",
   border_dashed: "dashed",
   border_none: "none"
-};
-var _default = CORE_TOKENS;
-exports["default"] = _default;
+});
+var _default = exports["default"] = CoreTokens;

package/common/utils.js

@@ -1,22 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMargin = void 0;
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _variables = require("./variables");
-
-var getMargin = function getMargin(marginProp, side) {
+var getMargin = exports.getMargin = function getMargin(marginProp, side) {
   if (marginProp && (0, _typeof2["default"])(marginProp) === "object") {
     return marginProp[side] && _variables.spaces[marginProp[side]] || "0px";
   } else if (marginProp && typeof marginProp === "string") {
     return _variables.spaces[marginProp];
   } else return "0px";
-};
-
-exports.getMargin = getMargin;
+};

package/common/variables.d.ts

@@ -197,16 +197,21 @@ export declare const componentTokens: {
         hoverBackgroundColorCheckedOnDark: string;
         disabledBackgroundColorChecked: string;
         disabledBackgroundColorCheckedOnDark: string;
+        readOnlyBackgroundColorChecked: string;
+        hoverReadOnlyBackgroundColorChecked: string;
         borderColor: string;
         borderColorOnDark: string;
         hoverBorderColor: string;
         hoverBorderColorOnDark: string;
         disabledBorderColor: string;
         disabledBorderColorOnDark: string;
+        readOnlyBorderColor: string;
+        hoverReadOnlyBorderColor: string;
         checkColor: string;
         checkColorOnDark: string;
         disabledCheckColor: string;
         disabledCheckColorOnDark: string;
+        readOnlyCheckColor: string;
         fontFamily: string;
         fontSize: string;
         fontWeight: string;
@@ -616,9 +621,9 @@ export declare const componentTokens: {
         errorRadioInputColor: string;
         hoverErrorRadioInputColor: string;
         activeErrorRadioInputColor: string;
-        readonlyRadioInputColor: string;
-        hoverReadonlyRadioInputColor: string;
-        activeReadonlyRadioInputColor: string;
+        readOnlyRadioInputColor: string;
+        hoverReadOnlyRadioInputColor: string;
+        activeReadOnlyRadioInputColor: string;
         disabledRadioInputColor: string;
         disabledLabelFontColor: string;
         disabledHelperTextFontColor: string;
@@ -1000,6 +1005,8 @@ export declare const componentTokens: {
         disabledBorderColorOnDark: string;
         disabledContainerFillColor: string;
         disabledContainerFillColorOnDark: string;
+        readOnlyBorderColor: string;
+        hoverReadOnlyBorderColor: string;
         errorBorderColor: string;
         errorBorderColorOnDark: string;
         hoverErrorBorderColor: string;
@@ -1049,6 +1056,8 @@ export declare const componentTokens: {
         disabledBorderColorOnDark: string;
         disabledContainerFillColor: string;
         disabledContainerFillColorOnDark: string;
+        readOnlyBorderColor: string;
+        hoverReadOnlyBorderColor: string;
         errorBorderColor: string;
         errorBorderColorOnDark: string;
         hoverErrorBorderColor: string;
@@ -1240,8 +1249,8 @@ export declare const componentTokens: {
         focusColor: string;
     };
 };
-export declare type AdvancedTheme = typeof componentTokens;
-export declare type OpinionatedTheme = {
+export type AdvancedTheme = typeof componentTokens;
+export type OpinionatedTheme = {
     accordion: {
         accentColor: string;
         titleFontColor: string;
@@ -1487,4 +1496,4 @@ export declare const defaultTranslatedComponentLabels: {
         nextMonthTitle: string;
     };
 };
-export declare type TranslatedLabels = typeof defaultTranslatedComponentLabels;
+export type TranslatedLabels = typeof defaultTranslatedComponentLabels;

package/common/variables.js

@@ -1,15 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.spaces = exports.responsiveSizes = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
-
 var _coreTokens = _interopRequireDefault(require("./coreTokens"));
-
-var componentTokens = {
+var componentTokens = exports.componentTokens = {
   accordion: {
     backgroundColor: _coreTokens["default"].color_white,
     hoverBackgroundColor: _coreTokens["default"].color_purple_100,
@@ -208,16 +205,21 @@ var componentTokens = {
     hoverBackgroundColorCheckedOnDark: _coreTokens["default"].color_white,
     disabledBackgroundColorChecked: _coreTokens["default"].color_grey_500,
     disabledBackgroundColorCheckedOnDark: _coreTokens["default"].color_grey_800,
+    readOnlyBackgroundColorChecked: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBackgroundColorChecked: _coreTokens["default"].color_grey_600,
     borderColor: _coreTokens["default"].color_blue_800,
     borderColorOnDark: _coreTokens["default"].color_grey_200,
     hoverBorderColor: _coreTokens["default"].color_blue_900,
     hoverBorderColorOnDark: _coreTokens["default"].color_white,
     disabledBorderColor: _coreTokens["default"].color_grey_500,
     disabledBorderColorOnDark: _coreTokens["default"].color_grey_800,
+    readOnlyBorderColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
     checkColor: _coreTokens["default"].color_white,
     checkColorOnDark: _coreTokens["default"].color_black,
     disabledCheckColor: _coreTokens["default"].color_white,
     disabledCheckColorOnDark: _coreTokens["default"].color_grey_500,
+    readOnlyCheckColor: _coreTokens["default"].color_white,
     fontFamily: _coreTokens["default"].type_sans,
     fontSize: _coreTokens["default"].type_scale_02,
     fontWeight: _coreTokens["default"].type_regular,
@@ -627,9 +629,9 @@ var componentTokens = {
     errorRadioInputColor: _coreTokens["default"].color_red_700,
     hoverErrorRadioInputColor: _coreTokens["default"].color_red_800,
     activeErrorRadioInputColor: _coreTokens["default"].color_red_900,
-    readonlyRadioInputColor: _coreTokens["default"].color_grey_500,
-    hoverReadonlyRadioInputColor: _coreTokens["default"].color_grey_600,
-    activeReadonlyRadioInputColor: _coreTokens["default"].color_grey_700,
+    readOnlyRadioInputColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyRadioInputColor: _coreTokens["default"].color_grey_600,
+    activeReadOnlyRadioInputColor: _coreTokens["default"].color_grey_700,
     disabledRadioInputColor: _coreTokens["default"].color_grey_500,
     disabledLabelFontColor: _coreTokens["default"].color_grey_500,
     disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
@@ -1011,6 +1013,8 @@ var componentTokens = {
     disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
     disabledContainerFillColor: _coreTokens["default"].color_grey_100,
     disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
+    readOnlyBorderColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
     errorBorderColor: _coreTokens["default"].color_red_700,
     errorBorderColorOnDark: _coreTokens["default"].color_red_500,
     hoverErrorBorderColor: _coreTokens["default"].color_red_600,
@@ -1060,6 +1064,8 @@ var componentTokens = {
     disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
     disabledContainerFillColor: _coreTokens["default"].color_grey_100,
     disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
+    readOnlyBorderColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
     errorBorderColor: _coreTokens["default"].color_red_700,
     errorBorderColorOnDark: _coreTokens["default"].color_red_500,
     hoverErrorBorderColor: _coreTokens["default"].color_red_600,
@@ -1251,8 +1257,7 @@ var componentTokens = {
     focusColor: _coreTokens["default"].color_blue_600
   }
 };
-exports.componentTokens = componentTokens;
-var spaces = {
+var spaces = exports.spaces = {
   xxsmall: "6px",
   xsmall: "16px",
   small: "24px",
@@ -1261,16 +1266,14 @@ var spaces = {
   xlarge: "64px",
   xxlarge: "100px"
 };
-exports.spaces = spaces;
-var responsiveSizes = {
+var responsiveSizes = exports.responsiveSizes = {
   xsmall: "20",
   small: "30",
   medium: "45",
   large: "66",
   xlarge: "90"
 };
-exports.responsiveSizes = responsiveSizes;
-var defaultTranslatedComponentLabels = {
+var defaultTranslatedComponentLabels = exports.defaultTranslatedComponentLabels = {
   formFields: {
     optionalLabel: "(Optional)",
     requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
@@ -1365,5 +1368,4 @@ var defaultTranslatedComponentLabels = {
     previousMonthTitle: "Previous month",
     nextMonthTitle: "Next month"
   }
-};
-exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;
+};

package/container/Container.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import ContainerPropsType from "./types";
+declare const DxcContainer: ({ display, width, height, overflow, ...props }: ContainerPropsType) => React.JSX.Element;
+export default DxcContainer;

package/container/Container.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _coreTokens = require("../common/coreTokens");
+var _BackgroundColorContext = require("../BackgroundColorContext");
+var _templateObject;
+var _excluded = ["display", "width", "height", "overflow"];
+/**
+ * This values correspond to the spaces defined in the design system
+ * https://developer.dxc.com/halstack/next/principles/spacing/#component-spacing-tokens
+ */
+var spaces = {
+  xxsmall: "4px",
+  xsmall: "8px",
+  small: "12px",
+  medium: "16px",
+  large: "24px",
+  xlarge: "32px",
+  xxlarge: "48px"
+};
+var DxcContainer = function DxcContainer(_ref) {
+  var _props$background;
+  var display = _ref.display,
+    width = _ref.width,
+    height = _ref.height,
+    overflow = _ref.overflow,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: (0, _coreTokens.getCoreColorToken)(props === null || props === void 0 ? void 0 : (_props$background = props.background) === null || _props$background === void 0 ? void 0 : _props$background.color)
+  }, /*#__PURE__*/_react["default"].createElement(Container, (0, _extends2["default"])({
+    $display: display,
+    $width: width,
+    $height: height,
+    $overflow: overflow
+  }, props)));
+};
+var getBorderStyles = function getBorderStyles(direction, borderProperties) {
+  var _borderProperties$wid, _borderProperties$sty, _getCoreColorToken;
+  return "border-".concat(direction, ": ").concat((_borderProperties$wid = borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.width) !== null && _borderProperties$wid !== void 0 ? _borderProperties$wid : "", " ").concat((_borderProperties$sty = borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.style) !== null && _borderProperties$sty !== void 0 ? _borderProperties$sty : "", " ").concat((_getCoreColorToken = (0, _coreTokens.getCoreColorToken)(borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.color)) !== null && _getCoreColorToken !== void 0 ? _getCoreColorToken : "", ";");
+};
+var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: ", ";\n  display: ", ";\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  bottom: ", ";\n  left: ", ";\n  float: ", ";\n  z-index: ", ";\n  box-shadow: ", ";\n\n  background-attachment: ", ";\n  background-clip: ", ";\n  background-color: ", ";\n  background-image: ", ";\n  background-origin: ", ";\n  background-position: ", ";\n  background-repeat: ", ";\n  background-size: ", ";\n\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-width: ", ";\n\n  ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  outline: ", ";\n  outline-offset: ", ";\n\n  overflow: ", ";\n  overflow-x: ", ";\n  overflow-y: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref2) {
+  var boxSizing = _ref2.boxSizing;
+  return boxSizing;
+}, function (_ref3) {
+  var $display = _ref3.$display;
+  return $display;
+}, function (_ref4) {
+  var $width = _ref4.$width;
+  return $width;
+}, function (_ref5) {
+  var $height = _ref5.$height;
+  return $height;
+}, function (_ref6) {
+  var maxWidth = _ref6.maxWidth;
+  return maxWidth;
+}, function (_ref7) {
+  var maxHeight = _ref7.maxHeight;
+  return maxHeight;
+}, function (_ref8) {
+  var minWidth = _ref8.minWidth;
+  return minWidth;
+}, function (_ref9) {
+  var minHeight = _ref9.minHeight;
+  return minHeight;
+}, function (_ref10) {
+  var position = _ref10.position;
+  return position;
+}, function (_ref11) {
+  var inset = _ref11.inset;
+  return inset === null || inset === void 0 ? void 0 : inset.top;
+}, function (_ref12) {
+  var inset = _ref12.inset;
+  return inset === null || inset === void 0 ? void 0 : inset.right;
+}, function (_ref13) {
+  var inset = _ref13.inset;
+  return inset === null || inset === void 0 ? void 0 : inset.bottom;
+}, function (_ref14) {
+  var inset = _ref14.inset;
+  return inset === null || inset === void 0 ? void 0 : inset.left;
+}, function (_ref15) {
+  var _float = _ref15["float"];
+  return _float;
+}, function (_ref16) {
+  var zIndex = _ref16.zIndex;
+  return zIndex;
+}, function (_ref17) {
+  var boxShadow = _ref17.boxShadow;
+  return boxShadow;
+}, function (_ref18) {
+  var background = _ref18.background;
+  return background === null || background === void 0 ? void 0 : background.attachment;
+}, function (_ref19) {
+  var background = _ref19.background;
+  return background === null || background === void 0 ? void 0 : background.clip;
+}, function (_ref20) {
+  var background = _ref20.background;
+  return (0, _coreTokens.getCoreColorToken)(background === null || background === void 0 ? void 0 : background.color);
+}, function (_ref21) {
+  var background = _ref21.background;
+  return background === null || background === void 0 ? void 0 : background.image;
+}, function (_ref22) {
+  var background = _ref22.background;
+  return background === null || background === void 0 ? void 0 : background.origin;
+}, function (_ref23) {
+  var background = _ref23.background;
+  return background === null || background === void 0 ? void 0 : background.position;
+}, function (_ref24) {
+  var background = _ref24.background;
+  return background === null || background === void 0 ? void 0 : background.repeat;
+}, function (_ref25) {
+  var background = _ref25.background;
+  return background === null || background === void 0 ? void 0 : background.size;
+}, function (_ref26) {
+  var borderRadius = _ref26.borderRadius;
+  return borderRadius;
+}, function (_ref27) {
+  var border = _ref27.border;
+  return border && "width" in border ? "".concat(border === null || border === void 0 ? void 0 : border.width) : "";
+}, function (_ref28) {
+  var border = _ref28.border;
+  return border && "style" in border ? "".concat(border === null || border === void 0 ? void 0 : border.style) : "";
+}, function (_ref29) {
+  var border = _ref29.border;
+  return border && "color" in border ? "".concat((0, _coreTokens.getCoreColorToken)(border === null || border === void 0 ? void 0 : border.color)) : "";
+}, function (_ref30) {
+  var border = _ref30.border;
+  if (border != null) {
+    var styles = "";
+    switch (true) {
+      case "top" in border:
+        styles += getBorderStyles("top", border.top);
+      case "right" in border:
+        styles += getBorderStyles("right", border.right);
+      case "left" in border:
+        styles += getBorderStyles("left", border.left);
+      case "bottom" in border:
+        styles += getBorderStyles("bottom", border.bottom);
+    }
+    return styles;
+  }
+}, function (_ref31) {
+  var margin = _ref31.margin;
+  return typeof margin === "string" ? spaces[margin] : "";
+}, function (_ref32) {
+  var margin = _ref32.margin;
+  return (0, _typeof2["default"])(margin) === "object" ? spaces[margin.top] : "";
+}, function (_ref33) {
+  var margin = _ref33.margin;
+  return (0, _typeof2["default"])(margin) === "object" ? spaces[margin.right] : "";
+}, function (_ref34) {
+  var margin = _ref34.margin;
+  return (0, _typeof2["default"])(margin) === "object" ? spaces[margin.bottom] : "";
+}, function (_ref35) {
+  var margin = _ref35.margin;
+  return (0, _typeof2["default"])(margin) === "object" ? spaces[margin.left] : "";
+}, function (_ref36) {
+  var _outline$width, _outline$style, _getCoreColorToken2;
+  var outline = _ref36.outline;
+  return "".concat((_outline$width = outline === null || outline === void 0 ? void 0 : outline.width) !== null && _outline$width !== void 0 ? _outline$width : "", " ").concat((_outline$style = outline === null || outline === void 0 ? void 0 : outline.style) !== null && _outline$style !== void 0 ? _outline$style : "", " ").concat((_getCoreColorToken2 = (0, _coreTokens.getCoreColorToken)(outline === null || outline === void 0 ? void 0 : outline.color)) !== null && _getCoreColorToken2 !== void 0 ? _getCoreColorToken2 : "");
+}, function (_ref37) {
+  var outline = _ref37.outline;
+  return outline === null || outline === void 0 ? void 0 : outline.offset;
+}, function (_ref38) {
+  var $overflow = _ref38.$overflow;
+  return typeof $overflow === "string" ? $overflow : "";
+}, function (_ref39) {
+  var $overflow = _ref39.$overflow;
+  return (0, _typeof2["default"])($overflow) === "object" ? "".concat($overflow === null || $overflow === void 0 ? void 0 : $overflow.x) : "";
+}, function (_ref40) {
+  var $overflow = _ref40.$overflow;
+  return (0, _typeof2["default"])($overflow) === "object" ? "".concat($overflow === null || $overflow === void 0 ? void 0 : $overflow.y) : "";
+}, function (_ref41) {
+  var padding = _ref41.padding;
+  return typeof padding === "string" ? spaces[padding] : "";
+}, function (_ref42) {
+  var padding = _ref42.padding;
+  return (0, _typeof2["default"])(padding) === "object" ? spaces[padding.top] : "";
+}, function (_ref43) {
+  var padding = _ref43.padding;
+  return (0, _typeof2["default"])(padding) === "object" ? spaces[padding.right] : "";
+}, function (_ref44) {
+  var padding = _ref44.padding;
+  return (0, _typeof2["default"])(padding) === "object" ? spaces[padding.bottom] : "";
+}, function (_ref45) {
+  var padding = _ref45.padding;
+  return (0, _typeof2["default"])(padding) === "object" ? spaces[padding.left] : "";
+});
+var _default = exports["default"] = DxcContainer;