glints-aries 4.0.231 → 4.0.232

package/lib/@next/Menu/MenuStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.TitleContainer = exports.StyledMenu = exports.ListContainer = void 0;
+exports.TitleContainer = exports.StyledSections = exports.StyledMenu = exports.ListContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
@@ -10,15 +10,20 @@ var _spacing = require("../utilities/spacing");
 var StyledMenu = _styledComponents["default"].ul.withConfig({
   displayName: "MenuStyle__StyledMenu",
   componentId: "sc-zm0l1a-0"
-})(["list-style:none;margin:", " 0;padding:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}}}"], _spacing.space8, _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99);
+})(["list-style:none;padding:0;margin:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99, _colors.Neutral.B100);
 exports.StyledMenu = StyledMenu;
 var TitleContainer = _styledComponents["default"].div.withConfig({
   displayName: "MenuStyle__TitleContainer",
   componentId: "sc-zm0l1a-1"
-})(["padding:", " ", ";span{text-transform:uppercase;}"], _spacing.space8, _spacing.space16);
+})(["margin:", " 0 ", ";padding:", " ", ";span{text-transform:uppercase;}"], _spacing.space8, _spacing.space4, _spacing.space8, _spacing.space16);
 exports.TitleContainer = TitleContainer;
 var ListContainer = _styledComponents["default"].div.withConfig({
   displayName: "MenuStyle__ListContainer",
   componentId: "sc-zm0l1a-2"
 })(["padding:0 ", ";"], _spacing.space8);
-exports.ListContainer = ListContainer;
+exports.ListContainer = ListContainer;
+var StyledSections = _styledComponents["default"].ul.withConfig({
+  displayName: "MenuStyle__StyledSections",
+  componentId: "sc-zm0l1a-3"
+})(["list-style:none;padding:0;margin:", " 0;"], _spacing.space8);
+exports.StyledSections = StyledSections;

package/lib/@next/Menu/components/MenuOption.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface MenuOptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> {
+    id?: string;
+    disabled?: boolean;
+    isSelected?: boolean;
+    value: string;
+    onClick?({ value }: {
+        value: string;
+    }): void;
+    allowMultiple?: boolean;
+}
+export declare const MenuOption: ({ children, disabled, isSelected, onClick, value, allowMultiple, }: MenuOptionProps) => JSX.Element;

package/lib/@next/Menu/components/MenuOption.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MenuOption = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MenuStyle = require("../MenuStyle");
+var MenuOption = function MenuOption(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    value = _ref.value,
+    allowMultiple = _ref.allowMultiple;
+  var handleClick = function handleClick(value) {
+    onClick({
+      value: value
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.ListContainer, null, /*#__PURE__*/_react["default"].createElement("li", {
+    "aria-disabled": disabled,
+    "data-active": isSelected,
+    "data-multiple": allowMultiple,
+    value: value,
+    onClick: function onClick() {
+      return handleClick(value);
+    }
+  }, children));
+};
+exports.MenuOption = MenuOption;

package/lib/@next/Menu/components/MenuOptionCheckbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const MenuOptionCheckbox: ({ disabled, isSelected, label, }: {
+    disabled: boolean;
+    isSelected: boolean;
+    label: React.ReactNode;
+}) => JSX.Element;

package/lib/@next/Menu/components/MenuOptionCheckbox.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MenuOptionCheckbox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Checkbox = require("../../Checkbox");
+var MenuOptionCheckbox = function MenuOptionCheckbox(_ref) {
+  var disabled = _ref.disabled,
+    isSelected = _ref.isSelected,
+    label = _ref.label;
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, {
+    label: label,
+    checked: isSelected,
+    disabled: disabled
+  });
+};
+exports.MenuOptionCheckbox = MenuOptionCheckbox;

package/lib/@next/Menu/components/MenuOptionLabel.d.ts

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

package/lib/@next/Menu/components/MenuOptionLabel.js

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

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

@@ -0,0 +1,3 @@
+export { MenuOption, MenuOptionProps } from './MenuOption';
+export { MenuOptionLabel } from './MenuOptionLabel';
+export { MenuOptionCheckbox } from './MenuOptionCheckbox';

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

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MenuOptionProps = exports.MenuOptionLabel = exports.MenuOptionCheckbox = exports.MenuOption = void 0;
+var _MenuOption = require("./MenuOption");
+exports.MenuOption = _MenuOption.MenuOption;
+exports.MenuOptionProps = _MenuOption.MenuOptionProps;
+var _MenuOptionLabel = require("./MenuOptionLabel");
+exports.MenuOptionLabel = _MenuOptionLabel.MenuOptionLabel;
+var _MenuOptionCheckbox = require("./MenuOptionCheckbox");
+exports.MenuOptionCheckbox = _MenuOptionCheckbox.MenuOptionCheckbox;

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

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

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

@@ -6,4 +6,10 @@ Object.keys(_Menu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Menu[key]) return;
   exports[key] = _Menu[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/Menu/menuStoryHelper/PopoverMenu.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MenuProps } from '../Menu';
+interface PopoverMenuProps extends MenuProps {
+    activatorLabel?: string;
+}
+export declare const PopoverMenu: ({ activatorLabel, allowMultiple, ...props }: PopoverMenuProps) => JSX.Element;
+export {};

package/lib/@next/Menu/menuStoryHelper/PopoverMenu.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.PopoverMenu = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Button = require("../../Button");
+var _Popover = require("../../Popover");
+var _Menu = require("../Menu");
+var _excluded = ["activatorLabel", "allowMultiple"];
+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 PopoverMenu = function PopoverMenu(_ref) {
+  var _ref$activatorLabel = _ref.activatorLabel,
+    activatorLabel = _ref$activatorLabel === void 0 ? 'Menu' : _ref$activatorLabel,
+    allowMultiple = _ref.allowMultiple,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(true),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = (0, _react.useState)([]),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var togglePopoverActive = (0, _react.useCallback)(function () {
+    return setPopoverActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    if (!allowMultiple) {
+      setSelectedOptions([value]);
+      return;
+    }
+    if (!selectedOptions.includes(value)) {
+      setSelectedOptions([].concat(selectedOptions, [value]));
+      return;
+    }
+    setSelectedOptions(selectedOptions.filter(function (option) {
+      return option !== value;
+    }));
+  };
+  var activator = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: togglePopoverActive
+  }, activatorLabel);
+  return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {
+    active: popoverActive,
+    activator: activator,
+    onClose: function onClose() {
+      return setPopoverActive(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, null, /*#__PURE__*/_react["default"].createElement(_Menu.Menu, (0, _extends2["default"])({}, props, {
+    allowMultiple: allowMultiple,
+    onClick: handleSelect,
+    selectedValues: selectedOptions
+  }))));
+};
+exports.PopoverMenu = PopoverMenu;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Option, Section } from '../Menu';
+interface SearchableProps {
+    /** value of TextInput activator when Select is searchable */
+    inputValue?: string;
+    /** onChange of TextInput activator when Select is searchable */
+    onInputChange?(value: string): void;
+}
+export interface SelectProps {
+    allowMultiple?: boolean;
+    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;
+    onClose?: () => void;
+    onRemoveTag?({ option }: {
+        option: string;
+    }): void;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    options?: Option[];
+    placeholder?: string;
+    /** sets whether to be able to type in to search from the options*/
+    searchableProps?: SearchableProps;
+    /** true = Allow vertical scroll, default by 6 options. */
+    scrollable?: boolean;
+    sections?: Section[];
+    selectedValues?: string[];
+    /** sets a width for the Select component*/
+    width: string;
+}
+export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,125 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Select = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Popover = require("../Popover");
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var _components = require("./components");
+var _ActivatorContext = require("./components/Activator/ActivatorContext");
+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,
+    disabled = _ref.disabled,
+    hasError = _ref.hasError,
+    helpText = _ref.helpText,
+    label = _ref.label,
+    onClose = _ref.onClose,
+    onRemoveTag = _ref.onRemoveTag,
+    onSelect = _ref.onSelect,
+    options = _ref.options,
+    placeholder = _ref.placeholder,
+    listHeight = _ref.listHeight,
+    searchableProps = _ref.searchableProps,
+    scrollable = _ref.scrollable,
+    sections = _ref.sections,
+    selectedValues = _ref.selectedValues,
+    width = _ref.width;
+  var _useState = (0, _react.useState)(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = (0, _react.useState)(''),
+    optionListHeight = _useState2[0],
+    setOptionListHeight = _useState2[1];
+  var handleClose = (0, _react.useCallback)(function () {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  var handleFocus = function handleFocus() {
+    setPopoverActive(true);
+  };
+  var handleBlur = function handleBlur() {
+    if (popoverActive) {
+      handleClose();
+    }
+  };
+  var handleSelectClick = function handleSelectClick() {
+    setPopoverActive(!popoverActive);
+  };
+  var activatorSelectContextValue = {
+    allowMultiple: allowMultiple,
+    disabled: disabled,
+    hasError: hasError,
+    onSelectClick: handleSelectClick,
+    selectedValues: selectedValues
+  };
+  var activatorTextInputContextValue = {
+    disabled: disabled,
+    hasError: hasError,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  };
+  (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 (searchableProps) {
+      var inputValue = searchableProps.inputValue,
+        _onInputChange = searchableProps.onInputChange;
+      return /*#__PURE__*/_react["default"].createElement(_ActivatorContext.ActivatorTextInputContext.Provider, {
+        value: activatorTextInputContextValue
+      }, /*#__PURE__*/_react["default"].createElement(_components.ActivatorTextInput, {
+        value: inputValue,
+        onChange: _onInputChange,
+        placeholder: placeholder != null ? placeholder : 'Search',
+        width: width
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement(_ActivatorContext.ActivatorSelectContext.Provider, {
+      value: activatorSelectContextValue
+    }, /*#__PURE__*/_react["default"].createElement(_ActivatorSelect.ActivatorSelect, {
+      disabled: disabled,
+      placeholder: "Placeholder",
+      onRemoveTag: onRemoveTag,
+      width: width,
+      values: selectedValues
+    }));
+  };
+  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,
+    fullWidth: true
+  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/_react["default"].createElement(_components.OptionList, {
+    allowMultiple: allowMultiple,
+    onSelect: onSelect,
+    options: options,
+    sections: sections,
+    selectedValues: selectedValues,
+    width: width
+  })));
+};
+exports.Select = Select;

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

@@ -0,0 +1,11 @@
+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 SearchableMultiSelect: any;
+export declare const MultiSelectScrollable: any;
+export declare const WithInlineError: any;
+export declare const SearchableDisabled: 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/ActivatorContext.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ActivatorSelectProps } from './ActivatorSelect';
+import { ActivatorTextInputProps } from './ActivatorTextInput';
+export interface ActivatorSelectContextProps extends ActivatorSelectProps {
+    allowMultiple?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+    onSelectClick(): void;
+    selectedValues?: string[];
+}
+export interface ActivatorTextInputContextProps extends ActivatorTextInputProps {
+    disabled?: boolean;
+}
+export declare const ActivatorSelectContext: import("react").Context<ActivatorSelectContextProps>;
+export declare const ActivatorTextInputContext: import("react").Context<ActivatorTextInputContextProps>;
+export declare const useActivatorSelect: () => ActivatorSelectContextProps;
+export declare const useActivatorTextInput: () => ActivatorTextInputContextProps;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useActivatorTextInput = exports.useActivatorSelect = exports.ActivatorTextInputContext = exports.ActivatorSelectContext = void 0;
+var _react = require("react");
+var ActivatorSelectContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ActivatorSelectContext = ActivatorSelectContext;
+var ActivatorTextInputContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ActivatorTextInputContext = ActivatorTextInputContext;
+var useActivatorSelect = function useActivatorSelect() {
+  var context = (0, _react.useContext)(ActivatorSelectContext);
+  if (!context) {
+    throw new Error('No ActivatorSelectContext was provided. Your component must be wrapped in a <ActivatorSelectContext.Provider>');
+  }
+  return context;
+};
+exports.useActivatorSelect = useActivatorSelect;
+var useActivatorTextInput = function useActivatorTextInput() {
+  var context = (0, _react.useContext)(ActivatorTextInputContext);
+  if (!context) {
+    throw new Error('No ActivatorTextInputContext was provided. Your component must be wrapped in a <ActivatorTextInputContext.Provider>');
+  }
+  return context;
+};
+exports.useActivatorTextInput = useActivatorTextInput;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    values?: string[];
+    placeholder?: string;
+    onRemoveTag?({ option }: {
+        option: string;
+    }): void;
+    width?: string;
+}
+export declare const ActivatorSelect: ({ placeholder, values, onClick, onRemoveTag, width, ...props }: ActivatorSelectProps) => JSX.Element;

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;