glints-aries 4.0.182 → 4.0.184

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/RadioButton/RadioButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RadioButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _RadioButtonStyle = require("./RadioButtonStyle");
+var _Typography = require("../Typography");
+var _ = require("..");
+var _excluded = ["label", "helperText", "disabled", "name", "checked", "value", "onChange"];
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+var RadioButton = function RadioButton(_ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    checked = _ref.checked,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.RadioButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.RadioButtonInput, (0, _extends2["default"])({
+    disabled: disabled,
+    name: name,
+    checked: checked,
+    value: value,
+    type: "radio",
+    onChange: onChange,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, props)), /*#__PURE__*/_react["default"].createElement(_RadioButtonStyle.LabelWrapper, {
+    "data-disabled": disabled
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1",
+    as: "span",
+    color: _.Colors.Neutral.B18
+  }, label), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: _.Colors.Neutral.B40
+  }, helperText)));
+};
+exports.RadioButton = RadioButton;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Interactive = exports.ControlledRadioButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _RadioButton = require("./RadioButton");
+var _Typography = require("../Typography");
+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; }
+_RadioButton.RadioButton.displayName = 'RadioButton';
+var _default = {
+  title: '@next/RadioButton',
+  component: _RadioButton.RadioButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }]
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, args);
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  label: 'Label',
+  helperText: 'Helper Text',
+  disabled: false,
+  name: 'name',
+  checked: false,
+  value: 'value'
+};
+var ControlledRadioButton = function ControlledRadioButton() {
+  var _useState = (0, _react.useState)('1'),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: "body1"
+  }, "Selected value: ", value), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 1",
+    value: "1",
+    checked: value === '1',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 2",
+    value: "2",
+    checked: value === '2',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_RadioButton.RadioButton, {
+    name: "radio-name",
+    label: "Label 3",
+    value: "3",
+    checked: value === '3',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }));
+};
+exports.ControlledRadioButton = ControlledRadioButton;

package/lib/@next/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.RadioButtonWrapper = exports.RadioButtonInput = exports.LabelWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+var _spacing = require("../utilities/spacing");
+var _borderRadius = require("../utilities/borderRadius");
+var RadioButtonWrapper = _styledComponents["default"].label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], _spacing.space8, _spacing.space4);
+exports.RadioButtonWrapper = RadioButtonWrapper;
+var RadioButtonInput = _styledComponents["default"].input.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonInput",
+  componentId: "sc-138orlx-1"
+})(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;::after{width:10px;height:10px;margin:", ";}}:hover{border-color:", ";}:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}:checked{border-color:", ";::after{background-color:", ";}:disabled{background-color:", ";border-color:", ";::after{background-color:", ";}}}"], _.Colors.Neutral.B68, _borderRadius.borderRadiusHalf, _borderRadius.borderRadiusHalf, _.Breakpoints.large, _spacing.space4, _.Colors.Neutral.B68, _.Colors.Neutral.B100, _.Colors.Blue.S54, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Blue.S99, _.Colors.Blue.S99, _.Colors.Neutral.B95, _.Colors.Neutral.B85, _.Colors.Neutral.B85);
+exports.RadioButtonInput = RadioButtonInput;
+var LabelWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "RadioButtonStyle__LabelWrapper",
+  componentId: "sc-138orlx-2"
+})(["cursor:pointer;display:flex;flex-direction:column;gap:", ";&[data-disabled='true']{span{color:", ";}cursor:not-allowed;}"], _spacing.space4, _.Colors.Neutral.B85);
+exports.LabelWrapper = LabelWrapper;

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

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

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.RadioButtonProps = exports.RadioButton = 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;
@@ -53,6 +57,9 @@ exports.PaginationProps = _Pagination.PaginationProps;
 var _Popover = require("./Popover");
 exports.Popover = _Popover.Popover;
 exports.PopoverProps = _Popover.PopoverProps;
+var _RadioButton = require("./RadioButton");
+exports.RadioButton = _RadioButton.RadioButton;
+exports.RadioButtonProps = _RadioButton.RadioButtonProps;
 var _Tabs = require("./Tabs");
 exports.Tab = _Tabs.Tab;
 exports.TabModel = _Tabs.TabModel;

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/RadioButton/RadioButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    helperText?: string;
+    disabled?: boolean;
+    name?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export declare const RadioButton: ({ label, helperText, disabled, name, checked, value, onChange, ...props }: RadioButtonProps) => JSX.Element;

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

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

package/lib/src/@next/RadioButton/RadioButtonStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const RadioButtonWrapper: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const RadioButtonInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;