glints-aries 4.0.248 → 4.0.250

package/es/@next/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconNames } from '../Icon/icons/icons';
-export declare type BannerProps = {
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
     /** If set will take precedent of status */
     iconName?: IconNames;
@@ -10,5 +10,7 @@ export declare type BannerProps = {
     secondaryAction?: React.ReactNode;
     dismissable?: boolean;
     onDismiss?: () => void;
-};
+    type?: 'static' | 'fixed';
+    showIcon?: boolean;
+}
 export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Banner/Banner.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["title", "status", "iconName", "children", "action", "secondaryAction", "dismissable", "onDismiss"];
+var _excluded = ["title", "status", "iconName", "children", "action", "secondaryAction", "dismissable", "onDismiss", "type", "showIcon"];
 import React from 'react';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
 import { StyledBanner, StyledBannerContentContainer, StyledBannerTitle, StyledBannerTitleContainer, StyledCloseIconWrapper } from './BannerStyle';
+import { StyledFixedBanner, StyledFixedIconWrapper, StyledFixedBannerContentContainer, StyledFixedBannerButtonContainer, StyledFixedCloseIconWrapper } from './FixedBannerStyle';
 var iconNameStatusMap = {
   success: 'ri-checkbox-circle-fill',
   info: 'ri-information-fill',
@@ -22,13 +23,18 @@ export var Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
     _ref$dismissable = _ref.dismissable,
     dismissable = _ref$dismissable === void 0 ? true : _ref$dismissable,
     onDismiss = _ref.onDismiss,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'static' : _ref$type,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var iconByStatus = iconNameStatusMap[status];
   if (!iconByStatus) {
     console.warn("Status " + status + " is not valid, default style will be used");
   }
   var iconNameValue = iconName ? iconName : iconByStatus || iconNameStatusMap['info'];
-  return /*#__PURE__*/React.createElement(StyledBanner, _extends({
+  var actionComponent = /*#__PURE__*/React.createElement(React.Fragment, null, (action || secondaryAction) && /*#__PURE__*/React.createElement(ButtonGroup, null, action, secondaryAction));
+  if (type === 'static') return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     ref: ref,
     "data-titled": !!title,
     "data-status": status
@@ -47,5 +53,28 @@ export var Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   }))), /*#__PURE__*/React.createElement(StyledBannerContentContainer, null, /*#__PURE__*/React.createElement(Typography, {
     as: "div",
     variant: "body1"
-  }, children)), /*#__PURE__*/React.createElement(StyledBannerContentContainer, null, action || secondaryAction && /*#__PURE__*/React.createElement(ButtonGroup, null, action, secondaryAction)));
+  }, children)), /*#__PURE__*/React.createElement(StyledBannerContentContainer, null, actionComponent));
+  return /*#__PURE__*/React.createElement(StyledFixedBanner, _extends({
+    ref: ref,
+    "data-status": status,
+    "data-nobutton": action ? '' : 'true'
+  }, props), showIcon && /*#__PURE__*/React.createElement(StyledFixedIconWrapper, {
+    "data-status": status
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconNameValue
+  })), /*#__PURE__*/React.createElement(StyledFixedBannerContentContainer, {
+    "data-noicon": showIcon ? '' : 'true'
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, children)), /*#__PURE__*/React.createElement(StyledFixedBannerButtonContainer, {
+    "data-noicon": showIcon ? '' : 'true'
+  }, actionComponent), dismissable && /*#__PURE__*/React.createElement(StyledFixedCloseIconWrapper, {
+    role: "button",
+    onClick: function onClick() {
+      return onDismiss == null ? void 0 : onDismiss();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  })));
 });

package/es/@next/Banner/Banner.stories.d.ts

@@ -3,3 +3,6 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const WithButtons: any;
+export declare const WithTwoButtons: any;
+export declare const FixedBanner: any;
+export declare const FixedBannerWithButtons: any;

package/es/@next/Banner/FixedBannerStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledFixedBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedBannerContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedBannerButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedCloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Banner/FixedBannerStyle.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+export var StyledFixedBanner = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBanner",
+  componentId: "sc-1clh4a2-0"
+})(["position:fixed;left:0;right:0;height:56px;display:flex;justify-content:center;align-items:center;padding-inline:48px;background:", ";color:", ";svg{position:static;fill:", ";height:20px;width:20px;margin-top:4px;}&[data-status='success']{background:", ";}&[data-status='info']{background:", ";}&[data-status='warning']{background:", ";}&[data-status='critical']{background:", ";}@media (max-width:", "){padding:16px;height:100px;svg{margin-top:0px;}&[data-nobutton='true']{height:52px;}}"], Neutral.B99, Neutral.B18, Neutral.B40, Green.B89, Blue.S08, Orange.S21, Red.B100, Breakpoints.large);
+export var StyledFixedIconWrapper = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedIconWrapper",
+  componentId: "sc-1clh4a2-1"
+})(["padding-right:12px;&[data-status='success'] svg{fill:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='critical'] svg{fill:", ";}@media (max-width:", "){position:absolute;left:16px;top:16px;}"], Green.B61, Blue.S99, Orange.S87, Red.B93, Breakpoints.large);
+export var StyledFixedBannerContentContainer = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBannerContentContainer",
+  componentId: "sc-1clh4a2-2"
+})(["padding-right:16px;@media (max-width:", "){position:absolute;top:16px;left:52px;&[data-noicon='true']{left:16px;}}"], Breakpoints.large);
+export var StyledFixedBannerButtonContainer = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBannerButtonContainer",
+  componentId: "sc-1clh4a2-3"
+})(["@media (max-width:", "){position:absolute;top:48px;left:52px;&[data-noicon='true']{left:16px;}}"], Breakpoints.large);
+export var StyledFixedCloseIconWrapper = styled.div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedCloseIconWrapper",
+  componentId: "sc-1clh4a2-4"
+})(["cursor:pointer;position:absolute;color:", ";right:48px;padding-left:16px;svg{fill:", ";}@media (max-width:", "){top:16px;right:16px;}"], Neutral.B40, Neutral.B40, Breakpoints.large);

package/es/@next/Modal/Modal.d.ts

@@ -19,5 +19,6 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     closeOnClickOutside?: boolean;
     onClose?: () => void;
     onBack?: () => void;
+    zIndexOverride?: number;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Modal/Modal.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack"];
+var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack", "zIndexOverride"];
 import React, { useEffect } from 'react';
 import { Button, PrimaryButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
@@ -24,6 +24,8 @@ export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
     closeOnClickOutside = _ref.closeOnClickOutside,
     onClose = _ref.onClose,
     onBack = _ref.onBack,
+    _ref$zIndexOverride = _ref.zIndexOverride,
+    zIndexOverride = _ref$zIndexOverride === void 0 ? 999 : _ref$zIndexOverride,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   useEffect(function () {
     if (typeof window === 'undefined' || !window.document) return;
@@ -66,7 +68,8 @@ export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
     "data-testid": "modal-wrapper",
     onClick: function onClick() {
       return handleClickOutside();
-    }
+    },
+    zIndexOverride: zIndexOverride
   }, /*#__PURE__*/React.createElement(StyledModalContainer, _extends({
     ref: ref,
     onClick: function onClick(e) {

package/es/@next/Modal/ModalStyle.d.ts

@@ -1,4 +1,5 @@
-export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { ModalProps } from './Modal';
+export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, Pick<ModalProps, "zIndexOverride">, never>;
 export declare const StyledModalContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Modal/ModalStyle.js

@@ -6,7 +6,9 @@ import { space16 } from '../utilities/spacing';
 export var StyledModalWrapper = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalWrapper",
   componentId: "sc-1694up4-0"
-})(["position:fixed;inset:0;background-color:rgba(45,45,45,0.5);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:999;"]);
+})(["position:fixed;inset:0;background-color:rgba(45,45,45,0.5);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:", ";"], function (props) {
+  return props.zIndexOverride;
+});
 export var StyledModalContainer = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalContainer",
   componentId: "sc-1694up4-1"

package/es/@next/Modal/modalStoryHelper/ModalStoryStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Modal").ModalProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/es/@next/Modal/modalStoryHelper/ModalStoryStyle.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Modal } from '../Modal';
+export var SelectWrapper = styled.div.withConfig({
+  displayName: "ModalStoryStyle__SelectWrapper",
+  componentId: "sc-2frqws-0"
+})(["width:100%;height:100%;display:flex;"]);
+export var StyledModal = styled(Modal).withConfig({
+  displayName: "ModalStoryStyle__StyledModal",
+  componentId: "sc-2frqws-1"
+})(["height:600px;width:800px;.modal-content{height:100%;}"]);

package/es/@next/Popover/PopoverStyle.js

@@ -4,4 +4,4 @@ import { Blue, Neutral } from '../utilities/colors';
 import { space16, space4, space8 } from '../utilities/spacing';
 
 // we need to use global style here because popover is created outside the root element for react app
-export var StyledPopover = createGlobalStyle([".Polaris-Popover{max-width:calc(100vw - ", ");margin:0.3125rem 2px ", ";box-shadow:0px ", " 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);border-radius:", ";backface-visibility:hidden;will-change:left,top;}.Polaris-Popover__PopoverOverlay{opacity:0;transition:opacity 100ms ease,transform 100ms ease;transform:translateY(-0.3125rem);}.Polaris-Popover__PopoverOverlay--entering{opacity:1;transform:translateY(0);}.Polaris-Popover__PopoverOverlay--open{opacity:1;transform:none;}.Polaris-Popover__PopoverOverlay--exiting{opacity:1;transform:translateY(0);transition-duration:0ms;}.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){opacity:0;transform:translateY(-0.3125rem);}.Polaris-Popover--fullWidth{margin:0.3125rem auto 0 auto;width:fit-content;}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}.Polaris-Scrollable{position:relative;max-height:none;overflow-x:hidden;overflow-y:hidden;:focus{outline:0.125rem solid ", ";outline-offset:0.125rem;}}.Polaris-Scrollable--horizontal{overflow-x:auto;}.Polaris-Scrollable--vertical{overflow-y:auto;}"], space8, space4, space8, borderRadius8, space4, Neutral.B100, borderRadius8, Neutral.B85, space16, Neutral.B40, Blue.S54);
+export var StyledPopover = createGlobalStyle([".Polaris-Popover{max-width:calc(100vw - ", ");margin:0.3125rem 2px ", ";box-shadow:0px ", " 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);border-radius:", ";backface-visibility:hidden;will-change:left,top;}.Polaris-Popover__PopoverOverlay{opacity:0;transition:opacity 100ms ease,transform 100ms ease;transform:translateY(-0.3125rem);}.Polaris-Popover__PopoverOverlay--entering{opacity:1;transform:translateY(0);}.Polaris-Popover__PopoverOverlay--open{opacity:1;transform:none;}.Polaris-Popover__PopoverOverlay--exiting{opacity:1;transform:translateY(0);transition-duration:0ms;}.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){opacity:0;transform:translateY(-0.3125rem);}.Polaris-Popover--fullWidth{margin:0.3125rem auto 0 auto;width:100%;}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}.Polaris-Scrollable{position:relative;max-height:none;overflow-x:hidden;overflow-y:hidden;:focus{outline:0.125rem solid ", ";outline-offset:0.125rem;}}.Polaris-Scrollable--horizontal{overflow-x:auto;}.Polaris-Scrollable--vertical{overflow-y:auto;}"], space8, space4, space8, borderRadius8, space4, Neutral.B100, borderRadius8, Neutral.B85, space16, Neutral.B40, Blue.S54);

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

@@ -35,6 +35,8 @@ export interface SelectProps {
     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, disabled, hasError, helpText, label, loadingOptions, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, loadingOptions, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
 export {};

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

@@ -32,7 +32,8 @@ export var Select = function Select(_ref) {
     scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
     sections = _ref.sections,
     selectedValues = _ref.selectedValues,
-    width = _ref.width;
+    width = _ref.width,
+    zIndexOverride = _ref.zIndexOverride;
   var _useState = useState(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
@@ -128,7 +129,8 @@ export var Select = function Select(_ref) {
       onRemoveTag: onRemoveTag,
       onSelectClick: handleSelectClick,
       width: width,
-      selectedValues: selectedValues
+      selectedValues: selectedValues,
+      options: options
     });
   };
   return /*#__PURE__*/React.createElement(Popover, {
@@ -143,7 +145,9 @@ export var Select = function Select(_ref) {
     onClose: handleClose,
     autofocusTarget: "none",
     preventFocusOnClose: true,
-    fullWidth: true
+    preferredPosition: "below",
+    fullWidth: true,
+    zIndexOverride: zIndexOverride
   }, !disabled && /*#__PURE__*/React.createElement(Popover.Pane, {
     height: optionListHeight
   }, /*#__PURE__*/React.createElement(OptionList, {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Option } from '../../../Menu';
 export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     allowMultiple?: boolean;
     hasError?: boolean;
@@ -8,6 +9,7 @@ export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLBut
         option: string;
     }): void;
     onSelectClick?(): void;
+    options?: Option[];
     width?: string;
 }
-export declare const ActivatorSelect: ({ placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, ...props }: ActivatorSelectProps) => JSX.Element;
+export declare const ActivatorSelect: ({ placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, ...props }: ActivatorSelectProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError"];
-import React, { useRef } from 'react';
+var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options"];
+import React, { useEffect, useRef, useState } from 'react';
 import { Icon } from '../../../Icon';
 import { Typography } from '../../../Typography';
 import { Blue, Neutral } from '../../../utilities/colors';
@@ -14,16 +14,34 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
     width = _ref.width,
     _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
-    disabled = _ref.disabled,
+    _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,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState([]),
+    filteredValues = _useState[0],
+    setFilteredValues = _useState[1];
+  var _useState2 = useState([]),
+    selectedLabels = _useState2[0],
+    setSelectedLabels = _useState2[1];
   var activatorRef = useRef(null);
-  var filteredValues = selectedValues == null ? void 0 : selectedValues.filter(function (value) {
-    return value != '';
-  });
-  var hasValue = filteredValues.length > 0;
+  var hasSelectedValues = filteredValues.length > 0;
+  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();
@@ -36,7 +54,6 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
     color: disabled ? Neutral.B85 : Neutral.B40
   }, placeholder);
   var tagsMarkup = function tagsMarkup() {
-    var hasSelectedValues = selectedValues.length > 0;
     if (!hasSelectedValues) {
       return placeholderMarkup;
     }
@@ -47,7 +64,7 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
           option: selectedValues[0]
         }),
         textColor: Blue.S99
-      }, selectedValues[0]), selectedValues.length > 1 && /*#__PURE__*/React.createElement(Typography, {
+      }, selectedLabels[0]), selectedValues.length > 1 && /*#__PURE__*/React.createElement(Typography, {
         variant: "caption",
         color: disabled ? Neutral.B85 : Neutral.B40
       }, "... and ", selectedValues.length - 1, " more"));
@@ -62,7 +79,7 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
   }), allowMultiple ? tagsMarkup() : /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
     color: disabled ? Neutral.B85 : Neutral.B40
-  }, hasValue ? filteredValues[0] : placeholderMarkup), /*#__PURE__*/React.createElement(Icon, {
+  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup), /*#__PURE__*/React.createElement(Icon, {
     height: 24,
     name: "ri-arrow-m-down-line",
     fill: disabled ? Neutral.B85 : Neutral.B40

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

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["options", "allowMultiple", "disabled"];
 import React, { useState } from 'react';
 import { Select } from '../Select';
+import { SelectWrapper } from './SelectStoryStyle';
 export var SingleSelect = function SingleSelect(_ref) {
   var options = _ref.options,
     allowMultiple = _ref.allowMultiple,
@@ -15,13 +16,18 @@ export var SingleSelect = function SingleSelect(_ref) {
     var value = _ref2.value;
     setSelected(value);
   };
-  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+  return /*#__PURE__*/React.createElement(SelectWrapper, {
+    style: {
+      display: 'flex',
+      width: '400px'
+    }
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, args, {
     allowMultiple: allowMultiple,
     disabled: disabled,
     options: options,
     onSelect: handleSelect,
     selectedValues: [selected],
-    width: "400px",
+    width: "100%",
     label: "Label"
-  }));
+  })));
 };

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

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

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

@@ -4,4 +4,8 @@ import { space8 } from '../../utilities/spacing';
 export var StyledTag = styled(Tag).withConfig({
   displayName: "SelectStoryStyle__StyledTag",
   componentId: "sc-1xv9wvg-0"
-})(["margin-right:", ";"], space8);
+})(["margin-right:", ";"], space8);
+export var SelectWrapper = styled.div.withConfig({
+  displayName: "SelectStoryStyle__SelectWrapper",
+  componentId: "sc-1xv9wvg-1"
+})(["div{width:100%;}"]);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconNames } from '../Icon/icons/icons';
-export declare type BannerProps = {
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
     /** If set will take precedent of status */
     iconName?: IconNames;
@@ -10,5 +10,7 @@ export declare type BannerProps = {
     secondaryAction?: React.ReactNode;
     dismissable?: boolean;
     onDismiss?: () => void;
-};
+    type?: 'static' | 'fixed';
+    showIcon?: boolean;
+}
 export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -10,7 +10,8 @@ var _ButtonGroup = require("../ButtonGroup");
 var _Icon = require("../Icon");
 var _Typography = require("../Typography");
 var _BannerStyle = require("./BannerStyle");
-var _excluded = ["title", "status", "iconName", "children", "action", "secondaryAction", "dismissable", "onDismiss"];
+var _FixedBannerStyle = require("./FixedBannerStyle");
+var _excluded = ["title", "status", "iconName", "children", "action", "secondaryAction", "dismissable", "onDismiss", "type", "showIcon"];
 var iconNameStatusMap = {
   success: 'ri-checkbox-circle-fill',
   info: 'ri-information-fill',
@@ -27,13 +28,18 @@ var Banner = /*#__PURE__*/_react["default"].forwardRef(function Banner(_ref, ref
     _ref$dismissable = _ref.dismissable,
     dismissable = _ref$dismissable === void 0 ? true : _ref$dismissable,
     onDismiss = _ref.onDismiss,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'static' : _ref$type,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var iconByStatus = iconNameStatusMap[status];
   if (!iconByStatus) {
     console.warn("Status " + status + " is not valid, default style will be used");
   }
   var iconNameValue = iconName ? iconName : iconByStatus || iconNameStatusMap['info'];
-  return /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBanner, (0, _extends2["default"])({
+  var actionComponent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (action || secondaryAction) && /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, action, secondaryAction));
+  if (type === 'static') return /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBanner, (0, _extends2["default"])({
     ref: ref,
     "data-titled": !!title,
     "data-status": status
@@ -52,6 +58,29 @@ var Banner = /*#__PURE__*/_react["default"].forwardRef(function Banner(_ref, ref
   }))), /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerContentContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
     variant: "body1"
-  }, children)), /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerContentContainer, null, action || secondaryAction && /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, action, secondaryAction)));
+  }, children)), /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerContentContainer, null, actionComponent));
+  return /*#__PURE__*/_react["default"].createElement(_FixedBannerStyle.StyledFixedBanner, (0, _extends2["default"])({
+    ref: ref,
+    "data-status": status,
+    "data-nobutton": action ? '' : 'true'
+  }, props), showIcon && /*#__PURE__*/_react["default"].createElement(_FixedBannerStyle.StyledFixedIconWrapper, {
+    "data-status": status
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: iconNameValue
+  })), /*#__PURE__*/_react["default"].createElement(_FixedBannerStyle.StyledFixedBannerContentContainer, {
+    "data-noicon": showIcon ? '' : 'true'
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, children)), /*#__PURE__*/_react["default"].createElement(_FixedBannerStyle.StyledFixedBannerButtonContainer, {
+    "data-noicon": showIcon ? '' : 'true'
+  }, actionComponent), dismissable && /*#__PURE__*/_react["default"].createElement(_FixedBannerStyle.StyledFixedCloseIconWrapper, {
+    role: "button",
+    onClick: function onClick() {
+      return onDismiss == null ? void 0 : onDismiss();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close"
+  })));
 });
 exports.Banner = Banner;

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

@@ -3,3 +3,6 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const WithButtons: any;
+export declare const WithTwoButtons: any;
+export declare const FixedBanner: any;
+export declare const FixedBannerWithButtons: any;

package/lib/@next/Banner/FixedBannerStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledFixedBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedBannerContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedBannerButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFixedCloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledFixedIconWrapper = exports.StyledFixedCloseIconWrapper = exports.StyledFixedBannerContentContainer = exports.StyledFixedBannerButtonContainer = exports.StyledFixedBanner = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+var _colors = require("../utilities/colors");
+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 StyledFixedBanner = _styledComponents["default"].div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBanner",
+  componentId: "sc-1clh4a2-0"
+})(["position:fixed;left:0;right:0;height:56px;display:flex;justify-content:center;align-items:center;padding-inline:48px;background:", ";color:", ";svg{position:static;fill:", ";height:20px;width:20px;margin-top:4px;}&[data-status='success']{background:", ";}&[data-status='info']{background:", ";}&[data-status='warning']{background:", ";}&[data-status='critical']{background:", ";}@media (max-width:", "){padding:16px;height:100px;svg{margin-top:0px;}&[data-nobutton='true']{height:52px;}}"], _colors.Neutral.B99, _colors.Neutral.B18, _colors.Neutral.B40, _colors.Green.B89, _colors.Blue.S08, _colors.Orange.S21, _colors.Red.B100, Breakpoints.large);
+exports.StyledFixedBanner = StyledFixedBanner;
+var StyledFixedIconWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedIconWrapper",
+  componentId: "sc-1clh4a2-1"
+})(["padding-right:12px;&[data-status='success'] svg{fill:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='critical'] svg{fill:", ";}@media (max-width:", "){position:absolute;left:16px;top:16px;}"], _colors.Green.B61, _colors.Blue.S99, _colors.Orange.S87, _colors.Red.B93, Breakpoints.large);
+exports.StyledFixedIconWrapper = StyledFixedIconWrapper;
+var StyledFixedBannerContentContainer = _styledComponents["default"].div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBannerContentContainer",
+  componentId: "sc-1clh4a2-2"
+})(["padding-right:16px;@media (max-width:", "){position:absolute;top:16px;left:52px;&[data-noicon='true']{left:16px;}}"], Breakpoints.large);
+exports.StyledFixedBannerContentContainer = StyledFixedBannerContentContainer;
+var StyledFixedBannerButtonContainer = _styledComponents["default"].div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedBannerButtonContainer",
+  componentId: "sc-1clh4a2-3"
+})(["@media (max-width:", "){position:absolute;top:48px;left:52px;&[data-noicon='true']{left:16px;}}"], Breakpoints.large);
+exports.StyledFixedBannerButtonContainer = StyledFixedBannerButtonContainer;
+var StyledFixedCloseIconWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "FixedBannerStyle__StyledFixedCloseIconWrapper",
+  componentId: "sc-1clh4a2-4"
+})(["cursor:pointer;position:absolute;color:", ";right:48px;padding-left:16px;svg{fill:", ";}@media (max-width:", "){top:16px;right:16px;}"], _colors.Neutral.B40, _colors.Neutral.B40, Breakpoints.large);
+exports.StyledFixedCloseIconWrapper = StyledFixedCloseIconWrapper;

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

@@ -19,5 +19,6 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     closeOnClickOutside?: boolean;
     onClose?: () => void;
     onBack?: () => void;
+    zIndexOverride?: number;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Modal/Modal.js

@@ -12,7 +12,7 @@ var _Icon = require("../Icon");
 var _Portal = require("../Portal/Portal");
 var _Typography = require("../Typography");
 var _ModalStyle = require("./ModalStyle");
-var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack"];
+var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack", "zIndexOverride"];
 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 Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref) {
@@ -31,6 +31,8 @@ var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref)
     closeOnClickOutside = _ref.closeOnClickOutside,
     onClose = _ref.onClose,
     onBack = _ref.onBack,
+    _ref$zIndexOverride = _ref.zIndexOverride,
+    zIndexOverride = _ref$zIndexOverride === void 0 ? 999 : _ref$zIndexOverride,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   (0, _react.useEffect)(function () {
     if (typeof window === 'undefined' || !window.document) return;
@@ -73,7 +75,8 @@ var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref)
     "data-testid": "modal-wrapper",
     onClick: function onClick() {
       return handleClickOutside();
-    }
+    },
+    zIndexOverride: zIndexOverride
   }, /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalContainer, (0, _extends2["default"])({
     ref: ref,
     onClick: function onClick(e) {

package/lib/@next/Modal/ModalStyle.d.ts

@@ -1,4 +1,5 @@
-export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { ModalProps } from './Modal';
+export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, Pick<ModalProps, "zIndexOverride">, never>;
 export declare const StyledModalContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Modal/ModalStyle.js

@@ -13,7 +13,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledModalWrapper = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalWrapper",
   componentId: "sc-1694up4-0"
-})(["position:fixed;inset:0;background-color:rgba(45,45,45,0.5);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:999;"]);
+})(["position:fixed;inset:0;background-color:rgba(45,45,45,0.5);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:", ";"], function (props) {
+  return props.zIndexOverride;
+});
 exports.StyledModalWrapper = StyledModalWrapper;
 var StyledModalContainer = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalContainer",

package/lib/@next/Modal/modalStoryHelper/ModalStoryStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Modal").ModalProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/lib/@next/Modal/modalStoryHelper/ModalStoryStyle.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledModal = exports.SelectWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Modal = require("../Modal");
+var SelectWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "ModalStoryStyle__SelectWrapper",
+  componentId: "sc-2frqws-0"
+})(["width:100%;height:100%;display:flex;"]);
+exports.SelectWrapper = SelectWrapper;
+var StyledModal = (0, _styledComponents["default"])(_Modal.Modal).withConfig({
+  displayName: "ModalStoryStyle__StyledModal",
+  componentId: "sc-2frqws-1"
+})(["height:600px;width:800px;.modal-content{height:100%;}"]);
+exports.StyledModal = StyledModal;

package/lib/@next/Popover/PopoverStyle.js

@@ -7,5 +7,5 @@ var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
 // we need to use global style here because popover is created outside the root element for react app
-var StyledPopover = (0, _styledComponents.createGlobalStyle)([".Polaris-Popover{max-width:calc(100vw - ", ");margin:0.3125rem 2px ", ";box-shadow:0px ", " 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);border-radius:", ";backface-visibility:hidden;will-change:left,top;}.Polaris-Popover__PopoverOverlay{opacity:0;transition:opacity 100ms ease,transform 100ms ease;transform:translateY(-0.3125rem);}.Polaris-Popover__PopoverOverlay--entering{opacity:1;transform:translateY(0);}.Polaris-Popover__PopoverOverlay--open{opacity:1;transform:none;}.Polaris-Popover__PopoverOverlay--exiting{opacity:1;transform:translateY(0);transition-duration:0ms;}.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){opacity:0;transform:translateY(-0.3125rem);}.Polaris-Popover--fullWidth{margin:0.3125rem auto 0 auto;width:fit-content;}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}.Polaris-Scrollable{position:relative;max-height:none;overflow-x:hidden;overflow-y:hidden;:focus{outline:0.125rem solid ", ";outline-offset:0.125rem;}}.Polaris-Scrollable--horizontal{overflow-x:auto;}.Polaris-Scrollable--vertical{overflow-y:auto;}"], _spacing.space8, _spacing.space4, _spacing.space8, _borderRadius.borderRadius8, _spacing.space4, _colors.Neutral.B100, _borderRadius.borderRadius8, _colors.Neutral.B85, _spacing.space16, _colors.Neutral.B40, _colors.Blue.S54);
+var StyledPopover = (0, _styledComponents.createGlobalStyle)([".Polaris-Popover{max-width:calc(100vw - ", ");margin:0.3125rem 2px ", ";box-shadow:0px ", " 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);border-radius:", ";backface-visibility:hidden;will-change:left,top;}.Polaris-Popover__PopoverOverlay{opacity:0;transition:opacity 100ms ease,transform 100ms ease;transform:translateY(-0.3125rem);}.Polaris-Popover__PopoverOverlay--entering{opacity:1;transform:translateY(0);}.Polaris-Popover__PopoverOverlay--open{opacity:1;transform:none;}.Polaris-Popover__PopoverOverlay--exiting{opacity:1;transform:translateY(0);transition-duration:0ms;}.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){opacity:0;transform:translateY(-0.3125rem);}.Polaris-Popover--fullWidth{margin:0.3125rem auto 0 auto;width:100%;}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}.Polaris-Scrollable{position:relative;max-height:none;overflow-x:hidden;overflow-y:hidden;:focus{outline:0.125rem solid ", ";outline-offset:0.125rem;}}.Polaris-Scrollable--horizontal{overflow-x:auto;}.Polaris-Scrollable--vertical{overflow-y:auto;}"], _spacing.space8, _spacing.space4, _spacing.space8, _borderRadius.borderRadius8, _spacing.space4, _colors.Neutral.B100, _borderRadius.borderRadius8, _colors.Neutral.B85, _spacing.space16, _colors.Neutral.B40, _colors.Blue.S54);
 exports.StyledPopover = StyledPopover;

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

@@ -35,6 +35,8 @@ export interface SelectProps {
     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, disabled, hasError, helpText, label, loadingOptions, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, loadingOptions, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
 export {};

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

@@ -38,7 +38,8 @@ var Select = function Select(_ref) {
     scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
     sections = _ref.sections,
     selectedValues = _ref.selectedValues,
-    width = _ref.width;
+    width = _ref.width,
+    zIndexOverride = _ref.zIndexOverride;
   var _useState = (0, _react.useState)(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
@@ -134,7 +135,8 @@ var Select = function Select(_ref) {
       onRemoveTag: onRemoveTag,
       onSelectClick: handleSelectClick,
       width: width,
-      selectedValues: selectedValues
+      selectedValues: selectedValues,
+      options: options
     });
   };
   return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {
@@ -149,7 +151,9 @@ var Select = function Select(_ref) {
     onClose: handleClose,
     autofocusTarget: "none",
     preventFocusOnClose: true,
-    fullWidth: true
+    preferredPosition: "below",
+    fullWidth: true,
+    zIndexOverride: zIndexOverride
   }, !disabled && /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
     height: optionListHeight
   }, /*#__PURE__*/_react["default"].createElement(_components.OptionList, {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Option } from '../../../Menu';
 export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     allowMultiple?: boolean;
     hasError?: boolean;
@@ -8,6 +9,7 @@ export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLBut
         option: string;
     }): void;
     onSelectClick?(): void;
+    options?: Option[];
     width?: string;
 }
-export declare const ActivatorSelect: ({ placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, ...props }: ActivatorSelectProps) => JSX.Element;
+export declare const ActivatorSelect: ({ placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, ...props }: ActivatorSelectProps) => JSX.Element;

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

@@ -10,7 +10,7 @@ var _Icon = require("../../../Icon");
 var _Typography = require("../../../Typography");
 var _colors = require("../../../utilities/colors");
 var _ActivatorStyle = require("./ActivatorStyle");
-var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError"];
+var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options"];
 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) {
@@ -21,16 +21,34 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
     width = _ref.width,
     _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
-    disabled = _ref.disabled,
+    _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,
     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 filteredValues = selectedValues == null ? void 0 : selectedValues.filter(function (value) {
-    return value != '';
-  });
-  var hasValue = filteredValues.length > 0;
+  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();
@@ -43,7 +61,6 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
     color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
   }, placeholder);
   var tagsMarkup = function tagsMarkup() {
-    var hasSelectedValues = selectedValues.length > 0;
     if (!hasSelectedValues) {
       return placeholderMarkup;
     }
@@ -54,7 +71,7 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
           option: selectedValues[0]
         }),
         textColor: _colors.Blue.S99
-      }, selectedValues[0]), selectedValues.length > 1 && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      }, selectedLabels[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"));
@@ -69,7 +86,7 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
   }), 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, {
+  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup), /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     height: 24,
     name: "ri-arrow-m-down-line",
     fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40

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

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

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

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

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

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledTag = void 0;
+exports.StyledTag = exports.SelectWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Tag = require("../../Tag");
 var _spacing = require("../../utilities/spacing");
@@ -10,4 +10,9 @@ var StyledTag = (0, _styledComponents["default"])(_Tag.Tag).withConfig({
   displayName: "SelectStoryStyle__StyledTag",
   componentId: "sc-1xv9wvg-0"
 })(["margin-right:", ";"], _spacing.space8);
-exports.StyledTag = StyledTag;
+exports.StyledTag = StyledTag;
+var SelectWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStoryStyle__SelectWrapper",
+  componentId: "sc-1xv9wvg-1"
+})(["div{width:100%;}"]);
+exports.SelectWrapper = SelectWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.248",
+  "version": "4.0.250",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",