glints-aries 4.0.189 → 4.0.191

package/es/@next/Alert/AlertContext.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
+import { ComponentWithProviderProps } from '../../types/componentWithProvider';
 import { AlertProps } from './Alert';
-export declare type showAlertProps = Omit<AlertProps, 'show'>;
-export declare type AlertContextProps = AlertProps & {
-    showAlert: (props: showAlertProps) => void;
-    closeAlert: () => void;
-};
+export declare type ShowAlertProps = Omit<AlertProps, 'show'>;
+export declare type AlertContextProps = AlertProps & ComponentWithProviderProps<ShowAlertProps>;
 export declare const AlertContext: import("react").Context<AlertContextProps>;

package/es/@next/Alert/AlertProvider.js

@@ -6,19 +6,19 @@ export var AlertProvider = function AlertProvider(_ref) {
   var _useState = useState(undefined),
     state = _useState[0],
     setState = _useState[1];
-  var showAlert = function showAlert(props) {
+  var open = function open(props) {
     return setState(_extends({}, props, {
       show: true
     }));
   };
-  var closeAlert = function closeAlert() {
+  var close = function close() {
     return setState({
       show: false
     });
   };
   var alertContextValue = _extends({}, state, {
-    showAlert: showAlert,
-    closeAlert: closeAlert
+    open: open,
+    close: close
   });
   return /*#__PURE__*/React.createElement(AlertContext.Provider, {
     value: alertContextValue

package/es/@next/Alert/AlertWithProvider.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["closeAlert"],
+var _excluded = ["close", "onDismissed"],
   _excluded2 = ["show"];
 import React from 'react';
 import { Alert } from './Alert';
 import { useAlert } from './useAlert';
-export var AlertWithProvider = /*#__PURE__*/React.forwardRef(function AlertWithProvider(_, alertRef) {
+export var AlertWithProvider = /*#__PURE__*/React.forwardRef(function AlertWithProvider(_, ref) {
   var _useAlert = useAlert(),
-    closeAlert = _useAlert.closeAlert,
+    close = _useAlert.close,
+    _onDismissed = _useAlert.onDismissed,
     rest = _objectWithoutPropertiesLoose(_useAlert, _excluded);
   var show = rest.show,
     alertProps = _objectWithoutPropertiesLoose(rest, _excluded2);
@@ -15,11 +16,12 @@ export var AlertWithProvider = /*#__PURE__*/React.forwardRef(function AlertWithP
     return null;
   }
   return /*#__PURE__*/React.createElement(Alert, _extends({
-    ref: alertRef
+    ref: ref
   }, alertProps, {
     show: show,
     onDismissed: function onDismissed() {
-      return closeAlert();
+      close();
+      _onDismissed == null ? void 0 : _onDismissed();
     }
   }));
 });

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare type ModalAction = {
+    label: string;
+    action: (...args: any[]) => void;
+};
+export declare type ModalProps = {
+    isOpen?: boolean;
+    header?: string;
+    headerDescription?: string;
+    children?: React.ReactNode;
+    /** This action will be tied to primary button on footer */
+    primaryAction?: ModalAction;
+    /** This action will be tied to basic button on footer */
+    secondaryAction?: ModalAction;
+    /** 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;
+};
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,82 @@
+import React 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 } 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,
+    closeOnClickOutside = _ref.closeOnClickOutside,
+    onClose = _ref.onClose,
+    onBack = _ref.onBack;
+  if (!isOpen) {
+    return null;
+  }
+  var defaultActionContent = /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return secondaryAction.action == null ? void 0 : secondaryAction.action();
+    }
+  }, secondaryAction.label), primaryAction && /*#__PURE__*/React.createElement(PrimaryButton, {
+    onClick: function onClick() {
+      return primaryAction.action == null ? void 0 : primaryAction.action();
+    }
+  }, 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();
+    }
+  }, /*#__PURE__*/React.createElement(StyledModalContainer, {
+    ref: ref,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, header && /*#__PURE__*/React.createElement(StyledModalHeader, {
+    "data-show-border": showHeaderBorder
+  }, 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, null, content), hasActions && /*#__PURE__*/React.createElement(StyledModalActions, null, actionsContent))));
+});

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

@@ -0,0 +1,7 @@
+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 WithSpinner: any;
+export declare const WithCustomActions: 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 = Omit<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,26 @@
+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(undefined),
+    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);
+};

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

@@ -0,0 +1,9 @@
+export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, {}, 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>;
+export declare const StyledModalActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledModalBackButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledModalCloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { borderRadius8 } from '../utilities/borderRadius';
+import { Neutral } from '../utilities/colors';
+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;"]);
+export var StyledModalContainer = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalContainer",
+  componentId: "sc-1694up4-1"
+})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);"], Neutral.B100, borderRadius8);
+export var StyledModalHeader = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalHeader",
+  componentId: "sc-1694up4-2"
+})(["display:flex;flex-direction:row;align-items:center;padding:", " 20px;box-shadow:inset 0px -1px 0px ", ";border-radius:", " 0;align-self:stretch;div{flex:1;}&[data-show-border='false']{box-shadow:unset;}@media (max-width:", "){padding:", ";}"], space16, Neutral.B95, borderRadius8, Breakpoints.large, space16);
+export var StyledModalContent = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalContent",
+  componentId: "sc-1694up4-3"
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;word-break:break-all;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, space16);
+export var StyledModalActions = styled.div.withConfig({
+  displayName: "ModalStyle__StyledModalActions",
+  componentId: "sc-1694up4-4"
+})(["display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;align-self:stretch;padding:", " 20px;gap:10px;box-shadow:inset 0px 1px 0px ", ";border-radius:0 ", ";@media (max-width:", "){padding:", ";}"], space16, Neutral.B95, borderRadius8, Breakpoints.large, space16);
+export var StyledButtonContainer = styled.div.withConfig({
+  displayName: "ModalStyle__StyledButtonContainer",
+  componentId: "sc-1694up4-5"
+})(["display:contents;"]);
+export var StyledModalButton = styled.button.withConfig({
+  displayName: "ModalStyle__StyledModalButton",
+  componentId: "sc-1694up4-6"
+})(["cursor:pointer;border:0;background:transparent;padding:0;svg{width:24px;height:24px;fill:", ";}&[data-has-decription='true']{margin-top:-20px;}@media (max-width:", "){&[data-has-decription='true']{margin-top:-18px;}}"], Neutral.B40, Breakpoints.large);
+export var StyledModalBackButton = styled(StyledModalButton).withConfig({
+  displayName: "ModalStyle__StyledModalBackButton",
+  componentId: "sc-1694up4-7"
+})(["margin-right:16px;"]);
+export var StyledModalCloseButton = styled(StyledModalButton).withConfig({
+  displayName: "ModalStyle__StyledModalCloseButton",
+  componentId: "sc-1694up4-8"
+})(["margin-left:16px;"]);

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ModalWithProvider: () => JSX.Element;

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["close", "onClose"],
+  _excluded2 = ["isOpen"];
+import React from 'react';
+import { Modal } from './Modal';
+import { useModal } from './useModal';
+export var ModalWithProvider = function ModalWithProvider() {
+  var _useModal = useModal(),
+    close = _useModal.close,
+    _onClose = _useModal.onClose,
+    rest = _objectWithoutPropertiesLoose(_useModal, _excluded);
+  var isOpen = rest.isOpen,
+    modalProps = _objectWithoutPropertiesLoose(rest, _excluded2);
+  if (!isOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, modalProps, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      close();
+      _onClose == null ? void 0 : _onClose();
+    }
+  }));
+};

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

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

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

@@ -0,0 +1,4 @@
+export * from './Modal';
+export * from './useModal';
+export * from './ModalContext';
+export * from './ModalProvider';

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

@@ -0,0 +1,4 @@
+export * from './Modal';
+export * from './useModal';
+export * from './ModalContext';
+export * from './ModalProvider';

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

@@ -0,0 +1 @@
+export declare const useModal: () => import("./ModalContext").ModalContextProps;

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

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ModalContext } from './ModalContext';
+export var useModal = function useModal() {
+  var context = useContext(ModalContext);
+  if (!context) {
+    throw new Error('No ModalContext was provided via "ModalProvider", to use this hook you must provide them in your app root.');
+  }
+  return context;
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Portal: ({ children }: {
+    children: React.ReactNode;
+}) => import("react").ReactPortal;

package/es/@next/Portal/Portal.js

@@ -0,0 +1,9 @@
+import { createPortal } from 'react-dom';
+export var Portal = function Portal(_ref) {
+  var children = _ref.children;
+  var container = document.getElementById('glints-portal-container');
+  if (!container) {
+    throw new Error("Portal component requires div with id \"glints-portal-container\" as container, \n      please add it as a sibling to where your react app is rendered!");
+  }
+  return /*#__PURE__*/createPortal(children, container);
+};

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { IconProps } from '../Icon';
-export declare const Spinner: (props: Omit<IconProps, 'name'>) => JSX.Element;
+export declare type SpinnerProps = Omit<IconProps, 'name'>;
+export declare const Spinner: (props: SpinnerProps) => JSX.Element;

package/es/@next/Spinner/Spinner.js

@@ -5,7 +5,7 @@ import { Icon } from '../Icon';
 var StyledWrapper = styled.div.withConfig({
   displayName: "Spinner__StyledWrapper",
   componentId: "sc-ynwr5u-0"
-})(["@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
+})(["display:flex;justify-content:center;@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
 export var Spinner = function Spinner(props) {
   return /*#__PURE__*/React.createElement(StyledWrapper, {
     className: "spinner-container"

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

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

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

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

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

@@ -13,10 +13,13 @@ export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Divider } from './Divider';
 export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
-export { Pagination, SimplePagination, PaginationProps } from './Pagination';
+export { Modal, ModalProps, ModalContext, ModalProvider, useModal, } from './Modal';
+export { Pagination, PaginationProps, SimplePagination } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';
+export { Spinner, SpinnerProps } from './Spinner';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
+export { TextInput, TextInputProps } from './TextInput';
 export { Typography, TypographyProps } from './Typography';
 export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };

package/es/@next/index.js

@@ -14,10 +14,13 @@ export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Divider } from './Divider';
 export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState } from './IndexTable';
-export { Pagination, SimplePagination, PaginationProps } from './Pagination';
+export { Modal, ModalProps, ModalContext, ModalProvider, useModal } from './Modal';
+export { Pagination, PaginationProps, SimplePagination } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';
+export { Spinner, SpinnerProps } from './Spinner';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
+export { TextInput, TextInputProps } from './TextInput';
 export { Typography, TypographyProps } from './Typography';
 export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };

package/es/helpers/storybook/Decorators.d.ts

@@ -1,2 +1,4 @@
 import { DecoratorFn } from '@storybook/react';
 export declare const withAlertProvider: DecoratorFn;
+export declare const withModalProvider: DecoratorFn;
+export declare const withGlintsPortalContainer: DecoratorFn;

package/es/helpers/storybook/Decorators.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import { AlertProvider } from '../../@next/Alert/AlertProvider';
-
-// Receive a component and apply a bordered container with max width of 400px.
+import { ModalProvider } from '../../@next/Modal/ModalProvider';
 export var withAlertProvider = function withAlertProvider(Story) {
   return /*#__PURE__*/React.createElement(AlertProvider, null, /*#__PURE__*/React.createElement(Story, null));
+};
+export var withModalProvider = function withModalProvider(Story) {
+  return /*#__PURE__*/React.createElement(ModalProvider, null, /*#__PURE__*/React.createElement(Story, null));
+};
+export var withGlintsPortalContainer = function withGlintsPortalContainer(Story) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: "glints-portal-container"
+  }), /*#__PURE__*/React.createElement(Story, null));
 };

package/es/types/componentWithProvider.d.ts

@@ -0,0 +1,4 @@
+export declare type ComponentWithProviderProps<T> = {
+    open: (props: T) => void;
+    close: () => void;
+};

package/es/types/componentWithProvider.js

@@ -0,0 +1 @@
+export {};

package/lib/@next/Alert/AlertContext.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
+import { ComponentWithProviderProps } from '../../types/componentWithProvider';
 import { AlertProps } from './Alert';
-export declare type showAlertProps = Omit<AlertProps, 'show'>;
-export declare type AlertContextProps = AlertProps & {
-    showAlert: (props: showAlertProps) => void;
-    closeAlert: () => void;
-};
+export declare type ShowAlertProps = Omit<AlertProps, 'show'>;
+export declare type AlertContextProps = AlertProps & ComponentWithProviderProps<ShowAlertProps>;
 export declare const AlertContext: import("react").Context<AlertContextProps>;

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

@@ -13,19 +13,19 @@ var AlertProvider = function AlertProvider(_ref) {
   var _useState = (0, _react.useState)(undefined),
     state = _useState[0],
     setState = _useState[1];
-  var showAlert = function showAlert(props) {
+  var open = function open(props) {
     return setState((0, _extends2["default"])({}, props, {
       show: true
     }));
   };
-  var closeAlert = function closeAlert() {
+  var close = function close() {
     return setState({
       show: false
     });
   };
   var alertContextValue = (0, _extends2["default"])({}, state, {
-    showAlert: showAlert,
-    closeAlert: closeAlert
+    open: open,
+    close: close
   });
   return /*#__PURE__*/_react["default"].createElement(_AlertContext.AlertContext.Provider, {
     value: alertContextValue

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

@@ -8,11 +8,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _Alert = require("./Alert");
 var _useAlert2 = require("./useAlert");
-var _excluded = ["closeAlert"],
+var _excluded = ["close", "onDismissed"],
   _excluded2 = ["show"];
-var AlertWithProvider = /*#__PURE__*/_react["default"].forwardRef(function AlertWithProvider(_, alertRef) {
+var AlertWithProvider = /*#__PURE__*/_react["default"].forwardRef(function AlertWithProvider(_, ref) {
   var _useAlert = (0, _useAlert2.useAlert)(),
-    closeAlert = _useAlert.closeAlert,
+    close = _useAlert.close,
+    _onDismissed = _useAlert.onDismissed,
     rest = (0, _objectWithoutPropertiesLoose2["default"])(_useAlert, _excluded);
   var show = rest.show,
     alertProps = (0, _objectWithoutPropertiesLoose2["default"])(rest, _excluded2);
@@ -20,11 +21,12 @@ var AlertWithProvider = /*#__PURE__*/_react["default"].forwardRef(function Alert
     return null;
   }
   return /*#__PURE__*/_react["default"].createElement(_Alert.Alert, (0, _extends2["default"])({
-    ref: alertRef
+    ref: ref
   }, alertProps, {
     show: show,
     onDismissed: function onDismissed() {
-      return closeAlert();
+      close();
+      _onDismissed == null ? void 0 : _onDismissed();
     }
   }));
 });

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare type ModalAction = {
+    label: string;
+    action: (...args: any[]) => void;
+};
+export declare type ModalProps = {
+    isOpen?: boolean;
+    header?: string;
+    headerDescription?: string;
+    children?: React.ReactNode;
+    /** This action will be tied to primary button on footer */
+    primaryAction?: ModalAction;
+    /** This action will be tied to basic button on footer */
+    secondaryAction?: ModalAction;
+    /** 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;
+};
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Modal = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("../Button");
+var _ButtonGroup = require("../ButtonGroup");
+var _Icon = require("../Icon");
+var _Portal = require("../Portal/Portal");
+var _Typography = require("../Typography");
+var _ModalStyle = require("./ModalStyle");
+var Modal = /*#__PURE__*/_react["default"].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,
+    closeOnClickOutside = _ref.closeOnClickOutside,
+    onClose = _ref.onClose,
+    onBack = _ref.onBack;
+  if (!isOpen) {
+    return null;
+  }
+  var defaultActionContent = /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: function onClick() {
+      return secondaryAction.action == null ? void 0 : secondaryAction.action();
+    }
+  }, secondaryAction.label), primaryAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, {
+    onClick: function onClick() {
+      return primaryAction.action == null ? void 0 : primaryAction.action();
+    }
+  }, primaryAction.label));
+  var actionsContent = customActions ? customActions : defaultActionContent;
+  var hasActions = !!customActions || !!primaryAction || !!secondaryAction;
+  var content = typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, children) : children;
+  var handleClickOutside = function handleClickOutside() {
+    if (closeOnClickOutside) {
+      onClose == null ? void 0 : onClose();
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Portal.Portal, null, /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalWrapper, {
+    "data-testid": "modal-wrapper",
+    onClick: function onClick() {
+      return handleClickOutside();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalContainer, {
+    ref: ref,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, header && /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalHeader, {
+    "data-show-border": showHeaderBorder
+  }, showBackButton && /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalBackButton, {
+    "data-testid": "modal-back-btn",
+    "data-has-decription": !!headerDescription,
+    onClick: function onClick() {
+      return onBack == null ? void 0 : onBack();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-arrow-left-line"
+  }))), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "subtitle1"
+  }, header, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, headerDescription)), showCloseButton && /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalCloseButton, {
+    "data-testid": "modal-close-btn",
+    "data-has-decription": !!headerDescription,
+    onClick: function onClick() {
+      return onClose == null ? void 0 : onClose();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close"
+  })))), /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalContent, null, content), hasActions && /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalActions, null, actionsContent))));
+});
+exports.Modal = Modal;

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

@@ -0,0 +1,7 @@
+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 WithSpinner: any;
+export declare const WithCustomActions: any;

package/lib/@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 = Omit<ModalProps, 'isOpen'>;
+export declare type ModalContextProps = ModalProps & ComponentWithProviderProps<ShowModalProps>;
+export declare const ModalContext: import("react").Context<ModalContextProps>;

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

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ModalContext = void 0;
+var _react = require("react");
+var ModalContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ModalContext = ModalContext;

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ModalProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _ModalContext = require("./ModalContext");
+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 ModalProvider = function ModalProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(undefined),
+    state = _useState[0],
+    setState = _useState[1];
+  var open = function open(props) {
+    return setState((0, _extends2["default"])({}, props, {
+      isOpen: true
+    }));
+  };
+  var close = function close() {
+    return setState({
+      isOpen: false
+    });
+  };
+  var modalContextValue = (0, _extends2["default"])({}, state, {
+    open: open,
+    close: close
+  });
+  return /*#__PURE__*/_react["default"].createElement(_ModalContext.ModalContext.Provider, {
+    value: modalContextValue
+  }, children);
+};
+exports.ModalProvider = ModalProvider;

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

@@ -0,0 +1,9 @@
+export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, {}, 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>;
+export declare const StyledModalActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledModalBackButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledModalCloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledModalWrapper = exports.StyledModalHeader = exports.StyledModalContent = exports.StyledModalContainer = exports.StyledModalCloseButton = exports.StyledModalButton = exports.StyledModalBackButton = exports.StyledModalActions = exports.StyledButtonContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+var _borderRadius = require("../utilities/borderRadius");
+var _colors = require("../utilities/colors");
+var _spacing = require("../utilities/spacing");
+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 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;"]);
+exports.StyledModalWrapper = StyledModalWrapper;
+var StyledModalContainer = _styledComponents["default"].div.withConfig({
+  displayName: "ModalStyle__StyledModalContainer",
+  componentId: "sc-1694up4-1"
+})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);"], _colors.Neutral.B100, _borderRadius.borderRadius8);
+exports.StyledModalContainer = StyledModalContainer;
+var StyledModalHeader = _styledComponents["default"].div.withConfig({
+  displayName: "ModalStyle__StyledModalHeader",
+  componentId: "sc-1694up4-2"
+})(["display:flex;flex-direction:row;align-items:center;padding:", " 20px;box-shadow:inset 0px -1px 0px ", ";border-radius:", " 0;align-self:stretch;div{flex:1;}&[data-show-border='false']{box-shadow:unset;}@media (max-width:", "){padding:", ";}"], _spacing.space16, _colors.Neutral.B95, _borderRadius.borderRadius8, Breakpoints.large, _spacing.space16);
+exports.StyledModalHeader = StyledModalHeader;
+var StyledModalContent = _styledComponents["default"].div.withConfig({
+  displayName: "ModalStyle__StyledModalContent",
+  componentId: "sc-1694up4-3"
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;word-break:break-all;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, _spacing.space16);
+exports.StyledModalContent = StyledModalContent;
+var StyledModalActions = _styledComponents["default"].div.withConfig({
+  displayName: "ModalStyle__StyledModalActions",
+  componentId: "sc-1694up4-4"
+})(["display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;align-self:stretch;padding:", " 20px;gap:10px;box-shadow:inset 0px 1px 0px ", ";border-radius:0 ", ";@media (max-width:", "){padding:", ";}"], _spacing.space16, _colors.Neutral.B95, _borderRadius.borderRadius8, Breakpoints.large, _spacing.space16);
+exports.StyledModalActions = StyledModalActions;
+var StyledButtonContainer = _styledComponents["default"].div.withConfig({
+  displayName: "ModalStyle__StyledButtonContainer",
+  componentId: "sc-1694up4-5"
+})(["display:contents;"]);
+exports.StyledButtonContainer = StyledButtonContainer;
+var StyledModalButton = _styledComponents["default"].button.withConfig({
+  displayName: "ModalStyle__StyledModalButton",
+  componentId: "sc-1694up4-6"
+})(["cursor:pointer;border:0;background:transparent;padding:0;svg{width:24px;height:24px;fill:", ";}&[data-has-decription='true']{margin-top:-20px;}@media (max-width:", "){&[data-has-decription='true']{margin-top:-18px;}}"], _colors.Neutral.B40, Breakpoints.large);
+exports.StyledModalButton = StyledModalButton;
+var StyledModalBackButton = (0, _styledComponents["default"])(StyledModalButton).withConfig({
+  displayName: "ModalStyle__StyledModalBackButton",
+  componentId: "sc-1694up4-7"
+})(["margin-right:16px;"]);
+exports.StyledModalBackButton = StyledModalBackButton;
+var StyledModalCloseButton = (0, _styledComponents["default"])(StyledModalButton).withConfig({
+  displayName: "ModalStyle__StyledModalCloseButton",
+  componentId: "sc-1694up4-8"
+})(["margin-left:16px;"]);
+exports.StyledModalCloseButton = StyledModalCloseButton;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ModalWithProvider: () => JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ModalWithProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Modal = require("./Modal");
+var _useModal2 = require("./useModal");
+var _excluded = ["close", "onClose"],
+  _excluded2 = ["isOpen"];
+var ModalWithProvider = function ModalWithProvider() {
+  var _useModal = (0, _useModal2.useModal)(),
+    close = _useModal.close,
+    _onClose = _useModal.onClose,
+    rest = (0, _objectWithoutPropertiesLoose2["default"])(_useModal, _excluded);
+  var isOpen = rest.isOpen,
+    modalProps = (0, _objectWithoutPropertiesLoose2["default"])(rest, _excluded2);
+  if (!isOpen) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement(_Modal.Modal, (0, _extends2["default"])({}, modalProps, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      close();
+      _onClose == null ? void 0 : _onClose();
+    }
+  }));
+};
+exports.ModalWithProvider = ModalWithProvider;

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

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

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

@@ -0,0 +1,4 @@
+export * from './Modal';
+export * from './useModal';
+export * from './ModalContext';
+export * from './ModalProvider';

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

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+var _Modal = require("./Modal");
+Object.keys(_Modal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Modal[key]) return;
+  exports[key] = _Modal[key];
+});
+var _useModal = require("./useModal");
+Object.keys(_useModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModal[key]) return;
+  exports[key] = _useModal[key];
+});
+var _ModalContext = require("./ModalContext");
+Object.keys(_ModalContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalContext[key]) return;
+  exports[key] = _ModalContext[key];
+});
+var _ModalProvider = require("./ModalProvider");
+Object.keys(_ModalProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalProvider[key]) return;
+  exports[key] = _ModalProvider[key];
+});

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

@@ -0,0 +1 @@
+export declare const useModal: () => import("./ModalContext").ModalContextProps;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useModal = void 0;
+var _react = require("react");
+var _ModalContext = require("./ModalContext");
+var useModal = function useModal() {
+  var context = (0, _react.useContext)(_ModalContext.ModalContext);
+  if (!context) {
+    throw new Error('No ModalContext was provided via "ModalProvider", to use this hook you must provide them in your app root.');
+  }
+  return context;
+};
+exports.useModal = useModal;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Portal: ({ children }: {
+    children: React.ReactNode;
+}) => import("react").ReactPortal;

package/lib/@next/Portal/Portal.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Portal = void 0;
+var _reactDom = require("react-dom");
+var Portal = function Portal(_ref) {
+  var children = _ref.children;
+  var container = document.getElementById('glints-portal-container');
+  if (!container) {
+    throw new Error("Portal component requires div with id \"glints-portal-container\" as container, \n      please add it as a sibling to where your react app is rendered!");
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
+};
+exports.Portal = Portal;

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { IconProps } from '../Icon';
-export declare const Spinner: (props: Omit<IconProps, 'name'>) => JSX.Element;
+export declare type SpinnerProps = Omit<IconProps, 'name'>;
+export declare const Spinner: (props: SpinnerProps) => JSX.Element;

package/lib/@next/Spinner/Spinner.js

@@ -10,7 +10,7 @@ var _Icon = require("../Icon");
 var StyledWrapper = _styledComponents["default"].div.withConfig({
   displayName: "Spinner__StyledWrapper",
   componentId: "sc-ynwr5u-0"
-})(["@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
+})(["display:flex;justify-content:center;@keyframes p-keyframes-spin{to{transform:rotate(1turn);}}svg{animation:p-keyframes-spin 800ms linear infinite;}"]);
 var Spinner = function Spinner(props) {
   return /*#__PURE__*/_react["default"].createElement(StyledWrapper, {
     className: "spinner-container"

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _Spinner = require("./Spinner");
+Object.keys(_Spinner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Spinner[key]) return;
+  exports[key] = _Spinner[key];
+});

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

@@ -13,10 +13,13 @@ export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Divider } from './Divider';
 export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
-export { Pagination, SimplePagination, PaginationProps } from './Pagination';
+export { Modal, ModalProps, ModalContext, ModalProvider, useModal, } from './Modal';
+export { Pagination, PaginationProps, SimplePagination } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';
+export { Spinner, SpinnerProps } from './Spinner';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
+export { TextInput, TextInputProps } from './TextInput';
 export { Typography, TypographyProps } from './Typography';
 export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
+exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -50,16 +50,25 @@ var _IndexTable = require("./IndexTable");
 exports.IndexTable = _IndexTable.IndexTable;
 exports.IndexTableProps = _IndexTable.IndexTableProps;
 exports.useIndexResourceState = _IndexTable.useIndexResourceState;
+var _Modal = require("./Modal");
+exports.Modal = _Modal.Modal;
+exports.ModalProps = _Modal.ModalProps;
+exports.ModalContext = _Modal.ModalContext;
+exports.ModalProvider = _Modal.ModalProvider;
+exports.useModal = _Modal.useModal;
 var _Pagination = require("./Pagination");
 exports.Pagination = _Pagination.Pagination;
-exports.SimplePagination = _Pagination.SimplePagination;
 exports.PaginationProps = _Pagination.PaginationProps;
+exports.SimplePagination = _Pagination.SimplePagination;
 var _Popover = require("./Popover");
 exports.Popover = _Popover.Popover;
 exports.PopoverProps = _Popover.PopoverProps;
 var _RadioButton = require("./RadioButton");
 exports.RadioButton = _RadioButton.RadioButton;
 exports.RadioButtonProps = _RadioButton.RadioButtonProps;
+var _Spinner = require("./Spinner");
+exports.Spinner = _Spinner.Spinner;
+exports.SpinnerProps = _Spinner.SpinnerProps;
 var _Tabs = require("./Tabs");
 exports.Tab = _Tabs.Tab;
 exports.TabModel = _Tabs.TabModel;
@@ -69,6 +78,9 @@ exports.TabsProps = _Tabs.TabsProps;
 var _Tag = require("./Tag");
 exports.Tag = _Tag.Tag;
 exports.TagProps = _Tag.TagProps;
+var _TextInput = require("./TextInput");
+exports.TextInput = _TextInput.TextInput;
+exports.TextInputProps = _TextInput.TextInputProps;
 var _Typography = require("./Typography");
 exports.Typography = _Typography.Typography;
 exports.TypographyProps = _Typography.TypographyProps;

package/lib/helpers/storybook/Decorators.d.ts

@@ -1,2 +1,4 @@
 import { DecoratorFn } from '@storybook/react';
 export declare const withAlertProvider: DecoratorFn;
+export declare const withModalProvider: DecoratorFn;
+export declare const withGlintsPortalContainer: DecoratorFn;

package/lib/helpers/storybook/Decorators.js

@@ -2,11 +2,21 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.withAlertProvider = void 0;
+exports.withModalProvider = exports.withGlintsPortalContainer = exports.withAlertProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _AlertProvider = require("../../@next/Alert/AlertProvider");
-// Receive a component and apply a bordered container with max width of 400px.
+var _ModalProvider = require("../../@next/Modal/ModalProvider");
 var withAlertProvider = function withAlertProvider(Story) {
   return /*#__PURE__*/_react["default"].createElement(_AlertProvider.AlertProvider, null, /*#__PURE__*/_react["default"].createElement(Story, null));
 };
-exports.withAlertProvider = withAlertProvider;
+exports.withAlertProvider = withAlertProvider;
+var withModalProvider = function withModalProvider(Story) {
+  return /*#__PURE__*/_react["default"].createElement(_ModalProvider.ModalProvider, null, /*#__PURE__*/_react["default"].createElement(Story, null));
+};
+exports.withModalProvider = withModalProvider;
+var withGlintsPortalContainer = function withGlintsPortalContainer(Story) {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "glints-portal-container"
+  }), /*#__PURE__*/_react["default"].createElement(Story, null));
+};
+exports.withGlintsPortalContainer = withGlintsPortalContainer;

package/lib/types/componentWithProvider.d.ts

@@ -0,0 +1,4 @@
+export declare type ComponentWithProviderProps<T> = {
+    open: (props: T) => void;
+    close: () => void;
+};

package/lib/types/componentWithProvider.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

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