baseui 0.0.0-next-ecc760f → 0.0.0-next-b15ab1b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/badge/styled-components.js +4 -4
  2. package/badge/styled-components.js.flow +4 -4
  3. package/banner/banner.js +4 -4
  4. package/banner/banner.js.flow +4 -4
  5. package/bottom-navigation/bottom-navigation.js +4 -5
  6. package/bottom-navigation/index.js.flow +2 -2
  7. package/bottom-navigation/styled-components.js +1 -0
  8. package/bottom-navigation/types.d.ts +2 -2
  9. package/es/badge/styled-components.js +4 -4
  10. package/es/banner/banner.js +4 -4
  11. package/es/bottom-navigation/bottom-navigation.js +4 -5
  12. package/es/bottom-navigation/styled-components.js +1 -0
  13. package/es/file-uploader/styled-components.js +1 -1
  14. package/es/themes/dark-theme/color-semantic-tokens.js +4 -4
  15. package/es/themes/light-theme/color-semantic-tokens.js +4 -4
  16. package/esm/badge/styled-components.js +4 -4
  17. package/esm/banner/banner.js +4 -4
  18. package/esm/bottom-navigation/bottom-navigation.js +4 -5
  19. package/esm/bottom-navigation/styled-components.js +1 -0
  20. package/esm/file-uploader/styled-components.js +1 -1
  21. package/esm/themes/dark-theme/color-semantic-tokens.js +4 -4
  22. package/esm/themes/light-theme/color-semantic-tokens.js +4 -4
  23. package/file-uploader/styled-components.js +1 -1
  24. package/file-uploader/styled-components.js.flow +1 -1
  25. package/package.json +1 -1
  26. package/themes/dark-theme/color-semantic-tokens.js +4 -4
  27. package/themes/dark-theme/color-semantic-tokens.js.flow +4 -4
  28. package/themes/light-theme/color-semantic-tokens.js +4 -4
  29. package/themes/light-theme/color-semantic-tokens.js.flow +4 -4
  30. package/themes/types.d.ts +4 -4
  31. package/themes/types.js.flow +4 -4
package/badge/styled-components.js CHANGED
@@ -41,19 +41,19 @@ function getColorStyles(_ref) {
41
41
  backgroundColor: $theme.colors.backgroundWarning
42
42
  }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, _constants.COLOR.accent, {
43
43
  color: $theme.colors.contentAccent,
44
- backgroundColor: $theme.colors.backgroundLightAccent
44
+ backgroundColor: $theme.colors.backgroundAccentLight
45
45
  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.primary, {
46
46
  color: $theme.colors.primaryA,
47
47
  backgroundColor: $theme.colors.backgroundSecondary
48
48
  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.positive, {
49
49
  color: $theme.colors.contentPositive,
50
- backgroundColor: $theme.colors.backgroundLightPositive
50
+ backgroundColor: $theme.colors.backgroundPositiveLight
51
51
  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.negative, {
52
52
  color: $theme.colors.contentNegative,
53
- backgroundColor: $theme.colors.backgroundLightNegative
53
+ backgroundColor: $theme.colors.backgroundNegativeLight
54
54
  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.warning, {
55
55
  color: $theme.colors.contentWarning,
56
- backgroundColor: $theme.colors.backgroundLightWarning
56
+ backgroundColor: $theme.colors.backgroundWarningLight
57
57
  }), _HIERARCHY$secondary)), _COLOR_STYLES); // @ts-ignore
58
58
 
59
59
  return COLOR_STYLES[$hierarchy][$color];
package/badge/styled-components.js.flow CHANGED
@@ -39,7 +39,7 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
39
39
  [HIERARCHY.secondary]: {
40
40
  [COLOR.accent]: {
41
41
  color: $theme.colors.contentAccent,
42
- backgroundColor: $theme.colors.backgroundLightAccent,
42
+ backgroundColor: $theme.colors.backgroundAccentLight,
43
43
  },
44
44
  [COLOR.primary]: {
45
45
  color: $theme.colors.primaryA,
@@ -47,15 +47,15 @@ function getColorStyles({ $theme, $hierarchy, $color }): {|
47
47
  },
48
48
  [COLOR.positive]: {
49
49
  color: $theme.colors.contentPositive,
50
- backgroundColor: $theme.colors.backgroundLightPositive,
50
+ backgroundColor: $theme.colors.backgroundPositiveLight,
51
51
  },
52
52
  [COLOR.negative]: {
53
53
  color: $theme.colors.contentNegative,
54
- backgroundColor: $theme.colors.backgroundLightNegative,
54
+ backgroundColor: $theme.colors.backgroundNegativeLight,
55
55
  },
56
56
  [COLOR.warning]: {
57
57
  color: $theme.colors.contentWarning,
58
- backgroundColor: $theme.colors.backgroundLightWarning,
58
+ backgroundColor: $theme.colors.backgroundWarningLight,
59
59
  },
60
60
  },
61
61
  };
package/banner/banner.js CHANGED
@@ -43,21 +43,21 @@ function low(theme, kind) {
43
43
  case _constants.KIND.negative:
44
44
  return {
45
45
  actionBackgroundColor: theme.colors.bannerActionLowNegative,
46
- backgroundColor: theme.colors.backgroundLightNegative,
46
+ backgroundColor: theme.colors.backgroundNegativeLight,
47
47
  color: theme.colors.contentPrimary
48
48
  };
49
49
 
50
50
  case _constants.KIND.positive:
51
51
  return {
52
52
  actionBackgroundColor: theme.colors.bannerActionLowPositive,
53
- backgroundColor: theme.colors.backgroundLightPositive,
53
+ backgroundColor: theme.colors.backgroundPositiveLight,
54
54
  color: theme.colors.contentPrimary
55
55
  };
56
56
 
57
57
  case _constants.KIND.warning:
58
58
  return {
59
59
  actionBackgroundColor: theme.colors.bannerActionLowWarning,
60
- backgroundColor: theme.colors.backgroundLightWarning,
60
+ backgroundColor: theme.colors.backgroundWarningLight,
61
61
  color: theme.colors.contentPrimary
62
62
  };
63
63
 
@@ -65,7 +65,7 @@ function low(theme, kind) {
65
65
  default:
66
66
  return {
67
67
  actionBackgroundColor: theme.colors.bannerActionLowInfo,
68
- backgroundColor: theme.colors.backgroundLightAccent,
68
+ backgroundColor: theme.colors.backgroundAccentLight,
69
69
  color: theme.colors.contentPrimary
70
70
  };
71
71
  }
package/banner/banner.js.flow CHANGED
@@ -29,21 +29,21 @@ function low(theme, kind) {
29
29
  case KIND.negative:
30
30
  return {
31
31
  actionBackgroundColor: theme.colors.bannerActionLowNegative,
32
- backgroundColor: theme.colors.backgroundLightNegative,
32
+ backgroundColor: theme.colors.backgroundNegativeLight,
33
33
  color: theme.colors.contentPrimary,
34
34
  };
35
35
 
36
36
  case KIND.positive:
37
37
  return {
38
38
  actionBackgroundColor: theme.colors.bannerActionLowPositive,
39
- backgroundColor: theme.colors.backgroundLightPositive,
39
+ backgroundColor: theme.colors.backgroundPositiveLight,
40
40
  color: theme.colors.contentPrimary,
41
41
  };
42
42
 
43
43
  case KIND.warning:
44
44
  return {
45
45
  actionBackgroundColor: theme.colors.bannerActionLowWarning,
46
- backgroundColor: theme.colors.backgroundLightWarning,
46
+ backgroundColor: theme.colors.backgroundWarningLight,
47
47
  color: theme.colors.contentPrimary,
48
48
  };
49
49
 
@@ -51,7 +51,7 @@ function low(theme, kind) {
51
51
  default:
52
52
  return {
53
53
  actionBackgroundColor: theme.colors.bannerActionLowInfo,
54
- backgroundColor: theme.colors.backgroundLightAccent,
54
+ backgroundColor: theme.colors.backgroundAccentLight,
55
55
  color: theme.colors.contentPrimary,
56
56
  };
57
57
  }
package/bottom-navigation/bottom-navigation.js CHANGED
@@ -45,7 +45,7 @@ var MAX_SELECTORS = 5;
45
45
 
46
46
  var BottomNavigation = function BottomNavigation(_ref) {
47
47
  var _ref$activeKey = _ref.activeKey,
48
- activeKey = _ref$activeKey === void 0 ? '0' : _ref$activeKey,
48
+ activeKey = _ref$activeKey === void 0 ? 0 : _ref$activeKey,
49
49
  onChange = _ref.onChange,
50
50
  children = _ref.children,
51
51
  _ref$overrides = _ref.overrides,
@@ -118,8 +118,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
118
118
  icon: _icon.Overflow,
119
119
  onChange: function onChange() {
120
120
  return setDisplayOverflow(true);
121
- } // @ts-expect-error todo(ts-migration) TS2365 Operator '>' cannot be applied to types 'Key' and 'number'.
122
- ,
121
+ },
123
122
  isActive: displayOverflow || activeKey > 4,
124
123
  overrides: {
125
124
  Title: overrides.OverflowTitle,
@@ -145,11 +144,11 @@ var BottomNavigation = function BottomNavigation(_ref) {
145
144
  }), displayOverflow && /*#__PURE__*/React.createElement(OverflowPanel, OverflowPanelProps, /*#__PURE__*/React.createElement(_mobileHeader.MobileHeader, {
146
145
  title: "More",
147
146
  expanded: true
148
- }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS).map(function (navItem, overflowIdx) {
147
+ }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS - 1).map(function (navItem, overflowIdx) {
149
148
  var _navItem$props = navItem.props,
150
149
  Icon = _navItem$props.icon,
151
150
  title = _navItem$props.title;
152
- var idx = overflowIdx + MAX_SELECTORS;
151
+ var idx = overflowIdx + MAX_SELECTORS - 1;
153
152
  return /*#__PURE__*/React.createElement(_list.ListItem, {
154
153
  artwork: function artwork(props) {
155
154
  return /*#__PURE__*/React.createElement(Icon, props);
package/bottom-navigation/index.js.flow CHANGED
@@ -33,11 +33,11 @@ export type NavItemPropsT = {
33
33
  overrides?: NavItemOverridesT,
34
34
  };
35
35
 
36
- export type OnChangeT = (params: { activeKey: React.Key }) => void;
36
+ export type OnChangeT = (params: { activeKey: number }) => void;
37
37
 
38
38
  export type BottomNavigationPropsT = {
39
39
  children?: React.Node,
40
- activeKey?: React.Key,
40
+ activeKey?: number,
41
41
  onChange?: OnChangeT,
42
42
  overrides?: BottomNavigationOverridesT,
43
43
  };
package/bottom-navigation/styled-components.js CHANGED
@@ -16,6 +16,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
16
16
  var SELECTOR_LIST_HEIGHT = '64px';
17
17
  var StyledRoot = (0, _styles.styled)('div', {
18
18
  height: '100%',
19
+ width: '100%',
19
20
  display: 'flex',
20
21
  flexDirection: 'column'
21
22
  });
package/bottom-navigation/types.d.ts CHANGED
@@ -35,11 +35,11 @@ export type PanelProps = {
35
35
  children: React.ReactNode;
36
36
  };
37
37
  export type OnChange = (params: {
38
- activeKey: React.Key;
38
+ activeKey: number;
39
39
  }) => void;
40
40
  export interface BottomNavigationProps {
41
41
  children?: React.ReactNode;
42
- activeKey?: React.Key;
42
+ activeKey?: number;
43
43
  onChange?: OnChange;
44
44
  overrides?: BottomNavigationOverrides;
45
45
  }
package/es/badge/styled-components.js CHANGED
@@ -38,7 +38,7 @@ function getColorStyles({
38
38
  [HIERARCHY.secondary]: {
39
39
  [COLOR.accent]: {
40
40
  color: $theme.colors.contentAccent,
41
- backgroundColor: $theme.colors.backgroundLightAccent
41
+ backgroundColor: $theme.colors.backgroundAccentLight
42
42
  },
43
43
  [COLOR.primary]: {
44
44
  color: $theme.colors.primaryA,
@@ -46,15 +46,15 @@ function getColorStyles({
46
46
  },
47
47
  [COLOR.positive]: {
48
48
  color: $theme.colors.contentPositive,
49
- backgroundColor: $theme.colors.backgroundLightPositive
49
+ backgroundColor: $theme.colors.backgroundPositiveLight
50
50
  },
51
51
  [COLOR.negative]: {
52
52
  color: $theme.colors.contentNegative,
53
- backgroundColor: $theme.colors.backgroundLightNegative
53
+ backgroundColor: $theme.colors.backgroundNegativeLight
54
54
  },
55
55
  [COLOR.warning]: {
56
56
  color: $theme.colors.contentWarning,
57
- backgroundColor: $theme.colors.backgroundLightWarning
57
+ backgroundColor: $theme.colors.backgroundWarningLight
58
58
  }
59
59
  }
60
60
  }; // @ts-ignore
package/es/banner/banner.js CHANGED
@@ -19,21 +19,21 @@ function low(theme, kind) {
19
19
  case KIND.negative:
20
20
  return {
21
21
  actionBackgroundColor: theme.colors.bannerActionLowNegative,
22
- backgroundColor: theme.colors.backgroundLightNegative,
22
+ backgroundColor: theme.colors.backgroundNegativeLight,
23
23
  color: theme.colors.contentPrimary
24
24
  };
25
25
 
26
26
  case KIND.positive:
27
27
  return {
28
28
  actionBackgroundColor: theme.colors.bannerActionLowPositive,
29
- backgroundColor: theme.colors.backgroundLightPositive,
29
+ backgroundColor: theme.colors.backgroundPositiveLight,
30
30
  color: theme.colors.contentPrimary
31
31
  };
32
32
 
33
33
  case KIND.warning:
34
34
  return {
35
35
  actionBackgroundColor: theme.colors.bannerActionLowWarning,
36
- backgroundColor: theme.colors.backgroundLightWarning,
36
+ backgroundColor: theme.colors.backgroundWarningLight,
37
37
  color: theme.colors.contentPrimary
38
38
  };
39
39
 
@@ -41,7 +41,7 @@ function low(theme, kind) {
41
41
  default:
42
42
  return {
43
43
  actionBackgroundColor: theme.colors.bannerActionLowInfo,
44
- backgroundColor: theme.colors.backgroundLightAccent,
44
+ backgroundColor: theme.colors.backgroundAccentLight,
45
45
  color: theme.colors.contentPrimary
46
46
  };
47
47
  }
package/es/bottom-navigation/bottom-navigation.js CHANGED
@@ -17,7 +17,7 @@ import { Overflow, ChevronRight } from '../icon';
17
17
  const MAX_SELECTORS = 5;
18
18
 
19
19
  const BottomNavigation = ({
20
- activeKey = '0',
20
+ activeKey = 0,
21
21
  onChange,
22
22
  children,
23
23
  overrides = {}
@@ -64,8 +64,7 @@ const BottomNavigation = ({
64
64
  const OverflowSelector = () => /*#__PURE__*/React.createElement(Selector, {
65
65
  title: "More",
66
66
  icon: Overflow,
67
- onChange: () => setDisplayOverflow(true) // @ts-expect-error todo(ts-migration) TS2365 Operator '>' cannot be applied to types 'Key' and 'number'.
68
- ,
67
+ onChange: () => setDisplayOverflow(true),
69
68
  isActive: displayOverflow || activeKey > 4,
70
69
  overrides: {
71
70
  Title: overrides.OverflowTitle,
@@ -88,12 +87,12 @@ const BottomNavigation = ({
88
87
  }), displayOverflow && /*#__PURE__*/React.createElement(OverflowPanel, OverflowPanelProps, /*#__PURE__*/React.createElement(MobileHeader, {
89
88
  title: "More",
90
89
  expanded: true
91
- }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS).map((navItem, overflowIdx) => {
90
+ }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS - 1).map((navItem, overflowIdx) => {
92
91
  const {
93
92
  icon: Icon,
94
93
  title
95
94
  } = navItem.props;
96
- const idx = overflowIdx + MAX_SELECTORS;
95
+ const idx = overflowIdx + MAX_SELECTORS - 1;
97
96
  return /*#__PURE__*/React.createElement(ListItem, {
98
97
  artwork: props => /*#__PURE__*/React.createElement(Icon, props),
99
98
  endEnhancer: () => /*#__PURE__*/React.createElement(ChevronRight, null),
package/es/bottom-navigation/styled-components.js CHANGED
@@ -8,6 +8,7 @@ import { styled } from '../styles';
8
8
  const SELECTOR_LIST_HEIGHT = '64px';
9
9
  export const StyledRoot = styled('div', {
10
10
  height: '100%',
11
+ width: '100%',
11
12
  display: 'flex',
12
13
  flexDirection: 'column'
13
14
  });
package/es/file-uploader/styled-components.js CHANGED
@@ -10,7 +10,7 @@ export const StyledFileDragAndDrop = styled('div', props => {
10
10
  const borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
11
11
  return {
12
12
  alignItems: 'center',
13
- backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundLightAccent : props.$theme.colors.fileUploaderBackgroundColor,
13
+ backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundAccentLight : props.$theme.colors.fileUploaderBackgroundColor,
14
14
  borderLeftColor: borderColor,
15
15
  borderRightColor: borderColor,
16
16
  borderTopColor: borderColor,
package/es/themes/dark-theme/color-semantic-tokens.js CHANGED
@@ -46,10 +46,10 @@ foundation = colorTokens) => {
46
46
  backgroundNegative: foundation.negative,
47
47
  backgroundWarning: foundation.warning,
48
48
  backgroundPositive: colors.green500,
49
- backgroundLightAccent: colors.blue700,
50
- backgroundLightPositive: colors.green700,
51
- backgroundLightNegative: colors.red700,
52
- backgroundLightWarning: colors.yellow700,
49
+ backgroundAccentLight: colors.blue700,
50
+ backgroundPositiveLight: colors.green700,
51
+ backgroundNegativeLight: colors.red700,
52
+ backgroundWarningLight: colors.yellow700,
53
53
  backgroundAlwaysDark: colors.gray900,
54
54
  backgroundAlwaysLight: colors.gray100,
55
55
  // Content
package/es/themes/light-theme/color-semantic-tokens.js CHANGED
@@ -46,10 +46,10 @@ foundation = colorTokens) => {
46
46
  backgroundNegative: foundation.negative,
47
47
  backgroundWarning: foundation.warning,
48
48
  backgroundPositive: colors.green400,
49
- backgroundLightAccent: colors.blue50,
50
- backgroundLightNegative: colors.red50,
51
- backgroundLightWarning: colors.yellow50,
52
- backgroundLightPositive: colors.green50,
49
+ backgroundAccentLight: colors.blue50,
50
+ backgroundNegativeLight: colors.red50,
51
+ backgroundWarningLight: colors.yellow50,
52
+ backgroundPositiveLight: colors.green50,
53
53
  backgroundAlwaysDark: colors.black,
54
54
  backgroundAlwaysLight: colors.white,
55
55
  // Content
package/esm/badge/styled-components.js CHANGED
@@ -38,19 +38,19 @@ function getColorStyles(_ref) {
38
38
  backgroundColor: $theme.colors.backgroundWarning
39
39
  }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, COLOR.accent, {
40
40
  color: $theme.colors.contentAccent,
41
- backgroundColor: $theme.colors.backgroundLightAccent
41
+ backgroundColor: $theme.colors.backgroundAccentLight
42
42
  }), _defineProperty(_HIERARCHY$secondary, COLOR.primary, {
43
43
  color: $theme.colors.primaryA,
44
44
  backgroundColor: $theme.colors.backgroundSecondary
45
45
  }), _defineProperty(_HIERARCHY$secondary, COLOR.positive, {
46
46
  color: $theme.colors.contentPositive,
47
- backgroundColor: $theme.colors.backgroundLightPositive
47
+ backgroundColor: $theme.colors.backgroundPositiveLight
48
48
  }), _defineProperty(_HIERARCHY$secondary, COLOR.negative, {
49
49
  color: $theme.colors.contentNegative,
50
- backgroundColor: $theme.colors.backgroundLightNegative
50
+ backgroundColor: $theme.colors.backgroundNegativeLight
51
51
  }), _defineProperty(_HIERARCHY$secondary, COLOR.warning, {
52
52
  color: $theme.colors.contentWarning,
53
- backgroundColor: $theme.colors.backgroundLightWarning
53
+ backgroundColor: $theme.colors.backgroundWarningLight
54
54
  }), _HIERARCHY$secondary)), _COLOR_STYLES); // @ts-ignore
55
55
 
56
56
  return COLOR_STYLES[$hierarchy][$color];
package/esm/banner/banner.js CHANGED
@@ -31,21 +31,21 @@ function low(theme, kind) {
31
31
  case KIND.negative:
32
32
  return {
33
33
  actionBackgroundColor: theme.colors.bannerActionLowNegative,
34
- backgroundColor: theme.colors.backgroundLightNegative,
34
+ backgroundColor: theme.colors.backgroundNegativeLight,
35
35
  color: theme.colors.contentPrimary
36
36
  };
37
37
 
38
38
  case KIND.positive:
39
39
  return {
40
40
  actionBackgroundColor: theme.colors.bannerActionLowPositive,
41
- backgroundColor: theme.colors.backgroundLightPositive,
41
+ backgroundColor: theme.colors.backgroundPositiveLight,
42
42
  color: theme.colors.contentPrimary
43
43
  };
44
44
 
45
45
  case KIND.warning:
46
46
  return {
47
47
  actionBackgroundColor: theme.colors.bannerActionLowWarning,
48
- backgroundColor: theme.colors.backgroundLightWarning,
48
+ backgroundColor: theme.colors.backgroundWarningLight,
49
49
  color: theme.colors.contentPrimary
50
50
  };
51
51
 
@@ -53,7 +53,7 @@ function low(theme, kind) {
53
53
  default:
54
54
  return {
55
55
  actionBackgroundColor: theme.colors.bannerActionLowInfo,
56
- backgroundColor: theme.colors.backgroundLightAccent,
56
+ backgroundColor: theme.colors.backgroundAccentLight,
57
57
  color: theme.colors.contentPrimary
58
58
  };
59
59
  }
package/esm/bottom-navigation/bottom-navigation.js CHANGED
@@ -30,7 +30,7 @@ var MAX_SELECTORS = 5;
30
30
 
31
31
  var BottomNavigation = function BottomNavigation(_ref) {
32
32
  var _ref$activeKey = _ref.activeKey,
33
- activeKey = _ref$activeKey === void 0 ? '0' : _ref$activeKey,
33
+ activeKey = _ref$activeKey === void 0 ? 0 : _ref$activeKey,
34
34
  onChange = _ref.onChange,
35
35
  children = _ref.children,
36
36
  _ref$overrides = _ref.overrides,
@@ -103,8 +103,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
103
103
  icon: Overflow,
104
104
  onChange: function onChange() {
105
105
  return setDisplayOverflow(true);
106
- } // @ts-expect-error todo(ts-migration) TS2365 Operator '>' cannot be applied to types 'Key' and 'number'.
107
- ,
106
+ },
108
107
  isActive: displayOverflow || activeKey > 4,
109
108
  overrides: {
110
109
  Title: overrides.OverflowTitle,
@@ -130,11 +129,11 @@ var BottomNavigation = function BottomNavigation(_ref) {
130
129
  }), displayOverflow && /*#__PURE__*/React.createElement(OverflowPanel, OverflowPanelProps, /*#__PURE__*/React.createElement(MobileHeader, {
131
130
  title: "More",
132
131
  expanded: true
133
- }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS).map(function (navItem, overflowIdx) {
132
+ }), /*#__PURE__*/React.createElement(OverflowPanelList, OverflowPanelListProps, navItems.slice(MAX_SELECTORS - 1).map(function (navItem, overflowIdx) {
134
133
  var _navItem$props = navItem.props,
135
134
  Icon = _navItem$props.icon,
136
135
  title = _navItem$props.title;
137
- var idx = overflowIdx + MAX_SELECTORS;
136
+ var idx = overflowIdx + MAX_SELECTORS - 1;
138
137
  return /*#__PURE__*/React.createElement(ListItem, {
139
138
  artwork: function artwork(props) {
140
139
  return /*#__PURE__*/React.createElement(Icon, props);
package/esm/bottom-navigation/styled-components.js CHANGED
@@ -14,6 +14,7 @@ import { styled } from '../styles';
14
14
  var SELECTOR_LIST_HEIGHT = '64px';
15
15
  export var StyledRoot = styled('div', {
16
16
  height: '100%',
17
+ width: '100%',
17
18
  display: 'flex',
18
19
  flexDirection: 'column'
19
20
  });
package/esm/file-uploader/styled-components.js CHANGED
@@ -16,7 +16,7 @@ export var StyledFileDragAndDrop = styled('div', function (props) {
16
16
  var borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
17
17
  return {
18
18
  alignItems: 'center',
19
- backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundLightAccent : props.$theme.colors.fileUploaderBackgroundColor,
19
+ backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundAccentLight : props.$theme.colors.fileUploaderBackgroundColor,
20
20
  borderLeftColor: borderColor,
21
21
  borderRightColor: borderColor,
22
22
  borderTopColor: borderColor,
package/esm/themes/dark-theme/color-semantic-tokens.js CHANGED
@@ -52,10 +52,10 @@ export default (function () {
52
52
  backgroundNegative: foundation.negative,
53
53
  backgroundWarning: foundation.warning,
54
54
  backgroundPositive: colors.green500,
55
- backgroundLightAccent: colors.blue700,
56
- backgroundLightPositive: colors.green700,
57
- backgroundLightNegative: colors.red700,
58
- backgroundLightWarning: colors.yellow700,
55
+ backgroundAccentLight: colors.blue700,
56
+ backgroundPositiveLight: colors.green700,
57
+ backgroundNegativeLight: colors.red700,
58
+ backgroundWarningLight: colors.yellow700,
59
59
  backgroundAlwaysDark: colors.gray900,
60
60
  backgroundAlwaysLight: colors.gray100,
61
61
  // Content
package/esm/themes/light-theme/color-semantic-tokens.js CHANGED
@@ -52,10 +52,10 @@ export default (function () {
52
52
  backgroundNegative: foundation.negative,
53
53
  backgroundWarning: foundation.warning,
54
54
  backgroundPositive: colors.green400,
55
- backgroundLightAccent: colors.blue50,
56
- backgroundLightNegative: colors.red50,
57
- backgroundLightWarning: colors.yellow50,
58
- backgroundLightPositive: colors.green50,
55
+ backgroundAccentLight: colors.blue50,
56
+ backgroundNegativeLight: colors.red50,
57
+ backgroundWarningLight: colors.yellow50,
58
+ backgroundPositiveLight: colors.green50,
59
59
  backgroundAlwaysDark: colors.black,
60
60
  backgroundAlwaysLight: colors.white,
61
61
  // Content
package/file-uploader/styled-components.js CHANGED
@@ -18,7 +18,7 @@ var StyledFileDragAndDrop = (0, _styles.styled)('div', function (props) {
18
18
  var borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
19
19
  return {
20
20
  alignItems: 'center',
21
- backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundLightAccent : props.$theme.colors.fileUploaderBackgroundColor,
21
+ backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundAccentLight : props.$theme.colors.fileUploaderBackgroundColor,
22
22
  borderLeftColor: borderColor,
23
23
  borderRightColor: borderColor,
24
24
  borderTopColor: borderColor,
package/file-uploader/styled-components.js.flow CHANGED
@@ -17,7 +17,7 @@ export const StyledFileDragAndDrop = styled<StylePropsT>('div', (props) => {
17
17
  return ({
18
18
  alignItems: 'center',
19
19
  backgroundColor: props.$isDragActive
20
- ? props.$theme.colors.backgroundLightAccent
20
+ ? props.$theme.colors.backgroundAccentLight
21
21
  : props.$theme.colors.fileUploaderBackgroundColor,
22
22
  borderLeftColor: borderColor,
23
23
  borderRightColor: borderColor,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "0.0.0-next-ecc760f",
3
+ "version": "0.0.0-next-b15ab1b",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/themes/dark-theme/color-semantic-tokens.js CHANGED
@@ -58,10 +58,10 @@ var _default = function _default() {
58
58
  backgroundNegative: foundation.negative,
59
59
  backgroundWarning: foundation.warning,
60
60
  backgroundPositive: _colors.default.green500,
61
- backgroundLightAccent: _colors.default.blue700,
62
- backgroundLightPositive: _colors.default.green700,
63
- backgroundLightNegative: _colors.default.red700,
64
- backgroundLightWarning: _colors.default.yellow700,
61
+ backgroundAccentLight: _colors.default.blue700,
62
+ backgroundPositiveLight: _colors.default.green700,
63
+ backgroundNegativeLight: _colors.default.red700,
64
+ backgroundWarningLight: _colors.default.yellow700,
65
65
  backgroundAlwaysDark: _colors.default.gray900,
66
66
  backgroundAlwaysLight: _colors.default.gray100,
67
67
  // Content
package/themes/dark-theme/color-semantic-tokens.js.flow CHANGED
@@ -54,10 +54,10 @@ export default (
54
54
  backgroundNegative: foundation.negative,
55
55
  backgroundWarning: foundation.warning,
56
56
  backgroundPositive: colors.green500,
57
- backgroundLightAccent: colors.blue700,
58
- backgroundLightPositive: colors.green700,
59
- backgroundLightNegative: colors.red700,
60
- backgroundLightWarning: colors.yellow700,
57
+ backgroundAccentLight: colors.blue700,
58
+ backgroundPositiveLight: colors.green700,
59
+ backgroundNegativeLight: colors.red700,
60
+ backgroundWarningLight: colors.yellow700,
61
61
  backgroundAlwaysDark: colors.gray900,
62
62
  backgroundAlwaysLight: colors.gray100,
63
63
 
package/themes/light-theme/color-semantic-tokens.js CHANGED
@@ -58,10 +58,10 @@ var _default = function _default() {
58
58
  backgroundNegative: foundation.negative,
59
59
  backgroundWarning: foundation.warning,
60
60
  backgroundPositive: _colors.default.green400,
61
- backgroundLightAccent: _colors.default.blue50,
62
- backgroundLightNegative: _colors.default.red50,
63
- backgroundLightWarning: _colors.default.yellow50,
64
- backgroundLightPositive: _colors.default.green50,
61
+ backgroundAccentLight: _colors.default.blue50,
62
+ backgroundNegativeLight: _colors.default.red50,
63
+ backgroundWarningLight: _colors.default.yellow50,
64
+ backgroundPositiveLight: _colors.default.green50,
65
65
  backgroundAlwaysDark: _colors.default.black,
66
66
  backgroundAlwaysLight: _colors.default.white,
67
67
  // Content
package/themes/light-theme/color-semantic-tokens.js.flow CHANGED
@@ -54,10 +54,10 @@ export default (
54
54
  backgroundNegative: foundation.negative,
55
55
  backgroundWarning: foundation.warning,
56
56
  backgroundPositive: colors.green400,
57
- backgroundLightAccent: colors.blue50,
58
- backgroundLightNegative: colors.red50,
59
- backgroundLightWarning: colors.yellow50,
60
- backgroundLightPositive: colors.green50,
57
+ backgroundAccentLight: colors.blue50,
58
+ backgroundNegativeLight: colors.red50,
59
+ backgroundWarningLight: colors.yellow50,
60
+ backgroundPositiveLight: colors.green50,
61
61
  backgroundAlwaysDark: colors.black,
62
62
  backgroundAlwaysLight: colors.white,
63
63
 
package/themes/types.d.ts CHANGED
@@ -93,10 +93,10 @@ export type CoreExtensionSemanticColorTokens = {
93
93
  backgroundNegative: string;
94
94
  backgroundWarning: string;
95
95
  backgroundPositive: string;
96
- backgroundLightAccent: string;
97
- backgroundLightPositive: string;
98
- backgroundLightNegative: string;
99
- backgroundLightWarning: string;
96
+ backgroundAccentLight: string;
97
+ backgroundPositiveLight: string;
98
+ backgroundNegativeLight: string;
99
+ backgroundWarningLight: string;
100
100
  backgroundAlwaysDark: string;
101
101
  backgroundAlwaysLight: string;
102
102
  contentStateDisabled: string;
package/themes/types.js.flow CHANGED
@@ -132,10 +132,10 @@ export type CoreExtensionSemanticColorTokensT = {|
132
132
  backgroundNegative: string,
133
133
  backgroundWarning: string,
134
134
  backgroundPositive: string,
135
- backgroundLightAccent: string,
136
- backgroundLightPositive: string,
137
- backgroundLightNegative: string,
138
- backgroundLightWarning: string,
135
+ backgroundAccentLight: string,
136
+ backgroundPositiveLight: string,
137
+ backgroundNegativeLight: string,
138
+ backgroundWarningLight: string,
139
139
  backgroundAlwaysDark: string,
140
140
  backgroundAlwaysLight: string,
141
141