@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/cardV2/timeline.js

@@ -1,46 +1,29 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  height: 50px;\n  .start-time {\n    position: absolute;\n    top: 0px;\n    .hours {\n      font-size: 20px;\n      color: #fff;\n      font-family: \'SFUIText-Medium\';\n    }\n    .seperator {\n      font-size: 20px;\n      color: #fff;\n      font-family: \'SFUIText-Light\';\n    }\n    .minutes {\n      font-size: 20px;\n      color: #fff;\n      font-family: \'SFUIText-Light\';\n      align-self: 1;\n    }\n  }\n  .image-block {\n    position: absolute;\n    bottom: 0;\n  }\n  .end-time {\n    position: absolute;\n    right: 0;\n    top: 8px;\n    font-size: 10px;\n    font-family: \'SFUIText-Light\';\n    color: #afb2ba;\n    .am-pm {\n      margin-left: 4px;\n    }\n  }\n  .am-pm {\n    font-size: 10px;\n    align-self: end;\n    font-family: \'SFUIText-Light\';\n    color: #afb2ba;\n    margin-left: 3px;\n  }\n'], ['\n  position: relative;\n  height: 50px;\n  .start-time {\n    position: absolute;\n    top: 0px;\n    .hours {\n      font-size: 20px;\n      color: #fff;\n      font-family: \'SFUIText-Medium\';\n    }\n    .seperator {\n      font-size: 20px;\n      color: #fff;\n      font-family: \'SFUIText-Light\';\n    }\n    .minutes {\n      font-size: 20px;\n      color: #fff;\n      font-family: \'SFUIText-Light\';\n      align-self: 1;\n    }\n  }\n  .image-block {\n    position: absolute;\n    bottom: 0;\n  }\n  .end-time {\n    position: absolute;\n    right: 0;\n    top: 8px;\n    font-size: 10px;\n    font-family: \'SFUIText-Light\';\n    color: #afb2ba;\n    .am-pm {\n      margin-left: 4px;\n    }\n  }\n  .am-pm {\n    font-size: 10px;\n    align-self: end;\n    font-family: \'SFUIText-Light\';\n    color: #afb2ba;\n    margin-left: 3px;\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _dateTime = require('../dateTime');
-
-var _dateTime2 = _interopRequireDefault(_dateTime);
-
-var _tokens = require('@desynova-digital/tokens');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var TimelineBlock = _styledComponents2.default.div(_templateObject);
-
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dateTime = _interopRequireDefault(require("../dateTime"));
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var TimelineBlock = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  height: 50px;\n  .start-time {\n    position: absolute;\n    top: 0px;\n    .hours {\n      font-size: 20px;\n      color: #fff;\n      font-family: 'SFUIText-Medium';\n    }\n    .seperator {\n      font-size: 20px;\n      color: #fff;\n      font-family: 'SFUIText-Light';\n    }\n    .minutes {\n      font-size: 20px;\n      color: #fff;\n      font-family: 'SFUIText-Light';\n      align-self: 1;\n    }\n  }\n  .image-block {\n    position: absolute;\n    bottom: 0;\n  }\n  .end-time {\n    position: absolute;\n    right: 0;\n    top: 8px;\n    font-size: 10px;\n    font-family: 'SFUIText-Light';\n    color: #afb2ba;\n    .am-pm {\n      margin-left: 4px;\n    }\n  }\n  .am-pm {\n    font-size: 10px;\n    align-self: end;\n    font-family: 'SFUIText-Light';\n    color: #afb2ba;\n    margin-left: 3px;\n  }\n"])));
 var Timeline = function Timeline(props) {
   var startTime = props.startTime,
-      endTime = props.endTime,
-      theme = props.theme;
-
-
+    endTime = props.endTime,
+    theme = props.theme;
   var getTimeString = function getTimeString(date, type) {
     var string = '';
     if (date) {
-      var timeString = _dateTime2.default.toTimeString(date, 'HH:MM AP');
-
+      var timeString = _dateTime["default"].toTimeString(date, 'HH:MM AP');
       if (type === 'hours') {
         string = timeString.split(':')[0];
       } else if (type === 'minutes') {
@@ -51,98 +34,159 @@ var Timeline = function Timeline(props) {
     }
     return string;
   };
-
-  return _react2.default.createElement(
-    TimelineBlock,
-    null,
-    _react2.default.createElement(
-      'div',
-      { className: 'start-time' },
-      _react2.default.createElement(
-        'span',
-        { className: 'hours' },
-        getTimeString(startTime, 'hours')
-      ),
-      _react2.default.createElement(
-        'span',
-        { className: 'seperator' },
-        ':'
-      ),
-      _react2.default.createElement(
-        'span',
-        { className: 'minutes' },
-        getTimeString(startTime, 'minutes')
-      ),
-      _react2.default.createElement(
-        'span',
-        { className: 'am-pm' },
-        getTimeString(startTime, 'ampm')
-      )
-    ),
-    _react2.default.createElement(
-      'div',
-      { className: 'image-block' },
-      _react2.default.createElement(
-        'svg',
-        {
-          width: '222',
-          height: '23',
-          viewBox: '0 0 222 23',
-          fill: 'none',
-          xmlns: 'http://www.w3.org/2000/svg'
-        },
-        _react2.default.createElement('rect', { width: '2', height: '23', rx: '1', fill: _tokens.colors[props.theme].card.themeColor }),
-        _react2.default.createElement('rect', { x: '15', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '29', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '42', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '56', y: '8', width: '1', height: '15', rx: '0.5', fill: '#303F51' }),
-        _react2.default.createElement('rect', { x: '70', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '84', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '97', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '111', y: '8', width: '1', height: '15', rx: '0.5', fill: '#303F51' }),
-        _react2.default.createElement('rect', { x: '125', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '139', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '152', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '166', y: '8', width: '1', height: '15', rx: '0.5', fill: '#303F51' }),
-        _react2.default.createElement('rect', { x: '180', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '194', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '207', y: '19', width: '1', height: '4', rx: '0.5', fill: '#1B2B3F' }),
-        _react2.default.createElement('rect', { x: '221', y: '8', width: '1', height: '15', rx: '0.5', fill: '#FF6C56' })
-      )
-    ),
-    _react2.default.createElement(
-      'div',
-      { className: 'end-time' },
-      _react2.default.createElement(
-        'span',
-        { className: 'hours' },
-        getTimeString(endTime, 'hours')
-      ),
-      _react2.default.createElement(
-        'span',
-        { className: 'seperator' },
-        ':'
-      ),
-      _react2.default.createElement(
-        'span',
-        { className: 'minutes' },
-        getTimeString(endTime, 'minutes')
-      ),
-      _react2.default.createElement(
-        'span',
-        { className: 'am-pm' },
-        getTimeString(endTime, 'ampm')
-      )
-    )
-  );
+  return /*#__PURE__*/_react["default"].createElement(TimelineBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "start-time"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "hours"
+  }, getTimeString(startTime, 'hours')), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "seperator"
+  }, ":"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "minutes"
+  }, getTimeString(startTime, 'minutes')), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "am-pm"
+  }, getTimeString(startTime, 'ampm'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "image-block"
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "222",
+    height: "23",
+    viewBox: "0 0 222 23",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    width: "2",
+    height: "23",
+    rx: "1",
+    fill: _tokens.colors[props.theme].card.themeColor
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "15",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "29",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "42",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "56",
+    y: "8",
+    width: "1",
+    height: "15",
+    rx: "0.5",
+    fill: "#303F51"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "70",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "84",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "97",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "111",
+    y: "8",
+    width: "1",
+    height: "15",
+    rx: "0.5",
+    fill: "#303F51"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "125",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "139",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "152",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "166",
+    y: "8",
+    width: "1",
+    height: "15",
+    rx: "0.5",
+    fill: "#303F51"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "180",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "194",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "207",
+    y: "19",
+    width: "1",
+    height: "4",
+    rx: "0.5",
+    fill: "#1B2B3F"
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "221",
+    y: "8",
+    width: "1",
+    height: "15",
+    rx: "0.5",
+    fill: "#FF6C56"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "end-time"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "hours"
+  }, getTimeString(endTime, 'hours')), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "seperator"
+  }, ":"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "minutes"
+  }, getTimeString(endTime, 'minutes')), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "am-pm"
+  }, getTimeString(endTime, 'ampm'))));
 };
-
 Timeline.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  startTime: _propTypes2.default.string,
-  endTime: _propTypes2.default.string
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  startTime: _propTypes["default"].string,
+  endTime: _propTypes["default"].string
 };
 Timeline.defaultProps = {
   theme: 'dark'
 };
-exports.default = Timeline;
+var _default = exports["default"] = Timeline;

package/atoms/checkbox/checkbox.js

@@ -1,53 +1,26 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCheckboxOption = exports.StyledCheckbox = undefined;
-
-var _templateObject = _taggedTemplateLiteral([''], ['']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  cursor: pointer;\n  padding: ', ';\n  ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  ', ' {\n    opacity: ', ';\n    font-family: \'SFUIText-Regular\';\n    color: ', ';\n    margin-left: 25px;\n  }\n  ', ' {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 22px;\n    width: 22px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: ', ';\n    cursor: pointer;\n    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n  }\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n  input ~ ', ' {\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      &:hover {\n        background: ', ';\n        color: ', ';\n      }\n    }\n  }\n  input:checked ~ ', ' {\n    &.disabled {\n      &:hover {\n        background: ', ';\n      }\n    }\n  }\n\n  input:readonly ~ ', ', input:readonly:checked ~ ', ' {\n    cursor: text;\n    opacity: 5;\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n    opacity: ', ';\n  }\n  input:checked ~ ', ' {\n    background-color: ', ';\n    color: ', ';\n  }\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n  input:checked ~ ', ':after {\n    display: block;\n  }\n  ', ':after {\n    top: 55%;\n    left: 35%;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    transform: rotate(45deg) translate(-50%, -50%);\n    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n  }\n\n  @keyframes checkbox-check {\n    0% {\n      width: 0;\n      height: 0;\n      border-color: #fff;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    33% {\n      width: 4px;\n      height: 0;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    100% {\n      width: 4px;\n      height: 9px;\n      border-color: #fff;\n      transform: translate3d(0, -0.5em, 0) rotate(45deg);\n    }\n  }\n\n  &.switch {\n    display: flex;\n    width: 100px;\n  }\n'], ['\n  position: relative;\n  cursor: pointer;\n  padding: ', ';\n  ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  ', ' {\n    opacity: ', ';\n    font-family: \'SFUIText-Regular\';\n    color: ', ';\n    margin-left: 25px;\n  }\n  ', ' {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 22px;\n    width: 22px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: ', ';\n    cursor: pointer;\n    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n  }\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n  input ~ ', ' {\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      &:hover {\n        background: ', ';\n        color: ', ';\n      }\n    }\n  }\n  input:checked ~ ', ' {\n    &.disabled {\n      &:hover {\n        background: ', ';\n      }\n    }\n  }\n\n  input:readonly ~ ', ', input:readonly:checked ~ ', ' {\n    cursor: text;\n    opacity: 5;\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n    opacity: ', ';\n  }\n  input:checked ~ ', ' {\n    background-color: ', ';\n    color: ', ';\n  }\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n  input:checked ~ ', ':after {\n    display: block;\n  }\n  ', ':after {\n    top: 55%;\n    left: 35%;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    transform: rotate(45deg) translate(-50%, -50%);\n    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n  }\n\n  @keyframes checkbox-check {\n    0% {\n      width: 0;\n      height: 0;\n      border-color: #fff;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    33% {\n      width: 4px;\n      height: 0;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    100% {\n      width: 4px;\n      height: 9px;\n      border-color: #fff;\n      transform: translate3d(0, -0.5em, 0) rotate(45deg);\n    }\n  }\n\n  &.switch {\n    display: flex;\n    width: 100px;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  ', ' {\n    display: ', ';\n    ', ';\n    &:last-child {\n      margin: 0;\n    }\n  }\n'], ['\n  ', ' {\n    display: ', ';\n    ', ';\n    &:last-child {\n      margin: 0;\n    }\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _tag = require('../tag');
-
-var _tag2 = _interopRequireDefault(_tag);
-
-var _switch = require('../switch');
-
-var _switch2 = _interopRequireDefault(_switch);
-
-var _icon = require('../icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var CheckMark = _styledComponents2.default.span(_templateObject);
-var Label = _styledComponents2.default.span(_templateObject);
-
-var StyledTag = (0, _styledComponents2.default)(_tag2.default)(_templateObject);
-
-var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, function (props) {
+exports["default"] = exports.StyledCheckboxOption = exports.StyledCheckbox = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _tag = _interopRequireDefault(require("../tag"));
+var _switch = _interopRequireDefault(require("../switch"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var CheckMark = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
+var StyledTag = (0, _styledComponents["default"])(_tag["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
+var StyledCheckboxOption = exports.StyledCheckboxOption = _styledComponents["default"].label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  cursor: pointer;\n  padding: ", ";\n  ", ";\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ", ";\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  ", " {\n    opacity: ", ";\n    font-family: 'SFUIText-Regular';\n    color: ", ";\n    margin-left: 25px;\n  }\n  ", " {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    height: 22px;\n    width: 22px;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    box-shadow: inset 0 1px 2px 0\n      ", ";\n    border-radius: ", ";\n    cursor: pointer;\n    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n  }\n  &:hover input ~ ", " {\n    box-shadow: inset 0 1px 4px 0 ", ";\n  }\n  input ~ ", " {\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n  }\n  input:checked ~ ", " {\n    &.disabled {\n      &:hover {\n        background: ", ";\n      }\n    }\n  }\n\n  input:readonly ~ ", ", input:readonly:checked ~ ", " {\n    cursor: text;\n    opacity: 5;\n  }\n\n  input:checked ~ ", " {\n    background-color: ", ";\n    border: 1px solid ", ";\n    opacity: ", ";\n  }\n  input:checked ~ ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  ", ":after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n  input:checked ~ ", ":after {\n    display: block;\n  }\n  ", ":after {\n    top: 55%;\n    left: 35%;\n    border-right: 2px solid transparent;\n    border-bottom: 2px solid transparent;\n    transform: rotate(45deg) translate(-50%, -50%);\n    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n  }\n\n  @keyframes checkbox-check {\n    0% {\n      width: 0;\n      height: 0;\n      border-color: #fff;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    33% {\n      width: 4px;\n      height: 0;\n      transform: translate3d(0, 0, 0) rotate(45deg);\n    }\n    100% {\n      width: 4px;\n      height: 9px;\n      border-color: #fff;\n      transform: translate3d(0, -0.5em, 0) rotate(45deg);\n    }\n  }\n\n  &.switch {\n    display: flex;\n    width: 100px;\n  }\n"])), function (props) {
   return props.seperationType === 'line' ? '15px' : '5px';
 }, function (props) {
-  return props.seperationType === 'line' && '\n    width: 100%;\n    border-bottom: 1px solid #303F51;\n  ';
+  return props.seperationType === 'line' && "\n    width: 100%;\n    border-bottom: 1px solid #303F51;\n  ";
 }, function (props) {
   return props.readOnly ? 'none' : null;
 }, Label, function (props) {
@@ -82,148 +55,103 @@ var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, fu
 }, function (props) {
   return _tokens.colors[props.theme].radio.selectedText;
 }, CheckMark, CheckMark, CheckMark);
-
 var justifyContent = {
-  horizontal: 'margin-right: 5px;',
-  vertical: 'margin-bottom: 5px;'
+  horizontal: "margin-right: 5px;",
+  vertical: "margin-bottom: 5px;"
 };
-
 function getDisplayValue(props) {
   return props.align === 'horizontal' ? 'inline-block' : props.className === 'display-flex' ? 'flex' : 'table';
 }
-var StyledCheckbox = _styledComponents2.default.div(_templateObject3, StyledCheckboxOption, function (props) {
+var StyledCheckbox = exports.StyledCheckbox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    display: ", ";\n    ", ";\n    &:last-child {\n      margin: 0;\n    }\n  }\n"])), StyledCheckboxOption, function (props) {
   return getDisplayValue(props);
 }, function (props) {
   return justifyContent[props.align];
 });
-
 var Checkbox = function Checkbox(props) {
-  return _react2.default.createElement(
-    StyledCheckboxOption,
-    {
-      theme: props.theme,
-      readOnly: props.readOnly,
-      className: props.type,
-      shape: props.shape,
-      seperationType: props.seperationType
+  return /*#__PURE__*/_react["default"].createElement(StyledCheckboxOption, {
+    theme: props.theme,
+    readOnly: props.readOnly,
+    className: props.type,
+    shape: props.shape,
+    seperationType: props.seperationType
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "checkbox",
+    name: props.name,
+    value: props.value,
+    checked: props.checked,
+    defaultChecked: props.defaultChecked,
+    onChange: function onChange() {
+      if (!props.isDisabled) {
+        //props.onChange
+      }
     },
-    _react2.default.createElement('input', {
-      type: 'checkbox',
-      name: props.name,
-      value: props.value,
-      checked: props.checked,
-      defaultChecked: props.defaultChecked,
-      onChange: function onChange() {
-        if (!props.isDisabled) {
-          //props.onChange
-        }
-      },
-      readOnly: props.readOnly,
-      disabled: props.isDisabled ? true : false
-    }),
-    props.type === 'label' ? _react2.default.createElement(
-      StyledTag,
-      {
-        theme: props.theme,
-        selected: props.defaultChecked,
-        className: props.isDisabled && props.access !== 'read' ? 'disabled' : ''
-      },
-      props.children
-    ) : null,
-    props.type === 'default' ? _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
-      _react2.default.createElement(CheckMark, null),
-      _react2.default.createElement(
-        Label,
-        null,
-        props.children
-      )
-    ) : null,
-    props.type === 'switch' ? _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
-      _react2.default.createElement(
-        Label,
-        null,
-        props.children
-      ),
-      _react2.default.createElement(_switch2.default, {
-        checked: props.checked,
-        theme: props.theme,
-        onChangeCheck: function onChangeCheck(value) {
-          console.log(value);
-        }
-      })
-    ) : null,
-    props.type === 'icon' && _react2.default.createElement(_icon2.default, {
-      name: props.value,
-      value: props.value,
-      fillRule: props.fillRule,
-      color: props.checked ? _tokens.colors[props.theme].radio.backgroundSelected : '#AFB2BA'
-      // color={props.checked ? (props.theme=="nexc" ? "#60BEF8" : "#00CEC6") : "#AFB2BA"}
-    })
-  );
+    readOnly: props.readOnly,
+    disabled: props.isDisabled ? true : false
+  }), props.type === 'label' ? /*#__PURE__*/_react["default"].createElement(StyledTag, {
+    theme: props.theme,
+    selected: props.defaultChecked,
+    className: props.isDisabled && props.access !== 'read' ? 'disabled' : ''
+  }, props.children) : null, props.type === 'default' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CheckMark, null), /*#__PURE__*/_react["default"].createElement(Label, null, props.children)) : null, props.type === 'switch' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Label, null, props.children), /*#__PURE__*/_react["default"].createElement(_switch["default"], {
+    checked: props.checked,
+    theme: props.theme,
+    onChangeCheck: function onChangeCheck(value) {
+      console.log(value);
+    }
+  })) : null, props.type === 'icon' && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: props.value,
+    value: props.value,
+    fillRule: props.fillRule,
+    color: props.checked ? _tokens.colors[props.theme].radio.backgroundSelected : '#AFB2BA'
+    // color={props.checked ? (props.theme=="nexc" ? "#60BEF8" : "#00CEC6") : "#AFB2BA"}
+  }));
 };
-
 var CheckboxGroup = function CheckboxGroup(props) {
-  return _react2.default.createElement(
-    StyledCheckbox,
-    props,
-    _react2.default.Children.map(props.children, function (child) {
-      return child ? _react2.default.cloneElement(child, {
-        name: props.name,
-        isDisabled: child.props.isDisabled,
-        defaultChecked: props.selected && props.selected.indexOf(child.props.value) > -1,
-        checked: props.selected && props.selected.indexOf(child.props.value) > -1, //child.props.checked,
-        readOnly: props.readOnly || child.props.readOnly,
-        onChange: child.props.isDisabled ? props.onChange : function () {},
-        theme: props.theme,
-        type: props.type,
-        fillRule: props.fillRule || '',
-        access: child.props.access,
-        shape: props.shape,
-        seperationType: props.seperationType
-      }) : null;
-    })
-  );
+  return /*#__PURE__*/_react["default"].createElement(StyledCheckbox, props, _react["default"].Children.map(props.children, function (child) {
+    return child ? /*#__PURE__*/_react["default"].cloneElement(child, {
+      name: props.name,
+      isDisabled: child.props.isDisabled,
+      defaultChecked: props.selected && props.selected.indexOf(child.props.value) > -1,
+      checked: props.selected && props.selected.indexOf(child.props.value) > -1,
+      //child.props.checked,
+      readOnly: props.readOnly || child.props.readOnly,
+      onChange: child.props.isDisabled ? props.onChange : function () {},
+      theme: props.theme,
+      type: props.type,
+      fillRule: props.fillRule || '',
+      access: child.props.access,
+      shape: props.shape,
+      seperationType: props.seperationType
+    }) : null;
+  }));
 };
-
 Checkbox.propTypes = {
   /** The direction in which the options should be laid out */
-  align: _propTypes2.default.oneOf(['horizontal', 'vertical']),
+  align: _propTypes["default"].oneOf(['horizontal', 'vertical']),
   /** The name of the checkbox */
-  name: _propTypes2.default.string,
+  name: _propTypes["default"].string,
   /** The value of the currently-selected option */
-  selected: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  selected: _propTypes["default"].arrayOf(_propTypes["default"].string),
   /** If true, all options in the group will be disabled */
-  readOnly: _propTypes2.default.bool,
+  readOnly: _propTypes["default"].bool,
   /** Callback function which is called when the user selects an option */
-  onChange: _propTypes2.default.func,
-  type: _propTypes2.default.oneOf(['default', 'label', 'switch']),
-  fillRule: _propTypes2.default.string,
-  access: _propTypes2.default.string,
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  onChange: _propTypes["default"].func,
+  type: _propTypes["default"].oneOf(['default', 'label', 'switch']),
+  fillRule: _propTypes["default"].string,
+  access: _propTypes["default"].string,
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 CheckboxGroup.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 Checkbox.defaultProps = {
   align: 'vertical',
   type: 'default',
   theme: 'light'
 };
-
 CheckboxGroup.defaultProps = {
   theme: 'light',
-  shape: _propTypes2.default.oneOf(['square', 'default']),
-  seperationType: _propTypes2.default.oneOf(['line', 'default'])
+  shape: _propTypes["default"].oneOf(['square', 'default']),
+  seperationType: _propTypes["default"].oneOf(['line', 'default'])
 };
-
 Checkbox.Group = CheckboxGroup;
-
-exports.default = Checkbox;
-exports.StyledCheckbox = StyledCheckbox;
-exports.StyledCheckboxOption = StyledCheckboxOption;
+var _default = exports["default"] = Checkbox;