glints-aries 4.0.246 → 4.0.247

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

@@ -7,5 +7,8 @@ export declare type BarProps = {
     secondaryAction?: ComponentAction;
     tertiaryAction?: ComponentAction;
     position?: 'top' | 'bottom';
+    showBackButton?: boolean;
+    onBack?: () => void;
+    customActionGroup?: React.ReactNode;
 };
 export declare const Bar: React.ForwardRefExoticComponent<BarProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Bar/Bar.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { Breakpoints, Colors } from '..';
 import { Button, PrimaryButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
 import { Typography } from '../Typography';
-import { StyledBarActionWrapper, StyledBar, StyledBarHeaderWrapper, StyledBarContainer } from './BarStyle';
+import { StyledBarActionWrapper, StyledBar, StyledBarHeaderWrapper, StyledBarContainer, StyledButtonContainer } from './BarStyle';
 import { useWindowSize } from './useWindowSize';
 export var Bar = /*#__PURE__*/React.forwardRef(function Bar(_ref, ref) {
   var heading = _ref.heading,
@@ -11,7 +12,11 @@ export var Bar = /*#__PURE__*/React.forwardRef(function Bar(_ref, ref) {
     primaryAction = _ref.primaryAction,
     secondaryAction = _ref.secondaryAction,
     tertiaryAction = _ref.tertiaryAction,
-    position = _ref.position;
+    position = _ref.position,
+    _ref$showBackButton = _ref.showBackButton,
+    showBackButton = _ref$showBackButton === void 0 ? false : _ref$showBackButton,
+    onBack = _ref.onBack,
+    customActionGroup = _ref.customActionGroup;
   var headerMarkup = function headerMarkup() {
     if (subheading) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
@@ -37,7 +42,11 @@ export var Bar = /*#__PURE__*/React.forwardRef(function Bar(_ref, ref) {
   return /*#__PURE__*/React.createElement(StyledBar, {
     "data-align": position,
     ref: ref
-  }, /*#__PURE__*/React.createElement(StyledBarContainer, null, /*#__PURE__*/React.createElement(StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledBarActionWrapper, null, /*#__PURE__*/React.createElement(ButtonGroup, null, tertiaryAction && /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(StyledBarContainer, null, showBackButton && /*#__PURE__*/React.createElement(StyledButtonContainer, {
+    onClick: onBack
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-left-line"
+  })), /*#__PURE__*/React.createElement(StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/React.createElement(ButtonGroup, null, tertiaryAction && /*#__PURE__*/React.createElement(Button, {
     onClick: tertiaryAction.action,
     size: buttonSize
   }, tertiaryAction.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {

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

@@ -4,3 +4,5 @@ export default _default;
 export declare const Interactive: any;
 export declare const PrimaryActionOnly: any;
 export declare const CustomHeading: any;
+export declare const BackButton: any;
+export declare const customActionGroup: any;

package/es/@next/Bar/BarStyle.d.ts

@@ -3,3 +3,4 @@ export declare const StyledBarHeaderWrapper: import("styled-components").StyledC
 export declare const StyledBarActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCustomHeadingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Bar/BarStyle.js

@@ -5,7 +5,7 @@ import { space8 } from '../utilities/spacing';
 export var StyledBar = styled.div.withConfig({
   displayName: "BarStyle__StyledBar",
   componentId: "sc-1m51mld-0"
-})(["display:flex;flex-direction:row;padding:20px 0;width:100%;position:absolute;height:90px;@media (max-width:", "){height:70px;}&[data-align='bottom']{bottom:0;}&[data-align='top']{top:0;}box-shadow:0px 0px 0px 1px rgba(63,63,68,0.05),0px 1px 3px rgba(63,63,68,0.15);background:", ";"], Breakpoints.large, Neutral.B100);
+})(["display:flex;flex-direction:row;padding:12px 0;width:100%;position:absolute;min-height:90px;height:fit-content;&[data-align='bottom']{bottom:0;}&[data-align='top']{top:0;}box-shadow:0px 0px 0px 1px rgba(63,63,68,0.05),0px 1px 3px rgba(63,63,68,0.15);background:", ";@media (max-width:", "){padding:8px 0;min-height:70px;}"], Neutral.B100, Breakpoints.large);
 export var StyledBarHeaderWrapper = styled.div.withConfig({
   displayName: "BarStyle__StyledBarHeaderWrapper",
   componentId: "sc-1m51mld-1"
@@ -17,8 +17,12 @@ export var StyledBarActionWrapper = styled.div.withConfig({
 export var StyledBarContainer = styled.div.withConfig({
   displayName: "BarStyle__StyledBarContainer",
   componentId: "sc-1m51mld-3"
-})(["position:relative;margin:0 auto;padding:0 50px;width:100%;*,*:before,*:after{box-sizing:border-box;}justify-content:space-between;align-items:center;flex-direction:row;display:flex;@media (max-width:", "){gap:16px;padding:0 24px;}"], Breakpoints.large);
+})(["position:relative;margin:0 auto;padding:0 50px;width:100%;*,*:before,*:after{box-sizing:border-box;}justify-content:space-between;align-items:center;flex-direction:row;display:flex;@media (max-width:", "){gap:16px;padding:0 16px;}"], Breakpoints.large);
 export var StyledCustomHeadingWrapper = styled.div.withConfig({
   displayName: "BarStyle__StyledCustomHeadingWrapper",
   componentId: "sc-1m51mld-4"
-})(["display:flex;flex-direction:row;gap:", ";"], space8);
+})(["display:flex;flex-direction:row;gap:", ";"], space8);
+export var StyledButtonContainer = styled.div.withConfig({
+  displayName: "BarStyle__StyledButtonContainer",
+  componentId: "sc-1m51mld-5"
+})(["cursor:pointer;margin-right:24px;svg{width:24px;fill:", ";}@media (max-width:", "){margin-right:16px;svg{width:16px;}}"], Neutral.B40, Breakpoints.large);

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

@@ -14,6 +14,7 @@ export interface SelectProps {
     label?: React.ReactNode;
     /** Margin Top = 8 ; Option height = 48 ; optionListHeight = (n options * option height) + margin top; */
     listHeight?: number;
+    loadingOptions?: boolean;
     onClose?: () => void;
     onRemoveTag?({ option }: {
         option: string;
@@ -35,5 +36,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, 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, }: SelectProps) => JSX.Element;
 export {};

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

@@ -15,6 +15,8 @@ export var Select = function Select(_ref) {
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     helpText = _ref.helpText,
     label = _ref.label,
+    _ref$loadingOptions = _ref.loadingOptions,
+    loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
     onClose = _ref.onClose,
     onRemoveTag = _ref.onRemoveTag,
     onSelect = _ref.onSelect,
@@ -40,6 +42,7 @@ export var Select = function Select(_ref) {
   var _useState3 = useState(options),
     menuOptions = _useState3[0],
     setMenuOptions = _useState3[1];
+  var optionsLength = options.length;
   var _useState4 = useState((searchableProps == null ? void 0 : searchableProps.inputValue) || ''),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
@@ -64,11 +67,26 @@ export var Select = function Select(_ref) {
     onClose == null ? void 0 : onClose();
   };
   var handleFocus = function handleFocus() {
+    if (options.length < 1) {
+      setPopoverActive(false);
+      return;
+    }
     setPopoverActive(true);
   };
   var handleSelectClick = function handleSelectClick() {
     setPopoverActive(!popoverActive);
   };
+  useEffect(function () {
+    setMenuOptions(options);
+  }, [options]);
+  useEffect(function () {
+    if (inputValue != '' && optionsLength > 0) {
+      setPopoverActive(true);
+    }
+    if (inputValue === '' && optionsLength < 1) {
+      setPopoverActive(false);
+    }
+  }, [inputValue, optionsLength]);
   useEffect(function () {
     if (listHeight) {
       setOptionListHeight(listHeight + 24 + "px");
@@ -129,6 +147,7 @@ export var Select = function Select(_ref) {
   }, !disabled && /*#__PURE__*/React.createElement(Popover.Pane, {
     height: optionListHeight
   }, /*#__PURE__*/React.createElement(OptionList, {
+    loading: loadingOptions,
     menuOptions: menuOptions,
     allowMultiple: allowMultiple,
     onSelect: onSelect,

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

@@ -8,6 +8,7 @@ export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
 export declare const SearchableSingleWithInputState: any;
+export declare const AsyncSearchableSingleWithInputState: any;
 export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;

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

@@ -55,6 +55,7 @@ export var ActivatorTextInput = function ActivatorTextInput(_ref) {
     }).length > 0);
   }, [selectedValues]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, allowMultiple ? /*#__PURE__*/React.createElement(StyledTextInput, _extends({}, props, {
+    className: "select-input",
     ref: activatorRef,
     prefix: prefix,
     onChange: function onChange(value) {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { MenuProps, Option } from '../../../Menu';
 import { SearchableSelectState } from '../SearchableSelectInput/SearchableSelectInput';
 export interface OptionListProps extends MenuProps {
-    isEmpty?: boolean;
+    loading?: boolean;
     noOptionsMessage?: React.ReactNode;
     onMenuClose?: () => void;
     onSelect?({ value }: {
@@ -12,8 +12,9 @@ export interface OptionListProps extends MenuProps {
     updateSearchableSelectState?: (newState: SearchableSelectState) => void;
     menuOptions?: Option[];
 }
+export declare const MenuOptionLoading: () => JSX.Element;
 export interface NoOptionListProps {
     noOptionsMessage?: React.ReactNode;
 }
 export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;
-export declare const OptionList: ({ allowMultiple, noOptionsMessage, onMenuClose, onSelect, sections, selectedValues, title, updateSearchableSelectState, width, menuOptions, }: OptionListProps) => JSX.Element;
+export declare const OptionList: ({ allowMultiple, loading, noOptionsMessage, onMenuClose, onSelect, sections, selectedValues, title, updateSearchableSelectState, width, menuOptions, }: OptionListProps) => JSX.Element;

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

@@ -1,12 +1,23 @@
 import React, { useEffect, useState } from 'react';
 import { Menu } from '../../../Menu';
+import { Spinner } from '../../../Spinner';
 import { Typography } from '../../../Typography';
-import { Neutral } from '../../../utilities/colors';
+import { Blue, Neutral } from '../../../utilities/colors';
 import { EmptyOptionContainer, OptionListContainer } from './OptionListStyle';
+export var MenuOptionLoading = function MenuOptionLoading() {
+  return /*#__PURE__*/React.createElement(EmptyOptionContainer, {
+    className: "menu-option-loading"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    fill: Blue.S99
+  }));
+};
 export var NoOptionList = function NoOptionList(_ref) {
   var _ref$noOptionsMessage = _ref.noOptionsMessage,
     noOptionsMessage = _ref$noOptionsMessage === void 0 ? 'No matching results' : _ref$noOptionsMessage;
-  return /*#__PURE__*/React.createElement(EmptyOptionContainer, null, /*#__PURE__*/React.createElement(Typography, {
+  return /*#__PURE__*/React.createElement(EmptyOptionContainer, {
+    className: "menu-option-empty"
+  }, /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "body2",
     color: Neutral.B40
@@ -14,6 +25,8 @@ export var NoOptionList = function NoOptionList(_ref) {
 };
 export var OptionList = function OptionList(_ref2) {
   var allowMultiple = _ref2.allowMultiple,
+    _ref2$loading = _ref2.loading,
+    loading = _ref2$loading === void 0 ? false : _ref2$loading,
     noOptionsMessage = _ref2.noOptionsMessage,
     onMenuClose = _ref2.onMenuClose,
     onSelect = _ref2.onSelect,
@@ -44,8 +57,14 @@ export var OptionList = function OptionList(_ref2) {
       onMenuClose();
     }
   };
+  if (loading) {
+    return /*#__PURE__*/React.createElement(OptionListContainer, {
+      width: width
+    }, /*#__PURE__*/React.createElement(MenuOptionLoading, null));
+  }
   return /*#__PURE__*/React.createElement(OptionListContainer, {
-    width: width
+    width: width,
+    className: "menu-option-list"
   }, hasMenuOptions ? /*#__PURE__*/React.createElement(Menu, {
     allowMultiple: allowMultiple,
     options: menuOptions,

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

@@ -101,6 +101,7 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
     setShowClear(false);
   }, [selectedValue]);
   return /*#__PURE__*/React.createElement(StyledContainer, {
+    className: "select-input-container",
     ref: ref,
     "data-error": error,
     "data-disabled": disabled,

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

@@ -5,4 +5,5 @@ interface SearchableSingleSelectProps {
 }
 export declare const SearchableSingle: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export declare const SearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export declare const AsyncSearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,12 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["data"],
-  _excluded2 = ["data"];
-import React, { useState } from 'react';
+  _excluded2 = ["data"],
+  _excluded3 = ["data"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
+import { debounce } from '../../../helpers/debounce';
 import { Select } from '../Select';
 export var SearchableSingle = function SearchableSingle(_ref) {
   var data = _ref.data,
@@ -52,4 +56,110 @@ export var SearchableSingleWithInputState = function SearchableSingleWithInputSt
     width: "600px",
     label: "Label"
   }));
+};
+var filterOptions = function filterOptions(str, data) {
+  if (str === '') {
+    return data;
+  }
+  var filterRegex = new RegExp(str, 'i');
+  var filterOptions = data.filter(function (option) {
+    return option.label.match(filterRegex);
+  });
+  return filterOptions;
+};
+var mockAsyncOptions = function mockAsyncOptions(str, data) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      var filteredOptions = filterOptions(str, data);
+      resolve(filteredOptions);
+    }, 1000);
+  });
+};
+export var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInputState(_ref5) {
+  var data = _ref5.data,
+    args = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+  var _useState4 = useState(false),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState([]),
+    mockData = _useState5[0],
+    setMockData = _useState5[1];
+  var _useState6 = useState(''),
+    inputValue = _useState6[0],
+    setInputValue = _useState6[1];
+  var _useState7 = useState(''),
+    selected = _useState7[0],
+    setSelected = _useState7[1];
+  var handleInputChange = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setInputValue(value);
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleInputChange(_x) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var debounceHandleInputChange = debounce(handleInputChange);
+  var handleSelect = function handleSelect(_ref7) {
+    var value = _ref7.value;
+    setSelected(value);
+  };
+  useEffect(function () {
+    var fetchMockData = /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var response;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              setLoading(true);
+              _context2.next = 4;
+              return mockAsyncOptions(inputValue, data);
+            case 4:
+              response = _context2.sent;
+              setMockData(response);
+              setLoading(false);
+              _context2.next = 12;
+              break;
+            case 9:
+              _context2.prev = 9;
+              _context2.t0 = _context2["catch"](0);
+              setLoading(false);
+            case 12:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[0, 9]]);
+      }));
+      return function fetchMockData() {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    if (inputValue === '') {
+      setMockData([]);
+      return;
+    }
+    fetchMockData();
+  }, [data, inputValue]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+    loadingOptions: loading,
+    onSelect: handleSelect,
+    options: mockData,
+    selectedValues: [selected],
+    searchableProps: {
+      inputValue: inputValue,
+      onInputChange: function onInputChange(value) {
+        return debounceHandleInputChange(value);
+      }
+    },
+    width: "600px",
+    label: "Label"
+  }));
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentAction } from '../../types/componentAction';
+export interface SideSheetProps {
+    isOpen: boolean;
+    title: string;
+    description?: string;
+    showHorizontalLine?: boolean;
+    children?: React.ReactNode;
+    basicButtonAction?: ComponentAction;
+    primaryButtonAction?: ComponentAction;
+    showBackButton?: boolean;
+    onBack?: () => void;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+}
+declare const SideSheet: React.ForwardRefExoticComponent<SideSheetProps & React.RefAttributes<HTMLDivElement>>;
+export { SideSheet };

package/es/@next/SideSheet/SideSheet.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["isOpen", "title", "description", "showHorizontalLine", "children", "basicButtonAction", "primaryButtonAction", "showBackButton", "onBack", "showCloseButton", "onClose"];
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import { Neutral } from '../utilities/colors';
+import { Portal } from '../Portal/Portal';
+import { StyledSideSheetContainer, StyledSideSheetWrapper, StyledSideSheetHeader, StyledButtonContainer, StyledRightContainer, StyledHorizontalLine, StyledSideSheetFooter, StyledButtonGroupContainer } from './SideSheetStyle';
+import { Typography } from '../Typography';
+var SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet(_ref, ref) {
+  var isOpen = _ref.isOpen,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$showHorizontalLi = _ref.showHorizontalLine,
+    showHorizontalLine = _ref$showHorizontalLi === void 0 ? true : _ref$showHorizontalLi,
+    children = _ref.children,
+    basicButtonAction = _ref.basicButtonAction,
+    primaryButtonAction = _ref.primaryButtonAction,
+    _ref$showBackButton = _ref.showBackButton,
+    showBackButton = _ref$showBackButton === void 0 ? true : _ref$showBackButton,
+    onBack = _ref.onBack,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    onClose = _ref.onClose,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useEffect(function () {
+    if (typeof window === 'undefined' || !window.document) return;
+    var enableScroll = function enableScroll() {
+      return document.body.style.overflow = 'unset';
+    };
+    isOpen ? document.body.style.overflow = 'hidden' : enableScroll();
+    return function () {
+      enableScroll();
+    };
+  }, [isOpen]);
+
+  // store state for closing animation, and cleanup when unmounting
+  var _useState = useState(false),
+    isClosedAnimation = _useState[0],
+    setIsClosedAnimation = _useState[1];
+  var timeoutId = useRef(null);
+  useEffect(function () {
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+
+  // fade out effect for 0.2seconds when closed
+  var handleClose = function handleClose() {
+    setIsClosedAnimation(true);
+    timeoutId.current = setTimeout(function () {
+      setIsClosedAnimation(false);
+      onClose();
+    }, 190); // purposefully made this 0.19sec (to prevent rare animation glitch)
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledSideSheetWrapper, {
+    className: "side-sheet-wrapper " + (isClosedAnimation ? 'closed' : ''),
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(StyledSideSheetContainer, _extends({
+    className: "" + (isClosedAnimation ? 'closed' : ''),
+    ref: ref,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, props), /*#__PURE__*/React.createElement(StyledSideSheetHeader, null, showBackButton && /*#__PURE__*/React.createElement(StyledButtonContainer, {
+    onClick: onBack
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-left-line"
+  })), /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle1",
+    style: {
+      color: Neutral.B18
+    }
+  }, title, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1",
+    style: {
+      color: Neutral.B18
+    }
+  }, description)), showCloseButton && /*#__PURE__*/React.createElement(StyledRightContainer, null, /*#__PURE__*/React.createElement(StyledButtonContainer, {
+    "data-testid": "sidesheet-close-btn",
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  })))), showHorizontalLine && /*#__PURE__*/React.createElement(StyledHorizontalLine, null), children, /*#__PURE__*/React.createElement(StyledSideSheetFooter, null, /*#__PURE__*/React.createElement(StyledHorizontalLine, null), /*#__PURE__*/React.createElement(StyledButtonGroupContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    fullWidth: true
+  }, basicButtonAction && /*#__PURE__*/React.createElement(Button, {
+    onClick: basicButtonAction.action,
+    fullWidth: true
+  }, basicButtonAction.label), primaryButtonAction && /*#__PURE__*/React.createElement(PrimaryButton, {
+    onClick: primaryButtonAction.action
+  }, primaryButtonAction.label))))))));
+});
+export { SideSheet };

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

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const WithTabsInteractive: any;
+export declare const WithLockedScrollableBackdrop: any;

package/es/@next/SideSheet/SideSheetStyle.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledSideSheetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSideSheetContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSideSheetHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledRightContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHorizontalLine: import("styled-components").StyledComponent<"hr", any, {}, never>;
+export declare const StyledSideSheetFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonGroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/SideSheet/SideSheetStyle.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { Neutral } from '../utilities/colors';
+import * as Breakpoints from '../utilities/breakpoints';
+export var StyledSideSheetWrapper = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetWrapper",
+  componentId: "sc-z0rzf0-0"
+})(["position:fixed;inset:0;background-color:rgba(45,45,45,0.5);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:999;animation:fade-in2 0.2s;&.closed{animation:fade-out2 0.2s;}@keyframes fade-in2{0%{opacity:0;}100%{opacity:1;}}@keyframes fade-out2{0%{opacity:1;}100%{opacity:0;}}"]);
+export var StyledSideSheetContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetContainer",
+  componentId: "sc-z0rzf0-1"
+})(["position:absolute;display:flex;flex-direction:column;width:480px;height:100vh;background:", ";box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);overflow:hidden;animation:slide-in 0.2s;top:0;right:0;&.closed{animation:slide-out 0.2s;}@keyframes slide-in{0%{opacity:0;transform:translateX(100%);}100%{opacity:1;}}@keyframes slide-out{0%{opacity:0;}100%{opacity:1;transform:translateX(100%);}}@media (max-width:", "){width:100vw;}"], Neutral.B100, Breakpoints.large);
+export var StyledSideSheetHeader = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetHeader",
+  componentId: "sc-z0rzf0-2"
+})(["display:flex;align-items:top;padding:16px 20px;"]);
+export var StyledButtonContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledButtonContainer",
+  componentId: "sc-z0rzf0-3"
+})(["cursor:pointer;margin:4px 8px 4px 0px;svg{width:24px;fill:", ";}"], Neutral.B40);
+export var StyledRightContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledRightContainer",
+  componentId: "sc-z0rzf0-4"
+})(["margin-left:auto;"]);
+export var StyledHorizontalLine = styled.hr.withConfig({
+  displayName: "SideSheetStyle__StyledHorizontalLine",
+  componentId: "sc-z0rzf0-5"
+})(["height:1px;background-color:", ";margin:0px 0px;border:none;"], Neutral.B95);
+export var StyledSideSheetFooter = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledSideSheetFooter",
+  componentId: "sc-z0rzf0-6"
+})(["margin-top:auto;"]);
+export var StyledButtonGroupContainer = styled.div.withConfig({
+  displayName: "SideSheetStyle__StyledButtonGroupContainer",
+  componentId: "sc-z0rzf0-7"
+})(["margin:16px 20px;"]);

package/es/@next/SideSheet/index.d.ts

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

package/es/@next/SideSheet/index.js

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

package/es/helpers/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (func: any, delay?: number) => (...args: any) => void;

package/es/helpers/debounce.js

@@ -0,0 +1,16 @@
+var _this = this;
+export var debounce = function debounce(func, delay) {
+  if (delay === void 0) {
+    delay = 500;
+  }
+  var timeoutID;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(function () {
+      func.apply(_this, args);
+    }, delay);
+  };
+};

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

@@ -7,5 +7,8 @@ export declare type BarProps = {
     secondaryAction?: ComponentAction;
     tertiaryAction?: ComponentAction;
     position?: 'top' | 'bottom';
+    showBackButton?: boolean;
+    onBack?: () => void;
+    customActionGroup?: React.ReactNode;
 };
 export declare const Bar: React.ForwardRefExoticComponent<BarProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Bar/Bar.js

@@ -7,6 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ = require("..");
 var _Button = require("../Button");
 var _ButtonGroup = require("../ButtonGroup");
+var _Icon = require("../Icon");
 var _Typography = require("../Typography");
 var _BarStyle = require("./BarStyle");
 var _useWindowSize2 = require("./useWindowSize");
@@ -16,7 +17,11 @@ var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
     primaryAction = _ref.primaryAction,
     secondaryAction = _ref.secondaryAction,
     tertiaryAction = _ref.tertiaryAction,
-    position = _ref.position;
+    position = _ref.position,
+    _ref$showBackButton = _ref.showBackButton,
+    showBackButton = _ref$showBackButton === void 0 ? false : _ref$showBackButton,
+    onBack = _ref.onBack,
+    customActionGroup = _ref.customActionGroup;
   var headerMarkup = function headerMarkup() {
     if (subheading) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
@@ -42,7 +47,11 @@ var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
   return /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBar, {
     "data-align": position,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarContainer, null, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarActionWrapper, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, tertiaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  }, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarContainer, null, showBackButton && /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledButtonContainer, {
+    onClick: onBack
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-arrow-left-line"
+  })), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, tertiaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: tertiaryAction.action,
     size: buttonSize
   }, tertiaryAction.label), secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {

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

@@ -4,3 +4,5 @@ export default _default;
 export declare const Interactive: any;
 export declare const PrimaryActionOnly: any;
 export declare const CustomHeading: any;
+export declare const BackButton: any;
+export declare const customActionGroup: any;

package/lib/@next/Bar/BarStyle.d.ts

@@ -3,3 +3,4 @@ export declare const StyledBarHeaderWrapper: import("styled-components").StyledC
 export declare const StyledBarActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCustomHeadingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;