baseui 12.1.3 → 13.0.0

package/es/banner/styled-components.js

@@ -23,7 +23,7 @@ export const StyledRoot = styled('div', ({
     display: 'grid',
     gridColumnGap: $theme.sizing.scale600,
     gridTemplateColumns: 'min-content auto min-content',
-    gridTemplateRows: 'auto min-content',
+    gridTemplateRows: 'auto minmax(0, min-content)',
     marginTop: $theme.sizing.scale600,
     marginRight: $theme.sizing.scale600,
     marginBottom: $theme.sizing.scale600,

package/es/block/styled-components.js

@@ -8,6 +8,7 @@ import { getMediaQueries } from '../helpers/responsive-helpers';
 import { styled } from '../styles';
 
 // styletron will throw when value is undefined. if so, replace with null
+// @ts-ignore
 function constrainToNull(value) {
   if (value === undefined) {
     return null;
@@ -20,6 +21,7 @@ function build(breakpoints) {
   const styles = {};
   const mediaQueries = getMediaQueries(breakpoints);
   return {
+    // @ts-ignore
     apply: ({
       property,
       transform = x => x,
@@ -33,25 +35,30 @@ function build(breakpoints) {
         value.forEach((v, index) => {
           // Do not create a media query for the smallest breakpoint.
           if (index === 0) {
+            // @ts-ignore
             styles[property] = constrainToNull(transform(v));
             return;
           }
 
-          const mediaQuery = mediaQueries[index - 1];
+          const mediaQuery = mediaQueries[index - 1]; // @ts-ignore
 
           if (!styles[mediaQuery]) {
+            // @ts-ignore
             styles[mediaQuery] = {};
-          }
+          } // @ts-ignore
+
 
           styles[mediaQuery][property] = constrainToNull(transform(v));
         });
       } else {
+        // @ts-ignore
         styles[property] = constrainToNull(transform(value));
       }
     },
     value: () => styles
   };
-}
+} // @ts-ignore
+
 
 function getFontValue(obj, key) {
   if (!obj) return;
@@ -66,7 +73,8 @@ export const StyledBlock = styled('div', props => {
     sizing
   } = props.$theme;
 
-  const get = (obj, key) => obj[key];
+  const get = (obj, key) => obj[key]; // @ts-ignore
+
 
   const getScale = size => sizing[size] || size;
 
@@ -74,6 +82,7 @@ export const StyledBlock = styled('div', props => {
   styles.apply({
     property: 'color',
     value: get(props, '$color'),
+    // @ts-ignore
     transform: color => colors[color] || color
   });
   styles.apply({
@@ -87,6 +96,7 @@ export const StyledBlock = styled('div', props => {
   styles.apply({
     property: 'backgroundColor',
     value: get(props, '$backgroundColor'),
+    // @ts-ignore
     transform: backgroundColor => colors[backgroundColor] || backgroundColor
   });
   styles.apply({
@@ -112,21 +122,25 @@ export const StyledBlock = styled('div', props => {
   styles.apply({
     property: 'fontFamily',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: font => getFontValue(typography[font], 'fontFamily')
   });
   styles.apply({
     property: 'fontWeight',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: font => getFontValue(typography[font], 'fontWeight')
   });
   styles.apply({
     property: 'fontSize',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: font => getFontValue(typography[font], 'fontSize')
   });
   styles.apply({
     property: 'lineHeight',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: font => getFontValue(typography[font], 'lineHeight')
   });
   styles.apply({
@@ -277,6 +291,7 @@ export const StyledBlock = styled('div', props => {
   styles.apply({
     property: 'overflowX',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: overflow => {
       if (overflow === 'scrollX') {
         return 'scroll';
@@ -288,6 +303,7 @@ export const StyledBlock = styled('div', props => {
   styles.apply({
     property: 'overflowY',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: overflow => {
       if (overflow === 'scrollY') {
         return 'scroll';
@@ -299,6 +315,7 @@ export const StyledBlock = styled('div', props => {
   styles.apply({
     property: 'overflow',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: overflow => {
       if (overflow !== 'scrollX' && overflow !== 'scrollY') {
         return overflow;

package/es/bottom-navigation/bottom-navigation.js

@@ -0,0 +1,109 @@
+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); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { Selector } from './selector';
+import { Panel } from './panel';
+import { StyledRoot, StyledSelectorList, StyledOverflowPanel, StyledOverflowPanelList } from './styled-components';
+import { getOverrides } from '../helpers/overrides';
+import { ListItem, ListItemLabel } from '../list';
+import { MobileHeader } from '../mobile-header';
+import { Overflow, ChevronRight } from '../icon';
+const MAX_SELECTORS = 5;
+
+const BottomNavigation = ({
+  activeKey = 0,
+  onChange,
+  children,
+  overrides = {}
+}) => {
+  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [SelectorList, SelectorListProps] = getOverrides(overrides.SelectorList, StyledSelectorList);
+  const [OverflowPanel, OverflowPanelProps] = getOverrides(overrides.OverflowPanel, StyledOverflowPanel);
+  const [OverflowPanelList, OverflowPanelListProps] = getOverrides(overrides.OverflowPanelList, StyledOverflowPanelList);
+  const [displayOverflow, setDisplayOverflow] = React.useState(false);
+  const NavItemPanelRefs = React.useRef([]);
+
+  function scrollToTop(idx) {
+    NavItemPanelRefs.current[idx].scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
+  }
+
+  function handleNavItemChange(activeKey) {
+    if (displayOverflow) {
+      setDisplayOverflow(false);
+    }
+
+    onChange({
+      activeKey
+    });
+  }
+
+  const renderSelectors = navItems => navItems.map((navItem, idx) => {
+    const isActive = activeKey === idx && !displayOverflow;
+    return /*#__PURE__*/React.createElement(Selector, {
+      title: navItem.props.title,
+      icon: navItem.props.icon,
+      isActive: isActive,
+      onChange: () => {
+        isActive ? scrollToTop(idx) : handleNavItemChange(idx);
+      },
+      overrides: navItem.props.overrides,
+      key: idx
+    });
+  });
+
+  const OverflowSelector = () => /*#__PURE__*/React.createElement(Selector, {
+    title: "More",
+    icon: Overflow,
+    onChange: () => setDisplayOverflow(true),
+    isActive: displayOverflow || activeKey > 4,
+    overrides: {
+      Title: overrides.OverflowTitle,
+      Selector: overrides.OverflowSelector
+    },
+    key: 'more'
+  });
+
+  const navItems = React.Children.toArray(children);
+  return /*#__PURE__*/React.createElement(Root, RootProps, navItems.map((navItem, idx) => {
+    if (!navItem) return;
+    const isActive = activeKey === idx && !displayOverflow;
+    return /*#__PURE__*/React.createElement(Panel, {
+      isActive: isActive,
+      ref: element => NavItemPanelRefs.current.push(element),
+      overrides: navItem.props.overrides,
+      key: idx,
+      "aria-labelledby": `tabs-${navItem.props.title}-tabpanel-${idx}`
+    }, navItem.props.children);
+  }), displayOverflow && /*#__PURE__*/React.createElement(OverflowPanel, OverflowPanelProps, /*#__PURE__*/React.createElement(MobileHeader, {
+    title: "More",
+    expanded: true
+  }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS - 1).map((navItem, overflowIdx) => {
+    const {
+      icon: Icon,
+      title
+    } = navItem.props;
+    const idx = overflowIdx + MAX_SELECTORS - 1;
+    return /*#__PURE__*/React.createElement(ListItem, {
+      artwork: props => /*#__PURE__*/React.createElement(Icon, props),
+      endEnhancer: () => /*#__PURE__*/React.createElement(ChevronRight, null),
+      onClick: () => {
+        activeKey === idx && !displayOverflow ? scrollToTop(idx) : handleNavItemChange(idx);
+      },
+      key: overflowIdx
+    }, /*#__PURE__*/React.createElement(ListItemLabel, null, title));
+  }))), /*#__PURE__*/React.createElement(SelectorList, _extends({
+    role: "tablist"
+  }, SelectorListProps), navItems.length > 5 ? /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectors(navItems.slice(0, 4)), /*#__PURE__*/React.createElement(OverflowSelector, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectors(navItems))));
+};
+
+export default BottomNavigation;

package/es/bottom-navigation/index.js

@@ -0,0 +1,10 @@
+/*
+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.
+*/
+export { default as BottomNavigation } from './bottom-navigation';
+export { default as NavItem } from './nav-item';
+export * from './styled-components';
+export * from './types';

package/es/bottom-navigation/nav-item.js

@@ -0,0 +1,12 @@
+/*
+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.
+*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function NavItem(props) {
+  return null;
+}
+
+export default NavItem;

package/es/bottom-navigation/panel.js

@@ -0,0 +1,25 @@
+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); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { StyledPanel } from './styled-components';
+import { getOverrides } from '../helpers/overrides';
+export const Panel = /*#__PURE__*/React.forwardRef(({
+  isActive,
+  overrides = {},
+  children
+}, ref) => {
+  const [Panel, PanelProps] = getOverrides(overrides.Panel, StyledPanel);
+  return /*#__PURE__*/React.createElement(Panel, _extends({
+    ref: ref,
+    tabIndex: isActive ? '0' : '-1',
+    role: "tabpanel",
+    hidden: !isActive
+  }, PanelProps), children);
+});
+Panel.displayName = 'Panel';

package/es/bottom-navigation/selector.js

@@ -0,0 +1,34 @@
+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); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { StyledTitle, StyledSelector } from './styled-components';
+import { useStyletron } from '../styles/index';
+import { getOverrides } from '../helpers/overrides';
+export const Selector = ({
+  title,
+  icon,
+  isActive,
+  onChange,
+  overrides = {}
+}) => {
+  const [Title, TitleProps] = getOverrides(overrides.Title, StyledTitle);
+  const [Selector, SelectorProps] = getOverrides(overrides.Selector, StyledSelector);
+  const [, theme] = useStyletron();
+  const Icon = icon;
+  return /*#__PURE__*/React.createElement(Selector, _extends({
+    onClick: onChange,
+    role: "tab",
+    "aria-selected": isActive
+  }, SelectorProps), /*#__PURE__*/React.createElement(Icon, {
+    size: 20,
+    color: isActive ? theme.colors.contentPrimary : theme.colors.contentTertiary
+  }), /*#__PURE__*/React.createElement(Title, _extends({
+    $isActive: isActive
+  }, TitleProps), title));
+};

package/es/bottom-navigation/styled-components.js

@@ -0,0 +1,89 @@
+/*
+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.
+*/
+import { styled } from '../styles';
+const SELECTOR_LIST_HEIGHT = '64px';
+export const StyledRoot = styled('div', {
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column'
+});
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledSelectorList = styled('div', ({
+  $theme
+}) => {
+  return {
+    container: 'nav-item-list / inline-size',
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: '1fr',
+    gap: $theme.sizing.scale300,
+    width: '100%',
+    height: SELECTOR_LIST_HEIGHT,
+    paddingTop: $theme.sizing.scale500,
+    paddingBottom: $theme.sizing.scale500,
+    paddingLeft: $theme.sizing.scale300,
+    paddingRight: $theme.sizing.scale300,
+    borderTop: `${$theme.sizing.scale0} solid ${$theme.colors.borderOpaque}`,
+    backgroundColor: $theme.colors.backgroundPrimary
+  };
+});
+StyledSelectorList.displayName = "StyledSelectorList";
+StyledSelectorList.displayName = 'StyledSelectorList';
+export const StyledOverflowPanel = styled('div', {
+  height: `calc(100% - ${SELECTOR_LIST_HEIGHT})`,
+  overflow: 'auto'
+});
+StyledOverflowPanel.displayName = "StyledOverflowPanel";
+StyledOverflowPanel.displayName = 'StyledOverflowPanel';
+export const StyledOverflowPanelList = styled('ul', {
+  paddingLeft: 0,
+  paddingRight: 0
+});
+StyledOverflowPanelList.displayName = "StyledOverflowPanelList";
+StyledOverflowPanelList.displayName = 'StyledOverflowPanelList';
+export const StyledTitle = styled('div', ({
+  $theme,
+  $isActive
+}) => ({ ...$theme.typography.LabelXSmall,
+  color: $isActive ? $theme.colors.contentPrimary : $theme.colors.contentTertiary
+}));
+StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';
+export const StyledSelector = styled('button', ({
+  $theme
+}) => ({
+  '@container nav-item-list (min-width: 600px)': {
+    flexDirection: 'row',
+    gap: $theme.sizing.scale500
+  },
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  gap: $theme.sizing.scale0,
+  // button style reset
+  borderRadius: 0,
+  textAlign: 'inherit',
+  background: 'none',
+  boxShadow: 'none',
+  padding: 0,
+  cursor: 'pointer',
+  border: 'none',
+  color: 'inherit',
+  font: 'inherit'
+}));
+StyledSelector.displayName = "StyledSelector";
+StyledSelector.displayName = 'StyledSelector';
+export const StyledPanel = styled('div', {
+  height: `calc(100% - ${SELECTOR_LIST_HEIGHT})`,
+  overflow: 'auto'
+});
+StyledPanel.displayName = "StyledPanel";
+StyledPanel.displayName = 'StyledPanel';

package/es/bottom-navigation/types.js

@@ -0,0 +1 @@
+export {};

package/es/breadcrumbs/breadcrumbs.js

@@ -18,7 +18,8 @@ export function Breadcrumbs(props) {
     overrides = {},
     showTrailingSeparator = false
   } = props;
-  const childrenArray = Children.toArray(props.children);
+  const childrenArray = Children.toArray(props.children); // @ts-ignore
+
   const childrenWithSeparators = [];
   const [Root, baseRootProps] = getOverrides(overrides.Root, StyledRoot);
   const [Right, baseIconProps] = getOverrides(overrides.Icon, ChevronRight);
@@ -34,7 +35,10 @@ export function Breadcrumbs(props) {
     }
   }, baseIconProps && baseIconProps.overrides);
   childrenArray.forEach((child, index) => {
-    childrenWithSeparators.push( /*#__PURE__*/React.createElement(ListItem, _extends({
+    childrenWithSeparators.push(
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(ListItem, _extends({
       key: `breadcrumb-item-${index}`,
       $itemIndex: index
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/React.createElement(Separator, _extends({}, baseSeparatorProps, {

package/es/button/button-internals.js

@@ -12,6 +12,7 @@ import { StartEnhancer as StyledStartEnhancer, EndEnhancer as StyledEndEnhancer
 import { getSharedProps } from './utils';
 import { getOverrides } from '../helpers/overrides';
 
+// @ts-ignore
 function RenderEnhancer(props) {
   const {
     Enhancer,
@@ -39,6 +40,18 @@ export default function ButtonInternals(props) {
   const [StartEnhancer, startEnhancerProps] = getOverrides(overrides.StartEnhancer, StyledStartEnhancer);
   const [EndEnhancer, endEnhancerProps] = getOverrides(overrides.EndEnhancer, StyledEndEnhancer);
   const sharedProps = getSharedProps(props);
+
+  if (props.isLoading) {
+    const hiddenStyle = {
+      opacity: 0,
+      display: 'flex',
+      height: '0px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: hiddenStyle
+    }, children);
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, startEnhancer !== null && startEnhancer !== undefined && /*#__PURE__*/React.createElement(StartEnhancer, _extends({}, sharedProps, startEnhancerProps), /*#__PURE__*/React.createElement(RenderEnhancer, {
     Enhancer: startEnhancer
   })), children, endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancer, _extends({}, sharedProps, endEnhancerProps), /*#__PURE__*/React.createElement(RenderEnhancer, {

package/es/button/button.js

@@ -90,15 +90,15 @@ class Button extends React.Component {
     const sharedProps = { ...getSharedProps(this.props),
       $isFocusVisible: this.state.isFocusVisible
     };
+    const ariaLoadingElements = isLoading ? {
+      ['aria-label']: typeof this.props.children === 'string' ? `loading ${this.props.children}` : 'content is loading',
+      ['aria-busy']: 'true',
+      ['aria-live']: 'polite'
+    } : {};
     return /*#__PURE__*/React.createElement(BaseButton, _extends({
       ref: forwardedRef,
       "data-baseweb": "button"
-    }, isLoading ? {
-      // we want the screenreader to say loading and also the content of child
-      // this seems like the best option even tho the child might not be a string
-      ['aria-label']: `loading ${typeof this.props.children === 'string' ? this.props.children : ''}`,
-      ['aria-busy']: 'true'
-    } : {}, sharedProps, restProps, baseButtonProps, {
+    }, ariaLoadingElements, sharedProps, restProps, baseButtonProps, {
       // Applies last to override passed in onClick
       onClick: this.internalOnClick,
       onFocus: forkFocus({ ...restProps,
@@ -107,13 +107,7 @@ class Button extends React.Component {
       onBlur: forkBlur({ ...restProps,
         ...baseButtonProps
       }, this.handleBlur)
-    }), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        opacity: 0,
-        display: 'flex',
-        height: '0px'
-      }
-    }, /*#__PURE__*/React.createElement(ButtonInternals, this.props)), /*#__PURE__*/React.createElement(LoadingSpinnerContainer, _extends({}, sharedProps, loadingSpinnerContainerProps), /*#__PURE__*/React.createElement(LoadingSpinner, _extends({}, sharedProps, loadingSpinnerProps)))) : /*#__PURE__*/React.createElement(ButtonInternals, this.props));
+    }), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonInternals, this.props), /*#__PURE__*/React.createElement(LoadingSpinnerContainer, _extends({}, sharedProps, loadingSpinnerContainerProps), /*#__PURE__*/React.createElement(LoadingSpinner, _extends({}, sharedProps, loadingSpinnerProps)))) : /*#__PURE__*/React.createElement(ButtonInternals, this.props));
   }
 
 }

package/es/button/styled-components.js

@@ -185,7 +185,7 @@ export const LoadingSpinner = styled('span', ({
   };
 });
 LoadingSpinner.displayName = "LoadingSpinner";
-LoadingSpinner.displayName = 'LoadingSpinner';
+LoadingSpinner.displayName = 'LoadingSpinner'; // @ts-ignore
 
 function getLoadingSpinnerColors({
   $theme,
@@ -225,7 +225,8 @@ function getLoadingSpinnerColors({
         };
       }
   }
-}
+} // @ts-ignore
+
 
 function getBorderRadiiStyles({
   $theme,
@@ -254,7 +255,8 @@ function getBorderRadiiStyles({
     borderTopLeftRadius: value,
     borderBottomLeftRadius: value
   };
-}
+} // @ts-ignore
+
 
 function getFontStyles({
   $theme,
@@ -273,7 +275,8 @@ function getFontStyles({
     default:
       return $theme.typography.font350;
   }
-}
+} // @ts-ignore
+
 
 function getDisabledStyles({
   $theme,
@@ -299,7 +302,8 @@ function getDisabledStyles({
     backgroundColor: $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   };
-}
+} // @ts-ignore
+
 
 function getPaddingStyles({
   $theme,
@@ -344,11 +348,17 @@ function getPaddingStyles({
 }
 
 function getColorStyles({
+  // @ts-ignore
   $theme,
+  // @ts-ignore
   $colors,
+  // @ts-ignore
   $isLoading,
+  // @ts-ignore
   $isSelected,
+  // @ts-ignore
   $kind,
+  // @ts-ignore
   $disabled
 }) {
   if ($colors) {
@@ -429,7 +439,8 @@ function getColorStyles({
     default:
       return Object.freeze({});
   }
-}
+} // @ts-ignore
+
 
 function getShapeStyles({
   $shape,

package/es/button-dock/button-dock.js

@@ -0,0 +1,29 @@
+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); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { StyledRoot, StyledActionContainer, StyledActionSubContainer } from './styled-components';
+import { getOverrides } from '../helpers/overrides';
+
+const ButtonDock = props => {
+  const {
+    primaryAction,
+    secondaryActions,
+    dismissiveAction,
+    topAccessory,
+    overrides = {}
+  } = props;
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ActionContainer, actionContainerProps] = getOverrides(overrides.ActionContainer, StyledActionContainer);
+  const [ActionSubContainer, actionSubContainerProps] = getOverrides(overrides.ActionSubContainer, StyledActionSubContainer);
+  return /*#__PURE__*/React.createElement(Root, rootProps, topAccessory, /*#__PURE__*/React.createElement(ActionContainer, actionContainerProps, /*#__PURE__*/React.createElement(ActionSubContainer, actionSubContainerProps, secondaryActions), /*#__PURE__*/React.createElement(ActionSubContainer, _extends({
+    $reverseWhenWide: true
+  }, actionSubContainerProps), primaryAction, dismissiveAction)));
+};
+
+export default ButtonDock;

package/es/button-dock/index.js

@@ -0,0 +1,9 @@
+/*
+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.
+*/
+export { default as ButtonDock } from './button-dock';
+export * from './styled-components';
+export * from './types';

package/es/button-dock/styled-components.js

@@ -0,0 +1,49 @@
+/*
+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.
+*/
+import { styled } from '../styles/index';
+export const StyledRoot = styled('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: $theme.sizing.scale300,
+  width: '100%',
+  paddingTop: $theme.sizing.scale600,
+  paddingRight: $theme.sizing.scale600,
+  paddingBottom: $theme.sizing.scale600,
+  paddingLeft: $theme.sizing.scale600,
+  backgroundColor: $theme.colors.backgroundPrimary,
+  container: 'root / inline-size'
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledActionContainer = styled('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: $theme.sizing.scale300,
+  '@container root (min-width: 600px)': {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  }
+}));
+StyledActionContainer.displayName = "StyledActionContainer";
+StyledActionContainer.displayName = 'StyledActionContainer';
+export const StyledActionSubContainer = styled('div', ({
+  $reverseWhenWide,
+  $theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: $theme.sizing.scale300,
+  '@container root (min-width: 600px)': {
+    flexDirection: $reverseWhenWide ? 'row-reverse' : 'row'
+  }
+}));
+StyledActionSubContainer.displayName = "StyledActionSubContainer";
+StyledActionSubContainer.displayName = 'StyledActionSubContainer';

package/es/button-dock/types.js

@@ -0,0 +1 @@
+export {};