@useblu/ocean-components - npm Package Compare versions

Comparing version 0.1.0-beta.19 to 0.1.0-beta.20

dist/_util/type.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+/// <reference types="react" />
 /**
@@ -3,0 +3,0 @@ * A generic type that receives two arguments: the name of the element, and an object with custom properties.

dist/index.d.ts

@@ -17,1 +17,3 @@ export { default as Typography } from './Typography';
 export * from './TextArea';
+export { default as Select } from './Select';
+export * from './Select';

dist/index.es.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useContext, useMemo, useRef, useEffect, useCallback, useState } from 'react';
 
@@ -41,2 +41,10 @@ /*! *****************************************************************************
 
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
 function createCommonjsModule(fn, basedir, module) {
@@ -188,8 +196,25 @@ return module = {
 
+function FormLabelBase(_a, ref) {
+    var children = _a.children, className = _a.className, component = _a.component, disabled = _a.disabled, rest = __rest(_a, ["children", "className", "component", "disabled"]);
+    return React.createElement(component || 'label', __assign({ ref: ref, className: classnames('ods-form-label', disabled && 'ods-form-label--disabled', className) }, rest), children);
+}
+var FormLabel = React.forwardRef(FormLabelBase);
+
+var FormControl = function (_a) {
+    var children = _a.children, labelProp = _a.label, htmlFor = _a.htmlFor, helperText = _a.helperText, error = _a.error, blocked = _a.blocked, disabled = _a.disabled;
+    var label;
+    if (labelProp) {
+        label =
+            typeof labelProp === 'string' ? (React.createElement(FormLabel, { htmlFor: htmlFor, disabled: disabled }, labelProp)) : (labelProp);
+    }
+    return (React.createElement("div", { className: "ods-form-control__root" },
+        label,
+        React.createElement("div", { className: classnames('ods-form-control__element', blocked && 'ods-form-control__element--blocked') }, children),
+        helperText && (React.createElement("p", { className: classnames('ods-form-control__helper-text', error && 'ods-form-control__helper-text--error', disabled && 'ods-form-control__helper-text--disabled') }, helperText))));
+};
+
 var Input = React.forwardRef(function Input(_a, ref) {
-    var type = _a.type, className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, rest = __rest(_a, ["type", "className", "label", "helperText", "blocked", "error", "id"]);
-    return (React.createElement("div", { className: "ods-input__root" },
-        label && (React.createElement("label", { className: "ods-input__label", htmlFor: id }, label)),
-        React.createElement("input", __assign({ ref: ref, type: type || 'text', id: id, className: classnames('ods-input', blocked && 'ods-input--blocked', error && 'ods-input--error', className) }, rest)),
-        helperText && (React.createElement("p", { className: classnames('ods-input__helper-text', error && 'ods-input__helper-text--error') }, helperText))));
+    var type = _a.type, className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, disabled = _a.disabled, rest = __rest(_a, ["type", "className", "label", "helperText", "blocked", "error", "id", "disabled"]);
+    return (React.createElement(FormControl, { label: label, htmlFor: id, helperText: helperText, error: error, blocked: blocked, disabled: disabled },
+        React.createElement("input", __assign({ ref: ref, type: type || 'text', id: id, className: classnames('ods-input', error && 'ods-input--error', className), disabled: disabled }, rest))));
 });
@@ -220,10 +245,392 @@
 var TextArea = React.forwardRef(function TextArea(_a, ref) {
-    var className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, rest = __rest(_a, ["className", "label", "helperText", "blocked", "error", "id"]);
-    return (React.createElement("div", { className: "ods-textarea__root" },
-        label && (React.createElement("label", { className: "ods-textarea__label", htmlFor: id }, label)),
-        React.createElement("textarea", __assign({ ref: ref, id: id, className: classnames('ods-textarea', blocked && 'ods-textarea--blocked', error && 'ods-textarea--error', className) }, rest)),
-        helperText && (React.createElement("p", { className: classnames('ods-textarea__helper-text', error && 'ods-textarea__helper-text--error') }, helperText))));
+    var className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, disabled = _a.disabled, rest = __rest(_a, ["className", "label", "helperText", "blocked", "error", "id", "disabled"]);
+    return (React.createElement(FormControl, { label: label, htmlFor: id, helperText: helperText, error: error, blocked: blocked, disabled: disabled },
+        React.createElement("textarea", __assign({ ref: ref, id: id, className: classnames('ods-textarea', error && 'ods-textarea--error', className), disabled: disabled }, rest))));
 });
 
-export { Button, Checkbox, Col, Container, index as Grid, Input, Link, Radio, Row, TextArea, Typography };
+var Context = React.createContext({});
+
+var Option = React.memo(function Option(option) {
+    var label = option.label, className = option.className, id = option.id, index = option.index, rest = __rest(option, ["label", "className", "id", "index"]);
+    var _a = useContext(Context), selected = _a.selected, onSelect = _a.onSelect, setIsExpanded = _a.setIsExpanded, refSelControl = _a.refSelControl;
+    var isSelected = useMemo(function () { return (selected === null || selected === void 0 ? void 0 : selected.index) === index; }, [
+        selected,
+        index,
+    ]);
+    var refOption = useRef(null);
+    useEffect(function () {
+        if (refOption && isSelected) {
+            refOption.current.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+            });
+        }
+    }, [isSelected, refOption]);
+    var handleClick = useCallback(function () {
+        onSelect(option);
+        refSelControl.current.focus();
+        setIsExpanded(false);
+    }, [onSelect, option, refSelControl, setIsExpanded]);
+    return (React.createElement("li", __assign({}, rest, { ref: refOption, id: id, role: "option", className: classnames('ods-select__option', isSelected && 'ods-select__option--selected', className), onClick: handleClick, "aria-selected": isSelected || undefined }),
+        React.createElement("span", null, label)));
+});
+
+var Listbox = React.memo(function Listbox(_a) {
+    var id = _a.id, options = _a.options, onKeyDown = _a.onKeyDown;
+    var selected = useContext(Context).selected;
+    var refListbox = useRef(null);
+    useEffect(function () {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        refListbox.current.focus();
+    }, []);
+    return (React.createElement("div", { className: "ods-select__listbox-wrapper" },
+        React.createElement("ul", { ref: refListbox, id: id, tabIndex: -1, role: "listbox", "aria-activedescendant": (selected === null || selected === void 0 ? void 0 : selected.id) || undefined, className: "ods-select__listbox", onKeyDown: onKeyDown }, options.map(function (_a) {
+            var value = _a.value, index = _a.index, rest = __rest(_a, ["value", "index"]);
+            return (React.createElement(Option, __assign({ key: value, value: value, index: index }, rest)));
+        }))));
+});
+
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical
+ * paths. Removing the logging code for production environments will keep the
+ * same logic and follow the same code paths.
+ */
+
+var __DEV__ = process.env.NODE_ENV !== 'production';
+
+/* eslint-disable no-restricted-globals, eqeqeq  */
+/**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also
+ * need affected components to render on the server. One example is when setting
+ * a component's descendants to retrieve their index values.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+ * Use sparingly only when the effect won't effect the rendered HTML to avoid
+ * any server/client mismatch.
+ *
+ * If a useLayoutEffect is needed and the result would create a mismatch, it's
+ * likely that the component in question shouldn't be rendered on the server at
+ * all, so a better approach would be to lazily render those in a parent
+ * component after client-side hydration.
+ *
+ * TODO: We are calling useLayoutEffect in a couple of places that will likely
+ * cause some issues for SSR users, whether the warning shows or not. Audit and
+ * fix these.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
+
+if (process.env.NODE_ENV !== "production") {
+  // In CJS files, process.env.NODE_ENV is stripped from our build, but we need
+  // it to prevent style checks from clogging up user logs while testing.
+  // This is a workaround until we can tweak the build a bit to accommodate.
+  var _ref = typeof process !== "undefined" ? process : {
+    env: {
+      NODE_ENV: "development"
+    }
+  },
+      env = _ref.env;
+}
+function canUseDOM() {
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
+}
+
+if (process.env.NODE_ENV !== "production") ;
+
+if (process.env.NODE_ENV !== "production") ;
+
+if (process.env.NODE_ENV !== "production") ;
+
+/*
+ * Welcome to @reach/auto-id!
+
+ * Let's see if we can make sense of why this hook exists and its
+ * implementation.
+ *
+ * Some background:
+ *   1. Accessibiliy APIs rely heavily on element IDs
+ *   2. Requiring developers to put IDs on every element in Reach UI is both
+ *      cumbersome and error-prone
+ *   3. With a component model, we can generate IDs for them!
+ *
+ * Solution 1: Generate random IDs.
+ *
+ * This works great as long as you don't server render your app. When React (in
+ * the client) tries to reuse the markup from the server, the IDs won't match
+ * and React will then recreate the entire DOM tree.
+ *
+ * Solution 2: Increment an integer
+ *
+ * This sounds great. Since we're rendering the exact same tree on the server
+ * and client, we can increment a counter and get a deterministic result between
+ * client and server. Also, JS integers can go up to nine-quadrillion. I'm
+ * pretty sure the tab will be closed before an app never needs
+ * 10 quadrillion IDs!
+ *
+ * Problem solved, right?
+ *
+ * Ah, but there's a catch! React's concurrent rendering makes this approach
+ * non-deterministic. While the client and server will end up with the same
+ * elements in the end, depending on suspense boundaries (and possibly some user
+ * input during the initial render) the incrementing integers won't always match
+ * up.
+ *
+ * Solution 3: Don't use IDs at all on the server; patch after first render.
+ *
+ * What we've done here is solution 2 with some tricks. With this approach, the
+ * ID returned is an empty string on the first render. This way the server and
+ * client have the same markup no matter how wild the concurrent rendering may
+ * have gotten.
+ *
+ * After the render, we patch up the components with an incremented ID. This
+ * causes a double render on any components with `useId`. Shouldn't be a problem
+ * since the components using this hook should be small, and we're only updating
+ * the ID attribute on the DOM, nothing big is happening.
+ *
+ * It doesn't have to be an incremented number, though--we could do generate
+ * random strings instead, but incrementing a number is probably the cheapest
+ * thing we can do.
+ *
+ * Additionally, we only do this patchup on the very first client render ever.
+ * Any calls to `useId` that happen dynamically in the client will be
+ * populated immediately with a value. So, we only get the double render after
+ * server hydration and never again, SO BACK OFF ALRIGHT?
+ */
+var serverHandoffComplete = false;
+var id = 0;
+
+var genId = function genId() {
+  return ++id;
+};
+/**
+ * useId
+ *
+ * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
+ *
+ * Note: The returned ID will initially be `null` and will update after a
+ * component mounts. Users may need to supply their own ID if they need
+ * consistent values for SSR.
+ *
+ * @see Docs https://reach.tech/auto-id
+ */
+
+
+var useId = function useId(idFromProps) {
+  /*
+   * If this instance isn't part of the initial render, we don't have to do the
+   * double render/patch-up dance. We can just generate the ID and return it.
+   */
+  var initialId = idFromProps || (serverHandoffComplete ? genId() : null);
+
+  var _useState = useState(initialId),
+      id = _useState[0],
+      setId = _useState[1];
+
+  useIsomorphicLayoutEffect(function () {
+    if (id === null) {
+      /*
+       * Patch the ID after render. We do this in `useLayoutEffect` to avoid any
+       * rendering flicker, though it'll make the first render slower (unlikely
+       * to matter, but you're welcome to measure your app and let us know if
+       * it's a problem).
+       */
+      setId(genId());
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  useEffect(function () {
+    if (serverHandoffComplete === false) {
+      /*
+       * Flag all future uses of `useId` to skip the update dance. This is in
+       * `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
+       * accidentally bail out of the patch-up dance prematurely.
+       */
+      serverHandoffComplete = true;
+    }
+  }, []);
+  return id != null ? String(id) : undefined;
+};
+
+/**
+ * Joins strings to format IDs for compound components.
+ *
+ * @param args
+ */
+var makeId = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.filter(function (val) { return val != null; }).join('--');
+};
+
+var useSelect = function (_a) {
+    var options = _a.options, id = _a.id, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, label = _a.label;
+    var controlId = useId(id);
+    var labelId = label ? makeId('label', controlId) : undefined;
+    var listboxId = makeId('listbox', controlId);
+    var isControlled = Boolean(value);
+    var _b = useState(), selected = _b[0], setSelected = _b[1];
+    var _c = useState(false), isExpanded = _c[0], setIsExpanded = _c[1];
+    var _d = useState(''), search = _d[0], setSearch = _d[1];
+    var currentIndex = selected ? selected.index : -1;
+    var optionsMemo = useMemo(function () {
+        return options.map(function (opt, index) { return (__assign(__assign({}, opt), { index: index, id: makeId("option-" + opt.value, listboxId) })); });
+    }, [listboxId, options]);
+    var onSelect = useCallback(function (option, canEmitChangeEvent) {
+        if (canEmitChangeEvent === void 0) { canEmitChangeEvent = true; }
+        if ((selected === null || selected === void 0 ? void 0 : selected.id) == option.id)
+            return;
+        setSelected(option);
+        if (canEmitChangeEvent && onChange) {
+            onChange(option);
+        }
+    }, [onChange, selected]);
+    var selectByIndex = useCallback(function (index) {
+        var option = optionsMemo[index];
+        option && onSelect(option);
+    }, [onSelect, optionsMemo]);
+    var selectClosestOption = useCallback(function (incremental) {
+        var lastIndex = optionsMemo.length - 1;
+        var newIndex = incremental == 0 ? 0 : currentIndex + incremental;
+        if (newIndex < 0)
+            newIndex = 0;
+        else if (newIndex > lastIndex || incremental == lastIndex)
+            newIndex = lastIndex;
+        selectByIndex(newIndex);
+    }, [currentIndex, optionsMemo.length, selectByIndex]);
+    var selectByValue = useCallback(function (val) {
+        var option = optionsMemo.find(function (o) { return o.value == val; });
+        option && onSelect(option, false);
+    }, [onSelect, optionsMemo]);
+    useEffect(function () {
+        if (isControlled)
+            selectByValue(value);
+        else if (defaultValue && !selected)
+            selectByValue(defaultValue);
+    }, [defaultValue, isControlled, selectByValue, selected, value]);
+    useEffect(function () {
+        var timer;
+        if (search) {
+            timer = setTimeout(function () {
+                var optionList = __spreadArrays(optionsMemo.slice(currentIndex + 1), optionsMemo.slice(0, currentIndex + 1));
+                var option = optionList.find(function (o) {
+                    return o.label.toLowerCase().startsWith(search.toLowerCase());
+                });
+                if (option)
+                    selectByIndex(option.index);
+                setSearch('');
+            }, 500);
+        }
+        return function () { return clearTimeout(timer); };
+    }, [currentIndex, optionsMemo, search, selectByIndex]);
+    return {
+        controlId: controlId,
+        labelId: labelId,
+        listboxId: listboxId,
+        selected: selected,
+        selectClosestOption: selectClosestOption,
+        options: optionsMemo,
+        onSelect: onSelect,
+        isExpanded: isExpanded,
+        setIsExpanded: setIsExpanded,
+        setSearch: setSearch,
+    };
+};
+
+var Select = function (_a) {
+    var label = _a.label, id = _a.id, helperText = _a.helperText, error = _a.error, blocked = _a.blocked, optionsProp = _a.options, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, disabled = _a.disabled, ariaLabel = _a.ariaLabel, onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder, rest = __rest(_a, ["label", "id", "helperText", "error", "blocked", "options", "name", "value", "defaultValue", "disabled", "ariaLabel", "onChange", "className", "placeholder"]);
+    var _b = useSelect({
+        options: optionsProp,
+        id: id,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        label: label,
+    }), controlId = _b.controlId, labelId = _b.labelId, listboxId = _b.listboxId, selected = _b.selected, selectClosestOption = _b.selectClosestOption, options = _b.options, onSelect = _b.onSelect, isExpanded = _b.isExpanded, setIsExpanded = _b.setIsExpanded, setSearch = _b.setSearch;
+    var timeOutId = useRef();
+    var refSelControl = useRef(null);
+    var handleKeyDown = useCallback(function (event) {
+        var key = event.key;
+        var mapEventsWithInc = {
+            ArrowDown: 1,
+            ArrowUp: -1,
+            PageDown: 4,
+            PageUp: -4,
+            Home: 0,
+            End: options.length - 1,
+        };
+        var incremental = mapEventsWithInc[key];
+        if (incremental != null)
+            selectClosestOption(incremental);
+        setSearch(function (keysSoFar) { return keysSoFar + key; });
+    }, [options.length, selectClosestOption, setSearch]);
+    var handleListboxKeyDown = useCallback(function (event) {
+        switch (event.key) {
+            case 'Enter':
+            case 'Escape':
+                event.preventDefault();
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                refSelControl.current.focus();
+                setIsExpanded(false);
+                break;
+            default:
+                handleKeyDown(event);
+        }
+    }, [handleKeyDown, setIsExpanded]);
+    // We close the popover on the next tick by using setTimeout.
+    // This is necessary because we need to first check if
+    // another child of the element has received focus as
+    // the blur event fires prior to the new focus event.
+    var onBlurHandler = function () {
+        timeOutId.current = setTimeout(function () {
+            setIsExpanded(false);
+        });
+    };
+    // If a child receives focus, do not close the popover.
+    var onFocusHandler = function () {
+        clearTimeout(timeOutId.current);
+    };
+    return (React.createElement(FormControl, { label: label && (React.createElement(FormLabel, { component: "span", disabled: disabled, id: labelId }, label)), helperText: helperText, error: error, blocked: blocked, disabled: disabled },
+        React.createElement(Context.Provider, { value: {
+                selected: selected,
+                onSelect: onSelect,
+                setIsExpanded: setIsExpanded,
+                refSelControl: refSelControl,
+            } },
+            React.createElement("div", { className: "ods-select__root", onBlur: onBlurHandler, onFocus: onFocusHandler },
+                React.createElement("button", __assign({}, rest, { ref: refSelControl, id: controlId, type: "button", className: classnames('ods-select__control', isExpanded && 'ods-select__control--expanded', error && 'ods-select__control--error', className), disabled: disabled, onClick: function () { return setIsExpanded(!isExpanded); }, onKeyDown: handleKeyDown, "aria-expanded": isExpanded || undefined, "aria-haspopup": "listbox", "aria-labelledby": ariaLabel
+                        ? undefined
+                        : [labelId, controlId].filter(Boolean).join(' '), "aria-label": ariaLabel }),
+                    React.createElement("span", { className: classnames('ods-select__value', {
+                            'ods-select__value--empty': !(selected === null || selected === void 0 ? void 0 : selected.label),
+                        }) }, (selected === null || selected === void 0 ? void 0 : selected.label) || placeholder),
+                    React.createElement("i", { className: classnames('ods-select__arrow', {
+                            'ods-select__arrow--up': isExpanded,
+                            'ods-select__arrow--down': !isExpanded,
+                            'ods-select__arrow--disabled': disabled,
+                        }) }),
+                    name && (React.createElement("input", { type: "hidden", name: name, value: (selected === null || selected === void 0 ? void 0 : selected.value) || '' }))),
+                isExpanded && (React.createElement(Listbox, { id: listboxId, options: options, onKeyDown: handleListboxKeyDown }))))));
+};
+
+export { Button, Checkbox, Col, Container, index as Grid, Input, Link, Radio, Row, Select, TextArea, Typography };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -49,2 +49,10 @@ 'use strict';
 
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
 function createCommonjsModule(fn, basedir, module) {
@@ -196,8 +204,25 @@ return module = {
 
+function FormLabelBase(_a, ref) {
+    var children = _a.children, className = _a.className, component = _a.component, disabled = _a.disabled, rest = __rest(_a, ["children", "className", "component", "disabled"]);
+    return React__default['default'].createElement(component || 'label', __assign({ ref: ref, className: classnames('ods-form-label', disabled && 'ods-form-label--disabled', className) }, rest), children);
+}
+var FormLabel = React__default['default'].forwardRef(FormLabelBase);
+
+var FormControl = function (_a) {
+    var children = _a.children, labelProp = _a.label, htmlFor = _a.htmlFor, helperText = _a.helperText, error = _a.error, blocked = _a.blocked, disabled = _a.disabled;
+    var label;
+    if (labelProp) {
+        label =
+            typeof labelProp === 'string' ? (React__default['default'].createElement(FormLabel, { htmlFor: htmlFor, disabled: disabled }, labelProp)) : (labelProp);
+    }
+    return (React__default['default'].createElement("div", { className: "ods-form-control__root" },
+        label,
+        React__default['default'].createElement("div", { className: classnames('ods-form-control__element', blocked && 'ods-form-control__element--blocked') }, children),
+        helperText && (React__default['default'].createElement("p", { className: classnames('ods-form-control__helper-text', error && 'ods-form-control__helper-text--error', disabled && 'ods-form-control__helper-text--disabled') }, helperText))));
+};
+
 var Input = React__default['default'].forwardRef(function Input(_a, ref) {
-    var type = _a.type, className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, rest = __rest(_a, ["type", "className", "label", "helperText", "blocked", "error", "id"]);
-    return (React__default['default'].createElement("div", { className: "ods-input__root" },
-        label && (React__default['default'].createElement("label", { className: "ods-input__label", htmlFor: id }, label)),
-        React__default['default'].createElement("input", __assign({ ref: ref, type: type || 'text', id: id, className: classnames('ods-input', blocked && 'ods-input--blocked', error && 'ods-input--error', className) }, rest)),
-        helperText && (React__default['default'].createElement("p", { className: classnames('ods-input__helper-text', error && 'ods-input__helper-text--error') }, helperText))));
+    var type = _a.type, className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, disabled = _a.disabled, rest = __rest(_a, ["type", "className", "label", "helperText", "blocked", "error", "id", "disabled"]);
+    return (React__default['default'].createElement(FormControl, { label: label, htmlFor: id, helperText: helperText, error: error, blocked: blocked, disabled: disabled },
+        React__default['default'].createElement("input", __assign({ ref: ref, type: type || 'text', id: id, className: classnames('ods-input', error && 'ods-input--error', className), disabled: disabled }, rest))));
 });
@@ -228,9 +253,391 @@
 var TextArea = React__default['default'].forwardRef(function TextArea(_a, ref) {
-    var className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, rest = __rest(_a, ["className", "label", "helperText", "blocked", "error", "id"]);
-    return (React__default['default'].createElement("div", { className: "ods-textarea__root" },
-        label && (React__default['default'].createElement("label", { className: "ods-textarea__label", htmlFor: id }, label)),
-        React__default['default'].createElement("textarea", __assign({ ref: ref, id: id, className: classnames('ods-textarea', blocked && 'ods-textarea--blocked', error && 'ods-textarea--error', className) }, rest)),
-        helperText && (React__default['default'].createElement("p", { className: classnames('ods-textarea__helper-text', error && 'ods-textarea__helper-text--error') }, helperText))));
+    var className = _a.className, label = _a.label, helperText = _a.helperText, blocked = _a.blocked, error = _a.error, id = _a.id, disabled = _a.disabled, rest = __rest(_a, ["className", "label", "helperText", "blocked", "error", "id", "disabled"]);
+    return (React__default['default'].createElement(FormControl, { label: label, htmlFor: id, helperText: helperText, error: error, blocked: blocked, disabled: disabled },
+        React__default['default'].createElement("textarea", __assign({ ref: ref, id: id, className: classnames('ods-textarea', error && 'ods-textarea--error', className), disabled: disabled }, rest))));
 });
 
+var Context = React__default['default'].createContext({});
+
+var Option = React__default['default'].memo(function Option(option) {
+    var label = option.label, className = option.className, id = option.id, index = option.index, rest = __rest(option, ["label", "className", "id", "index"]);
+    var _a = React.useContext(Context), selected = _a.selected, onSelect = _a.onSelect, setIsExpanded = _a.setIsExpanded, refSelControl = _a.refSelControl;
+    var isSelected = React.useMemo(function () { return (selected === null || selected === void 0 ? void 0 : selected.index) === index; }, [
+        selected,
+        index,
+    ]);
+    var refOption = React.useRef(null);
+    React.useEffect(function () {
+        if (refOption && isSelected) {
+            refOption.current.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+            });
+        }
+    }, [isSelected, refOption]);
+    var handleClick = React.useCallback(function () {
+        onSelect(option);
+        refSelControl.current.focus();
+        setIsExpanded(false);
+    }, [onSelect, option, refSelControl, setIsExpanded]);
+    return (React__default['default'].createElement("li", __assign({}, rest, { ref: refOption, id: id, role: "option", className: classnames('ods-select__option', isSelected && 'ods-select__option--selected', className), onClick: handleClick, "aria-selected": isSelected || undefined }),
+        React__default['default'].createElement("span", null, label)));
+});
+
+var Listbox = React__default['default'].memo(function Listbox(_a) {
+    var id = _a.id, options = _a.options, onKeyDown = _a.onKeyDown;
+    var selected = React.useContext(Context).selected;
+    var refListbox = React.useRef(null);
+    React.useEffect(function () {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        refListbox.current.focus();
+    }, []);
+    return (React__default['default'].createElement("div", { className: "ods-select__listbox-wrapper" },
+        React__default['default'].createElement("ul", { ref: refListbox, id: id, tabIndex: -1, role: "listbox", "aria-activedescendant": (selected === null || selected === void 0 ? void 0 : selected.id) || undefined, className: "ods-select__listbox", onKeyDown: onKeyDown }, options.map(function (_a) {
+            var value = _a.value, index = _a.index, rest = __rest(_a, ["value", "index"]);
+            return (React__default['default'].createElement(Option, __assign({ key: value, value: value, index: index }, rest)));
+        }))));
+});
+
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical
+ * paths. Removing the logging code for production environments will keep the
+ * same logic and follow the same code paths.
+ */
+
+var __DEV__ = process.env.NODE_ENV !== 'production';
+
+/* eslint-disable no-restricted-globals, eqeqeq  */
+/**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also
+ * need affected components to render on the server. One example is when setting
+ * a component's descendants to retrieve their index values.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+ * Use sparingly only when the effect won't effect the rendered HTML to avoid
+ * any server/client mismatch.
+ *
+ * If a useLayoutEffect is needed and the result would create a mismatch, it's
+ * likely that the component in question shouldn't be rendered on the server at
+ * all, so a better approach would be to lazily render those in a parent
+ * component after client-side hydration.
+ *
+ * TODO: We are calling useLayoutEffect in a couple of places that will likely
+ * cause some issues for SSR users, whether the warning shows or not. Audit and
+ * fix these.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React__default['default'].useLayoutEffect : React__default['default'].useEffect;
+
+if (process.env.NODE_ENV !== "production") {
+  // In CJS files, process.env.NODE_ENV is stripped from our build, but we need
+  // it to prevent style checks from clogging up user logs while testing.
+  // This is a workaround until we can tweak the build a bit to accommodate.
+  var _ref = typeof process !== "undefined" ? process : {
+    env: {
+      NODE_ENV: "development"
+    }
+  },
+      env = _ref.env;
+}
+function canUseDOM() {
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
+}
+
+if (process.env.NODE_ENV !== "production") ;
+
+if (process.env.NODE_ENV !== "production") ;
+
+if (process.env.NODE_ENV !== "production") ;
+
+/*
+ * Welcome to @reach/auto-id!
+
+ * Let's see if we can make sense of why this hook exists and its
+ * implementation.
+ *
+ * Some background:
+ *   1. Accessibiliy APIs rely heavily on element IDs
+ *   2. Requiring developers to put IDs on every element in Reach UI is both
+ *      cumbersome and error-prone
+ *   3. With a component model, we can generate IDs for them!
+ *
+ * Solution 1: Generate random IDs.
+ *
+ * This works great as long as you don't server render your app. When React (in
+ * the client) tries to reuse the markup from the server, the IDs won't match
+ * and React will then recreate the entire DOM tree.
+ *
+ * Solution 2: Increment an integer
+ *
+ * This sounds great. Since we're rendering the exact same tree on the server
+ * and client, we can increment a counter and get a deterministic result between
+ * client and server. Also, JS integers can go up to nine-quadrillion. I'm
+ * pretty sure the tab will be closed before an app never needs
+ * 10 quadrillion IDs!
+ *
+ * Problem solved, right?
+ *
+ * Ah, but there's a catch! React's concurrent rendering makes this approach
+ * non-deterministic. While the client and server will end up with the same
+ * elements in the end, depending on suspense boundaries (and possibly some user
+ * input during the initial render) the incrementing integers won't always match
+ * up.
+ *
+ * Solution 3: Don't use IDs at all on the server; patch after first render.
+ *
+ * What we've done here is solution 2 with some tricks. With this approach, the
+ * ID returned is an empty string on the first render. This way the server and
+ * client have the same markup no matter how wild the concurrent rendering may
+ * have gotten.
+ *
+ * After the render, we patch up the components with an incremented ID. This
+ * causes a double render on any components with `useId`. Shouldn't be a problem
+ * since the components using this hook should be small, and we're only updating
+ * the ID attribute on the DOM, nothing big is happening.
+ *
+ * It doesn't have to be an incremented number, though--we could do generate
+ * random strings instead, but incrementing a number is probably the cheapest
+ * thing we can do.
+ *
+ * Additionally, we only do this patchup on the very first client render ever.
+ * Any calls to `useId` that happen dynamically in the client will be
+ * populated immediately with a value. So, we only get the double render after
+ * server hydration and never again, SO BACK OFF ALRIGHT?
+ */
+var serverHandoffComplete = false;
+var id = 0;
+
+var genId = function genId() {
+  return ++id;
+};
+/**
+ * useId
+ *
+ * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
+ *
+ * Note: The returned ID will initially be `null` and will update after a
+ * component mounts. Users may need to supply their own ID if they need
+ * consistent values for SSR.
+ *
+ * @see Docs https://reach.tech/auto-id
+ */
+
+
+var useId = function useId(idFromProps) {
+  /*
+   * If this instance isn't part of the initial render, we don't have to do the
+   * double render/patch-up dance. We can just generate the ID and return it.
+   */
+  var initialId = idFromProps || (serverHandoffComplete ? genId() : null);
+
+  var _useState = React.useState(initialId),
+      id = _useState[0],
+      setId = _useState[1];
+
+  useIsomorphicLayoutEffect(function () {
+    if (id === null) {
+      /*
+       * Patch the ID after render. We do this in `useLayoutEffect` to avoid any
+       * rendering flicker, though it'll make the first render slower (unlikely
+       * to matter, but you're welcome to measure your app and let us know if
+       * it's a problem).
+       */
+      setId(genId());
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  React.useEffect(function () {
+    if (serverHandoffComplete === false) {
+      /*
+       * Flag all future uses of `useId` to skip the update dance. This is in
+       * `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
+       * accidentally bail out of the patch-up dance prematurely.
+       */
+      serverHandoffComplete = true;
+    }
+  }, []);
+  return id != null ? String(id) : undefined;
+};
+
+/**
+ * Joins strings to format IDs for compound components.
+ *
+ * @param args
+ */
+var makeId = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.filter(function (val) { return val != null; }).join('--');
+};
+
+var useSelect = function (_a) {
+    var options = _a.options, id = _a.id, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, label = _a.label;
+    var controlId = useId(id);
+    var labelId = label ? makeId('label', controlId) : undefined;
+    var listboxId = makeId('listbox', controlId);
+    var isControlled = Boolean(value);
+    var _b = React.useState(), selected = _b[0], setSelected = _b[1];
+    var _c = React.useState(false), isExpanded = _c[0], setIsExpanded = _c[1];
+    var _d = React.useState(''), search = _d[0], setSearch = _d[1];
+    var currentIndex = selected ? selected.index : -1;
+    var optionsMemo = React.useMemo(function () {
+        return options.map(function (opt, index) { return (__assign(__assign({}, opt), { index: index, id: makeId("option-" + opt.value, listboxId) })); });
+    }, [listboxId, options]);
+    var onSelect = React.useCallback(function (option, canEmitChangeEvent) {
+        if (canEmitChangeEvent === void 0) { canEmitChangeEvent = true; }
+        if ((selected === null || selected === void 0 ? void 0 : selected.id) == option.id)
+            return;
+        setSelected(option);
+        if (canEmitChangeEvent && onChange) {
+            onChange(option);
+        }
+    }, [onChange, selected]);
+    var selectByIndex = React.useCallback(function (index) {
+        var option = optionsMemo[index];
+        option && onSelect(option);
+    }, [onSelect, optionsMemo]);
+    var selectClosestOption = React.useCallback(function (incremental) {
+        var lastIndex = optionsMemo.length - 1;
+        var newIndex = incremental == 0 ? 0 : currentIndex + incremental;
+        if (newIndex < 0)
+            newIndex = 0;
+        else if (newIndex > lastIndex || incremental == lastIndex)
+            newIndex = lastIndex;
+        selectByIndex(newIndex);
+    }, [currentIndex, optionsMemo.length, selectByIndex]);
+    var selectByValue = React.useCallback(function (val) {
+        var option = optionsMemo.find(function (o) { return o.value == val; });
+        option && onSelect(option, false);
+    }, [onSelect, optionsMemo]);
+    React.useEffect(function () {
+        if (isControlled)
+            selectByValue(value);
+        else if (defaultValue && !selected)
+            selectByValue(defaultValue);
+    }, [defaultValue, isControlled, selectByValue, selected, value]);
+    React.useEffect(function () {
+        var timer;
+        if (search) {
+            timer = setTimeout(function () {
+                var optionList = __spreadArrays(optionsMemo.slice(currentIndex + 1), optionsMemo.slice(0, currentIndex + 1));
+                var option = optionList.find(function (o) {
+                    return o.label.toLowerCase().startsWith(search.toLowerCase());
+                });
+                if (option)
+                    selectByIndex(option.index);
+                setSearch('');
+            }, 500);
+        }
+        return function () { return clearTimeout(timer); };
+    }, [currentIndex, optionsMemo, search, selectByIndex]);
+    return {
+        controlId: controlId,
+        labelId: labelId,
+        listboxId: listboxId,
+        selected: selected,
+        selectClosestOption: selectClosestOption,
+        options: optionsMemo,
+        onSelect: onSelect,
+        isExpanded: isExpanded,
+        setIsExpanded: setIsExpanded,
+        setSearch: setSearch,
+    };
+};
+
+var Select = function (_a) {
+    var label = _a.label, id = _a.id, helperText = _a.helperText, error = _a.error, blocked = _a.blocked, optionsProp = _a.options, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, disabled = _a.disabled, ariaLabel = _a.ariaLabel, onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder, rest = __rest(_a, ["label", "id", "helperText", "error", "blocked", "options", "name", "value", "defaultValue", "disabled", "ariaLabel", "onChange", "className", "placeholder"]);
+    var _b = useSelect({
+        options: optionsProp,
+        id: id,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        label: label,
+    }), controlId = _b.controlId, labelId = _b.labelId, listboxId = _b.listboxId, selected = _b.selected, selectClosestOption = _b.selectClosestOption, options = _b.options, onSelect = _b.onSelect, isExpanded = _b.isExpanded, setIsExpanded = _b.setIsExpanded, setSearch = _b.setSearch;
+    var timeOutId = React.useRef();
+    var refSelControl = React.useRef(null);
+    var handleKeyDown = React.useCallback(function (event) {
+        var key = event.key;
+        var mapEventsWithInc = {
+            ArrowDown: 1,
+            ArrowUp: -1,
+            PageDown: 4,
+            PageUp: -4,
+            Home: 0,
+            End: options.length - 1,
+        };
+        var incremental = mapEventsWithInc[key];
+        if (incremental != null)
+            selectClosestOption(incremental);
+        setSearch(function (keysSoFar) { return keysSoFar + key; });
+    }, [options.length, selectClosestOption, setSearch]);
+    var handleListboxKeyDown = React.useCallback(function (event) {
+        switch (event.key) {
+            case 'Enter':
+            case 'Escape':
+                event.preventDefault();
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                refSelControl.current.focus();
+                setIsExpanded(false);
+                break;
+            default:
+                handleKeyDown(event);
+        }
+    }, [handleKeyDown, setIsExpanded]);
+    // We close the popover on the next tick by using setTimeout.
+    // This is necessary because we need to first check if
+    // another child of the element has received focus as
+    // the blur event fires prior to the new focus event.
+    var onBlurHandler = function () {
+        timeOutId.current = setTimeout(function () {
+            setIsExpanded(false);
+        });
+    };
+    // If a child receives focus, do not close the popover.
+    var onFocusHandler = function () {
+        clearTimeout(timeOutId.current);
+    };
+    return (React__default['default'].createElement(FormControl, { label: label && (React__default['default'].createElement(FormLabel, { component: "span", disabled: disabled, id: labelId }, label)), helperText: helperText, error: error, blocked: blocked, disabled: disabled },
+        React__default['default'].createElement(Context.Provider, { value: {
+                selected: selected,
+                onSelect: onSelect,
+                setIsExpanded: setIsExpanded,
+                refSelControl: refSelControl,
+            } },
+            React__default['default'].createElement("div", { className: "ods-select__root", onBlur: onBlurHandler, onFocus: onFocusHandler },
+                React__default['default'].createElement("button", __assign({}, rest, { ref: refSelControl, id: controlId, type: "button", className: classnames('ods-select__control', isExpanded && 'ods-select__control--expanded', error && 'ods-select__control--error', className), disabled: disabled, onClick: function () { return setIsExpanded(!isExpanded); }, onKeyDown: handleKeyDown, "aria-expanded": isExpanded || undefined, "aria-haspopup": "listbox", "aria-labelledby": ariaLabel
+                        ? undefined
+                        : [labelId, controlId].filter(Boolean).join(' '), "aria-label": ariaLabel }),
+                    React__default['default'].createElement("span", { className: classnames('ods-select__value', {
+                            'ods-select__value--empty': !(selected === null || selected === void 0 ? void 0 : selected.label),
+                        }) }, (selected === null || selected === void 0 ? void 0 : selected.label) || placeholder),
+                    React__default['default'].createElement("i", { className: classnames('ods-select__arrow', {
+                            'ods-select__arrow--up': isExpanded,
+                            'ods-select__arrow--down': !isExpanded,
+                            'ods-select__arrow--disabled': disabled,
+                        }) }),
+                    name && (React__default['default'].createElement("input", { type: "hidden", name: name, value: (selected === null || selected === void 0 ? void 0 : selected.value) || '' }))),
+                isExpanded && (React__default['default'].createElement(Listbox, { id: listboxId, options: options, onKeyDown: handleListboxKeyDown }))))));
+};
+
 exports.Button = Button;
@@ -245,4 +652,5 @@ exports.Checkbox = Checkbox;
 exports.Row = Row;
+exports.Select = Select;
 exports.TextArea = TextArea;
 exports.Typography = Typography;
 //# sourceMappingURL=index.js.map

dist/Input/Input.d.ts

 import React from 'react';
+import { FormControlProps } from '../FormControl';
 import './styles/input.scss';
@@ -9,21 +10,3 @@ declare const Input: React.ForwardRefExoticComponent<{
     type?: "number" | "text" | "email" | "password" | "search" | "tel" | "url" | undefined;
-    /**
-     * The label content.
-     */
-    label?: React.ReactNode;
-    /**
-     * If `true`, the label will be displayed in an error state.
-     * @default false
-     */
-    error?: boolean | undefined;
-    /**
-     * The helper text content.
-     */
-    helperText?: React.ReactNode;
-    /**
-     * Spans the full width of the Input parent.
-     * @default false
-     */
-    blocked?: boolean | undefined;
-} & Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLInputElement>>;
+} & Pick<FormControlProps, "label" | "htmlFor" | "error" | "helperText" | "blocked" | "disabled"> & Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children" | "disabled" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

dist/Switch/Switch.d.ts

 import React from 'react';
 import './styles/switch.scss';
-declare const Switch: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLInputElement>>;
+declare const Switch: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children" | "disabled" | "value" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLInputElement>>;
 export default Switch;

dist/TextArea/TextArea.d.ts

 import React from 'react';
 import './styles/textarea.scss';
-declare const TextArea: React.ForwardRefExoticComponent<{
-    /**
-     * The label content.
-     */
-    label?: React.ReactNode;
-    /**
-     * If `true`, the label will be displayed in an error state.
-     * @default false
-     */
-    error?: boolean | undefined;
-    /**
-     * The helper text content.
-     */
-    helperText?: React.ReactNode;
-    /**
-     * Spans the full width of the TextArea parent.
-     * @default false
-     */
-    blocked?: boolean | undefined;
-} & Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "form" | "slot" | "style" | "title" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "value" | "wrap" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLTextAreaElement>>;
+import { FormControlProps } from '../FormControl';
+declare const TextArea: React.ForwardRefExoticComponent<Pick<FormControlProps, "label" | "htmlFor" | "error" | "helperText" | "blocked" | "disabled"> & Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "children" | "disabled" | "form" | "slot" | "style" | "title" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "value" | "wrap" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package.json

 {
   "name": "@useblu/ocean-components",
-  "version": "0.1.0-beta.19",
+  "version": "0.1.0-beta.20",
   "description": "React components that implement Ocean's Design System.",
@@ -20,6 +20,6 @@ "main": "dist/index.js",
     "build:lib": "rollup -c",
-    "build:storybook": "build-storybook",
+    "build:storybook": "build-storybook -s .storybook/assets",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
-    "deploy:storybook": "storybook-to-ghpages",
+    "storybook": "start-storybook -p 6006 -s .storybook/assets",
+    "deploy:storybook": "storybook-to-ghpages -s build:storybook",
     "format": "prettier --write 'src/**'",
@@ -39,35 +39,37 @@ "format:check": "prettier --list-different src/**/*",
     "@rollup/plugin-node-resolve": "^9.0.0",
-    "@storybook/addon-a11y": "^6.0.12",
-    "@storybook/addon-backgrounds": "^6.0.12",
-    "@storybook/addon-controls": "^6.0.12",
-    "@storybook/addon-docs": "^6.0.12",
-    "@storybook/addon-viewport": "^6.0.12",
-    "@storybook/react": "^6.0.12",
+    "@storybook/addon-a11y": "^6.0.20",
+    "@storybook/addon-backgrounds": "^6.0.20",
+    "@storybook/addon-controls": "^6.0.20",
+    "@storybook/addon-docs": "^6.0.20",
+    "@storybook/addon-viewport": "^6.0.20",
+    "@storybook/addons": "^6.0.12",
+    "@storybook/react": "^6.0.20",
     "@storybook/storybook-deployer": "^2.8.6",
-    "@testing-library/jest-dom": "^5.11.3",
-    "@testing-library/react": "^10.4.8",
+    "@storybook/theming": "^6.0.19",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.2",
     "@types/classnames": "2.2.10",
-    "@types/jest": "^26.0.10",
-    "@types/node": "^14.6.0",
-    "@types/react": "^16.9.46",
+    "@types/jest": "^26.0.13",
+    "@types/node": "^14.10.0",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.5",
     "@types/rollup-plugin-postcss": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^3.9.1",
-    "@typescript-eslint/parser": "^3.9.1",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.1",
     "@useblu/tokens": "^2.0.0",
-    "eslint": "^7.7.0",
+    "eslint": "^7.8.1",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-jest": "^23.20.0",
-    "eslint-plugin-jest-dom": "^3.1.7",
+    "eslint-plugin-jest": "^24.0.0",
+    "eslint-plugin-jest-dom": "^3.2.3",
     "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0",
-    "eslint-plugin-testing-library": "^3.6.0",
-    "husky": "^4.2.5",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-testing-library": "^3.7.0",
+    "husky": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.4.0",
+    "jest": "^26.4.2",
     "jest-sonar-reporter": "^2.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
-    "pretty-quick": "^2.0.1",
+    "prettier": "^2.1.1",
+    "pretty-quick": "^3.0.2",
     "react": "^16.13.1",
@@ -77,13 +79,12 @@ "react-dom": "^16.13.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.26.3",
+    "rollup": "^2.26.11",
     "rollup-plugin-peer-deps-external": "^2.2.3",
-    "rollup-plugin-postcss": "^3.1.5",
+    "rollup-plugin-postcss": "^3.1.6",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-typescript2": "^0.27.2",
-    "sass-loader": "^9.0.3",
-    "ts-jest": "^26.2.0",
-    "typescript": "^3.9.7"
+    "sass-loader": "^10.0.2",
+    "ts-jest": "^26.3.0",
+    "typescript": "^4.0.2"
   },
   "peerDependencies": {
-    "@useblu/tokens": ">=2.0.0",
     "react": ">=16.8.0",
@@ -93,2 +94,3 @@ "react-dom": ">=16.8.0"
   "dependencies": {
+    "@reach/auto-id": "0.11.2",
     "classnames": "2.2.6"
@@ -95,0 +97,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

372512

increased by67.4%

Number of package files

43

increased by43.33%

Lines of code

1824

increased by98.91%

Worsened metrics

Dev dependency count

49

increased by4.26%

Number of low supply chain risk alerts

11

increased by1000%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@reach/auto-id@0.11.2

• + Added@reach/auto-id@0.11.2(transitive)

• + Added@reach/utils@0.11.2(transitive)

• + Added@types/warning@3.0.3(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedscheduler@0.19.1(transitive)

• + Addedtslib@2.8.1(transitive)

• + Addedwarning@4.0.3(transitive)

• - Removed@useblu/tokens@3.0.0(transitive)