@drivy/cobalt 0.13.0

package/components/Form/Autocomplete/index.js

@@ -0,0 +1,171 @@
+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';
+import { Icon } from '../../Icon/index.js';
+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 () {
+        term.length >= minLength
+            ? setMatchingItems(items.filter(function (item) {
+                return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1;
+            }))
+            : setMatchingItems([]);
+    }, [items, term, 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;
+        }));
+    }, [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
+        ? 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 () {
+        inputEl.current && inputEl.current.focus();
+    };
+    var forceIdTimer = useRef();
+    var focusTimer = useRef();
+    var blurTimer = useRef();
+    var clearInputTimer = useRef();
+    function forceId() {
+        // id is overriden by Reach ui Combobox
+        forceIdTimer.current = setTimeout(function () {
+            id && inputEl.current && inputEl.current.setAttribute("id", id);
+        });
+    }
+    useEffect(function () {
+        // on mount ...
+        focusOnInit && giveInputFocus();
+        return function () {
+            forceIdTimer.current && clearTimeout(forceIdTimer.current);
+            focusTimer.current && clearTimeout(focusTimer.current);
+            blurTimer.current && clearTimeout(blurTimer.current);
+            clearInputTimer.current && clearTimeout(clearInputTimer.current);
+        };
+    }, []);
+    useEffect(function () {
+        forceId();
+    }, [id]);
+    useEffect(function () {
+        setTerm(selectedItem ? "" + selectedItem[valueKey] : "");
+    }, [selectedItem]);
+    var handleFocus = function (event) {
+        !ignoreFocus && onFocus && onFocus(event);
+        ignoreFocus = false;
+        focusTimer.current = setTimeout(function () {
+            // required by "forceDisplayResults" mechanism
+            setHasFocus(true);
+        }, 100);
+    };
+    var handleBlur = function (event) {
+        // blur interceptor required by "forceDisplayResults" mechanism
+        onBlur && onBlur(event);
+        blurTimer.current = setTimeout(function () {
+            setHasFocus(false);
+        }, 100);
+    };
+    var handleChange = function (event) {
+        var 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 () {
+        setTerm("");
+        onQueryChange && onQueryChange("");
+        clearInputTimer.current = setTimeout(giveInputFocus); //timeout to trigger openOnFocus
+    };
+    var handleSelectItem = function (item, e) {
+        // item click interceptor to enable custom select cancellation
+        var processSelection = onSelectItem
+            ? onSelectItem(item, term) !== false
+            : true;
+        if (processSelection) {
+            setTerm(item[valueKey]);
+        }
+        else if (e) {
+            e.preventDefault();
+            ignoreFocus = true;
+            giveInputFocus();
+        }
+    };
+    var handleKeyDown = function (e) {
+        onKeyDown && onKeyDown(e);
+        // ENTER key down interceptor to enable custom select cancellation
+        var 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;
+        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"; });
+            selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e);
+        }
+        else if (e.keyCode === KEY_CODE_BACKSPACE) {
+            if (!inputEl.current)
+                return;
+            if (inputEl.current.value.slice(0, -1) === term) {
+                setTerm(inputEl.current.value);
+            }
+        }
+    };
+    var shouldDisplayItemsOnEmptyQuery = function () {
+        return !autoFilter && results.length > 0 && term.length === 0 && hasFocus;
+    };
+    var handleMouseDown = function (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
+        if (shouldDisplayItemsOnEmptyQuery() &&
+            popoverEl.current &&
+            popoverEl.current.getAttribute("hidden") != null) {
+            e.preventDefault(); // it will prevent reach ui combobox to raise an error
+            handleSelectItem(item, e); // we force the selection to be processed
+        }
+    };
+    return (React.createElement(Combobox, { className: cx("cobalt-Autocomplete", {
+            "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) {
+                    handleMouseDown(item, e);
+                }, onClick: function (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("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 })));
+                } }),
+            term && (React.createElement("div", { className: "cobalt-Autocomplete__clear-button", onClick: handleClearInput },
+                React.createElement(Icon, { source: "close", size: 16 }))))));
+}
+var wrappedComponent = withFieldLabelAndHint(Autocomplete);
+wrappedComponent.displayName = "Autocomplete";
+
+export { wrappedComponent as Autocomplete };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 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      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      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      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            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

@@ -0,0 +1,37 @@
+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"]);
+    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("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" }));
+};
+CheckboxPill.displayName = "CheckboxPill";
+var RadioPill = function (_a) {
+    var props = __rest(_a, []);
+    return React.createElement(CheckablePill, __assign({}, props, { type: "radio" }));
+};
+RadioPill.displayName = "RadioPill";
+var _CheckablePillsGroup = function (_a) {
+    var children = _a.children;
+    return (React.createElement("div", { className: "cobalt-CheckablePillsGroup" }, typeof children === "function" ? children() : children));
+};
+var CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
+CheckablePillsGroup.displayName = "CheckablePillsGroup";
+
+export { CheckablePillsGroup, CheckboxPill, RadioPill };
+//# sourceMappingURL=CheckablePill.js.map

package/components/Form/CheckablePill.js.map

@@ -0,0 +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;IAPN,IAAA,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,MAAM,YAAA,EACH,UAAU,cAPQ,iEAQtB,CADc;IAEb,QACE,8BACE,SAAS,EAAEA,EAAU,CAAC,2BAA2B,EAAE;YACjD,kCAAkC,EAAE,MAAM,KAAK,OAAO;YACtD,sCAAsC,EAAE,IAAI;SAC7C,CAAC;QAEF,+BAAO,SAAS,EAAC,yCAAyC;YACxD,0CACM,UAAU,IACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,IAC9B;YACF,8BAAM,SAAS,EAAC,kCAAkC;gBAC/C,IAAI,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,IAAI,GAAI;gBAC9B,QAAQ,CACJ,CACD,CACH,EACR;AACH,CAAC,CAAA;IAEY,YAAY,GAAG,UAAC,EAAmB;QAAd,KAAK,cAAV,EAAY,CAAF;IACrC,OAAO,oBAAC,aAAa,eAAK,KAAK,IAAE,IAAI,EAAC,UAAU,IAAG,CAAA;AACrD,EAAC;AACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;IAE5B,SAAS,GAAG,UAAC,EAAmB;QAAd,KAAK,cAAV,EAAY,CAAF;IAClC,OAAO,oBAAC,aAAa,eAAK,KAAK,IAAE,IAAI,EAAC,OAAO,IAAG,CAAA;AAClD,EAAC;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAMnC,IAAM,oBAAoB,GAAG,UAAC,EAAsC;QAApC,QAAQ,cAAA;IACtC,QACE,6BAAK,SAAS,EAAC,4BAA4B,IACxC,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;;;;"}

package/components/Form/Checkmark.js

@@ -0,0 +1,38 @@
+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"]);
+    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("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" }));
+};
+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" }));
+};
+Radio.displayName = "CobaltRadio";
+var ChoiceList = function (_a) {
+    var children = _a.children;
+    return (React.createElement("div", { className: "cobalt-ChoiceList" }, typeof children === "function" ? children() : children));
+};
+var wrappedChoiceList = withFieldLabelAndHint(ChoiceList);
+wrappedChoiceList.displayName = "ChoiceList";
+
+export { Checkbox, wrappedChoiceList as ChoiceList, Radio };
+//# sourceMappingURL=Checkmark.js.map

package/components/Form/Checkmark.js.map

@@ -0,0 +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\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;IAA3C,IAAA,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAK,UAAU,cAApC,2BAAsC,CAAF;IACrD,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,uBAAuB,EAAE;YAC7C,gCAAgC,EAAE,MAAM,KAAK,SAAS;YACtD,8BAA8B,EAAE,MAAM,KAAK,OAAO;SACnD,CAAC;QAEF,+BAAO,SAAS,EAAC,qCAAqC;YACpD,0CAAW,UAAU,IAAE,SAAS,EAAC,8BAA8B,IAAG;YAClE,8BAAM,SAAS,EAAC,kCAAkC,GAAG;YACrD,8BAAM,SAAS,EAAC,8BAA8B,IAAE,KAAK,CAAQ,CACvD;QACP,IAAI,KACH,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM;YAClB,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAC9C,CACR,CACG,EACP;AACH,CAAC,CAAA;IAEY,QAAQ,GAAG,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,KAAK,cAAjB,SAAmB,CAAF;IACxC,OAAO,oBAAC,SAAS,eAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,IAAG,CAAA;AAC/D,EAAC;AACD,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAA;IAE1B,KAAK,GAAG,UAAC,EAA0B;IAAxB,IAAA,KAAK,WAAA,EAAK,KAAK,cAAjB,SAAmB,CAAF;IACrC,OAAO,oBAAC,SAAS,eAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,IAAG,CAAA;AAC5D,EAAC;AACD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAMjC,IAAM,UAAU,GAAG,UAAC,EAA6B;QAA3B,QAAQ,cAAA;IAC5B,QACE,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;IAEK,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,EAAC;AAC3D,iBAAiB,CAAC,WAAW,GAAG,YAAY;;;;"}

package/components/Form/ComposedField.js

@@ -0,0 +1,18 @@
+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) {
+        return index === 0
+            ? React.cloneElement(child, {
+                id: id,
+            })
+            : child;
+    })));
+};
+var wrappedComponent = withFieldLabelAndHint(ComposedFormField);
+wrappedComponent.displayName = "ComposedField";
+
+export { wrappedComponent as ComposedField };
+//# sourceMappingURL=ComposedField.js.map

package/components/Form/ComposedField.js.map

@@ -0,0 +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;QAArB,EAAE,QAAA,EAAE,QAAQ,cAAA;IACvC,QACE,6BAAK,SAAS,EAAC,0BAA0B,IACtC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK;QACjD,OAAO,KAAK,KAAK,CAAC;cACd,KAAK,CAAC,YAAY,CAAC,KAAyC,EAAE;gBAC5D,EAAE,IAAA;aACH,CAAC;cACF,KAAK,CAAA;KACV,CAAC,CACE,EACP;AACH,CAAC,CAAA;IAEK,gBAAgB,GAAG,qBAAqB,CAAC,iBAAiB,EAAC;AACjE,gBAAgB,CAAC,WAAW,GAAG,eAAe;;;;"}

package/components/Form/Fieldset.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+var Fieldset = function (_a) {
+    var legend = _a.legend, children = _a.children;
+    return (React.createElement("fieldset", { className: "cobalt-Fieldset" },
+        React.createElement("legend", null, legend),
+        children));
+};
+
+export { Fieldset };
+//# sourceMappingURL=Fieldset.js.map

package/components/Form/Fieldset.js.map

@@ -0,0 +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":";;IAOa,QAAQ,GAAG,UAAC,EAA2B;QAAzB,MAAM,YAAA,EAAE,QAAQ,cAAA;IACzC,QACE,kCAAU,SAAS,EAAC,iBAAiB;QACnC,oCAAS,MAAM,CAAU;QACxB,QAAQ,CACA,EACZ;AACH;;;;"}

package/components/Form/Hint.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+import { Icon } from '../Icon/index.js';
+
+var ICON_SIZE = 16;
+var getIcon = function (status) {
+    switch (status) {
+        case "success": {
+            return "checkCircle";
+        }
+        case "error": {
+            return "contextualWarningCircleFilled";
+        }
+        default: {
+            return "info";
+        }
+    }
+};
+var getIconColor = function (status) {
+    switch (status) {
+        case "success": {
+            return "signal";
+        }
+        case "error": {
+            return "essence";
+        }
+        default: {
+            return "graphiteLight";
+        }
+    }
+};
+var Hint = function (_a) {
+    var children = _a.children, status = _a.status;
+    return (React.createElement("div", { className: cx("cobalt-Hint", {
+            "cobalt-Hint--success": status === "success",
+            "cobalt-Hint--error": status === "error",
+        }) },
+        React.createElement("span", { className: "cobalt-Hint__Icon" },
+            React.createElement(Icon, { source: getIcon(status), size: ICON_SIZE, color: getIconColor(status) })),
+        React.createElement("span", { className: "cobalt-Hint__Message" }, children)));
+};
+
+export { Hint };
+//# sourceMappingURL=Hint.js.map

package/components/Form/Hint.js.map

@@ -0,0 +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;IACpD,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;YACd,OAAO,aAAa,CAAA;SACrB;QACD,KAAK,OAAO,EAAE;YACZ,OAAO,+BAA+B,CAAA;SACvC;QACD,SAAS;YACP,OAAO,MAAM,CAAA;SACd;KACF;AACH,CAAC,CAAA;AAED,IAAM,YAAY,GAAG,UAAC,MAAqC;IACzD,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;YACd,OAAO,QAAQ,CAAA;SAChB;QACD,KAAK,OAAO,EAAE;YACZ,OAAO,SAAS,CAAA;SACjB;QACD,SAAS;YACP,OAAO,eAAe,CAAA;SACvB;KACF;AACH,CAAC,CAAA;IAEY,IAAI,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA;IACrC,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE;YACnC,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC;QAEF,8BAAM,SAAS,EAAC,mBAAmB;YACjC,oBAAC,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,8BAAM,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}

package/components/Form/Select.js

@@ -0,0 +1,18 @@
+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"]);
+    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)));
+};
+var wrappedComponent = withFieldLabelAndHint(Select);
+wrappedComponent.displayName = "Select";
+
+export { wrappedComponent as Select };
+//# sourceMappingURL=Select.js.map

package/components/Form/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  children: any\n  forwardedRef?: React.Ref<HTMLSelectElement>\n} & FormElement &\n  React.SelectHTMLAttributes<HTMLSelectElement>\n\nconst Select = ({ children, status, forwardedRef, ...selectProps }: Props) => {\n  return (\n    <div\n      className={classNames(\"cobalt-SelectField\", {\n        \"cobalt-SelectField--success\": status === \"success\",\n        \"cobalt-SelectField--error\": status === \"error\",\n      })}\n    >\n      <select\n        {...selectProps}\n        ref={forwardedRef}\n        className=\"cobalt-SelectField__Input\"\n      >\n        {children}\n      </select>\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Select)\nwrappedComponent.displayName = \"Select\"\n\nexport { wrappedComponent as Select }\n"],"names":["classNames"],"mappings":";;;;;AAWA,IAAM,MAAM,GAAG,UAAC,EAAyD;IAAvD,IAAA,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,YAAY,kBAAA,EAAK,WAAW,cAAhD,sCAAkD,CAAF;IAC9D,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,oBAAoB,EAAE;YAC1C,6BAA6B,EAAE,MAAM,KAAK,SAAS;YACnD,2BAA2B,EAAE,MAAM,KAAK,OAAO;SAChD,CAAC;QAEF,2CACM,WAAW,IACf,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,2BAA2B,KAEpC,QAAQ,CACF,CACL,EACP;AACH,CAAC,CAAA;IAEK,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/components/Form/Slider.js

@@ -0,0 +1,36 @@
+import { __rest, __read, __assign } from '../../_virtual/_tslib.js';
+import React, { useState } from 'react';
+import { withFieldLabelAndHint } from './field.js';
+import { Slider as Slider$1 } from '@reach/slider';
+import cx from 'classnames';
+
+var Slider = function (_a) {
+    var defaultValue = _a.defaultValue, value = _a.value, min = _a.min, max = _a.max, status = _a.status, disabled = _a.disabled, onChange = _a.onChange, renderValue = _a.renderValue, ariaLabel = _a.ariaLabel, restProps = __rest(_a, ["defaultValue", "value", "min", "max", "status", "disabled", "onChange", "renderValue", "ariaLabel"]);
+    function initValue() {
+        if (value != null)
+            return value;
+        if (defaultValue != null)
+            return defaultValue;
+        if (min != null)
+            return min;
+        return 0;
+    }
+    var _b = __read(useState(function () { return initValue(); }), 2), sliderValue = _b[0], setSliderValue = _b[1];
+    return (React.createElement("div", { className: cx("cobalt-slider", {
+            "cobalt-slider--disabled": disabled,
+        }) },
+        renderValue && (React.createElement("div", { className: "cobalt-slider__value-container" }, renderValue(sliderValue, status))),
+        React.createElement(Slider$1, __assign({}, restProps, { "aria-label": ariaLabel, handleAlignment: "contain", defaultValue: defaultValue, value: value, min: min, max: max, disabled: disabled, onChange: function (newValue) {
+                setSliderValue(newValue);
+                onChange && onChange(newValue);
+            } }))));
+};
+var wrappedComponent = withFieldLabelAndHint(Slider);
+wrappedComponent.displayName = "Slider";
+var SliderValueMeta = function (_a) {
+    var children = _a.children;
+    return React.createElement("span", { className: "cobalt-slider__value-meta" }, children);
+};
+
+export { SliderValueMeta, wrappedComponent as default };
+//# sourceMappingURL=Slider.js.map

package/components/Form/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport {\n  Slider as ReachSlider,\n  SliderProps as ReachSliderProps,\n} from \"@reach/slider\"\nimport classNames from \"classnames\"\n\ntype NativeEventType =\n  | \"onPointerDown\"\n  | \"onPointerUp\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n\nexport type SliderPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  ariaLabel: string\n  value?: number\n  defaultValue?: number\n  /**\n   * minimum selectable value (default is 0)\n   */\n  min?: number\n  /**\n   * maximum selectable value (default is 100)\n   */\n  max?: number\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onChange?: (newValue: number) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: number,\n    status: FormElement[\"status\"]\n  ) => React.ReactElement\n\n  onPointerDown?: ReachSliderProps[\"onPointerDown\"]\n  onPointerUp?: ReachSliderProps[\"onPointerUp\"]\n  onMouseDown?: ReachSliderProps[\"onMouseDown\"]\n  onMouseMove?: ReachSliderProps[\"onMouseMove\"]\n  onMouseUp?: ReachSliderProps[\"onMouseUp\"]\n  onTouchStart?: ReachSliderProps[\"onTouchStart\"]\n  onTouchMove?: ReachSliderProps[\"onTouchMove\"]\n  onTouchEnd?: ReachSliderProps[\"onTouchEnd\"]\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FormElement &\n  Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    NativeEventType | \"css\" | \"enterKeyHint\"\n  >\n\nconst Slider = ({\n  defaultValue,\n  value,\n  min,\n  max,\n  status,\n  disabled,\n  onChange,\n  renderValue,\n  ariaLabel,\n  ...restProps\n}: SliderPropsType) => {\n  function initValue() {\n    if (value != null) return value\n    if (defaultValue != null) return defaultValue\n    if (min != null) return min\n    return 0\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <div\n      className={classNames(\"cobalt-slider\", {\n        \"cobalt-slider--disabled\": disabled,\n      })}\n    >\n      {renderValue && (\n        <div className=\"cobalt-slider__value-container\">\n          {renderValue(sliderValue, status)}\n        </div>\n      )}\n\n      <ReachSlider\n        {...restProps}\n        aria-label={ariaLabel}\n        handleAlignment=\"contain\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        disabled={disabled}\n        onChange={(newValue) => {\n          setSliderValue(newValue)\n          onChange && onChange(newValue)\n        }}\n      />\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Slider)\nwrappedComponent.displayName = \"Slider\"\n\nexport default wrappedComponent\n\ntype SliderValueMetaProps = {\n  children: React.ReactNode\n}\nexport const SliderValueMeta = ({ children }: SliderValueMetaProps) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["classNames","ReachSlider"],"mappings":";;;;;;AAkEA,IAAM,MAAM,GAAG,UAAC,EAWE;IAVhB,IAAA,YAAY,kBAAA,EACZ,KAAK,WAAA,EACL,GAAG,SAAA,EACH,GAAG,SAAA,EACH,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,SAAS,eAAA,EACN,SAAS,cAVE,qGAWf,CADa;IAEZ,SAAS,SAAS;QAChB,IAAI,KAAK,IAAI,IAAI;YAAE,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;YAAE,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;YAAE,OAAO,GAAG,CAAA;QAC3B,OAAO,CAAC,CAAA;KACT;IAEK,IAAA,KAAA,OAAgC,QAAQ,CAAC,cAAM,OAAA,SAAS,EAAE,GAAA,CAAC,IAAA,EAA1D,WAAW,QAAA,EAAE,cAAc,QAA+B,CAAA;IAEjE,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;YACrC,yBAAyB,EAAE,QAAQ;SACpC,CAAC;QAED,WAAW,KACV,6BAAK,SAAS,EAAC,gCAAgC,IAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;QAED,oBAACC,QAAW,eACN,SAAS,kBACD,SAAS,EACrB,eAAe,EAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAC,QAAQ;gBACjB,cAAc,CAAC,QAAQ,CAAC,CAAA;gBACxB,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,IACD,CACE,EACP;AACH,CAAC,CAAA;IAEK,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;IAO1B,eAAe,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA;IACxC,OAAO,8BAAM,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAQ,CAAA;AACtE;;;;"}

package/components/Form/Stepper.js

@@ -0,0 +1,78 @@
+import { __extends } from '../../_virtual/_tslib.js';
+import React, { PureComponent } from 'react';
+import cx from 'classnames';
+import { withFieldLabelAndHint } from './field.js';
+import { Button } from '../Button/index.js';
+
+var enforceInRange = function (value, min, max) {
+    var enforcedValue = value;
+    if (typeof max !== "undefined") {
+        enforcedValue = Math.min(enforcedValue, max);
+    }
+    if (typeof min !== "undefined") {
+        enforcedValue = Math.max(enforcedValue, min);
+    }
+    return enforcedValue;
+};
+var Stepper = /** @class */ (function (_super) {
+    __extends(Stepper, _super);
+    function Stepper(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onDecrement = function () {
+            (_this.props.min !== null || _this.state.value > _this.props.min) &&
+                _this.changeValue(parseFloat((_this.state.value - _this.props.step).toFixed(10)));
+        };
+        _this.onIncrement = function () {
+            (_this.props.max !== null || _this.state.value < _this.props.max) &&
+                _this.changeValue(parseFloat((_this.state.value + _this.props.step).toFixed(10)));
+        };
+        _this.changeValue = function (value) {
+            _this.setState({
+                value: enforceInRange(value, _this.props.min, _this.props.max),
+            }, function () {
+                _this.props.onChange && _this.props.onChange(_this.state.value);
+            });
+        };
+        if (props.step < 0)
+            throw new Error("Incorrect step value. Can't be below zero");
+        _this.onDecrement = _this.onDecrement.bind(_this);
+        _this.onIncrement = _this.onIncrement.bind(_this);
+        _this.changeValue = _this.changeValue.bind(_this);
+        _this.state = {
+            value: enforceInRange(props.value, props.min, props.max),
+        };
+        return _this;
+    }
+    Stepper.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        if (prevState.value !== this.state.value) {
+            this.changeValue(this.state.value);
+        }
+        else if (this.props.value !== this.state.value) {
+            this.changeValue(this.props.value);
+        }
+    };
+    Stepper.prototype.render = function () {
+        var _a = this.props, name = _a.name, status = _a.status, disabled = _a.disabled, min = _a.min, max = _a.max, children = _a.children;
+        return (React.createElement("div", { className: cx("cobalt-Stepper", {
+                "cobalt-Stepper--disabled": disabled,
+                "cobalt-Stepper--success": status === "success",
+                "cobalt-Stepper--error": status === "error",
+            }) },
+            React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
+                React.createElement(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onClick: this.onDecrement, type: "button" }, "-"),
+                React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
+                    children ? children(this.state.value) : this.state.value,
+                    React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
+                React.createElement(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onClick: this.onIncrement, type: "button" }, "+"))));
+    };
+    return Stepper;
+}(PureComponent));
+var wrappedComponent = withFieldLabelAndHint(Stepper);
+wrappedComponent.displayName = "Stepper";
+var StepperMeta = function (_a) {
+    var children = _a.children;
+    return React.createElement("div", { className: "cobalt-Stepper__Meta" }, children);
+};
+
+export { wrappedComponent as Stepper, StepperMeta };
+//# sourceMappingURL=Stepper.js.map

package/components/Form/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport { Button } from \"../Button\"\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <Button\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            onClick={this.onDecrement}\n            type={\"button\"}\n          >\n            -\n          </Button>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <Button\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            onClick={this.onIncrement}\n            type={\"button\"}\n          >\n            +\n          </Button>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}

package/components/Form/TextArea.js

@@ -0,0 +1,46 @@
+import { __extends, __rest, __assign } from '../../_virtual/_tslib.js';
+import React, { PureComponent } from 'react';
+import cx from 'classnames';
+import { withFieldLabelAndHint } from './field.js';
+
+var TextArea = /** @class */ (function (_super) {
+    __extends(TextArea, _super);
+    function TextArea(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.state = {
+            length: 0,
+            height: 0,
+        };
+        return _this;
+    }
+    TextArea.prototype.handleChange = function (event) {
+        if (this.props.autosize || this.props.maxLength) {
+            this.setState({
+                length: event.target.value.length,
+                height: event.target.scrollHeight + 2,
+            });
+        }
+        this.props.onChange && this.props.onChange(event);
+    };
+    TextArea.prototype.render = function () {
+        var _a = this.props; _a.autosize; var status = _a.status, maxLength = _a.maxLength, nativeProps = __rest(_a, ["autosize", "status", "maxLength"]);
+        return (React.createElement("div", { className: cx("cobalt-TextAreaField", {
+                "cobalt-TextAreaField--withLimit": maxLength && maxLength > 0,
+                "cobalt-TextAreaField--success": status === "success",
+                "cobalt-TextAreaField--error": status === "error",
+            }) },
+            React.createElement("textarea", __assign({}, nativeProps, { maxLength: maxLength, style: {
+                    height: this.state.height + "px",
+                }, onChange: this.handleChange, className: "cobalt-TextAreaField__Input" })),
+            this.state.length > 0 && maxLength && maxLength > 0 && (React.createElement("div", { className: "cobalt-TextAreaField__RemainingChars" },
+                maxLength - this.state.length,
+                " remaining characters"))));
+    };
+    return TextArea;
+}(PureComponent));
+var wrappedComponent = withFieldLabelAndHint(TextArea);
+wrappedComponent.displayName = "TextArea";
+
+export { wrappedComponent as TextArea };
+//# sourceMappingURL=TextArea.js.map