baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/snackbar/snackbar-context.js

@@ -67,7 +67,8 @@ function fallbackHandler() {
   if (process.env.NODE_ENV !== "production") {
     console.warn('Snackbar context not found.');
   }
-}
+} // @ts-ignore
+
 
 var SnackbarContext = /*#__PURE__*/React.createContext({
   enqueue: fallbackHandler,
@@ -81,7 +82,8 @@ function useSnackbar() {
     enqueue: context.enqueue,
     dequeue: context.dequeue
   };
-}
+} // @ts-ignore
+
 
 function usePrevious(value) {
   var ref = React.useRef();
@@ -120,21 +122,24 @@ function SnackbarProvider(_ref) {
       containerHeight = _React$useState6[0],
       setContainerHeight = _React$useState6[1];
 
-  var containerRef = React.useRef(null);
+  var containerRef = React.useRef(null); // @ts-ignore
 
   function enqueue(elementProps) {
     var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
+    // @ts-ignore
     setSnackbars(function (prev) {
       return [].concat(_toConsumableArray(prev), [{
         elementProps: elementProps,
         duration: duration
       }]);
     });
-  }
+  } // @ts-ignore
+
 
   var prevSnackbars = usePrevious(snackbars) || [];
   React.useEffect(function () {
     if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      // @ts-ignore
       enter(snackbars[0].duration);
     }
   }, [snackbars, prevSnackbars]);
@@ -145,12 +150,14 @@ function SnackbarProvider(_ref) {
       var next = prev.slice(1);
 
       if (next.length > 0) {
+        // @ts-ignore
         enter(next[0].duration);
       }
 
       return next;
     });
-  }
+  } // @ts-ignore
+
 
   function enter(duration) {
     setAnimating(true);
@@ -166,12 +173,14 @@ function SnackbarProvider(_ref) {
       setAnimating(false);
       dequeue();
     }, 1000);
-  }
+  } // @ts-ignore
+
 
   function display(duration) {
     if (duration === _constants.DURATION.infinite) {
       return;
-    }
+    } // @ts-ignore
+
 
     timeoutRef.current = setTimeout(function () {
       exit();
@@ -179,14 +188,17 @@ function SnackbarProvider(_ref) {
   }
 
   function handleMouseEnter() {
+    // @ts-ignore
     clearTimeout(timeoutRef.current);
-  }
+  } // @ts-ignore
+
 
   function handleMouseLeave(duration) {
     display(duration);
   }
 
   function handleActionClick() {
+    // @ts-ignore
     clearTimeout(timeoutRef.current);
     exit();
   }
@@ -242,7 +254,8 @@ function SnackbarProvider(_ref) {
       left: '-10000px'
     }),
     ref: containerRef
-  }, snackbars[0] && /*#__PURE__*/React.createElement(_snackbarElement.default, _extends({}, snackbars[0].elementProps, {
+  }, snackbars[0] && /*#__PURE__*/React.createElement(_snackbarElement.default // @ts-ignore
+  , _extends({}, snackbars[0].elementProps, {
     overrides: _objectSpread(_objectSpread({}, snackbarOverrides), snackbars[0].elementProps.overrides),
     focus: false
   }))), snackbars.length > 0 && containerHeight !== 0 && /*#__PURE__*/React.createElement(_layer.Layer, null, /*#__PURE__*/React.createElement(PlacementContainer, _extends({
@@ -251,7 +264,8 @@ function SnackbarProvider(_ref) {
     $translateHeight: translateHeight
   }, placementContainerProps), /*#__PURE__*/React.createElement("div", {
     role: "alert",
-    onMouseEnter: handleMouseEnter,
+    onMouseEnter: handleMouseEnter // @ts-ignore
+    ,
     onMouseLeave: function onMouseLeave() {
       return handleMouseLeave(snackbars[0].duration);
     },
@@ -259,9 +273,12 @@ function SnackbarProvider(_ref) {
       display: 'inline',
       pointerEvents: 'all'
     })
-  }, /*#__PURE__*/React.createElement(_snackbarElement.default, _extends({}, snackbars[0].elementProps, {
+  }, /*#__PURE__*/React.createElement(_snackbarElement.default // @ts-ignore
+  , _extends({}, snackbars[0].elementProps, {
     actionOnClick: function actionOnClick(event) {
+      // @ts-ignore
       if (snackbars[0].elementProps.actionOnClick) {
+        // @ts-ignore
         snackbars[0].elementProps.actionOnClick(event);
       }
 

package/snackbar/snackbar-element.js

@@ -184,12 +184,15 @@ function SnackbarElement(_ref2) {
   React.useEffect(function () {
     if (typeof document !== 'undefined') {
       if (focus && actionButtonRef.current) {
-        prevFocusRef.current = document.activeElement;
+        // @ts-ignore
+        prevFocusRef.current = document.activeElement; // @ts-ignore
+
         actionButtonRef.current.focus();
       }
 
       return function () {
         if (prevFocusRef.current) {
+          // @ts-ignore
           prevFocusRef.current.focus();
         }
       };

package/snackbar/styled-components.js

@@ -100,7 +100,7 @@ var StyledActionButtonContainer = (0, _styles.styled)('div', function (_ref6) {
 });
 exports.StyledActionButtonContainer = StyledActionButtonContainer;
 StyledActionButtonContainer.displayName = "StyledActionButtonContainer";
-StyledActionButtonContainer.displayName = 'StyledActionButtonContainer';
+StyledActionButtonContainer.displayName = 'StyledActionButtonContainer'; // @ts-ignore
 
 function placementRules(placement) {
   switch (placement) {

package/snackbar/types.d.ts

@@ -1,9 +1,9 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { DURATION, PLACEMENT } from './constants';
-export declare type Duration = typeof DURATION.infinite | typeof DURATION.short | typeof DURATION.medium | typeof DURATION.long;
-export declare type Placement = typeof PLACEMENT.topLeft | typeof PLACEMENT.top | typeof PLACEMENT.topRight | typeof PLACEMENT.bottomLeft | typeof PLACEMENT.bottom | typeof PLACEMENT.bottomRight;
-export declare type SnackbarElementOverrides = {
+export type Duration = typeof DURATION.infinite | typeof DURATION.short | typeof DURATION.medium | typeof DURATION.long;
+export type Placement = typeof PLACEMENT.topLeft | typeof PLACEMENT.top | typeof PLACEMENT.topRight | typeof PLACEMENT.bottomLeft | typeof PLACEMENT.bottom | typeof PLACEMENT.bottomRight;
+export type SnackbarElementOverrides = {
     Root?: Override;
     Content?: Override;
     StartEnhancerContainer?: Override;
@@ -12,7 +12,7 @@ export declare type SnackbarElementOverrides = {
     WrapActionButtonContainer?: Override;
     ActionButtonContainer?: Override;
 };
-export declare type SnackbarElementProps = {
+export type SnackbarElementProps = {
     actionMessage?: string;
     actionOnClick?: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     focus?: boolean;
@@ -23,7 +23,7 @@ export declare type SnackbarElementProps = {
         size: number;
     }>;
 };
-export declare type SnackbarProviderProps = {
+export type SnackbarProviderProps = {
     children?: React.ReactNode;
     overrides?: {
         PlacementContainer?: Override;

package/spinner/styled-components.js

@@ -42,6 +42,7 @@ var StyledSpinner = (0, _styles.styled)('i', function (_ref) {
   }[$size];
 
   if (!borderSize) {
+    // @ts-ignore
     borderSize = $theme.sizing[$borderWidth];
 
     if (!borderSize) {
@@ -51,6 +52,7 @@ var StyledSpinner = (0, _styles.styled)('i', function (_ref) {
   }
 
   if (!boxSize) {
+    // @ts-ignore
     boxSize = $theme.sizing[$size];
 
     if (!boxSize) {

package/spinner/types.d.ts

@@ -1,7 +1,7 @@
 import type { SIZE } from './constants';
 import type { Sizing } from '../themes/types';
-export declare type Size = keyof typeof SIZE;
-export declare type SpinnerProps = {
+export type Size = keyof typeof SIZE;
+export type SpinnerProps = {
     /** Color of progress indicator */
     $color?: string;
     /** Width of the progress indicator "stroke".  */

package/stepper/styled-components.js

@@ -9,7 +9,6 @@ var _styles = require("../styles");
 
 /*
 Copyright (c) Uber Technologies, Inc.
-
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */

package/stepper/types.d.ts

@@ -1,5 +1,5 @@
 import type { Override } from '../helpers/overrides';
-export declare type MobileHeaderOverrides = {
+export type MobileHeaderOverrides = {
     Root?: Override;
     Input?: Override;
     DecrementButton?: Override;
@@ -7,7 +7,7 @@ export declare type MobileHeaderOverrides = {
     IncrementButton?: Override;
     IncrementButtonIcon?: Override;
 };
-export declare type StepperProps = {
+export type StepperProps = {
     value: number;
     setValue: (newValue: number) => void;
     minValue?: number;

package/styles/__mocks__/styled.js

@@ -58,7 +58,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var MOCK_THEME = (0, _createMockTheme.default)(_themes.LightTheme);
+var MOCK_THEME = (0, _createMockTheme.default)(_themes.LightTheme); // @ts-ignore
 
 var IDENTITY = function IDENTITY(x) {
   return x;
@@ -110,6 +110,7 @@ function styled(ElementName) {
 
         return Object.keys(restProps).reduce(function (acc, key) {
           if (key[0] !== '$') {
+            // @ts-ignore
             acc[key] = restProps[key];
           }
 
@@ -163,9 +164,13 @@ function styled(ElementName) {
     base: ElementName
   };
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(MockStyledComponent, _extends({
-      forwardedRef: ref
-    }, props));
+    return (
+      /*#__PURE__*/
+      // @ts-ignore
+      React.createElement(MockStyledComponent, _extends({
+        forwardedRef: ref
+      }, props))
+    );
   });
 }
 

package/styles/as-primary-export-hoc.js

@@ -24,8 +24,10 @@ function asPrimaryExport(StyledComponent, propsTransformNames) {
   return function withStyledPropsHOC(props) {
     var styledProps = Object.keys(props).reduce(function (acc, key) {
       if (key[0] === '$' || propsTransformNames.indexOf(key) < 0) {
+        // @ts-ignore
         acc[key] = props[key];
       } else if (propsTransformNames.indexOf(key) >= 0) {
+        // @ts-ignore
         acc['$' + key] = props[key];
       }
 

package/styles/styled.d.ts

@@ -3,13 +3,13 @@ import type { StyletronComponent } from 'styletron-react';
 import type { StyleObject } from 'styletron-standard';
 import type { Theme } from './types';
 export type { StyletronComponent };
-declare type StyleFn<DefaultTheme> = {
+type StyleFn<DefaultTheme> = {
     <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, P extends {}, Theme = DefaultTheme>(component: C, style: StyleObject | ((props: Omit<P, '$theme'> & {
         $theme: Theme;
     }) => StyleObject)): StyletronComponent<C, P>;
     <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(component: C, style: StyleObject): StyletronComponent<C, {}>;
 };
-declare type WithStyleFn<DefaultTheme> = {
+type WithStyleFn<DefaultTheme> = {
     <C extends StyletronComponent<any, any>, P extends {}, Theme = DefaultTheme>(component: C, style: ((props: Omit<P, '$theme'> & {
         $theme: Theme;
     } & (C extends StyletronComponent<infer CC, infer PP> ? PP : never)) => StyleObject) | StyleObject): C extends StyletronComponent<infer CC, infer PP> ? StyletronComponent<CC, P & PP> : never;
@@ -19,13 +19,13 @@ export declare function createThemedStyled<Theme>(): StyleFn<Theme>;
 export declare const styled: StyleFn<Theme>;
 export declare function createThemedWithStyle<Theme>(): WithStyleFn<Theme>;
 export declare const withStyle: WithStyleFn<Theme>;
-declare type UseStyletronFn<Theme> = () => [(a: StyleObject) => string, Theme];
+type UseStyletronFn<Theme> = () => [(a: StyleObject) => string, Theme];
 export declare function createThemedUseStyletron<Theme>(): UseStyletronFn<Theme>;
 export declare const useStyletron: UseStyletronFn<Theme>;
 export declare function withWrapper<C extends StyletronComponent<any, any>, Props>(StyledElement: C, wrapperFn: (component: C) => (props: Props & (C extends StyletronComponent<any, infer CP> ? CP : never)) => React.ReactElement): C extends StyletronComponent<infer D, infer P> ? StyletronComponent<D, P & Props> : never;
 /** @deprecated use StyleFn instead. To be removed in future versions.*/
-export declare type StyletronStyledFn<T> = StyleFn<T>;
+export type StyletronStyledFn<T> = StyleFn<T>;
 /** @deprecated use WithStyleFn instead. To be removed in future versions.*/
-export declare type StyletronWithStyleFn<T> = WithStyleFn<T>;
+export type StyletronWithStyleFn<T> = WithStyleFn<T>;
 /** @deprecated use StyleFn instead. To be removed in future versions.*/
-export declare type StyledFn<T> = StyleFn<T>;
+export type StyledFn<T> = StyleFn<T>;

package/styles/styled.js

@@ -43,6 +43,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 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); }
 
+// @ts-ignore
 var wrapper = function wrapper(StyledComponent) {
   // eslint-disable-next-line react/display-name
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -94,6 +95,7 @@ var useStyletron = createThemedUseStyletron(); // eslint-disable-next-line @type
 exports.useStyletron = useStyletron;
 
 function withWrapper(StyledElement, wrapperFn) {
+  // @ts-ignore
   return (0, _styletronReact.withWrapper)(StyledElement, function (Styled) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     return /*#__PURE__*/React.forwardRef(function (props, ref) {

package/styles/theme-provider.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { Theme } from './types';
 export declare const ThemeContext: React.Context<Theme>;
-export declare type ThemeProviderProps = {
+export type ThemeProviderProps = {
     theme: Theme;
 };
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
 export default ThemeProvider;

package/styles/types.d.ts

@@ -2,8 +2,8 @@ import type { ComponentType } from 'react';
 import type { IconProps } from '../icon';
 import type { ColorTokens, ComponentColorTokens, SemanticColorTokens, Animation, Breakpoints, Border, Borders, Font, Grid, Lighting, MediaQuery, Sizing, Typography, ZIndex } from '../themes';
 export type { Animation, Breakpoints, Border, Borders, Font, Grid, Lighting, MediaQuery, Sizing, Typography, ZIndex, };
-export declare type Colors = {} & ColorTokens & ComponentColorTokens & SemanticColorTokens;
-export declare type Theme = {
+export type Colors = {} & ColorTokens & ComponentColorTokens & SemanticColorTokens;
+export type Theme = {
     name: string;
     animation: Animation;
     borders: Borders;
@@ -18,13 +18,14 @@ export declare type Theme = {
     typography: Typography;
     zIndex: ZIndex;
 };
-export declare type Icon = {
+export type Icon = {
     Alert?: ComponentType<IconProps>;
     ArrowDown?: ComponentType<IconProps>;
     ArrowLeft?: ComponentType<IconProps>;
     ArrowRight?: ComponentType<IconProps>;
     ArrowUp?: ComponentType<IconProps>;
     Blank?: ComponentType<IconProps>;
+    Calendar?: ComponentType<IconProps>;
     CheckIndeterminate?: ComponentType<IconProps>;
     Check?: ComponentType<IconProps>;
     ChevronDown?: ComponentType<IconProps>;

package/styles/types.js.flow

@@ -74,6 +74,7 @@ export type IconT = {
   ArrowRight?: ComponentType<IconPropsT>,
   ArrowUp?: ComponentType<IconPropsT>,
   Blank?: ComponentType<IconPropsT>,
+  Calendar?: ComponentType<IconPropsT>,
   CheckIndeterminate?: ComponentType<IconPropsT>,
   Check?: ComponentType<IconPropsT>,
   ChevronDown?: ComponentType<IconPropsT>,

package/system-banner/index.d.ts

@@ -0,0 +1,2 @@
+export { SystemBanner } from './system-banner';
+export * from './styled-components';

package/system-banner/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  SystemBanner: true
+};
+Object.defineProperty(exports, "SystemBanner", {
+  enumerable: true,
+  get: function get() {
+    return _systemBanner.SystemBanner;
+  }
+});
+
+var _systemBanner = require("./system-banner");
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});

package/system-banner/index.js.flow

@@ -0,0 +1,51 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
+import { type StyletronComponent } from 'styletron-react';
+
+import {
+  typeof StyledRoot as StyledRootType,
+  typeof StyledLeadingContent as StyledLeadingContentType,
+  typeof StyledTrailingIconButton as StyledTrailingIconButtonType,
+  typeof StyledMessageContent as StyledMessageContentType,
+  type OverridesT as BannerOverridesT,
+} from '../banner';
+
+export type SystemBannerOverridesT = BannerOverridesT;
+
+export type SystemBannerPropsT = {
+  artworkIcon?: ({ size: string }) => React.Node,
+  primaryAction?: {
+    icon?: ({ size: string }) => React.Node,
+    label: string,
+    onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
+  },
+  secondaryAction?: {
+    icon?: ({ size: string }) => React.Node,
+    onClick?: (SyntheticEvent<HTMLButtonElement>) => mixed,
+    label: string,
+  },
+  overrides?: SystemBannerOverridesT,
+};
+
+declare export var StyledRoot: StyletronComponent<
+  StyledRootType,
+  { $isButton: boolean, $backgroundColor: string, $color: string }
+>;
+declare export var StyledLeadingContent: StyletronComponent<
+  StyledLeadingContentType,
+  { $includesArtwork: boolean }
+>;
+declare export var StyledTrailingIconButton: StyletronComponent<StyledTrailingIconButtonType, {}>;
+declare export var StyledMessageContent: StyletronComponent<StyledMessageContentType, {}>;
+
+declare export var SystemBanner: React.ComponentType<SystemBannerPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/system-banner/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/system-banner/index.js"
+}

package/system-banner/styled-components.d.ts

@@ -0,0 +1,16 @@
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
+    $isButton: boolean;
+} & {
+    $backgroundColor: string;
+    $color: string;
+    $nested: boolean;
+}>;
+export declare const StyledLeadingContent: import("styletron-react").StyletronComponent<"div", {
+    $includesArtwork: boolean;
+}>;
+export declare const StyledTrailingIconButton: import("styletron-react").StyletronComponent<"button", {
+    $nested: boolean;
+}>;
+export declare const StyledMessageContent: import("styletron-react").StyletronComponent<"div", {
+    $actionPosition: import("../banner").ActionPosition;
+}>;

package/system-banner/styled-components.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTrailingIconButton = exports.StyledRoot = exports.StyledMessageContent = exports.StyledLeadingContent = void 0;
+
+var _styles = require("../styles");
+
+var _banner = require("../banner");
+
+var _responsiveHelpers = require("../helpers/responsive-helpers");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var StyledRoot = (0, _styles.withStyle)(_banner.StyledRoot, function (_ref) {
+  var $isButton = _ref.$isButton,
+      $theme = _ref.$theme;
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, $isButton ? {
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    },
+    // button style reset
+    '-webkit-appearance': 'none',
+    textAlign: 'inherit',
+    boxShadow: 'none',
+    cursor: 'pointer',
+    border: 'none',
+    alignItems: 'center'
+  } : {}), (0, _responsiveHelpers.getMediaQueryPageMargins)($theme)), (0, _responsiveHelpers.getMinimumPageMargins)($theme.grid.margins)), {}, {
+    borderRadius: 0,
+    margin: 0
+  });
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledLeadingContent = (0, _styles.withStyle)(_banner.StyledLeadingContent, function () {
+  return {
+    padding: 0
+  };
+});
+exports.StyledLeadingContent = StyledLeadingContent;
+StyledLeadingContent.displayName = "StyledLeadingContent";
+StyledLeadingContent.displayName = 'StyledLeadingContent';
+var StyledTrailingIconButton = (0, _styles.withStyle)(_banner.StyledTrailingIconButton, function () {
+  return {
+    ':hover': {
+      boxShadow: 'none'
+    },
+    ':active': {
+      boxShadow: 'none'
+    }
+  };
+});
+exports.StyledTrailingIconButton = StyledTrailingIconButton;
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
+StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';
+var StyledMessageContent = (0, _styles.withStyle)(_banner.StyledMessageContent, function () {
+  return {
+    // button styles reset
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontStyle: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit',
+    cursor: 'pointer',
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    }
+  };
+});
+exports.StyledMessageContent = StyledMessageContent;
+StyledMessageContent.displayName = "StyledMessageContent";
+StyledMessageContent.displayName = 'StyledMessageContent';

package/system-banner/system-banner.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SystemBannerProps } from './types';
+export declare function SystemBanner(props: SystemBannerProps): JSX.Element;