baseui 0.0.0-next-dfcb85a → 0.0.0-next-5961c4d

package/README.md

@@ -58,11 +58,7 @@ export default function Hello () {
 }
 ```
 
-Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages:
-
-```bash
-yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic
-```
+Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions.
 
 ## Docs
 

package/a11y/a11y.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export default function A11y(props: {
+    children: React.ReactNode;
+}): JSX.Element;

package/a11y/a11y.js

@@ -11,11 +11,11 @@ var React = _interopRequireWildcard(require("react"));
 
 var _axeCore = _interopRequireDefault(require("axe-core"));
 
-var _index = require("../layer/index");
+var _layer = require("../layer");
 
-var _index2 = require("../typography/index");
+var _typography = require("../typography");
 
-var _index3 = require("../styles/index");
+var _styles = require("../styles");
 
 var _themeProvider = require("../styles/theme-provider");
 
@@ -51,9 +51,13 @@ function validateNode(node) {
 function segmentViolationsByNode(violations) {
   var nodes = violations.reduce(function (map, violation) {
     violation.nodes.forEach(function (node) {
+      // @ts-expect-error todo(flow-ts) node.target is an Array
       if (!map[node.target]) {
+        // @ts-expect-error todo(flow-ts) node.target is an Array
         map[node.target] = [violation];
       } else {
+        // todo(flow->ts) node.target is an Array
+        // @ts-expect-error todo(flow-ts) result of Array.push is not Array
         map[node.target] = map[node.target].push(violation);
       }
     });
@@ -62,7 +66,7 @@ function segmentViolationsByNode(violations) {
   return Object.entries(nodes);
 }
 
-var ViolationContainer = (0, _index3.styled)('div', function (_ref) {
+var ViolationContainer = (0, _styles.styled)('div', function (_ref) {
   var $theme = _ref.$theme,
       $top = _ref.$top,
       $left = _ref.$left;
@@ -129,19 +133,19 @@ function Violation(props) {
     };
   }, [props.target]);
   if (!isHovered) return null;
-  return /*#__PURE__*/React.createElement(_index.Layer, null, /*#__PURE__*/React.createElement(_index.TetherBehavior, {
+  return /*#__PURE__*/React.createElement(_layer.Layer, null, /*#__PURE__*/React.createElement(_layer.TetherBehavior, {
     anchorRef: anchor,
     popperRef: popper,
     onPopperUpdate: function onPopperUpdate(update) {
       return setOffset(update.popper);
     },
-    placement: _index.TETHER_PLACEMENT.bottom
+    placement: _layer.TETHER_PLACEMENT.bottom
   }, /*#__PURE__*/React.createElement(ViolationContainer, {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(_index2.ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(_index2.ParagraphSmall, {
+  }, /*#__PURE__*/React.createElement(_typography.ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(_typography.ParagraphSmall, {
       key: index
     }, violation.description);
   }))));
@@ -180,14 +184,10 @@ function A11y(props) {
         node = _ref3[0],
         violations = _ref3[1];
 
-    return (
-      /*#__PURE__*/
-      // flowlint-next-line unclear-type:off
-      React.createElement(Violation, {
-        target: node,
-        violations: violations,
-        key: index
-      })
-    );
+    return /*#__PURE__*/React.createElement(Violation, {
+      target: node,
+      violations: violations,
+      key: index
+    });
   })));
 }

package/a11y/index.d.ts

@@ -0,0 +1 @@
+export { default as Unstable_A11y } from './a11y';

package/a11y/types.d.ts

@@ -0,0 +1,5 @@
+import type { Result } from 'axe-core';
+export declare type ViolationProps = {
+    target: string;
+    violations: Result[];
+};

package/accordion/accordion.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { AccordionProps, AccordionState, StateChangeType } from './types';
+export default class Accordion extends React.Component<AccordionProps, AccordionState> {
+    static defaultProps: Partial<AccordionProps>;
+    state: {
+        expanded: React.Key[];
+    };
+    itemRefs: React.RefObject<HTMLDivElement>[];
+    onPanelChange(key: React.Key, onChange: (...args: any[]) => {}, ...args: Array<any>): void;
+    internalSetState(type: StateChangeType, changes: AccordionState): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    getItems(): any;
+    render(): JSX.Element;
+}

package/accordion/accordion.js

@@ -94,8 +94,11 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
   _createClass(Accordion, [{
     key: "onPanelChange",
-    value: //flowlint-next-line unclear-type:off
-    function onPanelChange(key, onChange) {
+    value: function onPanelChange(key, onChange) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+        args[_key2 - 2] = arguments[_key2];
+      }
+
       var activeKeys = this.state.expanded;
       var accordion = this.props.accordion;
 
@@ -119,10 +122,6 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       };
       this.internalSetState(_constants.STATE_CHANGE_TYPE.expand, newState); // Call individual panel's onChange handler
 
-      for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-        args[_key2 - 2] = arguments[_key2];
-      }
-
       if (typeof onChange === 'function') onChange.apply(void 0, args);
     }
   }, {
@@ -196,8 +195,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props2.disabled,
           children = _this$props2.children,
           renderAll = _this$props2.renderAll,
-          overrides = _this$props2.overrides; // flowlint-next-line unclear-type:off
-
+          overrides = _this$props2.overrides;
       return React.Children.map(children, function (child, index) {
         if (!child) return;
         var itemRef = /*#__PURE__*/React.createRef();

package/accordion/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const STATE_CHANGE_TYPE: {
+    readonly expand: "expand";
+};

package/accordion/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Accordion } from './accordion';
+export { default as Panel } from './panel';
+export { default as StatefulPanel } from './stateful-panel';
+export { default as StatefulPanelContainer } from './stateful-panel-container';
+export { default as StatelessAccordion } from './stateless-accordion';
+export { STATE_CHANGE_TYPE } from './constants';
+export { Root as StyledRoot, PanelContainer as StyledPanelContainer, Header as StyledHeader, Content as StyledContent, ContentAnimationContainer as StyledContentAnimationContainer, ToggleIcon as StyledToggleIcon, ToggleIconGroup as StyledToggleIconGroup, } from './styled-components';
+export * from './types';
+export type { AccordionLocale } from './locale';

package/accordion/locale.d.ts

@@ -0,0 +1,9 @@
+export declare type AccordionLocale = {
+    collapse: string;
+    expand: string;
+};
+declare const locale: {
+    collapse: string;
+    expand: string;
+};
+export default locale;

package/accordion/panel.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const ForwardedPanel: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    disabled?: boolean;
+    'aria-controls'?: string;
+    key?: React.Key;
+    onChange?: import("./types").OnChangeHandler;
+    onClick?: (e: Event) => unknown;
+    onKeyDown?: (e: KeyboardEvent) => unknown;
+    overrides?: import("./types").PanelOverrides;
+    title?: React.ReactNode;
+    renderPanelContent?: boolean;
+    renderAll?: boolean;
+} & {
+    expanded?: boolean;
+} & React.RefAttributes<HTMLElement>>;
+export default ForwardedPanel;

package/accordion/panel.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _index = require("../locale/index");
+var _locale = require("../locale");
 
 var _overrides = require("../helpers/overrides");
 
@@ -114,7 +114,7 @@ var Panel = function Panel(_ref, ref) {
     }
 
     typeof onKeyDown === 'function' && onKeyDown(e);
-  }, [expanded, disabled, onChange, onKeyDown]); // flowlint-next-line unclear-type:off
+  }, [expanded, disabled, onChange, onKeyDown]);
 
   var _animateRef = React.useRef(null);
 
@@ -200,7 +200,7 @@ var Panel = function Panel(_ref, ref) {
       ToggleIcon = _getOverrides12[0],
       toggleIconProps = _getOverrides12[1];
 
-  return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
+  return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
     return /*#__PURE__*/React.createElement(PanelContainer, _extends({}, sharedProps, panelContainerProps), /*#__PURE__*/React.createElement(Header, _extends({
       tabIndex: 0,
       role: "button",

package/accordion/stateful-panel-container.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { PanelState, StatefulPanelContainerProps, PanelStateReducer, StateChangeType, OnChangeHandler } from './types';
+declare class StatefulPanelContainer extends React.Component<StatefulPanelContainerProps, PanelState> {
+    static defaultProps: {
+        initialState: {
+            expanded: boolean;
+        };
+        stateReducer: PanelStateReducer;
+        onChange: () => void;
+    };
+    state: {
+        expanded: boolean;
+    };
+    onChange: OnChangeHandler;
+    internalSetState(type: StateChangeType, changes: PanelState): void;
+    render(): React.ReactNode;
+}
+export default StatefulPanelContainer;

package/accordion/stateful-panel.d.ts

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

package/accordion/stateless-accordion.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { StatelessAccordionProps } from './types';
+declare function StatelessAccordion({ accordion, children, disabled, expanded, onChange, overrides, renderAll, }: StatelessAccordionProps): JSX.Element;
+export default StatelessAccordion;

package/accordion/styled-components.d.ts

@@ -0,0 +1,13 @@
+import type { SharedStylePropsArg } from './types';
+/**
+ * Main component container element
+ */
+export declare const Root: import("styletron-react").StyletronComponent<"ul", {}>;
+export declare const PanelContainer: import("styletron-react").StyletronComponent<"li", SharedStylePropsArg>;
+export declare const Header: import("styletron-react").StyletronComponent<"div", SharedStylePropsArg>;
+export declare const ToggleIcon: import("styletron-react").StyletronComponent<"svg", SharedStylePropsArg>;
+export declare const ToggleIconGroup: import("styletron-react").StyletronComponent<"g", SharedStylePropsArg>;
+export declare const Content: import("styletron-react").StyletronComponent<"div", SharedStylePropsArg>;
+export declare const ContentAnimationContainer: import("styletron-react").StyletronComponent<"div", {
+    $height: string | number;
+} & SharedStylePropsArg>;

package/accordion/styled-components.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToggleIconGroup = exports.ToggleIcon = exports.Root = exports.PanelContainer = exports.Header = exports.ContentAnimationContainer = exports.Content = void 0;
 
-var _index = require("../styles/index");
+var _styles = require("../styles");
 
 var _styledComponents = require("../icon/styled-components");
 
@@ -18,7 +18,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /**
  * Main component container element
  */
-var Root = (0, _index.styled)('ul', {
+var Root = (0, _styles.styled)('ul', {
   listStyleType: 'none',
   marginBottom: 0,
   marginTop: 0,
@@ -28,7 +28,7 @@ var Root = (0, _index.styled)('ul', {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-var PanelContainer = (0, _index.styled)('li', function (props) {
+var PanelContainer = (0, _styles.styled)('li', function (props) {
   var $expanded = props.$expanded,
       colors = props.$theme.colors;
   return {
@@ -41,7 +41,7 @@ var PanelContainer = (0, _index.styled)('li', function (props) {
 });
 exports.PanelContainer = PanelContainer;
 PanelContainer.displayName = "PanelContainer";
-var Header = (0, _index.styled)('div', function (props) {
+var Header = (0, _styles.styled)('div', function (props) {
   var $disabled = props.$disabled,
       $isFocusVisible = props.$isFocusVisible,
       _props$$theme = props.$theme,
@@ -72,7 +72,7 @@ var Header = (0, _index.styled)('div', function (props) {
 });
 exports.Header = Header;
 Header.displayName = "Header";
-var ToggleIcon = (0, _index.styled)('svg', function (props) {
+var ToggleIcon = (0, _styles.styled)('svg', function (props) {
   var $theme = props.$theme,
       $disabled = props.$disabled,
       $color = props.$color;
@@ -84,7 +84,7 @@ var ToggleIcon = (0, _index.styled)('svg', function (props) {
 });
 exports.ToggleIcon = ToggleIcon;
 ToggleIcon.displayName = "ToggleIcon";
-var ToggleIconGroup = (0, _index.styled)('g', function (props) {
+var ToggleIconGroup = (0, _styles.styled)('g', function (props) {
   var $theme = props.$theme,
       $expanded = props.$expanded;
   return {
@@ -97,7 +97,7 @@ var ToggleIconGroup = (0, _index.styled)('g', function (props) {
 });
 exports.ToggleIconGroup = ToggleIconGroup;
 ToggleIconGroup.displayName = "ToggleIconGroup";
-var Content = (0, _index.styled)('div', function (props) {
+var Content = (0, _styles.styled)('div', function (props) {
   var _props$$theme2 = props.$theme,
       animation = _props$$theme2.animation,
       colors = _props$$theme2.colors,
@@ -127,7 +127,7 @@ var Content = (0, _index.styled)('div', function (props) {
 });
 exports.Content = Content;
 Content.displayName = "Content";
-var ContentAnimationContainer = (0, _index.styled)('div', function (props) {
+var ContentAnimationContainer = (0, _styles.styled)('div', function (props) {
   var $height = props.$height,
       animation = props.$theme.animation;
   return {

package/accordion/types.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import { STATE_CHANGE_TYPE } from './constants';
+export declare type AccordionState = {
+    expanded: Array<React.Key>;
+};
+export declare type PanelState = {
+    expanded: boolean;
+};
+export declare type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
+export declare type StateReducer = (stateChangeType: StateChangeType, nextState: AccordionState, currentState: AccordionState) => AccordionState;
+export declare type PanelStateReducer = (stateChangeType: StateChangeType, nextState: PanelState, currentState: PanelState) => PanelState;
+export declare type AccordionOverrides = {
+    Content?: Override;
+    ContentAnimationContainer?: Override;
+    Header?: Override;
+    PanelContainer?: Override;
+    Root?: Override;
+    ToggleIcon?: Override;
+    ToggleIconGroup?: Override;
+};
+export declare type PanelOverrides = {
+    PanelContainer?: Override;
+    Header?: Override;
+    ToggleIcon?: Override;
+    ToggleIconGroup?: Override;
+    Content?: Override;
+    ContentAnimationContainer?: Override;
+};
+export declare type OnChangeHandler = (a: {
+    expanded: boolean;
+}) => unknown;
+export declare type AccordionOnChangeHandler = (a: {
+    expanded: Array<React.Key>;
+}) => unknown;
+declare type Children = Array<React.ReactElement<any>> | React.ReactElement<any>;
+export declare type AccordionProps = {
+    /** Determines how many panels may be expanded at a time. If set to
+     * true it will collapse a current panel when a new panel is expanded.
+     * If set to false more than one panel may be expanded at a time. */
+    accordion?: boolean;
+    /** Accordion expandable items. See Panel API below for reference. */
+    children: Children;
+    /** If set to true all its children panels will be disabled from toggling. */
+    disabled?: boolean;
+    initialState?: AccordionState;
+    /** Handler called each time a panel is toggled. expanded prop is an array
+     * of Panel keys that are currently expanded. */
+    onChange?: AccordionOnChangeHandler;
+    overrides?: AccordionOverrides;
+    /** Handler called each time the component state changes.
+     * Used to override default state-change functionality. */
+    stateReducer: StateReducer;
+    /**
+     * Allows users to render all child content whether a panel is expanded or not
+     * for SEO purposed
+     */
+    renderAll?: boolean;
+};
+export declare type StatelessAccordionOnChangeHandler = (a: {
+    expanded: Array<React.Key>;
+    key: React.Key;
+}) => unknown;
+export declare type StatelessAccordionProps = {
+    /** Determines how many panels may be expanded at a time. If set to
+     * true it will collapse a current panel when a new panel is expanded.
+     * If set to false more than one panel may be expanded at a time. */
+    accordion?: boolean;
+    /** Accordion expandable items. See Panel API below for reference. */
+    children: Children;
+    /** If set to true all its children panels will be disabled from toggling. */
+    disabled?: boolean;
+    /** List of Panel keys which are expanded. */
+    expanded: Array<React.Key>;
+    /** Handler called each time a panel is toggled. */
+    onChange?: StatelessAccordionOnChangeHandler;
+    overrides?: AccordionOverrides & PanelOverrides;
+    /**
+     * Allows users to render all child content whether a panel is expanded or not
+     * for SEO purposed
+     */
+    renderPanelContent?: boolean;
+    /**
+     * Allows users to render all child content whether a panel is expanded or not
+     * for SEO purposed
+     */
+    renderAll?: boolean;
+};
+declare type SharedPanelProps = {
+    /** The content visible when Panel is expanded. */
+    children: React.ReactNode;
+    /** Defaults to the disabled value provided by the parent Accordion component. */
+    disabled?: boolean;
+    /** Id for a panel, when provided populates aria-controls
+     * attribute for panel button and content
+     * */
+    'aria-controls'?: string;
+    /** The key of a Panel. Used to maintain list of expanded panels.
+     * Must be unique across children of the Accordion. */
+    key?: React.Key;
+    /** Handler for individual Panel change events. */
+    onChange?: OnChangeHandler;
+    /** Handler for the Header's click events. */
+    onClick?: (e: Event) => unknown;
+    /** Handler for the Header's keyDown events. */
+    onKeyDown?: (e: KeyboardEvent) => unknown;
+    overrides?: PanelOverrides;
+    /** The title of an accordion panel. */
+    title?: React.ReactNode;
+    /**
+     * Allows users to render all child content whether a panel is expanded or not
+     * for SEO purposed
+     */
+    renderPanelContent?: boolean;
+    /**
+     * Allows users to render all child content whether a panel is expanded or not
+     * for SEO purposed
+     */
+    renderAll?: boolean;
+};
+export declare type PanelProps = SharedPanelProps & {
+    /** Defines if the panel is expanded. If set to true the panel is rendered expanded. */
+    expanded?: boolean;
+};
+declare type SharedStatefulPanelContainerProps = {
+    /** Initial state of a stateful panel component.
+     * The expanded prop indicates if the panel is initially expanded.
+     * If set to true the panel will be expanded initially */
+    initialState?: PanelState;
+    onChange?: OnChangeHandler;
+    stateReducer?: PanelStateReducer;
+};
+export declare type StatefulPanelContainerProps = SharedStatefulPanelContainerProps & {
+    children: (props: Omit<PanelProps, 'children'>) => React.ReactNode;
+};
+export declare type StatefulPanelProps = SharedStatefulPanelContainerProps & SharedPanelProps;
+export declare type SharedStylePropsArg = {
+    $color?: string;
+    $disabled: boolean | undefined | null;
+    $expanded?: boolean | null;
+    $size?: string | number;
+    $isFocusVisible: boolean;
+};
+export {};

package/app-nav-bar/app-nav-bar.d.ts

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

package/app-nav-bar/app-nav-bar.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _overrides = require("../helpers/overrides");
 
-var _index = require("../styles/index");
+var _styles = require("../styles");
 
 var _focusVisible = require("../utils/focusVisible");
 
@@ -136,7 +136,7 @@ function SecondaryMenu(props) {
 }
 
 function AppNavBar(props) {
-  var _useStyletron = (0, _index.useStyletron)(),
+  var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
       theme = _useStyletron2[1];
@@ -202,7 +202,8 @@ function AppNavBar(props) {
     className: css(_defineProperty({}, "@media screen and (min-width: ".concat(theme.breakpoints.large, "px)"), {
       display: 'none'
     }))
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(_mobileMenu.default, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)), secondaryMenu && mobileSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
+  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(_mobileMenu.default, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)), secondaryMenu && // @ts-expect-error todo(flow->ts) always false
+  mobileSubNavPosition === _constants.POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
     items: secondaryMenu,
     mapItemToNode: mapItemToNode,
     onSelect: onMainItemSelect,

package/app-nav-bar/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const POSITION: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+export declare const KIND: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+};

package/app-nav-bar/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AppNavBar } from './app-nav-bar';
+export { POSITION } from './constants';
+export * from './styled-components';
+export * from './types';
+export { setItemActive } from './utils';

package/app-nav-bar/mobile-menu.d.ts

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

package/app-nav-bar/mobile-menu.js

@@ -9,9 +9,9 @@ exports.default = MobileMenu;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _index = require("../button/index");
+var _button = require("../button");
 
-var _index2 = require("../drawer/index");
+var _drawer = require("../drawer");
 
 var _overrides = require("../helpers/overrides");
 
@@ -19,9 +19,9 @@ var _arrowLeft = _interopRequireDefault(require("../icon/arrow-left"));
 
 var _menu = _interopRequireDefault(require("../icon/menu"));
 
-var _index3 = require("../list/index");
+var _list = require("../list");
 
-var _index4 = require("../menu/index");
+var _menu2 = require("../menu");
 
 var _styledComponents = require("./styled-components");
 
@@ -88,11 +88,11 @@ var MobileNavMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       userMenuProfileListItemProps = _getOverrides2[1];
 
   if (item.PARENT_MENU_ITEM) {
-    return /*#__PURE__*/React.createElement(_index3.MenuAdapter, _extends({}, restProps, {
+    return /*#__PURE__*/React.createElement(_list.MenuAdapter, _extends({}, restProps, {
       ref: ref,
       artwork: item.navExitIcon || _arrowLeft.default,
-      artworkSize: _index3.ARTWORK_SIZES.LARGE
-    }), /*#__PURE__*/React.createElement(_index3.ListItemLabel, null, item.label));
+      artworkSize: _list.ARTWORK_SIZES.LARGE
+    }), /*#__PURE__*/React.createElement(_list.ListItemLabel, null, item.label));
   }
 
   if (item.USER_TITLE_ITEM) {
@@ -105,11 +105,11 @@ var MobileNavMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return (
     /*#__PURE__*/
     // Replace with a main menu item renderer
-    React.createElement(_index3.MenuAdapter, _extends({}, restProps, {
+    React.createElement(_list.MenuAdapter, _extends({}, restProps, {
       ref: ref,
       artwork: item.icon || null,
-      artworkSize: _index3.ARTWORK_SIZES.LARGE
-    }), /*#__PURE__*/React.createElement(_index3.ListItemLabel, null, mapItemToNode(item)))
+      artworkSize: _list.ARTWORK_SIZES.LARGE
+    }), /*#__PURE__*/React.createElement(_list.ListItemLabel, null, mapItemToNode(item)))
   );
 });
 
@@ -151,7 +151,7 @@ function MobileMenu(props) {
     setIsOpen(!isOpen);
   };
 
-  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.SideMenuButton, _index.Button),
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.SideMenuButton, _button.Button),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
       SideMenuButton = _getOverrides4[0],
       sideMenuButtonProps = _getOverrides4[1];
@@ -162,7 +162,7 @@ function MobileMenu(props) {
     }
   }, sideMenuButtonProps.overrides);
 
-  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.MobileDrawer, _index2.Drawer),
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.MobileDrawer, _drawer.Drawer),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       MobileDrawer = _getOverrides6[0],
       drawerProps = _getOverrides6[1];
@@ -185,7 +185,7 @@ function MobileMenu(props) {
     }
   }, drawerProps.overrides);
 
-  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.MobileMenu, _index4.StatefulMenu),
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.MobileMenu, _menu2.StatefulMenu),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       MobileMenu = _getOverrides8[0],
       menuProps = _getOverrides8[1];
@@ -214,7 +214,7 @@ function MobileMenu(props) {
   }, sideMenuButtonProps), /*#__PURE__*/React.createElement(_menu.default, {
     size: '24px'
   })), /*#__PURE__*/React.createElement(MobileDrawer, _extends({
-    anchor: _index2.ANCHOR.left,
+    anchor: _drawer.ANCHOR.left,
     isOpen: isOpen,
     onClose: toggleMenu,
     size: '75%'