npm - @drivy/cobalt - Versions diffs - 0.15.0 → 0.16.2 - Mend

@drivy/cobalt 0.15.0 → 0.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (837) hide show

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

	@@ -1 +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":"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"}
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":"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"}

package/components/Form/CheckablePill.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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":";;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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":";;;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 CHANGED Viewed

@@ -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 };

package/components/Form/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
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~~,~~EAAA;AAAvD,IAAA,IAAA,~~QAAQ,~~GAAA,EAAA,CAAA,QAAA,~~EAAE,MAAM,~~GAAA,EAAA,CAAA,MAAA,~~EAAE,YAAY,~~GAAA~~,~~EAAA~~,~~CAAA,YAAA,EAAK,~~WAAW,~~GAAhD~~,~~MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,CAAkD,CAAF,CAAA~~;~~AAC9D~~,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,oBAAoB,EAAE;YAC1C,6BAA6B,EAAE,MAAM,KAAK,SAAS;YACnD,2BAA2B,EAAE,MAAM,KAAK,OAAO;SAChD,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,~~QAAA,CAAA,~~EAAA,~~EACM~~,WAAW,~~EAAA,~~EACf,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,2BAA2B,EAEpC,~~CAAA,~~EAAA,QAAQ,CACF,CACL,EACP;AACH,CAAC,CAAA;AAED,~~IAAM~~,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ;;;;"}
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,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,WAAW,EAAS,KAAI;AAC3E,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,oBAAoB,EAAE;YAC1C,6BAA6B,EAAE,MAAM,KAAK,SAAS;YACnD,2BAA2B,EAAE,MAAM,KAAK,OAAO;SAChD,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,WAAW,EACf,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,2BAA2B,EAEpC,EAAA,QAAQ,CACF,CACL,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/components/Form/Slider.js CHANGED Viewed

@@ -1,11 +1,9 @@
-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"]);
+const Slider = ({ defaultValue, value, min, max, status, disabled, onChange, renderValue, ariaLabel, ...restProps }) => {
     function initValue() {
         if (value != null)
             return value;
@@ -15,20 +13,19 @@ var Slider = function (_a) {
             return min;
         return 0;
     }
-    var _b = __read(useState(function () { return initValue(); }), 2), sliderValue = _b[0], setSliderValue = _b[1];
+    const [sliderValue, setSliderValue] = useState(() => initValue());
     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) {
+        React.createElement(Slider$1, { ...restProps, "aria-label": ariaLabel, handleAlignment: "contain", defaultValue: defaultValue, value: value, min: min, max: max, disabled: disabled, onChange: (newValue) => {
                 setSliderValue(newValue);
                 onChange && onChange(newValue);
-            } }))));
+            } })));
 };
-var wrappedComponent = withFieldLabelAndHint(Slider);
+const wrappedComponent = withFieldLabelAndHint(Slider);
 wrappedComponent.displayName = "Slider";
-var SliderValueMeta = function (_a) {
-    var children = _a.children;
+const SliderValueMeta = ({ children }) => {
     return React.createElement("span", { className: "cobalt-slider__value-meta" }, children);
 };

package/components/Form/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
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~~,~~EAAA;AAVhB,IAAA,IAAA,~~YAAY,~~GAAA,EAAA,CAAA,YAAA,~~EACZ,KAAK,~~GAAA,EAAA,CAAA,KAAA,~~EACL,GAAG,~~GAAA,EAAA,CAAA,GAAA,~~EACH,GAAG,~~GAAA,EAAA,CAAA,GAAA,~~EACH,MAAM,~~GAAA,EAAA,CAAA,MAAA,~~EACN,QAAQ,~~GAAA,EAAA,CAAA,QAAA,~~EACR,QAAQ,~~GAAA,EAAA,CAAA,QAAA,~~EACR,WAAW,~~GAAA,EAAA,CAAA,WAAA,~~EACX,SAAS,~~GAAA~~,~~EAAA~~,~~CAAA,SAAA,EACN,~~SAAS,~~GAAA~~,~~MAAA,CAAA,EAAA,EAVE,qGAWf,CADa,CAAA~~;~~AAEZ~~,IAAA,SAAS,SAAS,GAAA;QAChB,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;AAAE,YAAA,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;AAAE,YAAA,OAAO,GAAG,CAAA;AAC3B,QAAA,OAAO,CAAC,CAAA;KACT;~~AAEK~~,IAAA,~~IAAA~~,~~KAAA~~,~~MAAgC~~,~~CAAA~~,~~QAAQ~~,CAAC,~~YAAM~~,~~EAAA~~,~~OAAA~~,SAAS,EAAE,~~CAAA,EAAA,~~CAAC,~~IAAA,EAA1D,WAAW,QAAA,EAAE,cAAc,QAA+B,~~CAAA;AAEjE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;AACrC,YAAA,yBAAyB,EAAE,QAAQ;SACpC,CAAC,EAAA;AAED,QAAA,WAAW,KACV,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;AAED,QAAA,KAAA,CAAA,aAAA,CAACC,QAAW,EAAA,~~QAAA,CAAA,~~EAAA,~~EACN~~,SAAS,EAAA,~~EAAA,~~YAAA,EACD,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,~~EAAA~~;~~gBACjB~~,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxB,gBAAA,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,EAAA,~~CAAA,~~CACD,CACE,EACP;AACH,CAAC,CAAA;AAED,~~IAAM~~,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;~~AAOhC~~,~~IAAM,~~eAAe,GAAG,~~UAAC~~,~~EAAkC~~,~~EAAA;AAAhC,IAAA,IAAA,~~QAAQ,~~GAAA~~,~~EAAA,CAAA,QAAA,CAAA~~;~~AACxC~~,IAAA,OAAO,8BAAM,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAQ,CAAA;AACtE;;;;"}
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,MAAM,MAAM,GAAG,CAAC,EACd,YAAY,EACZ,KAAK,EACL,GAAG,EACH,GAAG,EACH,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,SAAS,EACI,KAAI;AACpB,IAAA,SAAS,SAAS,GAAA;QAChB,IAAI,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;AAAE,YAAA,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;AAAE,YAAA,OAAO,GAAG,CAAA;AAC3B,QAAA,OAAO,CAAC,CAAA;KACT;AAED,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,SAAS,EAAE,CAAC,CAAA;AAEjE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;AACrC,YAAA,yBAAyB,EAAE,QAAQ;SACpC,CAAC,EAAA;AAED,QAAA,WAAW,KACV,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;AAED,QAAA,KAAA,CAAA,aAAA,CAACC,QAAW,EAAA,EAAA,GACN,SAAS,EAAA,YAAA,EACD,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,CAAC,QAAQ,KAAI;gBACrB,cAAc,CAAC,QAAQ,CAAC,CAAA;AACxB,gBAAA,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,EAAA,CACD,CACE,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;MAO1B,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AACpE,IAAA,OAAO,8BAAM,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAQ,CAAA;AACtE;;;;"}

package/components/Form/Stepper.js CHANGED Viewed

@@ -1,11 +1,10 @@
-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;
+const enforceInRange = (value, min, max) => {
+    let enforcedValue = value;
     if (typeof max !== "undefined") {
         enforcedValue = Math.min(enforcedValue, max);
     }
@@ -14,45 +13,43 @@ var enforceInRange = function (value, min, max) {
     }
     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)));
+class Stepper extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.onDecrement = () => {
+            (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.onIncrement = () => {
+            (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);
+        this.changeValue = (value) => {
+            this.setState({
+                value: enforceInRange(value, this.props.min, this.props.max),
+            }, () => {
+                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 = {
+        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) {
+    componentDidUpdate(_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;
+    }
+    render() {
+        const { name, status, disabled, min, max, children } = this.props;
         return (React.createElement("div", { className: cx("cobalt-Stepper", {
                 "cobalt-Stepper--disabled": disabled,
                 "cobalt-Stepper--success": status === "success",
@@ -64,13 +61,11 @@ var Stepper = /** @class */ (function (_super) {
                     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);
+    }
+}
+const wrappedComponent = withFieldLabelAndHint(Stepper);
 wrappedComponent.displayName = "Stepper";
-var StepperMeta = function (_a) {
-    var children = _a.children;
+const StepperMeta = ({ children }) => {
     return React.createElement("div", { className: "cobalt-Stepper__Meta" }, children);
 };