@justfixnyc/component-library 0.35.0 → 0.37.0

package/dist/src/index.js

@@ -3,331 +3,100 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
 var classNames = require('classnames');
+var React = require('react');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
+var Select = require('react-select');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-/**
- * Accepts all `ButtonHTMLAttributes`
- */
-const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+const Icon = _ref => {
   let {
-    labelText,
-    variant = 'primary',
-    size = 'large',
-    loading,
-    labelIcon: ButtonIcon,
-    iconOnRight,
-    iconOnly,
     className,
-    ...props
+    icon
   } = _ref;
-  const buttonClassNames = classNames__default["default"]('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''), className);
-  const iconClassNames = classNames__default["default"]('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
-  const arias = {};
-  if (iconOnly) {
-    arias['aria-label'] = labelText;
+  let faIcon;
+  switch (icon) {
+    case 'arrowLeft':
+      faIcon = freeSolidSvgIcons.faArrowLeft;
+      break;
+    case 'arrowRight':
+      faIcon = freeSolidSvgIcons.faArrowRight;
+      break;
+    case 'squareArrowUpRight':
+      faIcon = freeSolidSvgIcons.faSquareArrowUpRight;
+      break;
+    case 'check':
+      faIcon = freeSolidSvgIcons.faCheck;
+      break;
+    case 'chevronUp':
+      faIcon = freeSolidSvgIcons.faChevronUp;
+      break;
+    case 'chevronDown':
+      faIcon = freeSolidSvgIcons.faChevronDown;
+      break;
+    case 'chevronLeft':
+      faIcon = freeSolidSvgIcons.faChevronLeft;
+      break;
+    case 'chevronRight':
+      faIcon = freeSolidSvgIcons.faChevronRight;
+      break;
+    case 'circleExclamation':
+      faIcon = freeSolidSvgIcons.faCircleExclamation;
+      break;
+    case 'circlePlus':
+      faIcon = freeSolidSvgIcons.faCirclePlus;
+      break;
+    case 'facebook':
+      faIcon = freeBrandsSvgIcons.faFacebookF;
+      break;
+    case 'twitter':
+      faIcon = freeBrandsSvgIcons.faTwitter;
+      break;
+    case 'xTwitter':
+      faIcon = freeBrandsSvgIcons.faXTwitter;
+      break;
+    case 'sms':
+      faIcon = freeSolidSvgIcons.faCommentSms;
+      break;
+    case 'envelope':
+      faIcon = freeSolidSvgIcons.faEnvelope;
+      break;
+    case 'bars':
+      faIcon = freeSolidSvgIcons.faBars;
+      break;
+    case 'spinner':
+      faIcon = freeSolidSvgIcons.faSpinner;
+      break;
+    case 'user':
+      faIcon = freeSolidSvgIcons.faUser;
+      break;
+    case 'globe':
+      faIcon = freeSolidSvgIcons.faGlobe;
+      break;
+    case 'download':
+      faIcon = freeSolidSvgIcons.faDownload;
+      break;
+    case 'xmark':
+      faIcon = freeSolidSvgIcons.faXmark;
+      break;
+    default:
+      console.warn("".concat(icon, " is not a supported icon name."));
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   }
-  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
-    ref: ref,
-    type: "button",
-    className: buttonClassNames,
-    "data-testid": "jfcl-button"
-  }, arias, props), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "jfcl-button__label"
-  }, loading && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: iconClassNames
-  }), !loading && ButtonIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: iconClassNames
-  }, /*#__PURE__*/React__default["default"].createElement(ButtonIcon, {
-    "aria-hidden": "true"
-  })) : null, !iconOnly && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "jfcl-button__text"
-  }, labelText)));
-});
-Button.displayName = 'Button';
-
-const IconLoading = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  fill: "currentcolor",
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M8.04665 0.42435V1.72792C8.04665 2.29372 7.19133 2.29372 7.19133 1.72792V0.42435C7.19133 -0.14145 8.04665 -0.14145 8.04665 0.42435ZM9.26952 1.94354L9.71551 0.718589C9.90902 0.186994 10.7127 0.479531 10.5192 1.01113L10.0734 2.23608C9.87992 2.76768 9.0762 2.47514 9.26952 1.94354ZM11.1489 2.85706L11.9868 1.8585C12.3504 1.42499 13.0056 1.97491 12.642 2.40824L11.8041 3.4068C11.4405 3.84031 10.7851 3.29039 11.1489 2.85706ZM12.6023 4.35811L13.7313 3.70633C14.2213 3.42343 14.649 4.16422 14.1589 4.44712L13.03 5.09891C12.54 5.38181 12.1123 4.64101 12.6023 4.35811ZM13.4548 6.26585L14.7385 6.03945C15.2956 5.94118 15.4442 6.78365 14.8871 6.88191L13.6034 7.10812C13.0461 7.20639 12.8975 6.36412 13.4548 6.26585ZM13.6034 8.35008L14.8871 8.57629C15.4442 8.67456 15.2956 9.51702 14.7385 9.41875L13.4548 9.19236C12.8975 9.09409 13.0461 8.25182 13.6034 8.35008ZM13.03 10.3593L14.1589 11.0111C14.649 11.294 14.2213 12.0348 13.7313 11.7519L12.6023 11.1001C12.1123 10.8172 12.54 10.0764 13.03 10.3593ZM11.8041 12.0514L12.642 13.05C13.0056 13.4833 12.3504 14.0332 11.9868 13.5997L11.1489 12.6011C10.7851 12.1678 11.4405 11.6179 11.8041 12.0514ZM10.0734 13.2221L10.5192 14.4471C10.7127 14.9787 9.90902 15.2712 9.71551 14.7396L9.26952 13.5147C9.0762 12.9831 9.87992 12.6905 10.0734 13.2221ZM8.04665 13.7303V15.0339C8.04665 15.5997 7.19133 15.5997 7.19133 15.0339V13.7303C7.19133 13.1645 8.04665 13.1645 8.04665 13.7303ZM4.71875 14.4471L5.16455 13.2221C5.35806 12.6905 6.16178 12.9831 5.96846 13.5147L5.52247 14.7396C5.32896 15.2712 4.52523 14.9787 4.71875 14.4471ZM0.350902 8.57629L1.63463 8.35008C2.19192 8.25182 2.34046 9.09409 1.78316 9.19236L0.499438 9.41875C-0.0576685 9.51702 -0.206205 8.67456 0.350902 8.57629ZM0.499438 6.03945L1.78316 6.26585C2.34046 6.36412 2.19192 7.20639 1.63463 7.10812L0.350902 6.88191C-0.206205 6.78365 -0.0576685 5.94118 0.499438 6.03945ZM1.50669 3.70633L2.63564 4.35811C3.12566 4.64101 2.69801 5.38181 2.20799 5.09891L1.07903 4.44712C0.589014 4.16422 1.01667 3.42343 1.50669 3.70633ZM3.25114 1.8585L4.08907 2.85706C4.45285 3.29039 3.79748 3.84031 3.43389 3.4068L2.59596 2.40824C2.23236 1.97491 2.88755 1.42499 3.25114 1.8585ZM5.52247 0.718589L5.96846 1.94354C6.16178 2.47514 5.35806 2.76768 5.16455 2.23608L4.71875 1.01113C4.52523 0.479531 5.32896 0.186994 5.52247 0.718589Z"
-})));
-IconLoading.displayName = 'IconLoading';
-var IconLoading$1 = IconLoading;
-
-const IconHamburger$2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "17",
-  height: "16",
-  viewBox: "0 0 17 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("g", {
-  clipPath: "url(#clip0_1296_533)"
-}, /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M13.3105 0.993011C14.4136 0.993011 15.3105 1.88989 15.3105 2.99301V12.993C15.3105 14.0961 14.4136 14.993 13.3105 14.993H3.31046C2.20733 14.993 1.31046 14.0961 1.31046 12.993V2.99301C1.31046 1.88989 2.20733 0.993011 3.31046 0.993011H13.3105ZM6.31046 4.49301C5.89483 4.49301 5.56046 4.82739 5.56046 5.24301C5.56046 5.65864 5.89483 5.99301 6.31046 5.99301H9.25108L5.02921 10.2118C4.73546 10.5055 4.73546 10.9805 5.02921 11.2711C5.32296 11.5618 5.79796 11.5649 6.08858 11.2711L10.3073 7.05239V10.243C10.3073 10.6586 10.6417 10.993 11.0573 10.993C11.473 10.993 11.8073 10.6586 11.8073 10.243V5.24301C11.8073 4.82739 11.473 4.49301 11.0573 4.49301H6.31046Z",
-  fill: "#242323"
-})), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
-  id: "clip0_1296_533"
-}, /*#__PURE__*/React__default["default"].createElement("rect", {
-  width: "14",
-  height: "16",
-  fill: "white",
-  transform: "translate(1.31046 -0.00698853)"
-})))));
-IconHamburger$2.displayName = 'IconHamburger';
-var IconHamburger$3 = IconHamburger$2;
-
-const IconLinkInternal = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "17",
-  height: "17",
-  viewBox: "0 0 17 17",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("g", {
-  clipPath: "url(#clip0_2628_44)"
-}, /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M14.9253 9.17158C15.3159 8.78095 15.3159 8.14658 14.9253 7.75595L9.92527 2.75595C9.53465 2.36533 8.90027 2.36533 8.50965 2.75595C8.11902 3.14658 8.11902 3.78095 8.50965 4.17158L11.8065 7.46533H2.21902C1.6659 7.46533 1.21902 7.9122 1.21902 8.46533C1.21902 9.01845 1.6659 9.46533 2.21902 9.46533H11.8034L8.51277 12.7591C8.12215 13.1497 8.12215 13.7841 8.51277 14.1747C8.9034 14.5653 9.53778 14.5653 9.9284 14.1747L14.9284 9.1747L14.9253 9.17158Z",
-  fill: "#242323"
-})), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
-  id: "clip0_2628_44"
-}, /*#__PURE__*/React__default["default"].createElement("rect", {
-  width: "14",
-  height: "16",
-  fill: "white",
-  transform: "translate(1.21902 0.465332)"
-})))));
-IconLinkInternal.displayName = 'IconLinkInternal';
-var IconLinkInternal$1 = IconLinkInternal;
-
-const IconCheck = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "18",
-  height: "12",
-  viewBox: "0 0 18 12",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M1.66666 6.33333L6.33332 11L16.3333 1",
-  stroke: "currentcolor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-})));
-IconCheck.displayName = 'IconCheck';
-var IconCheck$1 = IconCheck;
-
-const IconCheck2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "18",
-  height: "13",
-  viewBox: "0 0 18 13",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M1.66663 6.66671L6.33329 11.3334L16.3333 1.33337",
-  stroke: "#F4F8F4",
-  strokeWidth: "2"
-})));
-IconCheck2.displayName = 'IconCheck';
-var IconCheck2$1 = IconCheck2;
-
-const IconError = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "20",
-  height: "20",
-  viewBox: "0 0 20 20",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M10 18C5.58857 18 2 14.4113 2 10C2 5.58865 5.58865 2 10 2C14.4113 2 18 5.58865 18 10C18 14.3886 14.4113 18 10 18ZM10 3.34857C6.34278 3.34857 3.37143 6.32004 3.37143 9.97714C3.37143 13.6344 6.3429 16.6057 10 16.6057C13.6572 16.6057 16.6286 13.6342 16.6286 9.97714C16.6286 6.32004 13.6573 3.34857 10 3.34857Z",
-  fill: "currentcolor"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M9.99996 11.1657C9.61141 11.1657 9.31421 10.8685 9.31421 10.48V6.98281C9.31421 6.59426 9.6114 6.29706 9.99996 6.29706C10.3885 6.29706 10.6857 6.59425 10.6857 6.98281V10.48C10.6857 10.8687 10.3885 11.1657 9.99996 11.1657Z",
-  fill: "currentcolor"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M9.99997 13.68C9.81709 13.68 9.63422 13.6114 9.51989 13.4743C9.38277 13.3372 9.31421 13.1771 9.31421 12.9942C9.31421 12.9485 9.31421 12.9029 9.33701 12.8571C9.33701 12.8114 9.35981 12.7658 9.38277 12.72C9.40557 12.6743 9.42853 12.6514 9.45133 12.6057C9.47413 12.5599 9.49709 12.5371 9.54269 12.4914C9.79412 12.2399 10.2512 12.2399 10.5027 12.4914C10.5255 12.5142 10.5712 12.5599 10.594 12.6057C10.6168 12.6514 10.6398 12.6743 10.6626 12.72C10.6854 12.7658 10.6854 12.8114 10.7084 12.8571C10.7084 12.9029 10.7312 12.9485 10.7312 12.9942C10.7312 13.1771 10.6626 13.36 10.5255 13.4743C10.3657 13.6114 10.1829 13.68 9.99998 13.68H9.99997Z",
-  fill: "currentcolor"
-})));
-IconError.displayName = 'IconError';
-var IconError$1 = IconError;
-
-const IconChevron = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "14",
-  height: "8",
-  viewBox: "0 0 14 8",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M1 1L7 7L13 1",
-  stroke: "currentcolor"
-})));
-IconChevron.displayName = 'IconChevron';
-var IconChevron$1 = IconChevron;
-
-const IconClose = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M2 2L14 14",
-  stroke: "currentcolor",
-  strokeWidth: "2",
-  strokeLinecap: "square"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M14 2L2 14",
-  stroke: "currentcolor",
-  strokeWidth: "2",
-  strokeLinecap: "square"
-})));
-IconClose.displayName = 'IconClose';
-var IconClose$1 = IconClose;
-
-const IconGlobe = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "20",
-  height: "20",
-  viewBox: "0 0 20 20",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M10 1.2C14.8553 1.2 18.8 5.14466 18.8 10C18.8 14.8553 14.8553 18.8 10 18.8C5.14468 18.8 1.20001 14.8553 1.20001 10C1.20001 5.14466 5.14468 1.2 10 1.2ZM10.4 2.05V5.8H13.2313C13.0625 5.22735 12.8606 4.69966 12.6313 4.2375C12.013 2.99081 11.2278 2.23616 10.4 2.05ZM9.60001 2.05C8.77235 2.23613 7.98706 2.99081 7.36868 4.2375C7.13945 4.69966 6.9375 5.22735 6.76868 5.8H9.60001V2.05ZM12.3125 2.34375C12.7029 2.76725 13.0488 3.28658 13.3438 3.88125C13.6274 4.45318 13.869 5.09973 14.0625 5.79991H16.8125C15.7974 4.15565 14.2027 2.91225 12.3125 2.34358V2.34375ZM7.68751 2.34375C5.79735 2.9123 4.20268 4.15575 3.18751 5.80008H5.93751C6.131 5.09981 6.3726 4.45326 6.65626 3.88141C6.95118 3.28675 7.29708 2.76741 7.68751 2.34391V2.34375ZM17.2438 6.60008H14.2563C14.4535 7.52996 14.57 8.54175 14.5938 9.60008H17.9875C17.935 8.52996 17.6753 7.51858 17.2438 6.60008H17.2438ZM13.4375 6.60008H10.4V9.60008H13.7937C13.7683 8.53171 13.6431 7.51708 13.4374 6.60008H13.4375ZM9.60001 6.60008H6.56251C6.35685 7.51701 6.23165 8.53175 6.20626 9.60008H9.59993L9.60001 6.60008ZM5.74368 6.60008H2.75618C2.3246 7.51863 2.0649 8.52991 2.01243 9.60008H5.4061C5.42992 8.54181 5.54646 7.52991 5.7436 6.60008H5.74368ZM17.9873 10.4001H14.5937C14.5702 11.4601 14.4536 12.4699 14.2562 13.4001H17.2437C17.6738 12.4829 17.935 11.4682 17.9874 10.4001H17.9873ZM13.7937 10.4001H10.4V13.4001H13.4375C13.6432 12.4821 13.7687 11.4696 13.7938 10.4001H13.7937ZM9.60001 10.4001H6.20635C6.23141 11.4696 6.35693 12.4821 6.5626 13.4001H9.6001L9.60001 10.4001ZM5.40635 10.4001H2.01268C2.06509 11.4682 2.32628 12.4829 2.75643 13.4001H5.74393C5.5464 12.4699 5.42993 11.4601 5.40643 10.4001H5.40635ZM16.8127 14.2001H14.0627C13.8692 14.8993 13.6276 15.5406 13.3439 16.1126C13.0489 16.7072 12.7031 17.238 12.3127 17.6626C14.2028 17.094 15.7975 15.8444 16.8127 14.2001ZM13.2313 14.2001H10.4V17.9564C11.2277 17.7703 12.013 17.0093 12.6313 15.7627C12.8614 15.299 13.0621 14.7751 13.2313 14.2002V14.2001ZM9.60001 14.2001H6.76868C6.93788 14.7749 7.13866 15.2988 7.36868 15.7626C7.98698 17.0093 8.77226 17.7702 9.60001 17.9562V14.2001ZM5.93751 14.2001H3.18751C4.20261 15.8443 5.79735 17.0941 7.68751 17.6626C7.29708 17.238 6.95118 16.7072 6.65626 16.1126C6.3726 15.5406 6.13106 14.8993 5.93751 14.2001Z",
-  fill: "currentcolor"
-})));
-IconGlobe.displayName = 'IconGlobe';
-var IconGlobe$1 = IconGlobe;
-
-const IconHamburger = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "16",
-  height: "14",
-  viewBox: "0 0 16 14",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M0 1H16",
-  stroke: "currentcolor",
-  strokeWidth: "2"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M0 7H16",
-  stroke: "currentcolor",
-  strokeWidth: "2"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M0 13H16",
-  stroke: "currentcolor",
-  strokeWidth: "2"
-})));
-IconHamburger.displayName = 'IconHamburger';
-var IconHamburger$1 = IconHamburger;
-
-const IconInternet = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "20",
-  height: "20",
-  viewBox: "0 0 20 20",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM5.19705 8.25847H6.46474L7.44936 12.7631L8.11397 5.53847H9.2832L8.38474 14.4615H6.87089L5.83705 9.80924L4.8032 14.4615H3.27705L2.39089 5.53847H3.56013L4.21243 12.7631L5.19705 8.25847ZM13.523 8.25847H14.7907L15.7753 12.7631L16.4399 5.53847H17.6092L16.7107 14.4615H15.1969L14.163 9.80924L13.1292 14.4615H11.603L10.7169 5.53847H11.8861L12.5384 12.7631L13.523 8.25847Z",
-  fill: "currentcolor"
-})));
-IconInternet.displayName = 'IconInternet';
-var IconInternet$1 = IconInternet;
-
-const IconPerson = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  width: "18",
-  height: "20",
-  viewBox: "0 0 18 20",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M17.1395 18.8372C17.1395 19.476 16.6212 20 15.98 20H2.0199C1.38172 20 0.860443 19.4778 0.860443 18.8372C0.860443 14.3419 4.50463 10.6977 8.99999 10.6977C13.4953 10.6977 17.1395 14.3419 17.1395 18.8372ZM8.99991 12.093C5.35301 12.093 2.38246 14.9876 2.25959 18.6047H15.7402C15.6176 14.9876 12.6469 12.093 8.99991 12.093ZM8.99991 9.76744C6.30277 9.76744 4.11618 7.58085 4.11618 4.88372C4.11618 2.18659 6.30277 0 8.99991 0C11.697 0 13.8836 2.18659 13.8836 4.88372C13.8836 7.58085 11.697 9.76744 8.99991 9.76744ZM8.99991 8.37209C10.9265 8.37209 12.4883 6.81035 12.4883 4.88372C12.4883 2.95709 10.9265 1.39535 8.99991 1.39535C7.07328 1.39535 5.51153 2.95709 5.51153 4.88372C5.51153 6.81035 7.07328 8.37209 8.99991 8.37209Z",
-  fill: "currentcolor"
-})));
-IconPerson.displayName = 'IconPerson';
-var IconPerson$1 = IconPerson;
-
-const IconTwitter = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "17",
-  height: "16",
-  viewBox: "0 0 17 16",
-  fill: "none"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M16.3219 2.63826C15.7321 2.92194 15.0999 3.11242 14.4352 3.19888C15.1136 2.75849 15.6348 2.06142 15.8793 1.23198C15.2458 1.63859 14.5412 1.93444 13.7943 2.09385C13.1958 1.40219 12.3428 0.971252 11.3989 0.971252C9.58574 0.971252 8.11555 2.56261 8.11555 4.52681C8.11555 4.80509 8.14548 5.07662 8.2016 5.33735C5.4732 5.18875 3.05531 3.77301 1.43548 1.62103C1.15242 2.14788 0.991558 2.75849 0.991558 3.40962C0.991558 4.64298 1.57016 5.73181 2.45177 6.37078C1.91308 6.35187 1.4068 6.19111 0.964125 5.92498C0.964125 5.93984 0.964125 5.9547 0.964125 5.96956C0.964125 7.69331 2.09638 9.12931 3.5965 9.45757C3.32216 9.53863 3.03162 9.58186 2.73234 9.58186C2.52036 9.58186 2.3146 9.56024 2.11384 9.51701C2.53283 10.9287 3.74489 11.9594 5.18016 11.9878C4.05788 12.9415 2.64256 13.5089 1.10379 13.5089C0.83818 13.5089 0.577561 13.4927 0.32193 13.4589C1.77341 14.4694 3.49923 15.057 5.35349 15.057C11.3914 15.057 14.6934 9.6386 14.6934 4.94018C14.6934 4.78618 14.6896 4.63083 14.6846 4.47953C15.3256 3.97834 15.8817 3.35153 16.3219 2.63826Z",
-  fill: "currentColor"
-})));
-IconTwitter.displayName = 'IconTwitter';
-var IconTwitter$1 = IconTwitter;
-
-const IconMail = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "17",
-  height: "12",
-  viewBox: "0 0 17 12",
-  fill: "none"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M16.3219 0.206634V0.0570068H0.32193V0.147015L8.33971 6.46405L16.3219 0.206634ZM0.32193 2.69319V11.6751H16.3219V2.74792L8.9551 8.52292L8.3366 9.00778L7.71928 8.52141L0.32193 2.69319Z",
-  fill: "currentColor"
-})));
-IconMail.displayName = 'IconMail';
-var IconMail$1 = IconMail;
-
-const IconFacebook = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
-  ref: ref
-}, props, {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "21",
-  height: "20",
-  viewBox: "0 0 21 20",
-  fill: "none"
-}), /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M14.5765 7.66901H11.8795V5.90018C11.8795 5.2359 12.3198 5.08103 12.6299 5.08103C12.9393 5.08103 14.5331 5.08103 14.5331 5.08103V2.16074L11.912 2.15051C9.00226 2.15051 8.3401 4.32856 8.3401 5.72238V7.66901H6.65735V10.6782H8.3401C8.3401 14.54 8.3401 19.1932 8.3401 19.1932H11.8795C11.8795 19.1932 11.8795 14.4942 11.8795 10.6782H14.2678L14.5765 7.66901Z",
-  fill: "currentColor"
-})));
-IconFacebook.displayName = 'IconFacebook';
-var IconFacebook$1 = IconFacebook;
+  return /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: className,
+    icon: faIcon
+  });
+};
+Icon.displayName = 'Icon';
 
 const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -350,11 +119,11 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
     ref: ref,
     className: linkClassNames
-  }), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowRight,
+  }), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "arrowRight",
     className: "jfcl-link__icon"
-  }), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faSquareArrowUpRight,
+  }), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "squareArrowUpRight",
     className: "jfcl-link__icon"
   }), opensInNewTab && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "jfcl-sr-only"
@@ -383,17 +152,20 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: alertClassNames
   }, props), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "jfcl-alert__content"
-  }, type === 'error' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "jfcl-alert__icon",
+  }, type === 'error' && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "circleExclamation",
+    className: "jfcl-alert__icon jfcl-alert__icon-error",
     "data-testid": "jfcl-alert__icon"
-  }, /*#__PURE__*/React__default["default"].createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), type === 'success' && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "check",
     className: "jfcl-alert__icon",
     "data-testid": "jfcl-alert__icon"
-  }, /*#__PURE__*/React__default["default"].createElement(IconCheck$1, null)), text), showButton && /*#__PURE__*/React__default["default"].createElement("button", {
+  }), text), showButton && /*#__PURE__*/React__default["default"].createElement("button", {
     className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
     "data-testid": "jfcl-alert__btn",
     onClick: action
-  }, actionLabel || /*#__PURE__*/React__default["default"].createElement(IconClose$1, {
+  }, actionLabel || /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "xmark",
     "aria-label": "Dismiss"
   })), showLink && /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
     href: actionHref,
@@ -405,21 +177,329 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Alert.displayName = 'Alert';
 
+/**
+ * Accepts all `ButtonHTMLAttributes`
+ */
+const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    labelText,
+    variant = 'primary',
+    size = 'large',
+    loading,
+    labelIcon,
+    iconOnRight,
+    iconOnly,
+    className,
+    ...props
+  } = _ref;
+  const buttonClassNames = classNames__default["default"]('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''), className);
+  const iconClassNames = classNames__default["default"]('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
+  const arias = {};
+  if (iconOnly) {
+    arias['aria-label'] = labelText;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
+    ref: ref,
+    type: "button",
+    className: buttonClassNames,
+    "data-testid": "jfcl-button"
+  }, arias, props), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-button__label"
+  }, loading && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: iconClassNames
+  }), !loading && labelIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: iconClassNames
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: labelIcon
+  })) : null, !iconOnly && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "jfcl-button__text"
+  }, labelText)));
+});
+Button.displayName = 'Button';
+
+const HeaderLabel = _ref => {
+  let {
+    labelFor,
+    isLegend,
+    hasHelperText,
+    headerText
+  } = _ref;
+  const headerLabelClassName = classNames__default["default"]('jfcl-input-header__label', {
+    ['jfcl-input-header__label--has-helper']: hasHelperText
+  });
+  if (labelFor) {
+    return /*#__PURE__*/React__default["default"].createElement("label", {
+      htmlFor: labelFor,
+      className: headerLabelClassName,
+      "data-testid": "header-label"
+    }, headerText);
+  } else if (isLegend) {
+    return /*#__PURE__*/React__default["default"].createElement("legend", {
+      className: headerLabelClassName,
+      "data-testid": "header-legend"
+    }, headerText);
+  } else {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: headerLabelClassName,
+      "data-testid": "header-div"
+    }, headerText);
+  }
+};
+const InputHeader = _ref2 => {
+  let {
+    labelFor,
+    isLegend,
+    headerText,
+    helperText,
+    invalid,
+    invalidText
+  } = _ref2;
+  const showHeader = headerText || helperText || invalid && invalidText;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showHeader && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(HeaderLabel, {
+    labelFor: labelFor,
+    isLegend: isLegend,
+    headerText: headerText,
+    hasHelperText: !!helperText
+  }), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-input-header__helper_text",
+    "data-testid": "helper-text"
+  }, helperText), invalid && invalidText && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-input-header__invalid_text",
+    "data-testid": "error"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "circleExclamation",
+    className: "jfcl-input-header__invalid_icon"
+  }), invalidText)));
+};
+
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    className,
+    invalidText,
+    invalid,
+    headerText,
+    helperText,
+    labelText,
+    disabled,
+    id,
+    ...props
+  } = _ref;
+  const checkboxClassNames = classNames__default["default"]('jfcl-checkbox', {
+    ['jfcl-checkbox--is-disabled']: disabled
+  }, className);
+  const checkmarkClassNames = classNames__default["default"]('jfcl-checkbox__checkmark', {
+    ['jfcl-checkbox__checkmark--is-invalid']: invalid
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: checkboxClassNames,
+    "data-testid": "jfcl-checkbox"
+  }, /*#__PURE__*/React__default["default"].createElement(InputHeader, {
+    headerText: headerText,
+    helperText: helperText,
+    invalid: invalid,
+    invalidText: invalidText
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-checkbox__checkmark-label-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
+    ref: ref
+  }, props, {
+    id: id,
+    className: "jfcl-checkbox__input",
+    type: "checkbox"
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: "jfcl-checkbox__label",
+    "data-testid": "jfcl-checkbox__label"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: checkmarkClassNames,
+    "data-testid": "jfcl-checkbox__checkmark",
+    "aria-hidden": true
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "check",
+    className: "jfcl-checkbox__check_icon"
+  })), labelText)));
+});
+Checkbox.displayName = 'Checkbox';
+
+const DropdownIndicator = props => {
+  return /*#__PURE__*/React__default["default"].createElement(Select.components.DropdownIndicator, props, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: freeSolidSvgIcons.faChevronDown
+  }));
+};
+const Dropdown = _ref => {
+  let {
+    className,
+    helperText,
+    invalid,
+    invalidText,
+    disabled,
+    labelText,
+    onChange,
+    options,
+    ...props
+  } = _ref;
+  const hasOnChange = !!onChange;
+
+  // Randomly generated id
+  const instanceId = React.useId();
+
+  // format of the id on the actual <input /> element created by react-select
+  // using the instanceID prop
+  const inputId = "react-select-".concat(instanceId, "-input");
+  const dropdownClassNames = classNames__default["default"]('jfcl-dropdown', {
+    ['jfcl-dropdown--is-invalid']: invalid
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(InputHeader, {
+    headerText: labelText,
+    labelFor: inputId,
+    helperText: helperText,
+    invalid: invalid,
+    invalidText: invalidText
+  }), /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends__default["default"]({}, props, {
+    instanceId: instanceId,
+    className: dropdownClassNames,
+    classNamePrefix: "jfcl-dropdown",
+    placeholder: null,
+    isDisabled: disabled,
+    options: options
+  }, hasOnChange && {
+    onChange: onChange
+  }, {
+    components: {
+      DropdownIndicator
+    }
+  })));
+};
+Dropdown.displayName = 'Dropdown';
+
+/**
+ * Accepts all `HTMLFieldSetElement`
+ */
+const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    invalidText,
+    invalid,
+    helperText,
+    legendText,
+    ...props
+  } = _ref;
+  const fieldsetClassNames = classNames__default["default"]('jfcl-form-group', {
+    ['jfcl-form-group-is-invalid']: invalid
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("fieldset", _extends__default["default"]({
+    ref: ref
+  }, props, {
+    className: fieldsetClassNames
+  }), /*#__PURE__*/React__default["default"].createElement(InputHeader, {
+    headerText: legendText,
+    helperText: helperText,
+    invalid: invalid,
+    invalidText: invalidText,
+    isLegend: true
+  }), children);
+});
+FormGroup.displayName = 'FormGroup';
+
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    className,
+    invalidText,
+    invalid,
+    headerText,
+    helperText,
+    labelText,
+    disabled,
+    id,
+    ...props
+  } = _ref;
+  const radioButtonClassNames = classNames__default["default"]('jfcl-radio-button', {
+    ['jfcl-radio-button--is-invalid']: invalid,
+    ['jfcl-radio-button--is-disabled']: disabled
+  }, className);
+  const checkmarkClassNames = classNames__default["default"]('jfcl-radio-button__checkmark', {
+    ['jfcl-radio-button__checkmark--is-invalid']: invalid
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: radioButtonClassNames,
+    "data-testid": "jfcl-radio-button"
+  }, /*#__PURE__*/React__default["default"].createElement(InputHeader, {
+    headerText: headerText,
+    helperText: helperText,
+    invalid: invalid,
+    invalidText: invalidText
+  }), /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
+    ref: ref
+  }, props, {
+    id: id,
+    className: "jfcl-radio-button__input",
+    type: "radio"
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: "jfcl-radio-button__label",
+    "data-testid": "jfcl-radio-button__label"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: checkmarkClassNames,
+    "data-testid": "jfcl-radio-button__checkmark"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "jfcl-radio-button__checkmark-checked"
+  })), labelText));
+});
+RadioButton.displayName = 'RadioButton';
+
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    className,
+    invalidText,
+    invalid,
+    helperText,
+    labelText,
+    size,
+    id,
+    type = 'text',
+    ...props
+  } = _ref;
+  const textInputWrapperClassNames = classNames__default["default"]('jfcl-text-input', {
+    ['jfcl-text-input--is-invalid']: invalid
+  }, className);
+  const textInputClassNames = classNames__default["default"]('jfcl-text-input__input', {
+    ["jfcl-text-input--size-".concat(size)]: size
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: textInputWrapperClassNames,
+    "data-testid": "jfcl-text-input"
+  }, /*#__PURE__*/React__default["default"].createElement(InputHeader, {
+    headerText: labelText,
+    helperText: helperText,
+    invalidText: invalidText,
+    invalid: invalid,
+    labelFor: id
+  }), /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
+    ref: ref
+  }, props, {
+    id: id,
+    className: textInputClassNames,
+    type: type
+  })));
+});
+TextInput.displayName = 'TextInput';
+
 exports.Alert = Alert;
 exports.Button = Button;
-exports.IconCheck = IconCheck$1;
-exports.IconCheck2 = IconCheck2$1;
-exports.IconChevron = IconChevron$1;
-exports.IconClose = IconClose$1;
-exports.IconError = IconError$1;
-exports.IconFacebook = IconFacebook$1;
-exports.IconGlobe = IconGlobe$1;
-exports.IconHamburger = IconHamburger$1;
-exports.IconInternet = IconInternet$1;
-exports.IconLinkExternal = IconHamburger$3;
-exports.IconLinkInternal = IconLinkInternal$1;
-exports.IconLoading = IconLoading$1;
-exports.IconMail = IconMail$1;
-exports.IconPerson = IconPerson$1;
-exports.IconTwitter = IconTwitter$1;
+exports.Checkbox = Checkbox;
+exports.Dropdown = Dropdown;
+exports.FormGroup = FormGroup;
+exports.Icon = Icon;
 exports.Link = Link;
+exports.RadioButton = RadioButton;
+exports.TextInput = TextInput;