glints-aries 4.0.215 → 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/Combobox/Combobox.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ComboboxProps {
+    activator: React.ReactElement;
+    allowMultiple?: boolean;
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Combobox: {
+    ({ activator, allowMultiple, children, onClose, }: ComboboxProps): JSX.Element;
+    Label: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+    TextInput: ({ onChange, value, ...props }: import("./components/TextInput/TextInput").ComboboxTextInputProps) => JSX.Element;
+    OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: import("./components/OptionList/OptionList").OptionListProps) => JSX.Element;
+    Option: ({ label, value, selected }: import("./components/OptionList/Option").OptionProps) => JSX.Element;
+};

package/es/@next/Combobox/Combobox.js

@@ -0,0 +1,67 @@
+import React, { useCallback, useState } from 'react';
+import { Popover } from '../Popover';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { TextInput, OptionList, Option } from './components';
+import { ComboboxOptionContext } from './components/OptionList/OptionListContext';
+import { ComboboxTextInputContext } from './components/TextInput/TextInputContext';
+export var Combobox = function Combobox(_ref) {
+  var activator = _ref.activator,
+    _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    children = _ref.children,
+    onClose = _ref.onClose;
+  var _useState = useState(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState(),
+    textInputWidth = _useState2[0],
+    setTextInputWidth = _useState2[1];
+  var handleClose = useCallback(function () {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  var handleFocus = function handleFocus() {
+    setPopoverActive(true);
+  };
+  var handleBlur = function handleBlur() {
+    if (popoverActive) {
+      handleClose();
+    }
+  };
+  var textInputContextValue = {
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    textInputWidth: textInputWidth,
+    setTextInputWidth: setTextInputWidth
+  };
+  var optionContextValue = {
+    allowMultiple: allowMultiple
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    active: popoverActive,
+    activator: /*#__PURE__*/React.createElement(ComboboxTextInputContext.Provider, {
+      value: textInputContextValue
+    }, activator),
+    onClose: handleClose,
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement(ComboboxOptionContext.Provider, {
+    value: optionContextValue
+  }, /*#__PURE__*/React.createElement(ComboboxTextInputContext.Provider, {
+    value: textInputContextValue
+  }, children))));
+};
+var Label = function Label(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: Neutral.B18
+  }, children);
+};
+Combobox.Label = Label;
+Combobox.TextInput = TextInput;
+Combobox.OptionList = OptionList;
+Combobox.Option = Option;

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

package/es/@next/Combobox/comboboxStoryHelper/TagStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/es/@next/Combobox/comboboxStoryHelper/TagStyle.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Tag } from '../../Tag';
+import { space8 } from '../../utilities/spacing';
+export var StyledTag = styled(Tag).withConfig({
+  displayName: "TagStyle__StyledTag",
+  componentId: "sc-1k5uydi-0"
+})(["margin-right:", ";"], space8);

package/es/@next/Combobox/components/OptionList/Option.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type OptionType = {
+    label: string;
+    value: string;
+};
+export interface OptionProps extends OptionType {
+    selected?: boolean;
+}
+export interface NoOptionListProps {
+    noOptionsMessage?: React.ReactNode;
+}
+export declare const Option: ({ label, value, selected }: OptionProps) => JSX.Element;
+export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;

package/es/@next/Combobox/components/OptionList/Option.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Checkbox } from '../../../Checkbox';
+import { Typography } from '../../../Typography';
+import { Neutral } from '../../../utilities/colors';
+import { useOption, useOptionList } from './OptionListContext';
+import { EmptyOptionContainer } from './OptionListStyle';
+export var Option = function Option(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    selected = _ref.selected;
+  var optionContext = useOption();
+  var allowMultiple = optionContext.allowMultiple;
+  var optionListContext = useOptionList();
+  var onOptionSelect = optionListContext.onOptionSelect;
+  var handleOptionSelect = function handleOptionSelect(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onOptionSelect({
+      value: value
+    });
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    value: value,
+    onClick: handleOptionSelect,
+    "data-active": selected
+  }, allowMultiple ? /*#__PURE__*/React.createElement(Checkbox, {
+    label: label,
+    checked: selected
+  }) : label);
+};
+export var NoOptionList = function NoOptionList(_ref2) {
+  var _ref2$noOptionsMessag = _ref2.noOptionsMessage,
+    noOptionsMessage = _ref2$noOptionsMessag === void 0 ? 'No matching results' : _ref2$noOptionsMessag;
+  return /*#__PURE__*/React.createElement(EmptyOptionContainer, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body2",
+    color: Neutral.B40
+  }, noOptionsMessage));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NoOptionListProps } from './Option';
+export interface OptionListProps extends NoOptionListProps {
+    children: React.ReactNode;
+    isEmpty?: boolean;
+    onSelect?(value: string): void;
+}
+export declare const OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: OptionListProps) => JSX.Element;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useComboboxTextInput } from '../TextInput/TextInputContext';
+import { NoOptionList } from './Option';
+import { ComboboxOptionListContext } from './OptionListContext';
+import { OptionListContainer, StyledOptionList } from './OptionListStyle';
+export var OptionList = function OptionList(_ref) {
+  var children = _ref.children,
+    isEmpty = _ref.isEmpty,
+    noOptionsMessage = _ref.noOptionsMessage,
+    onSelect = _ref.onSelect;
+  var textInputContext = useComboboxTextInput();
+  var textInputWidth = textInputContext.textInputWidth;
+  var hasChildren = !isEmpty;
+  var onOptionSelect = function onOptionSelect(_ref2) {
+    var value = _ref2.value;
+    if (onSelect) onSelect(value);
+  };
+  var optionListContextValue = {
+    onOptionSelect: onOptionSelect
+  };
+  return /*#__PURE__*/React.createElement(OptionListContainer, {
+    textInputWidth: textInputWidth
+  }, /*#__PURE__*/React.createElement(StyledOptionList, null, /*#__PURE__*/React.createElement(ComboboxOptionListContext.Provider, {
+    value: optionListContextValue
+  }, hasChildren ? children : /*#__PURE__*/React.createElement(NoOptionList, {
+    noOptionsMessage: noOptionsMessage
+  }))));
+};

package/es/@next/Combobox/components/OptionList/OptionListContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type ComboboxOptionType = {
+    allowMultiple?: boolean;
+};
+export declare const ComboboxOptionContext: import("react").Context<ComboboxOptionType>;
+export declare const useOption: () => ComboboxOptionType;
+declare type ComboboxOptionListType = {
+    onOptionSelect({ value }: {
+        value: string;
+    }): void;
+    selectedOptions?: string[];
+};
+export declare const ComboboxOptionListContext: import("react").Context<ComboboxOptionListType>;
+export declare const useOptionList: () => ComboboxOptionListType;
+export {};

package/es/@next/Combobox/components/OptionList/OptionListContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+export var ComboboxOptionContext = /*#__PURE__*/createContext(undefined);
+export var useOption = function useOption() {
+  var context = useContext(ComboboxOptionContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionContext was provided. Your component must be wrapped in a <ComboboxOptionContext.Provider>');
+  }
+  return context;
+};
+export var ComboboxOptionListContext = /*#__PURE__*/createContext(undefined);
+export var useOptionList = function useOptionList() {
+  var context = useContext(ComboboxOptionListContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionListContext was provided. Your component must be wrapped in a <ComboboxOptionListContext.Provider>');
+  }
+  return context;
+};

package/es/@next/Combobox/components/OptionList/OptionListStyle.d.ts

@@ -0,0 +1,7 @@
+interface OptionListContainerProps {
+    textInputWidth?: number;
+}
+export declare const OptionListContainer: import("styled-components").StyledComponent<"div", any, OptionListContainerProps, never>;
+export declare const StyledOptionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const EmptyOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/es/@next/Combobox/components/OptionList/OptionListStyle.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../../../utilities/borderRadius';
+import { Neutral } from '../../../utilities/colors';
+import { space4, space8 } from '../../../utilities/spacing';
+export var OptionListContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__OptionListContainer",
+  componentId: "sc-19tus93-0"
+})(["width:", "px;padding:", " 0;"], function (props) {
+  return props.textInputWidth;
+}, space8);
+export var StyledOptionList = styled.ul.withConfig({
+  displayName: "OptionListStyle__StyledOptionList",
+  componentId: "sc-19tus93-1"
+})(["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;}&[data-active='true']{border-radius:", ";cursor:default;}svg{height:24px;width:24px;}}"], space8, space8, space4, Neutral.B99, borderRadius4, borderRadius4);
+export var EmptyOptionContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__EmptyOptionContainer",
+  componentId: "sc-19tus93-2"
+})(["display:flex;align-items:center;justify-content:center;margin:10px 0;"]);

package/es/@next/Combobox/components/OptionList/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionList } from './OptionList';
+export { Option } from './Option';

package/es/@next/Combobox/components/OptionList/index.js

@@ -0,0 +1,2 @@
+export { OptionList } from './OptionList';
+export { Option } from './Option';

package/es/@next/Combobox/components/TextInput/TextInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInputProps } from '../../../TextInput';
+export interface ComboboxTextInputProps extends Omit<TextInputProps, 'onChange'> {
+    onChange?(value: string): void;
+    textInputWidth?: number;
+    setTextInputWidth?: React.Dispatch<(prevState: undefined) => undefined>;
+}
+export declare const TextInput: ({ onChange, value, ...props }: ComboboxTextInputProps) => JSX.Element;

package/es/@next/Combobox/components/TextInput/TextInput.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onChange", "value"];
+import React, { useEffect, useRef } from 'react';
+import { Icon } from '../../../Icon';
+import { TextInput as GlintsTextInput } from '../../../TextInput';
+import { useComboboxTextInput } from './TextInputContext';
+export var TextInput = function TextInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var inputRef = useRef(null);
+  var textInputContext = useComboboxTextInput();
+  var onFocus = textInputContext.onFocus,
+    setTextInputWidth = textInputContext.setTextInputWidth;
+  useEffect(function () {
+    setTextInputWidth(inputRef.current.getBoundingClientRect().width);
+  }, [inputRef, setTextInputWidth]);
+  var handleChange = function handleChange(_ref2) {
+    var value = _ref2.value;
+    if (onChange) onChange(value);
+  };
+  return /*#__PURE__*/React.createElement(GlintsTextInput, _extends({}, props, {
+    ref: inputRef,
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      name: "ri-search"
+    }),
+    value: value,
+    onChange: function onChange(value) {
+      return handleChange({
+        value: value
+      });
+    },
+    onFocus: onFocus
+  }));
+};

package/es/@next/Combobox/components/TextInput/TextInputContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ComboboxTextInputProps } from './TextInput';
+export declare const ComboboxTextInputContext: import("react").Context<ComboboxTextInputProps>;
+export declare const useComboboxTextInput: () => ComboboxTextInputProps;

package/es/@next/Combobox/components/TextInput/TextInputContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export var ComboboxTextInputContext = /*#__PURE__*/createContext(undefined);
+export var useComboboxTextInput = function useComboboxTextInput() {
+  var context = useContext(ComboboxTextInputContext);
+  if (!context) {
+    throw new Error('No TextInputContext was provided. Your component must be wrapped in a <TextInputContext.Provider>');
+  }
+  return context;
+};

package/es/@next/Combobox/components/TextInput/index.d.ts

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/es/@next/Combobox/components/TextInput/index.js

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

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

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export * from './OptionList';

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

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export * from './OptionList';

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

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

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

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

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,10 +9,12 @@ 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';
 export { Checkbox, CheckboxProps } from './Checkbox';
+export { Combobox, ComboboxProps } from './Combobox';
 export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
 export { DataTable, DataTableProps, TableCellProps, TableHeaderProps, TableRowProps, } from './DataTable';
 export { Divider } from './Divider';

package/es/@next/index.js

@@ -10,10 +10,12 @@ 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';
 export { Checkbox, CheckboxProps } from './Checkbox';
+export { Combobox, ComboboxProps } from './Combobox';
 export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
 export { DataTable, DataTableProps, TableCellProps, TableHeaderProps, TableRowProps } from './DataTable';
 export { Divider } from './Divider';