glints-aries 4.0.207 → 4.0.209

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
-import { StyledBanner, StyledBannerContentContainer, StyledBannerTitleContainer, StyledCloseIconWrapper } from './BannerStyle';
+import { StyledBanner, StyledBannerContentContainer, StyledBannerTitle, StyledBannerTitleContainer, StyledCloseIconWrapper } from './BannerStyle';
 var iconNameStatusMap = {
   success: 'ri-checkbox-circle-fill',
   info: 'ri-information-fill',
@@ -34,7 +34,7 @@ export var Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
     "data-status": status
   }, props), /*#__PURE__*/React.createElement(StyledBannerTitleContainer, null, /*#__PURE__*/React.createElement(Icon, {
     name: iconNameValue
-  }), /*#__PURE__*/React.createElement(StyledBannerContentContainer, null, /*#__PURE__*/React.createElement(Typography, {
+  }), title && /*#__PURE__*/React.createElement(StyledBannerTitle, null, /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "subtitle1"
   }, title)), dismissable && /*#__PURE__*/React.createElement(StyledCloseIconWrapper, {

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

@@ -2,3 +2,4 @@ export declare const StyledCloseIconWrapper: import("styled-components").StyledC
 export declare const StyledBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBannerContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBannerTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBannerTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import * as Breakpoints from '../utilities/breakpoints';
 import { borderRadius8 } from '../utilities/borderRadius';
 import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+import { space4 } from '../utilities/spacing';
 export var StyledCloseIconWrapper = styled.div.withConfig({
   displayName: "BannerStyle__StyledCloseIconWrapper",
   componentId: "sc-1suv683-0"
@@ -17,4 +18,8 @@ export var StyledBannerContentContainer = styled.div.withConfig({
 export var StyledBannerTitleContainer = styled.div.withConfig({
   displayName: "BannerStyle__StyledBannerTitleContainer",
   componentId: "sc-1suv683-3"
-})(["position:relative;"]);
+})(["position:relative;"]);
+export var StyledBannerTitle = styled.div.withConfig({
+  displayName: "BannerStyle__StyledBannerTitle",
+  componentId: "sc-1suv683-4"
+})(["margin-bottom:", ";padding-left:40px;button{margin-top:10px;}"], space4);

package/es/@next/Card/Card.js

@@ -33,7 +33,9 @@ var CardComponent = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
   var showActions = !!primaryAction || !!secondaryAction;
   return /*#__PURE__*/React.createElement(StyledCardContainer, {
     ref: ref
-  }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledCardContentWrapper, null, children), showActions && /*#__PURE__*/React.createElement(StyledCardActionWrapper, {
+  }, showHeader && /*#__PURE__*/React.createElement(StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledCardContentWrapper, {
+    "data-actions": showActions
+  }, children), showActions && /*#__PURE__*/React.createElement(StyledCardActionWrapper, {
     "data-align": actionsAlignment
   }, /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction && /*#__PURE__*/React.createElement(Button, {
     onClick: secondaryAction.action

package/es/@next/Card/CardStyle.js

@@ -22,11 +22,11 @@ export var StyledCardHeaderSectionHalf = styled.div.withConfig({
 export var StyledCardContentWrapper = styled.div.withConfig({
   displayName: "CardStyle__StyledCardContentWrapper",
   componentId: "sc-tpku8j-4"
-})(["padding-left:", ";"], space4);
+})(["padding-bottom:", ";@media (max-width:", "){padding-bottom:0px;}&[data-actions='true']{padding-bottom:0px;}"], space4, Breakpoints.large);
 export var StyledCardSection = styled.div.withConfig({
   displayName: "CardStyle__StyledCardSection",
   componentId: "sc-tpku8j-5"
-})(["padding:", " 20px;.section + .section{border-top:solid 1px ", ";}@media (max-width:", "){padding:", " ", ";}"], space16, Neutral.B85, Breakpoints.large, space16, space12);
+})(["padding:20px ", ";.section{padding:", " ", ";&:last-child{padding-bottom:0;}}.section + .section{border-top:solid 1px ", ";}@media (max-width:", "){padding:", " ", ";.section{padding:", " ", ";}}"], space24, space16, space24, Neutral.B85, Breakpoints.large, space12, space16, space12, space16);
 export var StyledCardActionWrapper = styled.div.withConfig({
   displayName: "CardStyle__StyledCardActionWrapper",
   componentId: "sc-tpku8j-6"

package/es/@next/InlineError/InlineErrorStyle.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledText: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../Typography").TypographyProps) => JSX.Element, any, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("..").TypographyProps) => JSX.Element, any, {}, never>;

package/es/@next/InlineError/InlineErrorStyle.js

@@ -2,10 +2,11 @@ import styled from 'styled-components';
 import { space4 } from '../utilities/spacing';
 import { Typography } from '../Typography';
 import { Red } from '../utilities/colors';
+import { Breakpoints } from '..';
 export var StyledWrapper = styled.div.withConfig({
   displayName: "InlineErrorStyle__StyledWrapper",
   componentId: "sc-gvg32i-0"
-})(["display:flex;align-items:center;gap:", ";"], space4);
+})(["display:flex;align-items:flex-start;gap:", ";svg{flex-shrink:0;}@media (max-width:", "){svg{height:18px;width:18px;}}"], space4, Breakpoints.large);
 export var StyledText = styled(Typography).withConfig({
   displayName: "InlineErrorStyle__StyledText",
   componentId: "sc-gvg32i-1"

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

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

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import nextId from 'react-id-generator';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { ListContainer, StyledMenu, TitleContainer } from './MenuStyle';
+export var Menu = function Menu(_ref) {
+  var id = _ref.id,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    selectedValues = _ref.selectedValues,
+    title = _ref.title;
+  var randomId = nextId('glints-menu');
+  var menuId = id ? id : randomId;
+  var handleClick = function handleClick(value) {
+    onChange([value]);
+  };
+  return /*#__PURE__*/React.createElement(StyledMenu, {
+    id: menuId
+  }, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: Neutral.B40
+  }, title)), options.map(function (option) {
+    var value = option.value,
+      label = option.label,
+      disabled = option.disabled,
+      id = option.id;
+    var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
+    return /*#__PURE__*/React.createElement(ListContainer, {
+      key: id
+    }, /*#__PURE__*/React.createElement("li", {
+      key: id,
+      "aria-disabled": disabled,
+      "data-active": isSelected,
+      value: value,
+      onClick: function onClick() {
+        return handleClick(value);
+      }
+    }, /*#__PURE__*/React.createElement(Typography, {
+      as: "span",
+      variant: "body1",
+      color: Neutral.B18
+    }, label)));
+  }));
+};

package/es/@next/Menu/Menu.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 Basic: any;

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

@@ -0,0 +1,4 @@
+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>;

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

@@ -0,0 +1,16 @@
+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;margin:", " 0;padding:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";&: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;}}}"], space8, space8, space4, Neutral.B99, borderRadius4, Blue.S54, space4, Neutral.B85, Blue.S08, borderRadius4, space8, Blue.S99);
+export var TitleContainer = styled.div.withConfig({
+  displayName: "MenuStyle__TitleContainer",
+  componentId: "sc-zm0l1a-1"
+})(["padding:", " ", ";span{text-transform:uppercase;}"], space8, space16);
+export var ListContainer = styled.div.withConfig({
+  displayName: "MenuStyle__ListContainer",
+  componentId: "sc-zm0l1a-2"
+})(["padding:0 ", ";"], space8);

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentAction } from '../../types/componentAction';
-export declare type ModalProps = {
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     isOpen?: boolean;
     header?: string;
     headerDescription?: string;
@@ -19,5 +19,5 @@ export declare type ModalProps = {
     closeOnClickOutside?: boolean;
     onClose?: () => void;
     onBack?: () => void;
-};
+}
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack"];
 import React from 'react';
 import { Button, PrimaryButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
@@ -20,7 +23,8 @@ export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
     showHeaderBorder = _ref$showHeaderBorder === void 0 ? true : _ref$showHeaderBorder,
     closeOnClickOutside = _ref.closeOnClickOutside,
     onClose = _ref.onClose,
-    onBack = _ref.onBack;
+    onBack = _ref.onBack,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (!isOpen) {
     return null;
   }
@@ -49,12 +53,12 @@ export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
     onClick: function onClick() {
       return handleClickOutside();
     }
-  }, /*#__PURE__*/React.createElement(StyledModalContainer, {
+  }, /*#__PURE__*/React.createElement(StyledModalContainer, _extends({
     ref: ref,
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, header && /*#__PURE__*/React.createElement(StyledModalHeader, {
+  }, props), header && /*#__PURE__*/React.createElement(StyledModalHeader, {
     "data-show-border": showHeaderBorder
   }, showBackButton && /*#__PURE__*/React.createElement(StyledButtonContainer, null, /*#__PURE__*/React.createElement(StyledModalBackButton, {
     "data-testid": "modal-back-btn",

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

@@ -19,6 +19,7 @@ export { EmptyState } from './EmptyState';
 export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Link, LinkProps } from './Link';
+export { Menu, MenuProps } from './Menu';
 export { Modal, ModalContext, ModalProps, ModalProvider, useModal, } from './Modal';
 export { NumberInput, NumberInputProps } from './NumberInput';
 export { Pagination, PaginationProps, SimplePagination } from './Pagination';

package/es/@next/index.js

@@ -20,6 +20,7 @@ export { EmptyState } from './EmptyState';
 export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState } from './IndexTable';
 export { Link, LinkProps } from './Link';
+export { Menu, MenuProps } from './Menu';
 export { Modal, ModalContext, ModalProps, ModalProvider, useModal } from './Modal';
 export { NumberInput, NumberInputProps } from './NumberInput';
 export { Pagination, PaginationProps, SimplePagination } from './Pagination';

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

@@ -39,7 +39,7 @@ var Banner = /*#__PURE__*/_react["default"].forwardRef(function Banner(_ref, ref
     "data-status": status
   }, props), /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerTitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     name: iconNameValue
-  }), /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerContentContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+  }), title && /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerTitle, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
     variant: "subtitle1"
   }, title)), dismissable && /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledCloseIconWrapper, {

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

@@ -2,3 +2,4 @@ export declare const StyledCloseIconWrapper: import("styled-components").StyledC
 export declare const StyledBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBannerContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBannerTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBannerTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -2,11 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledCloseIconWrapper = exports.StyledBannerTitleContainer = exports.StyledBannerContentContainer = exports.StyledBanner = void 0;
+exports.StyledCloseIconWrapper = exports.StyledBannerTitleContainer = exports.StyledBannerTitle = exports.StyledBannerContentContainer = exports.StyledBanner = 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 StyledCloseIconWrapper = _styledComponents["default"].div.withConfig({
@@ -28,4 +29,9 @@ var StyledBannerTitleContainer = _styledComponents["default"].div.withConfig({
   displayName: "BannerStyle__StyledBannerTitleContainer",
   componentId: "sc-1suv683-3"
 })(["position:relative;"]);
-exports.StyledBannerTitleContainer = StyledBannerTitleContainer;
+exports.StyledBannerTitleContainer = StyledBannerTitleContainer;
+var StyledBannerTitle = _styledComponents["default"].div.withConfig({
+  displayName: "BannerStyle__StyledBannerTitle",
+  componentId: "sc-1suv683-4"
+})(["margin-bottom:", ";padding-left:40px;button{margin-top:10px;}"], _spacing.space4);
+exports.StyledBannerTitle = StyledBannerTitle;

package/lib/@next/Card/Card.js

@@ -38,7 +38,9 @@ var CardComponent = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref
   var showActions = !!primaryAction || !!secondaryAction;
   return /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContainer, {
     ref: ref
-  }, showHeader && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContentWrapper, null, children), showActions && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardActionWrapper, {
+  }, showHeader && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardContentWrapper, {
+    "data-actions": showActions
+  }, children), showActions && /*#__PURE__*/_react["default"].createElement(_CardStyle.StyledCardActionWrapper, {
     "data-align": actionsAlignment
   }, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: secondaryAction.action

package/lib/@next/Card/CardStyle.js

@@ -33,12 +33,12 @@ exports.StyledCardHeaderSectionHalf = StyledCardHeaderSectionHalf;
 var StyledCardContentWrapper = _styledComponents["default"].div.withConfig({
   displayName: "CardStyle__StyledCardContentWrapper",
   componentId: "sc-tpku8j-4"
-})(["padding-left:", ";"], _spacing.space4);
+})(["padding-bottom:", ";@media (max-width:", "){padding-bottom:0px;}&[data-actions='true']{padding-bottom:0px;}"], _spacing.space4, Breakpoints.large);
 exports.StyledCardContentWrapper = StyledCardContentWrapper;
 var StyledCardSection = _styledComponents["default"].div.withConfig({
   displayName: "CardStyle__StyledCardSection",
   componentId: "sc-tpku8j-5"
-})(["padding:", " 20px;.section + .section{border-top:solid 1px ", ";}@media (max-width:", "){padding:", " ", ";}"], _spacing.space16, _colors.Neutral.B85, Breakpoints.large, _spacing.space16, _spacing.space12);
+})(["padding:20px ", ";.section{padding:", " ", ";&:last-child{padding-bottom:0;}}.section + .section{border-top:solid 1px ", ";}@media (max-width:", "){padding:", " ", ";.section{padding:", " ", ";}}"], _spacing.space24, _spacing.space16, _spacing.space24, _colors.Neutral.B85, Breakpoints.large, _spacing.space12, _spacing.space16, _spacing.space12, _spacing.space16);
 exports.StyledCardSection = StyledCardSection;
 var StyledCardActionWrapper = _styledComponents["default"].div.withConfig({
   displayName: "CardStyle__StyledCardActionWrapper",

package/lib/@next/InlineError/InlineErrorStyle.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledText: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../Typography").TypographyProps) => JSX.Element, any, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("..").TypographyProps) => JSX.Element, any, {}, never>;

package/lib/@next/InlineError/InlineErrorStyle.js

@@ -7,10 +7,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _spacing = require("../utilities/spacing");
 var _Typography = require("../Typography");
 var _colors = require("../utilities/colors");
+var _ = require("..");
 var StyledWrapper = _styledComponents["default"].div.withConfig({
   displayName: "InlineErrorStyle__StyledWrapper",
   componentId: "sc-gvg32i-0"
-})(["display:flex;align-items:center;gap:", ";"], _spacing.space4);
+})(["display:flex;align-items:flex-start;gap:", ";svg{flex-shrink:0;}@media (max-width:", "){svg{height:18px;width:18px;}}"], _spacing.space4, _.Breakpoints.large);
 exports.StyledWrapper = StyledWrapper;
 var StyledText = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "InlineErrorStyle__StyledText",

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

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

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Menu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIdGenerator = _interopRequireDefault(require("react-id-generator"));
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var _MenuStyle = require("./MenuStyle");
+var Menu = function Menu(_ref) {
+  var id = _ref.id,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    selectedValues = _ref.selectedValues,
+    title = _ref.title;
+  var randomId = (0, _reactIdGenerator["default"])('glints-menu');
+  var menuId = id ? id : randomId;
+  var handleClick = function handleClick(value) {
+    onChange([value]);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, {
+    id: menuId
+  }, /*#__PURE__*/_react["default"].createElement(_MenuStyle.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: _colors.Neutral.B40
+  }, title)), options.map(function (option) {
+    var value = option.value,
+      label = option.label,
+      disabled = option.disabled,
+      id = option.id;
+    var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
+    return /*#__PURE__*/_react["default"].createElement(_MenuStyle.ListContainer, {
+      key: id
+    }, /*#__PURE__*/_react["default"].createElement("li", {
+      key: id,
+      "aria-disabled": disabled,
+      "data-active": isSelected,
+      value: value,
+      onClick: function onClick() {
+        return handleClick(value);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      as: "span",
+      variant: "body1",
+      color: _colors.Neutral.B18
+    }, label)));
+  }));
+};
+exports.Menu = Menu;

package/lib/@next/Menu/Menu.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 Basic: any;

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

@@ -0,0 +1,4 @@
+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>;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TitleContainer = exports.StyledMenu = exports.ListContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _borderRadius = require("../utilities/borderRadius");
+var _colors = require("../utilities/colors");
+var _spacing = require("../utilities/spacing");
+var StyledMenu = _styledComponents["default"].ul.withConfig({
+  displayName: "MenuStyle__StyledMenu",
+  componentId: "sc-zm0l1a-0"
+})(["list-style:none;margin:", " 0;padding:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";&: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;}}}"], _spacing.space8, _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99);
+exports.StyledMenu = StyledMenu;
+var TitleContainer = _styledComponents["default"].div.withConfig({
+  displayName: "MenuStyle__TitleContainer",
+  componentId: "sc-zm0l1a-1"
+})(["padding:", " ", ";span{text-transform:uppercase;}"], _spacing.space8, _spacing.space16);
+exports.TitleContainer = TitleContainer;
+var ListContainer = _styledComponents["default"].div.withConfig({
+  displayName: "MenuStyle__ListContainer",
+  componentId: "sc-zm0l1a-2"
+})(["padding:0 ", ";"], _spacing.space8);
+exports.ListContainer = ListContainer;

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentAction } from '../../types/componentAction';
-export declare type ModalProps = {
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     isOpen?: boolean;
     header?: string;
     headerDescription?: string;
@@ -19,5 +19,5 @@ export declare type ModalProps = {
     closeOnClickOutside?: boolean;
     onClose?: () => void;
     onBack?: () => void;
-};
+}
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -3,6 +3,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.Modal = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Button = require("../Button");
 var _ButtonGroup = require("../ButtonGroup");
@@ -10,6 +12,7 @@ var _Icon = require("../Icon");
 var _Portal = require("../Portal/Portal");
 var _Typography = require("../Typography");
 var _ModalStyle = require("./ModalStyle");
+var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack"];
 var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref) {
   var isOpen = _ref.isOpen,
     header = _ref.header,
@@ -25,7 +28,8 @@ var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref)
     showHeaderBorder = _ref$showHeaderBorder === void 0 ? true : _ref$showHeaderBorder,
     closeOnClickOutside = _ref.closeOnClickOutside,
     onClose = _ref.onClose,
-    onBack = _ref.onBack;
+    onBack = _ref.onBack,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   if (!isOpen) {
     return null;
   }
@@ -54,12 +58,12 @@ var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref)
     onClick: function onClick() {
       return handleClickOutside();
     }
-  }, /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalContainer, (0, _extends2["default"])({
     ref: ref,
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, header && /*#__PURE__*/_react["default"].createElement(_ModalStyle.StyledModalHeader, {
+  }, props), 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",

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

@@ -19,6 +19,7 @@ export { EmptyState } from './EmptyState';
 export { Icon, IconProps } from './Icon';
 export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Link, LinkProps } from './Link';
+export { Menu, MenuProps } from './Menu';
 export { Modal, ModalContext, ModalProps, ModalProvider, useModal, } from './Modal';
 export { NumberInput, NumberInputProps } from './NumberInput';
 export { Pagination, PaginationProps, SimplePagination } from './Pagination';

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = 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.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = 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.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = 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.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = 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"));
@@ -70,6 +70,9 @@ exports.useIndexResourceState = _IndexTable.useIndexResourceState;
 var _Link = require("./Link");
 exports.Link = _Link.Link;
 exports.LinkProps = _Link.LinkProps;
+var _Menu = require("./Menu");
+exports.Menu = _Menu.Menu;
+exports.MenuProps = _Menu.MenuProps;
 var _Modal = require("./Modal");
 exports.Modal = _Modal.Modal;
 exports.ModalContext = _Modal.ModalContext;

package/package.json

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