glints-aries 4.0.186 → 4.0.187

package/es/@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/es/@next/Alert/Alert.js

@@ -8,7 +8,7 @@ var iconNameStatusMap = {
   warning: 'ri-error-warning-fill',
   error: 'ri-error-warning-fill'
 };
-export var Alert = function Alert(_ref) {
+export var Alert = /*#__PURE__*/React.forwardRef(function Alert(_ref, ref) {
   var show = _ref.show,
     title = _ref.title,
     content = _ref.content,
@@ -38,6 +38,7 @@ export var Alert = function Alert(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement(StyledAlertContainer, {
+    ref: ref,
     role: "alert",
     "data-titled": hasTitle,
     "data-status": status || 'info'
@@ -60,4 +61,4 @@ export var Alert = function Alert(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ri-close"
   })));
-};
+});

package/es/@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/es/@next/Alert/AlertWithProvider.js

@@ -5,7 +5,7 @@ var _excluded = ["closeAlert"],
 import React from 'react';
 import { Alert } from './Alert';
 import { useAlert } from './useAlert';
-export var AlertWithProvider = function AlertWithProvider() {
+export var AlertWithProvider = /*#__PURE__*/React.forwardRef(function AlertWithProvider(_, alertRef) {
   var _useAlert = useAlert(),
     closeAlert = _useAlert.closeAlert,
     rest = _objectWithoutPropertiesLoose(_useAlert, _excluded);
@@ -14,10 +14,12 @@ export var AlertWithProvider = function AlertWithProvider() {
   if (!show) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Alert, _extends({}, alertProps, {
+  return /*#__PURE__*/React.createElement(Alert, _extends({
+    ref: alertRef
+  }, alertProps, {
     show: show,
     onDismissed: function onDismissed() {
       return closeAlert();
     }
   }));
-};
+});

package/es/@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/es/@next/Avatar/Avatar.js

@@ -7,7 +7,7 @@ import { Neutral } from '../utilities/colors';
 import { AvatarStyle } from './AvatarStyle';
 var avatarBackgroundColorVariant = ['supplementary', 'warning', 'danger', 'success', 'outstanding'];
 var avatarSizeVariant = ['large', 'medium'];
-export var Avatar = function Avatar(_ref) {
+export var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'supplementary' : _ref$variant,
     _ref$size = _ref.size,
@@ -15,6 +15,7 @@ export var Avatar = function Avatar(_ref) {
     initials = _ref.initials,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(AvatarStyle, _extends({
+    ref: ref,
     variant: variant,
     size: size
   }, props), /*#__PURE__*/React.createElement(Typography, {
@@ -22,4 +23,4 @@ export var Avatar = function Avatar(_ref) {
     color: Neutral.B18,
     as: 'span'
   }, initials.slice(0, 2)));
-};
+});

package/es/@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/es/@next/Badge/Badge.js

@@ -15,7 +15,7 @@ var renderTextColor = function renderTextColor(textColor, status) {
   }
   return Neutral.B18;
 };
-export var Badge = function Badge(_ref) {
+export var Badge = /*#__PURE__*/React.forwardRef(function Badge(_ref, ref) {
   var children = _ref.children,
     status = _ref.status,
     textColor = _ref.textColor,
@@ -26,6 +26,7 @@ export var Badge = function Badge(_ref) {
     as: 'span'
   }, children) : children;
   return /*#__PURE__*/React.createElement(BadgeStyle, _extends({
+    ref: ref,
     status: status ? status : 'neutral'
   }, props), /*#__PURE__*/React.createElement("div", null, content));
-};
+});

package/es/@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/es/@next/Banner/Banner.js

@@ -12,7 +12,7 @@ var iconNameStatusMap = {
   warning: 'ri-error-warning-fill',
   critical: 'ri-error-warning-fill'
 };
-export var Banner = function Banner(_ref) {
+export var Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   var title = _ref.title,
     status = _ref.status,
     iconName = _ref.iconName,
@@ -29,6 +29,7 @@ export var Banner = function Banner(_ref) {
   }
   var iconNameValue = iconName ? iconName : iconByStatus || iconNameStatusMap['info'];
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
+    ref: ref,
     "data-titled": !!title,
     "data-status": status
   }, props), /*#__PURE__*/React.createElement(StyledBannerTitleContainer, null, /*#__PURE__*/React.createElement(Icon, {
@@ -47,4 +48,4 @@ export var Banner = function Banner(_ref) {
     as: "div",
     variant: "body1"
   }, children)), /*#__PURE__*/React.createElement(StyledBannerContentContainer, null, action || secondaryAction && /*#__PURE__*/React.createElement(ButtonGroup, null, action, secondaryAction)));
-};
+});

package/es/@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/es/@next/Button/Button.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { Spinner } from '../Spinner/Spinner';
 import { Typography } from '../Typography';
 import { StyledButton } from './ButtonStyle';
-export var Button = function Button(_ref) {
+export var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var children = _ref.children,
     icon = _ref.icon,
     _ref$iconPosition = _ref.iconPosition,
@@ -24,6 +24,7 @@ export var Button = function Button(_ref) {
     return null;
   };
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
+    ref: ref,
     "data-active": active,
     "data-full-width": fullWidth,
     "data-loading": loading,
@@ -33,4 +34,4 @@ export var Button = function Button(_ref) {
       return e.currentTarget.blur();
     }
   }), loading && /*#__PURE__*/React.createElement(Spinner, null), renderIcon('left'), content, renderIcon('right'));
-};
+});

package/es/@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/es/@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/es/@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/es/@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/es/@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/es/@next/ButtonGroup/ButtonGroup.js

@@ -3,14 +3,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["segmented", "fullWidth", "isButtonWrapped"];
 import React from 'react';
 import { StyledButtonGroup } from './ButtonGroupStyle';
-export var ButtonGroup = function ButtonGroup(_ref) {
+export var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(_ref, ref) {
   var segmented = _ref.segmented,
     fullWidth = _ref.fullWidth,
     isButtonWrapped = _ref.isButtonWrapped,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledButtonGroup, _extends({
+    ref: ref,
     "data-segmented": segmented,
     "data-full-width": fullWidth,
     "data-button-wrapped": isButtonWrapped
   }, props));
-};
+});

package/es/@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/es/@next/Checkbox/Checkbox.js

@@ -7,7 +7,7 @@ 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) {
+export var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
   var label = _ref.label,
     id = _ref.id,
     checked = _ref.checked,
@@ -43,6 +43,7 @@ export var Checkbox = function Checkbox(_ref) {
     onChange == null ? void 0 : onChange(checkedValue, checkBoxId);
   };
   return /*#__PURE__*/React.createElement(StyledContainer, {
+    ref: ref,
     "aria-disabled": disabled,
     "data-error": hasError,
     "data-spacing": isPadded
@@ -98,4 +99,4 @@ export var Checkbox = function Checkbox(_ref) {
     as: "span",
     variant: "subtitle2"
   }, helpText))));
-};
+});

package/es/@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/es/@next/CurrencyInput/CurrencyInput.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["locale", "value", "onChange"];
 import React, { useState } from 'react';
 import { StyledCurrency } from './CurrencyStyles';
-export var CurrencyInput = function CurrencyInput(_ref) {
+export var CurrencyInput = /*#__PURE__*/React.forwardRef(function CurrencyInput(_ref, ref) {
   var _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale,
     _ref$value = _ref.value,
@@ -37,10 +37,11 @@ export var CurrencyInput = function CurrencyInput(_ref) {
     setFormattedValue(formatter.format(rawValue));
   };
   return /*#__PURE__*/React.createElement(StyledCurrency, _extends({
+    ref: ref,
     type: "text",
     prefix: /*#__PURE__*/React.createElement("div", null, "$")
   }, props, {
     value: formattedValue === '0' ? '' : formattedValue,
     onChange: handleChange
   }));
-};
+});

package/es/@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/es/@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/es/@next/Divider/Divider.js

@@ -1,8 +1,8 @@
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { DividerStyle } from './DividerStyle';
-export var Divider = function Divider(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(DividerStyle, props);
-};
+export var Divider = /*#__PURE__*/React.forwardRef(function Divider(props, ref) {
+  return /*#__PURE__*/React.createElement(DividerStyle, _extends({
+    ref: ref
+  }, props));
+});

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

@@ -1,3 +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>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

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

@@ -4,4 +4,4 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
 }
-export declare const Input: ({ error, disabled, prefix, suffix, ...props }: InputProps) => JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/es/@next/Input/Input.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["error", "disabled", "prefix", "suffix"];
 import React from 'react';
 import { StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
-export var Input = function Input(_ref) {
+export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
   var error = _ref.error,
     disabled = _ref.disabled,
     prefix = _ref.prefix,
@@ -18,10 +18,11 @@ export var Input = function Input(_ref) {
     return hasSuffix ? /*#__PURE__*/React.createElement(StyledSuffixContainer, null, suffix) : null;
   };
   return /*#__PURE__*/React.createElement(StyledContainer, {
+    ref: ref,
     "data-prefix": hasPrefix,
     "data-error": error,
     "data-disabled": disabled
   }, /*#__PURE__*/React.createElement(Prefix, null), /*#__PURE__*/React.createElement(StyledInput, _extends({
     disabled: disabled
   }, props)), /*#__PURE__*/React.createElement(Suffix, null));
-};
+});

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps } from '../Input/Input';
 export declare type NumberInputProps = Omit<InputProps, 'type' | 'prefix'>;
-export declare const NumberInput: (props: NumberInputProps) => JSX.Element;
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/es/@next/NumberInput/NumberInput.js

@@ -6,8 +6,9 @@ var StyledInput = styled(Input).withConfig({
   displayName: "NumberInput__StyledInput",
   componentId: "sc-1f5ws9y-0"
 })(["&[type='number']{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}&[type='number']::-webkit-inner-spin-button,&[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;}"]);
-export var NumberInput = function NumberInput(props) {
+export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, ref) {
   return /*#__PURE__*/React.createElement(StyledInput, _extends({
+    ref: ref,
     type: "number"
   }, props));
-};
+});

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { PaginationProps } from './paginationUtils';
-export declare const Pagination: ({ totalItems, currentPage, disabled, pageSize, onPageChanged, }: PaginationProps) => JSX.Element;
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;

package/es/@next/Pagination/Pagination.js

@@ -6,7 +6,7 @@ import { PageButton } from './PageButton';
 import { StyledNav } from './PaginationStyle';
 import { defaultBufferSize, defaultPageSize, getAllPages, getBufferSize } from './paginationUtils';
 import { NextStepper, PreviousStepper } from './Stepper';
-export var Pagination = function Pagination(_ref) {
+export var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_ref, ref) {
   var _ref$totalItems = _ref.totalItems,
     totalItems = _ref$totalItems === void 0 ? 1 : _ref$totalItems,
     _ref$currentPage = _ref.currentPage,
@@ -118,5 +118,7 @@ export var Pagination = function Pagination(_ref) {
     disabled: !hasNext || disabled,
     onClick: handlePagerClick
   }));
-  return /*#__PURE__*/React.createElement(StyledNav, null, pageList);
-};
+  return /*#__PURE__*/React.createElement(StyledNav, {
+    ref: ref
+  }, pageList);
+});

package/es/@next/Pagination/PaginationStyle.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { PageButtonProps } from './PageButton';
 export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export declare const SimplePaginationStyledNav: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export declare const StyledPageButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
 export declare const StyledSimplePaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
 export declare const StyledActiveSimplePaginationButton: import("styled-components").StyledComponent<(props: PageButtonProps) => JSX.Element, any, {}, never>;
-export declare const StyledSimplePaginationInput: import("styled-components").StyledComponent<(props: import("../NumberInput").NumberInputProps) => JSX.Element, any, {}, never>;
+export declare const StyledSimplePaginationInput: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../NumberInput").NumberInputProps & React.RefAttributes<HTMLInputElement>>, any, {}, never>;

package/es/@next/Pagination/SimplePagination.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { PaginationProps } from './paginationUtils';
-export declare const SimplePagination: ({ totalItems, currentPage, disabled, pageSize, onPageChanged, }: PaginationProps) => JSX.Element;
+export declare const SimplePagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;

package/es/@next/Pagination/SimplePagination.js

@@ -3,7 +3,7 @@ import { Typography } from '../Typography';
 import { StyledActiveSimplePaginationButton, StyledSimplePaginationInput, StyledSimplePaginationButton, SimplePaginationStyledNav } from './PaginationStyle';
 import { defaultPageSize, getAllPages } from './paginationUtils';
 import { NextStepper, PreviousStepper } from './Stepper';
-export var SimplePagination = function SimplePagination(_ref) {
+export var SimplePagination = /*#__PURE__*/React.forwardRef(function SimplePagination(_ref, ref) {
   var _ref$totalItems = _ref.totalItems,
     totalItems = _ref$totalItems === void 0 ? 1 : _ref$totalItems,
     _ref$currentPage = _ref.currentPage,
@@ -37,7 +37,9 @@ export var SimplePagination = function SimplePagination(_ref) {
   var handleFocus = function handleFocus(e) {
     e.target.select();
   };
-  return /*#__PURE__*/React.createElement(SimplePaginationStyledNav, null, /*#__PURE__*/React.createElement(PreviousStepper, {
+  return /*#__PURE__*/React.createElement(SimplePaginationStyledNav, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(PreviousStepper, {
     value: currentPage - 1,
     disabled: !hasPrevious || disabled,
     onClick: handlePageNumberChange
@@ -77,4 +79,4 @@ export var SimplePagination = function SimplePagination(_ref) {
     disabled: !hasNext || disabled,
     onClick: handlePageNumberChange
   }));
-};
+});

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { PopoverProps as PolarisPopoverProps } from 'polaris-glints';
+import React from 'react';
+import { PopoverProps as PolarisPopoverProps, PopoverPublicAPI } from 'polaris-glints';
 export declare type PopoverProps = PolarisPopoverProps;
 /** 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.
  * This is a temporary workaround, as React Portal need this as the anchor */
-export declare const Popover: ((props: PopoverProps) => JSX.Element) & {
+export declare const Popover: React.ForwardRefExoticComponent<PolarisPopoverProps & React.RefAttributes<PopoverPublicAPI>> & {
     Pane: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Pane;
     Section: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Section;
 };

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

@@ -6,4 +6,4 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 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

@@ -6,7 +6,7 @@ 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,
@@ -25,9 +25,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));
-};
+});