@spaced-out/ui-design-system 0.1.15 → 0.1.17

package/lib/components/CircularLoader/CircularLoader.js

@@ -12,17 +12,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 
-const CircularLoader = _ref => {
+const CircularLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
-    colorToken = 'colorFillPrimary'
+    colorToken = 'colorFillPrimary',
+    ariaLabel = 'Loading'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_CircularLoaderModule.default.container, {
       [_CircularLoaderModule.default.mediumContainer]: size === 'medium',
       [_CircularLoaderModule.default.smallContainer]: size === 'small'
-    }, className)
+    }, className),
+    ref: ref,
+    "aria-label": ariaLabel,
+    role: "alert",
+    "aria-busy": "true"
   }, /*#__PURE__*/React.createElement("div", {
     className: _CircularLoaderModule.default.spinLoader,
     "aria-hidden": "true"
@@ -37,5 +42,5 @@ const CircularLoader = _ref => {
       '--color': COLORS[colorToken]
     }
   })));
-};
+});
 exports.CircularLoader = CircularLoader;

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -11,34 +11,48 @@ import css from './CircularLoader.module.css';
 export type CircularLoaderProps = {
   size?: 'large' | 'medium' | 'small',
   className?: string,
+  ariaLabel?: string,
   // TODO: update it to permissible colors
   colorToken?: $Keys<typeof COLORS>,
 };
 
-export const CircularLoader = ({
-  size = 'medium',
-  className,
-  colorToken = 'colorFillPrimary',
-}: CircularLoaderProps): React.Node => (
-  <div
-    className={classify(
-      css.container,
-      {
-        [css.mediumContainer]: size === 'medium',
-        [css.smallContainer]: size === 'small',
-      },
+export const CircularLoader: React$AbstractComponent<
+  CircularLoaderProps,
+  HTMLDivElement,
+> = React.forwardRef<CircularLoaderProps, HTMLDivElement>(
+  (
+    {
+      size = 'medium',
       className,
-    )}
-  >
-    <div className={css.spinLoader} aria-hidden="true">
-      <div
-        className={css.outerCircle}
-        style={{'--color': COLORS[colorToken]}}
-      ></div>
-      <div
-        className={css.ellipse}
-        style={{'--color': COLORS[colorToken]}}
-      ></div>
+      colorToken = 'colorFillPrimary',
+      ariaLabel = 'Loading',
+    }: CircularLoaderProps,
+    ref,
+  ): React.Node => (
+    <div
+      className={classify(
+        css.container,
+        {
+          [css.mediumContainer]: size === 'medium',
+          [css.smallContainer]: size === 'small',
+        },
+        className,
+      )}
+      ref={ref}
+      aria-label={ariaLabel}
+      role="alert"
+      aria-busy="true"
+    >
+      <div className={css.spinLoader} aria-hidden="true">
+        <div
+          className={css.outerCircle}
+          style={{'--color': COLORS[colorToken]}}
+        ></div>
+        <div
+          className={css.ellipse}
+          style={{'--color': COLORS[colorToken]}}
+        ></div>
+      </div>
     </div>
-  </div>
+  ),
 );

package/lib/components/CollapsibleCard/CollapsibleCard.js

@@ -42,7 +42,7 @@ const CollapsibleCardContent = _ref2 => {
   }, children);
 };
 exports.CollapsibleCardContent = CollapsibleCardContent;
-const CollapsibleCard = _ref3 => {
+const CollapsibleCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     id,
     isOpen,
@@ -57,7 +57,8 @@ const CollapsibleCard = _ref3 => {
   const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "CollapsibleCard",
-    className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper),
+    ref: ref
   }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
     className: (0, _classify.default)(_CollapsibleCardModule.default.header, {
       [_CollapsibleCardModule.default.isOpen]: collapsibleCardIsOpen
@@ -86,5 +87,5 @@ const CollapsibleCard = _ref3 => {
   })), collapsibleCardIsOpen && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_CollapsibleCardModule.default.content, classNames?.content)
   }, children));
-};
+});
 exports.CollapsibleCard = CollapsibleCard;

package/lib/components/CollapsibleCard/CollapsibleCard.js.flow

@@ -69,65 +69,74 @@ export const CollapsibleCardContent = ({
   <div className={classify(css.contentContainer, className)}>{children}</div>
 );
 
-export const CollapsibleCard = ({
-  id,
-  isOpen,
-  onChange,
-  classNames,
-  title,
-  children,
-  semantic = 'neutral',
-  headerIconName,
-  headerIconType = 'solid',
-}: CollapsibleCardProps): React.Node => {
-  const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(
-    Boolean(isOpen),
-  );
-
-  return (
-    <div
-      data-testid="CollapsibleCard"
-      className={classify(css.wrapper, classNames?.wrapper)}
-    >
-      <UnstyledButton
-        className={classify(
-          css.header,
-          {
-            [css.isOpen]: collapsibleCardIsOpen,
-          },
-          classNames?.title,
-        )}
-        onClick={(e) => {
-          onChange?.(e, !collapsibleCardIsOpen, id);
-          setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
-        }}
+export const CollapsibleCard: React$AbstractComponent<
+  CollapsibleCardProps,
+  HTMLDivElement,
+> = React.forwardRef<CollapsibleCardProps, HTMLDivElement>(
+  (
+    {
+      id,
+      isOpen,
+      onChange,
+      classNames,
+      title,
+      children,
+      semantic = 'neutral',
+      headerIconName,
+      headerIconType = 'solid',
+    }: CollapsibleCardProps,
+    ref,
+  ): React.Node => {
+    const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(
+      Boolean(isOpen),
+    );
+
+    return (
+      <div
+        data-testid="CollapsibleCard"
+        className={classify(css.wrapper, classNames?.wrapper)}
+        ref={ref}
       >
-        <div className={css.headerContent}>
-          {!!headerIconName && (
-            <div className={classify(css.iconContainer, css[semantic])}>
-              <Icon
-                name={headerIconName}
-                type={headerIconType}
-                size="small"
-                className={css[semantic]}
-              />
-            </div>
+        <UnstyledButton
+          className={classify(
+            css.header,
+            {
+              [css.isOpen]: collapsibleCardIsOpen,
+            },
+            classNames?.title,
           )}
-
-          <Truncate>{title}</Truncate>
-        </div>
-
-        {collapsibleCardIsOpen ? (
-          <Icon name="chevron-up" color="secondary" size="small" />
-        ) : (
-          <Icon name="chevron-down" color="secondary" size="small" />
+          onClick={(e) => {
+            onChange?.(e, !collapsibleCardIsOpen, id);
+            setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
+          }}
+        >
+          <div className={css.headerContent}>
+            {!!headerIconName && (
+              <div className={classify(css.iconContainer, css[semantic])}>
+                <Icon
+                  name={headerIconName}
+                  type={headerIconType}
+                  size="small"
+                  className={css[semantic]}
+                />
+              </div>
+            )}
+
+            <Truncate>{title}</Truncate>
+          </div>
+
+          {collapsibleCardIsOpen ? (
+            <Icon name="chevron-up" color="secondary" size="small" />
+          ) : (
+            <Icon name="chevron-down" color="secondary" size="small" />
+          )}
+        </UnstyledButton>
+        {collapsibleCardIsOpen && (
+          <div className={classify(css.content, classNames?.content)}>
+            {children}
+          </div>
         )}
-      </UnstyledButton>
-      {collapsibleCardIsOpen && (
-        <div className={classify(css.content, classNames?.content)}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
+      </div>
+    );
+  },
+);

package/lib/components/Dropdown/Dropdown.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Dropdown = _ref => {
+const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     classNames,
@@ -72,7 +72,8 @@ const Dropdown = _ref => {
       onContainerClick: e => {
         e.stopPropagation();
         onOpen();
-      }
+      },
+      ref: ref
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
@@ -93,5 +94,5 @@ const Dropdown = _ref => {
       size: menu.size || size
     }))));
   });
-};
+});
 exports.Dropdown = Dropdown;

package/lib/components/Dropdown/Dropdown.js.flow

@@ -38,81 +38,90 @@ export type DropdownProps = {
   ...
 };
 
-export const Dropdown = ({
-  size = 'medium',
-  classNames,
-  placeholder = 'Select...',
-  onChange,
-  menu,
-  onMenuOpen,
-  onMenuClose,
-  dropdownInputText = '',
-  ...inputProps
-}: DropdownProps): React.Node => {
-  const dropdownRef = React.useRef();
-  const {x, y, reference, floating, strategy} = useFloating({
-    strategy: 'absolute',
-    placement: 'bottom-start',
-    whileElementsMounted: autoUpdate,
-    middleware: [flip(), offset(parseInt(spaceXXSmall))],
-  });
+export const Dropdown: React$AbstractComponent<
+  DropdownProps,
+  HTMLInputElement,
+> = React.forwardRef<DropdownProps, HTMLInputElement>(
+  (
+    {
+      size = 'medium',
+      classNames,
+      placeholder = 'Select...',
+      onChange,
+      menu,
+      onMenuOpen,
+      onMenuClose,
+      dropdownInputText = '',
+      ...inputProps
+    }: DropdownProps,
+    ref,
+  ): React.Node => {
+    const dropdownRef = React.useRef();
+    const {x, y, reference, floating, strategy} = useFloating({
+      strategy: 'absolute',
+      placement: 'bottom-start',
+      whileElementsMounted: autoUpdate,
+      middleware: [flip(), offset(parseInt(spaceXXSmall))],
+    });
 
-  const onMenuToggle = (isOpen: boolean) => {
-    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
-  };
+    const onMenuToggle = (isOpen: boolean) => {
+      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    };
 
-  return (
-    <ClickAway onChange={onMenuToggle}>
-      {({isOpen, onOpen, cancelNext, clickAway}) => (
-        <div
-          data-testid="Dropdown"
-          className={classify(css.dropdownContainer, classNames?.wrapper)}
-          ref={dropdownRef}
-        >
-          <Input
-            {...inputProps}
-            boxRef={reference}
-            size={size}
-            placeholder={placeholder}
-            value={dropdownInputText}
-            classNames={{box: css.inputBox}}
-            iconRightName={isOpen ? 'angle-up' : 'angle-down'}
-            readOnly
-            onContainerClick={(e) => {
-              e.stopPropagation();
-              onOpen();
-            }}
-          />
-
-          {isOpen && menu && (
-            <div
-              onClickCapture={cancelNext}
-              ref={floating}
-              style={{
-                position: strategy,
-                top: y ?? spaceNone,
-                left: x ?? spaceNone,
-                width: sizeFluid,
-                backgroundColor: colorBackgroundTertiary,
+    return (
+      <ClickAway onChange={onMenuToggle}>
+        {({isOpen, onOpen, cancelNext, clickAway}) => (
+          <div
+            data-testid="Dropdown"
+            className={classify(css.dropdownContainer, classNames?.wrapper)}
+            ref={dropdownRef}
+          >
+            <Input
+              {...inputProps}
+              boxRef={reference}
+              size={size}
+              placeholder={placeholder}
+              value={dropdownInputText}
+              classNames={{box: css.inputBox}}
+              iconRightName={isOpen ? 'angle-up' : 'angle-down'}
+              readOnly
+              onContainerClick={(e) => {
+                e.stopPropagation();
+                onOpen();
               }}
-            >
-              <Menu
-                {...menu}
-                onSelect={(option) => {
-                  onChange && onChange(option);
-                  if (
-                    !menu.optionsVariant ||
-                    menu.optionsVariant === 'normal'
-                  ) {
-                    clickAway();
-                  }
+              ref={ref}
+            />
+
+            {isOpen && menu && (
+              <div
+                onClickCapture={cancelNext}
+                ref={floating}
+                style={{
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  width: sizeFluid,
+                  backgroundColor: colorBackgroundTertiary,
                 }}
-                size={menu.size || size}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-};
+              >
+                <Menu
+                  {...menu}
+                  onSelect={(option) => {
+                    onChange && onChange(option);
+                    if (
+                      !menu.optionsVariant ||
+                      menu.optionsVariant === 'normal'
+                    ) {
+                      clickAway();
+                    }
+                  }}
+                  size={menu.size || size}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/EmptyState/EmptyState.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const EmptyState = _ref => {
+const EmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -24,7 +24,8 @@ const EmptyState = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     "data-testid": "EmptyState",
-    className: (0, _classify.default)(_EmptyStateModule.default.wrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_EmptyStateModule.default.wrapper, classNames?.wrapper),
+    ref: ref
   }), !!imageVariant && !customImageUrl && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_EmptyStateModule.default.image, classNames?.image)
   }, imageVariant === 'calendar' && /*#__PURE__*/React.createElement(_EmptyImages.CalendarEmptyImage, null), imageVariant === 'data' && /*#__PURE__*/React.createElement(_EmptyImages.DataEmptyImage, null), imageVariant === 'file' && /*#__PURE__*/React.createElement(_EmptyImages.FileEmptyImage, null), imageVariant === 'message' && /*#__PURE__*/React.createElement(_EmptyImages.MessageEmptyImage, null), imageVariant === 'upload' && /*#__PURE__*/React.createElement(_EmptyImages.UploadEmptyImage, null)), customImageUrl && /*#__PURE__*/React.createElement("img", {
@@ -38,5 +39,5 @@ const EmptyState = _ref => {
   }, description), !!children && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_EmptyStateModule.default.childrenWrapper, classNames?.children)
   }, children));
-};
+});
 exports.EmptyState = EmptyState;

package/lib/components/EmptyState/EmptyState.js.flow

@@ -33,48 +33,57 @@ export type EmptyStateProps = {
   ...
 };
 
-export const EmptyState = ({
-  classNames,
-  children,
-  imageVariant,
-  title,
-  description,
-  customImageUrl,
-  ...props
-}: EmptyStateProps): React.Node => (
-  <div
-    {...props}
-    data-testid="EmptyState"
-    className={classify(css.wrapper, classNames?.wrapper)}
-  >
-    {!!imageVariant && !customImageUrl && (
-      <div className={classify(css.image, classNames?.image)}>
-        {imageVariant === 'calendar' && <CalendarEmptyImage />}
-        {imageVariant === 'data' && <DataEmptyImage />}
-        {imageVariant === 'file' && <FileEmptyImage />}
-        {imageVariant === 'message' && <MessageEmptyImage />}
-        {imageVariant === 'upload' && <UploadEmptyImage />}
-      </div>
-    )}
-    {customImageUrl && (
-      <img
-        className={classify(css.image, classNames?.image)}
-        src={customImageUrl}
-        alt="Empty State"
-      />
-    )}
-    {!!title && (
-      <div className={classify(css.title, classNames?.title)}>{title}</div>
-    )}
-    {!!description && (
-      <div className={classify(css.description, classNames?.description)}>
-        {description}
-      </div>
-    )}
-    {!!children && (
-      <div className={classify(css.childrenWrapper, classNames?.children)}>
-        {children}
-      </div>
-    )}
-  </div>
+export const EmptyState: React$AbstractComponent<
+  EmptyStateProps,
+  HTMLDivElement,
+> = React.forwardRef<EmptyStateProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      children,
+      imageVariant,
+      title,
+      description,
+      customImageUrl,
+      ...props
+    }: EmptyStateProps,
+    ref,
+  ): React.Node => (
+    <div
+      {...props}
+      data-testid="EmptyState"
+      className={classify(css.wrapper, classNames?.wrapper)}
+      ref={ref}
+    >
+      {!!imageVariant && !customImageUrl && (
+        <div className={classify(css.image, classNames?.image)}>
+          {imageVariant === 'calendar' && <CalendarEmptyImage />}
+          {imageVariant === 'data' && <DataEmptyImage />}
+          {imageVariant === 'file' && <FileEmptyImage />}
+          {imageVariant === 'message' && <MessageEmptyImage />}
+          {imageVariant === 'upload' && <UploadEmptyImage />}
+        </div>
+      )}
+      {customImageUrl && (
+        <img
+          className={classify(css.image, classNames?.image)}
+          src={customImageUrl}
+          alt="Empty State"
+        />
+      )}
+      {!!title && (
+        <div className={classify(css.title, classNames?.title)}>{title}</div>
+      )}
+      {!!description && (
+        <div className={classify(css.description, classNames?.description)}>
+          {description}
+        </div>
+      )}
+      {!!children && (
+        <div className={classify(css.childrenWrapper, classNames?.children)}>
+          {children}
+        </div>
+      )}
+    </div>
+  ),
 );

package/lib/components/ErrorMessage/ErrorMessage.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const ErrorMessage = _ref => {
+const ErrorMessage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -25,7 +25,8 @@ const ErrorMessage = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     "data-testid": "ErrorMessage",
-    className: (0, _classify.default)(_ErrorMessageModule.default.wrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_ErrorMessageModule.default.wrapper, classNames?.wrapper),
+    ref: ref
   }), !!imageVariant && !customImageUrl && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ErrorMessageModule.default.image, classNames?.image)
   }, imageVariant === 'unauthorized' && /*#__PURE__*/React.createElement(_ErrorImages.UnauthorizedImage, null), imageVariant === 'forbidden' && /*#__PURE__*/React.createElement(_ErrorImages.ForbiddenImage, null), imageVariant === 'notFound' && /*#__PURE__*/React.createElement(_ErrorImages.NotFoundImage, null), imageVariant === 'serverError' && /*#__PURE__*/React.createElement(_ErrorImages.ServerErrorImage, null)), customImageUrl && /*#__PURE__*/React.createElement("img", {
@@ -41,5 +42,5 @@ const ErrorMessage = _ref => {
   }, description), !!children && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ErrorMessageModule.default.childrenWrapper, classNames?.children)
   }, children));
-};
+});
 exports.ErrorMessage = ErrorMessage;