glints-aries 4.1.3 → 4.1.5

package/lib/@next/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CurrencyInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Input = require("../Input/Input");
+var _excluded = ["locale", "value", "allowEmptyValue", "onChange", "currencyCode", "currencySymbol"];
+var CurrencyInput = /*#__PURE__*/_react["default"].forwardRef(function CurrencyInput(_ref, ref) {
+  var _formatter$format;
+  var _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+    value = _ref.value,
+    _ref$allowEmptyValue = _ref.allowEmptyValue,
+    allowEmptyValue = _ref$allowEmptyValue === void 0 ? false : _ref$allowEmptyValue,
+    onChange = _ref.onChange,
+    currencyCode = _ref.currencyCode,
+    currencySymbol = _ref.currencySymbol,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  var supportedLocale = Intl.ListFormat.supportedLocalesOf(locale);
+  var localeValue = supportedLocale.length > 0 ? supportedLocale[0] : 'en';
+  if (supportedLocale.length === 0) {
+    console.warn("Locale value of " + locale + " is unsupported, \"en\" will be used");
+  }
+  var formatter = new Intl.NumberFormat(localeValue);
+  var getRawNumber = function getRawNumber(value) {
+    if (typeof value === 'number') {
+      return value;
+    }
+    var parts = formatter.formatToParts(1000.1);
+    var thousandSeparator = parts[1].value;
+    var decimalSeparator = parts[3].value;
+    var cleanedValue = parseFloat(value.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
+    return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
+  };
+  var getCurrencySymbol = function getCurrencySymbol(locale, currencyCode, currencySymbol) {
+    if (currencySymbol) {
+      return currencySymbol;
+    }
+    try {
+      var _parts$find;
+      var _formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode
+      });
+      var parts = _formatter.formatToParts(0);
+      var returnedCurrencySymbol = (_parts$find = parts.find(function (part) {
+        return part.type === 'currency';
+      })) == null ? void 0 : _parts$find.value;
+      return returnedCurrencySymbol;
+    } catch (e) {
+      console.warn("Currency code of " + currencyCode + " is unsupported, \"$\" will be used");
+    }
+    return '$';
+  };
+  var formattedValue = allowEmptyValue && value === null ? null : (_formatter$format = formatter.format(getRawNumber((value != null ? value : 0).toString()))) != null ? _formatter$format : '';
+  var handleChange = function handleChange(e) {
+    if (allowEmptyValue && e.currentTarget.value === '') {
+      onChange(null);
+      return;
+    }
+    var rawValue = getRawNumber(e.currentTarget.value);
+    onChange(rawValue);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Input.Input, (0, _extends2["default"])({
+    ref: ref,
+    type: "text",
+    prefix: /*#__PURE__*/_react["default"].createElement("div", null, getCurrencySymbol(localeValue, currencyCode, currencySymbol))
+  }, props, {
+    value: formattedValue,
+    onChange: handleChange
+  }));
+});
+exports.CurrencyInput = CurrencyInput;

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

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

package/lib/@next/CurrencyInput/CurrencyInput.test.d.ts

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { EmptyStateProps } from '../EmptyState';
+export declare type SortDirection = 'ASCENDING' | 'DESCENDING';
+export declare type TableHeading = Omit<React.ThHTMLAttributes<HTMLTableColElement>, 'title'> & {
+    title?: React.ReactNode;
+    id?: string;
+    defaultSortDirection?: SortDirection;
+};
+export declare type Total = TableHeading | null;
+export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** If the title in TableHeading is of type ReactNode and you require sorting functionality, please make sure to provide 'id' for the TableHeading */
+    headings: TableHeading[];
+    children: React.ReactNode;
+    emptyState?: React.ReactElement<EmptyStateProps>;
+    totals?: Total[];
+    loading?: boolean;
+    loadingLabel?: string;
+    onSortChanged?: (context: string, sortDirection: SortDirection) => void;
+}
+export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
+    Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
+    Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
+    Footer: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+};

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.DataTable = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Spinner = require("../Spinner");
+var _Typography = require("../Typography");
+var _DataTableStyle = require("./DataTableStyle");
+var _TableCell = require("./TableCell");
+var _TableFooter = require("./TableFooter");
+var _TableHeader = require("./TableHeader");
+var _TableRow = require("./TableRow");
+var _excluded = ["headings", "totals", "onSortChanged", "children", "emptyState", "loading", "loadingLabel"];
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var DataTableComponent = /*#__PURE__*/_react["default"].forwardRef(function DataTable(_ref, ref) {
+  var headings = _ref.headings,
+    totals = _ref.totals,
+    onSortChanged = _ref.onSortChanged,
+    children = _ref.children,
+    emptyState = _ref.emptyState,
+    loading = _ref.loading,
+    _ref$loadingLabel = _ref.loadingLabel,
+    loadingLabel = _ref$loadingLabel === void 0 ? 'loading' : _ref$loadingLabel,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var handleSortChanged = function handleSortChanged(context, sortDirection) {
+    onSortChanged == null ? void 0 : onSortChanged(context, sortDirection);
+  };
+  var rowHeaderMarkup = headings.map(function (heading, index) {
+    var id = heading.id,
+      title = heading.title,
+      defaultSortDirection = heading.defaultSortDirection,
+      align = heading.align;
+    var key = "table-header-heading-" + title + "-" + index;
+    if (onSortChanged && typeof title !== 'string' && !id) console.warn("Warning: If the title in TableHeading is of type ReactNode and you require sorting functionality, please make sure to provide 'id' for the TableHeading.");
+    return /*#__PURE__*/_react["default"].createElement(_TableHeader.TableHeader, {
+      key: key,
+      title: title,
+      sortDirection: defaultSortDirection,
+      align: align,
+      onSort: function onSort(sortDirection) {
+        return handleSortChanged(id || title.toString(), sortDirection);
+      }
+    });
+  });
+  var totalsRowMarkup = totals ? totals.map(function (total, index) {
+    var _ref2 = total || {
+        title: ''
+      },
+      title = _ref2.title,
+      align = _ref2.align;
+    var key = total + "-" + index;
+    return /*#__PURE__*/_react["default"].createElement(_TableCell.TableCell, {
+      key: key,
+      align: align
+    }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      as: "div",
+      variant: "caption"
+    }, title));
+  }) : null;
+  var footer;
+  var rows = [];
+  for (var _iterator = _createForOfIteratorHelperLoose(_react["default"].Children.toArray(children)), _step; !(_step = _iterator()).done;) {
+    var child = _step.value;
+    var reactEl = child;
+    if (reactEl.type === _TableFooter.TableFooter) {
+      footer = reactEl.props.children;
+      continue;
+    }
+    rows.push(reactEl);
+  }
+  var emptyRow = emptyState ? /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, {
+    className: "empty-state"
+  }, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
+    colSpan: headings.length
+  }, emptyState)) : null;
+  var hasRows = rows.length > 0;
+  var rowsMarkup = hasRows ? rows : emptyRow;
+  var showFooter = !!footer;
+  var LoadingRow = function LoadingRow() {
+    return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableLoadingRow, {
+      className: "loader-container"
+    }, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledLoaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledSpinnerContainer, null, /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, null), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      variant: "subtitle1"
+    }, loadingLabel))));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledDataTableContainer, {
+    className: "data-table-container"
+  }, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTable, (0, _extends2["default"])({
+    ref: ref,
+    "data-loading": loading,
+    "data-has-footer": showFooter
+  }, props), /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, {
+    "data-header": true
+  }, 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)))));
+});
+var DataTable = Object.assign(DataTableComponent, {
+  Row: _TableRow.TableRow,
+  Cell: _TableCell.TableCell,
+  Footer: _TableFooter.TableFooter
+});
+exports.DataTable = DataTable;

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

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

package/lib/@next/DataTable/DataTableStyle.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const StyledTableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledTabledHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const StyledTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const StyledTableFooterRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledTableLoadingRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledLoaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSpinnerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDataTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 cellVerticalAlign = "\n  &[data-vertical-align='top'] {\n    vertical-align: top;\n  }\n\n  &[data-vertical-align='center'] {\n    vertical-align: center;\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;cursor:default;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 ", ";cursor:default;&:hover{background:", ";}&[data-header='true']{&:hover{background:", ";}}&.empty-state&:hover{background:none;}"], _colors.Neutral.B100, _colors.Neutral.B85, _colors.Blue.S08, _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;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:16px;height:16px;fill:", ";margin-bottom:2px;}"], _spacing.space16, alignmentStyle, _colors.Neutral.B99, _colors.Neutral.B40);
+exports.StyledTabledHeader = StyledTabledHeader;
+var StyledTableCell = _styledComponents["default"].td.withConfig({
+  displayName: "DataTableStyle__StyledTableCell",
+  componentId: "sc-18v2ula-3"
+})(["text-align:left;padding:", " ", ";", " ", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], _spacing.space8, _spacing.space16, alignmentStyle, cellVerticalAlign);
+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.B100, _borderRadius.borderRadius8, _borderRadius.borderRadius8, _spacing.space8, _spacing.space16);
+exports.StyledTableFooterRow = StyledTableFooterRow;
+var StyledTableLoadingRow = (0, _styledComponents["default"])(StyledTableRow).withConfig({
+  displayName: "DataTableStyle__StyledTableLoadingRow",
+  componentId: "sc-18v2ula-5"
+})(["position:absolute;width:100%;height:100%;display:none;z-index:-1;"]);
+exports.StyledTableLoadingRow = StyledTableLoadingRow;
+var StyledLoaderWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "DataTableStyle__StyledLoaderWrapper",
+  componentId: "sc-18v2ula-6"
+})(["height:100%;width:100%;position:relative;"]);
+exports.StyledLoaderWrapper = StyledLoaderWrapper;
+var StyledSpinnerContainer = _styledComponents["default"].div.withConfig({
+  displayName: "DataTableStyle__StyledSpinnerContainer",
+  componentId: "sc-18v2ula-7"
+})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:", ";svg{width:48px;height:48px;fill:", ";}"], _colors.Neutral.B18, _colors.Blue.S99);
+exports.StyledSpinnerContainer = StyledSpinnerContainer;
+var StyledDataTableContainer = _styledComponents["default"].div.withConfig({
+  displayName: "DataTableStyle__StyledDataTableContainer",
+  componentId: "sc-18v2ula-8"
+})(["overflow-x:auto;scroll-behavior:smooth;box-shadow:", ";"], DropShadow.card);
+exports.StyledDataTableContainer = StyledDataTableContainer;

package/lib/@next/DataTable/TableCell.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableColElement> {
+    children: React.ReactNode;
+    /** Sets table cell content to not wrap*/
+    noWrap?: boolean;
+    verticalAlign?: 'top' | 'center';
+}
+export declare const TableCell: ({ align, children, noWrap, verticalAlign, }: TableCellProps) => JSX.Element;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableCell = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../Typography");
+var _DataTableStyle = require("./DataTableStyle");
+var TableCell = function TableCell(_ref) {
+  var align = _ref.align,
+    children = _ref.children,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$verticalAlign = _ref.verticalAlign,
+    verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign;
+  return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
+    "data-text-align": align,
+    "data-no-wrap": noWrap,
+    "data-vertical-align": verticalAlign
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "subtitle2"
+  }, children));
+};
+exports.TableCell = TableCell;

package/lib/@next/DataTable/TableFooter.d.ts

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

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableFooter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var TableFooter = function TableFooter(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+};
+exports.TableFooter = TableFooter;

package/lib/@next/DataTable/TableHeader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SortDirection } from './DataTable';
+export interface TableHeaderProps extends Omit<React.ThHTMLAttributes<HTMLTableColElement>, 'title'> {
+    title: React.ReactNode;
+    sortDirection?: SortDirection;
+    onSort?: (sortDirection: SortDirection) => void;
+}
+export declare const TableHeader: ({ sortDirection: sortDirectionProp, title, align, onSort, }: TableHeaderProps) => JSX.Element;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TableHeader = void 0;
+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; }
+var TableHeader = function TableHeader(_ref) {
+  var sortDirectionProp = _ref.sortDirection,
+    title = _ref.title,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    onSort = _ref.onSort;
+  var _useState = (0, _react.useState)(null),
+    sortDirection = _useState[0],
+    setSortDirection = _useState[1];
+  (0, _react.useEffect)(function () {
+    setSortDirection(sortDirectionProp);
+  }, [sortDirectionProp]);
+  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
+  var iconMarkup = sortDirection ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    className: "data-table-sort-button-icon",
+    name: iconName,
+    height: "10px",
+    fill: _colors.Neutral.B40
+  }) : null;
+  var titleMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "caption",
+    color: _colors.Neutral.B18,
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, title);
+  var handleSortableClick = function handleSortableClick() {
+    if (!sortDirection) {
+      return;
+    }
+    var direction = sortDirection === 'ASCENDING' ? 'DESCENDING' : 'ASCENDING';
+    setSortDirection(direction);
+    onSort == null ? void 0 : onSort(direction);
+  };
+  var sortableCellMarkup = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    className: "data-table-sort-button",
+    "data-testid": "data-table-sort-button-" + title,
+    icon: iconMarkup,
+    onClick: function onClick() {
+      return handleSortableClick();
+    }
+  }, titleMarkup);
+  var contentMarkup = sortDirection ? sortableCellMarkup : titleMarkup;
+  return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTabledHeader, {
+    "data-text-align": align
+  }, /*#__PURE__*/_react["default"].createElement("div", null, contentMarkup));
+};
+exports.TableHeader = TableHeader;

package/lib/@next/DataTable/TableRow.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TableRowProps extends React.HtmlHTMLAttributes<HTMLTableRowElement> {
+    position?: number;
+    children: React.ReactNode;
+}
+export declare const TableRow: ({ children, ...props }: TableRowProps) => JSX.Element;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableRow = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _DataTableStyle = require("./DataTableStyle");
+var _excluded = ["children"];
+var TableRow = function TableRow(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, (0, _extends2["default"])({
+    "data-testid": "data-table-row"
+  }, props), children);
+};
+exports.TableRow = TableRow;

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

@@ -0,0 +1,4 @@
+export * from './DataTable';
+export * from './TableRow';
+export * from './TableCell';
+export * from './TableHeader';

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

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+var _DataTable = require("./DataTable");
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  exports[key] = _DataTable[key];
+});
+var _TableRow = require("./TableRow");
+Object.keys(_TableRow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableRow[key]) return;
+  exports[key] = _TableRow[key];
+});
+var _TableCell = require("./TableCell");
+Object.keys(_TableCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableCell[key]) return;
+  exports[key] = _TableCell[key];
+});
+var _TableHeader = require("./TableHeader");
+Object.keys(_TableHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableHeader[key]) return;
+  exports[key] = _TableHeader[key];
+});

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare type DividerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Divider/Divider.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Divider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _DividerStyle = require("./DividerStyle");
+var Divider = /*#__PURE__*/_react["default"].forwardRef(function Divider(props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_DividerStyle.DividerStyle, (0, _extends2["default"])({
+    ref: ref
+  }, props));
+});
+exports.Divider = Divider;

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

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

package/lib/@next/Divider/DividerStyle.d.ts

@@ -0,0 +1,2 @@
+import { DividerProps } from './Divider';
+export declare const DividerStyle: import("styled-components").StyledComponent<"div", any, DividerProps, never>;

package/lib/@next/Divider/DividerStyle.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.DividerStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = require("../utilities/colors");
+var DividerStyle = _styledComponents["default"].div.withConfig({
+  displayName: "DividerStyle",
+  componentId: "sc-afs7ts-0"
+})(["margin:0;background-color:", ";width:100%;height:1px;"], _colors.Neutral.B85);
+exports.DividerStyle = DividerStyle;

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

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

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ImageName } from './assets/assets';
+import { ComponentAction } from '../../types/componentAction';
+declare type CommonProps = {
+    basicButtonAction?: ComponentAction;
+    primaryButtonAction?: ComponentAction;
+    description?: React.ReactNode;
+    fullWidth?: boolean;
+    helpText?: string;
+    title?: string;
+};
+export declare type EmptyStateProps = CommonProps & ({
+    /** will soon be @deprecated. Please use image prop instead */
+    imageName?: ImageName;
+} | {
+    /** Renders an image based on ImageName or a custom image */
+    image?: ImageName | React.ReactNode;
+});
+export declare const EmptyState: ({ basicButtonAction, primaryButtonAction, description, fullWidth, helpText, title, ...props }: EmptyStateProps) => JSX.Element;
+export {};