@justfixnyc/component-library 0.60.2 → 0.61.2

package/dist/src/index.js

@@ -12,6 +12,7 @@ var regular = require('@awesome.me/kit-6863e5a21e/icons/classic/regular');
 var brands = require('@awesome.me/kit-6863e5a21e/icons/classic/brands');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var custom = require('@awesome.me/kit-6863e5a21e/icons/kit/custom');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var Select = require('react-select');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,15 +21,16 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-const _excluded$9 = ["className", "icon"];
+const _excluded$h = ["className", "icon"];
 const Icon = _ref => {
   let {
       className,
       icon
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$h);
   let faIcon;
   switch (icon) {
     case 'arrowLeft':
@@ -222,14 +224,14 @@ const Icon = _ref => {
 };
 Icon.displayName = 'Icon';
 
-const _excluded$8 = ["icon", "children", "className"];
+const _excluded$g = ["icon", "children", "className"];
 const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       icon,
       children,
       className
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$g);
   const linkClassNames = classNames__default["default"]('jfcl-link', className);
   const opensInNewTab = props.target === '_blank';
   // When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
@@ -255,7 +257,7 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Link.displayName = 'Link';
 
-const _excluded$7 = ["type", "variant", "text", "action", "actionHref", "actionLabel", "className"];
+const _excluded$f = ["type", "variant", "text", "action", "actionHref", "actionLabel", "className"];
 const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       type = 'info',
@@ -266,7 +268,7 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       actionLabel,
       className
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$f);
   const alertClassNames = classNames__default["default"]('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
   const hasAction = !!action;
   const showButton = hasAction && !actionHref;
@@ -302,7 +304,35 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Alert.displayName = 'Alert';
 
-const _excluded$6 = ["labelText", "variant", "size", "loading", "labelIcon", "iconOnRight", "iconOnly", "className"];
+const _excluded$e = ["summary", "children", "open", "className", "onClick", "id"];
+const Accordion = _ref => {
+  let {
+      summary,
+      children,
+      open = false,
+      className,
+      onClick,
+      id
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$e);
+  return /*#__PURE__*/React__default["default"].createElement("details", _extends__default["default"]({
+    className: classNames__default["default"]('jfcl-accordion', className),
+    open: open,
+    onClick: onClick,
+    id: id,
+    "data-testid": "jfcl-accordion"
+  }, props), /*#__PURE__*/React__default["default"].createElement("summary", {
+    className: "jfcl-accordion__summary"
+  }, summary, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "chevronDown",
+    className: "jfcl-accordion__chevron",
+    "aria-hidden": true
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-accordion__content"
+  }, children));
+};
+
+const _excluded$d = ["labelText", "variant", "size", "loading", "labelIcon", "iconOnRight", "iconOnly", "className"];
 /**
  * Accepts all `ButtonHTMLAttributes`
  */
@@ -317,7 +347,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
       iconOnly,
       className
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$d);
   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 = {};
@@ -343,6 +373,80 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
 });
 Button.displayName = 'Button';
 
+const _excluded$c = ["labelText", "variant", "size", "className"];
+/**
+ * Use for navigation actions that should look like a button.
+ */
+const ButtonStyledLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      labelText,
+      variant = 'primary',
+      size = 'large',
+      className
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$c);
+  const linkClassNames = classNames__default["default"]('jfcl-button', 'jfcl-button-styled-link', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), className);
+  return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
+    ref: ref,
+    className: linkClassNames,
+    "data-testid": "jfcl-button-styled-link"
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "jfcl-button__label"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "jfcl-button__text"
+  }, labelText)));
+});
+ButtonStyledLink.displayName = 'ButtonStyledLink';
+
+const _excluded$b = ["children", "className", "level"];
+function isInteger(value) {
+  return Number.isInteger(value);
+}
+function isHeadingLevel(value) {
+  return [1, 2, 3, 4, 5, 6].includes(value);
+}
+const Heading = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+      children,
+      className,
+      level
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$b);
+  if (!isInteger(level)) {
+    console.error('Heading level must be integer');
+  }
+  const Tag = isHeadingLevel(level) ? "h".concat(level) : 'span';
+  const headingClassNames = classNames__default["default"]('jfcl-heading', "jfcl-heading--h".concat(level), className);
+  return /*#__PURE__*/React__default["default"].createElement(Tag, _extends__default["default"]({
+    ref: ref,
+    className: headingClassNames
+  }, props), children);
+});
+Heading.displayName = 'Heading';
+
+const _excluded$a = ["title", "children", "action", "headingLevel", "className"];
+const CalloutBox = _ref => {
+  let {
+      title,
+      children,
+      action,
+      headingLevel = 4,
+      className
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$a);
+  return /*#__PURE__*/React__default["default"].createElement("section", _extends__default["default"]({
+    className: classNames__default["default"]('jfcl-callout-box', className),
+    "data-testid": "jfcl-callout-box"
+  }, props), /*#__PURE__*/React__default["default"].createElement(Heading, {
+    level: headingLevel,
+    className: "jfcl-callout-box__header"
+  }, title), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-callout-box__content"
+  }, children), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-callout-box__action"
+  }, action));
+};
+
 const HeaderLabel = _ref => {
   let {
     labelFor,
@@ -401,7 +505,7 @@ const InputHeader = _ref2 => {
   }), invalidText)));
 };
 
-const _excluded$5 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "disabled", "id"];
+const _excluded$9 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "disabled", "id"];
 /**
  * Accepts all `InputHTMLAttributes`
  */
@@ -417,7 +521,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       disabled,
       id
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
   const checkboxClassNames = classNames__default["default"]('jfcl-checkbox', {
     ['jfcl-checkbox--is-disabled']: disabled
   }, className);
@@ -456,7 +560,9 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
 });
 Checkbox.displayName = 'Checkbox';
 
-const _excluded$4 = ["className", "helperText", "invalid", "invalidText", "invalidRole", "disabled", "labelText", "onChange", "options"];
+const _excluded$8 = ["className", "helperText", "invalid", "invalidText", "invalidRole", "disabled", "labelText", "components"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const DropdownIndicator = props => {
   return /*#__PURE__*/React__default["default"].createElement(Select.components.DropdownIndicator, props, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: solid.faChevronDown
@@ -471,47 +577,41 @@ const Dropdown = _ref => {
       invalidRole,
       disabled,
       labelText,
-      onChange,
-      options
+      components: selectComponents
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
-  const hasOnChange = !!onChange;
-
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
   // 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 mergedComponents = _objectSpread({
+    DropdownIndicator
+  }, selectComponents);
   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, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelText || helperText || invalid && invalidText ? /*#__PURE__*/React__default["default"].createElement(InputHeader, {
     headerText: labelText,
     labelFor: inputId,
     helperText: helperText,
     invalid: invalid,
     invalidText: invalidText,
     invalidRole: invalidRole
-  }), /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends__default["default"]({
+  }) : null, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends__default["default"]({
     placeholder: null
   }, props, {
     instanceId: instanceId,
     className: dropdownClassNames,
     classNamePrefix: "jfcl-dropdown",
     isDisabled: disabled,
-    options: options
-  }, hasOnChange && {
-    onChange: onChange
-  }, {
-    components: {
-      DropdownIndicator
-    }
+    components: mergedComponents
   })));
 };
 Dropdown.displayName = 'Dropdown';
 
-const _excluded$3 = ["className", "children", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "legendText"];
+const _excluded$7 = ["className", "children", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "legendText"];
 /**
  * Accepts all `HTMLFieldSetElement`
  */
@@ -526,7 +626,7 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
       helperElement,
       legendText
     } = _ref,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
   const fieldsetClassNames = classNames__default["default"]('jfcl-form-group', {
     ['jfcl-form-group-is-invalid']: invalid
   }, className);
@@ -546,6 +646,295 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
 });
 FormGroup.displayName = 'FormGroup';
 
+const _excluded$6 = ["initialAddress", "onSelect", "onChange", "onInputChange", "customGeoAutocompleteUrl", "throttleMs", "includeFullResponse", "serviceUnavailableText", "onRequestError", "noOptionsMessage", "className", "invalid", "invalidText"];
+const DEFAULT_THROTTLE_MS = 250;
+const GEO_AUTOCOMPLETE_URL = 'https://geosearch.planninglabs.nyc/v2/autocomplete';
+const toTitleCase = value => value.replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase());
+const formatGeosearchAddress = feature => {
+  const {
+    name,
+    borough,
+    postalcode
+  } = feature.properties;
+  const formattedName = toTitleCase(name !== null && name !== void 0 ? name : '');
+  const boroughName = borough !== null && borough !== void 0 ? borough : '';
+  const zipCode = postalcode !== null && postalcode !== void 0 ? postalcode : '';
+  return "".concat(formattedName, ", ").concat(boroughName, ", ").concat(zipCode).trim();
+};
+const normalizeFeature = feature => {
+  var _typedFeature$geometr, _typedFeature$geometr2, _typedFeature$geometr3, _typedFeature$propert, _typedFeature$propert2, _typedFeature$propert3, _typedFeature$propert4, _typedFeature$propert5, _typedFeature$propert6, _typedFeature$propert7, _typedFeature$propert8, _typedFeature$propert9;
+  const typedFeature = feature;
+  return {
+    type: typedFeature.type,
+    geometry: {
+      type: (_typedFeature$geometr = typedFeature.geometry) === null || _typedFeature$geometr === void 0 ? void 0 : _typedFeature$geometr.type,
+      coordinates: (_typedFeature$geometr2 = (_typedFeature$geometr3 = typedFeature.geometry) === null || _typedFeature$geometr3 === void 0 ? void 0 : _typedFeature$geometr3.coordinates) !== null && _typedFeature$geometr2 !== void 0 ? _typedFeature$geometr2 : []
+    },
+    properties: {
+      borough: (_typedFeature$propert = typedFeature.properties) === null || _typedFeature$propert === void 0 ? void 0 : _typedFeature$propert.borough,
+      borough_gid: (_typedFeature$propert2 = typedFeature.properties) === null || _typedFeature$propert2 === void 0 ? void 0 : _typedFeature$propert2.borough_gid,
+      housenumber: (_typedFeature$propert3 = typedFeature.properties) === null || _typedFeature$propert3 === void 0 ? void 0 : _typedFeature$propert3.housenumber,
+      street: (_typedFeature$propert4 = typedFeature.properties) === null || _typedFeature$propert4 === void 0 ? void 0 : _typedFeature$propert4.street,
+      name: (_typedFeature$propert5 = typedFeature.properties) === null || _typedFeature$propert5 === void 0 ? void 0 : _typedFeature$propert5.name,
+      label: (_typedFeature$propert6 = typedFeature.properties) === null || _typedFeature$propert6 === void 0 ? void 0 : _typedFeature$propert6.label,
+      addendum: {
+        pad: {
+          bbl: (_typedFeature$propert7 = typedFeature.properties) === null || _typedFeature$propert7 === void 0 || (_typedFeature$propert7 = _typedFeature$propert7.addendum) === null || _typedFeature$propert7 === void 0 || (_typedFeature$propert7 = _typedFeature$propert7.pad) === null || _typedFeature$propert7 === void 0 ? void 0 : _typedFeature$propert7.bbl,
+          bin: (_typedFeature$propert8 = typedFeature.properties) === null || _typedFeature$propert8 === void 0 || (_typedFeature$propert8 = _typedFeature$propert8.addendum) === null || _typedFeature$propert8 === void 0 || (_typedFeature$propert8 = _typedFeature$propert8.pad) === null || _typedFeature$propert8 === void 0 ? void 0 : _typedFeature$propert8.bin
+        }
+      },
+      postalcode: (_typedFeature$propert9 = typedFeature.properties) === null || _typedFeature$propert9 === void 0 ? void 0 : _typedFeature$propert9.postalcode
+    }
+  };
+};
+const normalizeResults = (rawResults, queryText) => {
+  var _typedResults$query$t, _typedResults$query, _typedResults$feature;
+  const typedResults = rawResults;
+  return {
+    bbox: typedResults.bbox,
+    query: {
+      text: (_typedResults$query$t = (_typedResults$query = typedResults.query) === null || _typedResults$query === void 0 ? void 0 : _typedResults$query.text) !== null && _typedResults$query$t !== void 0 ? _typedResults$query$t : queryText
+    },
+    features: ((_typedResults$feature = typedResults.features) !== null && _typedResults$feature !== void 0 ? _typedResults$feature : []).map(feature => normalizeFeature(feature))
+  };
+};
+const GeoSearchDropdown = _ref => {
+  let {
+      initialAddress,
+      onSelect,
+      onChange,
+      onInputChange,
+      customGeoAutocompleteUrl,
+      throttleMs,
+      includeFullResponse = false,
+      serviceUnavailableText,
+      onRequestError,
+      noOptionsMessage,
+      className,
+      invalid,
+      invalidText
+    } = _ref,
+    dropdownProps = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+  const [response, setResponse] = React.useState(null);
+  const [fullResponse, setFullResponse] = React.useState(null);
+  const [options, setOptions] = React.useState([]);
+  const [selectedValue, setSelectedValue] = React.useState(null);
+  const [isServiceUnavailable, setIsServiceUnavailable] = React.useState(false);
+  const requestIdRef = React.useRef(0);
+  const timerRef = React.useRef(null);
+  const abortRef = React.useRef(null);
+  const clearPendingRequests = React.useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+  }, []);
+  const runSearch = React.useCallback(value => {
+    requestIdRef.current += 1;
+    const requestId = requestIdRef.current;
+    clearPendingRequests();
+    if (!value.trim()) {
+      setIsServiceUnavailable(false);
+      setResponse(null);
+      setFullResponse(null);
+      setOptions([]);
+      return;
+    }
+    timerRef.current = setTimeout(async () => {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const endpoint = customGeoAutocompleteUrl || GEO_AUTOCOMPLETE_URL;
+        const result = await fetch("".concat(endpoint, "?text=").concat(encodeURIComponent(value)), {
+          signal: controller.signal
+        });
+        if (result.status !== 200) {
+          const requestError = new Error("Received HTTP ".concat(result.status));
+          requestError.status = result.status;
+          throw requestError;
+        }
+        const rawJson = await result.json();
+        const json = normalizeResults(rawJson, value);
+        if (requestIdRef.current !== requestId) {
+          return;
+        }
+        setIsServiceUnavailable(false);
+        setResponse(json);
+        setFullResponse(rawJson);
+        setOptions(json.features.map(feature => {
+          const label = formatGeosearchAddress(feature);
+          return {
+            value: label,
+            label,
+            feature
+          };
+        }));
+      } catch (error) {
+        const requestError = error;
+        if (requestError.name === 'AbortError') {
+          return;
+        }
+        if (requestIdRef.current !== requestId) {
+          return;
+        }
+        const requestIsServiceUnavailable = requestError.status === 503;
+        setIsServiceUnavailable(requestIsServiceUnavailable);
+        if (requestIsServiceUnavailable) {
+          setResponse(null);
+          setFullResponse(null);
+          setOptions([]);
+        }
+        onRequestError === null || onRequestError === void 0 || onRequestError(requestError);
+      }
+    }, throttleMs !== null && throttleMs !== void 0 ? throttleMs : DEFAULT_THROTTLE_MS);
+  }, [clearPendingRequests, customGeoAutocompleteUrl, onRequestError, throttleMs]);
+  React.useEffect(() => {
+    if (initialAddress) {
+      const addressValue = toTitleCase(initialAddress);
+      setSelectedValue({
+        value: addressValue,
+        label: addressValue
+      });
+      runSearch(addressValue);
+    }
+  }, [initialAddress, runSearch]);
+  React.useEffect(() => {
+    return () => {
+      clearPendingRequests();
+    };
+  }, [clearPendingRequests]);
+  const showServiceUnavailableState = isServiceUnavailable && !!serviceUnavailableText;
+  const effectiveInvalid = !!invalid || showServiceUnavailableState;
+  const effectiveInvalidText = showServiceUnavailableState ? serviceUnavailableText : invalidText;
+  return /*#__PURE__*/React__default["default"].createElement(Dropdown, _extends__default["default"]({}, dropdownProps, {
+    className: "jfcl-geosearch-dropdown ".concat(className !== null && className !== void 0 ? className : '').trim(),
+    invalid: effectiveInvalid,
+    invalidText: effectiveInvalidText,
+    options: options,
+    value: selectedValue,
+    filterOption: null,
+    escapeClearsValue: false,
+    noOptionsMessage: noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : () => 'Enter an address to get started',
+    onInputChange: (value, meta) => {
+      runSearch(value);
+      return onInputChange ? onInputChange(value, meta) : value;
+    },
+    onChange: (newValue, actionMeta) => {
+      setSelectedValue(newValue);
+      onChange === null || onChange === void 0 || onChange(newValue, actionMeta);
+      if (!newValue || !newValue.feature) {
+        onSelect === null || onSelect === void 0 || onSelect(null);
+        return;
+      }
+      onSelect === null || onSelect === void 0 || onSelect({
+        option: newValue,
+        feature: newValue.feature,
+        response,
+        fullResponse: includeFullResponse ? fullResponse : undefined
+      });
+    }
+  }));
+};
+GeoSearchDropdown.displayName = 'GeoSearchDropdown';
+
+const _excluded$5 = ["children", "color", "role", "className"];
+const InfoBox = _ref => {
+  let {
+      children,
+      color = 'white',
+      role,
+      className
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    className: classNames__default["default"]('jfcl-info-box', "jfcl-info-box--".concat(color), className),
+    role: role,
+    "data-testid": "jfcl-info-box"
+  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-info-box__icon-container"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: color === 'orange' ? 'circleExclamation' : 'circleInfo',
+    "aria-hidden": true
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-info-box__content-container"
+  }, children));
+};
+
+const _excluded$4 = ["icon", "children", "className", "type"];
+/**
+ * Use for in-page actions that should look like a text link.
+ */
+const LinkStyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      icon,
+      children,
+      className,
+      type = 'button'
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+  const buttonClassNames = classNames__default["default"]('jfcl-link', 'jfcl-link-styled-button', className);
+  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({}, props, {
+    ref: ref,
+    type: type,
+    className: buttonClassNames,
+    "data-testid": "jfcl-link-styled-button"
+  }), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "arrowRight",
+    className: "jfcl-link__icon"
+  }), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "squareArrowUpRight",
+    className: "jfcl-link__icon"
+  }));
+});
+LinkStyledButton.displayName = 'LinkStyledButton';
+
+const Notice = _ref => {
+  let {
+    icon,
+    color,
+    header,
+    headingLevel,
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]('jfcl-notice', color && "jfcl-notice--".concat(color), className),
+    "data-testid": "jfcl-notice"
+  }, icon && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-notice__icon-container"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    "aria-hidden": true
+  })), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "jfcl-notice__content-container"
+  }, header && /*#__PURE__*/React__default["default"].createElement(Heading, {
+    level: headingLevel,
+    className: "jfcl-notice__header"
+  }, header), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "jfcl-notice__body"
+  }, children)));
+};
+
+const _excluded$3 = ["color", "children", "className", "circle"];
+const Pill = _ref => {
+  let {
+      color,
+      children,
+      className,
+      circle = false
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
+  const pillClassNames = classNames__default["default"]('jfcl-pill', "jfcl-pill--".concat(color), circle && 'jfcl-pill--circle', className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
+    className: pillClassNames,
+    "data-testid": "jfcl-pill"
+  }, props), children);
+};
+
 const _excluded$2 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "labelElement", "disabled", "id"];
 /**
  * Accepts all `InputHTMLAttributes`
@@ -684,13 +1073,22 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
 });
 TextInput.displayName = 'TextInput';
 
+exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Button = Button;
+exports.ButtonStyledLink = ButtonStyledLink;
+exports.CalloutBox = CalloutBox;
 exports.Checkbox = Checkbox;
 exports.Dropdown = Dropdown;
 exports.FormGroup = FormGroup;
+exports.GeoSearchDropdown = GeoSearchDropdown;
+exports.Heading = Heading;
 exports.Icon = Icon;
+exports.InfoBox = InfoBox;
 exports.Link = Link;
+exports.LinkStyledButton = LinkStyledButton;
+exports.Notice = Notice;
+exports.Pill = Pill;
 exports.RadioButton = RadioButton;
 exports.SelectButton = SelectButton;
 exports.TextInput = TextInput;

package/dist/typings/Components/Accordion/Accordion.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './styles.scss';
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDetailsElement>, 'children' | 'onClick'> {
+    summary: React.ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLDetailsElement>;
+    id?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;

package/dist/typings/Components/ButtonStyledLink/ButtonStyledLink.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './styles.scss';
+export interface ButtonStyledLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Text shown inside the button-styled link.
+     */
+    labelText: string;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'large';
+    className?: string;
+}
+/**
+ * Use for navigation actions that should look like a button.
+ */
+export declare const ButtonStyledLink: React.ForwardRefExoticComponent<ButtonStyledLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/typings/Components/CalloutBox/CalloutBox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './styles.scss';
+export interface CalloutBoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    action?: React.ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export declare const CalloutBox: React.FC<CalloutBoxProps>;

package/dist/typings/Components/Dropdown/Dropdown.d.ts

@@ -1,18 +1,23 @@
 import React from 'react';
+import { GroupBase, Props as SelectProps } from 'react-select';
 import './styles.scss';
-export interface DropdownProps {
-    onChange?: () => void;
+export type DropdownOption = {
+    value: string;
+    label: string;
+    isDisabled?: boolean;
+};
+type DropdownBaseProps = {
     className?: string;
-    options: {
-        value: string;
-        label: string;
-        isDisabled?: boolean;
-    }[];
-    labelText: React.ReactNode;
+    labelText?: React.ReactNode;
     helperText?: string;
     invalidText?: string;
     invalidRole?: string;
     invalid?: boolean;
     disabled?: boolean;
-}
-export declare const Dropdown: React.FC<DropdownProps>;
+};
+export type DropdownProps<Option = DropdownOption, Group extends GroupBase<Option> = GroupBase<Option>> = Omit<SelectProps<Option, false, Group>, 'className' | 'classNamePrefix' | 'isDisabled'> & DropdownBaseProps;
+export declare const Dropdown: {
+    <Option, Group extends GroupBase<Option> = GroupBase<Option>>({ className, helperText, invalid, invalidText, invalidRole, disabled, labelText, components: selectComponents, ...props }: DropdownProps<Option, Group>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};