glints-aries 4.0.231 → 4.0.233

package/lib/@next/Select/components/Activator/ActivatorSelect.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ActivatorSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = require("../../../Icon");
+var _Typography = require("../../../Typography");
+var _colors = require("../../../utilities/colors");
+var _ActivatorContext = require("./ActivatorContext");
+var _ActivatorStyle = require("./ActivatorStyle");
+var _excluded = ["placeholder", "values", "onClick", "onRemoveTag", "width"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ActivatorSelect = function ActivatorSelect(_ref) {
+  var placeholder = _ref.placeholder,
+    values = _ref.values,
+    onClick = _ref.onClick,
+    onRemoveTag = _ref.onRemoveTag,
+    width = _ref.width,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var activatorRef = (0, _react.useRef)(null);
+  var filteredValues = values == null ? void 0 : values.filter(function (value) {
+    return value != '';
+  });
+  var hasValue = filteredValues.length > 0;
+  var activatorContext = (0, _ActivatorContext.useActivatorSelect)();
+  var allowMultiple = activatorContext.allowMultiple,
+    disabled = activatorContext.disabled,
+    onSelectClick = activatorContext.onSelectClick,
+    hasError = activatorContext.hasError,
+    selectedValues = activatorContext.selectedValues;
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onSelectClick();
+    onClick;
+  };
+  var placeholderMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1",
+    as: "span",
+    color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
+  }, placeholder);
+  var tagsMarkup = function tagsMarkup() {
+    var hasSelectedValues = selectedValues.length > 0;
+    if (!hasSelectedValues) {
+      return placeholderMarkup;
+    }
+    if (hasSelectedValues) {
+      return /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.TagsContainer, null, /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledTag, {
+        key: "option-" + selectedValues[0],
+        onRemove: onRemoveTag({
+          option: selectedValues[0]
+        }),
+        textColor: _colors.Blue.S99
+      }, selectedValues[0]), selectedValues.length > 1 && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+        variant: "caption",
+        color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
+      }, "... and ", selectedValues.length - 1, " more"));
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledSelect, (0, _extends2["default"])({}, props, {
+    ref: activatorRef,
+    "data-error": hasError,
+    onClick: handleClick,
+    disabled: disabled,
+    width: width
+  }), allowMultiple ? tagsMarkup() : /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1",
+    color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
+  }, hasValue ? filteredValues[0] : placeholderMarkup), /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    height: 24,
+    name: "ri-arrow-m-down-line",
+    fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
+  }));
+};
+exports.ActivatorSelect = ActivatorSelect;

package/lib/@next/Select/components/Activator/ActivatorStyle.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ActivatorSelectProps } from './ActivatorSelect';
+export declare const StyledSelect: import("styled-components").StyledComponent<"button", any, ActivatorSelectProps, never>;
+export declare const TagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledTextInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../../Input/Input").InputProps, "type" | "onChange"> & {
+    canClear?: boolean;
+    onChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;

package/lib/@next/Select/components/Activator/ActivatorStyle.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TagsContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelect = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints/Breakpoints"));
+var _borderRadius = require("../../../utilities/borderRadius");
+var _colors = require("../../../utilities/colors");
+var _fonts = require("../../../utilities/fonts");
+var _spacing = require("../../../utilities/spacing");
+var _TextInput = require("../../../TextInput");
+var _Tag = require("../../../Tag");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var StyledSelect = _styledComponents["default"].button.withConfig({
+  displayName: "ActivatorStyle__StyledSelect",
+  componentId: "sc-rui73p-0"
+})(["display:flex;align-items:center;justify-content:space-between;height:36px;cursor:pointer;padding:0px 8px 0px 12px;border:1px solid ", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);border-radius:", ";background:", ";width:", ";color:", ";font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}&:focus{outline:none;box-shadow:0px 0px 0px 1px #ffffff,0px 0px 0px 3px #6cc9ec;}&:disabled{background:", ";pointer-events:none;cursor:default;border:1px solid ", ";}&[data-error='true']{border:1px solid ", ";border-radius:", ";}"], _colors.Neutral.B68, _borderRadius.borderRadius4, _colors.Neutral.B100, function (props) {
+  return props.width;
+}, _colors.Neutral.B18, _fonts.NotoSans, Breakpoints.large, _colors.Neutral.B95, _colors.Neutral.B85, _colors.Red.B93, _borderRadius.borderRadius4);
+exports.StyledSelect = StyledSelect;
+var TagsContainer = _styledComponents["default"].div.withConfig({
+  displayName: "ActivatorStyle__TagsContainer",
+  componentId: "sc-rui73p-1"
+})(["display:flex;justify-content:space-between;flex-direction:row;align-items:center;"]);
+exports.TagsContainer = TagsContainer;
+var StyledTag = (0, _styledComponents["default"])(_Tag.Tag).withConfig({
+  displayName: "ActivatorStyle__StyledTag",
+  componentId: "sc-rui73p-2"
+})(["height:28px;margin-right:", ";"], _spacing.space8);
+exports.StyledTag = StyledTag;
+var StyledTextInput = (0, _styledComponents["default"])(_TextInput.TextInput).withConfig({
+  displayName: "ActivatorStyle__StyledTextInput",
+  componentId: "sc-rui73p-3"
+})(["width:", ";"], function (props) {
+  return props.width;
+});
+exports.StyledTextInput = StyledTextInput;

package/lib/@next/Select/components/Activator/ActivatorTextInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextInputProps } from '../../../TextInput';
+export interface ActivatorTextInputProps extends Omit<TextInputProps, 'onChange'> {
+    hasError?: boolean;
+    onChange?(value: string): void;
+    width?: string;
+}
+export declare const ActivatorTextInput: ({ onChange, value, width, ...props }: ActivatorTextInputProps) => JSX.Element;

package/lib/@next/Select/components/Activator/ActivatorTextInput.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ActivatorTextInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = require("../../../Icon");
+var _ActivatorContext = require("./ActivatorContext");
+var _ActivatorStyle = require("./ActivatorStyle");
+var _excluded = ["onChange", "value", "width"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ActivatorTextInput = function ActivatorTextInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    width = _ref.width,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var activatorRef = (0, _react.useRef)(null);
+  var activatorContext = (0, _ActivatorContext.useActivatorTextInput)();
+  var disabled = activatorContext.disabled,
+    onFocus = activatorContext.onFocus,
+    hasError = activatorContext.hasError;
+  var handleChange = function handleChange(_ref2) {
+    var value = _ref2.value;
+    if (onChange) onChange(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledTextInput, (0, _extends2["default"])({}, props, {
+    ref: activatorRef,
+    prefix: /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      name: "ri-search"
+    }),
+    value: value,
+    onChange: function onChange(value) {
+      return handleChange({
+        value: value
+      });
+    },
+    onFocus: onFocus,
+    error: hasError,
+    disabled: disabled,
+    width: width
+  }));
+};
+exports.ActivatorTextInput = ActivatorTextInput;

package/lib/@next/Select/components/Activator/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivatorTextInput } from './ActivatorTextInput';
+export { ActivatorSelect } from './ActivatorSelect';

package/lib/@next/Select/components/Activator/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ActivatorTextInput = exports.ActivatorSelect = void 0;
+var _ActivatorTextInput = require("./ActivatorTextInput");
+exports.ActivatorTextInput = _ActivatorTextInput.ActivatorTextInput;
+var _ActivatorSelect = require("./ActivatorSelect");
+exports.ActivatorSelect = _ActivatorSelect.ActivatorSelect;

package/lib/@next/Select/components/Label/Label.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Label: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/lib/@next/Select/components/Label/Label.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Label = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../../../Typography");
+var _colors = require("../../../utilities/colors");
+var Label = function Label(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: _colors.Neutral.B18
+  }, children);
+};
+exports.Label = Label;

package/lib/@next/Select/components/OptionList/OptionList.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { MenuProps } from '../../../Menu';
+export interface OptionListProps extends MenuProps {
+    isEmpty?: boolean;
+    noOptionsMessage?: React.ReactNode;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    width?: string;
+}
+export interface NoOptionListProps {
+    noOptionsMessage?: React.ReactNode;
+}
+export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;
+export declare const OptionList: ({ allowMultiple, noOptionsMessage, onSelect, options, sections, selectedValues, title, width, }: OptionListProps) => JSX.Element;

package/lib/@next/Select/components/OptionList/OptionList.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.OptionList = exports.NoOptionList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Menu = require("../../../Menu");
+var _Typography = require("../../../Typography");
+var _colors = require("../../../utilities/colors");
+var _OptionListStyle = require("./OptionListStyle");
+var NoOptionList = function NoOptionList(_ref) {
+  var _ref$noOptionsMessage = _ref.noOptionsMessage,
+    noOptionsMessage = _ref$noOptionsMessage === void 0 ? 'No matching results' : _ref$noOptionsMessage;
+  return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.EmptyOptionContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "body2",
+    color: _colors.Neutral.B40
+  }, noOptionsMessage));
+};
+exports.NoOptionList = NoOptionList;
+var OptionList = function OptionList(_ref2) {
+  var allowMultiple = _ref2.allowMultiple,
+    noOptionsMessage = _ref2.noOptionsMessage,
+    onSelect = _ref2.onSelect,
+    options = _ref2.options,
+    sections = _ref2.sections,
+    selectedValues = _ref2.selectedValues,
+    title = _ref2.title,
+    width = _ref2.width;
+  var hasOptions = options.length > 0;
+  var onOptionSelect = function onOptionSelect(_ref3) {
+    var value = _ref3.value;
+    if (onSelect) {
+      onSelect({
+        value: value
+      });
+      return;
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.OptionListContainer, {
+    width: width
+  }, hasOptions ? /*#__PURE__*/_react["default"].createElement(_Menu.Menu, {
+    allowMultiple: allowMultiple,
+    options: options,
+    onClick: onOptionSelect,
+    sections: sections,
+    selectedValues: selectedValues,
+    title: title
+  }) : /*#__PURE__*/_react["default"].createElement(NoOptionList, {
+    noOptionsMessage: noOptionsMessage
+  }));
+};
+exports.OptionList = OptionList;

package/lib/@next/Select/components/OptionList/OptionListStyle.d.ts

@@ -0,0 +1,6 @@
+interface OptionListContainerProps {
+    width?: string;
+}
+export declare const OptionListContainer: import("styled-components").StyledComponent<"div", any, OptionListContainerProps, never>;
+export declare const EmptyOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/@next/Select/components/OptionList/OptionListStyle.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.OptionListContainer = exports.EmptyOptionContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = require("../../../utilities/spacing");
+var OptionListContainer = _styledComponents["default"].div.withConfig({
+  displayName: "OptionListStyle__OptionListContainer",
+  componentId: "sc-1ytfzi1-0"
+})(["width:", ";padding:", " 0;"], function (props) {
+  return props.width;
+}, _spacing.space8);
+exports.OptionListContainer = OptionListContainer;
+var EmptyOptionContainer = _styledComponents["default"].div.withConfig({
+  displayName: "OptionListStyle__EmptyOptionContainer",
+  componentId: "sc-1ytfzi1-1"
+})(["display:flex;align-items:center;justify-content:center;margin:10px 0;"]);
+exports.EmptyOptionContainer = EmptyOptionContainer;

package/lib/@next/Select/components/OptionList/index.d.ts

@@ -0,0 +1 @@
+export { OptionList } from './OptionList';

package/lib/@next/Select/components/OptionList/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+exports.OptionList = void 0;
+var _OptionList = require("./OptionList");
+exports.OptionList = _OptionList.OptionList;

package/lib/@next/Select/components/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivatorSelect, ActivatorTextInput } from './Activator';
+export * from './OptionList';

package/lib/@next/Select/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {
+  ActivatorSelect: true,
+  ActivatorTextInput: true
+};
+exports.ActivatorTextInput = exports.ActivatorSelect = void 0;
+var _Activator = require("./Activator");
+exports.ActivatorSelect = _Activator.ActivatorSelect;
+exports.ActivatorTextInput = _Activator.ActivatorTextInput;
+var _OptionList = require("./OptionList");
+Object.keys(_OptionList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _OptionList[key]) return;
+  exports[key] = _OptionList[key];
+});

package/lib/@next/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './components';

package/lib/@next/Select/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _Select = require("./Select");
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  exports[key] = _Select[key];
+});
+var _components = require("./components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  exports[key] = _components[key];
+});

package/lib/@next/Select/selectStoryHelper/NonSearchableMultiSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SelectProps } from '../Select';
+export declare const NonSearchableMultiSelect: ({ options, disabled, ...args }: SelectProps) => JSX.Element;

package/lib/@next/Select/selectStoryHelper/NonSearchableMultiSelect.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.NonSearchableMultiSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Select = require("../Select");
+var _excluded = ["options", "disabled"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var NonSearchableMultiSelect = function NonSearchableMultiSelect(_ref) {
+  var options = _ref.options,
+    disabled = _ref.disabled,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)([]),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    if (!selected.includes(value)) {
+      setSelected([].concat(selected, [value]));
+      return;
+    }
+    setSelected(selected.filter(function (option) {
+      return option !== value;
+    }));
+  };
+  var removeTag = function removeTag(_ref3) {
+    var option = _ref3.option;
+    return function (e) {
+      e.stopPropagation();
+      var options = [].concat(selected);
+      options.splice(options.indexOf(option), 1);
+      setSelected(options);
+    };
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    disabled: disabled,
+    onRemoveTag: removeTag,
+    options: options,
+    onSelect: handleSelect,
+    selectedValues: selected,
+    width: "400px"
+  }));
+};
+exports.NonSearchableMultiSelect = NonSearchableMultiSelect;

package/lib/@next/Select/selectStoryHelper/NonSearchableSingleSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SelectProps } from '../Select';
+export declare const SingleSelect: ({ options, allowMultiple, disabled, ...args }: SelectProps) => JSX.Element;

package/lib/@next/Select/selectStoryHelper/NonSearchableSingleSelect.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SingleSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Select = require("../Select");
+var _excluded = ["options", "allowMultiple", "disabled"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var SingleSelect = function SingleSelect(_ref) {
+  var options = _ref.options,
+    allowMultiple = _ref.allowMultiple,
+    disabled = _ref.disabled,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(''),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    allowMultiple: allowMultiple,
+    disabled: disabled,
+    options: options,
+    onSelect: handleSelect,
+    selectedValues: [selected],
+    width: "400px",
+    label: "Label"
+  }));
+};
+exports.SingleSelect = SingleSelect;

package/lib/@next/Select/selectStoryHelper/Searchable.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Option } from '../../Menu';
+interface SearchableProps {
+    data?: Option[];
+}
+export declare const SearchableSelect: ({ data, ...args }: SearchableProps) => JSX.Element;
+export {};

package/lib/@next/Select/selectStoryHelper/Searchable.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SearchableSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _colors = require("../../utilities/colors");
+var _spacing = require("../../utilities/spacing");
+var _Select = require("../Select");
+var _SelectStoryStyle = require("./SelectStoryStyle");
+var _excluded = ["data"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var SearchableSelect = function SearchableSelect(_ref) {
+  var data = _ref.data,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(''),
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
+  var _useState2 = (0, _react.useState)([]),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isSearchEmpty = _useState3[0],
+    setIsSearchEmpty = _useState3[1];
+  var _useState4 = (0, _react.useState)(data),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(value);
+    if (value === '') {
+      setOptions(data);
+      return;
+    }
+    var filterRegex = new RegExp(value, 'i');
+    var filterOptions = options.filter(function (option) {
+      return option.label.match(filterRegex);
+    });
+    setOptions(filterOptions);
+  };
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    if (!selectedOptions.includes(value)) {
+      setSelectedOptions([].concat(selectedOptions, [value]));
+      return;
+    }
+    setSelectedOptions(selectedOptions.filter(function (option) {
+      return option !== value;
+    }));
+  };
+  var removeTag = function removeTag(tag) {
+    return function () {
+      var options = [].concat(selectedOptions);
+      options.splice(options.indexOf(tag), 1);
+      setSelectedOptions(options);
+    };
+  };
+  var tagsMarkup = selectedOptions.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement(_SelectStoryStyle.StyledTag, {
+      key: "option-" + option,
+      onRemove: removeTag(option),
+      textColor: _colors.Blue.S99
+    }, option);
+  });
+  (0, _react.useEffect)(function () {
+    if (options.length === 0) {
+      setIsSearchEmpty(true);
+    }
+    if (options.length > 0 && isSearchEmpty === true) {
+      setIsSearchEmpty(false);
+    }
+  }, [isSearchEmpty, options]);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    onSelect: handleSelect,
+    options: options,
+    selectedValues: selectedOptions,
+    width: "600px",
+    searchableProps: {
+      inputValue: inputValue,
+      onInputChange: function onInputChange(value) {
+        return handleInputChange(value);
+      }
+    },
+    label: "Label"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      paddingTop: _spacing.space8
+    }
+  }, tagsMarkup));
+};
+exports.SearchableSelect = SearchableSelect;

package/lib/@next/Select/selectStoryHelper/SelectStoryStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/lib/@next/Select/selectStoryHelper/SelectStoryStyle.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledTag = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Tag = require("../../Tag");
+var _spacing = require("../../utilities/spacing");
+var StyledTag = (0, _styledComponents["default"])(_Tag.Tag).withConfig({
+  displayName: "SelectStoryStyle__StyledTag",
+  componentId: "sc-1xv9wvg-0"
+})(["margin-right:", ";"], _spacing.space8);
+exports.StyledTag = StyledTag;

package/lib/@next/Tag/Tag.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     value?: string;
-    onRemove?: (() => void) | null;
+    onRemove?: (() => void) | null | void;
     textColor?: string;
     disabled?: boolean;
 }

package/lib/@next/Tag/TagStyle.js

@@ -11,7 +11,7 @@ var _spacing = require("../utilities/spacing");
 var TagContentStyle = _styledComponents["default"].span.withConfig({
   displayName: "TagStyle__TagContentStyle",
   componentId: "sc-r1wv7a-0"
-})(["padding:", " ", ";transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
+})(["padding:", " ", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
 exports.TagContentStyle = TagContentStyle;
 var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle__TagRemoveContainerStyle",