@drivy/cobalt 0.16.1 → 0.18.0

package/components/Form/Autocomplete/index.js

@@ -1,4 +1,3 @@
-import { __rest, __read, __assign } from '../../../_virtual/_tslib.js';
 import React, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import { Combobox, ComboboxPopover, ComboboxList, ComboboxOption, ComboboxOptionText, ComboboxInput } from '@reach/combobox';
@@ -7,10 +6,10 @@ import { withFieldLabelAndHint } from '../field.js';
 import { TextInputWrapper } from '../TextInput.js';
 
 function filterMatchingItems(items, term, minLength, valueKey) {
-    var _a = __read(useState([]), 2), matchingItems = _a[0], setMatchingItems = _a[1];
-    useEffect(function () {
+    const [matchingItems, setMatchingItems] = useState([]);
+    useEffect(() => {
         term.length >= minLength
-            ? setMatchingItems(items.filter(function (item) {
+            ? setMatchingItems(items.filter((item) => {
                 return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1;
             }))
             : setMatchingItems([]);
@@ -18,44 +17,40 @@ function filterMatchingItems(items, term, minLength, valueKey) {
     return matchingItems;
 }
 function sanitizeItems(items, valueKey) {
-    var _a = __read(useState([]), 2), sanitizedItems = _a[0], setSanitizedItems = _a[1];
-    useEffect(function () {
-        setSanitizedItems(items.map(function (item) {
-            var _a;
-            return typeof item === "string" ? (_a = {}, _a[valueKey] = item, _a) : item;
-        }));
+    const [sanitizedItems, setSanitizedItems] = useState([]);
+    useEffect(() => {
+        setSanitizedItems(items.map((item) => typeof item === "string" ? { [valueKey]: item } : item));
     }, [items]);
     return sanitizedItems;
 }
-function Autocomplete(_a) {
-    var id = _a.id, icon = _a.icon, status = _a.status, items = _a.items, selectedItem = _a.selectedItem, _b = _a.autoFilter, autoFilter = _b === void 0 ? true : _b, _c = _a.minQueryLength, minQueryLength = _c === void 0 ? 1 : _c, _d = _a.focusOnInit, focusOnInit = _d === void 0 ? false : _d, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, onQueryChange = _a.onQueryChange, onSelectItem = _a.onSelectItem, renderItem = _a.renderItem, inputRef = _a.inputRef, autocompleteRef = _a.autocompleteRef, _e = _a.valueKey, valueKey = _e === void 0 ? "value" : _e, inputProps = __rest(_a, ["id", "icon", "status", "items", "selectedItem", "autoFilter", "minQueryLength", "focusOnInit", "onKeyDown", "onFocus", "onBlur", "onQueryChange", "onSelectItem", "renderItem", "inputRef", "autocompleteRef", "valueKey"]);
-    var _f = __read(useState(""), 2), term = _f[0], setTerm = _f[1];
-    var _g = __read(useState(false), 2), hasFocus = _g[0], setHasFocus = _g[1];
-    var ignoreFocus = false; // extra flag to ignore programmatical focus triggered by click on item
-    var results = autoFilter
+function Autocomplete({ id, icon, status, items, selectedItem, autoFilter = true, minQueryLength = 1, focusOnInit = false, onKeyDown, onFocus, onBlur, onQueryChange, onSelectItem, renderItem, inputRef, autocompleteRef, valueKey = "value", ...inputProps }) {
+    const [term, setTerm] = useState("");
+    const [hasFocus, setHasFocus] = useState(false);
+    let ignoreFocus = false; // extra flag to ignore programmatical focus triggered by click on item
+    const results = autoFilter
         ? filterMatchingItems(sanitizeItems(items, valueKey), term, minQueryLength, valueKey)
         : sanitizeItems(items, valueKey);
-    var comboboxEl = autocompleteRef || useRef(null);
-    var inputEl = inputRef || useRef(null);
-    var popoverEl = useRef(null);
-    var giveInputFocus = function () {
+    const comboboxEl = autocompleteRef || useRef(null);
+    const inputEl = inputRef || useRef(null);
+    const popoverEl = useRef(null);
+    const giveInputFocus = () => {
         inputEl.current && inputEl.current.focus();
     };
-    var isMounted = useRef(true);
-    var forceIdTimer = useRef();
-    var focusTimer = useRef();
-    var blurTimer = useRef();
-    var clearInputTimer = useRef();
+    const isMounted = useRef(true);
+    const forceIdTimer = useRef();
+    const focusTimer = useRef();
+    const blurTimer = useRef();
+    const clearInputTimer = useRef();
     function forceId() {
         // id is overriden by Reach ui Combobox
-        forceIdTimer.current = setTimeout(function () {
+        forceIdTimer.current = setTimeout(() => {
             id && inputEl.current && inputEl.current.setAttribute("id", id);
         });
     }
-    useEffect(function () {
+    useEffect(() => {
         // on mount ...
         focusOnInit && giveInputFocus();
-        return function () {
+        return () => {
             isMounted.current = false;
             forceIdTimer.current && clearTimeout(forceIdTimer.current);
             focusTimer.current && clearTimeout(focusTimer.current);
@@ -63,43 +58,43 @@ function Autocomplete(_a) {
             clearInputTimer.current && clearTimeout(clearInputTimer.current);
         };
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         forceId();
     }, [id]);
-    useEffect(function () {
+    useEffect(() => {
         setTerm(selectedItem ? "" + selectedItem[valueKey] : "");
     }, [selectedItem]);
-    var handleFocus = function (event) {
+    const handleFocus = (event) => {
         !ignoreFocus && onFocus && onFocus(event);
         ignoreFocus = false;
-        focusTimer.current = setTimeout(function () {
+        focusTimer.current = setTimeout(() => {
             // required by "forceDisplayResults" mechanism
             isMounted.current && setHasFocus(true);
         }, 100);
     };
-    var handleBlur = function (event) {
+    const handleBlur = (event) => {
         // blur interceptor required by "forceDisplayResults" mechanism
         onBlur && onBlur(event);
-        blurTimer.current = setTimeout(function () {
+        blurTimer.current = setTimeout(() => {
             isMounted.current && setHasFocus(false);
         }, 100);
     };
-    var handleChange = function (event) {
-        var inputValue = event.target.value;
+    const handleChange = (event) => {
+        const inputValue = event.target.value;
         if (inputValue.trim().length || term.length) {
             // to prevent starting with a space character
             setTerm(inputValue);
             onQueryChange && onQueryChange(inputValue);
         }
     };
-    var handleClearInput = function () {
+    const handleClearInput = () => {
         setTerm("");
         onQueryChange && onQueryChange("");
         clearInputTimer.current = setTimeout(giveInputFocus); //timeout to trigger openOnFocus
     };
-    var handleSelectItem = function (item, e) {
+    const handleSelectItem = (item, e) => {
         // item click interceptor to enable custom select cancellation
-        var processSelection = onSelectItem
+        const processSelection = onSelectItem
             ? onSelectItem(item, term) !== false
             : true;
         if (processSelection) {
@@ -111,17 +106,17 @@ function Autocomplete(_a) {
             giveInputFocus();
         }
     };
-    var handleKeyDown = function (e) {
+    const handleKeyDown = (e) => {
         onKeyDown && onKeyDown(e);
         // ENTER key down interceptor to enable custom select cancellation
-        var KEY_CODE_ENTER = 13;
+        const KEY_CODE_ENTER = 13;
         // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)
-        var KEY_CODE_BACKSPACE = 8;
+        const KEY_CODE_BACKSPACE = 8;
         if (e.keyCode === KEY_CODE_ENTER) {
             if (!popoverEl.current)
                 return;
-            var options = Array.from(popoverEl.current.querySelectorAll("[data-reach-combobox-option]"));
-            var selectedItemIndex = options.findIndex(function (el) { return el.getAttribute("aria-selected") === "true"; });
+            const options = Array.from(popoverEl.current.querySelectorAll("[data-reach-combobox-option]"));
+            const selectedItemIndex = options.findIndex((el) => el.getAttribute("aria-selected") === "true");
             selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e);
         }
         else if (e.keyCode === KEY_CODE_BACKSPACE) {
@@ -132,10 +127,10 @@ function Autocomplete(_a) {
             }
         }
     };
-    var shouldDisplayItemsOnEmptyQuery = function () {
+    const shouldDisplayItemsOnEmptyQuery = () => {
         return !autoFilter && results.length > 0 && term.length === 0 && hasFocus;
     };
-    var handleMouseDown = function (item, e) {
+    const handleMouseDown = (item, e) => {
         // In a specific case, we force the popover to display (results available, empty input using backspace)
         // But doing so, reach ui component is not ready for this case and will raise an error
         // We need to prevent the error and to force the selection
@@ -150,23 +145,23 @@ function Autocomplete(_a) {
             "cobalt-Autocomplete--forceDisplayResults": shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.
         }), as: "div", openOnFocus: true, ref: comboboxEl },
         results.length > 0 && (React.createElement(ComboboxPopover, { className: "cobalt-Autocomplete__popover", portal: false, ref: popoverEl },
-            React.createElement(ComboboxList, { className: "cobalt-Autocomplete__list", "aria-label": "Autocomplete option" }, results.map(function (item, index) { return (React.createElement(ComboboxOption, { className: "cobalt-Autocomplete__item", key: index, value: item[valueKey], onMouseDown: function (e) {
+            React.createElement(ComboboxList, { className: "cobalt-Autocomplete__list", "aria-label": "Autocomplete option" }, results.map((item, index) => (React.createElement(ComboboxOption, { className: "cobalt-Autocomplete__item", key: index, value: item[valueKey], onMouseDown: (e) => {
                     handleMouseDown(item, e);
-                }, onClick: function (e) {
+                }, onClick: (e) => {
                     handleSelectItem(item, e);
                 } }, renderItem ? (renderItem(item, term)) : (React.createElement("span", { className: "cobalt-Autocomplete__item-wrapper" },
                 icon && (React.createElement("span", { className: "cobalt-Autocomplete__item-icon" },
                     React.createElement(Icon, { source: icon, color: "indigo" }))),
                 React.createElement("span", { className: "cobalt-Autocomplete__item-value" },
-                    React.createElement(ComboboxOptionText, null)))))); })))),
+                    React.createElement(ComboboxOptionText, null)))))))))),
         React.createElement("div", { className: "cobalt-Autocomplete__input-wrapper" },
-            React.createElement(TextInputWrapper, { icon: icon, status: status, render: function (className) {
-                    return (React.createElement(ComboboxInput, __assign({}, inputProps, { autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": "autocomplete input", type: "text", value: term, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: inputEl, className: className })));
+            React.createElement(TextInputWrapper, { icon: icon, status: status, render: (className) => {
+                    return (React.createElement(ComboboxInput, { ...inputProps, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": "autocomplete input", type: "text", value: term, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: inputEl, className: className }));
                 } }),
             term && (React.createElement("div", { className: "cobalt-Autocomplete__clear-button", role: "clear", onClick: handleClearInput },
                 React.createElement(Icon, { source: "close", size: 16 }))))));
 }
-var wrappedComponent = withFieldLabelAndHint(Autocomplete);
+const wrappedComponent = withFieldLabelAndHint(Autocomplete);
 wrappedComponent.displayName = "Autocomplete";
 
 export { wrappedComponent as Autocomplete };

package/components/Form/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  const isMounted = useRef(true)\n  const forceIdTimer = useRef<any>()\n  const focusTimer = useRef<any>()\n  const blurTimer = useRef<any>()\n  const clearInputTimer = useRef<any>()\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    forceIdTimer.current = setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n\n    return () => {\n      isMounted.current = false\n      forceIdTimer.current && clearTimeout(forceIdTimer.current)\n      focusTimer.current && clearTimeout(focusTimer.current)\n      blurTimer.current && clearTimeout(blurTimer.current)\n      clearInputTimer.current && clearTimeout(clearInputTimer.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    focusTimer.current = setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      isMounted.current && setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    blurTimer.current = setTimeout(() => {\n      isMounted.current && setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    clearInputTimer.current = setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"indigo\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            role=\"clear\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":";;;;;;;;AAkDA,SAAS,mBAAmB,CAC1B,KAAyB,EACzB,IAAY,EACZ,SAAiB,EACjB,QAAgB,EAAA;AAEV,IAAA,IAAA,EAAA,GAAA,MAAA,CAAoC,QAAQ,CAAqB,EAAE,CAAC,EAAA,CAAA,CAAA,EAAnE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,gBAAgB,QAAoC,CAAA;AAE1E,IAAA,SAAS,CAAC,YAAA;QACR,IAAI,CAAC,MAAM,IAAI,SAAS;cACpB,gBAAgB,CACd,KAAK,CAAC,MAAM,CAAC,UAAC,IAAsB,EAAA;AAClC,gBAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AACtE,aAAC,CAAC,CACH;AACH,cAAE,gBAAgB,CAAC,EAAE,CAAC,CAAA;KACzB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAA;AAE3B,IAAA,OAAO,aAAa,CAAA;AACtB,CAAC;AAED,SAAS,aAAa,CAAC,KAAoC,EAAE,QAAgB,EAAA;AACrE,IAAA,IAAA,EAAA,GAAA,MAAA,CAAsC,QAAQ,CAAqB,EAAE,CAAC,EAAA,CAAA,CAAA,EAArE,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,QAAoC,CAAA;AAC5E,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,iBAAiB,CACf,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAA;;AACb,YAAA,OAAA,OAAO,IAAI,KAAK,QAAQ,IAAE,EAAA,GAAA,EAAA,EAAG,EAAC,CAAA,QAAQ,CAAG,GAAA,IAAI,EAAG,EAAA,IAAE,IAAI,CAAA;SAAA,CACvD,CACF,CAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AACX,IAAA,OAAO,cAAc,CAAA;AACvB,CAAC;AAED,SAAS,YAAY,CAAC,EAmBd,EAAA;AAlBN,IAAA,IAAA,EAAE,GAAA,EAAA,CAAA,EAAA,EACF,IAAI,UAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,YAAY,kBAAA,EACZ,EAAA,GAAA,EAAA,CAAA,UAAiB,EAAjB,UAAU,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,GAAA,EAAA,EACjB,sBAAkB,EAAlB,cAAc,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,CAAC,KAAA,EAClB,EAAA,GAAA,EAAA,CAAA,WAAmB,EAAnB,WAAW,mBAAG,KAAK,GAAA,EAAA,EACnB,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,EAAkB,GAAA,EAAA,CAAA,QAAA,EAAlB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,OAAO,GAAA,EAAA,EACf,UAAU,GAAA,MAAA,CAAA,EAAA,EAlBO,4NAmBrB,CADc,CAAA;AAEP,IAAA,IAAA,EAAA,GAAA,MAAA,CAAkB,QAAQ,CAAC,EAAE,CAAC,EAAA,CAAA,CAAA,EAA7B,IAAI,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,OAAO,QAAgB,CAAA;AAE9B,IAAA,IAAA,EAAA,GAAA,MAAA,CAA0B,QAAQ,CAAC,KAAK,CAAC,EAAA,CAAA,CAAA,EAAxC,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,QAAmB,CAAA;AAE/C,IAAA,IAAI,WAAW,GAAG,KAAK,CAAA;IAEvB,IAAM,OAAO,GAAG,UAAU;AACxB,UAAE,mBAAmB,CACjB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,EAC9B,IAAI,EACJ,cAAc,EACd,QAAQ,CACT;AACH,UAAE,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAElC,IAAM,UAAU,GAAG,eAAe,IAAI,MAAM,CAAiB,IAAI,CAAC,CAAA;IAElE,IAAM,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAmB,IAAI,CAAC,CAAA;AAE1D,IAAA,IAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAA;AAEnD,IAAA,IAAM,cAAc,GAAG,YAAA;QACrB,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;AAC5C,KAAC,CAAA;AAED,IAAA,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;AAC9B,IAAA,IAAM,YAAY,GAAG,MAAM,EAAO,CAAA;AAClC,IAAA,IAAM,UAAU,GAAG,MAAM,EAAO,CAAA;AAChC,IAAA,IAAM,SAAS,GAAG,MAAM,EAAO,CAAA;AAC/B,IAAA,IAAM,eAAe,GAAG,MAAM,EAAO,CAAA;AAErC,IAAA,SAAS,OAAO,GAAA;;AAEd,QAAA,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,YAAA;AAChC,YAAA,EAAE,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;AACjE,SAAC,CAAC,CAAA;KACH;AAED,IAAA,SAAS,CAAC,YAAA;;QAER,WAAW,IAAI,cAAc,EAAE,CAAA;QAE/B,OAAO,YAAA;AACL,YAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;YACzB,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;YAC1D,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;YACtD,SAAS,CAAC,OAAO,IAAI,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YACpD,eAAe,CAAC,OAAO,IAAI,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;AAClE,SAAC,CAAA;KACF,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,OAAO,EAAE,CAAA;AACX,KAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAER,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,OAAO,CAAC,YAAY,GAAG,EAAE,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAA;AAC1D,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,IAAM,WAAW,GAAG,UAAC,KAAyC,EAAA;QAC5D,CAAC,WAAW,IAAI,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;QACzC,WAAW,GAAG,KAAK,CAAA;AACnB,QAAA,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,YAAA;;AAE9B,YAAA,SAAS,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,CAAA;SACvC,EAAE,GAAG,CAAC,CAAA;AACT,KAAC,CAAA;IAED,IAAM,UAAU,GAAG,UAAC,KAAyC,EAAA;;AAE3D,QAAA,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAA;AACvB,QAAA,SAAS,CAAC,OAAO,GAAG,UAAU,CAAC,YAAA;AAC7B,YAAA,SAAS,CAAC,OAAO,IAAI,WAAW,CAAC,KAAK,CAAC,CAAA;SACxC,EAAE,GAAG,CAAC,CAAA;AACT,KAAC,CAAA;IAED,IAAM,YAAY,GAAG,UAAC,KAAyC,EAAA;AAC7D,QAAA,IAAM,UAAU,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;QAC3D,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE;;YAE3C,OAAO,CAAC,UAAU,CAAC,CAAA;AACnB,YAAA,aAAa,IAAI,aAAa,CAAC,UAAU,CAAC,CAAA;AAC3C,SAAA;AACH,KAAC,CAAA;AAED,IAAA,IAAM,gBAAgB,GAAG,YAAA;QACvB,OAAO,CAAC,EAAE,CAAC,CAAA;AACX,QAAA,aAAa,IAAI,aAAa,CAAC,EAAE,CAAC,CAAA;QAElC,eAAe,CAAC,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;AACtD,KAAC,CAAA;AAED,IAAA,IAAM,gBAAgB,GAAG,UACvB,IAAsB,EACtB,CAAkE,EAAA;;QAGlE,IAAM,gBAAgB,GAAG,YAAY;cACjC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK;cAClC,IAAI,CAAA;AAER,QAAA,IAAI,gBAAgB,EAAE;AACpB,YAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;AACxB,SAAA;AAAM,aAAA,IAAI,CAAC,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,WAAW,GAAG,IAAI,CAAA;AAClB,YAAA,cAAc,EAAE,CAAA;AACjB,SAAA;AACH,KAAC,CAAA;IAED,IAAM,aAAa,GAAG,UAAC,CAAmC,EAAA;AACxD,QAAA,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CAAA;;QAGzB,IAAM,cAAc,GAAG,EAAE,CAAA;;QAGzB,IAAM,kBAAkB,GAAG,CAAC,CAAA;AAE5B,QAAA,IAAI,CAAC,CAAC,OAAO,KAAK,cAAc,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,OAAO;gBAAE,OAAM;AAE9B,YAAA,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CACxB,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CACnE,CAAA;YAED,IAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,CACzC,UAAC,EAAE,EAAK,EAAA,OAAA,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAA,EAAA,CACpD,CAAA;AAED,YAAA,iBAAiB,IAAI,CAAC,IAAI,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAA;AAC1E,SAAA;AAAM,aAAA,IAAI,CAAC,CAAC,OAAO,KAAK,kBAAkB,EAAE;YAC3C,IAAI,CAAC,OAAO,CAAC,OAAO;gBAAE,OAAM;AAC5B,YAAA,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;AAC/C,gBAAA,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AAC/B,aAAA;AACF,SAAA;AACH,KAAC,CAAA;AAED,IAAA,IAAM,8BAA8B,GAAG,YAAA;AACrC,QAAA,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAA;AAC3E,KAAC,CAAA;AAED,IAAA,IAAM,eAAe,GAAG,UACtB,IAAsB,EACtB,CAA+B,EAAA;;;;AAK/B,QAAA,IACE,8BAA8B,EAAE;AAChC,YAAA,SAAS,CAAC,OAAO;YACjB,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,EAChD;AACA,YAAA,CAAC,CAAC,cAAc,EAAE,CAAA;AAClB,YAAA,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AAC1B,SAAA;AACH,KAAC,CAAA;IAED,QACE,oBAAC,QAAQ,EAAA,EACP,SAAS,EAAEA,EAAU,CAAC,qBAAqB,EAAE;AAC3C,YAAA,0CAA0C,EACxC,8BAA8B,EAAE;SACnC,CAAC,EACF,EAAE,EAAC,KAAK,EACR,WAAW,EAAE,IAAI,EACjB,GAAG,EAAE,UAAU,EAAA;AAEd,QAAA,OAAO,CAAC,MAAM,GAAG,CAAC,KACjB,oBAAC,eAAe,EAAA,EACd,SAAS,EAAC,8BAA8B,EACxC,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,SAAS,EAAA;AAEd,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,SAAS,EAAC,2BAA2B,EAAA,YAAA,EAC1B,qBAAqB,EAE/B,EAAA,OAAO,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,EAAA,EAAK,QAC5B,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EACrB,WAAW,EAAE,UAAC,CAA+B,EAAA;AAC3C,oBAAA,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AAC1B,iBAAC,EACD,OAAO,EAAE,UAAC,CAA+B,EAAA;AACvC,oBAAA,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;iBAC1B,EAAA,EAEA,UAAU,IACT,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,KAEtB,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mCAAmC,EAAA;AAChD,gBAAA,IAAI,KACH,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA;oBAC9C,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,QAAQ,EAAG,CAAA,CAChC,CACR;gBAED,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,iCAAiC,EAAA;AAC/C,oBAAA,KAAA,CAAA,aAAA,CAAC,kBAAkB,EAAA,IAAA,CAAG,CACjB,CACF,CACR,CACc,EAClB,EAAA,CAAC,CACW,CACC,CACnB;QACD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,YAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,UAAC,SAAS,EAAA;oBAChB,QACE,KAAC,CAAA,aAAA,CAAA,aAAa,EACR,QAAA,CAAA,EAAA,EAAA,UAAU,EACd,EAAA,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,KAAK,EACjB,cAAc,EAAC,KAAK,EACpB,UAAU,EAAE,KAAK,EAAA,YAAA,EACN,oBAAoB,EAC/B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,CAAA,CAAA,EACH;AACH,iBAAC,EACD,CAAA;AAED,YAAA,IAAI,KACH,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,gBAAgB,EAAA;AAEzB,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,CAC7B,CACP,CACG,CACG,EACZ;AACH,CAAC;AAED,IAAM,gBAAgB,GAAG,qBAAqB,CAAC,YAAY,EAAC;AAC5D,gBAAgB,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  const isMounted = useRef(true)\n  const forceIdTimer = useRef<any>()\n  const focusTimer = useRef<any>()\n  const blurTimer = useRef<any>()\n  const clearInputTimer = useRef<any>()\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    forceIdTimer.current = setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n\n    return () => {\n      isMounted.current = false\n      forceIdTimer.current && clearTimeout(forceIdTimer.current)\n      focusTimer.current && clearTimeout(focusTimer.current)\n      blurTimer.current && clearTimeout(blurTimer.current)\n      clearInputTimer.current && clearTimeout(clearInputTimer.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    focusTimer.current = setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      isMounted.current && setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    blurTimer.current = setTimeout(() => {\n      isMounted.current && setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    clearInputTimer.current = setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"indigo\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            role=\"clear\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":"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"}

package/components/Form/CheckablePill.js

@@ -1,36 +1,31 @@
-import { __rest, __assign } from '../../_virtual/_tslib.js';
 import React from 'react';
 import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 import { withFieldLabelAndHint } from './field.js';
 
-var CheckablePill = function (_a) {
-    var type = _a.type, icon = _a.icon, value = _a.value, children = _a.children, defaultChecked = _a.defaultChecked, status = _a.status, InputProps = __rest(_a, ["type", "icon", "value", "children", "defaultChecked", "status"]);
+const CheckablePill = ({ type, icon, value, children, defaultChecked, status, ...InputProps }) => {
     return (React.createElement("span", { className: cx("cobalt-CheckablePillField", {
             "cobalt-CheckablePillField--error": status === "error",
             "cobalt-CheckablePillField--with-icon": icon,
         }) },
         React.createElement("label", { className: "cobalt-CheckablePillField__LabelWrapper" },
-            React.createElement("input", __assign({}, InputProps, { type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked })),
+            React.createElement("input", { ...InputProps, type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked }),
             React.createElement("span", { className: "cobalt-CheckablePillField__Label" },
                 icon && React.createElement(Icon, { source: icon }),
                 children))));
 };
-var CheckboxPill = function (_a) {
-    var props = __rest(_a, []);
-    return React.createElement(CheckablePill, __assign({}, props, { type: "checkbox" }));
+const CheckboxPill = ({ ...props }) => {
+    return React.createElement(CheckablePill, { ...props, type: "checkbox" });
 };
 CheckboxPill.displayName = "CheckboxPill";
-var RadioPill = function (_a) {
-    var props = __rest(_a, []);
-    return React.createElement(CheckablePill, __assign({}, props, { type: "radio" }));
+const RadioPill = ({ ...props }) => {
+    return React.createElement(CheckablePill, { ...props, type: "radio" });
 };
 RadioPill.displayName = "RadioPill";
-var _CheckablePillsGroup = function (_a) {
-    var children = _a.children;
+const _CheckablePillsGroup = ({ children }) => {
     return (React.createElement("div", { className: "cobalt-CheckablePillsGroup" }, typeof children === "function" ? children() : children));
 };
-var CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
+const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
 CheckablePillsGroup.displayName = "CheckablePillsGroup";
 
 export { CheckablePillsGroup, CheckboxPill, RadioPill };

package/components/Form/CheckablePill.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckablePill.js","sources":["../../../src/components/Form/CheckablePill.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon, IconSources } from \"../Icon\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  type?: \"checkbox\" | \"radio\"\n  icon?: IconSources\n  value: string\n  children: React.ReactNode\n  defaultChecked?: boolean\n  name: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst CheckablePill = ({\n  type,\n  icon,\n  value,\n  children,\n  defaultChecked,\n  status,\n  ...InputProps\n}: Props) => {\n  return (\n    <span\n      className={classNames(\"cobalt-CheckablePillField\", {\n        \"cobalt-CheckablePillField--error\": status === \"error\",\n        \"cobalt-CheckablePillField--with-icon\": icon,\n      })}\n    >\n      <label className=\"cobalt-CheckablePillField__LabelWrapper\">\n        <input\n          {...InputProps}\n          type={type}\n          className=\"cobalt-CheckablePillField__Input\"\n          value={value}\n          defaultChecked={defaultChecked}\n        />\n        <span className=\"cobalt-CheckablePillField__Label\">\n          {icon && <Icon source={icon} />}\n          {children}\n        </span>\n      </label>\n    </span>\n  )\n}\n\nexport const CheckboxPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"checkbox\" />\n}\nCheckboxPill.displayName = \"CheckboxPill\"\n\nexport const RadioPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"radio\" />\n}\nRadioPill.displayName = \"RadioPill\"\n\ninterface CheckablePillsGroupProps {\n  children: React.ReactNode\n}\n\nconst _CheckablePillsGroup = ({ children }: CheckablePillsGroupProps) => {\n  return (\n    <div className=\"cobalt-CheckablePillsGroup\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nexport const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup)\nCheckablePillsGroup.displayName = \"CheckablePillsGroup\"\n"],"names":["classNames"],"mappings":";;;;;;AAgBA,IAAM,aAAa,GAAG,UAAC,EAQf,EAAA;IAPN,IAAA,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,MAAM,YAAA,EACH,UAAU,GAPQ,MAAA,CAAA,EAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,CAQtB,CADc,CAAA;AAEb,IAAA,QACE,KACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,2BAA2B,EAAE;YACjD,kCAAkC,EAAE,MAAM,KAAK,OAAO;AACtD,YAAA,sCAAsC,EAAE,IAAI;SAC7C,CAAC,EAAA;QAEF,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,yCAAyC,EAAA;AACxD,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EACM,UAAU,EACd,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,CAAA,CAAA;YACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;AAC/C,gBAAA,IAAI,IAAI,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAE,IAAI,EAAI,CAAA;AAC9B,gBAAA,QAAQ,CACJ,CACD,CACH,EACR;AACH,CAAC,CAAA;AAEM,IAAM,YAAY,GAAG,UAAC,EAAmB,EAAA;QAAd,KAAK,GAAA,MAAA,CAAA,EAAA,EAAV,EAAY,CAAF,CAAA;IACrC,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,IAAE,IAAI,EAAC,UAAU,EAAA,CAAA,CAAG,CAAA;AACrD,EAAC;AACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAElC,IAAM,SAAS,GAAG,UAAC,EAAmB,EAAA;QAAd,KAAK,GAAA,MAAA,CAAA,EAAA,EAAV,EAAY,CAAF,CAAA;IAClC,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,IAAE,IAAI,EAAC,OAAO,EAAA,CAAA,CAAG,CAAA;AAClD,EAAC;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAMnC,IAAM,oBAAoB,GAAG,UAAC,EAAsC,EAAA;AAApC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;IACtC,QACE,6BAAK,SAAS,EAAC,4BAA4B,EACxC,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;IAEY,mBAAmB,GAAG,qBAAqB,CAAC,oBAAoB,EAAC;AAC9E,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"CheckablePill.js","sources":["../../../src/components/Form/CheckablePill.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon, IconSources } from \"../Icon\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  type?: \"checkbox\" | \"radio\"\n  icon?: IconSources\n  value: string\n  children: React.ReactNode\n  defaultChecked?: boolean\n  name: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst CheckablePill = ({\n  type,\n  icon,\n  value,\n  children,\n  defaultChecked,\n  status,\n  ...InputProps\n}: Props) => {\n  return (\n    <span\n      className={classNames(\"cobalt-CheckablePillField\", {\n        \"cobalt-CheckablePillField--error\": status === \"error\",\n        \"cobalt-CheckablePillField--with-icon\": icon,\n      })}\n    >\n      <label className=\"cobalt-CheckablePillField__LabelWrapper\">\n        <input\n          {...InputProps}\n          type={type}\n          className=\"cobalt-CheckablePillField__Input\"\n          value={value}\n          defaultChecked={defaultChecked}\n        />\n        <span className=\"cobalt-CheckablePillField__Label\">\n          {icon && <Icon source={icon} />}\n          {children}\n        </span>\n      </label>\n    </span>\n  )\n}\n\nexport const CheckboxPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"checkbox\" />\n}\nCheckboxPill.displayName = \"CheckboxPill\"\n\nexport const RadioPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"radio\" />\n}\nRadioPill.displayName = \"RadioPill\"\n\ninterface CheckablePillsGroupProps {\n  children: React.ReactNode\n}\n\nconst _CheckablePillsGroup = ({ children }: CheckablePillsGroupProps) => {\n  return (\n    <div className=\"cobalt-CheckablePillsGroup\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nexport const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup)\nCheckablePillsGroup.displayName = \"CheckablePillsGroup\"\n"],"names":["classNames"],"mappings":";;;;;AAgBA,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAM,EACN,GAAG,UAAU,EACP,KAAI;AACV,IAAA,QACE,KACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,2BAA2B,EAAE;YACjD,kCAAkC,EAAE,MAAM,KAAK,OAAO;AACtD,YAAA,sCAAsC,EAAE,IAAI;SAC7C,CAAC,EAAA;QAEF,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,yCAAyC,EAAA;AACxD,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,UAAU,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,CAAA;YACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;AAC/C,gBAAA,IAAI,IAAI,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAE,IAAI,EAAI,CAAA;AAC9B,gBAAA,QAAQ,CACJ,CACD,CACH,EACR;AACH,CAAC,CAAA;AAEY,MAAA,YAAY,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAClD,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,UAAU,EAAA,CAAG,CAAA;AACrD,EAAC;AACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAE5B,MAAA,SAAS,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG,CAAA;AAClD,EAAC;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAMnC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACtE,QACE,6BAAK,SAAS,EAAC,4BAA4B,EACxC,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;MAEY,mBAAmB,GAAG,qBAAqB,CAAC,oBAAoB,EAAC;AAC9E,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/components/Form/Checkmark.js

@@ -1,37 +1,32 @@
-import { __rest, __assign } from '../../_virtual/_tslib.js';
 import React from 'react';
 import cx from 'classnames';
 import { Hint } from './Hint.js';
 import { withFieldLabelAndHint } from './field.js';
 
-var Checkmark = function (_a) {
-    var label = _a.label, status = _a.status, hint = _a.hint, inputProps = __rest(_a, ["label", "status", "hint"]);
+const Checkmark = ({ label, status, hint, ...inputProps }) => {
     return (React.createElement("div", { className: cx("cobalt-CheckmarkField", {
             "cobalt-CheckmarkField--success": status === "success",
             "cobalt-CheckmarkField--error": status === "error",
         }) },
         React.createElement("label", { className: "cobalt-CheckmarkField__LabelWrapper" },
-            React.createElement("input", __assign({}, inputProps, { className: "cobalt-CheckmarkField__Input" })),
+            React.createElement("input", { ...inputProps, className: "cobalt-CheckmarkField__Input" }),
             React.createElement("span", { className: "cobalt-CheckmarkField__Checkmark" }),
             React.createElement("span", { className: "cobalt-CheckmarkField__Label" }, label)),
         hint && (React.createElement(Hint, { status: status },
             React.createElement("span", { dangerouslySetInnerHTML: { __html: hint } })))));
 };
-var Checkbox = function (_a) {
-    var label = _a.label, props = __rest(_a, ["label"]);
-    return React.createElement(Checkmark, __assign({}, props, { label: label, type: "checkbox" }));
+const Checkbox = ({ label, ...props }) => {
+    return React.createElement(Checkmark, { ...props, label: label, type: "checkbox" });
 };
 Checkbox.displayName = "CobaltCheckbox";
-var Radio = function (_a) {
-    var label = _a.label, props = __rest(_a, ["label"]);
-    return React.createElement(Checkmark, __assign({}, props, { label: label, type: "radio" }));
+const Radio = ({ label, ...props }) => {
+    return React.createElement(Checkmark, { ...props, label: label, type: "radio" });
 };
 Radio.displayName = "CobaltRadio";
-var ChoiceList = function (_a) {
-    var children = _a.children;
+const ChoiceList = ({ children }) => {
     return (React.createElement("div", { className: "cobalt-ChoiceList" }, typeof children === "function" ? children() : children));
 };
-var wrappedChoiceList = withFieldLabelAndHint(ChoiceList);
+const wrappedChoiceList = withFieldLabelAndHint(ChoiceList);
 wrappedChoiceList.displayName = "ChoiceList";
 
 export { Checkbox, wrappedChoiceList as ChoiceList, Radio };

package/components/Form/Checkmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkmark.js","sources":["../../../src/components/Form/Checkmark.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Hint } from \"./Hint\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  label: string | JSX.Element\n  type?: \"checkbox\" | \"radio\"\n  hint?: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst Checkmark = ({ label, status, hint, ...inputProps }: Props) => {\n  return (\n    <div\n      className={classNames(\"cobalt-CheckmarkField\", {\n        \"cobalt-CheckmarkField--success\": status === \"success\",\n        \"cobalt-CheckmarkField--error\": status === \"error\",\n      })}\n    >\n      <label className=\"cobalt-CheckmarkField__LabelWrapper\">\n        <input {...inputProps} className=\"cobalt-CheckmarkField__Input\" />\n        <span className=\"cobalt-CheckmarkField__Checkmark\" />\n        <span className=\"cobalt-CheckmarkField__Label\">{label}</span>\n      </label>\n      {hint && (\n        <Hint status={status}>\n          <span dangerouslySetInnerHTML={{ __html: hint }} />\n        </Hint>\n      )}\n    </div>\n  )\n}\n\nexport const Checkbox = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"checkbox\" />\n}\nCheckbox.displayName = \"CobaltCheckbox\"\n\nexport const Radio = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"radio\" />\n}\nRadio.displayName = \"CobaltRadio\"\n\ntype ChoiceListProps = {\n  children: React.ReactNode\n}\n\nconst ChoiceList = ({ children }: ChoiceListProps) => {\n  return (\n    <div className=\"cobalt-ChoiceList\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nconst wrappedChoiceList = withFieldLabelAndHint(ChoiceList)\nwrappedChoiceList.displayName = \"ChoiceList\"\n\nexport { wrappedChoiceList as ChoiceList }\n"],"names":["classNames"],"mappings":";;;;;;AAaA,IAAM,SAAS,GAAG,UAAC,EAA6C,EAAA;AAA3C,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA,EAAK,UAAU,GAApC,MAAA,CAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,MAAA,CAAsC,CAAF,CAAA;AACrD,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,uBAAuB,EAAE;YAC7C,gCAAgC,EAAE,MAAM,KAAK,SAAS;YACtD,8BAA8B,EAAE,MAAM,KAAK,OAAO;SACnD,CAAC,EAAA;QAEF,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,qCAAqC,EAAA;AACpD,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAW,UAAU,EAAA,EAAE,SAAS,EAAC,8BAA8B,EAAG,CAAA,CAAA;YAClE,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAG,CAAA;AACrD,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8BAA8B,EAAE,EAAA,KAAK,CAAQ,CACvD;AACP,QAAA,IAAI,KACH,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,MAAM,EAAE,MAAM,EAAA;AAClB,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAA,CAAI,CAC9C,CACR,CACG,EACP;AACH,CAAC,CAAA;AAEM,IAAM,QAAQ,GAAG,UAAC,EAA0B,EAAA;AAAxB,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EAAK,KAAK,GAAA,MAAA,CAAA,EAAA,EAAjB,SAAmB,CAAF,CAAA;AACxC,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,EAAE,EAAA,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,IAAG,CAAA;AAC/D,EAAC;AACD,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAEhC,IAAM,KAAK,GAAG,UAAC,EAA0B,EAAA;AAAxB,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EAAK,KAAK,GAAA,MAAA,CAAA,EAAA,EAAjB,SAAmB,CAAF,CAAA;AACrC,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,EAAE,EAAA,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,IAAG,CAAA;AAC5D,EAAC;AACD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAMjC,IAAM,UAAU,GAAG,UAAC,EAA6B,EAAA;AAA3B,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;IAC5B,QACE,6BAAK,SAAS,EAAC,mBAAmB,EAC/B,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;AAED,IAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,EAAC;AAC3D,iBAAiB,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Checkmark.js","sources":["../../../src/components/Form/Checkmark.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Hint } from \"./Hint\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  label: string | JSX.Element\n  type?: \"checkbox\" | \"radio\"\n  hint?: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst Checkmark = ({ label, status, hint, ...inputProps }: Props) => {\n  return (\n    <div\n      className={classNames(\"cobalt-CheckmarkField\", {\n        \"cobalt-CheckmarkField--success\": status === \"success\",\n        \"cobalt-CheckmarkField--error\": status === \"error\",\n      })}\n    >\n      <label className=\"cobalt-CheckmarkField__LabelWrapper\">\n        <input {...inputProps} className=\"cobalt-CheckmarkField__Input\" />\n        <span className=\"cobalt-CheckmarkField__Checkmark\" />\n        <span className=\"cobalt-CheckmarkField__Label\">{label}</span>\n      </label>\n      {hint && (\n        <Hint status={status}>\n          <span dangerouslySetInnerHTML={{ __html: hint }} />\n        </Hint>\n      )}\n    </div>\n  )\n}\n\nexport const Checkbox = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"checkbox\" />\n}\nCheckbox.displayName = \"CobaltCheckbox\"\n\nexport const Radio = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"radio\" />\n}\nRadio.displayName = \"CobaltRadio\"\n\ntype ChoiceListProps = {\n  children: React.ReactNode\n}\n\nconst ChoiceList = ({ children }: ChoiceListProps) => {\n  return (\n    <div className=\"cobalt-ChoiceList\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nconst wrappedChoiceList = withFieldLabelAndHint(ChoiceList)\nwrappedChoiceList.displayName = \"ChoiceList\"\n\nexport { wrappedChoiceList as ChoiceList }\n"],"names":["classNames"],"mappings":";;;;;AAaA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAS,KAAI;AAClE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,uBAAuB,EAAE;YAC7C,gCAAgC,EAAE,MAAM,KAAK,SAAS;YACtD,8BAA8B,EAAE,MAAM,KAAK,OAAO;SACnD,CAAC,EAAA;QAEF,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,qCAAqC,EAAA;AACpD,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAW,UAAU,EAAE,SAAS,EAAC,8BAA8B,EAAG,CAAA;YAClE,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAG,CAAA;AACrD,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8BAA8B,EAAE,EAAA,KAAK,CAAQ,CACvD;AACP,QAAA,IAAI,KACH,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,MAAM,EAAE,MAAM,EAAA;AAClB,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAA,CAAI,CAC9C,CACR,CACG,EACP;AACH,CAAC,CAAA;AAEM,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS,KAAI;AACrD,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,GAAG,CAAA;AAC/D,EAAC;AACD,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAEhC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS,KAAI;AAClD,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAA;AAC5D,EAAC;AACD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAMjC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAmB,KAAI;IACnD,QACE,6BAAK,SAAS,EAAC,mBAAmB,EAC/B,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,EAAC;AAC3D,iBAAiB,CAAC,WAAW,GAAG,YAAY;;;;"}

package/components/Form/ComposedField.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { withFieldLabelAndHint } from './field.js';
 
-var ComposedFormField = function (_a) {
-    var id = _a.id, children = _a.children;
-    return (React.createElement("div", { className: "cobalt-ComposedFormField" }, React.Children.toArray(children).map(function (child, index) {
+const ComposedFormField = ({ id, children }) => {
+    return (React.createElement("div", { className: "cobalt-ComposedFormField" }, React.Children.toArray(children).map((child, index) => {
         return index === 0
             ? React.cloneElement(child, {
-                id: id,
+                id,
             })
             : child;
     })));
 };
-var wrappedComponent = withFieldLabelAndHint(ComposedFormField);
+const wrappedComponent = withFieldLabelAndHint(ComposedFormField);
 wrappedComponent.displayName = "ComposedField";
 
 export { wrappedComponent as ComposedField };

package/components/Form/ComposedField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedField.js","sources":["../../../src/components/Form/ComposedField.tsx"],"sourcesContent":["import React from \"react\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport { FormElement } from \"./form\"\n\ntype Props = {\n  id?: string\n  children: React.ReactNode\n} & FormElement\n\nconst ComposedFormField = ({ id, children }: Props) => {\n  return (\n    <div className=\"cobalt-ComposedFormField\">\n      {React.Children.toArray(children).map((child, index) => {\n        return index === 0\n          ? React.cloneElement(child as React.ComponentElement<any, any>, {\n              id,\n            })\n          : child\n      })}\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(ComposedFormField)\nwrappedComponent.displayName = \"ComposedField\"\n\nexport { wrappedComponent as ComposedField }\n"],"names":[],"mappings":";;;AASA,IAAM,iBAAiB,GAAG,UAAC,EAAuB,EAAA;QAArB,EAAE,GAAA,EAAA,CAAA,EAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;IACvC,QACE,6BAAK,SAAS,EAAC,0BAA0B,EACtC,EAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,EAAA;QACjD,OAAO,KAAK,KAAK,CAAC;AAChB,cAAE,KAAK,CAAC,YAAY,CAAC,KAAyC,EAAE;AAC5D,gBAAA,EAAE,EAAA,EAAA;aACH,CAAC;cACF,KAAK,CAAA;KACV,CAAC,CACE,EACP;AACH,CAAC,CAAA;AAED,IAAM,gBAAgB,GAAG,qBAAqB,CAAC,iBAAiB,EAAC;AACjE,gBAAgB,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"ComposedField.js","sources":["../../../src/components/Form/ComposedField.tsx"],"sourcesContent":["import React from \"react\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport { FormElement } from \"./form\"\n\ntype Props = {\n  id?: string\n  children: React.ReactNode\n} & FormElement\n\nconst ComposedFormField = ({ id, children }: Props) => {\n  return (\n    <div className=\"cobalt-ComposedFormField\">\n      {React.Children.toArray(children).map((child, index) => {\n        return index === 0\n          ? React.cloneElement(child as React.ComponentElement<any, any>, {\n              id,\n            })\n          : child\n      })}\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(ComposedFormField)\nwrappedComponent.displayName = \"ComposedField\"\n\nexport { wrappedComponent as ComposedField }\n"],"names":[],"mappings":";;;AASA,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAS,KAAI;IACpD,QACE,6BAAK,SAAS,EAAC,0BAA0B,EACtC,EAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;QACrD,OAAO,KAAK,KAAK,CAAC;AAChB,cAAE,KAAK,CAAC,YAAY,CAAC,KAAyC,EAAE;gBAC5D,EAAE;aACH,CAAC;cACF,KAAK,CAAA;KACV,CAAC,CACE,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,iBAAiB,EAAC;AACjE,gBAAgB,CAAC,WAAW,GAAG,eAAe;;;;"}

package/components/Form/Fieldset.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
-var Fieldset = function (_a) {
-    var legend = _a.legend, children = _a.children;
+const Fieldset = ({ legend, children }) => {
     return (React.createElement("fieldset", { className: "cobalt-Fieldset" },
         React.createElement("legend", null, legend),
         children));

package/components/Form/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Form/Fieldset.tsx"],"sourcesContent":["import React from \"react\"\n\ntype Props = {\n  legend: string\n  children: React.ReactNode\n}\n\nexport const Fieldset = ({ legend, children }: Props) => {\n  return (\n    <fieldset className=\"cobalt-Fieldset\">\n      <legend>{legend}</legend>\n      {children}\n    </fieldset>\n  )\n}\n"],"names":[],"mappings":";;AAOO,IAAM,QAAQ,GAAG,UAAC,EAA2B,EAAA;QAAzB,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;AACzC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAU,SAAS,EAAC,iBAAiB,EAAA;AACnC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,MAAM,CAAU;QACxB,QAAQ,CACA,EACZ;AACH;;;;"}
+{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Form/Fieldset.tsx"],"sourcesContent":["import React from \"react\"\n\ntype Props = {\n  legend: string\n  children: React.ReactNode\n}\n\nexport const Fieldset = ({ legend, children }: Props) => {\n  return (\n    <fieldset className=\"cobalt-Fieldset\">\n      <legend>{legend}</legend>\n      {children}\n    </fieldset>\n  )\n}\n"],"names":[],"mappings":";;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAS,KAAI;AACtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAU,SAAS,EAAC,iBAAiB,EAAA;AACnC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,MAAM,CAAU;QACxB,QAAQ,CACA,EACZ;AACH;;;;"}

package/components/Form/Hint.js

@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 
-var ICON_SIZE = 16;
-var getIcon = function (status) {
+const ICON_SIZE = 16;
+const getIcon = (status) => {
     switch (status) {
         case "success": {
             return "checkCircle";
@@ -16,7 +16,7 @@ var getIcon = function (status) {
         }
     }
 };
-var getIconColor = function (status) {
+const getIconColor = (status) => {
     switch (status) {
         case "success": {
             return "signal";
@@ -29,8 +29,7 @@ var getIconColor = function (status) {
         }
     }
 };
-var Hint = function (_a) {
-    var children = _a.children, status = _a.status;
+const Hint = ({ children, status }) => {
     return (React.createElement("div", { className: cx("cobalt-Hint", {
             "cobalt-Hint--success": status === "success",
             "cobalt-Hint--error": status === "error",

package/components/Form/Hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\nimport { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"signal\"\n    }\n    case \"error\": {\n      return \"essence\"\n    }\n    default: {\n      return \"graphiteLight\"\n    }\n  }\n}\n\nexport const Hint = ({ children, status }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;AAUA,IAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,IAAM,OAAO,GAAG,UAAC,MAAqC,EAAA;AACpD,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;AACrB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;AACvC,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;AACd,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAED,IAAM,YAAY,GAAG,UAAC,MAAqC,EAAA;AACzD,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,QAAQ,CAAA;AAChB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS,CAAA;AACjB,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,eAAe,CAAA;AACvB,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAEM,IAAM,IAAI,GAAG,UAAC,EAAmC,EAAA;QAAjC,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,CAAA;AACrC,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE;YACnC,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC,EAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA;YACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}
+{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\nimport { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"signal\"\n    }\n    case \"error\": {\n      return \"essence\"\n    }\n    default: {\n      return \"graphiteLight\"\n    }\n  }\n}\n\nexport const Hint = ({ children, status }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;AACxD,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;AACrB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;AACvC,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;AACd,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;AAC7D,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,QAAQ,CAAA;AAChB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS,CAAA;AACjB,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,eAAe,CAAA;AACvB,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAEY,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAiB,KAAI;AAC1D,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE;YACnC,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC,EAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA;YACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}

package/components/Form/RadioWithDetails.js

@@ -1,11 +1,9 @@
-import { __rest, __assign } from '../../_virtual/_tslib.js';
 import React from 'react';
 import cx from 'classnames';
 
-var RadioWithDetails = function (_a) {
-    var icon = _a.icon, title = _a.title, description = _a.description, className = _a.className, inputProps = __rest(_a, ["icon", "title", "description", "className"]);
+const RadioWithDetails = ({ icon, title, description, className, ...inputProps }) => {
     return (React.createElement("label", { className: cx("cobalt-radio-with-details", className) },
-        React.createElement("input", __assign({}, inputProps, { type: "radio", className: "cobalt-radio-with-details__input" })),
+        React.createElement("input", { ...inputProps, type: "radio", className: "cobalt-radio-with-details__input" }),
         React.createElement("div", { className: "cobalt-radio-with-details__inner" },
             icon &&
                 React.cloneElement(icon, {

package/components/Form/RadioWithDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label className={cx(\"cobalt-radio-with-details\", className)}>\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <p className=\"cobalt-radio-with-details__title\">{title}</p>\n          {description && (\n            <p className=\"cobalt-radio-with-details__description\">\n              {description}\n            </p>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;;AAWM,IAAA,gBAAgB,GAAG,UAAC,EAME,EAAA;AAL1B,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,KAAK,WAAA,EACL,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,UAAU,GAAA,MAAA,CAAA,EAAA,EALW,6CAMzB,CADc,CAAA;IAEb,QACE,+BAAO,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAA;QAC1D,KACM,CAAA,aAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,EAAA,UAAU,IACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAC5C,CAAA,CAAA;QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;YAC9C,IAAI;AACH,gBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,oBAAA,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,EAAA,EAAE,KAAK,CAAK;gBAC1D,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,wCAAwC,EAClD,EAAA,WAAW,CACV,CACL,CACG;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}
+{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label className={cx(\"cobalt-radio-with-details\", className)}>\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <p className=\"cobalt-radio-with-details__title\">{title}</p>\n          {description && (\n            <p className=\"cobalt-radio-with-details__description\">\n              {description}\n            </p>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACa,KAAI;IAC9B,QACE,+BAAO,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAA;QAC1D,KACM,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAC5C,CAAA;QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;YAC9C,IAAI;AACH,gBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,oBAAA,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,EAAA,EAAE,KAAK,CAAK;gBAC1D,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,wCAAwC,EAClD,EAAA,WAAW,CACV,CACL,CACG;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}

package/components/Form/Select.js

@@ -1,17 +1,15 @@
-import { __rest, __assign } from '../../_virtual/_tslib.js';
 import React from 'react';
 import cx from 'classnames';
 import { withFieldLabelAndHint } from './field.js';
 
-var Select = function (_a) {
-    var children = _a.children, status = _a.status, forwardedRef = _a.forwardedRef, selectProps = __rest(_a, ["children", "status", "forwardedRef"]);
+const Select = ({ children, status, forwardedRef, ...selectProps }) => {
     return (React.createElement("div", { className: cx("cobalt-SelectField", {
             "cobalt-SelectField--success": status === "success",
             "cobalt-SelectField--error": status === "error",
         }) },
-        React.createElement("select", __assign({}, selectProps, { ref: forwardedRef, className: "cobalt-SelectField__Input" }), children)));
+        React.createElement("select", { ...selectProps, ref: forwardedRef, className: "cobalt-SelectField__Input" }, children)));
 };
-var wrappedComponent = withFieldLabelAndHint(Select);
+const wrappedComponent = withFieldLabelAndHint(Select);
 wrappedComponent.displayName = "Select";
 
 export { wrappedComponent as Select };