glints-aries 4.0.239 → 4.0.241

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInput.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { InputProps } from '../../../Input/Input';
+import { Option } from '../../../Menu';
+export interface SearchableSelectState {
+    showSelected: boolean;
+    showInput: boolean;
+    showPlaceholder: boolean;
+}
+export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onChange' | 'onSelect'> & {
+    canClear?: boolean;
+    filterOptions?: (str: string) => Option[];
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    selectedValue?: string;
+    inputValue?: string;
+    updateInputValue?: (newValue: string) => void;
+    searchableSelectState?: SearchableSelectState;
+    updateSearchableSelectState?: (newState: SearchableSelectState) => void;
+    options?: Option[];
+    updateMenuOptions?: (newState: Option[]) => void;
+};
+export declare const SearchableSelectInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange" | "onSelect"> & {
+    canClear?: boolean;
+    filterOptions?: (str: string) => Option[];
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    selectedValue?: string;
+    inputValue?: string;
+    updateInputValue?: (newValue: string) => void;
+    searchableSelectState?: SearchableSelectState;
+    updateSearchableSelectState?: (newState: SearchableSelectState) => void;
+    options?: Option[];
+    updateMenuOptions?: (newState: Option[]) => void;
+} & React.RefAttributes<HTMLInputElement>>;

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInput.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { StyledInput, StyledPrefixContainer } from '../../../Input/InputStyle';
+import { ClearSelected } from './ClearSelected';
+import { InputContainer, StyledContainer, StyledSelectedValue } from './SearchableSelectInputStyle';
+export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSelectInput(_ref, ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    error = _ref.error,
+    filterOptions = _ref.filterOptions,
+    onSelect = _ref.onSelect,
+    placeholder = _ref.placeholder,
+    prefix = _ref.prefix,
+    selectedValue = _ref.selectedValue,
+    width = _ref.width,
+    inputValue = _ref.inputValue,
+    updateInputValue = _ref.updateInputValue,
+    onFocus = _ref.onFocus,
+    _ref$searchableSelect = _ref.searchableSelectState,
+    showInput = _ref$searchableSelect.showInput,
+    showPlaceholder = _ref$searchableSelect.showPlaceholder,
+    showSelected = _ref$searchableSelect.showSelected,
+    updateSearchableSelectState = _ref.updateSearchableSelectState,
+    options = _ref.options,
+    updateMenuOptions = _ref.updateMenuOptions,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var inputRef = useRef(null);
+  var _useState = useState(false),
+    showClear = _useState[0],
+    setShowClear = _useState[1];
+  var _useState2 = useState(false),
+    isSelectedClicked = _useState2[0],
+    setIsSelectedClicked = _useState2[1];
+  var handleFocus = function handleFocus(e) {
+    setIsSelectedClicked(false);
+    setShowClear(false);
+    onFocus(e);
+  };
+  var handleClearIconClick = function handleClearIconClick() {
+    setShowClear(false);
+    updateSearchableSelectState({
+      showSelected: false,
+      showPlaceholder: true,
+      showInput: true
+    });
+    updateMenuOptions(options);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    var str = e.currentTarget.value;
+    updateInputValue(str);
+    var filteredOptions = filterOptions(str);
+    updateMenuOptions(filteredOptions);
+    updateSearchableSelectState({
+      showSelected: false,
+      showInput: true,
+      showPlaceholder: false
+    });
+  };
+  var handleSelectedClick = function handleSelectedClick(e) {
+    e.stopPropagation();
+    setIsSelectedClicked(true);
+    updateSearchableSelectState({
+      showSelected: true,
+      showInput: true,
+      showPlaceholder: false
+    });
+    updateInputValue('');
+    updateMenuOptions(options);
+  };
+  var handleInputBlur = function handleInputBlur() {
+    setIsSelectedClicked(false);
+    if (selectedValue) {
+      // allow onClick event handler in Menu before onBlur of input
+      setTimeout(function () {
+        setShowClear(true);
+        updateSearchableSelectState({
+          showSelected: true,
+          showInput: false,
+          showPlaceholder: false
+        });
+      }, 100);
+    }
+  };
+  useEffect(function () {
+    if (isSelectedClicked && showInput) {
+      inputRef.current.focus();
+    }
+    return;
+  }, [isSelectedClicked, showInput]);
+  useEffect(function () {
+    if (selectedValue) {
+      setShowClear(true);
+      return;
+    }
+    setShowClear(false);
+  }, [selectedValue]);
+  return /*#__PURE__*/React.createElement(StyledContainer, {
+    ref: ref,
+    "data-error": error,
+    "data-disabled": disabled,
+    prefixWidth: 37,
+    suffixWidth: 33,
+    width: width
+  }, /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix), showSelected && /*#__PURE__*/React.createElement(StyledSelectedValue, {
+    className: "searchable-select",
+    onClick: handleSelectedClick
+  }, selectedValue), showInput && /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(StyledInput, _extends({
+    ref: inputRef,
+    onChange: handleInputChange,
+    placeholder: showPlaceholder ? placeholder : null,
+    value: inputValue,
+    onBlur: handleInputBlur,
+    onFocus: handleFocus
+  }, props))), showClear && /*#__PURE__*/React.createElement(ClearSelected, {
+    onSelect: onSelect,
+    handleClearIconClick: handleClearIconClick,
+    updateInputValue: updateInputValue
+  }));
+});

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, import("../../../Input/Input").InputProps & import("../../../Input/InputStyle").PreffixSuffixWidthProps, never>;
+export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../../../utilities/breakpoints';
+import { Neutral, Red } from '../../../utilities/colors';
+import { NotoSans } from '../../../utilities/fonts';
+import { StyledContainer as StyledInputContainer, StyledSuffixContainer } from '../../../Input/InputStyle';
+import { borderRadius4 } from '../../../utilities/borderRadius';
+export var StyledContainer = styled(StyledInputContainer).withConfig({
+  displayName: "SearchableSelectInputStyle__StyledContainer",
+  componentId: "sc-1oj168h-0"
+})(["position:relative;height:36px;width:", ";background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);box-sizing:border-box;display:grid;input{background:transparent;z-index:1;width:", ";}&:has(> div > input:focus) > .searchable-select{color:", ";}.searchable-select,input{padding-left:", "px;padding-right:", "px;}&[data-error='true'] .searchable-select{border:1px solid ", ";}&[data-error='true'] .searchable-select:focus{box-shadow:none;}&[data-disabled='true'] .searchable-select{border:1px solid ", ";background:", ";color:", ";}"], function (props) {
+  return props.width;
+}, Neutral.B100, function (props) {
+  return props.width;
+}, Neutral.B40, function (props) {
+  return props.prefixWidth;
+}, function (props) {
+  return props.suffixWidth;
+}, Red.B93, Neutral.B85, Neutral.B95, Neutral.B85);
+export var StyledSelectedValue = styled.div.withConfig({
+  displayName: "SearchableSelectInputStyle__StyledSelectedValue",
+  componentId: "sc-1oj168h-1"
+})(["border:1px solid ", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], Neutral.B68, borderRadius4, NotoSans, Neutral.B18, Breakpoints.large);
+export var InputContainer = styled.div.withConfig({
+  displayName: "SearchableSelectInputStyle__InputContainer",
+  componentId: "sc-1oj168h-2"
+})(["grid-column:1 / 1;grid-row:1 / 1;"]);
+export var ClearSelectedContainer = styled(StyledSuffixContainer).withConfig({
+  displayName: "SearchableSelectInputStyle__ClearSelectedContainer",
+  componentId: "sc-1oj168h-3"
+})(["z-index:2;"]);

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["data"];
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Blue } from '../../utilities/colors';
 import { space8 } from '../../utilities/spacing';
 import { Select } from '../Select';
@@ -15,23 +15,8 @@ export var SearchableSelect = function SearchableSelect(_ref) {
   var _useState2 = useState([]),
     selectedOptions = _useState2[0],
     setSelectedOptions = _useState2[1];
-  var _useState3 = useState(false),
-    isSearchEmpty = _useState3[0],
-    setIsSearchEmpty = _useState3[1];
-  var _useState4 = 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;
@@ -57,17 +42,9 @@ export var SearchableSelect = function SearchableSelect(_ref) {
       textColor: Blue.S99
     }, option);
   });
-  useEffect(function () {
-    if (options.length === 0) {
-      setIsSearchEmpty(true);
-    }
-    if (options.length > 0 && isSearchEmpty === true) {
-      setIsSearchEmpty(false);
-    }
-  }, [isSearchEmpty, options]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({}, args, {
     onSelect: handleSelect,
-    options: options,
+    options: data,
     selectedValues: selectedOptions,
     width: "600px",
     searchableProps: {

package/es/@next/Select/selectStoryHelper/SearchableSingleSelect.d.ts

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

package/es/@next/Select/selectStoryHelper/SearchableSingleSelect.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["data"];
+import React, { useState } from 'react';
+import { Select } from '../Select';
+export var SearchableSingle = function SearchableSingle(_ref) {
+  var data = _ref.data,
+    args = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(''),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+    onSelect: handleSelect,
+    options: data,
+    selectedValues: [selected],
+    width: "600px",
+    searchable: true,
+    label: "Label"
+  }));
+};

package/es/@next/utilities/colors/orange.d.ts

@@ -1,5 +1,5 @@
 export declare const Brand = "#F06730";
-export declare const S42 = "#FAD491";
+export declare const S21 = "#FCE9C8";
 export declare const S64 = "#F7BD59";
 export declare const S86 = "#F5A623";
 export declare const S87 = "#F48620";

package/es/@next/utilities/colors/orange.js

@@ -1,5 +1,5 @@
 export var Brand = '#F06730';
-export var S42 = '#FAD491';
+export var S21 = '#FCE9C8';
 export var S64 = '#F7BD59';
 export var S86 = '#F5A623';
 export var S87 = '#F48620';

package/es/@next/utilities/colors/red.d.ts

@@ -1,6 +1,6 @@
 export declare const Brand = "#EC272B";
-export declare const B100 = "#FFC7C2";
-export declare const B99 = "#FC6568";
+export declare const B100 = "#FFE5E6";
+export declare const B99 = "#FCCACB";
 export declare const B93 = "#EC272B";
 export declare const B74 = "#BD3638";
 export declare const B65 = "#8F393B";

package/es/@next/utilities/colors/red.js

@@ -1,6 +1,6 @@
 export var Brand = '#EC272B';
-export var B100 = '#FFC7C2';
-export var B99 = '#FC6568';
+export var B100 = '#FFE5E6';
+export var B99 = '#FCCACB';
 export var B93 = '#EC272B';
 export var B74 = '#BD3638';
 export var B65 = '#8F393B';

package/lib/@next/Alert/AlertStyle.js

@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledAlertContainer = _styledComponents["default"].div.withConfig({
   displayName: "AlertStyle__StyledAlertContainer",
   componentId: "sc-1e5i2kj-0"
-})(["position:fixed;top:90px;right:24px;display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:100;color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], _spacing.space12, _spacing.space8, _borderRadius.borderRadius4, _colors.Neutral.B18, _colors.Green.B89, _colors.Green.B61, _colors.Blue.S08, _colors.Blue.Brand, _colors.Orange.S42, _colors.Orange.S86, _colors.Red.B100, _colors.Red.B93, Breakpoints.large, _spacing.space8);
+})(["position:fixed;top:90px;right:24px;display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:100;color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], _spacing.space12, _spacing.space8, _borderRadius.borderRadius4, _colors.Neutral.B18, _colors.Green.B89, _colors.Green.B61, _colors.Blue.S08, _colors.Blue.S99, _colors.Orange.S21, _colors.Orange.S86, _colors.Red.B100, _colors.Red.B93, Breakpoints.large, _spacing.space8);
 exports.StyledAlertContainer = StyledAlertContainer;
 var StyledAlertCloseIconContainer = _styledComponents["default"].div.withConfig({
   displayName: "AlertStyle__StyledAlertCloseIconContainer",

package/lib/@next/Avatar/AvatarStyle.js

@@ -11,7 +11,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 mediumAvatarSizeStyle = "\n  width: 40px;\n  height: 40px;\n  \n  @media (max-width: " + Breakpoints.large + ") {\n    width: 32px;\n    height: 32px;\n  }\n";
 var largeAvatarSizeStyle = "\n  width: 60px;\n  height: 60px;\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 40px;\n    height: 40px;\n  }\n";
-var avatarBackgroundColor = (_avatarBackgroundColo = {}, _avatarBackgroundColo['supplementary'] = _colors.Neutral.B99, _avatarBackgroundColo['warning'] = _colors.Orange.S42, _avatarBackgroundColo['danger'] = _colors.Red.B100, _avatarBackgroundColo['success'] = _colors.Green.B89, _avatarBackgroundColo['outstanding'] = _colors.Blue.S08, _avatarBackgroundColo);
+var avatarBackgroundColor = (_avatarBackgroundColo = {}, _avatarBackgroundColo['supplementary'] = _colors.Neutral.B99, _avatarBackgroundColo['warning'] = _colors.Orange.S21, _avatarBackgroundColo['danger'] = _colors.Red.B100, _avatarBackgroundColo['success'] = _colors.Green.B89, _avatarBackgroundColo['outstanding'] = _colors.Blue.S08, _avatarBackgroundColo);
 var avatarSizeVariant = (_avatarSizeVariant = {}, _avatarSizeVariant['large'] = largeAvatarSizeStyle, _avatarSizeVariant['medium'] = mediumAvatarSizeStyle, _avatarSizeVariant);
 var getAvatarBackgroundColor = function getAvatarBackgroundColor(variant) {
   if (!(variant in avatarBackgroundColor)) {

package/lib/@next/Badge/BadgeStyle.js

@@ -8,7 +8,7 @@ var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
 var _badgeBackgroundColor, _badgeTextColor;
-var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = _colors.Neutral.B95, _badgeBackgroundColor['success'] = _colors.Green.B89, _badgeBackgroundColor['information'] = _colors.Blue.S08, _badgeBackgroundColor['warning'] = _colors.Orange.S42, _badgeBackgroundColor['critical'] = _colors.Red.B100, _badgeBackgroundColor['promotion'] = _colors.Yellow.S75, _badgeBackgroundColor['enticing'] = _colors.Orange.S87, _badgeBackgroundColor['attention'] = _colors.Red.B93, _badgeBackgroundColor);
+var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = _colors.Neutral.B95, _badgeBackgroundColor['success'] = _colors.Green.B89, _badgeBackgroundColor['information'] = _colors.Blue.S08, _badgeBackgroundColor['warning'] = _colors.Orange.S21, _badgeBackgroundColor['critical'] = _colors.Red.B100, _badgeBackgroundColor['promotion'] = _colors.Yellow.S75, _badgeBackgroundColor['enticing'] = _colors.Orange.S87, _badgeBackgroundColor['attention'] = _colors.Red.B93, _badgeBackgroundColor);
 var badgeTextColor = (_badgeTextColor = {}, _badgeTextColor['neutral'] = _colors.Neutral.B18, _badgeTextColor['success'] = _colors.Neutral.B18, _badgeTextColor['information'] = _colors.Neutral.B18, _badgeTextColor['warning'] = _colors.Neutral.B18, _badgeTextColor['critical'] = _colors.Neutral.B18, _badgeTextColor['promotion'] = _colors.Neutral.B18, _badgeTextColor['enticing'] = _colors.Neutral.B100, _badgeTextColor['attention'] = _colors.Neutral.B100, _badgeTextColor);
 exports.badgeTextColor = badgeTextColor;
 var getBadgeBackgroundColor = function getBadgeBackgroundColor(status) {

package/lib/@next/Banner/BannerStyle.js

@@ -18,7 +18,7 @@ exports.StyledCloseIconWrapper = StyledCloseIconWrapper;
 var StyledBanner = _styledComponents["default"].div.withConfig({
   displayName: "BannerStyle__StyledBanner",
   componentId: "sc-1suv683-1"
-})(["min-height:100px;padding:20px;background:", ";color:", ";border:1px solid ", ";border-radius:", ";svg{position:absolute;fill:", ";height:24px;width:24px;top:0;}&[data-titled='true'] svg{top:3px;}&[data-status='success']{background:", ";border:1px solid ", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";border:1px solid ", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";border:1px solid ", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='critical']{background:", ";border:1px solid ", ";}&[data-status='critical'] svg{fill:", ";}@media (max-width:", "){min-height:89px;&[data-titled='true'] svg{top:0;}}"], _colors.Neutral.B99, _colors.Neutral.B18, _colors.Neutral.B68, _borderRadius.borderRadius8, _colors.Neutral.B40, _colors.Green.B89, _colors.Neutral.B68, _colors.Green.B61, _colors.Blue.S08, _colors.Blue.S99, _colors.Blue.S99, _colors.Orange.S42, _colors.Orange.S86, _colors.Orange.S87, _colors.Red.B100, _colors.Red.B93, _colors.Red.B93, Breakpoints.large);
+})(["min-height:100px;padding:20px;background:", ";color:", ";border:1px solid ", ";border-radius:", ";svg{position:absolute;fill:", ";height:24px;width:24px;top:0;}&[data-titled='true'] svg{top:3px;}&[data-status='success']{background:", ";border:1px solid ", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";border:1px solid ", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";border:1px solid ", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='critical']{background:", ";border:1px solid ", ";}&[data-status='critical'] svg{fill:", ";}@media (max-width:", "){min-height:89px;&[data-titled='true'] svg{top:0;}}"], _colors.Neutral.B99, _colors.Neutral.B18, _colors.Neutral.B68, _borderRadius.borderRadius8, _colors.Neutral.B40, _colors.Green.B89, _colors.Neutral.B68, _colors.Green.B61, _colors.Blue.S08, _colors.Blue.S99, _colors.Blue.S99, _colors.Orange.S21, _colors.Orange.S86, _colors.Orange.S87, _colors.Red.B100, _colors.Red.B93, _colors.Red.B93, Breakpoints.large);
 exports.StyledBanner = StyledBanner;
 var StyledBannerContentContainer = _styledComponents["default"].div.withConfig({
   displayName: "BannerStyle__StyledBannerContentContainer",

package/lib/@next/Input/InputStyle.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from './Input';
-interface PreffixSuffixWidthProps {
+export interface PreffixSuffixWidthProps {
     prefixWidth: number;
     suffixWidth: number;
 }
@@ -7,4 +7,3 @@ export declare const StyledContainer: import("styled-components").StyledComponen
 export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
-export {};

package/lib/@next/Input/InputStyle.js

@@ -7,6 +7,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
+var _fonts = require("../utilities/fonts");
+var _borderRadius = require("../utilities/borderRadius");
 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 StyledContainer = _styledComponents["default"].div.withConfig({
@@ -31,5 +33,5 @@ exports.StyledSuffixContainer = StyledSuffixContainer;
 var StyledInput = _styledComponents["default"].input.withConfig({
   displayName: "InputStyle__StyledInput",
   componentId: "sc-15z2mnd-3"
-})(["background:", ";box-sizing:border-box;border:1px solid ", ";border-radius:4px;padding:0 12px;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:36px;&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B100, _colors.Neutral.B68, _colors.Neutral.B18, _colors.Neutral.B40, _colors.Neutral.B100, Breakpoints.large);
+})(["background:", ";box-sizing:border-box;border:1px solid ", ";border-radius:", ";padding:0 12px;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:36px;&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B100, _colors.Neutral.B68, _borderRadius.borderRadius4, _fonts.NotoSans, _colors.Neutral.B18, _colors.Neutral.B40, _colors.Neutral.B100, Breakpoints.large);
 exports.StyledInput = StyledInput;

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

@@ -12,19 +12,18 @@ var MenuOption = function MenuOption(_ref) {
     onClick = _ref.onClick,
     value = _ref.value,
     allowMultiple = _ref.allowMultiple;
-  var handleClick = function handleClick(value) {
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
     onClick({
-      value: value
+      value: event.currentTarget.dataset.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);
-    }
+    "data-value": value,
+    onClick: handleClick
   }, children));
 };
 exports.MenuOption = MenuOption;

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

@@ -24,7 +24,9 @@ export interface SelectProps {
     options?: Option[];
     placeholder?: string;
     prefix?: React.ReactNode;
-    /** sets whether to be able to type in to search from the options*/
+    /** sets whether Select is searchable */
+    searchable?: boolean;
+    /** props used for searchable Select */
     searchableProps?: SearchableProps;
     /** true = Allow vertical scroll, default by 6 options. */
     scrollable?: boolean;
@@ -33,5 +35,5 @@ export interface SelectProps {
     /** sets a width for the Select component*/
     width: string;
 }
-export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
 export {};

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

@@ -7,7 +7,6 @@ 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");
@@ -16,19 +15,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Select = function Select(_ref) {
   var _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
-    disabled = _ref.disabled,
-    hasError = _ref.hasError,
+    _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,
     onClose = _ref.onClose,
     onRemoveTag = _ref.onRemoveTag,
     onSelect = _ref.onSelect,
-    options = _ref.options,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
     placeholder = _ref.placeholder,
     listHeight = _ref.listHeight,
     prefix = _ref.prefix,
+    _ref$searchable = _ref.searchable,
+    searchable = _ref$searchable === void 0 ? false : _ref$searchable,
     searchableProps = _ref.searchableProps,
-    scrollable = _ref.scrollable,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
     sections = _ref.sections,
     selectedValues = _ref.selectedValues,
     width = _ref.width;
@@ -38,34 +43,38 @@ var Select = function Select(_ref) {
   var _useState2 = (0, _react.useState)(''),
     optionListHeight = _useState2[0],
     setOptionListHeight = _useState2[1];
-  var handleClose = (0, _react.useCallback)(function () {
+  var _useState3 = (0, _react.useState)(options),
+    menuOptions = _useState3[0],
+    setMenuOptions = _useState3[1];
+  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();
-  }, [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");
@@ -77,28 +86,38 @@ var Select = function Select(_ref) {
     }
   }, [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,
+    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',
-        prefix: prefix,
-        width: width
-      }));
+        width: width,
+        selectedValues: selectedValues,
+        onSelect: onSelect,
+        onFocus: handleFocus,
+        inputValue: inputValue,
+        updateInputValue: updateInputValue,
+        searchableSelectState: searchableSelectState,
+        updateSearchableSelectState: function updateSearchableSelectState(newState) {
+          return _updateSearchableSelectState(newState);
+        },
+        options: options,
+        updateMenuOptions: updateMenuOptions,
+        prefix: prefix
+      });
     }
-    return /*#__PURE__*/_react["default"].createElement(_ActivatorContext.ActivatorSelectContext.Provider, {
-      value: activatorSelectContextValue
-    }, /*#__PURE__*/_react["default"].createElement(_ActivatorSelect.ActivatorSelect, {
+    return /*#__PURE__*/_react["default"].createElement(_ActivatorSelect.ActivatorSelect, {
+      allowMultiple: allowMultiple,
       disabled: disabled,
+      hasError: hasError,
       placeholder: "Placeholder",
       onRemoveTag: onRemoveTag,
+      onSelectClick: handleSelectClick,
       width: width,
-      values: selectedValues
-    }));
+      selectedValues: selectedValues
+    });
   };
   return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {
     active: popoverActive,
@@ -113,15 +132,19 @@ var Select = function Select(_ref) {
     autofocusTarget: "none",
     preventFocusOnClose: true,
     fullWidth: true
-  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
+  }, !disabled && /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
     height: optionListHeight
   }, /*#__PURE__*/_react["default"].createElement(_components.OptionList, {
+    menuOptions: menuOptions,
     allowMultiple: allowMultiple,
     onSelect: onSelect,
-    options: options,
     sections: sections,
     selectedValues: selectedValues,
-    width: width
+    width: width,
+    onMenuClose: handleClose,
+    updateSearchableSelectState: function updateSearchableSelectState(newState) {
+      return _updateSearchableSelectState(newState);
+    }
   })));
 };
 exports.Select = Select;

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

@@ -6,6 +6,7 @@ export declare const NonSearchableMultipleSelect: any;
 export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
+export declare const SearchableSingleSelect: any;
 export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;