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

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;

package/lib/components/ErrorMessage/ErrorMessage.js.flow

@@ -34,53 +34,62 @@ export type ErrorMessageProps = {
   ...
 };
 
-export const ErrorMessage = ({
-  classNames,
-  children,
-  imageVariant,
-  title,
-  description,
-  customImageUrl,
-  heading,
-  ...props
-}: ErrorMessageProps): React.Node => (
-  <div
-    {...props}
-    data-testid="ErrorMessage"
-    className={classify(css.wrapper, classNames?.wrapper)}
-  >
-    {!!imageVariant && !customImageUrl && (
-      <div className={classify(css.image, classNames?.image)}>
-        {imageVariant === 'unauthorized' && <UnauthorizedImage />}
-        {imageVariant === 'forbidden' && <ForbiddenImage />}
-        {imageVariant === 'notFound' && <NotFoundImage />}
-        {imageVariant === 'serverError' && <ServerErrorImage />}
-      </div>
-    )}
-    {customImageUrl && (
-      <img
-        className={classify(css.image, classNames?.image)}
-        src={customImageUrl}
-        alt="Empty State"
-      />
-    )}
-    {!!heading && (
-      <div className={classify(css.heading, classNames?.heading)}>
-        {heading}
-      </div>
-    )}
-    {!!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 ErrorMessage: React$AbstractComponent<
+  ErrorMessageProps,
+  HTMLDivElement,
+> = React.forwardRef<ErrorMessageProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      children,
+      imageVariant,
+      title,
+      description,
+      customImageUrl,
+      heading,
+      ...props
+    }: ErrorMessageProps,
+    ref,
+  ): React.Node => (
+    <div
+      {...props}
+      data-testid="ErrorMessage"
+      className={classify(css.wrapper, classNames?.wrapper)}
+      ref={ref}
+    >
+      {!!imageVariant && !customImageUrl && (
+        <div className={classify(css.image, classNames?.image)}>
+          {imageVariant === 'unauthorized' && <UnauthorizedImage />}
+          {imageVariant === 'forbidden' && <ForbiddenImage />}
+          {imageVariant === 'notFound' && <NotFoundImage />}
+          {imageVariant === 'serverError' && <ServerErrorImage />}
+        </div>
+      )}
+      {customImageUrl && (
+        <img
+          className={classify(css.image, classNames?.image)}
+          src={customImageUrl}
+          alt="Empty State"
+        />
+      )}
+      {!!heading && (
+        <div className={classify(css.heading, classNames?.heading)}>
+          {heading}
+        </div>
+      )}
+      {!!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/InContextAlert/InContextAlert.js

@@ -75,7 +75,7 @@ const AlertIcon = _ref => {
       });
   }
 };
-const InContextAlert = props => {
+const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
     semantic = ALERT_SEMANTIC.neutral,
@@ -100,7 +100,8 @@ const InContextAlert = props => {
       [_InContextAlertModule.default.information]: semantic === ALERT_SEMANTIC.information,
       [_InContextAlertModule.default.warning]: semantic === ALERT_SEMANTIC.warning,
       [_InContextAlertModule.default.danger]: semantic === ALERT_SEMANTIC.danger
-    }, classNames?.wrapper)
+    }, classNames?.wrapper),
+    ref: ref
   }, /*#__PURE__*/React.createElement(AlertIcon, {
     semantic: semantic,
     leftIconName: leftIconName,
@@ -122,5 +123,5 @@ const InContextAlert = props => {
     onClick: closeClickHandler,
     className: _InContextAlertModule.default.closeIcon
   }))));
-};
+});
 exports.InContextAlert = InContextAlert;