@ntbjs/react-components 2.0.0-rc.3 → 2.0.0-rc.30

package/{esm/components → build}/inputs/MultiSelect/MultiSelect.js

@@ -1,49 +1,46 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import PropTypes from '../../../node_modules/prop-types/index.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
 import { nanoid } from 'nanoid';
-import { MultiSelectWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$2, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValueRemove as MultiValueRemove$1, DropdownMenu, Option as Option$1, SelectedOption as SelectedOption$1, DropdownOptionDeleteIcon, Control, Label, ValueContainer, MultiValueWrapper, MultiValue, Input } from './MultiSelect.styled.js';
-import { ReactComponent as SvgClose } from '../../../icons/close.svg.js';
-import { r as react } from '../../../_virtual/index.js';
+import { MultiSelectWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValueRemove as MultiValueRemove$1, DropdownMenu, Option as Option$1, SelectedOption as SelectedOption$1, DropdownOptionDeleteIcon, Control, Label, ValueContainer, MultiValueWrapper, MultiValue, Input } from './MultiSelect.styled.js';
+import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
 
-const _excluded = ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"];
-const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
-  let {
-      label,
-      selectedOptions,
-      availableOptions,
-      loadOptions,
-      loadingMessageFunc,
-      onUpdateCallback,
-      editText,
-      createNewOptionMessageFunc,
-      noOptionsMessageFunc,
-      onMultiValueClick,
-      showMore,
-      showMoreText,
-      displayTotalOnShowMore,
-      creatable,
-      readOnly,
-      hidden,
-      disabled,
-      error,
-      warning
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const [uniqueId] = react.exports.useState(nanoid());
-  const [selected, setSelected] = react.exports.useState(selectedOptions);
-  const [focused, setFocused] = react.exports.useState(false);
-  const [displayShowMore, setDisplayShowMore] = react.exports.useState(error || warning ? false : showMore);
-  const [cacheUnique, setCacheUnique] = react.exports.useState(0);
-  react.exports.useEffect(() => {
+const MultiSelect = React__default.forwardRef(function MultiSelect({
+  label,
+  selectedOptions,
+  availableOptions,
+  loadOptions,
+  loadingMessageFunc,
+  onUpdateCallback,
+  editText,
+  createNewOptionMessageFunc,
+  noOptionsMessageFunc,
+  onMultiValueClick,
+  showMore,
+  showMoreText,
+  displayTotalOnShowMore,
+  creatable,
+  readOnly,
+  hidden,
+  disabled,
+  error,
+  warning,
+  ...props
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  const [selected, setSelected] = useState(selectedOptions);
+  const [focused, setFocused] = useState(false);
+  const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);
+  const [cacheUnique, setCacheUnique] = useState(0);
+  useEffect(() => {
     setSelected(selectedOptions);
   }, [selectedOptions]);
   const handleShowMoreClick = () => {
     setDisplayShowMore(false);
   };
-  const Control$1 = react.exports.useMemo(() => {
+  const Control$1 = useMemo(() => {
     const ControlWrapper = innerProps => {
-      return React.createElement(Control, _extends({
+      return React__default.createElement(Control, _extends({
         className: "multi-select-control",
         readOnly: readOnly
       }, innerProps));
@@ -51,11 +48,11 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
     ControlWrapper.displayName = 'ControlWrapper';
     return ControlWrapper;
   }, []);
-  const ValueContainer$1 = react.exports.useMemo(() => {
+  const ValueContainer$1 = useMemo(() => {
     const ValueContainerWrapper = innerProps => {
-      return React.createElement(React.Fragment, null, label && React.createElement(Label, {
+      return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, {
         htmlFor: uniqueId
-      }, label), React.createElement(ValueContainer, _extends({
+      }, label), React__default.createElement(ValueContainer, _extends({
         showMore: displayShowMore,
         error: error,
         warning: warning,
@@ -66,7 +63,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
     return ValueContainerWrapper;
   }, [displayShowMore, error, warning]);
   const MultiValue$1 = innerProps => {
-    return React.createElement(MultiValueWrapper, {
+    return React__default.createElement(MultiValueWrapper, {
       className: "multi-value-wrapper",
       onMouseDown: e => {
         e.stopPropagation();
@@ -74,14 +71,14 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
           onMultiValueClick(innerProps.data);
         }
       }
-    }, React.createElement(MultiValue, _extends({
+    }, React__default.createElement(MultiValue, _extends({
       className: "multi-value",
       readOnly: readOnly
     }, innerProps)));
   };
-  const Input$1 = react.exports.useMemo(() => {
+  const Input$1 = useMemo(() => {
     const InputWrapper = innerProps => {
-      return React.createElement(Input, _extends({
+      return React__default.createElement(Input, _extends({
         className: "multi-select-input",
         $focused: focused,
         edittext: editText
@@ -177,12 +174,12 @@ const MultiSelect = React.forwardRef(function MultiSelect(_ref, forwardedRef) {
     }
   };
   if (hidden) return null;
-  return React.createElement(MultiSelectWrapper, {
+  return React__default.createElement(MultiSelectWrapper, {
     error: error,
     warning: warning
-  }, loadOptions ? creatable ? React.createElement(AsyncCreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React.createElement(AsyncMultiSelect, _extends({}, sharedSelectProps, props)) : creatable ? React.createElement(CreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React.createElement(MultiSelect$2, _extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React.createElement(ShowMoreWrapper, {
+  }, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(AsyncMultiSelect, _extends({}, sharedSelectProps, props)) : creatable ? React__default.createElement(CreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(MultiSelect$1, _extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
     onClick: handleShowMoreClick
-  }, React.createElement(ShowMoreOverlay, null), React.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React.createElement(ErrorMessage, {
+  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default.createElement(ErrorMessage, {
     error: error,
     warning: warning
   }, error ? error : warning));
@@ -227,21 +224,21 @@ MultiSelect.defaultProps = {
   hidden: false
 };
 const MultiValueRemove = innerProps => {
-  return React.createElement(MultiValueRemove$1, innerProps, React.createElement(SvgClose, {
+  return React__default.createElement(MultiValueRemove$1, innerProps, React__default.createElement(SvgClose, {
     className: "multi-value-remove-icon"
   }));
 };
 const Menu = innerProps => {
-  return React.createElement(DropdownMenu, innerProps);
+  return React__default.createElement(DropdownMenu, innerProps);
 };
 const Option = innerProps => {
-  return React.createElement(Option$1, _extends({
+  return React__default.createElement(Option$1, _extends({
     className: "multi-select-dropdown-item"
   }, innerProps));
 };
 const SelectedOption = innerProps => {
-  return React.createElement(SelectedOption$1, innerProps, innerProps.label, React.createElement(DropdownOptionDeleteIcon, null));
+  return React__default.createElement(SelectedOption$1, innerProps, innerProps.label, React__default.createElement(DropdownOptionDeleteIcon, null));
 };
-var MultiSelect$1 = MultiSelect;
 
-export { MultiSelect$1 as default };
+export { MultiSelect as default };
+//# sourceMappingURL=MultiSelect.js.map

package/build/inputs/MultiSelect/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.js"],"sourcesContent":["import React, { useState, useMemo, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { nanoid } from 'nanoid';\nimport * as S from './MultiSelect.styled';\n\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\n/**\n * Multi-select with autocomplete and support for asynchronous fetching/filtering of\n * available options with pagination, update handling with callback,\n * and the ability for the end-user to create new options.\n *\n * The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n *\n *\n * <br />### Import\n *\n * ``` js\n * import { MultiSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiSelect from '@ntbjs/react-components/inputs/MultiSelect'\n * ```\n *\n * <br />## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n *   value: \"Example\",\n *   label: \"Example\"\n * }\n * ```\n *\n * The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n *\n *\n * <br />## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n *\n * The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n *\n * <br />#### `action`\n * A `string` indicating what kind of update was made.\n *\n * The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n *\n * <br />#### `updatedOption`\n * Option `object`of the updated option:\n *\n * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n *\n *\n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n *\n * It will be passed two arguments:\n *\n * * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n *\n * The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n *\n * The `Promise` should return an `object` with the following keys:\n *\n * ``` js\n * {\n *   options: Array,\n *   hasMore: boolean\n * }\n * ```\n *\n * `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n *\n * **Example:**\n *\n * ``` js\n *\n * const availableOptions = [\n *   { value: \"Example 1\", label: \"Example 1\" },\n *   ...\n *   { value: \"Example N\", label: \"Example N\" }\n * ];\n *\n * const filterOptions = inputValue => {\n *   return availableOptions.filter(option => {\n *     return option.label.toLowerCase().includes(inputValue.toLowerCase());\n *   });\n * };\n *\n * const loadOptionsFunc = (inputValue, prevOptions) => {\n *   const currentLength = prevOptions.length;\n *   const pageLength = 10;\n *\n *   let filteredOptions;\n *\n *   if (inputValue) {\n *     filteredOptions = filterOptions(inputValue);\n *   } else {\n *     filteredOptions = availableOptions;\n *   }\n *\n *   const hasMore = filteredOptions.length > currentLength + pageLength;\n *   const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n *\n *   return {\n *     options: slicedOptions,\n *     hasMore\n *    };\n * };\n *\n * const loadOptions = (inputValue, prevOptions) => {\n *   return new Promise(resolve => {\n *     resolve(loadOptionsFunc(inputValue, prevOptions));\n *   });\n * };\n * ```\n *\n * While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n *\n * <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n *\n *\n * <br />## \"Show more\" overlay\n * The \"Show more\" overlay must be set manually with the `showMore` prop.\n *\n * By default, the total number\n * of selected options will be displayed in parenthesis after the \"Show more\" text. This can be\n * disabled with the `displayTotalOnShowMore` prop.\n *\n * **Note:**\n * <br />The component has been given a max-width in these Stories.\n * This is because the \"Show more\" overlay does not work well visually when there are\n * fewer than three rows of selected options. The component itself does not have\n * a max-width, so keep this in mind when using it.\n *\n * <br />\n */\nconst MultiSelect = React.forwardRef(function MultiSelect(\n  {\n    label,\n    selectedOptions,\n    availableOptions,\n    loadOptions,\n    loadingMessageFunc,\n    onUpdateCallback,\n    editText,\n    createNewOptionMessageFunc,\n    noOptionsMessageFunc,\n    onMultiValueClick,\n    showMore,\n    showMoreText,\n    displayTotalOnShowMore,\n    creatable,\n    readOnly,\n    hidden,\n    disabled,\n    error,\n    warning,\n    ...props\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n  const [selected, setSelected] = useState(selectedOptions);\n  const [focused, setFocused] = useState(false);\n  const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);\n  const [cacheUnique, setCacheUnique] = useState(0);\n\n  useEffect(() => {\n    setSelected(selectedOptions);\n  }, [selectedOptions]);\n\n  const handleShowMoreClick = () => {\n    setDisplayShowMore(false);\n  };\n\n  /**\n   * Inner components to replace the default components of 'react-select'.\n   * This is to add classnames, custom styling and functionality.\n   *\n   * Some of these are defined here, inside of the main MultiSelect,\n   * because they use our props for custom styling/functionality.\n   * The ones that don't are defined outside of (below) the main component.\n   */\n  const Control = useMemo(() => {\n    const ControlWrapper = innerProps => {\n      return <S.Control className=\"multi-select-control\" readOnly={readOnly} {...innerProps} />;\n    };\n    ControlWrapper.displayName = 'ControlWrapper';\n    return ControlWrapper;\n  }, []);\n\n  const ValueContainer = useMemo(() => {\n    const ValueContainerWrapper = innerProps => {\n      return (\n        <>\n          {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n          <S.ValueContainer\n            showMore={displayShowMore}\n            error={error}\n            warning={warning}\n            className=\"multi-select-values-container\"\n            {...innerProps}\n          />\n        </>\n      );\n    };\n    ValueContainerWrapper.displayName = 'ValueContainerWrapper';\n    return ValueContainerWrapper;\n  }, [displayShowMore, error, warning]);\n\n  const MultiValue = innerProps => {\n    return (\n      <S.MultiValueWrapper\n        className=\"multi-value-wrapper\"\n        onMouseDown={e => {\n          e.stopPropagation();\n\n          if (\n            onMultiValueClick &&\n            innerProps.data &&\n            !(e.target.role === 'button' || e.target instanceof SVGElement)\n          ) {\n            onMultiValueClick(innerProps.data);\n          }\n        }}\n      >\n        <S.MultiValue className=\"multi-value\" readOnly={readOnly} {...innerProps} />\n      </S.MultiValueWrapper>\n    );\n  };\n\n  const Input = useMemo(() => {\n    const InputWrapper = innerProps => {\n      return (\n        <S.Input\n          className=\"multi-select-input\"\n          $focused={focused}\n          edittext={editText}\n          {...innerProps}\n          isDisabled={readOnly || disabled}\n        />\n      );\n    };\n    InputWrapper.displayName = 'InputWrapper';\n    return InputWrapper;\n  }, [focused]);\n\n  /**\n   * Replace inner components of 'react-select'\n   */\n  const innerComponents = {\n    DropdownIndicator: null,\n    Control,\n    MultiValue,\n    MultiValueRemove: innerProps => {\n      return readOnly || disabled ? false : MultiValueRemove(innerProps);\n    },\n    ValueContainer,\n    Input,\n    Menu,\n    Option: innerProps => {\n      return innerProps.isSelected ? SelectedOption(innerProps) : Option(innerProps);\n    }\n  };\n\n  /**\n   * Props from 'react-select'/'react-select-async-paginate' shared by the different Select versions\n   */\n  const sharedSelectProps = {\n    ref: forwardedRef,\n    value: selected,\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions: loadOptions,\n    loadingMessage: loadingMessageFunc,\n    editText: editText,\n    formatCreateLabel: createNewOptionMessageFunc,\n    showMore: displayShowMore,\n    readOnly: readOnly,\n    isDisabled: disabled,\n    components: innerComponents,\n    focused: focused,\n    isMulti: true,\n    isClearable: false,\n    placeholder: null,\n    closeMenuOnSelect: false,\n    hideSelectedOptions: false,\n    cacheUniqs: loadOptions ? [cacheUnique] : undefined,\n    onFocus: () => setFocused(true),\n    onBlur: () => setFocused(false),\n\n    noOptionsMessage: input => {\n      return noOptionsMessageFunc(input.inputValue);\n    },\n\n    onChange: (selectedOptions, actionMeta) => {\n      switch (actionMeta.action) {\n        case 'create-option':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          if (loadOptions) {\n            setCacheUnique(cacheUnique + 1);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'select-option':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'remove-value':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.removedValue);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'pop-value':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.removedValue);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'deselect-option':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'clear':\n          // Does currently not occur as 'isClearable' is always set to false\n          break;\n\n        default:\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          setSelected(selectedOptions);\n          break;\n      }\n    }\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.MultiSelectWrapper error={error} warning={warning}>\n      {loadOptions ? (\n        creatable ? (\n          <S.AsyncCreatableMultiSelect {...sharedSelectProps} {...props} />\n        ) : (\n          <S.AsyncMultiSelect {...sharedSelectProps} {...props} />\n        )\n      ) : creatable ? (\n        <S.CreatableMultiSelect {...sharedSelectProps} {...props} />\n      ) : (\n        <S.MultiSelect {...sharedSelectProps} {...props} />\n      )}\n      {displayShowMore && !(error || warning) && (\n        <S.ShowMoreWrapper onClick={handleShowMoreClick}>\n          <S.ShowMoreOverlay></S.ShowMoreOverlay>\n          <S.ShowMoreText>\n            {showMoreText} {displayTotalOnShowMore && '(' + selected.length + ')'}\n          </S.ShowMoreText>\n        </S.ShowMoreWrapper>\n      )}\n      {(typeof error === 'string' || typeof warning === 'string') && (\n        <S.ErrorMessage error={error} warning={warning}>\n          {error ? error : warning}\n        </S.ErrorMessage>\n      )}\n    </S.MultiSelectWrapper>\n  );\n});\n\nMultiSelect.propTypes = {\n  /**\n   *\n   * The label of the input field – leave `undefined` to hide the label\n   */\n  label: PropTypes.string,\n  /**\n   * `Array` of `objects` containing the default options. This is only needed\n   * when asynchronous option fetching with the `loadOptions` prop is not used.\n   *\n   * **Note:**\n   * <br />This will be overridden by the `loadOptions` prop if both props are set.\n   */\n  availableOptions: PropTypes.arrayOf(PropTypes.object),\n\n  /**\n   * `Array` of `objects` containing the selected options.\n   */\n  selectedOptions: PropTypes.arrayOf(PropTypes.object),\n\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  loadOptions: PropTypes.func,\n\n  /**\n   * Function for custom \"Loading...\" message while waiting for the first page\n   * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n   */\n  loadingMessageFunc: PropTypes.func,\n\n  /**\n   * Callback function for sending updates to the backend whenever the selected values are updated.\n   * See [Update handling](#update-handling) for details.\n   */\n  onUpdateCallback: PropTypes.func,\n\n  /**\n   * Text to be displayed on the input element when the component\n   * is enabled and not focused – e.g. \"Add a keyword...\"\n   */\n  editText: PropTypes.string.isRequired,\n\n  /**\n   * Whether the user can create new options.\n   */\n  creatable: PropTypes.bool,\n\n  /**\n   * Callback function for formatting the message displayed in the dropdown when there\n   * are no matching options, and the user has permission to create new options.\n   * The callback function will be given the current input value as an argument.\n   */\n  createNewOptionMessageFunc: PropTypes.func,\n\n  /**\n   * If the list of options is empty, or if the current input value doesn't match\n   * any of the available options and the user doesn't have permission to add options,\n   * this function will be called and passed the current input value as an argument.\n   */\n  noOptionsMessageFunc: PropTypes.func,\n\n  /**\n   * Optional callback function to be trigger when clicking a selected option's label – e.g. opening\n   * a search filtered on the given multi-value's `label`.\n   *\n   * The callback function will be passed the option `object` as an argument.\n   */\n  onMultiValueClick: PropTypes.func,\n\n  /**\n   * Display an overlay which the user needs to click in order to\n   * show the selected options list in its entirety and edit it.\n   */\n  showMore: PropTypes.bool,\n\n  /**\n   * Text displayed on the \"Show more\" overlay.\n   */\n  showMoreText: PropTypes.string,\n\n  /**\n   * Whether to display the total number of selected options after the show more text.\n   */\n  displayTotalOnShowMore: PropTypes.bool,\n\n  /**\n   * Whether the multi-select should be displayed in read-only mode.\n   * The user can still click the selected options to trigger their on-click effect.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n\n  /**\n   * Whether the multi-select should be disabled.\n   * The user will not be able to trigger the on-click effect of the selected options.\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Set to `true` to display a red border indicating an error.\n   * Pass in a `string` instead to also show the string underneath the input field.\n   *\n   * **Note:**\n   * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n   */\n  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n  /**\n   * Set to `true` to display an orange border.\n   * Pass in a `string` instead to also show the string underneath the input field.\n   *\n   * **Note:**\n   * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n   */\n  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n};\n\nMultiSelect.defaultProps = {\n  noOptionsMessageFunc: inputValue => {\n    if (inputValue) {\n      return `No matches for \"${inputValue}\"`;\n    } else {\n      return 'No available options';\n    }\n  },\n  showMore: false,\n  displayTotalOnShowMore: true,\n  readOnly: false,\n  disabled: false,\n  creatable: false,\n  error: false,\n  warning: false,\n  showMoreText: 'Show more',\n  hidden: false\n};\n\n/**\n * Inner components to replace the default inner components of 'react-select'.\n * This is to add classnames, custom styling and functionality.\n *\n * Some are defined inside of the main MultiSelect component, as they use our props\n * for prop/state dependent functionality and styling. The ones below do not.\n */\nconst MultiValueRemove = innerProps => {\n  return (\n    <S.MultiValueRemove {...innerProps}>\n      <CloseIcon className=\"multi-value-remove-icon\" />\n    </S.MultiValueRemove>\n  );\n};\n\nconst Menu = innerProps => {\n  return <S.DropdownMenu {...innerProps} />;\n};\n\nconst Option = innerProps => {\n  return <S.Option className=\"multi-select-dropdown-item\" {...innerProps} />;\n};\n\nconst SelectedOption = innerProps => {\n  return (\n    <S.SelectedOption {...innerProps}>\n      {innerProps.label}\n      <S.DropdownOptionDeleteIcon />\n    </S.SelectedOption>\n  );\n};\n\nexport default MultiSelect;\n"],"names":["MultiSelect","React","forwardRef","label","selectedOptions","availableOptions","loadOptions","loadingMessageFunc","onUpdateCallback","editText","createNewOptionMessageFunc","noOptionsMessageFunc","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","creatable","readOnly","hidden","disabled","error","warning","props","forwardedRef","uniqueId","useState","nanoid","selected","setSelected","focused","setFocused","displayShowMore","setDisplayShowMore","cacheUnique","setCacheUnique","useEffect","handleShowMoreClick","Control","useMemo","ControlWrapper","innerProps","createElement","S","_extends","className","displayName","ValueContainer","ValueContainerWrapper","Fragment","htmlFor","MultiValue","onMouseDown","e","stopPropagation","data","target","role","SVGElement","Input","InputWrapper","$focused","edittext","isDisabled","innerComponents","DropdownIndicator","MultiValueRemove","Menu","Option","isSelected","SelectedOption","sharedSelectProps","ref","value","options","undefined","loadingMessage","formatCreateLabel","components","isMulti","isClearable","placeholder","closeMenuOnSelect","hideSelectedOptions","cacheUniqs","onFocus","onBlur","noOptionsMessage","input","inputValue","onChange","actionMeta","action","option","removedValue","onClick","length","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","object","func","isRequired","bool","oneOfType","defaultProps","CloseIcon"],"mappings":"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"}

package/build/inputs/MultiSelect/MultiSelect.styled.js

@@ -0,0 +1,224 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
+import Select, { components } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
+
+const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
+const showMoreHeight = 114;
+const sharedStyle = css`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 12px;
+  font-weight: 400;
+  position: relative;
+`;
+const Label = styled.label.attrs(applyDefaultTheme)`
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  cursor: pointer;
+  height: 19px;
+  display: flex;
+  align-items: center;
+`;
+const MultiSelect = styled(Select).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
+  position: relative;
+`;
+const Control = styled(components.Control).attrs(applyDefaultTheme)`
+  && {
+    align-items: flex-start;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  :hover {
+    cursor: ${props => !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer'};
+  }
+`;
+const ValueContainer = styled(components.ValueContainer)`
+  && {
+    align-items: flex-start;
+    gap: 8px;
+    padding: 0;
+
+    max-height: ${props => {
+  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}} !important;
+
+    ${props => (props.error || props.warning) && css`
+        border: 1px solid;
+        border-radius: 3px;
+        padding: 4px;
+
+        border-color: ${props => props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'};
+      `}
+  }
+`;
+const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+  }
+`;
+const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+
+    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'))}
+
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'))}
+
+    > div {
+      align-items: center;
+      display: flex;
+      font-size: 12px;
+      min-height: 26px;
+
+      :first-of-type {
+        padding: ${props => props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px'};
+      }
+
+      :last-of-type:not(:only-child) {
+        padding: 0 8px 0 5px;
+        height: 100%;
+        width: fit-content;
+      }
+
+      :last-of-type:not(:only-child):hover {
+        background-color: ${props => props.theme.getColor('red-500')};
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        cursor: pointer;
+      }
+
+      svg {
+        stroke: white;
+        stroke-width: 2px;
+        width: 8px;
+      }
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+`;
+const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;
+const Input = styled(components.Input).attrs(applyDefaultTheme)`
+  align-self: center;
+  font-size: ${props => props.$focused ? '14px' : '12px'};
+  min-width: 150px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+
+  ${props => !props.$focused && css`
+      ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
+
+      :before {
+        height: 100%;
+        white-space: nowrap;
+        width: fit-content;
+        content: '${props => props.edittext}';
+      }
+    `}
+  }
+`;
+const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`
+  font-size: 14px;
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'))}
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const sharedOptionStyle = css`
+  ${props => props.isFocused && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  ${props => props.isSelected && css`
+      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}
+
+      ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+    `}
+
+  ${props => props.isFocused && props.isSelected && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const Option = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+`;
+const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+
+  display: flex !important;
+  justify-content: space-between;
+`;
+const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
+  stroke-width: 1px;
+  width: 8px;
+
+  ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  max-height: ${showMoreHeight + 16}px;
+  top: 0;
+  width: 100%;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))}
+
+  :hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+`;
+const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: block;
+  height: 100%;
+  max-height: ${showMoreHeight}px;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  ${props => props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box')}
+`;
+const ShowMoreText = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  width: 100%;
+  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}
+`;
+const ErrorMessage = styled.div.attrs(applyDefaultTheme)`
+  color: ${props => props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'};
+  font-size: 0.75rem;
+  margin-top: 8px;
+  padding: 0 12px;
+`;
+
+export { AsyncCreatableMultiSelect, AsyncMultiSelect, Control, CreatableMultiSelect, DropdownMenu, DropdownOptionDeleteIcon, ErrorMessage, Input, Label, MultiSelect, MultiSelectWrapper, MultiValue, MultiValueRemove, MultiValueWrapper, Option, SelectedOption, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper, ValueContainer };
+//# sourceMappingURL=MultiSelect.styled.js.map

package/build/inputs/MultiSelect/MultiSelect.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { components } from 'react-select';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst showMoreHeight = 114;\n\nconst sharedStyle = css`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  cursor: pointer;\n  height: 19px;\n  display: flex;\n  align-items: center;\n`;\n\nexport const MultiSelect = styled(Select).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n  applyDefaultTheme\n)`\n  ${sharedStyle}\n`;\n\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n`;\n\nexport const Control = styled(components.Control).attrs(applyDefaultTheme)`\n  && {\n    align-items: flex-start;\n    background: transparent;\n    border: none;\n    box-shadow: none;\n  }\n\n  :hover {\n    cursor: ${props =>\n      (!props.isDisabled && props.focused) || props.readOnly ? 'default' : 'pointer'};\n  }\n`;\n\nexport const ValueContainer = styled(components.ValueContainer)`\n  && {\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0;\n\n    max-height: ${props => {\n      return props.showMore\n        ? props.error || props.warning\n          ? '100%'\n          : showMoreHeight + 16 + 'px'\n        : '100%';\n    }} !important;\n\n    ${props =>\n      (props.error || props.warning) &&\n      css`\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 4px;\n\n        border-color: ${props =>\n          props.error\n            ? props.theme.getColor('red-500')\n            : props.warning\n            ? props.theme.getColor('orange-500')\n            : 'inherit'};\n      `}\n  }\n`;\n\nexport const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\n  }\n`;\n\nexport const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-800')\n      )}\n\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-100')\n      )}\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-of-type {\n        padding: ${props => (props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px')};\n      }\n\n      :last-of-type:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-of-type:not(:only-child):hover {\n        background-color: ${props => props.theme.getColor('red-500')};\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nexport const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;\n\nexport const Input = styled(components.Input).attrs(applyDefaultTheme)`\n  align-self: center;\n  font-size: ${props => (props.$focused ? '14px' : '12px')};\n  min-width: 150px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n\n  ${props =>\n    !props.$focused &&\n    css`\n      ${props =>\n        props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-500')\n        )}\n\n      :before {\n        height: 100%;\n        white-space: nowrap;\n        width: fit-content;\n        content: '${props => props.edittext}';\n      }\n    `}\n  }\n`;\n\nexport const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`\n  font-size: 14px;\n\n  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-600'),\n      props.theme.getColor('white')\n    )}\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nconst sharedOptionStyle = css`\n  ${props =>\n    props.isFocused &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  ${props =>\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}\n\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )}\n    `}\n\n  ${props =>\n    props.isFocused &&\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n\nexport const Option = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n`;\n\nexport const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n\n  display: flex !important;\n  justify-content: space-between;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  stroke-width: 1px;\n  width: 8px;\n\n  ${props =>\n    props.theme.themeProp(\n      'stroke',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ${showMoreHeight + 16}px;\n  top: 0;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('emerald-500')\n    )}\n\n  :hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n  align-items: end;\n  display: block;\n  height: 100%;\n  max-height: ${showMoreHeight}px;\n  left: 0;\n  top: 0;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box',\n      'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'\n    )}\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  width: 100%;\n  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.error\n      ? props.theme.getColor('red-500')\n      : props.warning\n      ? props.theme.getColor('orange-500')\n      : 'inherit'};\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n`;\n"],"names":["AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","showMoreHeight","sharedStyle","css","props","theme","primaryFontFamily","Label","styled","label","attrs","applyDefaultTheme","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncCreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","MultiSelectWrapper","div","Control","components","isDisabled","focused","readOnly","ValueContainer","showMore","error","warning","MultiValueWrapper","MultiValue","MultiValueRemove","Input","$focused","edittext","DropdownMenu","Menu","sharedOptionStyle","isFocused","isSelected","Option","SelectedOption","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage"],"mappings":"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"}

package/build/inputs/MultiSelect/index.js

@@ -0,0 +1,2 @@
+export { default } from './MultiSelect.js';
+//# sourceMappingURL=index.js.map

package/build/inputs/MultiSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/inputs/Radio/Radio.js

@@ -0,0 +1,60 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import PropTypes from 'prop-types';
+import { Radio as Radio$1, RadioLabel } from './Radio.styled.js';
+
+const Radio = React__default.forwardRef(function Radio({
+  name,
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  label,
+  className,
+  style,
+  onChange,
+  onBlur,
+  ...rest
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  return React__default.createElement(Radio$1, {
+    htmlFor: uniqueId,
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, React__default.createElement("input", _extends({
+    ref: forwardedRef,
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: uniqueId,
+    onChange: onChange,
+    onBlur: onBlur
+  }, rest)), React__default.createElement(RadioLabel, null, label));
+});
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func
+} : {};
+Radio.defaultProps = {
+  disabled: false
+};
+
+export { Radio as default };
+//# sourceMappingURL=Radio.js.map

package/build/inputs/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.js"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport * as S from './Radio.styled';\n\n/**\n * Radio buttons allow the user to select one option from a set.\n *\n * Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n *\n * Radio buttons should have the most commonly used option selected by default.\n *\n * ### Import\n *\n * ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef(function Radio(\n  {\n    name,\n    value,\n    checked,\n    defaultChecked,\n    disabled,\n    readOnly,\n    label,\n    className,\n    style,\n    onChange,\n    onBlur,\n    ...rest\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n\n  return (\n    <S.Radio\n      htmlFor={uniqueId}\n      disabled={disabled}\n      readOnly={readOnly}\n      className={className}\n      style={style}\n    >\n      <input\n        ref={forwardedRef}\n        type=\"radio\"\n        name={name}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        readOnly={readOnly}\n        id={uniqueId}\n        onChange={onChange}\n        onBlur={onBlur}\n        {...rest}\n      />\n      <S.RadioLabel>{label}</S.RadioLabel>\n    </S.Radio>\n  );\n});\n\nRadio.propTypes = {\n  /**\n   * Text displayed by the radio button\n   */\n  label: PropTypes.any,\n\n  /**\n   * Name of the radio button (used when sending form data)\n   */\n  name: PropTypes.string.isRequired,\n\n  /**\n   * Value to be sent when the given radio button is selected\n   */\n  value: PropTypes.any.isRequired,\n\n  /**\n   * Whether the radio button is checked\n   */\n  checked: PropTypes.bool,\n\n  /**\n   * Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * Whether the radio button is disabled\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Display the radio button as read-only\n   */\n  readOnly: PropTypes.bool,\n\n  /**\n   * Custom class names for the HTML element\n   */\n  className: PropTypes.string,\n\n  /**\n   * Custom inline CSS styling\n   */\n  style: PropTypes.object,\n\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur: PropTypes.func\n};\n\nRadio.defaultProps = {\n  disabled: false\n};\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useState","nanoid","createElement","S","htmlFor","_extends","ref","type","id","propTypes","process","env","NODE_ENV","PropTypes","any","string","isRequired","bool","object","func","defaultProps"],"mappings":";;;;;;AAuBMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;EACdC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC,CAAA;AAErC,EAAA,OACEjB,cAAA,CAAAkB,aAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAEL,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EAEbV,cAAA,CAAAkB,aAAA,CAAA,OAAA,EAAAG,QAAA,CAAA;AACEC,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,IAAI,EAAC,OAAO;AACZrB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,EAAE,EAAET,QAAS;AACbJ,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXC,IAAI,CACT,CAAC,EACFb,cAAA,CAAAkB,aAAA,CAACC,UAAY,EAAEX,IAAAA,EAAAA,KAAoB,CAC5B,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFT,KAAK,CAAC0B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIhBpB,KAAK,EAAEqB,SAAS,CAACC,GAAG;AAKpB5B,EAAAA,IAAI,EAAE2B,SAAS,CAACE,MAAM,CAACC,UAAU;AAKjC7B,EAAAA,KAAK,EAAE0B,SAAS,CAACC,GAAG,CAACE,UAAU;EAK/B5B,OAAO,EAAEyB,SAAS,CAACI,IAAI;EAKvB5B,cAAc,EAAEwB,SAAS,CAACI,IAAI;EAK9B3B,QAAQ,EAAEuB,SAAS,CAACI,IAAI;EAKxB1B,QAAQ,EAAEsB,SAAS,CAACI,IAAI;EAKxBxB,SAAS,EAAEoB,SAAS,CAACE,MAAM;EAK3BrB,KAAK,EAAEmB,SAAS,CAACK,MAAM;EAKvBvB,QAAQ,EAAEkB,SAAS,CAACM,IAAI;EAKxBvB,MAAM,EAAEiB,SAAS,CAACM,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDpC,KAAK,CAACqC,YAAY,GAAG;AACnB9B,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC;;;;"}