glints-aries 4.0.182 → 4.0.183

package/es/@next/Checkbox/Checkbox.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["label", "id", "checked", "onChange", "disabled", "indeterminate", "hasError", "helpText"];
+var _excluded = ["label", "id", "checked", "onChange", "disabled", "indeterminate", "hasError", "helpText", "isPadded"];
 import React, { useEffect, useRef, useState } from 'react';
-import { nanoid } from 'nanoid';
 import { StyledCheckbox, StyledCheckboxContainer, StyledColumn, StyledContainer, StyledLeftColumn, StyledRow } from './CheckboxStyle';
 import { noop } from 'lodash-es';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
+import nextId from 'react-id-generator';
 export var Checkbox = function Checkbox(_ref) {
   var label = _ref.label,
     id = _ref.id,
@@ -16,8 +16,10 @@ export var Checkbox = function Checkbox(_ref) {
     indeterminate = _ref.indeterminate,
     hasError = _ref.hasError,
     helpText = _ref.helpText,
+    _ref$isPadded = _ref.isPadded,
+    isPadded = _ref$isPadded === void 0 ? true : _ref$isPadded,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var randomId = nanoid();
+  var randomId = nextId('glints-checkbox');
   var checkBoxId = id ? id : randomId;
   var labelId = "label-" + checkBoxId;
   var inputNode = useRef(null);
@@ -42,7 +44,8 @@ export var Checkbox = function Checkbox(_ref) {
   };
   return /*#__PURE__*/React.createElement(StyledContainer, {
     "aria-disabled": disabled,
-    "data-error": hasError
+    "data-error": hasError,
+    "data-spacing": isPadded
   }, /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledLeftColumn, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, null, /*#__PURE__*/React.createElement(StyledCheckbox, {
     role: "checkbox",
     "aria-labelledby": labelId,
@@ -89,7 +92,7 @@ export var Checkbox = function Checkbox(_ref) {
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "div",
     variant: "body1"
-  }, label)))), /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledLeftColumn, null), /*#__PURE__*/React.createElement(StyledColumn, {
+  }, label)))), helpText && /*#__PURE__*/React.createElement(StyledRow, null, /*#__PURE__*/React.createElement(StyledLeftColumn, null), /*#__PURE__*/React.createElement(StyledColumn, {
     className: "help-text"
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "span",

package/es/@next/Checkbox/CheckboxStyle.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { Breakpoints } from '../..';
+import { Breakpoints } from '..';
 import { borderRadius4 } from '../utilities/borderRadius';
 import { Blue, Neutral, Red } from '../utilities/colors';
 import { space4 } from '../utilities/spacing';
 export var StyledContainer = styled.div.withConfig({
   displayName: "CheckboxStyle__StyledContainer",
   componentId: "sc-a9bf1h-0"
-})(["flex-direction:row;align-items:flex-start;padding:", " 0px;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;height:20px;width:20px;top:0;left:0;opacity:0;pointer-events:none;fill:", ";}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";}&[aria-disabled='true'] svg{background:", ";fill:", ";}&[data-error='true'] svg{fill:", ";}"], space4, Neutral.B18, Blue.S99, Neutral.B68, Neutral.B85, Neutral.B95, Neutral.B68, Neutral.B95, Red.B93);
+})(["flex-direction:row;align-items:flex-start;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;height:20px;width:20px;top:0;left:0;opacity:0;pointer-events:none;fill:", ";}&[data-spacing='true']{padding:", " 0px;}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";}&[aria-disabled='true'] svg{background:", ";fill:", ";}&[data-error='true'] svg{fill:", ";}"], Neutral.B18, Blue.S99, space4, Neutral.B68, Neutral.B85, Neutral.B95, Neutral.B68, Neutral.B95, Red.B93);
 export var StyledCheckboxContainer = styled.div.withConfig({
   displayName: "CheckboxStyle__StyledCheckboxContainer",
   componentId: "sc-a9bf1h-1"

package/es/@next/IndexTable/IndexTable.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
+  _excluded2 = ["checked", "onChange"];
+import React from 'react';
+import { Cell, IndexTable as PolarisIndexTable, IndexTableProps } from 'polaris-glints';
+import { Checkbox } from '../Checkbox';
+import { Row } from './components/Row/Row';
+var IndexTable = function IndexTable(_ref) {
+  var bulkActions = _ref.bulkActions,
+    children = _ref.children,
+    itemCount = _ref.itemCount,
+    selectedItemsCount = _ref.selectedItemsCount,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
+    var checked = _ref2.checked,
+      onChange = _ref2.onChange,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      onChange: onChange,
+      checked: checked,
+      isPadded: false
+    }, props));
+  };
+  return /*#__PURE__*/React.createElement(PolarisIndexTable, _extends({
+    bulkActions: bulkActions,
+    checkbox: renderCheckboxHeader,
+    itemCount: itemCount,
+    selectedItemsCount: selectedItemsCount
+  }, props), children);
+};
+IndexTable.Cell = Cell;
+IndexTable.Row = Row;
+export { useIndexResourceState } from 'polaris-glints';
+export { IndexTable, IndexTableProps };

package/es/@next/IndexTable/IndexTable.stories.js

@@ -0,0 +1,162 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { IndexTable, useIndexResourceState } from './IndexTable';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Typography } from '..';
+import 'polaris-glints/build/esm/styles.css';
+import { Icon } from '../Icon';
+import { PrimaryButton } from '../Button';
+import { StyledButton, StyledButtonGroup } from './indexTableStoryHelper/ButtonGroupStyle';
+import { Neutral } from '../utilities/colors';
+IndexTable.displayName = 'Table';
+export default {
+  title: '@next/IndexTable',
+  component: IndexTable,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseContainer, null, Story()), /*#__PURE__*/React.createElement("div", {
+      id: "glints-portal-container"
+    }));
+  }],
+  argTypes: {
+    disabled: {
+      control: 'boolean'
+    },
+    loading: {
+      control: 'boolean'
+    },
+    loadingLabel: {
+      control: 'text'
+    }
+  }
+};
+var candidates = [{
+  id: '1',
+  url: 'candidate/1',
+  name: 'Dwi Nugraha Putri',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}, {
+  id: '2',
+  url: 'candidate/2',
+  name: 'Ahmad Dani',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}, {
+  id: '3',
+  url: 'candidate/3',
+  name: 'Syed Ali',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}, {
+  id: '4',
+  url: 'candidate/4',
+  name: 'Muhammad Danial',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}];
+var resourceName = {
+  singular: 'candidate',
+  plural: 'candidates'
+};
+var Template = function Template(args) {
+  var _useIndexResourceStat = useIndexResourceState(candidates),
+    selectedResources = _useIndexResourceStat.selectedResources,
+    allResourcesSelected = _useIndexResourceStat.allResourcesSelected,
+    handleSelectionChange = _useIndexResourceStat.handleSelectionChange;
+  var promotedBulkActions = [{
+    content: 'Reject',
+    onAction: function onAction() {
+      return console.log('Reject');
+    }
+  }, {
+    title: 'Move to',
+    actions: [{
+      content: 'Assessment',
+      onAction: function onAction() {
+        return console.log('Assessment');
+      }
+    }, {
+      content: 'Interviewing',
+      onAction: function onAction() {
+        return console.log('Interviewing');
+      }
+    }, {
+      content: 'Offered',
+      onAction: function onAction() {
+        return console.log('Offered');
+      }
+    }, {
+      content: 'Hired',
+      onAction: function onAction() {
+        return console.log('Hired');
+      }
+    }]
+  }];
+  var rowMarkup = candidates.map(function (_ref, index) {
+    var id = _ref.id,
+      name = _ref.name,
+      location = _ref.location,
+      expectedSalary = _ref.expectedSalary,
+      yearsExperience = _ref.yearsExperience,
+      latestWorkExperience = _ref.latestWorkExperience,
+      latestWorkDuration = _ref.latestWorkDuration;
+    return /*#__PURE__*/React.createElement(IndexTable.Row, {
+      id: id,
+      key: id,
+      selected: selectedResources.includes(id),
+      position: index,
+      onClick: function onClick() {
+        return console.log("row clicked " + id);
+      }
+    }, /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(Icon, {
+      name: "ri-account-circle-fill",
+      height: 40,
+      fill: Neutral.B40
+    })), /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2"
+    }, name), /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1"
+    }, location)), /*#__PURE__*/React.createElement(IndexTable.Cell, null, expectedSalary), /*#__PURE__*/React.createElement(IndexTable.Cell, null, yearsExperience), /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1"
+    }, latestWorkExperience), /*#__PURE__*/React.createElement(Typography, {
+      variant: "caption"
+    }, latestWorkDuration)), /*#__PURE__*/React.createElement(IndexTable.Cell, null, /*#__PURE__*/React.createElement(StyledButtonGroup, null, /*#__PURE__*/React.createElement(StyledButton, null, "Reject"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Shortlist"))));
+  });
+  return /*#__PURE__*/React.createElement(IndexTable, _extends({}, args, {
+    resourceName: resourceName,
+    itemCount: candidates.length,
+    selectedItemsCount: allResourcesSelected ? 'All' : selectedResources.length,
+    onSelectionChange: handleSelectionChange,
+    promotedBulkActions: promotedBulkActions,
+    headings: [{
+      title: ''
+    }, {
+      title: 'Name & Location'
+    }, {
+      title: 'Expected Salary'
+    }, {
+      title: 'Years of Experience'
+    }, {
+      title: 'Latest Work Experience'
+    }, {
+      title: 'Actions'
+    }],
+    selectedLabel: "selected candidates"
+  }), rowMarkup);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  loadingLabel: 'Loading...'
+};

package/es/@next/IndexTable/components/Checkbox/Checkbox.js

@@ -0,0 +1,20 @@
+import { IndexTableRowContext } from 'polaris-glints';
+import React, { memo, useContext } from 'react';
+import { Checkbox as GlintsCheckbox } from '../../../Checkbox';
+import { CheckboxCellContentContainer, CheckboxWrapper } from './CheckboxStyle';
+var Checkbox = function Checkbox() {
+  var _useContext = useContext(IndexTableRowContext),
+    itemId = _useContext.itemId,
+    selected = _useContext.selected,
+    disabled = _useContext.disabled,
+    onInteraction = _useContext.onInteraction;
+  return /*#__PURE__*/React.createElement(CheckboxWrapper, null, /*#__PURE__*/React.createElement(CheckboxCellContentContainer, null, /*#__PURE__*/React.createElement("div", {
+    onClick: onInteraction
+  }, /*#__PURE__*/React.createElement(GlintsCheckbox, {
+    id: itemId,
+    checked: selected,
+    disabled: disabled,
+    isPadded: false
+  }))));
+};
+export var MemoizedCheckbox = /*#__PURE__*/memo(Checkbox);

package/es/@next/IndexTable/components/Checkbox/CheckboxStyle.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export var CheckboxWrapper = styled.div.withConfig({
+  displayName: "CheckboxStyle__CheckboxWrapper",
+  componentId: "sc-1utzl7w-0"
+})(["margin:0;position:relative;top:15%;"]);
+export var CheckboxCellContentContainer = styled.div.withConfig({
+  displayName: "CheckboxStyle__CheckboxCellContentContainer",
+  componentId: "sc-1utzl7w-1"
+})(["display:flex;align-items:center;"]);

package/es/@next/IndexTable/components/Checkbox/index.js

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

package/es/@next/IndexTable/components/Row/Row.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children"];
+import React from 'react';
+import { Row as PolarisRow } from 'polaris-glints';
+import { MemoizedCheckbox as Checkbox } from '../Checkbox';
+export var Row = function Row(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(PolarisRow, _extends({
+    checkbox: /*#__PURE__*/React.createElement(Checkbox, null)
+  }, props), children);
+};

package/es/@next/IndexTable/components/Row/index.js

@@ -0,0 +1,2 @@
+import * as _Row from './Row';
+export { _Row as Row };

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

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

package/es/@next/IndexTable/indexTableStoryHelper/ButtonGroupStyle.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Spacing } from '../..';
+import { Button } from '../../Button';
+export var StyledButtonGroup = styled.div.withConfig({
+  displayName: "ButtonGroupStyle__StyledButtonGroup",
+  componentId: "sc-1eqebqe-0"
+})(["display:flex;"]);
+export var StyledButton = styled(Button).withConfig({
+  displayName: "ButtonGroupStyle__StyledButton",
+  componentId: "sc-1eqebqe-1"
+})(["margin-right:", ";"], Spacing.space8);

package/es/@next/index.js

@@ -13,6 +13,7 @@ export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochrom
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Divider } from './Divider';
 export { Icon, IconProps } from './Icon';
+export { IndexTable, IndexTableProps, useIndexResourceState } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';

package/es/@next/utilities/spacing/Spacing.js

@@ -1,7 +1,9 @@
+export var space2 = '2px';
 export var space4 = '4px';
 export var space8 = '8px';
 export var space12 = '12px';
 export var space16 = '16px';
+export var space18 = '18px';
 export var space24 = '24px';
 export var space32 = '32px';
 export var space40 = '40px';

package/es/src/@next/Checkbox/Checkbox.d.ts

@@ -8,5 +8,6 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     disabled?: boolean;
     helpText?: string;
     onChange?(newChecked: boolean, id: string): void;
+    isPadded?: boolean;
 }
-export declare const Checkbox: ({ label, id, checked, onChange, disabled, indeterminate, hasError, helpText, ...otherProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ label, id, checked, onChange, disabled, indeterminate, hasError, helpText, isPadded, ...otherProps }: CheckboxProps) => JSX.Element;

package/es/src/@next/IndexTable/IndexTable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IndexTableProps } from 'polaris-glints';
+declare const IndexTable: {
+    ({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
+    Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
+    Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
+};
+export { useIndexResourceState } from 'polaris-glints';
+export { IndexTable, IndexTableProps };

package/es/src/@next/IndexTable/IndexTable.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import 'polaris-glints/build/esm/styles.css';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/src/@next/IndexTable/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MemoizedCheckbox: React.MemoExoticComponent<() => JSX.Element>;

package/es/src/@next/IndexTable/components/Checkbox/CheckboxStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const CheckboxWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CheckboxCellContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/src/@next/IndexTable/components/Checkbox/index.d.ts

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

package/es/src/@next/IndexTable/components/Row/Row.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RowProps } from 'polaris-glints';
+export declare const Row: ({ children, ...props }: RowProps) => JSX.Element;

package/es/src/@next/IndexTable/components/Row/index.d.ts

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

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

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

package/es/src/@next/IndexTable/indexTableStoryHelper/ButtonGroupStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("../..").ButtonProps) => JSX.Element, any, {}, never>;

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

@@ -12,6 +12,7 @@ export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochrom
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Divider } from './Divider';
 export { Icon, IconProps } from './Icon';
+export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';

package/es/src/@next/utilities/spacing/Spacing.d.ts

@@ -1,7 +1,9 @@
+export declare const space2 = "2px";
 export declare const space4 = "4px";
 export declare const space8 = "8px";
 export declare const space12 = "12px";
 export declare const space16 = "16px";
+export declare const space18 = "18px";
 export declare const space24 = "24px";
 export declare const space32 = "32px";
 export declare const space40 = "40px";

package/lib/@next/Checkbox/Checkbox.js

@@ -6,12 +6,12 @@ exports.Checkbox = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _nanoid = require("nanoid");
 var _CheckboxStyle = require("./CheckboxStyle");
 var _lodash = require("lodash");
 var _Icon = require("../Icon");
 var _Typography = require("../Typography");
-var _excluded = ["label", "id", "checked", "onChange", "disabled", "indeterminate", "hasError", "helpText"];
+var _reactIdGenerator = _interopRequireDefault(require("react-id-generator"));
+var _excluded = ["label", "id", "checked", "onChange", "disabled", "indeterminate", "hasError", "helpText", "isPadded"];
 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 Checkbox = function Checkbox(_ref) {
@@ -23,8 +23,10 @@ var Checkbox = function Checkbox(_ref) {
     indeterminate = _ref.indeterminate,
     hasError = _ref.hasError,
     helpText = _ref.helpText,
+    _ref$isPadded = _ref.isPadded,
+    isPadded = _ref$isPadded === void 0 ? true : _ref$isPadded,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  var randomId = (0, _nanoid.nanoid)();
+  var randomId = (0, _reactIdGenerator["default"])('glints-checkbox');
   var checkBoxId = id ? id : randomId;
   var labelId = "label-" + checkBoxId;
   var inputNode = (0, _react.useRef)(null);
@@ -49,7 +51,8 @@ var Checkbox = function Checkbox(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledContainer, {
     "aria-disabled": disabled,
-    "data-error": hasError
+    "data-error": hasError,
+    "data-spacing": isPadded
   }, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledLeftColumn, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledCheckboxContainer, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledCheckbox, {
     role: "checkbox",
     "aria-labelledby": labelId,
@@ -96,7 +99,7 @@ var Checkbox = function Checkbox(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
     variant: "body1"
-  }, label)))), /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledLeftColumn, null), /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledColumn, {
+  }, label)))), helpText && /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledRow, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledLeftColumn, null), /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledColumn, {
     className: "help-text"
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",

package/lib/@next/Checkbox/CheckboxStyle.js

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.StyledRow = exports.StyledLeftColumn = exports.StyledContainer = exports.StyledColumn = exports.StyledCheckboxContainer = exports.StyledCheckbox = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ = require("../..");
+var _ = require("..");
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
 var StyledContainer = _styledComponents["default"].div.withConfig({
   displayName: "CheckboxStyle__StyledContainer",
   componentId: "sc-a9bf1h-0"
-})(["flex-direction:row;align-items:flex-start;padding:", " 0px;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;height:20px;width:20px;top:0;left:0;opacity:0;pointer-events:none;fill:", ";}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";}&[aria-disabled='true'] svg{background:", ";fill:", ";}&[data-error='true'] svg{fill:", ";}"], _spacing.space4, _colors.Neutral.B18, _colors.Blue.S99, _colors.Neutral.B68, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B68, _colors.Neutral.B95, _colors.Red.B93);
+})(["flex-direction:row;align-items:flex-start;gap:8px;color:", ";label{cursor:pointer;margin-top:-1px;}svg{border-radius:4px;position:absolute;height:20px;width:20px;top:0;left:0;opacity:0;pointer-events:none;fill:", ";}&[data-spacing='true']{padding:", " 0px;}&[aria-disabled='true'],&[aria-disabled='true'] .help-text{color:", ";}&[aria-disabled='true'] div[role='checkbox']{border-color:", ";background:", ";}&[aria-disabled='true'] svg{background:", ";fill:", ";}&[data-error='true'] svg{fill:", ";}"], _colors.Neutral.B18, _colors.Blue.S99, _spacing.space4, _colors.Neutral.B68, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B68, _colors.Neutral.B95, _colors.Red.B93);
 exports.StyledContainer = StyledContainer;
 var StyledCheckboxContainer = _styledComponents["default"].div.withConfig({
   displayName: "CheckboxStyle__StyledCheckboxContainer",

package/lib/@next/IndexTable/IndexTable.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useIndexResourceState = exports.IndexTable = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _polarisGlints = require("polaris-glints");
+exports.IndexTableProps = _polarisGlints.IndexTableProps;
+exports.useIndexResourceState = _polarisGlints.useIndexResourceState;
+var _Checkbox = require("../Checkbox");
+var _Row = require("./components/Row/Row");
+var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
+  _excluded2 = ["checked", "onChange"];
+var IndexTable = function IndexTable(_ref) {
+  var bulkActions = _ref.bulkActions,
+    children = _ref.children,
+    itemCount = _ref.itemCount,
+    selectedItemsCount = _ref.selectedItemsCount,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var renderCheckboxHeader = function renderCheckboxHeader(_ref2) {
+    var checked = _ref2.checked,
+      onChange = _ref2.onChange,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
+    return /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, (0, _extends2["default"])({
+      onChange: onChange,
+      checked: checked,
+      isPadded: false
+    }, props));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_polarisGlints.IndexTable, (0, _extends2["default"])({
+    bulkActions: bulkActions,
+    checkbox: renderCheckboxHeader,
+    itemCount: itemCount,
+    selectedItemsCount: selectedItemsCount
+  }, props), children);
+};
+exports.IndexTable = IndexTable;
+IndexTable.Cell = _polarisGlints.Cell;
+IndexTable.Row = _Row.Row;

package/lib/@next/IndexTable/IndexTable.stories.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Interactive = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _IndexTable = require("./IndexTable");
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _ = require("..");
+require("polaris-glints/build/esm/styles.css");
+var _Icon = require("../Icon");
+var _Button = require("../Button");
+var _ButtonGroupStyle = require("./indexTableStoryHelper/ButtonGroupStyle");
+var _colors = require("../utilities/colors");
+_IndexTable.IndexTable.displayName = 'Table';
+var _default = {
+  title: '@next/IndexTable',
+  component: _IndexTable.IndexTable,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story()), /*#__PURE__*/_react["default"].createElement("div", {
+      id: "glints-portal-container"
+    }));
+  }],
+  argTypes: {
+    disabled: {
+      control: 'boolean'
+    },
+    loading: {
+      control: 'boolean'
+    },
+    loadingLabel: {
+      control: 'text'
+    }
+  }
+};
+exports["default"] = _default;
+var candidates = [{
+  id: '1',
+  url: 'candidate/1',
+  name: 'Dwi Nugraha Putri',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}, {
+  id: '2',
+  url: 'candidate/2',
+  name: 'Ahmad Dani',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}, {
+  id: '3',
+  url: 'candidate/3',
+  name: 'Syed Ali',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}, {
+  id: '4',
+  url: 'candidate/4',
+  name: 'Muhammad Danial',
+  location: 'Jakarta, Indonesia',
+  expectedSalary: 'Rp 11,400,000/mo',
+  yearsExperience: '4 years, 3 months',
+  latestWorkExperience: 'Backend Engineer at Google',
+  latestWorkDuration: 'Jan 2021 - Jan 2022'
+}];
+var resourceName = {
+  singular: 'candidate',
+  plural: 'candidates'
+};
+var Template = function Template(args) {
+  var _useIndexResourceStat = (0, _IndexTable.useIndexResourceState)(candidates),
+    selectedResources = _useIndexResourceStat.selectedResources,
+    allResourcesSelected = _useIndexResourceStat.allResourcesSelected,
+    handleSelectionChange = _useIndexResourceStat.handleSelectionChange;
+  var promotedBulkActions = [{
+    content: 'Reject',
+    onAction: function onAction() {
+      return console.log('Reject');
+    }
+  }, {
+    title: 'Move to',
+    actions: [{
+      content: 'Assessment',
+      onAction: function onAction() {
+        return console.log('Assessment');
+      }
+    }, {
+      content: 'Interviewing',
+      onAction: function onAction() {
+        return console.log('Interviewing');
+      }
+    }, {
+      content: 'Offered',
+      onAction: function onAction() {
+        return console.log('Offered');
+      }
+    }, {
+      content: 'Hired',
+      onAction: function onAction() {
+        return console.log('Hired');
+      }
+    }]
+  }];
+  var rowMarkup = candidates.map(function (_ref, index) {
+    var id = _ref.id,
+      name = _ref.name,
+      location = _ref.location,
+      expectedSalary = _ref.expectedSalary,
+      yearsExperience = _ref.yearsExperience,
+      latestWorkExperience = _ref.latestWorkExperience,
+      latestWorkDuration = _ref.latestWorkDuration;
+    return /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable.Row, {
+      id: id,
+      key: id,
+      selected: selectedResources.includes(id),
+      position: index,
+      onClick: function onClick() {
+        return console.log("row clicked " + id);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable.Cell, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      name: "ri-account-circle-fill",
+      height: 40,
+      fill: _colors.Neutral.B40
+    })), /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable.Cell, null, /*#__PURE__*/_react["default"].createElement(_.Typography, {
+      variant: "body2"
+    }, name), /*#__PURE__*/_react["default"].createElement(_.Typography, {
+      variant: "body1"
+    }, location)), /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable.Cell, null, expectedSalary), /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable.Cell, null, yearsExperience), /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable.Cell, null, /*#__PURE__*/_react["default"].createElement(_.Typography, {
+      variant: "body1"
+    }, latestWorkExperience), /*#__PURE__*/_react["default"].createElement(_.Typography, {
+      variant: "caption"
+    }, latestWorkDuration)), /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable.Cell, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroupStyle.StyledButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroupStyle.StyledButton, null, "Reject"), /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, null, "Shortlist"))));
+  });
+  return /*#__PURE__*/_react["default"].createElement(_IndexTable.IndexTable, (0, _extends2["default"])({}, args, {
+    resourceName: resourceName,
+    itemCount: candidates.length,
+    selectedItemsCount: allResourcesSelected ? 'All' : selectedResources.length,
+    onSelectionChange: handleSelectionChange,
+    promotedBulkActions: promotedBulkActions,
+    headings: [{
+      title: ''
+    }, {
+      title: 'Name & Location'
+    }, {
+      title: 'Expected Salary'
+    }, {
+      title: 'Years of Experience'
+    }, {
+      title: 'Latest Work Experience'
+    }, {
+      title: 'Actions'
+    }],
+    selectedLabel: "selected candidates"
+  }), rowMarkup);
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  loadingLabel: 'Loading...'
+};

package/lib/@next/IndexTable/components/Checkbox/Checkbox.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MemoizedCheckbox = void 0;
+var _polarisGlints = require("polaris-glints");
+var _react = _interopRequireWildcard(require("react"));
+var _Checkbox = require("../../../Checkbox");
+var _CheckboxStyle = require("./CheckboxStyle");
+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 Checkbox = function Checkbox() {
+  var _useContext = (0, _react.useContext)(_polarisGlints.IndexTableRowContext),
+    itemId = _useContext.itemId,
+    selected = _useContext.selected,
+    disabled = _useContext.disabled,
+    onInteraction = _useContext.onInteraction;
+  return /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.CheckboxWrapper, null, /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.CheckboxCellContentContainer, null, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: onInteraction
+  }, /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, {
+    id: itemId,
+    checked: selected,
+    disabled: disabled,
+    isPadded: false
+  }))));
+};
+var MemoizedCheckbox = /*#__PURE__*/(0, _react.memo)(Checkbox);
+exports.MemoizedCheckbox = MemoizedCheckbox;

package/lib/@next/IndexTable/components/Checkbox/CheckboxStyle.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CheckboxWrapper = exports.CheckboxCellContentContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var CheckboxWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "CheckboxStyle__CheckboxWrapper",
+  componentId: "sc-1utzl7w-0"
+})(["margin:0;position:relative;top:15%;"]);
+exports.CheckboxWrapper = CheckboxWrapper;
+var CheckboxCellContentContainer = _styledComponents["default"].div.withConfig({
+  displayName: "CheckboxStyle__CheckboxCellContentContainer",
+  componentId: "sc-1utzl7w-1"
+})(["display:flex;align-items:center;"]);
+exports.CheckboxCellContentContainer = CheckboxCellContentContainer;

package/lib/@next/IndexTable/components/Checkbox/index.js

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

package/lib/@next/IndexTable/components/Row/Row.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Row = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _polarisGlints = require("polaris-glints");
+var _Checkbox = require("../Checkbox");
+var _excluded = ["children"];
+var Row = function Row(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_polarisGlints.Row, (0, _extends2["default"])({
+    checkbox: /*#__PURE__*/_react["default"].createElement(_Checkbox.MemoizedCheckbox, null)
+  }, props), children);
+};
+exports.Row = Row;

package/lib/@next/IndexTable/components/Row/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Row = void 0;
+var _Row = _interopRequireWildcard(require("./Row"));
+exports.Row = _Row;
+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; }

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

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

package/lib/@next/IndexTable/indexTableStoryHelper/ButtonGroupStyle.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledButtonGroup = exports.StyledButton = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("../..");
+var _Button = require("../../Button");
+var StyledButtonGroup = _styledComponents["default"].div.withConfig({
+  displayName: "ButtonGroupStyle__StyledButtonGroup",
+  componentId: "sc-1eqebqe-0"
+})(["display:flex;"]);
+exports.StyledButtonGroup = StyledButtonGroup;
+var StyledButton = (0, _styledComponents["default"])(_Button.Button).withConfig({
+  displayName: "ButtonGroupStyle__StyledButton",
+  componentId: "sc-1eqebqe-1"
+})(["margin-right:", ";"], _.Spacing.space8);
+exports.StyledButton = StyledButton;

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useAlert = exports.TypographyProps = exports.Typography = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Spacing = exports.SimplePagination = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
+exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.Spacing = exports.SimplePagination = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.Colors = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -46,6 +46,10 @@ exports.Divider = _Divider.Divider;
 var _Icon = require("./Icon");
 exports.Icon = _Icon.Icon;
 exports.IconProps = _Icon.IconProps;
+var _IndexTable = require("./IndexTable");
+exports.IndexTable = _IndexTable.IndexTable;
+exports.IndexTableProps = _IndexTable.IndexTableProps;
+exports.useIndexResourceState = _IndexTable.useIndexResourceState;
 var _Pagination = require("./Pagination");
 exports.Pagination = _Pagination.Pagination;
 exports.SimplePagination = _Pagination.SimplePagination;

package/lib/@next/utilities/spacing/Spacing.js

@@ -1,7 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports.space96 = exports.space80 = exports.space8 = exports.space64 = exports.space40 = exports.space4 = exports.space32 = exports.space24 = exports.space16 = exports.space128 = exports.space12 = exports.space112 = void 0;
+exports.space96 = exports.space80 = exports.space8 = exports.space64 = exports.space40 = exports.space4 = exports.space32 = exports.space24 = exports.space2 = exports.space18 = exports.space16 = exports.space128 = exports.space12 = exports.space112 = void 0;
+var space2 = '2px';
+exports.space2 = space2;
 var space4 = '4px';
 exports.space4 = space4;
 var space8 = '8px';
@@ -10,6 +12,8 @@ var space12 = '12px';
 exports.space12 = space12;
 var space16 = '16px';
 exports.space16 = space16;
+var space18 = '18px';
+exports.space18 = space18;
 var space24 = '24px';
 exports.space24 = space24;
 var space32 = '32px';

package/lib/src/@next/Checkbox/Checkbox.d.ts

@@ -8,5 +8,6 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     disabled?: boolean;
     helpText?: string;
     onChange?(newChecked: boolean, id: string): void;
+    isPadded?: boolean;
 }
-export declare const Checkbox: ({ label, id, checked, onChange, disabled, indeterminate, hasError, helpText, ...otherProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ label, id, checked, onChange, disabled, indeterminate, hasError, helpText, isPadded, ...otherProps }: CheckboxProps) => JSX.Element;

package/lib/src/@next/IndexTable/IndexTable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IndexTableProps } from 'polaris-glints';
+declare const IndexTable: {
+    ({ bulkActions, children, itemCount, selectedItemsCount, ...props }: IndexTableProps): JSX.Element;
+    Cell: React.NamedExoticComponent<import("polaris-glints/build/ts/latest/src/components/IndexTable").CellProps>;
+    Row: ({ children, ...props }: import("polaris-glints").RowProps) => JSX.Element;
+};
+export { useIndexResourceState } from 'polaris-glints';
+export { IndexTable, IndexTableProps };

package/lib/src/@next/IndexTable/IndexTable.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import 'polaris-glints/build/esm/styles.css';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/lib/src/@next/IndexTable/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MemoizedCheckbox: React.MemoExoticComponent<() => JSX.Element>;

package/lib/src/@next/IndexTable/components/Checkbox/CheckboxStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const CheckboxWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CheckboxCellContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/src/@next/IndexTable/components/Checkbox/index.d.ts

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

package/lib/src/@next/IndexTable/components/Row/Row.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RowProps } from 'polaris-glints';
+export declare const Row: ({ children, ...props }: RowProps) => JSX.Element;

package/lib/src/@next/IndexTable/components/Row/index.d.ts

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

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

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

package/lib/src/@next/IndexTable/indexTableStoryHelper/ButtonGroupStyle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledButtonGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("../..").ButtonProps) => JSX.Element, any, {}, never>;

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

@@ -12,6 +12,7 @@ export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochrom
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Divider } from './Divider';
 export { Icon, IconProps } from './Icon';
+export { IndexTable, IndexTableProps, useIndexResourceState, } from './IndexTable';
 export { Pagination, SimplePagination, PaginationProps } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';

package/lib/src/@next/utilities/spacing/Spacing.d.ts

@@ -1,7 +1,9 @@
+export declare const space2 = "2px";
 export declare const space4 = "4px";
 export declare const space8 = "8px";
 export declare const space12 = "12px";
 export declare const space16 = "16px";
+export declare const space18 = "18px";
 export declare const space24 = "24px";
 export declare const space32 = "32px";
 export declare const space40 = "40px";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.182",
+  "version": "4.0.183",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -129,7 +129,7 @@
     "classnames": "^2.2.6",
     "downshift": "^6.1.3",
     "moment": "^2.24.0",
-    "polaris-glints": "^14.0.0",
+    "polaris-glints": "^15.4.0",
     "react-id-generator": "^3.0.1",
     "styled-system": "^5.1.5"
   },