bright-components 9.32.0 → 10.1.0

package/dist/components/TimePicker/DayPart/DayPartOverlay/index.js

@@ -29,218 +29,127 @@ var _CancelLink = _interopRequireDefault(require("../../Elements/CancelLink"));
 
 var _Actions = _interopRequireDefault(require("../../Elements/Actions"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tbackground-color: ", ";\n\tmargin-top: ", ";\n\tpadding: ", ";\n\tborder: ", " solid;\n\tborder-color: ", ";\n\tborder-radius: ", ";\n\tcursor: pointer;\n\t:hover {\n\t\t", ";\n\t\t", ";\n\t\t", ",\n\t\t", " {\n\t\t\tfill: ", " !important;\n\t\t}\n\t}\n"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\twidth: ", ";\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\tfont-size: ", ";\n\tcolor: ", ";\n\t", ";\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\tfont-size: ", ";\n\tfont-weight: 600;\n\t", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfill: ", " !important;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n\tfill: ", " !important;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: 50%;\n\tbottom: 50%;\n\ttransform: translate(-50%, -50%);\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tborder-color: ", " !important;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var inactiveBorderMixin = (0, _styledComponents.css)(_templateObject(), function (props) {
-  return props.inactive ? _colors.default.greyLight : _colors.default.primaryDark;
-});
-var inactiveLabelColorMixin = (0, _styledComponents.css)(_templateObject2(), function (props) {
-  return props.inactive && "color: " + _colors.default.greyLight + " !important";
-});
-var ICON_SIZE = (0, _stripUnit.default)(_spacing.default.s3);
-var iconStyleMixin = (0, _styledComponents.css)(_templateObject3());
-var Tick = (0, _styledComponents.default)(_Tick.default)(_templateObject4(), iconStyleMixin, function (props) {
-  return props.selected ? _colors.default.primaryDark : _colors.default.greyLight;
-});
+const inactiveBorderMixin = (0, _styledComponents.css)`
+	border-color: ${props => props.inactive ? _colors.default.greyLight : _colors.default.primaryDark} !important;
+`;
+const inactiveLabelColorMixin = (0, _styledComponents.css)`
+	${props => props.inactive && `color: ${_colors.default.greyLight} !important`};
+`;
+const ICON_SIZE = (0, _stripUnit.default)(_spacing.default.s3);
+const iconStyleMixin = (0, _styledComponents.css)`
+	position: absolute;
+	top: 50%;
+	bottom: 50%;
+	transform: translate(-50%, -50%);
+`;
+const Tick = (0, _styledComponents.default)(_Tick.default)`
+	${iconStyleMixin};
+	fill: ${props => props.selected ? _colors.default.primaryDark : _colors.default.greyLight} !important;
+`;
 Tick.displayName = 'Tick';
-var NotAllowed = (0, _styledComponents.default)(_NotAllowed.default)(_templateObject5(), iconStyleMixin, _colors.default.greyLight);
+const NotAllowed = (0, _styledComponents.default)(_NotAllowed.default)`
+	${iconStyleMixin};
+	fill: ${_colors.default.greyLight} !important;
+`;
 NotAllowed.displayName = 'NotAllowed';
-
-var PrimaryLabel = _styledComponents.default.span(_templateObject6(), _spacing.default.s2, inactiveLabelColorMixin);
-
+const PrimaryLabel = _styledComponents.default.span`
+	display: block;
+	font-size: ${_spacing.default.s2};
+	font-weight: 600;
+	${inactiveLabelColorMixin};
+`;
 PrimaryLabel.displayName = 'PrimaryLabel';
-
-var SecondaryLabel = _styledComponents.default.span(_templateObject7(), _spacing.default.s2, _colors.default.greyDark, inactiveLabelColorMixin);
-
+const SecondaryLabel = _styledComponents.default.span`
+	display: block;
+	font-size: ${_spacing.default.s2};
+	color: ${_colors.default.greyDark};
+	${inactiveLabelColorMixin};
+`;
 SecondaryLabel.displayName = 'SecondaryLabel';
-
-var IconContainer = _styledComponents.default.div(_templateObject8(), _spacing.default.s1);
-
+const IconContainer = _styledComponents.default.div`
+	position: relative;
+	width: ${_spacing.default.s1};
+`;
 IconContainer.displayName = 'IconContainer';
-
-var Option = _styledComponents.default.div(_templateObject9(), function (props) {
-  return props.selected ? _colors.default.bodyBackground : _colors.default.white;
-}, _spacing.default.s1, _spacing.default.s2, _vars.default.borderWidth, function (props) {
-  return props.selected ? _colors.default.primaryLight : _colors.default.greyLight;
-}, _vars.default.borderRadius, inactiveBorderMixin, function (props) {
-  return props.inactive && 'cursor: not-allowed';
-}, Tick, NotAllowed, function (props) {
-  return props.inactive ? _colors.default.greyLight : _colors.default.primaryDark;
-});
-
+const Option = _styledComponents.default.div`
+	display: flex;
+	justify-content: space-between;
+	background-color: ${props => props.selected ? _colors.default.bodyBackground : _colors.default.white};
+	margin-top: ${_spacing.default.s1};
+	padding: ${_spacing.default.s2};
+	border: ${_vars.default.borderWidth} solid;
+	border-color: ${props => props.selected ? _colors.default.primaryLight : _colors.default.greyLight};
+	border-radius: ${_vars.default.borderRadius};
+	cursor: pointer;
+	:hover {
+		${inactiveBorderMixin};
+		${props => props.inactive && 'cursor: not-allowed'};
+		${Tick},
+		${NotAllowed} {
+			fill: ${props => props.inactive ? _colors.default.greyLight : _colors.default.primaryDark} !important;
+		}
+	}
+`;
 Option.displayName = 'Option';
 
-var DayPartOverlay =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(DayPartOverlay, _React$Component);
-
-  function DayPartOverlay(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
+class DayPartOverlay extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       options: props.options
     };
-    return _this;
   }
 
-  var _proto = DayPartOverlay.prototype;
-
-  _proto.select = function select(selectedOptionId) {
+  select(selectedOptionId) {
     // eslint-disable-next-line react/no-access-state-in-setstate
-    var options = (0, _lodash.default)(this.state.options);
-    var currentSelection = options.find(function (o) {
-      return o.selected;
-    });
+    const options = (0, _lodash.default)(this.state.options);
+    const currentSelection = options.find(o => o.selected);
     currentSelection.selected = false;
-    options.find(function (o) {
-      return o.id === selectedOptionId;
-    }).selected = true;
+    options.find(o => o.id === selectedOptionId).selected = true;
     this.setState({
-      options: options
+      options
     });
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
+  }
 
-    var options = this.state.options;
-    var _this$props = this.props,
-        onApply = _this$props.onApply,
-        onCancel = _this$props.onCancel;
-    return _react.default.createElement("div", null, _react.default.createElement("div", null, options.map(function (option) {
-      return _react.default.createElement(Option, {
-        "data-testid": "option",
-        key: option.id,
-        selected: option.selected,
-        inactive: option.disabled,
-        onClick: function onClick() {
-          return !option.disabled && _this2.select(option.id);
-        }
-      }, _react.default.createElement("div", null, _react.default.createElement(PrimaryLabel, {
-        inactive: option.disabled
-      }, option.label), _react.default.createElement(SecondaryLabel, {
-        inactive: option.disabled
-      }, option.duration)), _react.default.createElement(IconContainer, null, option.disabled ? _react.default.createElement(NotAllowed, {
-        size: ICON_SIZE,
-        "data-testid": "not allowed"
-      }) : _react.default.createElement(Tick, {
-        selected: option.selected,
-        size: ICON_SIZE,
-        "data-testid": "tick"
-      })));
-    })), _react.default.createElement(_Actions.default, null, _react.default.createElement(_CancelLink.default, {
-      onClick: function onClick() {
-        return onCancel();
-      }
+  render() {
+    const {
+      options
+    } = this.state;
+    const {
+      onApply,
+      onCancel
+    } = this.props;
+    return _react.default.createElement("div", null, _react.default.createElement("div", null, options.map(option => _react.default.createElement(Option, {
+      "data-testid": "option",
+      key: option.id,
+      selected: option.selected,
+      inactive: option.disabled,
+      onClick: () => !option.disabled && this.select(option.id)
+    }, _react.default.createElement("div", null, _react.default.createElement(PrimaryLabel, {
+      inactive: option.disabled
+    }, option.label), _react.default.createElement(SecondaryLabel, {
+      inactive: option.disabled
+    }, option.duration)), _react.default.createElement(IconContainer, null, option.disabled ? _react.default.createElement(NotAllowed, {
+      size: ICON_SIZE,
+      "data-testid": "not allowed"
+    }) : _react.default.createElement(Tick, {
+      selected: option.selected,
+      size: ICON_SIZE,
+      "data-testid": "tick"
+    }))))), _react.default.createElement(_Actions.default, null, _react.default.createElement(_CancelLink.default, {
+      onClick: () => onCancel()
     }, "Cancel"), _react.default.createElement(_BrandButton.default, {
-      onClick: function onClick() {
-        return onApply([].concat(options));
-      }
+      onClick: () => onApply([...options])
     }, "Apply")));
-  };
+  }
 
-  return DayPartOverlay;
-}(_react.default.Component);
+}
 
 DayPartOverlay.displayName = 'DayPartOverlay';
 DayPartOverlay.propTypes = {

package/dist/components/TimePicker/DayPart/index.js

@@ -25,144 +25,99 @@ var _breakpoints = _interopRequireDefault(require("../../../constants/breakpoint
 
 var _DayPartOverlay = _interopRequireDefault(require("./DayPartOverlay"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: ", " !important;\n\tmargin-bottom: 0px !important;\n\t", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: ", " !important;\n\tborder: ", " solid ", ";\n\tborder-radius: ", ";\n\tmargin-top: -", ";\n\tpadding: ", ";\n\tbackground-color: ", ";\n\tbox-shadow: ", ";\n\t", ";\n\n\t@media (min-width: ", ") {\n\t\tposition: absolute;\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\t", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var borderColorMixin = (0, _styledComponents.css)(_templateObject(), function (props) {
-  return props.overlayOpen && "border-color: " + _colors.default.primary + " !important";
-});
-
-var Wrapper = _styledComponents.default.div(_templateObject2(), function (props) {
-  return props.width;
-});
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+const borderColorMixin = (0, _styledComponents.css)`
+	${props => props.overlayOpen && `border-color: ${_colors.default.primary} !important`};
+`;
+const Wrapper = _styledComponents.default.div`
+	width: ${props => props.width};
+`;
 Wrapper.displayName = 'Wrapper';
-
-var OverlayContainer = _styledComponents.default.div(_templateObject3(), function (props) {
-  return props.width;
-}, _vars.default.borderWidth, _colors.default.grey, _vars.default.borderRadius, _vars.default.borderWidth, _spacing.default.s2, _colors.default.white, _vars.default.boxShadow, borderColorMixin, _breakpoints.default.tablet);
-
+const OverlayContainer = _styledComponents.default.div`
+	width: ${props => props.width} !important;
+	border: ${_vars.default.borderWidth} solid ${_colors.default.grey};
+	border-radius: ${_vars.default.borderRadius};
+	margin-top: -${_vars.default.borderWidth};
+	padding: ${_spacing.default.s2};
+	background-color: ${_colors.default.white};
+	box-shadow: ${_vars.default.boxShadow};
+	${borderColorMixin};
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		position: absolute;
+	}
+`;
 OverlayContainer.displayName = 'OverlayContainer';
-var DayPartInput = (0, _styledComponents.default)(_Input.default)(_templateObject4(), function (props) {
-  return props.width;
-}, borderColorMixin);
+const DayPartInput = (0, _styledComponents.default)(_Input.default)`
+	width: ${props => props.width} !important;
+	margin-bottom: 0px !important;
+	${borderColorMixin};
+`;
 DayPartInput.displayName = 'DayPartInput';
 
-var DayPartPicker =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(DayPartPicker, _React$Component);
-
-  function DayPartPicker(props) {
-    var _this;
-
-    _this = _React$Component.call(this) || this;
-    _this.state = {
+class DayPartPicker extends _react.default.Component {
+  constructor(props) {
+    super();
+    this.state = {
       options: props.options,
       overlayOpen: false
     };
-    (0, _reactAutobind.default)(_assertThisInitialized(_this));
-    return _this;
+    (0, _reactAutobind.default)(this);
   }
 
-  var _proto = DayPartPicker.prototype;
-
-  _proto.apply = function apply(options) {
+  apply(options) {
     this.setState({
-      options: options
+      options
     });
     this.toggleOverlay();
     this.props.onDayPartSelect(options);
-  };
+  }
 
-  _proto.toggleOverlay = function toggleOverlay() {
-    var toggle = this.state.overlayOpen;
+  toggleOverlay() {
+    const toggle = this.state.overlayOpen;
     this.setState({
       overlayOpen: !toggle
     });
-  };
+  }
 
-  _proto.handleClickOutside = function handleClickOutside() {
+  handleClickOutside() {
     this.setState({
       overlayOpen: false
     });
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        width = _this$props.width,
-        onDayPartSelect = _this$props.onDayPartSelect,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["width", "onDayPartSelect"]);
+  }
 
-    var _this$state = this.state,
-        overlayOpen = _this$state.overlayOpen,
-        options = _this$state.options;
-    var selected = options.find(function (o) {
-      return o.selected;
-    });
+  render() {
+    const _this$props = this.props,
+          {
+      width,
+      onDayPartSelect
+    } = _this$props,
+          rest = _objectWithoutProperties(_this$props, ["width", "onDayPartSelect"]);
+
+    const {
+      overlayOpen,
+      options
+    } = this.state;
+    const selected = options.find(o => o.selected);
     return _react.default.createElement(Wrapper, _extends({
       width: width
     }, rest), _react.default.createElement(DayPartInput, {
       value: selected.label,
       overlayOpen: overlayOpen,
-      onFocus: function onFocus() {
+      onFocus: () => {
         if (!overlayOpen) {
-          _this2.setState({
+          this.setState({
             overlayOpen: true
           });
         }
@@ -178,10 +133,9 @@ function (_React$Component) {
       onApply: this.apply,
       onCancel: this.toggleOverlay
     })));
-  };
+  }
 
-  return DayPartPicker;
-}(_react.default.Component);
+}
 
 DayPartPicker.displayName = 'DayPartPicker';
 DayPartPicker.propTypes = {

package/dist/components/TimePicker/Elements/Actions/index.js

@@ -9,20 +9,12 @@ var _spacing = _interopRequireDefault(require("../../../../constants/spacing"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tline-height: ", ";\n\tmargin-top: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Actions = _styledComponents.default.div(_templateObject(), _spacing.default.s4, _spacing.default.s3);
-
+const Actions = _styledComponents.default.div`
+	display: flex;
+	justify-content: space-between;
+	line-height: ${_spacing.default.s4};
+	margin-top: ${_spacing.default.s3};
+`;
 Actions.displayName = 'Actions';
 /** @component */
 

package/dist/components/TimePicker/Elements/CancelLink/index.js

@@ -11,19 +11,13 @@ var _colors = _interopRequireDefault(require("../../../../constants/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", ";\n\t:hover {\n\t\tcolor: ", ";\n\t\ttext-decoration: underline;\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var CancelLink = (0, _styledComponents.default)(_LinkButton.default)(_templateObject(), _colors.default.secondary, _colors.default.secondaryDark);
+const CancelLink = (0, _styledComponents.default)(_LinkButton.default)`
+	color: ${_colors.default.secondary};
+	:hover {
+		color: ${_colors.default.secondaryDark};
+		text-decoration: underline;
+	}
+`;
 CancelLink.displayName = 'CancelLink';
 /** @component */
 

package/dist/components/TimePicker/Elements/DownIcon/index.js

@@ -19,27 +19,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tcolor: ", " !important;\n\t:hover {\n\t\tcursor: pointer;\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var DownIcon = (0, _styledComponents.default)(_ChevronDown.default)(_templateObject(), _colors.default.grey);
+const DownIcon = (0, _styledComponents.default)(_ChevronDown.default)`
+	color: ${_colors.default.grey} !important;
+	:hover {
+		cursor: pointer;
+	}
+`;
 DownIcon.displayName = 'DownIcon';
-var IconSize = (0, _stripUnit.default)(_spacing.default.s2);
+const IconSize = (0, _stripUnit.default)(_spacing.default.s2);
 
-var DownIconComponent = function DownIconComponent(props) {
-  return _react.default.createElement(DownIcon, _extends({
-    size: IconSize
-  }, props));
-};
+const DownIconComponent = props => _react.default.createElement(DownIcon, _extends({
+  size: IconSize
+}, props));
 
 DownIconComponent.displayName = 'DownIcon';
 var _default = DownIconComponent;

package/dist/components/TimePicker/Elements/IncrementNotice/index.js

@@ -11,20 +11,12 @@ var _colors = _interopRequireDefault(require("../../../../constants/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\ttext-align: center;\n\tfont-size: ", ";\n\tcolor: ", ";\n\tmargin-bottom: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var IncrementNotice = _styledComponents.default.div(_templateObject(), _spacing.default.s2, _colors.default.grey, _spacing.default.s2);
-
+const IncrementNotice = _styledComponents.default.div`
+	text-align: center;
+	font-size: ${_spacing.default.s2};
+	color: ${_colors.default.grey};
+	margin-bottom: ${_spacing.default.s2};
+`;
 IncrementNotice.displayName = 'IncrementNotice';
 /** @component */