baseui 12.2.0 → 13.0.0

package/badge/styled-components.js.flow

@@ -39,7 +39,7 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
     [HIERARCHY.secondary]: {
       [COLOR.accent]: {
         color: $theme.colors.contentAccent,
-        backgroundColor: $theme.colors.backgroundLightAccent,
+        backgroundColor: $theme.colors.backgroundAccentLight,
       },
       [COLOR.primary]: {
         color: $theme.colors.primaryA,
@@ -47,15 +47,15 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
       },
       [COLOR.positive]: {
         color: $theme.colors.contentPositive,
-        backgroundColor: $theme.colors.backgroundLightPositive,
+        backgroundColor: $theme.colors.backgroundPositiveLight,
       },
       [COLOR.negative]: {
         color: $theme.colors.contentNegative,
-        backgroundColor: $theme.colors.backgroundLightNegative,
+        backgroundColor: $theme.colors.backgroundNegativeLight,
       },
       [COLOR.warning]: {
         color: $theme.colors.contentWarning,
-        backgroundColor: $theme.colors.backgroundLightWarning,
+        backgroundColor: $theme.colors.backgroundWarningLight,
       },
     },
   };
@@ -184,6 +184,7 @@ export const StyledRoot = styled<{}>('div', () => {
     lineHeight: 'initial',
   };
 });
+StyledRoot.displayName = 'StyledRoot';
 
 const TOP_PLACEMENTS = [
   PLACEMENT.topLeft,
@@ -254,6 +255,7 @@ export const StyledPositioner = styled<{
     lineHeight: 'initial',
   };
 });
+StyledPositioner.displayName = 'StyledPositioner';
 
 export const StyledBadge = styled<{
   $shape?: ShapeT,
@@ -286,6 +288,7 @@ export const StyledBadge = styled<{
     };
   }
 );
+StyledBadge.displayName = 'StyledBadge';
 
 export const StyledNotificationCircle = styled<{
   $color?: ColorT,
@@ -303,6 +306,7 @@ export const StyledNotificationCircle = styled<{
     ...$theme.typography.LabelXSmall,
   };
 });
+StyledNotificationCircle.displayName = 'StyledNotificationCircle';
 
 export const StyledHintDot = styled<{ $color: ColorT, $hidden?: boolean }>(
   'div',
@@ -319,6 +323,7 @@ export const StyledHintDot = styled<{ $color: ColorT, $hidden?: boolean }>(
     };
   }
 );
+StyledHintDot.displayName = 'StyledHintDot';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/badge/types.d.ts

@@ -1,17 +1,17 @@
 import type * as React from 'react';
 import type { HIERARCHY, SHAPE, COLOR, PLACEMENT, ROLE } from './constants';
 import type { Override } from '../helpers/overrides';
-export declare type Hierarchy = typeof HIERARCHY[keyof typeof HIERARCHY];
-export declare type Shape = typeof SHAPE[keyof typeof SHAPE];
-export declare type Color = typeof COLOR[keyof typeof COLOR];
-export declare type Placement = typeof PLACEMENT[keyof typeof PLACEMENT];
-export declare type Role = typeof ROLE[keyof typeof ROLE];
-export declare type BadgeOverrides = {
+export type Hierarchy = (typeof HIERARCHY)[keyof typeof HIERARCHY];
+export type Shape = (typeof SHAPE)[keyof typeof SHAPE];
+export type Color = (typeof COLOR)[keyof typeof COLOR];
+export type Placement = (typeof PLACEMENT)[keyof typeof PLACEMENT];
+export type Role = (typeof ROLE)[keyof typeof ROLE];
+export type BadgeOverrides = {
     Root?: Override;
     Positioner?: Override;
     Badge?: Override;
 };
-export declare type BadgeProps = {
+export type BadgeProps = {
     content: React.ReactNode;
     hierarchy?: Hierarchy;
     shape?: Shape;
@@ -23,7 +23,7 @@ export declare type BadgeProps = {
     overrides?: BadgeOverrides;
     children?: React.ReactNode;
 };
-export declare type NotificationCircleProps = {
+export type NotificationCircleProps = {
     content: React.ReactNode;
     color?: Color;
     placement?: Placement;
@@ -33,7 +33,7 @@ export declare type NotificationCircleProps = {
     overrides?: BadgeOverrides;
     children?: React.ReactNode;
 };
-export declare type HintDotProps = {
+export type HintDotProps = {
     color?: Color;
     hidden?: boolean;
     horizontalOffset?: string;

package/badge/utils.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const getAnchorFromChildren: (children?: React.ReactNode | null) => React.ReactChild | React.ReactFragment | React.ReactPortal;
+export declare const getAnchorFromChildren: (children?: React.ReactNode | null) => string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal;

package/banner/banner.js

@@ -37,26 +37,27 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function low(theme, kind) {
   switch (kind) {
     case _constants.KIND.negative:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowNegative,
-        backgroundColor: theme.colors.backgroundLightNegative,
+        backgroundColor: theme.colors.backgroundNegativeLight,
         color: theme.colors.contentPrimary
       };
 
     case _constants.KIND.positive:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowPositive,
-        backgroundColor: theme.colors.backgroundLightPositive,
+        backgroundColor: theme.colors.backgroundPositiveLight,
         color: theme.colors.contentPrimary
       };
 
     case _constants.KIND.warning:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowWarning,
-        backgroundColor: theme.colors.backgroundLightWarning,
+        backgroundColor: theme.colors.backgroundWarningLight,
         color: theme.colors.contentPrimary
       };
 
@@ -64,11 +65,12 @@ function low(theme, kind) {
     default:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowInfo,
-        backgroundColor: theme.colors.backgroundLightAccent,
+        backgroundColor: theme.colors.backgroundAccentLight,
         color: theme.colors.contentPrimary
       };
   }
-}
+} // @ts-ignore
+
 
 function high(theme, kind) {
   switch (kind) {
@@ -101,7 +103,8 @@ function high(theme, kind) {
         color: theme.colors.contentOnColor
       };
   }
-}
+} // @ts-ignore
+
 
 function Leading(_ref) {
   var artwork = _ref.artwork;
@@ -118,7 +121,8 @@ function Leading(_ref) {
   return artwork.icon({
     size: size
   });
-}
+} // @ts-ignore
+
 
 function Below(_ref2) {
   var action = _ref2.action,
@@ -149,7 +153,8 @@ function Below(_ref2) {
   }
 
   return null;
-}
+} // @ts-ignore
+
 
 function Trailing(_ref3) {
   var action = _ref3.action,
@@ -194,7 +199,14 @@ function Trailing(_ref3) {
       },
       onClick: action.onClick,
       size: _index.SIZE.compact,
-      shape: _index.SHAPE.pill
+      shape: _index.SHAPE.pill,
+      overrides: {
+        BaseButton: {
+          style: {
+            whiteSpace: 'nowrap'
+          }
+        }
+      }
     }, action.label));
   }
 
@@ -257,11 +269,15 @@ function Banner(_ref4) {
       Message = _getOverrides18[0],
       messageProps = _getOverrides18[1];
 
+  var ariaLabel = rootProps.hasOwnProperty('aria-label') ? rootProps['aria-label'] : 'this is an announcement banner';
   return /*#__PURE__*/React.createElement(Root, _extends({
     $backgroundColor: styles.backgroundColor,
     $color: styles.color,
     $nested: nested
-  }, rootProps), /*#__PURE__*/React.createElement(LeadingContent, _extends({
+  }, rootProps, {
+    role: "complementary",
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/React.createElement(LeadingContent, _extends({
     $includesArtwork: Boolean(artwork)
   }, leadingContentProps), /*#__PURE__*/React.createElement(Leading, {
     artwork: artwork

package/banner/banner.js.flow

@@ -29,21 +29,21 @@ function low(theme, kind) {
     case KIND.negative:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowNegative,
-        backgroundColor: theme.colors.backgroundLightNegative,
+        backgroundColor: theme.colors.backgroundNegativeLight,
         color: theme.colors.contentPrimary,
       };
 
     case KIND.positive:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowPositive,
-        backgroundColor: theme.colors.backgroundLightPositive,
+        backgroundColor: theme.colors.backgroundPositiveLight,
         color: theme.colors.contentPrimary,
       };
 
     case KIND.warning:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowWarning,
-        backgroundColor: theme.colors.backgroundLightWarning,
+        backgroundColor: theme.colors.backgroundWarningLight,
         color: theme.colors.contentPrimary,
       };
 
@@ -51,7 +51,7 @@ function low(theme, kind) {
     default:
       return {
         actionBackgroundColor: theme.colors.bannerActionLowInfo,
-        backgroundColor: theme.colors.backgroundLightAccent,
+        backgroundColor: theme.colors.backgroundAccentLight,
         color: theme.colors.contentPrimary,
       };
   }
@@ -210,6 +210,9 @@ export function Banner({
   );
   const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
   const [Message, messageProps] = getOverrides(overrides.Message, StyledMessage);
+  const ariaLabel = rootProps.hasOwnProperty('aria-label')
+    ? rootProps['aria-label']
+    : 'this is an announcement banner';
 
   return (
     <Root
@@ -217,6 +220,8 @@ export function Banner({
       $color={styles.color}
       $nested={nested}
       {...rootProps}
+      role="complementary"
+      aria-label={ariaLabel}
     >
       <LeadingContent $includesArtwork={Boolean(artwork)} {...leadingContentProps}>
         <Leading artwork={artwork} />

package/banner/index.d.ts

@@ -4,8 +4,8 @@ export * from './constants';
 export * from './styled-components';
 export * from './types';
 /** @deprecated use ActionContent instead. To be removed in future versions.*/
-export declare type ActionContentT = ActionContent;
+export type ActionContentT = ActionContent;
 /** @deprecated use ArtworkContent instead. To be removed in future versions.*/
-export declare type ArtworkContentT = ArtworkContent;
+export type ArtworkContentT = ArtworkContent;
 /** @deprecated use BannerProps instead. To be removed in future versions.*/
-export declare type PropsT = BannerProps;
+export type PropsT = BannerProps;

package/banner/styled-components.js

@@ -31,7 +31,7 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
     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/banner/types.d.ts

@@ -1,11 +1,11 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants';
-export declare type ActionPosition = typeof ACTION_POSITION[keyof typeof ACTION_POSITION];
-export declare type ArtworkType = typeof ARTWORK_TYPE[keyof typeof ARTWORK_TYPE];
-export declare type Hierarchy = typeof HIERARCHY[keyof typeof HIERARCHY];
-export declare type Kind = typeof KIND[keyof typeof KIND];
-export declare type ActionContent = {
+export type ActionPosition = (typeof ACTION_POSITION)[keyof typeof ACTION_POSITION];
+export type ArtworkType = (typeof ARTWORK_TYPE)[keyof typeof ARTWORK_TYPE];
+export type Hierarchy = (typeof HIERARCHY)[keyof typeof HIERARCHY];
+export type Kind = (typeof KIND)[keyof typeof KIND];
+export type ActionContent = {
     label: string;
     icon?: (a: {
         size: string;
@@ -13,13 +13,14 @@ export declare type ActionContent = {
     onClick: (a: React.SyntheticEvent<HTMLButtonElement>) => unknown;
     position?: ActionPosition;
 };
-export declare type ArtworkContent = {
-    icon: (a: {
-        size: string;
-    }) => React.ReactNode;
+export type ArtworkIcon = (a: {
+    size: string;
+}) => React.ReactNode;
+export type ArtworkContent = {
+    icon: ArtworkIcon;
     type?: ArtworkType;
 };
-export declare type BannerOverrides = {
+export type BannerOverrides = {
     BelowContent?: Override;
     LeadingContent?: Override;
     Message?: Override;
@@ -30,7 +31,7 @@ export declare type BannerOverrides = {
     TrailingButtonContainer?: Override;
     TrailingIconButton?: Override;
 };
-export declare type BannerProps = {
+export type BannerProps = {
     action?: ActionContent;
     artwork?: ArtworkContent;
     children: React.ReactNode;

package/block/styled-components.js

@@ -16,6 +16,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // styletron will throw when value is undefined. if so, replace with null
+// @ts-ignore
 function constrainToNull(value) {
   if (value === undefined) {
     return null;
@@ -28,6 +29,7 @@ function build(breakpoints) {
   var styles = {};
   var mediaQueries = (0, _responsiveHelpers.getMediaQueries)(breakpoints);
   return {
+    // @ts-ignore
     apply: function apply(_ref) {
       var property = _ref.property,
           _ref$transform = _ref.transform,
@@ -44,19 +46,23 @@ function build(breakpoints) {
         value.forEach(function (v, index) {
           // Do not create a media query for the smallest breakpoint.
           if (index === 0) {
+            // @ts-ignore
             styles[property] = constrainToNull(transform(v));
             return;
           }
 
-          var mediaQuery = mediaQueries[index - 1];
+          var 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));
       }
     },
@@ -64,7 +70,8 @@ function build(breakpoints) {
       return styles;
     }
   };
-}
+} // @ts-ignore
+
 
 function getFontValue(obj, key) {
   if (!obj) return;
@@ -80,7 +87,8 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
 
   var get = function get(obj, key) {
     return obj[key];
-  };
+  }; // @ts-ignore
+
 
   var getScale = function getScale(size) {
     return sizing[size] || size;
@@ -90,6 +98,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'color',
     value: get(props, '$color'),
+    // @ts-ignore
     transform: function transform(color) {
       return colors[color] || color;
     }
@@ -105,6 +114,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'backgroundColor',
     value: get(props, '$backgroundColor'),
+    // @ts-ignore
     transform: function transform(backgroundColor) {
       return colors[backgroundColor] || backgroundColor;
     }
@@ -132,6 +142,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'fontFamily',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'fontFamily');
     }
@@ -139,6 +150,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'fontWeight',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'fontWeight');
     }
@@ -146,6 +158,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'fontSize',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'fontSize');
     }
@@ -153,6 +166,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'lineHeight',
     value: get(props, '$font'),
+    // @ts-ignore
     transform: function transform(font) {
       return getFontValue(typography[font], 'lineHeight');
     }
@@ -305,6 +319,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'overflowX',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: function transform(overflow) {
       if (overflow === 'scrollX') {
         return 'scroll';
@@ -316,6 +331,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'overflowY',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: function transform(overflow) {
       if (overflow === 'scrollY') {
         return 'scroll';
@@ -327,6 +343,7 @@ var StyledBlock = (0, _styles.styled)('div', function (props) {
   styles.apply({
     property: 'overflow',
     value: get(props, '$overflow'),
+    // @ts-ignore
     transform: function transform(overflow) {
       if (overflow !== 'scrollX' && overflow !== 'scrollY') {
         return overflow;

package/block/types.d.ts

@@ -1,25 +1,25 @@
 import type * as React from 'react';
 import type { StyleObject } from 'styletron-standard';
 import type { Override } from '../helpers/overrides';
-export declare type BlockOverrides = {
+export type BlockOverrides = {
     Block?: Override;
 };
-export declare type Responsive<T> = T | Array<T>;
-declare type AlignContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'normal' | 'baseline' | 'first baseline' | 'last baseline' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type AlignItems = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type AlignSelf = 'auto' | 'normal' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'inherit' | 'initial' | 'unset';
-declare type Flex = number | string;
-declare type Display = 'block' | 'inline' | 'run-in' | 'flow' | 'flow-root' | 'table' | 'flex' | 'grid' | 'ruby' | 'block flow' | 'inline table' | 'flex run-in' | 'list-item' | 'list-item block' | 'list-item inline' | 'list-item flow' | 'list-item flow-root' | 'list-item block flow' | 'list-item block flow-root' | 'flow list-item block' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 'table-cell' | 'table-column-group' | 'table-column' | 'table-caption' | 'ruby-base' | 'ruby-text' | 'ruby-base-container' | 'ruby-text-container' | 'contents' | 'none' | 'inline-block' | 'inline-table' | 'inline-flex' | 'inline-grid' | 'inherit' | 'initial' | 'unset';
-declare type GridAutoFlow = 'row' | 'column' | 'dense' | 'row dense' | 'column dense' | 'inherit' | 'initial' | 'unset';
-declare type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type JustifyItems = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center' | 'inherit' | 'initial' | 'unset';
-declare type JustifySelf = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
-declare type Position = 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
-declare type Overflow = 'visible' | 'hidden' | 'scroll' | 'scrollX' | 'scrollY' | 'auto' | 'inherit' | 'initial' | 'unset';
-export declare type Scale = 0 | string;
-export declare type WhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | 'inherit' | 'initial' | 'unset';
-export declare type BlockProps<T extends React.ElementType = React.ElementType> = {
+export type Responsive<T> = T | Array<T>;
+type AlignContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'normal' | 'baseline' | 'first baseline' | 'last baseline' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type AlignItems = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type AlignSelf = 'auto' | 'normal' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'inherit' | 'initial' | 'unset';
+type Flex = number | string;
+type Display = 'block' | 'inline' | 'run-in' | 'flow' | 'flow-root' | 'table' | 'flex' | 'grid' | 'ruby' | 'block flow' | 'inline table' | 'flex run-in' | 'list-item' | 'list-item block' | 'list-item inline' | 'list-item flow' | 'list-item flow-root' | 'list-item block flow' | 'list-item block flow-root' | 'flow list-item block' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 'table-cell' | 'table-column-group' | 'table-column' | 'table-caption' | 'ruby-base' | 'ruby-text' | 'ruby-base-container' | 'ruby-text-container' | 'contents' | 'none' | 'inline-block' | 'inline-table' | 'inline-flex' | 'inline-grid' | 'inherit' | 'initial' | 'unset';
+type GridAutoFlow = 'row' | 'column' | 'dense' | 'row dense' | 'column dense' | 'inherit' | 'initial' | 'unset';
+type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type JustifyItems = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'legacy right' | 'legacy left' | 'legacy center' | 'inherit' | 'initial' | 'unset';
+type JustifySelf = 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+type Position = 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
+type Overflow = 'visible' | 'hidden' | 'scroll' | 'scrollX' | 'scrollY' | 'auto' | 'inherit' | 'initial' | 'unset';
+export type Scale = 0 | string;
+export type WhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | 'inherit' | 'initial' | 'unset';
+export type BlockProps<T extends React.ElementType = React.ElementType> = {
     children?: React.ReactNode;
     /** Modifies the base element used to render the block. */
     as?: T;
@@ -132,7 +132,7 @@ export declare type BlockProps<T extends React.ElementType = React.ElementType>
     /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
     whiteSpace?: Responsive<WhiteSpace>;
 };
-export declare type StyledBlockProps = {
+export type StyledBlockProps = {
     $color?: Responsive<string>;
     $backgroundAttachment?: Responsive<string>;
     $backgroundClip?: Responsive<string>;
@@ -199,18 +199,18 @@ export declare type StyledBlockProps = {
     $textOverflow?: Responsive<string>;
     $whiteSpace?: Responsive<WhiteSpace>;
 };
-declare type BaseProps<P extends {}> = P & {
+type BaseProps<P extends {}> = P & {
     $style?: StyleObject | ((props: P) => StyleObject);
     className?: string;
 };
-declare type AddStyletronRef<P extends {
+type AddStyletronRef<P extends {
     ref: any;
 }> = P extends {
     ref: infer R;
 } ? P & {
     $ref?: R;
 } : P;
-declare type OverrideProps<D extends React.ElementType, P extends {}> = BaseProps<P> & Omit<AddStyletronRef<React.ComponentProps<D>>, keyof BaseProps<P>>;
+type OverrideProps<D extends React.ElementType, P extends {}> = BaseProps<P> & Omit<AddStyletronRef<React.ComponentProps<D>>, keyof BaseProps<P>>;
 export interface BlockComponentType<D extends React.ElementType> {
     <C extends React.ElementType = D>(props: OverrideProps<C, BlockProps<C>>): JSX.Element;
     displayName?: string;

package/bottom-navigation/bottom-navigation.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { BottomNavigationProps } from './types';
+declare const BottomNavigation: ({ activeKey, onChange, children, overrides, }: BottomNavigationProps) => JSX.Element;
+export default BottomNavigation;