@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/TokenListInput/TokenListInput.stories.js

@@ -1,877 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._TokenListInputWithError = exports._TokenListInputLocked = exports._TokenListInputGroup = exports._TokenListInputDisabled = exports._TokenListInput = exports._CustomOptionTokenListInput = exports._AllowArbitraryValues = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _useArbitraryOptionAddition = require("../../hooks/useArbitraryOptionAddition");
-var _useFilteredOptions = require("../../hooks/useFilteredOptions");
-var _classify = require("../../utils/classify");
-var _Icon = require("../Icon");
-var _Text = require("../Text");
-var _Tooltip = require("../Tooltip");
-var _TokenListInput2 = require("./TokenListInput");
-var _TokenListInputStoriesModule = _interopRequireDefault(require("./TokenListInput.stories.module.css"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const elevationOptions = [...Object.values(_Tooltip.ELEVATION_TYPES)];
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Form Components/Token List Input',
-  component: _TokenListInput2.TokenListInput,
-  argTypes: {
-    classNames: {
-      description: 'Custom class names for styling the wrapper, box, and input.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: '{ wrapper?: string, box?: string, input?: string }'
-        }
-      }
-    },
-    clickAwayRef: {
-      description: 'Ref for the click-away handler, used to detect clicks outside the component.',
-      control: false,
-      table: {
-        type: {
-          summary: 'ClickAwayRefType'
-        }
-      }
-    },
-    disabled: {
-      description: 'Disables user interaction with the input and menu.',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: 'false'
-        }
-      }
-    },
-    elevation: {
-      description: 'This is passed to TokenListInput. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
-      control: {
-        type: 'select'
-      },
-      options: elevationOptions,
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: 'modal'
-        }
-      }
-    },
-    error: {
-      description: 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: 'false'
-        }
-      }
-    },
-    errorText: {
-      description: 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    focusOnMount: {
-      description: 'If true, the input will be focused automatically when the component mounts.',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    helperText: {
-      description: 'Additional information or guidance displayed below the input. Hidden if errorText is present.',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    placeholder: {
-      description: 'Placeholder text for the input field. Used if values are empty.',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    inputValue: {
-      description: 'The current value of the input field.',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    inputPlaceholder: {
-      description: 'Placeholder text for the input field. Used if provided, otherwise falls back to `placeholder`.',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    limit: {
-      description: 'Maximum number of tokens that can be added. When the limit is reached, the input is disabled.',
-      control: {
-        type: 'number'
-      },
-      table: {
-        type: {
-          summary: 'number'
-        },
-        defaultValue: {
-          summary: '100'
-        }
-      }
-    },
-    isLoading: {
-      description: 'if **true**, the component would add a loader.',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: 'false'
-        }
-      }
-    },
-    locked: {
-      description: 'If true, the input and tokens are locked and cannot be changed.',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    onChange: {
-      description: 'Callback fired when the list of selected tokens changes.',
-      control: false,
-      table: {
-        type: {
-          summary: '(values: Array<T>) => mixed'
-        }
-      }
-    },
-    onInputBlur: {
-      description: 'Callback fired when the input loses focus.',
-      control: false,
-      table: {
-        type: {
-          summary: '(e: SyntheticEvent<HTMLInputElement>) => mixed'
-        }
-      }
-    },
-    onInputChange: {
-      description: 'Callback fired when the input value changes.',
-      control: false,
-      table: {
-        type: {
-          summary: '(value: string) => mixed'
-        }
-      }
-    },
-    onInputFocus: {
-      description: 'Callback fired when the input gains focus.',
-      control: false,
-      table: {
-        type: {
-          summary: '(e: SyntheticEvent<HTMLInputElement>) => mixed'
-        }
-      }
-    },
-    size: {
-      description: 'Controls the overall size of the input field. Choose between "medium" (default) and "small".',
-      options: ['medium', 'small'],
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: '"medium" | "small"'
-        },
-        defaultValue: {
-          summary: 'medium'
-        }
-      }
-    },
-    tabIndex: {
-      description: 'Tab index for the input field.',
-      control: {
-        type: 'number'
-      },
-      table: {
-        type: {
-          summary: 'number'
-        }
-      }
-    },
-    values: {
-      description: 'The current list of selected tokens.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'Array<T>'
-        }
-      }
-    },
-    menu: {
-      description: 'Props for the dropdown menu, including options, grouped options, and custom label resolver.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'TokenListMenuProps<T>'
-        }
-      }
-    },
-    onMenuOpen: {
-      description: 'Callback fired when the menu is opened.',
-      control: false,
-      table: {
-        type: {
-          summary: '() => mixed'
-        }
-      }
-    },
-    onMenuClose: {
-      description: 'Callback fired when the menu is closed.',
-      control: false,
-      table: {
-        type: {
-          summary: '() => mixed'
-        }
-      }
-    },
-    resolveTokenValue: {
-      description: 'Custom render function for displaying a token value.',
-      control: false,
-      table: {
-        type: {
-          summary: '(ResolveTokenValueProps<T>) => React.ReactNode'
-        }
-      }
-    },
-    inputProps: {
-      description: 'Additional props to spread onto the input element.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'InputProps'
-        }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      subtitle: 'A flexible input for managing a list of tokens, supporting both selection from a dropdown and free-form entry.',
-      description: {
-        component: `
-\`\`\`js
-import { TokenListInput } from '@spaced-out/ui-design-system/lib/components/TokenListInput';
-\`\`\`
-
-**TokenListInput** provides a user-friendly interface for entering and managing multiple values as tokens. Users can select from a dropdown menu or add their own custom entries (if enabled). This component is ideal for tagging, multi-select, and similar use cases.
-
-**Features:**
-- Add, remove, and manage tokens with ease
-- Supports both predefined and user-defined (arbitrary) options
-- Customizable option rendering (icons, custom components, etc.)
-- Configurable maximum token limit
-- Disabled and locked states for controlled usage
-- Helper and error text for enhanced user feedback
-
-**Props Overview:**
-- \`classNames\`: Custom class names for styling
-- \`clickAwayRef\`: Ref for click-away detection
-- \`disabled\`: Disables the input and menu
-- \`errorText\`: Error message below the input
-- \`focusOnMount\`: Auto-focus input on mount
-- \`helperText\`: Guidance below the input
-- \`inputValue\`: Current input value
-- \`inputPlaceholder\`: Placeholder for the input field
-- \`limit\`: Maximum number of tokens
-- \`locked\`: Locks the input and tokens
-- \`onChange\`: Callback for token changes
-- \`onInputBlur\`: Callback for input blur
-- \`onInputChange\`: Callback for input value change
-- \`onInputFocus\`: Callback for input focus
-- \`placeholder\`: Fallback placeholder for the input
-- \`size\`: Input size ("medium" or "small")
-- \`tabIndex\`: Tab index for the input
-- \`values\`: Selected tokens
-- \`menu\`: Dropdown menu props
-- \`onMenuOpen\`: Callback for menu open
-- \`onMenuClose\`: Callback for menu close
-- \`resolveTokenValue\`: Custom token renderer
-- \`inputProps\`: Additional input props
-
-**Usage Example:**
-
-\`\`\`jsx
-<TokenListInput
-  values={[{ key: 'react', label: 'React' }]}
-  onChange={setValues}
-  inputValue={input}
-  onInputChange={setInput}
-  inputPlaceholder="Add a tag"
-  limit={5}
-  helperText="Add up to 5 tags"
-  errorText=""
-  size="medium"
-  disabled={false}
-  locked={false}
-  menu={{
-    options: [
-      { key: 'react', label: 'React' },
-      { key: 'vue', label: 'Vue' },
-      { key: 'angular', label: 'Angular' },
-    ],
-  }}
-/>
-\`\`\`
-        `
-      }
-    },
-    storySource: {
-      componentPath: '/src/components/TokenListInput/TokenListInput.jsx'
-    }
-  }
-};
-const _TokenListInput = args => {
-  const options = [{
-    key: '1',
-    label: 'Option 1'
-  }, {
-    key: '2',
-    label: 'Option 2'
-  }, {
-    key: '3',
-    label: 'Option 3'
-  }, {
-    key: '4',
-    label: 'Option 4'
-  }];
-  const [values, setValues] = React.useState([{
-    label: 'apple',
-    key: 'ap'
-  }, {
-    label: 'b',
-    key: 'b'
-  }]);
-  const [input, setInput] = React.useState('');
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListWrapper
-  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
-    values: values,
-    onChange: setValues,
-    inputValue: input,
-    onInputChange: setInput,
-    menu: {
-      options
-    }
-  })));
-};
-exports._TokenListInput = _TokenListInput;
-_TokenListInput.args = {
-  classNames: {
-    wrapper: ''
-  }
-};
-const _TokenListInputWithError = args => {
-  const options = [{
-    key: '1',
-    label: 'Eden Porter',
-    iconLeft: 'user'
-  }, {
-    key: '2',
-    label: 'Verda Rodgers',
-    iconLeft: 'user'
-  }, {
-    key: '3',
-    label: 'Paisley Badman',
-    iconLeft: 'user'
-  }, {
-    key: '4',
-    label: 'Miranda Black',
-    iconLeft: 'user'
-  }, {
-    key: '5',
-    label: 'Pamela Fennimore',
-    iconLeft: 'user'
-  }, {
-    key: '6',
-    label: 'Geneva Rhodes',
-    iconLeft: 'user'
-  }, {
-    key: '7',
-    label: 'Rolf Kim',
-    iconLeft: 'user'
-  }, {
-    key: '8',
-    label: 'Marsh Saunders',
-    iconLeft: 'user'
-  }, {
-    key: '9',
-    label: 'Prunella Webb',
-    iconLeft: 'user'
-  }, {
-    key: '10',
-    label: 'Andy Mullins',
-    iconLeft: 'user'
-  }, {
-    key: '11',
-    label: 'Jade Watkins',
-    iconLeft: 'user'
-  }, {
-    key: '12',
-    label: 'Wally Wolfe',
-    iconLeft: 'user'
-  }, {
-    key: '13',
-    label: 'Misty Lipsey',
-    iconLeft: 'user'
-  }, {
-    key: '14',
-    label: 'Dwight Gibbs',
-    iconLeft: 'user'
-  }, {
-    key: '15',
-    label: 'Ronald Rhodes',
-    iconLeft: 'user'
-  }];
-  const [values, setValues] = React.useState([]);
-  const [input, setInput] = React.useState('');
-  const onChangeHandler = newValues => {
-    setValues(newValues);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListWrapper
-  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
-    menu: {
-      options
-    },
-    values: values,
-    onChange: onChangeHandler,
-    errorText: 'This is an error',
-    helperText: "Hint text for the users",
-    inputValue: input,
-    onInputChange: setInput
-  })));
-};
-exports._TokenListInputWithError = _TokenListInputWithError;
-const _TokenListInputLocked = args => {
-  const values = [{
-    key: '1',
-    label: 'Eden Porter',
-    iconLeft: 'user'
-  }, {
-    key: '2',
-    label: 'Verda Rodgers',
-    iconLeft: 'user'
-  }, {
-    key: '3',
-    label: 'Paisley Badman',
-    iconLeft: 'user'
-  }, {
-    key: '4',
-    label: 'Miranda Black',
-    iconLeft: 'user'
-  }, {
-    key: '5',
-    label: 'Pamela Fennimore',
-    iconLeft: 'user'
-  }, {
-    key: '6',
-    label: 'Geneva Rhodes',
-    iconLeft: 'user'
-  }, {
-    key: '7',
-    label: 'Rolf Kim',
-    iconLeft: 'user'
-  }, {
-    key: '8',
-    label: 'Marsh Saunders',
-    iconLeft: 'user'
-  }];
-  const [input, setInput] = React.useState('');
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListWrapper
-  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
-    values: values,
-    inputValue: input,
-    onInputChange: setInput
-  })));
-};
-exports._TokenListInputLocked = _TokenListInputLocked;
-_TokenListInputLocked.args = {
-  locked: true
-};
-const _TokenListInputDisabled = args => {
-  const values = [{
-    key: '1',
-    label: 'Eden Porter',
-    iconLeft: 'user'
-  }, {
-    key: '2',
-    label: 'Verda Rodgers',
-    iconLeft: 'user'
-  }, {
-    key: '3',
-    label: 'Paisley Badman',
-    iconLeft: 'user'
-  }, {
-    key: '4',
-    label: 'Miranda Black',
-    iconLeft: 'user'
-  }, {
-    key: '5',
-    label: 'Pamela Fennimore',
-    iconLeft: 'user'
-  }, {
-    key: '6',
-    label: 'Geneva Rhodes',
-    iconLeft: 'user'
-  }, {
-    key: '7',
-    label: 'Rolf Kim',
-    iconLeft: 'user'
-  }, {
-    key: '8',
-    label: 'Marsh Saunders',
-    iconLeft: 'user'
-  }];
-  const [input, setInput] = React.useState('');
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListWrapper
-  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
-    values: values,
-    inputValue: input,
-    onInputChange: setInput
-  })));
-};
-exports._TokenListInputDisabled = _TokenListInputDisabled;
-_TokenListInputDisabled.args = {
-  classNames: {
-    wrapper: _TokenListInputStoriesModule.default.tokenListInputWrapper
-  },
-  disabled: true
-};
-const TokenListInputGroupWrap = args => {
-  const [values, setValues] = React.useState([{
-    label: 'apple',
-    key: 'app'
-  }, {
-    label: 'banana',
-    key: 'ban'
-  }]);
-  const [inputValue, setInputValue] = React.useState('');
-  const {
-    filteredGroupTitleOptions
-  } = (0, _useFilteredOptions.useFilteredOptions)({
-    searchTerm: inputValue,
-    // @ts-ignore - TS2322 - Type 'TokenGroupTitleOption<TokenListOption>[] | undefined' is not assignable to type 'GroupTitleOption<TokenListOption>[] | undefined'.
-    groupTitleOptions: args.menu?.groupTitleOptions,
-    excludedKeys: values.map(value => value.key)
-  });
-  const {
-    groupTitleOptionsWithArbitrary
-  } = (0, _useArbitraryOptionAddition.useArbitraryOptionAddition)({
-    searchTerm: inputValue,
-    groupTitleOptions: filteredGroupTitleOptions,
-    excludedKeys: values.map(value => value.key),
-    makeArbitraryValue: value => ({
-      key: value,
-      label: value,
-      arbitrary: true
-    })
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListWrapper
-  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
-    inputValue: inputValue,
-    onInputChange: setInputValue,
-    values: values,
-    onChange: setValues,
-    menu: {
-      groupTitleOptions: groupTitleOptionsWithArbitrary,
-      resolveLabel: option => {
-        if (option.arbitrary && option.label) {
-          return `Create New "${option.label}"`;
-        }
-        return option.label || '';
-      }
-    }
-  })));
-};
-const _TokenListInputGroup = args => /*#__PURE__*/React.createElement(TokenListInputGroupWrap, args);
-exports._TokenListInputGroup = _TokenListInputGroup;
-_TokenListInputGroup.args = {
-  menu: {
-    groupTitleOptions: [{
-      groupTitle: () => /*#__PURE__*/React.createElement("div", {
-        className: _TokenListInputStoriesModule.default.titleWrapper
-      }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-        color: "tertiary"
-      }, "Fast Food"), /*#__PURE__*/React.createElement("div", {
-        className: _TokenListInputStoriesModule.default.infoContainer
-      }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-        title: "Hello!",
-        elevation: "menu"
-      }, /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-info",
-        size: "small",
-        color: "tertiary"
-      })))),
-      options: [{
-        key: 'burger',
-        iconLeft: 'burger',
-        label: 'Burger'
-      }, {
-        key: 'pizza',
-        iconLeft: 'pizza',
-        label: 'Pizza'
-      }, {
-        key: 'fries',
-        iconLeft: 'french-fries',
-        label: 'Fries'
-      }]
-    }, {
-      showLineDivider: true,
-      groupTitle: /*#__PURE__*/React.createElement("div", {
-        className: _TokenListInputStoriesModule.default.titleWrapper
-      }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-        color: "tertiary"
-      }, "Fruits"), /*#__PURE__*/React.createElement("div", {
-        className: _TokenListInputStoriesModule.default.infoContainer
-      }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-        title: "Hello!",
-        elevation: "menu"
-      }, /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-info",
-        size: "small",
-        color: "tertiary"
-      })))),
-      options: [{
-        key: 'banana',
-        iconLeft: 'banana',
-        label: 'Banana'
-      }, {
-        key: 'pear',
-        iconLeft: 'pear',
-        label: 'Pear'
-      }, {
-        key: 'lemon',
-        iconLeft: 'lemon',
-        label: 'Lemon'
-      }]
-    }]
-  }
-};
-const CustomOptionTokenListInput = args => {
-  const options = [{
-    key: '1',
-    label: 'Mango',
-    customComponent: /*#__PURE__*/React.createElement("div", {
-      className: _TokenListInputStoriesModule.default.titleWrapper
-    }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-      color: "tertiary"
-    }, "Mango"), /*#__PURE__*/React.createElement("div", {
-      className: _TokenListInputStoriesModule.default.infoContainer
-    }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-      title: "Hello!",
-      elevation: "menu"
-    }, /*#__PURE__*/React.createElement(_Icon.Icon, {
-      name: "circle-info",
-      size: "large",
-      color: "success",
-      type: "duotone"
-    }))))
-  }, {
-    key: '2',
-    label: 'Watermelon',
-    customComponent: /*#__PURE__*/React.createElement("div", {
-      className: _TokenListInputStoriesModule.default.titleWrapper
-    }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-      color: "tertiary"
-    }, "Watermelon"), /*#__PURE__*/React.createElement("div", {
-      className: _TokenListInputStoriesModule.default.infoContainer
-    }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-      title: "Hello!",
-      elevation: "menu"
-    }, /*#__PURE__*/React.createElement(_Icon.Icon, {
-      name: "circle-info",
-      size: "large",
-      color: "danger",
-      type: "duotone"
-    }))))
-  }, {
-    key: '3',
-    label: 'Option 3'
-  }, {
-    key: '4',
-    label: 'Option 4'
-  }];
-  const [values, setValues] = React.useState([{
-    label: 'apple',
-    key: 'a'
-  }, {
-    label: 'b',
-    key: 'b'
-  }]);
-  const [input, setInput] = React.useState('');
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListWrapper
-  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
-    inputValue: input,
-    onInputChange: setInput,
-    values: values,
-    onChange: setValues,
-    menu: {
-      options
-    }
-  })));
-};
-const _CustomOptionTokenListInput = args => /*#__PURE__*/React.createElement(CustomOptionTokenListInput, args);
-exports._CustomOptionTokenListInput = _CustomOptionTokenListInput;
-const _AllowArbitraryValues = args => {
-  const [values, setValues] = React.useState([]);
-  const [inputValue, setInputValue] = React.useState('');
-  const {
-    filteredOptions
-  } = (0, _useFilteredOptions.useFilteredOptions)({
-    searchTerm: inputValue,
-    options: args.menu?.options,
-    excludedKeys: values.map(value => value.key)
-  });
-  const {
-    optionsWithArbitrary
-  } = (0, _useArbitraryOptionAddition.useArbitraryOptionAddition)({
-    searchTerm: inputValue,
-    options: filteredOptions,
-    excludedKeys: values.map(value => value.key),
-    makeArbitraryValue: value => ({
-      key: value,
-      label: value,
-      arbitrary: true
-    })
-  });
-  const clearHandler = () => {
-    setValues([]);
-    setInputValue('');
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _TokenListInputStoriesModule.default.tokenListHeader
-  }, /*#__PURE__*/React.createElement("label", {
-    for: "token-list-input"
-  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-    color: _Text.TEXT_COLORS.secondary
-  }, "Select Tokens")), !args.disabled && !args.locked && values.length > 0 && /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmallUnderline, {
-    color: _Text.TEXT_COLORS.clickable,
-    className: (0, _classify.classify)(_TokenListInputStoriesModule.default.clearAllButton, {})
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
-    onClick: () => {
-      clearHandler();
-    }
-    // @ts-ignore - TS7006 - Parameter 'e' implicitly has an 'any' type.
-    ,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        clearHandler();
-      }
-    },
-    tabIndex: 0
-  }, "Clear all")), /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
-    values: values,
-    inputValue: inputValue,
-    onInputChange: setInputValue,
-    onChange: newValues => {
-      setValues(newValues);
-      setInputValue('');
-    },
-    menu: {
-      options: optionsWithArbitrary,
-      resolveLabel: option => {
-        if (option.arbitrary && option.label) {
-          return `Create New \"${option.label}\"`;
-        }
-        return option.label || '';
-      }
-    },
-    inputProps: {
-      // @ts-ignore - TS2322 - Type '{ id: string; }' is not assignable to type 'InputProps'.
-      id: 'token-list-input'
-    }
-  })));
-};
-exports._AllowArbitraryValues = _AllowArbitraryValues;
-_AllowArbitraryValues.args = {
-  menu: {
-    options: [{
-      key: '1',
-      label: 'Option 1'
-    }, {
-      key: '2',
-      label: 'Option 2'
-    }, {
-      key: '3',
-      label: 'Option 3'
-    }]
-  },
-  disabled: false,
-  locked: false
-};