@justfixnyc/component-library 0.60.1 → 0.61.2

package/dist/src/index.es.js

@@ -1,22 +1,23 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import React, { forwardRef, useId } from 'react';
+import React, { forwardRef, useId, useState, useRef, useCallback, useEffect } from 'react';
 import { faShieldCheck, faCalculatorSimple, faPlus, faBan, faXmark, faDownload as faDownload$1, faBuildingColumns, faAddressCard, faBuilding, faMapLocationDot, faMemoPad, faLocationDot, faHouse, faGlobe, faUser, faSpinner, faBars, faMailboxOpenLetter as faMailboxOpenLetter$1, faEnvelope as faEnvelope$2, faCommentSms, faCopy, faCirclePlus, faCircleInfo, faCircleExclamation as faCircleExclamation$1, faChevronRight, faChevronLeft, faChevronDown, faChevronUp, faCheckDouble, faCheck, faCaretDown, faCaretRight, faBookmark as faBookmark$1, faSquareArrowUpRight, faArrowsRotateReverse, faArrowDownWideShort, faArrowUpShortWide, faArrowUpArrowDown, faArrowDownLong, faArrowUpLong, faArrowDown, faArrowUpRight, faArrowUp, faArrowRight, faArrowLeft } from '@awesome.me/kit-6863e5a21e/icons/classic/solid';
 import { faMailboxOpenLetter, faPaperPlane, faEnvelopeCircleCheck, faEnvelope } from '@awesome.me/kit-6863e5a21e/icons/classic/light';
 import { faPrint, faEyeSlash, faEye, faDownload, faEnvelope as faEnvelope$1, faCircleExclamation, faBookmark } from '@awesome.me/kit-6863e5a21e/icons/classic/regular';
 import { faXTwitter, faTwitter, faFacebookF } from '@awesome.me/kit-6863e5a21e/icons/classic/brands';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEnvelopeCircleExclamationLight } from '@awesome.me/kit-6863e5a21e/icons/kit/custom';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import Select, { components } from 'react-select';
 
-const _excluded$9 = ["className", "icon"];
+const _excluded$h = ["className", "icon"];
 const Icon = _ref => {
   let {
       className,
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   let faIcon;
   switch (icon) {
     case 'arrowLeft':
@@ -210,14 +211,14 @@ const Icon = _ref => {
 };
 Icon.displayName = 'Icon';
 
-const _excluded$8 = ["icon", "children", "className"];
+const _excluded$g = ["icon", "children", "className"];
 const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       icon,
       children,
       className
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   const linkClassNames = classNames('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.
@@ -243,7 +244,7 @@ const Link = /*#__PURE__*/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__*/forwardRef((_ref, ref) => {
   let {
       type = 'info',
@@ -254,7 +255,7 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
       actionLabel,
       className
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   const alertClassNames = classNames('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
   const hasAction = !!action;
   const showButton = hasAction && !actionHref;
@@ -290,7 +291,35 @@ const Alert = /*#__PURE__*/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(_ref, _excluded$e);
+  return /*#__PURE__*/React.createElement("details", _extends({
+    className: classNames('jfcl-accordion', className),
+    open: open,
+    onClick: onClick,
+    id: id,
+    "data-testid": "jfcl-accordion"
+  }, props), /*#__PURE__*/React.createElement("summary", {
+    className: "jfcl-accordion__summary"
+  }, summary, /*#__PURE__*/React.createElement(Icon, {
+    icon: "chevronDown",
+    className: "jfcl-accordion__chevron",
+    "aria-hidden": true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "jfcl-accordion__content"
+  }, children));
+};
+
+const _excluded$d = ["labelText", "variant", "size", "loading", "labelIcon", "iconOnRight", "iconOnly", "className"];
 /**
  * Accepts all `ButtonHTMLAttributes`
  */
@@ -305,7 +334,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       iconOnly,
       className
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   const buttonClassNames = classNames('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('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
   const arias = {};
@@ -331,6 +360,80 @@ const Button = /*#__PURE__*/React.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__*/forwardRef((_ref, ref) => {
+  let {
+      labelText,
+      variant = 'primary',
+      size = 'large',
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  const linkClassNames = classNames('jfcl-button', 'jfcl-button-styled-link', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), className);
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    ref: ref,
+    className: linkClassNames,
+    "data-testid": "jfcl-button-styled-link"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "jfcl-button__label"
+  }, /*#__PURE__*/React.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.forwardRef((_ref, ref) => {
+  let {
+      children,
+      className,
+      level
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$b);
+  if (!isInteger(level)) {
+    console.error('Heading level must be integer');
+  }
+  const Tag = isHeadingLevel(level) ? "h".concat(level) : 'span';
+  const headingClassNames = classNames('jfcl-heading', "jfcl-heading--h".concat(level), className);
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    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(_ref, _excluded$a);
+  return /*#__PURE__*/React.createElement("section", _extends({
+    className: classNames('jfcl-callout-box', className),
+    "data-testid": "jfcl-callout-box"
+  }, props), /*#__PURE__*/React.createElement(Heading, {
+    level: headingLevel,
+    className: "jfcl-callout-box__header"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "jfcl-callout-box__content"
+  }, children), action && /*#__PURE__*/React.createElement("div", {
+    className: "jfcl-callout-box__action"
+  }, action));
+};
+
 const HeaderLabel = _ref => {
   let {
     labelFor,
@@ -389,7 +492,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`
  */
@@ -405,7 +508,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disabled,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   const checkboxClassNames = classNames('jfcl-checkbox', {
     ['jfcl-checkbox--is-disabled']: disabled
   }, className);
@@ -444,7 +547,9 @@ const Checkbox = /*#__PURE__*/React.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(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.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faChevronDown
@@ -459,47 +564,41 @@ const Dropdown = _ref => {
       invalidRole,
       disabled,
       labelText,
-      onChange,
-      options
+      components: selectComponents
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  const hasOnChange = !!onChange;
-
+    props = _objectWithoutProperties(_ref, _excluded$8);
   // Randomly generated id
   const instanceId = 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('jfcl-dropdown', {
     ['jfcl-dropdown--is-invalid']: invalid
   }, className);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputHeader, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, labelText || helperText || invalid && invalidText ? /*#__PURE__*/React.createElement(InputHeader, {
     headerText: labelText,
     labelFor: inputId,
     helperText: helperText,
     invalid: invalid,
     invalidText: invalidText,
     invalidRole: invalidRole
-  }), /*#__PURE__*/React.createElement(Select, _extends({
+  }) : null, /*#__PURE__*/React.createElement(Select, _extends({
     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`
  */
@@ -514,7 +613,7 @@ const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       helperElement,
       legendText
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   const fieldsetClassNames = classNames('jfcl-form-group', {
     ['jfcl-form-group-is-invalid']: invalid
   }, className);
@@ -534,6 +633,295 @@ const FormGroup = /*#__PURE__*/React.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(_ref, _excluded$6);
+  const [response, setResponse] = useState(null);
+  const [fullResponse, setFullResponse] = useState(null);
+  const [options, setOptions] = useState([]);
+  const [selectedValue, setSelectedValue] = useState(null);
+  const [isServiceUnavailable, setIsServiceUnavailable] = useState(false);
+  const requestIdRef = useRef(0);
+  const timerRef = useRef(null);
+  const abortRef = useRef(null);
+  const clearPendingRequests = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+  }, []);
+  const runSearch = 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]);
+  useEffect(() => {
+    if (initialAddress) {
+      const addressValue = toTitleCase(initialAddress);
+      setSelectedValue({
+        value: addressValue,
+        label: addressValue
+      });
+      runSearch(addressValue);
+    }
+  }, [initialAddress, runSearch]);
+  useEffect(() => {
+    return () => {
+      clearPendingRequests();
+    };
+  }, [clearPendingRequests]);
+  const showServiceUnavailableState = isServiceUnavailable && !!serviceUnavailableText;
+  const effectiveInvalid = !!invalid || showServiceUnavailableState;
+  const effectiveInvalidText = showServiceUnavailableState ? serviceUnavailableText : invalidText;
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({}, 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(_ref, _excluded$5);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('jfcl-info-box', "jfcl-info-box--".concat(color), className),
+    role: role,
+    "data-testid": "jfcl-info-box"
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "jfcl-info-box__icon-container"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: color === 'orange' ? 'circleExclamation' : 'circleInfo',
+    "aria-hidden": true
+  })), /*#__PURE__*/React.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__*/forwardRef((_ref, ref) => {
+  let {
+      icon,
+      children,
+      className,
+      type = 'button'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  const buttonClassNames = classNames('jfcl-link', 'jfcl-link-styled-button', className);
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+    ref: ref,
+    type: type,
+    className: buttonClassNames,
+    "data-testid": "jfcl-link-styled-button"
+  }), children, icon === 'internal' && /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrowRight",
+    className: "jfcl-link__icon"
+  }), icon === 'external' && /*#__PURE__*/React.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.createElement("div", {
+    className: classNames('jfcl-notice', color && "jfcl-notice--".concat(color), className),
+    "data-testid": "jfcl-notice"
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: "jfcl-notice__icon-container"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    "aria-hidden": true
+  })), /*#__PURE__*/React.createElement("section", {
+    className: "jfcl-notice__content-container"
+  }, header && /*#__PURE__*/React.createElement(Heading, {
+    level: headingLevel,
+    className: "jfcl-notice__header"
+  }, header), /*#__PURE__*/React.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(_ref, _excluded$3);
+  const pillClassNames = classNames('jfcl-pill', "jfcl-pill--".concat(color), circle && 'jfcl-pill--circle', className);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: pillClassNames,
+    "data-testid": "jfcl-pill"
+  }, props), children);
+};
+
 const _excluded$2 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "labelElement", "disabled", "id"];
 /**
  * Accepts all `InputHTMLAttributes`
@@ -672,4 +1060,4 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 TextInput.displayName = 'TextInput';
 
-export { Alert, Button, Checkbox, Dropdown, FormGroup, Icon, Link, RadioButton, SelectButton, TextInput };
+export { Accordion, Alert, Button, ButtonStyledLink, CalloutBox, Checkbox, Dropdown, FormGroup, GeoSearchDropdown, Heading, Icon, InfoBox, Link, LinkStyledButton, Notice, Pill, RadioButton, SelectButton, TextInput };