glints-aries 4.0.216 → 4.0.217

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ComponentAction } from '../../types/componentAction';
+export declare type BarProps = {
+    heading: React.ReactNode;
+    subheading?: React.ReactNode;
+    primaryAction: ComponentAction;
+    secondaryAction?: ComponentAction;
+    tertiaryAction?: ComponentAction;
+    position?: 'top' | 'bottom';
+};
+export declare const Bar: React.ForwardRefExoticComponent<BarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Breakpoints, Colors } from '..';
+import { Button, PrimaryButton } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { Typography } from '../Typography';
+import { StyledBarActionWrapper, StyledBar, StyledBarHeaderWrapper, StyledBarContainer } from './BarStyle';
+import { useWindowSize } from './useWindowSize';
+export var Bar = /*#__PURE__*/React.forwardRef(function Bar(_ref, ref) {
+  var heading = _ref.heading,
+    subheading = _ref.subheading,
+    primaryAction = _ref.primaryAction,
+    secondaryAction = _ref.secondaryAction,
+    tertiaryAction = _ref.tertiaryAction,
+    position = _ref.position;
+  var headerMarkup = function headerMarkup() {
+    if (subheading) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+        as: "div",
+        variant: "body2",
+        color: Colors.Neutral.B18
+      }, heading), /*#__PURE__*/React.createElement(Typography, {
+        as: "div",
+        variant: "subtitle2",
+        color: Colors.Neutral.B40
+      }, subheading));
+    }
+    return /*#__PURE__*/React.createElement(Typography, {
+      as: "div",
+      variant: "headline6",
+      color: Colors.Neutral.B18
+    }, heading);
+  };
+  var _useWindowSize = useWindowSize(),
+    width = _useWindowSize.width;
+  var breakpointWidth = parseInt(Breakpoints.large.slice(0, -2));
+  var buttonSize = width <= breakpointWidth ? 'default' : 'large';
+  return /*#__PURE__*/React.createElement(StyledBar, {
+    "data-align": position,
+    ref: ref
+  }, /*#__PURE__*/React.createElement(StyledBarContainer, null, /*#__PURE__*/React.createElement(StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/React.createElement(StyledBarActionWrapper, null, /*#__PURE__*/React.createElement(ButtonGroup, null, tertiaryAction && /*#__PURE__*/React.createElement(Button, {
+    onClick: tertiaryAction.action,
+    size: buttonSize
+  }, tertiaryAction.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
+    onClick: secondaryAction.action,
+    size: buttonSize
+  }, secondaryAction.label), /*#__PURE__*/React.createElement(PrimaryButton, {
+    onClick: primaryAction.action,
+    size: buttonSize
+  }, primaryAction.label)))));
+});

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

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

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

@@ -0,0 +1,5 @@
+export declare const StyledBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCustomHeadingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Neutral } from '../utilities/colors';
+import { space8 } from '../utilities/spacing';
+export var StyledBar = styled.div.withConfig({
+  displayName: "BarStyle__StyledBar",
+  componentId: "sc-1m51mld-0"
+})(["display:flex;flex-direction:row;padding:20px 0;width:100%;position:absolute;height:90px;@media (max-width:", "){height:70px;}&[data-align='bottom']{bottom:0;}&[data-align='top']{top:0;}box-shadow:0px 0px 0px 1px rgba(63,63,68,0.05),0px 1px 3px rgba(63,63,68,0.15);background:", ";"], Breakpoints.large, Neutral.B100);
+export var StyledBarHeaderWrapper = styled.div.withConfig({
+  displayName: "BarStyle__StyledBarHeaderWrapper",
+  componentId: "sc-1m51mld-1"
+})(["display:flex;flex-grow:1;flex-direction:column;"]);
+export var StyledBarActionWrapper = styled.div.withConfig({
+  displayName: "BarStyle__StyledBarActionWrapper",
+  componentId: "sc-1m51mld-2"
+})(["display:flex;flex-direction:column-reverse;align-items:flex-end;"]);
+export var StyledBarContainer = styled.div.withConfig({
+  displayName: "BarStyle__StyledBarContainer",
+  componentId: "sc-1m51mld-3"
+})(["position:relative;margin:0 auto;padding:0 50px;width:100%;*,*:before,*:after{box-sizing:border-box;}justify-content:space-between;align-items:center;flex-direction:row;display:flex;@media (max-width:", "){gap:16px;padding:0 24px;}"], Breakpoints.large);
+export var StyledCustomHeadingWrapper = styled.div.withConfig({
+  displayName: "BarStyle__StyledCustomHeadingWrapper",
+  componentId: "sc-1m51mld-4"
+})(["display:flex;flex-direction:row;gap:", ";"], space8);

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const useWindowSize: () => {
+    width: any;
+    height: any;
+};

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

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+
+// Hook
+export var useWindowSize = function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  var _useState = useState({
+      width: undefined,
+      height: undefined
+    }),
+    windowSize = _useState[0],
+    setWindowSize = _useState[1];
+  useEffect(function () {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+};
+
+// Taken from https://usehooks.com/useWindowSize/

package/es/@next/DataTable/DataTable.js

@@ -84,9 +84,7 @@ var DataTableComponent = /*#__PURE__*/React.forwardRef(function DataTable(_ref,
     ref: ref,
     "data-loading": loading,
     "data-has-footer": showFooter
-  }, props), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(StyledTableRow, null, rowHeaderMarkup)), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(LoadingRow, null), totalsRowMarkup && hasRows && /*#__PURE__*/React.createElement(StyledTableRow, {
-    "data-total": "true"
-  }, totalsRowMarkup), rowsMarkup), showFooter && /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement(StyledTableFooterRow, null, /*#__PURE__*/React.createElement(StyledTableCell, {
+  }, props), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(StyledTableRow, null, rowHeaderMarkup)), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(LoadingRow, null), totalsRowMarkup && hasRows && /*#__PURE__*/React.createElement(StyledTableRow, null, totalsRowMarkup), rowsMarkup), showFooter && /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement(StyledTableFooterRow, null, /*#__PURE__*/React.createElement(StyledTableCell, {
     colSpan: headings.length
   }, footer)))));
 });

package/es/@next/DataTable/DataTableStyle.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import * as DropShadow from '../utilities/dropShadow';
 import { borderRadius8 } from '../utilities/borderRadius';
 import { Blue, Neutral } from '../utilities/colors';
 import { space16 } from '../utilities/spacing';
@@ -6,15 +7,15 @@ var alignmentStyle = "\n&[data-text-align='right'] {\n  > div {\n    display: fl
 export var StyledTable = styled.table.withConfig({
   displayName: "DataTableStyle__StyledTable",
   componentId: "sc-18v2ula-0"
-})(["width:100%;height:100%;border:1px solid ", ";border-spacing:0;color:", ";max-width:100vw;border-bottom:0;&[data-has-footer='true']{border-bottom:1px solid ", ";}&[data-loading='true']{tbody{position:relative;}.loader-container{display:block;z-index:1;}}"], Neutral.B85, Neutral.B18, Neutral.B85);
+})(["width:100%;height:100%;border:1px solid ", ";border-spacing:0;color:", ";max-width:100vw;border-bottom:0;thead tr{background:", ";}&[data-has-footer='true']{border-bottom:1px solid ", ";}&[data-loading='true']{tbody{position:relative;}.loader-container{display:block;z-index:1;}}"], Neutral.B85, Neutral.B18, Neutral.B99, Neutral.B85);
 export var StyledTableRow = styled.tr.withConfig({
   displayName: "DataTableStyle__StyledTableRow",
   componentId: "sc-18v2ula-1"
-})(["background:", ";box-shadow:inset 0px -1px 0px ", ";&:hover{background:", ";}&[data-total='true']{background:", ";}"], Neutral.B100, Neutral.B85, Neutral.B99, Neutral.B99);
+})(["background:", ";box-shadow:inset 0px -1px 0px ", ";&:hover{background:", ";}"], Neutral.B100, Neutral.B85, Neutral.B99);
 export var StyledTabledHeader = styled.th.withConfig({
   displayName: "DataTableStyle__StyledTabledHeader",
   componentId: "sc-18v2ula-2"
-})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], space16, alignmentStyle, Neutral.B40);
+})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], space16, alignmentStyle, Neutral.B99, Neutral.B40);
 export var StyledTableCell = styled.td.withConfig({
   displayName: "DataTableStyle__StyledTableCell",
   componentId: "sc-18v2ula-3"
@@ -22,7 +23,7 @@ export var StyledTableCell = styled.td.withConfig({
 export var StyledTableFooterRow = styled.tr.withConfig({
   displayName: "DataTableStyle__StyledTableFooterRow",
   componentId: "sc-18v2ula-4"
-})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", ";}"], Neutral.B99, borderRadius8, borderRadius8, space16);
+})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", ";}"], Neutral.B100, borderRadius8, borderRadius8, space16);
 export var StyledTableLoadingRow = styled(StyledTableRow).withConfig({
   displayName: "DataTableStyle__StyledTableLoadingRow",
   componentId: "sc-18v2ula-5"
@@ -38,4 +39,4 @@ export var StyledSpinnerContainer = styled.div.withConfig({
 export var StyledDataTableContainer = styled.div.withConfig({
   displayName: "DataTableStyle__StyledDataTableContainer",
   componentId: "sc-18v2ula-8"
-})(["overflow-x:auto;scroll-behavior:smooth;"]);
+})(["overflow-x:auto;scroll-behavior:smooth;box-shadow:", ";"], DropShadow.card);

package/es/@next/DataTable/TableHeader.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
 import { StyledTabledHeader } from './DataTableStyle';
 export var TableHeader = function TableHeader(_ref) {
   var sortDirectionProp = _ref.sortDirection,
@@ -21,7 +22,8 @@ export var TableHeader = function TableHeader(_ref) {
   }) : null;
   var titleMarkup = /*#__PURE__*/React.createElement(Typography, {
     as: "span",
-    variant: "body1",
+    variant: "body2",
+    color: Neutral.B18,
     style: {
       whiteSpace: 'nowrap'
     }

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

@@ -16,7 +16,7 @@ export var Menu = function Menu(_ref) {
   };
   return /*#__PURE__*/React.createElement(StyledMenu, {
     id: menuId
-  }, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Typography, {
+  }, title && /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "subtitle2",
     as: "span",
     color: Neutral.B40

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

@@ -9,6 +9,7 @@ export { Alert, AlertContext, AlertContextProps, AlertProps, AlertProvider, Aler
 export { Avatar, AvatarProps } from './Avatar';
 export { Badge, BadgeProps } from './Badge';
 export { Banner, BannerProps } from './Banner';
+export { Bar, BarProps } from './Bar';
 export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton, } from './Button';
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Card, CardProps } from './Card';

package/es/@next/index.js

@@ -10,6 +10,7 @@ export { Alert, AlertContext, AlertContextProps, AlertProps, AlertProvider, Aler
 export { Avatar, AvatarProps } from './Avatar';
 export { Badge, BadgeProps } from './Badge';
 export { Banner, BannerProps } from './Banner';
+export { Bar, BarProps } from './Bar';
 export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton } from './Button';
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Card, CardProps } from './Card';

package/es/@next/utilities/dropShadow/DropShadow.d.ts

@@ -5,7 +5,7 @@ export declare const deep = "0 0 0 1px rgba(6, 44, 82, 0.1),\n  0 2px 16px rgba(
 export declare const button = "0 1px 0 rgba(0, 0, 0, 0.05)";
 export declare const buttonFocused = "0px 0px 0px 2px rgba(106, 201, 236, 1)";
 export declare const topBar = "0 2px 2px -1px rgba(0, 0, 0, 0.15)";
-export declare const card = "0 0 5px rgba(23, 24, 24, 0.05), \n  0 1px 2px rgba(0, 0, 0, 0.15)";
+export declare const card = "0px 1px 2px 0px rgb(71 71 71 / 20%), 0px 0px 5px 0px rgb(71 71 71 / 10%)";
 export declare const popOver = "0 3px 6px -3px rgba(23, 24, 24, 0.08), \n  0 8px 20px -4px rgba(23, 24, 24, 0.12)";
 export declare const layer = "0 31px 41px 0 rgba(32, 42, 53, 0.2), \n  0 2px 16px 0 rgba(32, 42, 54, 0.08)";
 export declare const modal = "0 26px 80px rgba(0, 0, 0, 0.2), \n  0 0px 1px rgba(0, 0, 0, 0.2)";

package/es/@next/utilities/dropShadow/DropShadow.js

@@ -5,7 +5,7 @@ export var deep = "0 0 0 1px rgba(6, 44, 82, 0.1),\n  0 2px 16px rgba(33, 43, 54
 export var button = '0 1px 0 rgba(0, 0, 0, 0.05)';
 export var buttonFocused = '0px 0px 0px 2px rgba(106, 201, 236, 1)';
 export var topBar = '0 2px 2px -1px rgba(0, 0, 0, 0.15)';
-export var card = "0 0 5px rgba(23, 24, 24, 0.05), \n  0 1px 2px rgba(0, 0, 0, 0.15)";
+export var card = "0px 1px 2px 0px rgb(71 71 71 / 20%), 0px 0px 5px 0px rgb(71 71 71 / 10%)";
 export var popOver = "0 3px 6px -3px rgba(23, 24, 24, 0.08), \n  0 8px 20px -4px rgba(23, 24, 24, 0.12)";
 export var layer = "0 31px 41px 0 rgba(32, 42, 53, 0.2), \n  0 2px 16px 0 rgba(32, 42, 54, 0.08)";
 export var modal = "0 26px 80px rgba(0, 0, 0, 0.2), \n  0 0px 1px rgba(0, 0, 0, 0.2)";

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ComponentAction } from '../../types/componentAction';
+export declare type BarProps = {
+    heading: React.ReactNode;
+    subheading?: React.ReactNode;
+    primaryAction: ComponentAction;
+    secondaryAction?: ComponentAction;
+    tertiaryAction?: ComponentAction;
+    position?: 'top' | 'bottom';
+};
+export declare const Bar: React.ForwardRefExoticComponent<BarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Bar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("..");
+var _Button = require("../Button");
+var _ButtonGroup = require("../ButtonGroup");
+var _Typography = require("../Typography");
+var _BarStyle = require("./BarStyle");
+var _useWindowSize2 = require("./useWindowSize");
+var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
+  var heading = _ref.heading,
+    subheading = _ref.subheading,
+    primaryAction = _ref.primaryAction,
+    secondaryAction = _ref.secondaryAction,
+    tertiaryAction = _ref.tertiaryAction,
+    position = _ref.position;
+  var headerMarkup = function headerMarkup() {
+    if (subheading) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+        as: "div",
+        variant: "body2",
+        color: _.Colors.Neutral.B18
+      }, heading), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+        as: "div",
+        variant: "subtitle2",
+        color: _.Colors.Neutral.B40
+      }, subheading));
+    }
+    return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      as: "div",
+      variant: "headline6",
+      color: _.Colors.Neutral.B18
+    }, heading);
+  };
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+    width = _useWindowSize.width;
+  var breakpointWidth = parseInt(_.Breakpoints.large.slice(0, -2));
+  var buttonSize = width <= breakpointWidth ? 'default' : 'large';
+  return /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBar, {
+    "data-align": position,
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarContainer, null, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarActionWrapper, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, tertiaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: tertiaryAction.action,
+    size: buttonSize
+  }, tertiaryAction.label), secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: secondaryAction.action,
+    size: buttonSize
+  }, secondaryAction.label), /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, {
+    onClick: primaryAction.action,
+    size: buttonSize
+  }, primaryAction.label)))));
+});
+exports.Bar = Bar;

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

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

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

@@ -0,0 +1,5 @@
+export declare const StyledBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCustomHeadingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledCustomHeadingWrapper = exports.StyledBarHeaderWrapper = exports.StyledBarContainer = exports.StyledBarActionWrapper = exports.StyledBar = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+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 StyledBar = _styledComponents["default"].div.withConfig({
+  displayName: "BarStyle__StyledBar",
+  componentId: "sc-1m51mld-0"
+})(["display:flex;flex-direction:row;padding:20px 0;width:100%;position:absolute;height:90px;@media (max-width:", "){height:70px;}&[data-align='bottom']{bottom:0;}&[data-align='top']{top:0;}box-shadow:0px 0px 0px 1px rgba(63,63,68,0.05),0px 1px 3px rgba(63,63,68,0.15);background:", ";"], Breakpoints.large, _colors.Neutral.B100);
+exports.StyledBar = StyledBar;
+var StyledBarHeaderWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "BarStyle__StyledBarHeaderWrapper",
+  componentId: "sc-1m51mld-1"
+})(["display:flex;flex-grow:1;flex-direction:column;"]);
+exports.StyledBarHeaderWrapper = StyledBarHeaderWrapper;
+var StyledBarActionWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "BarStyle__StyledBarActionWrapper",
+  componentId: "sc-1m51mld-2"
+})(["display:flex;flex-direction:column-reverse;align-items:flex-end;"]);
+exports.StyledBarActionWrapper = StyledBarActionWrapper;
+var StyledBarContainer = _styledComponents["default"].div.withConfig({
+  displayName: "BarStyle__StyledBarContainer",
+  componentId: "sc-1m51mld-3"
+})(["position:relative;margin:0 auto;padding:0 50px;width:100%;*,*:before,*:after{box-sizing:border-box;}justify-content:space-between;align-items:center;flex-direction:row;display:flex;@media (max-width:", "){gap:16px;padding:0 24px;}"], Breakpoints.large);
+exports.StyledBarContainer = StyledBarContainer;
+var StyledCustomHeadingWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "BarStyle__StyledCustomHeadingWrapper",
+  componentId: "sc-1m51mld-4"
+})(["display:flex;flex-direction:row;gap:", ";"], _spacing.space8);
+exports.StyledCustomHeadingWrapper = StyledCustomHeadingWrapper;

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const useWindowSize: () => {
+    width: any;
+    height: any;
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useWindowSize = void 0;
+var _react = require("react");
+// Hook
+var useWindowSize = function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  var _useState = (0, _react.useState)({
+      width: undefined,
+      height: undefined
+    }),
+    windowSize = _useState[0],
+    setWindowSize = _useState[1];
+  (0, _react.useEffect)(function () {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+};
+
+// Taken from https://usehooks.com/useWindowSize/
+exports.useWindowSize = useWindowSize;

package/lib/@next/DataTable/DataTable.js

@@ -89,9 +89,7 @@ var DataTableComponent = /*#__PURE__*/_react["default"].forwardRef(function Data
     ref: ref,
     "data-loading": loading,
     "data-has-footer": showFooter
-  }, props), /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, null, rowHeaderMarkup)), /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement(LoadingRow, null), totalsRowMarkup && hasRows && /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, {
-    "data-total": "true"
-  }, totalsRowMarkup), rowsMarkup), showFooter && /*#__PURE__*/_react["default"].createElement("tfoot", null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableFooterRow, null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
+  }, props), /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, null, rowHeaderMarkup)), /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement(LoadingRow, null), totalsRowMarkup && hasRows && /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, null, totalsRowMarkup), rowsMarkup), showFooter && /*#__PURE__*/_react["default"].createElement("tfoot", null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableFooterRow, null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
     colSpan: headings.length
   }, footer)))));
 });

package/lib/@next/DataTable/DataTableStyle.js

@@ -4,24 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.StyledTabledHeader = exports.StyledTableRow = exports.StyledTableLoadingRow = exports.StyledTableFooterRow = exports.StyledTableCell = exports.StyledTable = exports.StyledSpinnerContainer = exports.StyledLoaderWrapper = exports.StyledDataTableContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var DropShadow = _interopRequireWildcard(require("../utilities/dropShadow"));
 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 alignmentStyle = "\n&[data-text-align='right'] {\n  > div {\n    display: flex;\n    justify-content: right;\n  }\n}\n\n&[data-text-align='center'] {\n  > div {\n    display: flex;\n    justify-content: center;\n  }\n}\n";
 var StyledTable = _styledComponents["default"].table.withConfig({
   displayName: "DataTableStyle__StyledTable",
   componentId: "sc-18v2ula-0"
-})(["width:100%;height:100%;border:1px solid ", ";border-spacing:0;color:", ";max-width:100vw;border-bottom:0;&[data-has-footer='true']{border-bottom:1px solid ", ";}&[data-loading='true']{tbody{position:relative;}.loader-container{display:block;z-index:1;}}"], _colors.Neutral.B85, _colors.Neutral.B18, _colors.Neutral.B85);
+})(["width:100%;height:100%;border:1px solid ", ";border-spacing:0;color:", ";max-width:100vw;border-bottom:0;thead tr{background:", ";}&[data-has-footer='true']{border-bottom:1px solid ", ";}&[data-loading='true']{tbody{position:relative;}.loader-container{display:block;z-index:1;}}"], _colors.Neutral.B85, _colors.Neutral.B18, _colors.Neutral.B99, _colors.Neutral.B85);
 exports.StyledTable = StyledTable;
 var StyledTableRow = _styledComponents["default"].tr.withConfig({
   displayName: "DataTableStyle__StyledTableRow",
   componentId: "sc-18v2ula-1"
-})(["background:", ";box-shadow:inset 0px -1px 0px ", ";&:hover{background:", ";}&[data-total='true']{background:", ";}"], _colors.Neutral.B100, _colors.Neutral.B85, _colors.Neutral.B99, _colors.Neutral.B99);
+})(["background:", ";box-shadow:inset 0px -1px 0px ", ";&:hover{background:", ";}"], _colors.Neutral.B100, _colors.Neutral.B85, _colors.Neutral.B99);
 exports.StyledTableRow = StyledTableRow;
 var StyledTabledHeader = _styledComponents["default"].th.withConfig({
   displayName: "DataTableStyle__StyledTabledHeader",
   componentId: "sc-18v2ula-2"
-})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], _spacing.space16, alignmentStyle, _colors.Neutral.B40);
+})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], _spacing.space16, alignmentStyle, _colors.Neutral.B99, _colors.Neutral.B40);
 exports.StyledTabledHeader = StyledTabledHeader;
 var StyledTableCell = _styledComponents["default"].td.withConfig({
   displayName: "DataTableStyle__StyledTableCell",
@@ -31,7 +34,7 @@ exports.StyledTableCell = StyledTableCell;
 var StyledTableFooterRow = _styledComponents["default"].tr.withConfig({
   displayName: "DataTableStyle__StyledTableFooterRow",
   componentId: "sc-18v2ula-4"
-})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", ";}"], _colors.Neutral.B99, _borderRadius.borderRadius8, _borderRadius.borderRadius8, _spacing.space16);
+})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", ";}"], _colors.Neutral.B100, _borderRadius.borderRadius8, _borderRadius.borderRadius8, _spacing.space16);
 exports.StyledTableFooterRow = StyledTableFooterRow;
 var StyledTableLoadingRow = (0, _styledComponents["default"])(StyledTableRow).withConfig({
   displayName: "DataTableStyle__StyledTableLoadingRow",
@@ -51,5 +54,5 @@ exports.StyledSpinnerContainer = StyledSpinnerContainer;
 var StyledDataTableContainer = _styledComponents["default"].div.withConfig({
   displayName: "DataTableStyle__StyledDataTableContainer",
   componentId: "sc-18v2ula-8"
-})(["overflow-x:auto;scroll-behavior:smooth;"]);
+})(["overflow-x:auto;scroll-behavior:smooth;box-shadow:", ";"], DropShadow.card);
 exports.StyledDataTableContainer = StyledDataTableContainer;

package/lib/@next/DataTable/TableHeader.js

@@ -6,6 +6,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
 var _DataTableStyle = require("./DataTableStyle");
 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; }
@@ -27,7 +28,8 @@ var TableHeader = function TableHeader(_ref) {
   }) : null;
   var titleMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
-    variant: "body1",
+    variant: "body2",
+    color: _colors.Neutral.B18,
     style: {
       whiteSpace: 'nowrap'
     }

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

@@ -21,7 +21,7 @@ var Menu = function Menu(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, {
     id: menuId
-  }, /*#__PURE__*/_react["default"].createElement(_MenuStyle.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+  }, title && /*#__PURE__*/_react["default"].createElement(_MenuStyle.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: "subtitle2",
     as: "span",
     color: _colors.Neutral.B40

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

@@ -9,6 +9,7 @@ export { Alert, AlertContext, AlertContextProps, AlertProps, AlertProvider, Aler
 export { Avatar, AvatarProps } from './Avatar';
 export { Badge, BadgeProps } from './Badge';
 export { Banner, BannerProps } from './Banner';
+export { Bar, BarProps } from './Bar';
 export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochromeButton, PrimaryButton, } from './Button';
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Card, CardProps } from './Card';

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.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.ComboboxProps = exports.Combobox = 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 = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = 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.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -36,6 +36,9 @@ exports.BadgeProps = _Badge.BadgeProps;
 var _Banner = require("./Banner");
 exports.Banner = _Banner.Banner;
 exports.BannerProps = _Banner.BannerProps;
+var _Bar = require("./Bar");
+exports.Bar = _Bar.Bar;
+exports.BarProps = _Bar.BarProps;
 var _Button = require("./Button");
 exports.Button = _Button.Button;
 exports.ButtonProps = _Button.ButtonProps;

package/lib/@next/utilities/dropShadow/DropShadow.d.ts

@@ -5,7 +5,7 @@ export declare const deep = "0 0 0 1px rgba(6, 44, 82, 0.1),\n  0 2px 16px rgba(
 export declare const button = "0 1px 0 rgba(0, 0, 0, 0.05)";
 export declare const buttonFocused = "0px 0px 0px 2px rgba(106, 201, 236, 1)";
 export declare const topBar = "0 2px 2px -1px rgba(0, 0, 0, 0.15)";
-export declare const card = "0 0 5px rgba(23, 24, 24, 0.05), \n  0 1px 2px rgba(0, 0, 0, 0.15)";
+export declare const card = "0px 1px 2px 0px rgb(71 71 71 / 20%), 0px 0px 5px 0px rgb(71 71 71 / 10%)";
 export declare const popOver = "0 3px 6px -3px rgba(23, 24, 24, 0.08), \n  0 8px 20px -4px rgba(23, 24, 24, 0.12)";
 export declare const layer = "0 31px 41px 0 rgba(32, 42, 53, 0.2), \n  0 2px 16px 0 rgba(32, 42, 54, 0.08)";
 export declare const modal = "0 26px 80px rgba(0, 0, 0, 0.2), \n  0 0px 1px rgba(0, 0, 0, 0.2)";

package/lib/@next/utilities/dropShadow/DropShadow.js

@@ -16,7 +16,7 @@ var buttonFocused = '0px 0px 0px 2px rgba(106, 201, 236, 1)';
 exports.buttonFocused = buttonFocused;
 var topBar = '0 2px 2px -1px rgba(0, 0, 0, 0.15)';
 exports.topBar = topBar;
-var card = "0 0 5px rgba(23, 24, 24, 0.05), \n  0 1px 2px rgba(0, 0, 0, 0.15)";
+var card = "0px 1px 2px 0px rgb(71 71 71 / 20%), 0px 0px 5px 0px rgb(71 71 71 / 10%)";
 exports.card = card;
 var popOver = "0 3px 6px -3px rgba(23, 24, 24, 0.08), \n  0 8px 20px -4px rgba(23, 24, 24, 0.12)";
 exports.popOver = popOver;

package/package.json

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