@hipay/hipay-material-ui 2.3.4 → 3.0.0

package/HiChip/HiChip.js

@@ -68,6 +68,7 @@ var styles = function styles(theme) {
       marginLeft: 4,
       position: 'relative',
       cursor: 'pointer',
+      color: theme.palette.neutral.main,
       '&:hover, &:focus': {
         color: theme.palette.neutral.dark
       }

package/HiDatePicker/HiDateRangeSelector.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.findSeparator = findSeparator;
 exports.yearAndMonth = yearAndMonth;
 exports.yearAndQuarter = yearAndQuarter;
+exports.buildDateRangeInfo = buildDateRangeInfo;
 exports.buildDateRangeOptionByKey = buildDateRangeOptionByKey;
 exports.default = exports.styles = void 0;
 
@@ -89,19 +90,58 @@ function yearAndQuarter(format, date, t) {
   return indexY < indexM ? date.format("".concat(split[indexY]).concat(s, "[").concat(t.short_quarter, "]Q")) : date.format("[".concat(t.short_quarter, "]Q").concat(s).concat(split[indexY]));
 }
 
+function buildDateRangeInfo(t, from, to, format) {
+  var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var _options$prefix = options.prefix,
+      prefix = _options$prefix === void 0 ? null : _options$prefix,
+      _options$toNow = options.toNow,
+      toNow = _options$toNow === void 0 ? false : _options$toNow,
+      _options$displayDays = options.displayDays,
+      displayDays = _options$displayDays === void 0 ? true : _options$displayDays; // From
+
+  var info = "".concat(t.from, " ").concat(from.format(format), " "); // To
+
+  if (toNow) {
+    info += "".concat(t.to_now);
+  } else {
+    info += "".concat(t.to, " ").concat(to.format(format));
+  } // Prefix
+
+
+  switch (prefix) {
+    case "week":
+      info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(info);
+      break;
+
+    case "quarter":
+      info = "".concat(t.short_quarter).concat(from.format('Q'), ", ").concat(info);
+      break;
+
+    default:
+      break;
+  } // Display number of days
+
+
+  if (displayDays) {
+    var days = Math.ceil(to.diff(from, 'days', true));
+    info = "".concat(days, " ").concat(t.days, ", ").concat(info);
+  }
+
+  return info;
+}
+
 function buildDateRangeOptionByKey(key, t, format) {
   var from;
   var label;
   var info;
   var to;
-  var type;
 
   switch (key) {
     case 'custom':
       label = t.custom_period;
       from = (0, _momentTimezone.default)().subtract(15, 'day').startOf('day');
       to = (0, _momentTimezone.default)().endOf('day');
-      type = 'primary-highlight';
+      info = t.custom_period_info;
       break;
 
     case 'cd':
@@ -122,49 +162,84 @@ function buildDateRangeOptionByKey(key, t, format) {
       label = t.current_week;
       from = (0, _momentTimezone.default)().startOf('week');
       to = (0, _momentTimezone.default)();
-      info = "".concat(t.short_week).concat(from.format('w'), ", \n ").concat(from.format(format), " ").concat(t.to_now);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "week",
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     case 'pw':
       label = t.previous_week;
       from = (0, _momentTimezone.default)().subtract(1, 'week').startOf('week');
       to = (0, _momentTimezone.default)().subtract(1, 'week').endOf('week');
-      info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(from.format(format), " ").concat(t.to, " ").concat(to.format(format));
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "week",
+        toNow: false,
+        displayDays: true
+      });
       break;
 
     case 'cm':
       label = t.current_month;
       from = (0, _momentTimezone.default)().startOf('month');
       to = (0, _momentTimezone.default)();
-      info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     case 'pm':
       label = t.previous_month;
       from = (0, _momentTimezone.default)().subtract(1, 'month').startOf('month');
       to = (0, _momentTimezone.default)().subtract(1, 'month').endOf('month');
-      info = "".concat(yearAndMonth(format, from), ", ").concat(from.daysInMonth(), " ").concat(t.days);
+      info = "".concat(from.daysInMonth(), " ").concat(t.days, ", ").concat(yearAndMonth(format, from));
       break;
 
     case 'cq':
       label = t.current_quarter;
       from = (0, _momentTimezone.default)().startOf('quarter');
       to = (0, _momentTimezone.default)();
-      info = "".concat(yearAndQuarter(format, from, t), ", ").concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "quarter",
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     case 'pq':
       label = t.previous_quarter;
       from = (0, _momentTimezone.default)().subtract(1, 'quarter').startOf('quarter');
       to = (0, _momentTimezone.default)().subtract(1, 'quarter').endOf('quarter');
-      info = "".concat(yearAndQuarter(format, from, t), ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: "quarter",
+        toNow: false,
+        displayDays: true
+      });
       break;
 
     case 'cy':
       label = t.current_year;
       from = (0, _momentTimezone.default)().startOf('year');
       to = (0, _momentTimezone.default)();
-      info = "".concat(from.format(format), " ").concat(t.to_now, ", ").concat(to.diff(from, 'days') + 1, " ").concat(t.days);
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
+      break;
+
+    case 'yy':
+      label = t.year_on_year;
+      from = (0, _momentTimezone.default)().subtract(1, 'years');
+      to = (0, _momentTimezone.default)();
+      info = buildDateRangeInfo(t, from, to, format, {
+        prefix: null,
+        toNow: true,
+        displayDays: true
+      });
       break;
 
     default:
@@ -176,12 +251,11 @@ function buildDateRangeOptionByKey(key, t, format) {
     from: from,
     info: info,
     label: label,
-    to: to,
-    type: type
+    to: to
   };
 }
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
     root: {
       maxWidth: 500,
@@ -192,21 +266,22 @@ var styles = function styles() {
       }
     },
     dateRangePicker: {
-      width: 'calc(100% + 8px)',
+      width: '100%',
       marginTop: 0
     },
     smSelect: {
-      padding: 4
+      padding: theme.spacing(1)
     },
     smRangePicker: {},
     select: {
       '@media(max-width: 700px)': {
         width: '100%',
-        paddingBottom: 8
+        paddingBottom: theme.spacing(2)
       },
       '@media(min-width: 700px)': {
-        minWidth: 'calc(100% / 3)',
-        paddingRight: 8
+        minWidth: 200,
+        width: 'calc(100% - 244px)',
+        marginRight: theme.spacing(2)
       }
     },
     input: {
@@ -214,16 +289,18 @@ var styles = function styles() {
         width: '100%'
       },
       '@media(min-width: 700px)': {
-        width: 'calc(100% / 3 * 2)'
+        width: 236
       }
     },
     formControlLabel: {
-      top: 20
+      top: theme.spacing(5)
     }
   };
 };
 
 exports.styles = styles;
+var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
+var CUSTOM_PERIOD_LIST = ['custom'];
 
 var HiDateRangeSelector =
 /*#__PURE__*/
@@ -304,37 +381,90 @@ function (_React$Component) {
       }
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "buildOptions",
+    value: function buildOptions() {
       var _this2 = this;
 
       var _this$props = this.props,
-          disabled = _this$props.disabled,
-          enableTime = _this$props.enableTime,
-          errorText = _this$props.errorText,
-          fromError = _this$props.fromError,
-          toError = _this$props.toError,
-          helperIcon = _this$props.helperIcon,
-          helperText = _this$props.helperText,
-          idRange = _this$props.idRange,
-          idSelect = _this$props.idSelect,
-          minimumDate = _this$props.minimumDate,
-          label = _this$props.label,
-          from = _this$props.from,
-          onChange = _this$props.onChange,
-          required = _this$props.required,
-          to = _this$props.to,
-          translations = _this$props.translations,
-          classes = _this$props.classes,
-          selectProps = _this$props.selectProps,
-          staticPosition = _this$props.staticPosition,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+          availableOptionKeys = _this$props.availableOptionKeys,
+          translations = _this$props.translations;
+      var selectedPreset = this.state.selectedPreset;
+      var options = [];
+      var presetOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return PRESET_PERIOD_LIST.includes(option);
+      });
+      var customOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return CUSTOM_PERIOD_LIST.includes(option);
+      });
+
+      if (presetOptionsAvailable) {
+        options.push({
+          id: "preset_periods_subheader",
+          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          pinned: true,
+          icon: "mdi_calendar",
+          label: translations.preset_periods
+        });
+        presetOptionsAvailable.forEach(function (option) {
+          options.push(_this2.options.find(function (_option) {
+            return _option.id === option;
+          }));
+        });
+      }
+
+      if (customOptionsAvailable) {
+        options.push({
+          id: "custom_periods_subheader",
+          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          pinned: true,
+          icon: "mdi_calendar_blank",
+          label: translations.custom_periods
+        });
+        customOptionsAvailable.forEach(function (option) {
+          options.push(_this2.options.find(function (_option) {
+            return _option.id === option;
+          }));
+        });
+      }
+
+      return options;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          availableOptionKeys = _this$props2.availableOptionKeys,
+          disabled = _this$props2.disabled,
+          enableTime = _this$props2.enableTime,
+          errorText = _this$props2.errorText,
+          fromError = _this$props2.fromError,
+          toError = _this$props2.toError,
+          helperIcon = _this$props2.helperIcon,
+          helperText = _this$props2.helperText,
+          idRange = _this$props2.idRange,
+          idSelect = _this$props2.idSelect,
+          minimumDate = _this$props2.minimumDate,
+          label = _this$props2.label,
+          from = _this$props2.from,
+          onChange = _this$props2.onChange,
+          required = _this$props2.required,
+          to = _this$props2.to,
+          translations = _this$props2.translations,
+          classes = _this$props2.classes,
+          selectProps = _this$props2.selectProps,
+          staticPosition = _this$props2.staticPosition,
+          props = (0, _objectWithoutProperties2.default)(_this$props2, ["availableOptionKeys", "disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
       var _this$state = this.state,
           selectedPreset = _this$state.selectedPreset,
           containerWidth = _this$state.containerWidth;
       var hiSelectableListProps = {
-        hideCheckbox: true
+        secondaryInline: false,
+        hideCheckbox: true,
+        lazy: false
       };
+      var options = this.buildOptions();
       return _react.default.createElement(_HiFormControl.default, {
         disabled: disabled,
         helperIcon: helperIcon,
@@ -351,7 +481,7 @@ function (_React$Component) {
           flexDirection: 'column'
         } : {},
         ref: function ref(container) {
-          _this2.container = container;
+          _this3.container = container;
         }
       }, _react.default.createElement("div", {
         className: classes.select,
@@ -367,7 +497,7 @@ function (_React$Component) {
         hideCheckbox: true,
         hiSelectableListProps: hiSelectableListProps,
         name: 'selectedPreset',
-        options: this.options,
+        options: options,
         onChange: this.handleSelectChange('selectedPreset'),
         required: required,
         translations: translations,
@@ -418,7 +548,7 @@ function (_React$Component) {
 }(_react.default.Component);
 
 HiDateRangeSelector.defaultProps = {
-  availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
+  availableOptionKeys: [].concat(PRESET_PERIOD_LIST, CUSTOM_PERIOD_LIST),
   enableTime: false,
   returnSelectValue: false,
   staticPosition: false,
@@ -441,6 +571,7 @@ HiDateRangeSelector.defaultProps = {
     days: 'days',
     custom_period: 'Custom Period',
     yesterday: 'Yesterday',
+    from: 'from',
     to: 'to',
     to_now: 'to now',
     current_week: 'Current Week',
@@ -450,12 +581,16 @@ HiDateRangeSelector.defaultProps = {
     current_quarter: 'Current Quarter',
     previous_quarter: 'Previous Quarter',
     current_year: 'Current Year',
+    year_on_year: "Last twelve months",
     invalid_format: 'The date format is not valid',
     to_superior_from: 'Date from cannot be greater than date to',
     date_superior_max_date: 'Date from cannot be greater than %s',
     date_inferior_min_date: 'Date from cannot be before than %s',
     missing_date_from: 'Missing date from',
-    missing_date_to: 'Missing date to'
+    missing_date_to: 'Missing date to',
+    preset_periods: 'Preset periods',
+    custom_periods: 'Custom periods',
+    custom_period_info: "Select a custom period"
   }
 };
 

package/HiDatePicker/stylesheet.js

@@ -17,7 +17,6 @@ var _default = function _default(theme) {
       position: 'relative',
       display: 'inline-block',
       width: '100%',
-      minWidth: 252,
       maxWidth: 500
     },
     rootMobile: (0, _objectSpread2.default)({}, theme.typography.b1, {
@@ -40,7 +39,7 @@ var _default = function _default(theme) {
       position: 'relative',
       display: 'inline-block',
       width: 'calc(50% - 4px)',
-      paddingRight: 4
+      marginRight: theme.spacing(1)
     },
     toInput: {
       position: 'relative',

package/HiExpansionPanel/HiExpansionPanel.js

@@ -1,31 +1,25 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
 
@@ -39,7 +33,7 @@ var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     summaryContent: {
       display: 'flex',
@@ -114,105 +108,76 @@ var styles = function styles(theme) {
       right: 0
     }
   };
-};
+});
 /**
  * HiExpansionPanel
  */
 
-
-exports.styles = styles;
-
 var _ref = _react.default.createElement(_HiIcon.default, {
   icon: "mdi_menu_up",
   size: 24
 });
 
-var HiExpansionPanel =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  (0, _inherits2.default)(HiExpansionPanel, _React$PureComponent);
-
-  function HiExpansionPanel(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, HiExpansionPanel);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiExpansionPanel).call(this, props));
-    _this.state = {
-      panelDetailsExited: !(props.collapseDisable || props.expanded)
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(HiExpansionPanel, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          heading = _this$props.heading,
-          secondaryHeading = _this$props.secondaryHeading,
-          secondaryHeadingDisabled = _this$props.secondaryHeadingDisabled,
-          secondaryHeadingIcon = _this$props.secondaryHeadingIcon,
-          collapseDisable = _this$props.collapseDisable,
-          children = _this$props.children,
-          classes = _this$props.classes,
-          expanded = _this$props.expanded,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "collapseDisable", "children", "classes", "expanded"]);
-      var effectiveDisabled = disabled || !children;
-      return _react.default.createElement(_ExpansionPanel.default, (0, _extends2.default)({
-        disabled: effectiveDisabled,
-        classes: {
-          root: classes.panel,
-          disabled: classes.disabledPanel
-        },
-        expanded: collapseDisable || expanded
-      }, props, {
-        TransitionProps: {
-          onExited: function onExited() {
-            _this2.setState({
-              panelDetailsExited: true
-            });
-          },
-          onEnter: function onEnter() {
-            _this2.setState({
-              panelDetailsExited: false
-            });
-          }
-        }
-      }), _react.default.createElement(_ExpansionPanelSummary.default, {
-        classes: {
-          root: classes.summaryRoot,
-          content: classes.summaryContent,
-          expanded: classes.expanded,
-          expandIcon: classes.expandIcon
-        },
-        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseDisable, collapseDisable)),
-        expandIcon: !collapseDisable && _ref
-      }, _react.default.createElement("div", {
-        className: classes.heading
-      }, heading), _react.default.createElement("div", {
-        className: classes.secondaryHeading
-      }, _react.default.createElement("span", {
-        className: classes.secondaryHeadingSpan
-      }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && _react.default.createElement(_ExpansionPanelDetails.default, {
-        className: (0, _classnames.default)(classes.panelDetails, (0, _defineProperty2.default)({}, classes.panelDetailsExited, this.state.panelDetailsExited))
-      }, children));
+function HiExpansionPanel(props) {
+  var disabled = props.disabled,
+      heading = props.heading,
+      secondaryHeading = props.secondaryHeading,
+      secondaryHeadingDisabled = props.secondaryHeadingDisabled,
+      secondaryHeadingIcon = props.secondaryHeadingIcon,
+      collapseDisable = props.collapseDisable,
+      children = props.children,
+      expanded = props.expanded,
+      TransitionProps = props.TransitionProps,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "collapseDisable", "children", "expanded", "TransitionProps"]);
+  var classes = useStyles(props);
+
+  var _useState = (0, _react.useState)(!collapseDisable && !expanded),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      panelDetailsExited = _useState2[0],
+      setPanelDetailsExited = _useState2[1];
+
+  var effectiveDisabled = disabled || !children;
+  return _react.default.createElement(_ExpansionPanel.default, (0, _extends2.default)({
+    disabled: effectiveDisabled,
+    expanded: collapseDisable || expanded,
+    TransitionProps: (0, _objectSpread2.default)({
+      onExited: function onExited() {
+        return setPanelDetailsExited(true);
+      },
+      onEnter: function onEnter() {
+        return setPanelDetailsExited(false);
+      }
+    }, TransitionProps)
+  }, others, {
+    classes: {
+      root: classes.panel,
+      disabled: classes.disabledPanel
     }
-  }]);
-  return HiExpansionPanel;
-}(_react.default.PureComponent);
+  }), _react.default.createElement(_ExpansionPanelSummary.default, {
+    classes: {
+      root: classes.summaryRoot,
+      content: classes.summaryContent,
+      expanded: classes.expanded,
+      expandIcon: classes.expandIcon
+    },
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseDisable, collapseDisable)),
+    expandIcon: !collapseDisable && _ref
+  }, _react.default.createElement("div", {
+    className: classes.heading
+  }, heading), _react.default.createElement("div", {
+    className: classes.secondaryHeading
+  }, _react.default.createElement("span", {
+    className: classes.secondaryHeadingSpan
+  }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && _react.default.createElement(_ExpansionPanelDetails.default, {
+    className: (0, _classnames.default)(classes.panelDetails, (0, _defineProperty2.default)({}, classes.panelDetailsExited, panelDetailsExited))
+  }, children));
+}
 
 HiExpansionPanel.defaultProps = {
   disabled: false,
   secondaryHeading: '',
   secondaryHeadingIcon: '',
-  secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
+  secondaryHeadingDisabled: ''
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiExpansionPanel'
-})(HiExpansionPanel);
-
+var _default = HiExpansionPanel;
 exports.default = _default;

package/HiForm/HiFormControl.js

@@ -75,7 +75,7 @@ var styles = function styles(theme) {
       },
       '&$iconFullWidth': {
         position: 'absolute',
-        right: 5,
+        right: theme.spacing(1),
         marginLeft: 0,
         bottom: 0
       }
@@ -87,11 +87,11 @@ var styles = function styles(theme) {
     errorDiv: (0, _objectSpread2.default)({}, theme.typography.b3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
-      padding: '16px 8px',
+      padding: theme.spacing(4, 2),
       verticalAlign: 'middle',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 22,
+      marginBottom: theme.spacing(2),
       fontWeight: theme.typography.fontWeightRegular
     }),
     arrowDown: {
@@ -101,12 +101,12 @@ var styles = function styles(theme) {
       borderRight: '4px solid transparent',
       borderTop: '4px solid #000',
       position: 'absolute',
-      bottom: -4,
+      bottom: theme.spacing(-1),
       '&$arrowNotFullWidth': {
-        left: 8
+        left: theme.spacing(2)
       },
       '&$arrowFullWidth': {
-        right: 12
+        right: theme.spacing(3)
       }
     },
     arrowNotFullWidth: {},
@@ -118,10 +118,10 @@ var styles = function styles(theme) {
       width: '100%',
       backgroundColor: '#ffffff',
       color: theme.palette.neutral.normal,
-      padding: '16px 8px',
+      padding: theme.spacing(4, 2),
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 8,
+      marginBottom: theme.spacing(2),
       fontWeight: theme.typography.fontWeightRegular,
       boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
       lineHeight: 1.5