@thecb/components 5.6.7 → 5.6.9

package/dist/cb-components.cjs.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var styled = _interopDefault(require('styled-components'));
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+/*
+Need to add a new color? Visit http://chir.ag/projects/name-that-color to generate a color name.
+
+Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
+to the one generated by name-that-color.
+*/
+var PEWTER_GREY = "#DFE1E4";
+var MARINER_BLUE = "#2E75D2";
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  background-color: ", ";\n  border-radius: 8px;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  border: 1px solid\n    ", ";\n  border-radius: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  min-width: 24px;\n  min-height: 24px;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var defaultTheme = {
+  theme: {
+    accentColor: MARINER_BLUE,
+    inactiveColor: PEWTER_GREY
+  }
+};
+var RadioButtonBorder = styled.div(_templateObject(), function (_ref) {
+  var isSelected = _ref.isSelected,
+      theme = _ref.theme;
+  return isSelected ? theme.accentColor : theme.inactiveColor;
+});
+RadioButtonBorder.defaultProps = defaultTheme;
+var RadioButtonCenter = styled.div(_templateObject2(), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.accentColor;
+});
+RadioButtonCenter.defaultProps = defaultTheme;
+
+var RadioButton = function RadioButton(_ref3) {
+  var isSelected = _ref3.isSelected,
+      name = _ref3.name;
+  return React.createElement(RadioButtonBorder, {
+    isSelected: isSelected,
+    name: name
+  }, isSelected && React.createElement(RadioButtonCenter, null));
+};
+
+exports.RadioButton = RadioButton;