@bonlineza/luxity-lib 2.39.4 → 2.39.6

package/GenderSelector.js

@@ -1,401 +1,394 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/functions')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/functions'], factory) :
-  (global = global || self, global.GenderSelector = factory(global.React, global.styled, global.function));
-}(this, (function (React, styled, functions) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : 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];
-          }
+import React, { forwardRef } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { usePrevious } from '@bonlineza/b-lib/functions';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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;
+  };
+  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];
   }
 
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
+  return target;
+}
 
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
 
-    var key, i;
+  var target = _objectWithoutPropertiesLoose(source, excluded);
 
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+  var key, i;
 
-      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];
-      }
+  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 target;
+}
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
 
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
     }
+  }));
+}
 
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
 
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
+  var _s, _e;
 
-    var _s, _e;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
     try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
+      if (!_n && _i["return"] != null) _i["return"]();
     } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
+      if (_d) throw _e;
     }
-
-    return _arr;
   }
 
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var _templateObject, _templateObject2;
+var Title = styled.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
+  return props.theme.fontSizes[2];
+});
+var InterestsSubheadingContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
+  return props.theme.marginPaddings[1];
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.marginPaddings[3];
+}, function (props) {
+  return props.theme.marginPaddings[3];
+});
+
+var InterestsSubheading = function InterestsSubheading(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(InterestsSubheadingContainer, {
+    className: className
+  }, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement("div", null, children));
+};
+
+var media = {
+  xs: '576px',
+  sm: '768px',
+  md: '992px',
+  lg: '1200px'
+};
+
+var _templateObject$1;
+var SelectionWrapper = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"])), function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.marginPaddings[2];
+}, media.sm, function (props) {
+  return props.theme.marginPaddings[2];
+});
+
+var genders = {
+  FEMALE: 0,
+  MALE: 1,
+  UNISEX: 2
+};
+
+var theme = {
+  breakpoints: ['40em', '52em', '64em'],
+  space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+  marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+  letterSpacings: ['-0.5px', '0px', '+0.5px'],
+  radii: ['0px', '2px', '4px', '8px'],
+  borderRadius: '6px',
+  colors: {
+    primary: '#000',
+    base: '#4e4949',
+    baseLt: '#817c7c',
+    borderColor: '#d8d8d8',
+    ntrlMin: '#fff',
+    ntrlMinTen: '#e6e6e6',
+    gray: '#efefef',
+    darkerGray: '#454141'
+  },
+  rareStepColors: {
+    primary: '#202b58',
+    secondary: '#ef5c2d',
+    ntrlMin: '#ffffff',
+    ntrl40: '#f4f4f4',
+    ntrl50: '#808080',
+    ntrl60: '#e8e8e8',
+    ntrl70: '#252525',
+    ntrlMax: '#000000'
+  },
+  rareStepFontWeights: {
+    normal: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700
+  },
+  rareStepFontSize: {
+    h1: '36px',
+    h2: '30px',
+    h3: '24px',
+    h4: '20px',
+    h5: '16px',
+    h6: '14px',
+    footerTitle: '16px'
+  },
+  rareStepPageSizes: {
+    mobile: '500px',
+    tablet: '768px',
+    desktop: '992px',
+    screenl: '1280px',
+    screenxl: '1680px',
+    screenxxl: '1920px',
+    container: '1600px'
   }
-
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var _templateObject, _templateObject2;
-  var Title = styled__default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
-    return props.theme.fontSizes[2];
-  });
-  var InterestsSubheadingContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  });
-
-  var InterestsSubheading = function InterestsSubheading(_ref) {
-    var title = _ref.title,
-        children = _ref.children,
-        className = _ref.className;
-    return /*#__PURE__*/React__default.createElement(InterestsSubheadingContainer, {
-      className: className
-    }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
-  };
-
-  var media = {
-    xs: '576px',
-    sm: '768px',
-    md: '992px',
-    lg: '1200px'
-  };
-
-  var _templateObject$1;
-  var SelectionWrapper = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, media.sm, function (props) {
-    return props.theme.marginPaddings[2];
+};
+
+var themed = (function (Component) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      ref: ref
+    })));
   });
+});
+
+var _excluded = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
+
+var _templateObject$2, _templateObject2$1, _templateObject3;
+var Content = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"])), function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.marginPaddings[0];
+});
+var InputText = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  transition: 200ms ease-in;\n  margin-left: auto;\n  margin-right: auto;\n"])));
+var StyledLabel = styled.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  line-height: initial;\n  display: block;\n  box-sizing: border-box;\n  transition: 200ms ease-in-out;\n  text-align: center;\n\n  &:hover ", " {\n    color: ", ";\n  }\n\n  input {\n    display: none;\n    &:checked ~ ", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n\n    &:checked ~ ", " ", " {\n      color: ", ";\n    }\n\n    &:disabled ~ ", " {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n"])), InputText, function (props) {
+  return props.theme.colors.primary;
+}, Content, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.ntrlMin;
+}, Content, InputText, function (props) {
+  return props.theme.colors.ntrlMin;
+}, Content);
+/**
+ * CheckButton: Styled checkbox that resembles a button
+ * */
+
+var CheckButton = function CheckButton(props) {
+  var title = props.title,
+      checked = props.checked,
+      renderIcon = props.renderIcon,
+      onChange = props.onChange,
+      checkedValue = props.checkedValue,
+      unCheckedValue = props.unCheckedValue,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _React$useState = React.useState(checked),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      checkedState = _React$useState2[0],
+      setCheck = _React$useState2[1];
+
+  var prevCheckState = usePrevious(checkedState);
+  React.useEffect(function () {
+    if (prevCheckState !== checkedState) {
+      onChange(checkedState);
+    }
+  }, [checkedState, onChange, prevCheckState]);
 
-  var genders = {
-    FEMALE: 0,
-    MALE: 1,
-    UNISEX: 2
+  var handleInputChange = function handleInputChange(e) {
+    var targetChecked = e.target.checked;
+    setCheck(targetChecked);
   };
 
-  var theme = {
-    breakpoints: ['40em', '52em', '64em'],
-    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-    letterSpacings: ['-0.5px', '0px', '+0.5px'],
-    radii: ['0px', '2px', '4px', '8px'],
-    borderRadius: '6px',
-    colors: {
-      primary: '#000',
-      base: '#4e4949',
-      baseLt: '#817c7c',
-      borderColor: '#d8d8d8',
-      ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6',
-      gray: '#efefef',
-      darkerGray: '#454141'
-    },
-    rareStepColors: {
-      primary: '#202b58',
-      secondary: '#ef5c2d',
-      ntrlMin: '#ffffff',
-      ntrl40: '#f4f4f4',
-      ntrl50: '#808080',
-      ntrl60: '#e8e8e8',
-      ntrl70: '#252525',
-      ntrlMax: '#000000'
-    },
-    rareStepFontWeights: {
-      normal: 400,
-      medium: 500,
-      semiBold: 600,
-      bold: 700
-    },
-    rareStepFontSize: {
-      h1: '36px',
-      h2: '30px',
-      h3: '24px',
-      h4: '20px',
-      h5: '16px',
-      h6: '14px',
-      footerTitle: '16px'
-    },
-    rareStepPageSizes: {
-      mobile: '500px',
-      tablet: '768px',
-      desktop: '992px',
-      screenl: '1280px',
-      screenxl: '1680px',
-      screenxxl: '1920px',
-      container: '1600px'
+  return /*#__PURE__*/React.createElement(StyledLabel, null, /*#__PURE__*/React.createElement("input", _extends({
+    defaultChecked: checked
+  }, restProps, {
+    type: "checkbox",
+    onChange: handleInputChange
+  })), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(InputText, null, title), renderIcon(checkedState)));
+};
+
+CheckButton.defaultProps = {
+  title: '',
+  checked: false,
+  renderIcon: function renderIcon() {
+    return false;
+  },
+  onChange: function onChange() {
+    return false;
+  }
+};
+var CheckButton$1 = themed(CheckButton);
+
+var MALE = genders.MALE,
+    FEMALE = genders.FEMALE;
+
+/**
+ * Stylized CheckboxButton for selecting gender
+ * */
+var GenderCheckbox = function GenderCheckbox(_ref) {
+  var gender = _ref.gender,
+      checked = _ref.checked,
+      onInputChange = _ref.onInputChange;
+
+  var getTitle = function getTitle() {
+    switch (gender) {
+      case MALE:
+        return 'Male';
+
+      case FEMALE:
+        return 'Female';
+
+      default:
+        return '';
     }
   };
 
-  var themed = (function (Component) {
-    return /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
-        ref: ref
-      })));
-    });
+  return /*#__PURE__*/React.createElement(CheckButton$1, {
+    onChange: onInputChange,
+    checked: checked,
+    name: getTitle().toLowerCase(),
+    title: getTitle()
   });
-
-  var _excluded = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
-
-  var _templateObject$2, _templateObject2$1, _templateObject3;
-  var Content = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"])), function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  });
-  var InputText = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  transition: 200ms ease-in;\n  margin-left: auto;\n  margin-right: auto;\n"])));
-  var StyledLabel = styled__default.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  line-height: initial;\n  display: block;\n  box-sizing: border-box;\n  transition: 200ms ease-in-out;\n  text-align: center;\n\n  &:hover ", " {\n    color: ", ";\n  }\n\n  input {\n    display: none;\n    &:checked ~ ", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n\n    &:checked ~ ", " ", " {\n      color: ", ";\n    }\n\n    &:disabled ~ ", " {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n"])), InputText, function (props) {
-    return props.theme.colors.primary;
-  }, Content, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, Content, InputText, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, Content);
-  /**
-   * CheckButton: Styled checkbox that resembles a button
-   * */
-
-  var CheckButton = function CheckButton(props) {
-    var title = props.title,
-        checked = props.checked,
-        renderIcon = props.renderIcon,
-        onChange = props.onChange,
-        checkedValue = props.checkedValue,
-        unCheckedValue = props.unCheckedValue,
-        restProps = _objectWithoutProperties(props, _excluded);
-
-    var _React$useState = React__default.useState(checked),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        checkedState = _React$useState2[0],
-        setCheck = _React$useState2[1];
-
-    var prevCheckState = functions.usePrevious(checkedState);
-    React__default.useEffect(function () {
-      if (prevCheckState !== checkedState) {
-        onChange(checkedState);
-      }
-    }, [checkedState, onChange, prevCheckState]);
-
-    var handleInputChange = function handleInputChange(e) {
-      var targetChecked = e.target.checked;
-      setCheck(targetChecked);
-    };
-
-    return /*#__PURE__*/React__default.createElement(StyledLabel, null, /*#__PURE__*/React__default.createElement("input", _extends({
-      defaultChecked: checked
-    }, restProps, {
-      type: "checkbox",
-      onChange: handleInputChange
-    })), /*#__PURE__*/React__default.createElement(Content, null, /*#__PURE__*/React__default.createElement(InputText, null, title), renderIcon(checkedState)));
-  };
-
-  CheckButton.defaultProps = {
-    title: '',
-    checked: false,
-    renderIcon: function renderIcon() {
-      return false;
+};
+
+GenderCheckbox.defaultProps = {
+  name: ''
+};
+
+var MALE$1 = genders.MALE,
+    FEMALE$1 = genders.FEMALE;
+
+/**
+ *  GenderSelector: specialized selector to pick genders for the Interest Component
+ * */
+var GenderSelector = function GenderSelector(_ref) {
+  var gender = _ref.gender,
+      onChange = _ref.onChange,
+      maleInputRef = _ref.maleInputRef,
+      femaleInputRef = _ref.femaleInputRef;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "gender-selector"
+  }, /*#__PURE__*/React.createElement(InterestsSubheading, {
+    title: "Department"
+  }), /*#__PURE__*/React.createElement(SelectionWrapper, {
+    className: "gender-selector__selection-wrapper"
+  }, /*#__PURE__*/React.createElement(GenderCheckbox, {
+    className: "gender-selector__selection-wrapper__input-container",
+    gender: MALE$1,
+    checked: MALE$1 === gender,
+    onInputChange: function onInputChange(isChecked) {
+      return onChange(isChecked, MALE$1);
     },
-    onChange: function onChange() {
-      return false;
-    }
-  };
-  var CheckButton$1 = themed(CheckButton);
-
-  var MALE = genders.MALE,
-      FEMALE = genders.FEMALE;
-
-  /**
-   * Stylized CheckboxButton for selecting gender
-   * */
-  var GenderCheckbox = function GenderCheckbox(_ref) {
-    var gender = _ref.gender,
-        checked = _ref.checked,
-        onInputChange = _ref.onInputChange;
-
-    var getTitle = function getTitle() {
-      switch (gender) {
-        case MALE:
-          return 'Male';
-
-        case FEMALE:
-          return 'Female';
-
-        default:
-          return '';
-      }
-    };
-
-    return /*#__PURE__*/React__default.createElement(CheckButton$1, {
-      onChange: onInputChange,
-      checked: checked,
-      name: getTitle().toLowerCase(),
-      title: getTitle()
-    });
-  };
-
-  GenderCheckbox.defaultProps = {
-    name: ''
-  };
-
-  var MALE$1 = genders.MALE,
-      FEMALE$1 = genders.FEMALE;
-
-  /**
-   *  GenderSelector: specialized selector to pick genders for the Interest Component
-   * */
-  var GenderSelector = function GenderSelector(_ref) {
-    var gender = _ref.gender,
-        onChange = _ref.onChange,
-        maleInputRef = _ref.maleInputRef,
-        femaleInputRef = _ref.femaleInputRef;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "gender-selector"
-    }, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-      title: "Department"
-    }), /*#__PURE__*/React__default.createElement(SelectionWrapper, {
-      className: "gender-selector__selection-wrapper"
-    }, /*#__PURE__*/React__default.createElement(GenderCheckbox, {
-      className: "gender-selector__selection-wrapper__input-container",
-      gender: MALE$1,
-      checked: MALE$1 === gender,
-      onInputChange: function onInputChange(isChecked) {
-        return onChange(isChecked, MALE$1);
-      },
-      checkBoxButtonRef: maleInputRef
-    }), /*#__PURE__*/React__default.createElement(GenderCheckbox, {
-      className: "gender-selector__selection-wrapper__input-container",
-      gender: FEMALE$1,
-      checked: FEMALE$1 === gender,
-      onInputChange: function onInputChange(isChecked) {
-        return onChange(isChecked, FEMALE$1);
-      },
-      checkBoxButtonRef: femaleInputRef
-    })));
-  };
-
-  GenderSelector.defaultProps = {
-    gender: null,
-    onChange: function onChange() {
-      return false;
-    }
-  };
-  var index = themed(GenderSelector);
-
-  return index;
+    checkBoxButtonRef: maleInputRef
+  }), /*#__PURE__*/React.createElement(GenderCheckbox, {
+    className: "gender-selector__selection-wrapper__input-container",
+    gender: FEMALE$1,
+    checked: FEMALE$1 === gender,
+    onInputChange: function onInputChange(isChecked) {
+      return onChange(isChecked, FEMALE$1);
+    },
+    checkBoxButtonRef: femaleInputRef
+  })));
+};
+
+GenderSelector.defaultProps = {
+  gender: null,
+  onChange: function onChange() {
+    return false;
+  }
+};
+var index = themed(GenderSelector);
 
-})));
+export default index;