glints-aries 4.0.182 → 4.0.184

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "helperText", "disabled", "name", "checked", "value", "onChange"];
+import React from 'react';
+import { LabelWrapper, RadioButtonInput, RadioButtonWrapper } from './RadioButtonStyle';
+import { Typography } from '../Typography';
+import { Colors } from '..';
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export 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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(RadioButtonWrapper, null, /*#__PURE__*/React.createElement(RadioButtonInput, _extends({
+    disabled: disabled,
+    name: name,
+    checked: checked,
+    value: value,
+    type: "radio",
+    onChange: onChange,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, props)), /*#__PURE__*/React.createElement(LabelWrapper, {
+    "data-disabled": disabled
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    as: "span",
+    color: Colors.Neutral.B18
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2",
+    as: "span",
+    color: Colors.Neutral.B40
+  }, helperText)));
+};

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { RadioButton } from './RadioButton';
+import { Typography } from '../Typography';
+RadioButton.displayName = 'RadioButton';
+export default {
+  title: '@next/RadioButton',
+  component: RadioButton,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }]
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(RadioButton, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  label: 'Label',
+  helperText: 'Helper Text',
+  disabled: false,
+  name: 'name',
+  checked: false,
+  value: 'value'
+};
+export var ControlledRadioButton = function ControlledRadioButton() {
+  var _useState = useState('1'),
+    value = _useState[0],
+    setValue = _useState[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1"
+  }, "Selected value: ", value), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 1",
+    value: "1",
+    checked: value === '1',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 2",
+    value: "2",
+    checked: value === '2',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    name: "radio-name",
+    label: "Label 3",
+    value: "3",
+    checked: value === '3',
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    }
+  }));
+};

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Breakpoints, Colors } from '..';
+import { space4, space8 } from '../utilities/spacing';
+import { borderRadiusHalf } from '../utilities/borderRadius';
+export var RadioButtonWrapper = styled.label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], space8, space4);
+export var RadioButtonInput = styled.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, borderRadiusHalf, borderRadiusHalf, Breakpoints.large, 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);
+export var LabelWrapper = styled.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;}"], space4, Colors.Neutral.B85);

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

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

package/es/@next/index.js

@@ -13,8 +13,10 @@ 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 { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

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/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/es/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/es/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>;

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

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

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

@@ -12,8 +12,10 @@ 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 { RadioButton, RadioButtonProps } from './RadioButton';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { Typography, TypographyProps } from './Typography';

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",