glints-aries 4.1.3 → 4.1.4

package/lib/@next/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RadioButtonWrapper = exports.RadioButtonInput = exports.LabelWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+var _spacing = require("../utilities/spacing");
+var _borderRadius = require("../utilities/borderRadius");
+var RadioButtonWrapper = _styledComponents["default"].label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], _spacing.space8, _spacing.space4);
+exports.RadioButtonWrapper = RadioButtonWrapper;
+var RadioButtonInput = _styledComponents["default"].input.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonInput",
+  componentId: "sc-138orlx-1"
+})(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);&::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;&::after{width:10px;height:10px;margin:", ";}}&:hover{border-color:", ";}&:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}&:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}&:checked{border-color:", ";&::after{background-color:", ";}&:disabled{background-color:", ";border-color:", ";&::after{background-color:", ";}}}"], _.Colors.Neutral.B68, _borderRadius.borderRadiusHalf, _borderRadius.borderRadiusHalf, _.Breakpoints.large, _spacing.space4, _.Colors.Neutral.B68, _.Colors.Neutral.B100, _.Colors.Blue.S54, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Blue.S99, _.Colors.Blue.S99, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Neutral.B85);
+exports.RadioButtonInput = RadioButtonInput;
+var LabelWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "RadioButtonStyle__LabelWrapper",
+  componentId: "sc-138orlx-2"
+})(["cursor:pointer;display:flex;flex-direction:column;gap:", ";&[data-disabled='true']{span,div{color:", ";}cursor:not-allowed;}"], _spacing.space4, _.Colors.Neutral.B85);
+exports.LabelWrapper = LabelWrapper;

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

@@ -0,0 +1 @@
+export * from './RadioButton';

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

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

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Option, Section } from '../Menu';
+import { IconNames } from '../Icon/icons/icons';
+interface SearchableProps {
+    /** value of TextInput activator when Select is searchable */
+    inputValue?: string;
+    /** onChange of TextInput activator when Select is searchable */
+    onInputChange?(value: string): void;
+}
+interface OptionsPlaceholderProps {
+    idle?: React.ReactNode;
+    noResult?: React.ReactNode;
+}
+export interface SelectProps {
+    allowMultiple?: boolean;
+    customActivatorIcon?: IconNames;
+    disabled?: boolean;
+    hasError?: boolean;
+    helpText?: React.ReactNode;
+    label?: React.ReactNode;
+    /** Margin Top = 8 ; Option height = 48 ; optionListHeight = (n options * option height) + margin top; */
+    listHeight?: number;
+    loadingOptions?: boolean;
+    name?: string;
+    onBlur?: () => void;
+    onClose?: () => void;
+    onFocus?: () => void;
+    onRemoveTag?({ option }: {
+        option: string;
+    }): void;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    /** callback function when select component is clicked (opened) */
+    onSelectClick?: () => void;
+    options?: Option[];
+    /** sets whether OptionList will follow content's width */
+    optionListFitContent?: boolean;
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    /** sets whether Select is searchable */
+    searchable?: boolean;
+    /** props used for searchable Select */
+    searchableProps?: SearchableProps;
+    optionsPlaceholderProps?: OptionsPlaceholderProps;
+    showPopoverOnFocus?: boolean;
+    /** true = Allow vertical scroll, default by 6 options. */
+    scrollable?: boolean;
+    sections?: Section[];
+    selectedValues?: string[];
+    /** sets a width for the Select component*/
+    width: string;
+    /** sets z-index override for option list dropdown. z-index default to 400 */
+    zIndexOverride?: number;
+}
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,203 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Select = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _Popover = require("../Popover");
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var _components = require("./components");
+var _ActivatorSelect = require("./components/Activator/ActivatorSelect");
+var _Label = require("./components/Label/Label");
+var _SelectStyle = require("./SelectStyle");
+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 Select = function Select(_ref) {
+  var _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    customActivatorIcon = _ref.customActivatorIcon,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    helpText = _ref.helpText,
+    label = _ref.label,
+    listHeight = _ref.listHeight,
+    _ref$loadingOptions = _ref.loadingOptions,
+    loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
+    name = _ref.name,
+    onBlur = _ref.onBlur,
+    onClose = _ref.onClose,
+    onFocus = _ref.onFocus,
+    onRemoveTag = _ref.onRemoveTag,
+    onSelect = _ref.onSelect,
+    onSelectClick = _ref.onSelectClick,
+    _ref$optionListFitCon = _ref.optionListFitContent,
+    optionListFitContent = _ref$optionListFitCon === void 0 ? false : _ref$optionListFitCon,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    placeholder = _ref.placeholder,
+    prefix = _ref.prefix,
+    _ref$searchable = _ref.searchable,
+    searchable = _ref$searchable === void 0 ? false : _ref$searchable,
+    searchableProps = _ref.searchableProps,
+    optionsPlaceholderProps = _ref.optionsPlaceholderProps,
+    _ref$showPopoverOnFoc = _ref.showPopoverOnFocus,
+    showPopoverOnFocus = _ref$showPopoverOnFoc === void 0 ? false : _ref$showPopoverOnFoc,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+    sections = _ref.sections,
+    selectedValues = _ref.selectedValues,
+    width = _ref.width,
+    zIndexOverride = _ref.zIndexOverride;
+  var _useState = (0, _react.useState)(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = (0, _react.useState)(''),
+    optionListHeight = _useState2[0],
+    setOptionListHeight = _useState2[1];
+  var _useState3 = (0, _react.useState)(options),
+    menuOptions = _useState3[0],
+    setMenuOptions = _useState3[1];
+  var optionsLength = options.length;
+  var _useState4 = (0, _react.useState)((searchableProps == null ? void 0 : searchableProps.inputValue) || ''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      showSelected: false,
+      showInput: true,
+      showPlaceholder: true
+    }),
+    searchableSelectState = _useState5[0],
+    setSearchableSelectState = _useState5[1];
+  var _updateSearchableSelectState = function updateSearchableSelectState(newState) {
+    setSearchableSelectState(newState);
+  };
+  var updateInputValue = function updateInputValue(newValue) {
+    setInputValue(newValue);
+  };
+  var updateMenuOptions = function updateMenuOptions(newState) {
+    setMenuOptions(newState);
+  };
+  var handleClose = function handleClose() {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  };
+  var handleFocus = function handleFocus() {
+    if (showPopoverOnFocus) {
+      setPopoverActive(true);
+      return;
+    }
+    if (options.length < 1) {
+      setPopoverActive(false);
+      return;
+    }
+    setPopoverActive(true);
+    onFocus == null ? void 0 : onFocus();
+  };
+  var handleSelectClick = function handleSelectClick() {
+    setPopoverActive(!popoverActive);
+  };
+  (0, _react.useEffect)(function syncInputValueFromSearchableProps() {
+    setInputValue(searchableProps == null ? void 0 : searchableProps.inputValue);
+  }, [searchableProps == null ? void 0 : searchableProps.inputValue]);
+  (0, _react.useEffect)(function () {
+    setMenuOptions(options);
+  }, [options]);
+  (0, _react.useEffect)(function () {
+    if (showPopoverOnFocus) return;
+    if (!(0, _lodash.isEmpty)(inputValue) && optionsLength > 0) {
+      setPopoverActive(true);
+    }
+    if (inputValue === '' && optionsLength < 1) {
+      setPopoverActive(false);
+    }
+  }, [inputValue, optionsLength, showPopoverOnFocus]);
+  (0, _react.useEffect)(function () {
+    if (listHeight) {
+      setOptionListHeight(listHeight + 24 + "px");
+      return;
+    }
+    if (scrollable) {
+      setOptionListHeight(296 + 24 + "px");
+      return;
+    }
+  }, [listHeight, scrollable]);
+  var activator = function activator() {
+    if (searchable || searchableProps) {
+      return /*#__PURE__*/_react["default"].createElement(_components.ActivatorTextInput, {
+        allowMultiple: allowMultiple,
+        disabled: disabled,
+        hasError: hasError,
+        onChange: searchableProps == null ? void 0 : searchableProps.onInputChange,
+        placeholder: placeholder != null ? placeholder : 'Search',
+        width: width,
+        selectedValues: selectedValues,
+        onBlur: onBlur,
+        onSelect: onSelect,
+        onFocus: handleFocus,
+        inputValue: inputValue,
+        updateInputValue: updateInputValue,
+        searchableSelectState: searchableSelectState,
+        updateSearchableSelectState: function updateSearchableSelectState(newState) {
+          return _updateSearchableSelectState(newState);
+        },
+        options: options,
+        updateMenuOptions: updateMenuOptions,
+        prefix: prefix,
+        name: name
+      });
+    }
+    return /*#__PURE__*/_react["default"].createElement(_ActivatorSelect.ActivatorSelect, {
+      allowMultiple: allowMultiple,
+      customActivatorIcon: customActivatorIcon,
+      disabled: disabled,
+      hasError: hasError,
+      placeholder: placeholder != null ? placeholder : 'Placeholder',
+      onBlur: onBlur,
+      onRemoveTag: onRemoveTag,
+      onSelectClick: handleSelectClick,
+      width: width,
+      selectedValues: selectedValues,
+      options: options,
+      name: name,
+      prefix: prefix,
+      onClick: onSelectClick
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {
+    active: popoverActive,
+    activator: /*#__PURE__*/_react["default"].createElement(_SelectStyle.ActivatorWrapper, {
+      width: width
+    }, label && /*#__PURE__*/_react["default"].createElement(_Label.Label, null, label), activator(), helpText && /*#__PURE__*/_react["default"].createElement(_SelectStyle.HelpTextContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      as: "span",
+      variant: "subtitle2",
+      color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
+    }, helpText))),
+    onClose: handleClose,
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    preferredAlignment: "left",
+    preferredPosition: "below",
+    fullWidth: true,
+    fitContent: optionListFitContent,
+    zIndexOverride: zIndexOverride
+  }, !disabled && /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/_react["default"].createElement(_components.OptionList, {
+    loading: loadingOptions,
+    menuOptions: menuOptions,
+    allowMultiple: allowMultiple,
+    onSelect: onSelect,
+    sections: sections,
+    selectedValues: selectedValues,
+    width: width,
+    onMenuClose: handleClose,
+    noOptionsMessage: optionsPlaceholderProps && (!inputValue ? optionsPlaceholderProps.idle : optionsPlaceholderProps.noResult),
+    updateSearchableSelectState: function updateSearchableSelectState(newState) {
+      return _updateSearchableSelectState(newState);
+    }
+  })));
+};
+exports.Select = Select;

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

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const NonSearchableSingleSelect: any;
+export declare const NonSearchableMultipleSelect: any;
+export declare const WithErrorNonSearchable: any;
+export declare const NonSearchableDisabled: any;
+export declare const NonSearchablePrefixed: any;
+export declare const SearchableMultiSelect: any;
+export declare const SearchableSingleSelect: any;
+export declare const SearchableSingleSelectWithOverflowingInputState: any;
+export declare const SearchableSingleSelectWithInitialValue: any;
+export declare const SearchableSingleWithInputState: any;
+export declare const AsyncSearchableSingleWithInputState: any;
+export declare const AsyncSearchableSingleWithInputStateCustomPopoverPlaceholder: any;
+export declare const MultiSelectScrollable: any;
+export declare const WithInlineError: any;
+export declare const SearchableDisabled: any;
+export declare const WithCustomPrefix: any;
+export declare const OptionsWithSublabel: any;

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.HelpTextContainer = exports.ActivatorWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = require("../utilities/spacing");
+var HelpTextContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__HelpTextContainer",
+  componentId: "sc-c6sc8m-0"
+})(["margin-top:", ";"], _spacing.space4);
+exports.HelpTextContainer = HelpTextContainer;
+var ActivatorWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__ActivatorWrapper",
+  componentId: "sc-c6sc8m-1"
+})(["display:flex;flex-direction:column;width:", ";"], function (props) {
+  return props.width;
+});
+exports.ActivatorWrapper = ActivatorWrapper;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Option } from '../../../Menu';
+import { IconNames } from '../../../Icon/icons/icons';
+export interface ActivatorSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'prefix'> {
+    allowMultiple?: boolean;
+    customActivatorIcon?: IconNames;
+    hasError?: boolean;
+    selectedValues?: string[];
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    onRemoveTag?({ option }: {
+        option: string;
+    }): void;
+    onSelectClick?(): void;
+    options?: Option[];
+    width?: string;
+}
+export declare const ActivatorSelect: ({ customActivatorIcon, placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, prefix, ...props }: ActivatorSelectProps) => JSX.Element;

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

@@ -0,0 +1,97 @@
+"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 _Typography = require("../../../Typography");
+var _colors = require("../../../utilities/colors");
+var _ActivatorStyle = require("./ActivatorStyle");
+var _excluded = ["customActivatorIcon", "placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options", "prefix"];
+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 customActivatorIcon = _ref.customActivatorIcon,
+    placeholder = _ref.placeholder,
+    selectedValues = _ref.selectedValues,
+    onClick = _ref.onClick,
+    onRemoveTag = _ref.onRemoveTag,
+    width = _ref.width,
+    _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onSelectClick = _ref.onSelectClick,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    options = _ref.options,
+    prefix = _ref.prefix,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)([]),
+    filteredValues = _useState[0],
+    setFilteredValues = _useState[1];
+  var _useState2 = (0, _react.useState)([]),
+    selectedLabels = _useState2[0],
+    setSelectedLabels = _useState2[1];
+  var activatorRef = (0, _react.useRef)(null);
+  var hasSelectedValues = filteredValues.length > 0;
+  (0, _react.useEffect)(function () {
+    var values = selectedValues == null ? void 0 : selectedValues.filter(function (value) {
+      return value != '';
+    });
+    setFilteredValues(values);
+    var selectedOptions = options == null ? void 0 : options.filter(function (_ref2) {
+      var value = _ref2.value;
+      return values.includes(value);
+    });
+    setSelectedLabels(selectedOptions.map(function (option) {
+      return option.label;
+    }));
+  }, [options, selectedValues]);
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onSelectClick();
+    onClick == null ? void 0 : onClick(e);
+  };
+  var placeholderMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1",
+    as: "span",
+    color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B68
+  }, placeholder);
+  var tagsMarkup = function tagsMarkup() {
+    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
+      }, selectedLabels[0]), selectedValues.length > 1 && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+        variant: "subtitle2",
+        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
+  }), /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.WithPrefixContainer, null, prefix && /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledPrefixContainer, null, prefix), allowMultiple ? tagsMarkup() : /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledSelectTypography, {
+    variant: "body1",
+    "data-disabled": disabled,
+    color: hasSelectedValues ? _colors.Neutral.B18 : _colors.Neutral.B40
+  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup)), /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledIcon, {
+    height: 24,
+    name: customActivatorIcon || '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,13 @@
+/// <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>;
+export declare const StyledSelectTypography: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../../../Typography").TypographyProps) => JSX.Element, any, {}, never>;
+export declare const WithPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<({ name, ...props }: import("../../../Icon").IconProps) => JSX.Element, any, {}, never>;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.WithPrefixContainer = exports.TagsContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelectTypography = exports.StyledSelect = exports.StyledPrefixContainer = exports.StyledIcon = 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");
+var _Typography = require("../../../Typography");
+var _Icon = require("../../../Icon");
+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;
+var StyledSelectTypography = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "ActivatorStyle__StyledSelectTypography",
+  componentId: "sc-rui73p-4"
+})(["display:flex;margin-left:auto;&[data-disabled='true']{color:", ";}"], _colors.Neutral.B85);
+exports.StyledSelectTypography = StyledSelectTypography;
+var WithPrefixContainer = _styledComponents["default"].div.withConfig({
+  displayName: "ActivatorStyle__WithPrefixContainer",
+  componentId: "sc-rui73p-5"
+})(["display:flex;align-items:center;"]);
+exports.WithPrefixContainer = WithPrefixContainer;
+var StyledPrefixContainer = _styledComponents["default"].div.withConfig({
+  displayName: "ActivatorStyle__StyledPrefixContainer",
+  componentId: "sc-rui73p-6"
+})(["display:flex;width:20px;margin-right:8px;"]);
+exports.StyledPrefixContainer = StyledPrefixContainer;
+var StyledIcon = (0, _styledComponents["default"])(_Icon.Icon).withConfig({
+  displayName: "ActivatorStyle__StyledIcon",
+  componentId: "sc-rui73p-7"
+})(["margin-left:auto;"]);
+exports.StyledIcon = StyledIcon;

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Option } from '../../../Menu';
+import { TextInputProps } from '../../../TextInput';
+import { SearchableSelectState } from '../SearchableSelectInput/SearchableSelectInput';
+export interface ActivatorTextInputProps extends Omit<TextInputProps, 'onChange' | 'onSelect'> {
+    allowMultiple?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+    onChange?(value: string): void;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    selectedValues?: string[];
+    width?: string;
+    inputValue?: string;
+    updateInputValue?: (newValue: string) => void;
+    searchableSelectState?: SearchableSelectState;
+    updateSearchableSelectState?: (newState: SearchableSelectState) => void;
+    options?: Option[];
+    updateMenuOptions?: (newState: Option[]) => void;
+}
+export declare const ActivatorTextInput: ({ allowMultiple, disabled, hasError, onChange, onBlur, onFocus, onSelect, prefix, selectedValues, width, inputValue, updateInputValue, options, updateMenuOptions, ...props }: ActivatorTextInputProps) => JSX.Element;