glints-aries 4.1.3 → 4.1.5

package/es/@next/Link/Link.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "external", "monochrome", "removeUnderline", "url"];
+import React from 'react';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { StyledLink } from './LinkStyle';
+export var Link = function Link(_ref) {
+  var children = _ref.children,
+    _ref$external = _ref.external,
+    external = _ref$external === void 0 ? false : _ref$external,
+    _ref$monochrome = _ref.monochrome,
+    monochrome = _ref$monochrome === void 0 ? false : _ref$monochrome,
+    _ref$removeUnderline = _ref.removeUnderline,
+    removeUnderline = _ref$removeUnderline === void 0 ? false : _ref$removeUnderline,
+    url = _ref.url,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledLink, _extends({
+    href: url,
+    "data-underline": !removeUnderline,
+    "data-monochrome": monochrome
+  }, external && {
+    target: '_blank'
+  }, {
+    external: external
+  }, props), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    as: "span"
+  }, children), external && /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-external-link-line"
+  }));
+};

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

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

package/es/@next/Link/LinkStyle.d.ts

@@ -0,0 +1,2 @@
+import { LinkProps } from './Link';
+export declare const StyledLink: import("styled-components").StyledComponent<"a", any, LinkProps, never>;

package/es/@next/Link/LinkStyle.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Blue, Neutral } from '../utilities/colors';
+import { space2 } from '../utilities/spacing';
+var centerAlign = "\n  vertical-align: middle;\n\n  svg {\n    vertical-align: middle;\n  }\n";
+export var StyledLink = styled.a.withConfig({
+  displayName: "LinkStyle__StyledLink",
+  componentId: "sc-usx229-0"
+})(["", " color:", ";cursor:pointer;text-decoration:underline;&[data-underline='false']{text-decoration:none;}&[data-monochrome='true']{color:", ";&:hover,&:active{color:", ";svg{fill:", ";}}svg{fill:", ";}}&:hover{color:rgba(0,86,140,0.9);svg{fill:rgba(0,86,140,0.9);}}&:active{color:", ";svg{fill:", ";}}svg{fill:", ";margin-left:", ";padding-bottom:", ";height:18px;}"], function (_ref) {
+  var external = _ref.external;
+  return external && centerAlign;
+}, Blue.S99, Neutral.B18, Neutral.B00, Neutral.B00, Neutral.B18, Blue.S100, Blue.S100, Blue.S99, space2, space2);

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

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

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface Option {
+    disabled?: boolean;
+    id?: string;
+    label: string | React.ReactNode;
+    sublabel?: React.ReactNode;
+    value: string;
+}
+export interface Section {
+    title?: string;
+    options: Option[];
+}
+export interface MenuProps {
+    id?: string;
+    onClick?: ({ value }: {
+        value: string;
+    }) => void;
+    options?: Option[];
+    /** Selected value based on Option.value */
+    selectedValues?: string[];
+    title?: string;
+    allowMultiple?: boolean;
+    sections?: Section[];
+}
+export declare const Menu: ({ allowMultiple, id, onClick, options, sections, selectedValues, title, }: MenuProps) => JSX.Element;

package/es/@next/Menu/Menu.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import nextId from 'react-id-generator';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { StyledMenu, StyledSections, TitleContainer } from './MenuStyle';
+import { MenuOptionLabel } from './components/MenuOptionLabel';
+import { MenuOption } from './components/MenuOption';
+import { MenuOptionCheckbox } from './components/MenuOptionCheckbox';
+export var Menu = function Menu(_ref) {
+  var allowMultiple = _ref.allowMultiple,
+    id = _ref.id,
+    onClick = _ref.onClick,
+    options = _ref.options,
+    sections = _ref.sections,
+    selectedValues = _ref.selectedValues,
+    title = _ref.title;
+  var randomId = nextId('glints-menu');
+  var menuId = id ? id : randomId;
+  var renderTitle = function renderTitle(_ref2) {
+    var title = _ref2.title;
+    return /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Typography, {
+      variant: "subtitle2",
+      as: "span",
+      color: Neutral.B40
+    }, title));
+  };
+  var renderOptions = function renderOptions(_ref3) {
+    var options = _ref3.options;
+    return /*#__PURE__*/React.createElement(StyledMenu, null, options == null ? void 0 : options.map(function (option) {
+      var value = option.value,
+        label = option.label,
+        sublabel = option.sublabel,
+        disabled = option.disabled,
+        id = option.id;
+      var randomId = nextId('glints-menu-option');
+      var menuOptionId = id ? id : randomId;
+      var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
+      return /*#__PURE__*/React.createElement(MenuOption, {
+        key: menuOptionId,
+        value: value,
+        disabled: disabled,
+        isSelected: isSelected,
+        onClick: onClick,
+        allowMultiple: allowMultiple
+      }, /*#__PURE__*/React.createElement(MenuOptionLabel, {
+        label: label,
+        sublabel: sublabel
+      }));
+    }));
+  };
+  var renderOptionsWithCheckbox = function renderOptionsWithCheckbox(_ref4) {
+    var options = _ref4.options;
+    return /*#__PURE__*/React.createElement(StyledMenu, null, options == null ? void 0 : options.map(function (option) {
+      var value = option.value,
+        label = option.label,
+        disabled = option.disabled,
+        id = option.id;
+      var randomId = nextId('glints-menu-option');
+      var menuOptionId = id ? id : randomId;
+      var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
+      return /*#__PURE__*/React.createElement(MenuOption, {
+        key: menuOptionId,
+        value: value,
+        disabled: disabled,
+        isSelected: isSelected,
+        onClick: onClick,
+        allowMultiple: allowMultiple
+      }, /*#__PURE__*/React.createElement(MenuOptionCheckbox, {
+        isSelected: isSelected,
+        disabled: disabled,
+        label: label
+      }));
+    }));
+  };
+  var renderSections = function renderSections(_ref5) {
+    var sections = _ref5.sections;
+    return /*#__PURE__*/React.createElement(StyledSections, null, sections.map(function (section, index) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: "menu-section-" + title + "-" + index
+      }, renderTitle({
+        title: section == null ? void 0 : section.title
+      }), allowMultiple ? renderOptionsWithCheckbox({
+        options: section == null ? void 0 : section.options
+      }) : renderOptions({
+        options: section == null ? void 0 : section.options
+      }));
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: menuId
+  }, title && renderTitle({
+    title: title
+  }), allowMultiple ? renderOptionsWithCheckbox({
+    options: options
+  }) : renderOptions({
+    options: options
+  }), sections && renderSections({
+    sections: sections
+  }));
+};

package/es/@next/Menu/Menu.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 Basic: any;
+export declare const AllowMultiple: any;
+export declare const WithSections: any;

package/es/@next/Menu/MenuStyle.d.ts

@@ -0,0 +1,6 @@
+import { MenuProps } from './Menu';
+export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledSections: import("styled-components").StyledComponent<"ul", any, {}, never>;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
+import { space16, space4, space8 } from '../utilities/spacing';
+export var StyledMenu = styled.ul.withConfig({
+  displayName: "MenuStyle__StyledMenu",
+  componentId: "sc-zm0l1a-0"
+})(["list-style:none;padding:0;margin:0;li{display:flex;min-height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], space8, space4, Neutral.B99, borderRadius4, Blue.S54, space4, Neutral.B85, Blue.S08, borderRadius4, space8, Blue.S99, Neutral.B100);
+export var TitleContainer = styled.div.withConfig({
+  displayName: "MenuStyle__TitleContainer",
+  componentId: "sc-zm0l1a-1"
+})(["margin:", " 0 ", ";padding:", " ", ";span{text-transform:uppercase;}"], space8, space4, space8, space16);
+export var ListContainer = styled.div.withConfig({
+  displayName: "MenuStyle__ListContainer",
+  componentId: "sc-zm0l1a-2"
+})(["padding:0 ", ";"], space8);
+export var List = styled.li.withConfig({
+  displayName: "MenuStyle__List",
+  componentId: "sc-zm0l1a-3"
+})(["height:max-content;span{overflow:hidden;width:100%;}"]);
+export var StyledSections = styled.ul.withConfig({
+  displayName: "MenuStyle__StyledSections",
+  componentId: "sc-zm0l1a-4"
+})(["list-style:none;padding:0;margin:", " 0;"], space8);

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { List, ListContainer } from '../MenuStyle';
+export var MenuOption = function MenuOption(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    value = _ref.value,
+    allowMultiple = _ref.allowMultiple;
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    onClick({
+      value: event.currentTarget.dataset.value
+    });
+  };
+  return /*#__PURE__*/React.createElement(ListContainer, null, /*#__PURE__*/React.createElement(List, {
+    "aria-disabled": disabled,
+    "data-active": isSelected,
+    "data-multiple": allowMultiple,
+    "data-value": value,
+    onClick: handleClick
+  }, children));
+};

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+export var MenuOptionCheckbox = function MenuOptionCheckbox(_ref) {
+  var disabled = _ref.disabled,
+    isSelected = _ref.isSelected,
+    label = _ref.label;
+  return /*#__PURE__*/React.createElement(Checkbox, {
+    label: label,
+    checked: isSelected,
+    disabled: disabled
+  });
+};

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Typography } from '../../Typography';
+import { Neutral } from '../../utilities/colors';
+import { MenuOptionLabelContainer } from './MenuOptionLabelStyle';
+export var MenuOptionLabel = function MenuOptionLabel(_ref) {
+  var label = _ref.label,
+    sublabel = _ref.sublabel;
+  if (!sublabel) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      as: "span",
+      variant: "body1",
+      color: Neutral.B18
+    }, label);
+  }
+  return /*#__PURE__*/React.createElement(MenuOptionLabelContainer, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body1",
+    color: Neutral.B18
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: Neutral.B40
+  }, sublabel));
+};

package/es/@next/Menu/components/MenuOptionLabelStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const MenuOptionLabelContainer: import("styled-components").StyledComponent<"div", any, {
+    sublabel?: React.ReactNode;
+}, never>;

package/es/@next/Menu/components/MenuOptionLabelStyle.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var MenuOptionLabelContainer = styled.div.withConfig({
+  displayName: "MenuOptionLabelStyle__MenuOptionLabelContainer",
+  componentId: "sc-oryr0t-0"
+})(["display:flex;flex-direction:column;align-items:center;padding:4px 0;"]);

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

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

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

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

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

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

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

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

package/es/@next/Menu/menuStoryHelper/PopoverMenu.d.ts

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

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

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["activatorLabel", "allowMultiple"];
+import React, { useCallback, useState } from 'react';
+import { Button } from '../../Button';
+import { Popover } from '../../Popover';
+import { Menu } from '../Menu';
+export var PopoverMenu = function PopoverMenu(_ref) {
+  var _ref$activatorLabel = _ref.activatorLabel,
+    activatorLabel = _ref$activatorLabel === void 0 ? 'Menu' : _ref$activatorLabel,
+    allowMultiple = _ref.allowMultiple,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(true),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState([]),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var togglePopoverActive = useCallback(function () {
+    return setPopoverActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    if (!allowMultiple) {
+      setSelectedOptions([value]);
+      return;
+    }
+    if (!selectedOptions.includes(value)) {
+      setSelectedOptions([].concat(selectedOptions, [value]));
+      return;
+    }
+    setSelectedOptions(selectedOptions.filter(function (option) {
+      return option !== value;
+    }));
+  };
+  var activator = /*#__PURE__*/React.createElement(Button, {
+    onClick: togglePopoverActive
+  }, activatorLabel);
+  return /*#__PURE__*/React.createElement(Popover, {
+    active: popoverActive,
+    activator: activator,
+    onClose: function onClose() {
+      return setPopoverActive(false);
+    }
+  }, /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement(Menu, _extends({}, props, {
+    allowMultiple: allowMultiple,
+    onClick: handleSelect,
+    selectedValues: selectedOptions
+  }))));
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComponentAction } from '../../types/componentAction';
+declare type LeftAndRightComponentModalProps = {
+    leftComponent: React.ReactNode;
+    rightComponent: React.ReactNode;
+} | {
+    leftComponent?: never;
+    rightComponent?: never;
+};
+export declare type ModalProps = React.HTMLAttributes<HTMLDivElement> & LeftAndRightComponentModalProps & {
+    isOpen?: boolean;
+    header?: React.ReactNode;
+    headerDescription?: React.ReactNode;
+    children?: React.ReactNode;
+    /** This action will be tied to primary button on footer */
+    primaryAction?: ComponentAction;
+    /** This action will be tied to basic button on footer */
+    secondaryAction?: ComponentAction;
+    /** Defining custom actions will not show primary and secondary actions */
+    customActions?: React.ReactNode;
+    showBackButton?: boolean;
+    showCloseButton?: boolean;
+    /** Use this if you don't want to see the header border bottom */
+    showHeaderBorder?: boolean;
+    /** Setting this to true will close modal when clicking outside of Modal body */
+    closeOnClickOutside?: boolean;
+    onClose?: () => void;
+    onBack?: () => void;
+    zIndexOverride?: number;
+    /** This prop will add default padding to the header */
+    headerHasDefaultPadding?: boolean;
+};
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,136 @@
+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", "headerHasDefaultPadding", "closeOnClickOutside", "onClose", "onBack", "zIndexOverride", "leftComponent", "rightComponent"];
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import { Portal } from '../Portal/Portal';
+import { Typography } from '../Typography';
+import { StyledModalWrapper, StyledModalContainer, StyledModalHeader, StyledModalContent, StyledModalActions, StyledButtonContainer, StyledModalCloseButton, StyledModalBackButton, StyledModalLeftAndRightComponent } from './ModalStyle';
+export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
+  var isOpen = _ref.isOpen,
+    header = _ref.header,
+    headerDescription = _ref.headerDescription,
+    children = _ref.children,
+    secondaryAction = _ref.secondaryAction,
+    primaryAction = _ref.primaryAction,
+    customActions = _ref.customActions,
+    showBackButton = _ref.showBackButton,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    _ref$showHeaderBorder = _ref.showHeaderBorder,
+    showHeaderBorder = _ref$showHeaderBorder === void 0 ? true : _ref$showHeaderBorder,
+    _ref$headerHasDefault = _ref.headerHasDefaultPadding,
+    headerHasDefaultPadding = _ref$headerHasDefault === void 0 ? true : _ref$headerHasDefault,
+    closeOnClickOutside = _ref.closeOnClickOutside,
+    onClose = _ref.onClose,
+    onBack = _ref.onBack,
+    _ref$zIndexOverride = _ref.zIndexOverride,
+    zIndexOverride = _ref$zIndexOverride === void 0 ? 999 : _ref$zIndexOverride,
+    leftComponent = _ref.leftComponent,
+    rightComponent = _ref.rightComponent,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(false),
+    isContentHasScrollbar = _useState[0],
+    setIsContentHasScrollbar = _useState[1];
+  var modalContentRef = useRef(null);
+  useEffect(function () {
+    var checkScrollbar = function checkScrollbar() {
+      var modalContent = modalContentRef.current;
+      if (modalContent) {
+        setIsContentHasScrollbar(modalContent.scrollHeight > modalContent.clientHeight);
+      }
+    };
+    checkScrollbar();
+    var handleResize = function handleResize() {
+      return checkScrollbar();
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+  useEffect(function () {
+    if (typeof window === 'undefined' || !window.document) return;
+    var enableScroll = function enableScroll() {
+      document.body.style.overflow = 'unset';
+    };
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      enableScroll();
+    }
+    return function () {
+      enableScroll();
+    };
+  }, [isOpen]);
+  if (!isOpen) {
+    return null;
+  }
+  var defaultActionContent = /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: function onClick() {
+      return secondaryAction.action == null ? void 0 : secondaryAction.action();
+    }
+  }, secondaryAction), secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, _extends({
+    onClick: function onClick() {
+      return primaryAction.action == null ? void 0 : primaryAction.action();
+    }
+  }, primaryAction), primaryAction.label));
+  var actionsContent = customActions ? customActions : defaultActionContent;
+  var hasActions = !!customActions || !!primaryAction || !!secondaryAction;
+  var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, children) : children;
+  var handleClickOutside = function handleClickOutside() {
+    if (closeOnClickOutside) {
+      onClose == null ? void 0 : onClose();
+    }
+  };
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledModalWrapper, {
+    "data-testid": "modal-wrapper",
+    onClick: function onClick() {
+      return handleClickOutside();
+    },
+    zIndexOverride: zIndexOverride
+  }, leftComponent && /*#__PURE__*/React.createElement(StyledModalLeftAndRightComponent, {
+    className: "modal-left-component"
+  }, leftComponent), /*#__PURE__*/React.createElement(StyledModalContainer, _extends({
+    ref: ref,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, props), header && /*#__PURE__*/React.createElement(StyledModalHeader, {
+    "data-show-border": showHeaderBorder,
+    "data-header-has-default-padding": headerHasDefaultPadding
+  }, showBackButton && /*#__PURE__*/React.createElement(StyledButtonContainer, null, /*#__PURE__*/React.createElement(StyledModalBackButton, {
+    "data-testid": "modal-back-btn",
+    "data-has-decription": !!headerDescription,
+    onClick: function onClick() {
+      return onBack == null ? void 0 : onBack();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-arrow-left-line"
+  }))), /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle1"
+  }, header, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, headerDescription)), showCloseButton && /*#__PURE__*/React.createElement(StyledButtonContainer, null, /*#__PURE__*/React.createElement(StyledModalCloseButton, {
+    "data-testid": "modal-close-btn",
+    "data-has-decription": !!headerDescription,
+    onClick: function onClick() {
+      return onClose == null ? void 0 : onClose();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  })))), /*#__PURE__*/React.createElement(StyledModalContent, {
+    className: "modal-content",
+    ref: modalContentRef,
+    "data-has-scrollbar": isContentHasScrollbar
+  }, content), hasActions && /*#__PURE__*/React.createElement(StyledModalActions, null, actionsContent)), rightComponent && /*#__PURE__*/React.createElement(StyledModalLeftAndRightComponent, {
+    className: "modal-right-component"
+  }, rightComponent)));
+});

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

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const WithLargeContent: any;
+export declare const WithOverflowContent: any;
+export declare const WithLockedScrollableBackdrop: any;
+export declare const WithSpinner: any;
+export declare const WithCustomActions: any;
+export declare const WithNumberInputAndTooltip: any;
+export declare const WithCustomLeftAndRightComponent: any;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentWithProviderProps } from '../../types/componentWithProvider';
+import { ModalProps } from './Modal';
+export declare type ShowModalProps = Exclude<ModalProps, 'isOpen'>;
+export declare type ModalContextProps = ModalProps & ComponentWithProviderProps<ShowModalProps>;
+export declare const ModalContext: import("react").Context<ModalContextProps>;

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

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var ModalContext = /*#__PURE__*/createContext(undefined);

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

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

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

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import { ModalContext } from './ModalContext';
+export var ModalProvider = function ModalProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState({
+      isOpen: false
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var open = function open(props) {
+    return setState(_extends({}, props, {
+      isOpen: true
+    }));
+  };
+  var close = function close() {
+    return setState({
+      isOpen: false
+    });
+  };
+  var modalContextValue = _extends({}, state, {
+    open: open,
+    close: close
+  });
+  return /*#__PURE__*/React.createElement(ModalContext.Provider, {
+    value: modalContextValue
+  }, children);
+};