glints-aries 4.0.186 → 4.0.189

package/es/@next/Popover/Popover.js

@@ -1,9 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Popover as PolarisPopover } from 'polaris-glints';
 import { StyledPopover } from './PopoverStyle';
-var PopoverComponent = function PopoverComponent(props) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopover, null), /*#__PURE__*/React.createElement(PolarisPopover, props));
-};
+var PopoverComponent = /*#__PURE__*/React.forwardRef(function Popoever(props, ref) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopover, null), /*#__PURE__*/React.createElement(PolarisPopover, _extends({
+    ref: ref
+  }, props)));
+});
 
 /** Using Popover from polaris-glints repository internally
  * Please add `<div id="glints-portal-container"></div>` as a sibling element of where your React app is rendered.

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

@@ -11,4 +11,4 @@ export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputEle
 /**
  * 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;
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -8,7 +8,7 @@ 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) {
+export var RadioButton = /*#__PURE__*/React.forwardRef(function RadioButton(_ref, ref) {
   var label = _ref.label,
     helperText = _ref.helperText,
     disabled = _ref.disabled,
@@ -18,6 +18,7 @@ export var RadioButton = function RadioButton(_ref) {
     onChange = _ref.onChange,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(RadioButtonWrapper, null, /*#__PURE__*/React.createElement(RadioButtonInput, _extends({
+    ref: ref,
     disabled: disabled,
     name: name,
     checked: checked,
@@ -38,4 +39,4 @@ export var RadioButton = function RadioButton(_ref) {
     as: "span",
     color: Colors.Neutral.B40
   }, helperText)));
-};
+});

package/es/@next/Tabs/Tabs.d.ts

@@ -18,4 +18,4 @@ export declare type TabsProps = {
     fitted?: boolean;
     onSelected?: (index: number) => void;
 };
-export declare const Tabs: ({ tabs, selected: selectedIndex, children, fitted, onSelected, }: TabsProps) => JSX.Element;
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Tabs/Tabs.js

@@ -2,7 +2,7 @@ import nextId from 'react-id-generator';
 import React, { useEffect, useState } from 'react';
 import { Tab } from './Tab';
 import { StyledLi, StyledTabHeaderContainer, StyledTabsContainer, StyledUl } from './TabStyle';
-export var Tabs = function Tabs(_ref) {
+export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
   var tabs = _ref.tabs,
     _ref$selected = _ref.selected,
     selectedIndex = _ref$selected === void 0 ? 0 : _ref$selected,
@@ -37,7 +37,9 @@ export var Tabs = function Tabs(_ref) {
       selected: index === selectedTabIndex
     }));
   });
-  return /*#__PURE__*/React.createElement(StyledTabsContainer, null, /*#__PURE__*/React.createElement(StyledTabHeaderContainer, null, /*#__PURE__*/React.createElement(StyledUl, {
+  return /*#__PURE__*/React.createElement(StyledTabsContainer, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(StyledTabHeaderContainer, null, /*#__PURE__*/React.createElement(StyledUl, {
     "data-fitted": fitted
   }, renderTabs, " ")), /*#__PURE__*/React.createElement("div", null, children));
-};
+});

package/es/@next/Tag/Tag.d.ts

@@ -3,7 +3,8 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     value?: string;
     onRemove?: (() => void) | null;
+    textColor?: string;
 }
 export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
-export declare const Tag: ({ children, onRemove, value, ...props }: TagProps) => JSX.Element;
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Tag/Tag.js

@@ -1,19 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onRemove", "value"];
+var _excluded = ["children", "onRemove", "value", "textColor"];
 import React from 'react';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
 import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle } from './TagStyle';
-export var Tag = function Tag(_ref) {
+export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
   var children = _ref.children,
     onRemove = _ref.onRemove,
     value = _ref.value,
+    textColor = _ref.textColor,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+  var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
-    color: Neutral.B18,
+    color: textColor != null ? textColor : Neutral.B18,
     as: 'span'
   }, children) : children;
   var removeButton = onRemove && /*#__PURE__*/React.createElement(TagRemoveContainerStyle, null, /*#__PURE__*/React.createElement(TagIconWrapper, {
@@ -25,9 +26,11 @@ export var Tag = function Tag(_ref) {
     height: 20,
     onClick: onRemove
   })));
-  return /*#__PURE__*/React.createElement(TagStyle, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(TagStyle, _extends({
+    ref: ref
+  }, props, {
     value: value
   }), /*#__PURE__*/React.createElement(TagContentStyle, {
     "data-removeable": !!onRemove
   }, content), removeButton);
-};
+});

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

@@ -1,6 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps } from '../Input/Input';
 export declare type TextInputProps = Omit<InputProps, 'type'> & {
     canClear?: boolean;
 };
-export declare const TextInput: ({ canClear, suffix, value, onChange, ...props }: TextInputProps) => JSX.Element;
+export declare const TextInput: React.ForwardRefExoticComponent<Omit<InputProps, "type"> & {
+    canClear?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -4,7 +4,7 @@ var _excluded = ["canClear", "suffix", "value", "onChange"];
 import React, { useState } from 'react';
 import { Icon } from '../Icon';
 import { Input } from '../Input/Input';
-export var TextInput = function TextInput(_ref) {
+export var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
   var canClear = _ref.canClear,
     suffix = _ref.suffix,
     value = _ref.value,
@@ -39,9 +39,10 @@ export var TextInput = function TextInput(_ref) {
     onChange == null ? void 0 : onChange(e);
   };
   return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref,
     type: "text",
     suffix: suffixValue,
     value: currentValue,
     onChange: handleChange
   }, props));
-};
+});

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

@@ -9,4 +9,4 @@ export declare type AlertProps = {
     duration?: number;
     onDismissed?: () => void;
 };
-export declare const Alert: ({ show, title, content, status, duration, children, onDismissed, }: AlertProps) => JSX.Element;
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Alert/Alert.js

@@ -14,7 +14,7 @@ var iconNameStatusMap = {
   warning: 'ri-error-warning-fill',
   error: 'ri-error-warning-fill'
 };
-var Alert = function Alert(_ref) {
+var Alert = /*#__PURE__*/_react["default"].forwardRef(function Alert(_ref, ref) {
   var show = _ref.show,
     title = _ref.title,
     content = _ref.content,
@@ -44,6 +44,7 @@ var Alert = function Alert(_ref) {
     return null;
   }
   return /*#__PURE__*/_react["default"].createElement(_AlertStyle.StyledAlertContainer, {
+    ref: ref,
     role: "alert",
     "data-titled": hasTitle,
     "data-status": status || 'info'
@@ -66,5 +67,5 @@ var Alert = function Alert(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     name: "ri-close"
   })));
-};
+});
 exports.Alert = Alert;

package/lib/@next/Alert/AlertWithProvider.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const AlertWithProvider: () => JSX.Element;
+import React from 'react';
+export declare const AlertWithProvider: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Alert/AlertWithProvider.js

@@ -10,7 +10,7 @@ var _Alert = require("./Alert");
 var _useAlert2 = require("./useAlert");
 var _excluded = ["closeAlert"],
   _excluded2 = ["show"];
-var AlertWithProvider = function AlertWithProvider() {
+var AlertWithProvider = /*#__PURE__*/_react["default"].forwardRef(function AlertWithProvider(_, alertRef) {
   var _useAlert = (0, _useAlert2.useAlert)(),
     closeAlert = _useAlert.closeAlert,
     rest = (0, _objectWithoutPropertiesLoose2["default"])(_useAlert, _excluded);
@@ -19,11 +19,13 @@ var AlertWithProvider = function AlertWithProvider() {
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/_react["default"].createElement(_Alert.Alert, (0, _extends2["default"])({}, alertProps, {
+  return /*#__PURE__*/_react["default"].createElement(_Alert.Alert, (0, _extends2["default"])({
+    ref: alertRef
+  }, alertProps, {
     show: show,
     onDismissed: function onDismissed() {
       return closeAlert();
     }
   }));
-};
+});
 exports.AlertWithProvider = AlertWithProvider;

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

@@ -8,5 +8,5 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: AvatarSizeVariant;
     initials?: string;
 }
-export declare const Avatar: ({ variant, size, initials, ...props }: AvatarProps) => JSX.Element;
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/@next/Avatar/Avatar.js

@@ -12,7 +12,7 @@ var _AvatarStyle = require("./AvatarStyle");
 var _excluded = ["variant", "size", "initials"];
 var avatarBackgroundColorVariant = ['supplementary', 'warning', 'danger', 'success', 'outstanding'];
 var avatarSizeVariant = ['large', 'medium'];
-var Avatar = function Avatar(_ref) {
+var Avatar = /*#__PURE__*/_react["default"].forwardRef(function Avatar(_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'supplementary' : _ref$variant,
     _ref$size = _ref.size,
@@ -20,6 +20,7 @@ var Avatar = function Avatar(_ref) {
     initials = _ref.initials,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_AvatarStyle.AvatarStyle, (0, _extends2["default"])({
+    ref: ref,
     variant: variant,
     size: size
   }, props), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
@@ -27,5 +28,5 @@ var Avatar = function Avatar(_ref) {
     color: _colors.Neutral.B18,
     as: 'span'
   }, initials.slice(0, 2)));
-};
+});
 exports.Avatar = Avatar;

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

@@ -6,5 +6,5 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     status?: BadgeStatusVariant;
     textColor?: string;
 }
-export declare const Badge: ({ children, status, textColor, ...props }: BadgeProps) => JSX.Element;
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/@next/Badge/Badge.js

@@ -20,7 +20,7 @@ var renderTextColor = function renderTextColor(textColor, status) {
   }
   return _colors.Neutral.B18;
 };
-var Badge = function Badge(_ref) {
+var Badge = /*#__PURE__*/_react["default"].forwardRef(function Badge(_ref, ref) {
   var children = _ref.children,
     status = _ref.status,
     textColor = _ref.textColor,
@@ -31,7 +31,8 @@ var Badge = function Badge(_ref) {
     as: 'span'
   }, children) : children;
   return /*#__PURE__*/_react["default"].createElement(_BadgeStyle.BadgeStyle, (0, _extends2["default"])({
+    ref: ref,
     status: status ? status : 'neutral'
   }, props), /*#__PURE__*/_react["default"].createElement("div", null, content));
-};
+});
 exports.Badge = Badge;

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

@@ -11,4 +11,4 @@ export declare type BannerProps = {
     dismissable?: boolean;
     onDismiss?: () => void;
 };
-export declare const Banner: ({ title, status, iconName, children, action, secondaryAction, dismissable, onDismiss, ...props }: BannerProps) => JSX.Element;
+export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Banner/Banner.js

@@ -17,7 +17,7 @@ var iconNameStatusMap = {
   warning: 'ri-error-warning-fill',
   critical: 'ri-error-warning-fill'
 };
-var Banner = function Banner(_ref) {
+var Banner = /*#__PURE__*/_react["default"].forwardRef(function Banner(_ref, ref) {
   var title = _ref.title,
     status = _ref.status,
     iconName = _ref.iconName,
@@ -34,6 +34,7 @@ var Banner = function Banner(_ref) {
   }
   var iconNameValue = iconName ? iconName : iconByStatus || iconNameStatusMap['info'];
   return /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBanner, (0, _extends2["default"])({
+    ref: ref,
     "data-titled": !!title,
     "data-status": status
   }, props), /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerTitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
@@ -52,5 +53,5 @@ var Banner = function Banner(_ref) {
     as: "div",
     variant: "body1"
   }, children)), /*#__PURE__*/_react["default"].createElement(_BannerStyle.StyledBannerContentContainer, null, action || secondaryAction && /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, action, secondaryAction)));
-};
+});
 exports.Banner = Banner;

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

@@ -11,4 +11,4 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     iconPosition?: IconPosition;
     loading?: boolean;
 }
-export declare const Button: ({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: ButtonProps) => JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/@next/Button/Button.js

@@ -10,7 +10,7 @@ var _Spinner = require("../Spinner/Spinner");
 var _Typography = require("../Typography");
 var _ButtonStyle = require("./ButtonStyle");
 var _excluded = ["children", "icon", "iconPosition", "active", "fullWidth", "loading"];
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/_react["default"].forwardRef(function Button(_ref, ref) {
   var children = _ref.children,
     icon = _ref.icon,
     _ref$iconPosition = _ref.iconPosition,
@@ -29,6 +29,7 @@ var Button = function Button(_ref) {
     return null;
   };
   return /*#__PURE__*/_react["default"].createElement(_ButtonStyle.StyledButton, (0, _extends2["default"])({
+    ref: ref,
     "data-active": active,
     "data-full-width": fullWidth,
     "data-loading": loading,
@@ -38,5 +39,5 @@ var Button = function Button(_ref) {
       return e.currentTarget.blur();
     }
   }), loading && /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, null), renderIcon('left'), content, renderIcon('right'));
-};
+});
 exports.Button = Button;

package/lib/@next/Button/DesctructiveButtonStyle.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const DestructiveButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
+export declare const DestructiveButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/lib/@next/Button/OutlineButtonStyle.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const OutlineButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
+export declare const OutlineButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/lib/@next/Button/OutlineMonochromeStyle.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const OutlineMonochromeButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
+export declare const OutlineMonochromeButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/lib/@next/Button/PrimaryButtonStyle.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const PrimaryButton: import("styled-components").StyledComponent<({ children, icon, iconPosition, active, fullWidth, loading, ...otherProps }: import("./Button").ButtonProps) => JSX.Element, any, {}, never>;
+export declare const PrimaryButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

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

@@ -5,4 +5,4 @@ export interface ButtonGroupProps extends React.HtmlHTMLAttributes<HTMLDivElemen
     /** Set this true when buttons are wrapped by another element (e.g as an activator for Popover) */
     isButtonWrapped?: boolean;
 }
-export declare const ButtonGroup: ({ segmented, fullWidth, isButtonWrapped, ...props }: ButtonGroupProps) => JSX.Element;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/ButtonGroup/ButtonGroup.js

@@ -8,15 +8,16 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _ButtonGroupStyle = require("./ButtonGroupStyle");
 var _excluded = ["segmented", "fullWidth", "isButtonWrapped"];
-var ButtonGroup = function ButtonGroup(_ref) {
+var ButtonGroup = /*#__PURE__*/_react["default"].forwardRef(function ButtonGroup(_ref, ref) {
   var segmented = _ref.segmented,
     fullWidth = _ref.fullWidth,
     isButtonWrapped = _ref.isButtonWrapped,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_ButtonGroupStyle.StyledButtonGroup, (0, _extends2["default"])({
+    ref: ref,
     "data-segmented": segmented,
     "data-full-width": fullWidth,
     "data-button-wrapped": isButtonWrapped
   }, props));
-};
+});
 exports.ButtonGroup = ButtonGroup;

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

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

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

@@ -14,7 +14,7 @@ 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) {
+var Checkbox = /*#__PURE__*/_react["default"].forwardRef(function Checkbox(_ref, ref) {
   var label = _ref.label,
     id = _ref.id,
     checked = _ref.checked,
@@ -50,6 +50,7 @@ var Checkbox = function Checkbox(_ref) {
     onChange == null ? void 0 : onChange(checkedValue, checkBoxId);
   };
   return /*#__PURE__*/_react["default"].createElement(_CheckboxStyle.StyledContainer, {
+    ref: ref,
     "aria-disabled": disabled,
     "data-error": hasError,
     "data-spacing": isPadded
@@ -105,5 +106,5 @@ var Checkbox = function Checkbox(_ref) {
     as: "span",
     variant: "subtitle2"
   }, helpText))));
-};
+});
 exports.Checkbox = Checkbox;

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

@@ -1,8 +1,12 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps } from '../Input/Input';
 export declare type CurrencyInputProps = Omit<InputProps, 'type' | 'prefix' | 'onChange' | 'value'> & {
     locale?: string;
     value?: number;
     onChange?: (value: number) => void;
 };
-export declare const CurrencyInput: ({ locale, value, onChange, ...props }: CurrencyInputProps) => JSX.Element;
+export declare const CurrencyInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "value" | "prefix" | "onChange"> & {
+    locale?: string;
+    value?: number;
+    onChange?: (value: number) => void;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -10,7 +10,7 @@ var _CurrencyStyles = require("./CurrencyStyles");
 var _excluded = ["locale", "value", "onChange"];
 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 CurrencyInput = function CurrencyInput(_ref) {
+var CurrencyInput = /*#__PURE__*/_react["default"].forwardRef(function CurrencyInput(_ref, ref) {
   var _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale,
     _ref$value = _ref.value,
@@ -44,11 +44,12 @@ var CurrencyInput = function CurrencyInput(_ref) {
     setFormattedValue(formatter.format(rawValue));
   };
   return /*#__PURE__*/_react["default"].createElement(_CurrencyStyles.StyledCurrency, (0, _extends2["default"])({
+    ref: ref,
     type: "text",
     prefix: /*#__PURE__*/_react["default"].createElement("div", null, "$")
   }, props, {
     value: formattedValue === '0' ? '' : formattedValue,
     onChange: handleChange
   }));
-};
+});
 exports.CurrencyInput = CurrencyInput;

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

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const StyledCurrency: import("styled-components").StyledComponent<({ error, disabled, prefix, suffix, ...props }: import("../Input/Input").InputProps) => JSX.Element, any, {}, never>;
+export declare const StyledCurrency: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Input/Input").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 export declare type DividerProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Divider: ({ ...props }: DividerProps) => JSX.Element;
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -11,6 +11,7 @@ exports.IndexTableProps = _polarisGlints.IndexTableProps;
 exports.useIndexResourceState = _polarisGlints.useIndexResourceState;
 var _Checkbox = require("../Checkbox");
 var _Row = require("./components/Row/Row");
+var _IndexTableStyle = require("./IndexTableStyle");
 var _excluded = ["bulkActions", "children", "itemCount", "selectedItemsCount"],
   _excluded2 = ["checked", "onChange"];
 var IndexTable = function IndexTable(_ref) {
@@ -29,12 +30,12 @@ var IndexTable = function IndexTable(_ref) {
       isPadded: false
     }, props));
   };
-  return /*#__PURE__*/_react["default"].createElement(_polarisGlints.IndexTable, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IndexTableStyle.StyledIndexTable, null), /*#__PURE__*/_react["default"].createElement(_polarisGlints.IndexTable, (0, _extends2["default"])({
     bulkActions: bulkActions,
     checkbox: renderCheckboxHeader,
     itemCount: itemCount,
     selectedItemsCount: selectedItemsCount
-  }, props), children);
+  }, props), children));
 };
 exports.IndexTable = IndexTable;
 IndexTable.Cell = _polarisGlints.Cell;

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

@@ -1,5 +1,4 @@
 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/@next/IndexTable/IndexTableStyle.d.ts

@@ -0,0 +1 @@
+export declare const StyledIndexTable: any;