carbon-react 104.38.0 → 104.39.0

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 (23) hide show
  1. package/esm/__internal__/sticky-footer/sticky-footer.style.js +1 -1
  2. package/esm/components/button/button.component.js +8 -9
  3. package/esm/components/carousel/slide/slide.style.js +1 -1
  4. package/esm/components/draggable/draggable-item.style.js +1 -3
  5. package/esm/components/icon-button/icon-button.component.js +8 -9
  6. package/esm/components/popover-container/popover-container.style.d.ts +0 -1
  7. package/esm/components/popover-container/popover-container.style.js +5 -29
  8. package/esm/components/select/multi-select/multi-select.component.js +2 -2
  9. package/esm/components/select/select-list/select-list.style.js +1 -1
  10. package/esm/style/themes/base/base-theme.config.d.ts +4 -10
  11. package/esm/style/themes/sage/index.d.ts +4 -10
  12. package/lib/__internal__/sticky-footer/sticky-footer.style.js +1 -1
  13. package/lib/components/button/button.component.js +7 -8
  14. package/lib/components/carousel/slide/slide.style.js +1 -1
  15. package/lib/components/draggable/draggable-item.style.js +1 -3
  16. package/lib/components/icon-button/icon-button.component.js +7 -8
  17. package/lib/components/popover-container/popover-container.style.d.ts +0 -1
  18. package/lib/components/popover-container/popover-container.style.js +5 -30
  19. package/lib/components/select/multi-select/multi-select.component.js +2 -2
  20. package/lib/components/select/select-list/select-list.style.js +1 -1
  21. package/lib/style/themes/base/base-theme.config.d.ts +4 -10
  22. package/lib/style/themes/sage/index.d.ts +4 -10
  23. package/package.json +2 -2
package/esm/__internal__/sticky-footer/sticky-footer.style.js CHANGED
@@ -14,7 +14,7 @@ const StyledStickyFooter = styled.div`
14
14
  position: sticky;
15
15
  bottom: 0;
16
16
  left: 0;
17
- background-color: var(--colorsComponentsNavigationYang100);
17
+ background-color: var(--colorsActionMinorYang100);
18
18
  box-shadow: var(--boxShadow150);
19
19
  z-index: 1000;
20
20
  `}
package/esm/components/button/button.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  function _extends() { _extends = Object.assign || 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); }
2
2
 
3
- import React, { useState } from "react";
3
+ import React, { useState, useCallback } from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import propTypes from "@styled-system/prop-types";
6
6
  import Icon from "../icon";
@@ -102,6 +102,12 @@ const Button = ({
102
102
  paddingX = 3;
103
103
  }
104
104
 
105
+ const setRefs = useCallback(reference => {
106
+ setInternalRef(reference);
107
+ if (!forwardRef) return;
108
+ if (typeof forwardRef === "object") forwardRef.current = reference;
109
+ if (typeof forwardRef === "function") forwardRef(reference);
110
+ }, [forwardRef]);
105
111
  return /*#__PURE__*/React.createElement(StyledButton, _extends({
106
112
  "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
107
113
  as: !disabled && href ? "a" : "button",
@@ -123,14 +129,7 @@ const Button = ({
123
129
  }, tagComponent("button", rest), rest, href && {
124
130
  href
125
131
  }, {
126
- ref: reference => {
127
- if (reference) {
128
- setInternalRef(reference);
129
- if (!forwardRef) return;
130
- if (typeof forwardRef === "object") forwardRef.current = reference;
131
- if (typeof forwardRef === "function") forwardRef(reference);
132
- }
133
- }
132
+ ref: setRefs
134
133
  }), renderChildren({
135
134
  iconType,
136
135
  iconPosition,
package/esm/components/carousel/slide/slide.style.js CHANGED
@@ -16,7 +16,7 @@ const SlideStyle = styled.div`
16
16
  opacity: 0.3;
17
17
  margin: 30px 0;
18
18
  box-shadow: var(--boxShadow200);
19
- background-color: var(--colorsComponentsNavigationYang100);
19
+ background-color: var(--colorsUtilityYang100);
20
20
 
21
21
  ${id === selectedIndex && css`
22
22
  transform: scale(1);
package/esm/components/draggable/draggable-item.style.js CHANGED
@@ -8,9 +8,7 @@ const StyledDraggableContainer = styled.div`
8
8
  const StyledDraggableItem = styled.div`
9
9
  display: flex;
10
10
  align-items: center;
11
- border-bottom: 1px solid ${({
12
- theme
13
- }) => theme.draggableItem.border};
11
+ border-bottom: 1px solid var(--colorsUtilityMajor050);
14
12
  ${padding}
15
13
  cursor: move;
16
14
 
package/esm/components/icon-button/icon-button.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  function _extends() { _extends = Object.assign || 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); }
2
2
 
3
- import React, { useState } from "react";
3
+ import React, { useState, useCallback } from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import styledSystemPropTypes from "@styled-system/prop-types";
6
6
  import Events from "../../__internal__/utils/helpers/events";
@@ -32,18 +32,17 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
32
32
  onAction(e);
33
33
  };
34
34
 
35
+ const setRefs = useCallback(reference => {
36
+ setInternalRef(reference);
37
+ if (!ref) return;
38
+ if (typeof ref === "object") ref.current = reference;
39
+ if (typeof ref === "function") ref(reference);
40
+ }, [ref]);
35
41
  return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
36
42
  "aria-label": ariaLabel,
37
43
  onKeyDown: onKeyDown,
38
44
  onClick: handleOnAction,
39
- ref: reference => {
40
- if (reference) {
41
- setInternalRef(reference);
42
- if (!ref) return;
43
- if (typeof ref === "object") ref.current = reference;
44
- if (typeof ref === "function") ref(reference);
45
- }
46
- },
45
+ ref: setRefs,
47
46
  disabled: disabled
48
47
  }, marginProps), /*#__PURE__*/React.createElement(TooltipProvider, {
49
48
  disabled: disabled,
package/esm/components/popover-container/popover-container.style.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
3
2
  export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
4
3
  export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
5
4
  export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
package/esm/components/popover-container/popover-container.style.js CHANGED
@@ -7,13 +7,6 @@ const PopoverContainerWrapperStyle = styled.div`
7
7
  position: relative;
8
8
  display: inline-block;
9
9
  `;
10
- const PopoverContainerIcon = styled(IconButton)`
11
- ${StyledIcon} {
12
- color: ${({
13
- theme
14
- }) => theme.popoverContainer.iconColor};
15
- }
16
- `;
17
10
  const PopoverContainerHeaderStyle = styled.div`
18
11
  display: flex;
19
12
  justify-content: space-between;
@@ -23,12 +16,8 @@ const PopoverContainerHeaderStyle = styled.div`
23
16
  const PopoverContainerContentStyle = styled.div`
24
17
  ${padding}
25
18
 
26
- background: ${({
27
- theme
28
- }) => theme.colors.white};
29
- box-shadow: ${({
30
- theme
31
- }) => theme.shadows.depth1};
19
+ background: var(--colorsUtilityYang100);
20
+ box-shadow: var(--boxShadow100);
32
21
  min-width: 300px;
33
22
  position: absolute;
34
23
  z-index: ${({
@@ -74,9 +63,7 @@ const PopoverContainerContentStyle = styled.div`
74
63
  `;
75
64
  const PopoverContainerOpenIcon = styled(IconButton)`
76
65
  ${StyledIcon} {
77
- color: ${({
78
- theme
79
- }) => theme.popoverContainer.iconColor};
66
+ color: var(--colorsActionMinor500);
80
67
  }
81
68
  `;
82
69
  const PopoverContainerCloseIcon = styled(IconButton)`
@@ -85,9 +72,7 @@ const PopoverContainerCloseIcon = styled(IconButton)`
85
72
  right: 24px;
86
73
 
87
74
  ${StyledIcon} {
88
- color: ${({
89
- theme
90
- }) => theme.popoverContainer.iconColor};
75
+ color: var(--colorsActionMinor500);
91
76
  }
92
77
  `;
93
78
  const PopoverContainerTitleStyle = styled.div`
@@ -97,13 +82,4 @@ const PopoverContainerTitleStyle = styled.div`
97
82
  PopoverContainerContentStyle.defaultProps = {
98
83
  theme: baseTheme
99
84
  };
100
- PopoverContainerIcon.defaultProps = {
101
- theme: baseTheme
102
- };
103
- PopoverContainerCloseIcon.defaultProps = {
104
- theme: baseTheme
105
- };
106
- PopoverContainerOpenIcon.defaultProps = {
107
- theme: baseTheme
108
- };
109
- export { PopoverContainerWrapperStyle, PopoverContainerIcon, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };
85
+ export { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon };
package/esm/components/select/multi-select/multi-select.component.js CHANGED
@@ -165,7 +165,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
165
165
 
166
166
  isClickTriggeredBySelect.current = false;
167
167
  }, [isOpen]);
168
- const mapValuesToPills = useCallback(() => {
168
+ const mapValuesToPills = useMemo(() => {
169
169
  const canDelete = !disabled && !readOnly;
170
170
 
171
171
  if (!selectedValue.length) {
@@ -384,7 +384,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
384
384
  disabled,
385
385
  readOnly,
386
386
  placeholder: placeholderOverride,
387
- leftChildren: mapValuesToPills(),
387
+ leftChildren: mapValuesToPills,
388
388
  inputRef: assignInput,
389
389
  formattedValue: textValue,
390
390
  selectedValue,
package/esm/components/select/select-list/select-list.style.js CHANGED
@@ -92,7 +92,7 @@ const StyledSelectListTableHeader = styled.thead`
92
92
  bottom: -8px;
93
93
  left: 0px;
94
94
  background-image: linear-gradient(
95
- var(--colorsComponentsNavigationYin100),
95
+ var(--colorsUtilityMajor800),
96
96
  var(--colorsUtilityYang100)
97
97
  );
98
98
  opacity: 0.03;
package/esm/style/themes/base/base-theme.config.d.ts CHANGED
@@ -433,16 +433,6 @@ declare function _default(palette: any): {
433
433
  colorsComponentsMenuYin090: string;
434
434
  colorsComponentsMenuYang100: string;
435
435
  colorsComponentsMenuYang080: string;
436
- colorsComponentsNavigation500: string;
437
- colorsComponentsNavigation600: string;
438
- colorsComponentsNavigation700: string;
439
- colorsComponentsNavigationTransparent: string;
440
- colorsComponentsNavigationYin100: string;
441
- colorsComponentsNavigationYin030: string;
442
- colorsComponentsNavigationYin055: string;
443
- colorsComponentsNavigationYin065: string;
444
- colorsComponentsNavigationYin090: string;
445
- colorsComponentsNavigationYang100: string;
446
436
  colorsUtilityMajor100: string;
447
437
  colorsUtilityMajor150: string;
448
438
  colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
566
556
  sizing075: string;
567
557
  sizingLogowidth: string;
568
558
  sizing010: string;
559
+ spacing1000: string;
569
560
  borderWidth100: string;
570
561
  borderWidth200: string;
571
562
  borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
610
601
  typographyButtonLabelS: string;
611
602
  typographyButtonLabelM: string;
612
603
  typographyButtonLabelL: string;
604
+ typographyCardSelectTitleM: string;
605
+ typographyCardSelectSubtitleM: string;
606
+ typographyCardSelectParagraphM: string;
613
607
  typographyDatePickerCalendarDateM: string;
614
608
  typographyDatePickerCalendarDayM: string;
615
609
  typographyDatePickerCalendarMonthM: string;
package/esm/style/themes/sage/index.d.ts CHANGED
@@ -70,16 +70,6 @@ declare var _default: {
70
70
  colorsComponentsMenuYin090: string;
71
71
  colorsComponentsMenuYang100: string;
72
72
  colorsComponentsMenuYang080: string;
73
- colorsComponentsNavigation500: string;
74
- colorsComponentsNavigation600: string;
75
- colorsComponentsNavigation700: string;
76
- colorsComponentsNavigationTransparent: string;
77
- colorsComponentsNavigationYin100: string;
78
- colorsComponentsNavigationYin030: string;
79
- colorsComponentsNavigationYin055: string;
80
- colorsComponentsNavigationYin065: string;
81
- colorsComponentsNavigationYin090: string;
82
- colorsComponentsNavigationYang100: string;
83
73
  colorsUtilityMajor100: string;
84
74
  colorsUtilityMajor150: string;
85
75
  colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
224
214
  spacing700: string;
225
215
  spacing800: string;
226
216
  spacing900: string;
217
+ spacing1000: string;
227
218
  spacing000: string;
228
219
  spacing025: string;
229
220
  spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
273
264
  typographyButtonLabelS: string;
274
265
  typographyButtonLabelM: string;
275
266
  typographyButtonLabelL: string;
267
+ typographyCardSelectTitleM: string;
268
+ typographyCardSelectSubtitleM: string;
269
+ typographyCardSelectParagraphM: string;
276
270
  typographyDatePickerCalendarDateM: string;
277
271
  typographyDatePickerCalendarDayM: string;
278
272
  typographyDatePickerCalendarMonthM: string;
package/lib/__internal__/sticky-footer/sticky-footer.style.js CHANGED
@@ -26,7 +26,7 @@ const StyledStickyFooter = _styledComponents.default.div`
26
26
  position: sticky;
27
27
  bottom: 0;
28
28
  left: 0;
29
- background-color: var(--colorsComponentsNavigationYang100);
29
+ background-color: var(--colorsActionMinorYang100);
30
30
  box-shadow: var(--boxShadow150);
31
31
  z-index: 1000;
32
32
  `}
package/lib/components/button/button.component.js CHANGED
@@ -121,6 +121,12 @@ const Button = ({
121
121
  paddingX = 3;
122
122
  }
123
123
 
124
+ const setRefs = (0, _react.useCallback)(reference => {
125
+ setInternalRef(reference);
126
+ if (!forwardRef) return;
127
+ if (typeof forwardRef === "object") forwardRef.current = reference;
128
+ if (typeof forwardRef === "function") forwardRef(reference);
129
+ }, [forwardRef]);
124
130
  return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
125
131
  "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
126
132
  as: !disabled && href ? "a" : "button",
@@ -142,14 +148,7 @@ const Button = ({
142
148
  }, (0, _tags.default)("button", rest), rest, href && {
143
149
  href
144
150
  }, {
145
- ref: reference => {
146
- if (reference) {
147
- setInternalRef(reference);
148
- if (!forwardRef) return;
149
- if (typeof forwardRef === "object") forwardRef.current = reference;
150
- if (typeof forwardRef === "function") forwardRef(reference);
151
- }
152
- }
151
+ ref: setRefs
153
152
  }), renderChildren({
154
153
  iconType,
155
154
  iconPosition,
package/lib/components/carousel/slide/slide.style.js CHANGED
@@ -28,7 +28,7 @@ const SlideStyle = _styledComponents.default.div`
28
28
  opacity: 0.3;
29
29
  margin: 30px 0;
30
30
  box-shadow: var(--boxShadow200);
31
- background-color: var(--colorsComponentsNavigationYang100);
31
+ background-color: var(--colorsUtilityYang100);
32
32
 
33
33
  ${id === selectedIndex && (0, _styledComponents.css)`
34
34
  transform: scale(1);
package/lib/components/draggable/draggable-item.style.js CHANGED
@@ -22,9 +22,7 @@ exports.StyledDraggableContainer = StyledDraggableContainer;
22
22
  const StyledDraggableItem = _styledComponents.default.div`
23
23
  display: flex;
24
24
  align-items: center;
25
- border-bottom: 1px solid ${({
26
- theme
27
- }) => theme.draggableItem.border};
25
+ border-bottom: 1px solid var(--colorsUtilityMajor050);
28
26
  ${_styledSystem.padding}
29
27
  cursor: move;
30
28
 
package/lib/components/icon-button/icon-button.component.js CHANGED
@@ -54,18 +54,17 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
54
54
  onAction(e);
55
55
  };
56
56
 
57
+ const setRefs = (0, _react.useCallback)(reference => {
58
+ setInternalRef(reference);
59
+ if (!ref) return;
60
+ if (typeof ref === "object") ref.current = reference;
61
+ if (typeof ref === "function") ref(reference);
62
+ }, [ref]);
57
63
  return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
58
64
  "aria-label": ariaLabel,
59
65
  onKeyDown: onKeyDown,
60
66
  onClick: handleOnAction,
61
- ref: reference => {
62
- if (reference) {
63
- setInternalRef(reference);
64
- if (!ref) return;
65
- if (typeof ref === "object") ref.current = reference;
66
- if (typeof ref === "function") ref(reference);
67
- }
68
- },
67
+ ref: setRefs,
69
68
  disabled: disabled
70
69
  }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
71
70
  disabled: disabled,
package/lib/components/popover-container/popover-container.style.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export const PopoverContainerIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
3
2
  export const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
4
3
  export const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
5
4
  export const PopoverContainerCloseIcon: import("styled-components").StyledComponent<typeof IconButton, any, {}, never>;
package/lib/components/popover-container/popover-container.style.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerIcon = exports.PopoverContainerWrapperStyle = void 0;
6
+ exports.PopoverContainerOpenIcon = exports.PopoverContainerTitleStyle = exports.PopoverContainerCloseIcon = exports.PopoverContainerContentStyle = exports.PopoverContainerHeaderStyle = exports.PopoverContainerWrapperStyle = void 0;
7
7
 
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
 
@@ -22,14 +22,6 @@ const PopoverContainerWrapperStyle = _styledComponents.default.div`
22
22
  display: inline-block;
23
23
  `;
24
24
  exports.PopoverContainerWrapperStyle = PopoverContainerWrapperStyle;
25
- const PopoverContainerIcon = (0, _styledComponents.default)(_iconButton.default)`
26
- ${_icon.default} {
27
- color: ${({
28
- theme
29
- }) => theme.popoverContainer.iconColor};
30
- }
31
- `;
32
- exports.PopoverContainerIcon = PopoverContainerIcon;
33
25
  const PopoverContainerHeaderStyle = _styledComponents.default.div`
34
26
  display: flex;
35
27
  justify-content: space-between;
@@ -40,12 +32,8 @@ exports.PopoverContainerHeaderStyle = PopoverContainerHeaderStyle;
40
32
  const PopoverContainerContentStyle = _styledComponents.default.div`
41
33
  ${_styledSystem.padding}
42
34
 
43
- background: ${({
44
- theme
45
- }) => theme.colors.white};
46
- box-shadow: ${({
47
- theme
48
- }) => theme.shadows.depth1};
35
+ background: var(--colorsUtilityYang100);
36
+ box-shadow: var(--boxShadow100);
49
37
  min-width: 300px;
50
38
  position: absolute;
51
39
  z-index: ${({
@@ -92,9 +80,7 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
92
80
  exports.PopoverContainerContentStyle = PopoverContainerContentStyle;
93
81
  const PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
94
82
  ${_icon.default} {
95
- color: ${({
96
- theme
97
- }) => theme.popoverContainer.iconColor};
83
+ color: var(--colorsActionMinor500);
98
84
  }
99
85
  `;
100
86
  exports.PopoverContainerOpenIcon = PopoverContainerOpenIcon;
@@ -104,9 +90,7 @@ const PopoverContainerCloseIcon = (0, _styledComponents.default)(_iconButton.def
104
90
  right: 24px;
105
91
 
106
92
  ${_icon.default} {
107
- color: ${({
108
- theme
109
- }) => theme.popoverContainer.iconColor};
93
+ color: var(--colorsActionMinor500);
110
94
  }
111
95
  `;
112
96
  exports.PopoverContainerCloseIcon = PopoverContainerCloseIcon;
@@ -117,13 +101,4 @@ const PopoverContainerTitleStyle = _styledComponents.default.div`
117
101
  exports.PopoverContainerTitleStyle = PopoverContainerTitleStyle;
118
102
  PopoverContainerContentStyle.defaultProps = {
119
103
  theme: _themes.baseTheme
120
- };
121
- PopoverContainerIcon.defaultProps = {
122
- theme: _themes.baseTheme
123
- };
124
- PopoverContainerCloseIcon.defaultProps = {
125
- theme: _themes.baseTheme
126
- };
127
- PopoverContainerOpenIcon.defaultProps = {
128
- theme: _themes.baseTheme
129
104
  };
package/lib/components/select/multi-select/multi-select.component.js CHANGED
@@ -191,7 +191,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
191
191
 
192
192
  isClickTriggeredBySelect.current = false;
193
193
  }, [isOpen]);
194
- const mapValuesToPills = (0, _react.useCallback)(() => {
194
+ const mapValuesToPills = (0, _react.useMemo)(() => {
195
195
  const canDelete = !disabled && !readOnly;
196
196
 
197
197
  if (!selectedValue.length) {
@@ -411,7 +411,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
411
411
  disabled,
412
412
  readOnly,
413
413
  placeholder: placeholderOverride,
414
- leftChildren: mapValuesToPills(),
414
+ leftChildren: mapValuesToPills,
415
415
  inputRef: assignInput,
416
416
  formattedValue: textValue,
417
417
  selectedValue,
package/lib/components/select/select-list/select-list.style.js CHANGED
@@ -109,7 +109,7 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
109
109
  bottom: -8px;
110
110
  left: 0px;
111
111
  background-image: linear-gradient(
112
- var(--colorsComponentsNavigationYin100),
112
+ var(--colorsUtilityMajor800),
113
113
  var(--colorsUtilityYang100)
114
114
  );
115
115
  opacity: 0.03;
package/lib/style/themes/base/base-theme.config.d.ts CHANGED
@@ -433,16 +433,6 @@ declare function _default(palette: any): {
433
433
  colorsComponentsMenuYin090: string;
434
434
  colorsComponentsMenuYang100: string;
435
435
  colorsComponentsMenuYang080: string;
436
- colorsComponentsNavigation500: string;
437
- colorsComponentsNavigation600: string;
438
- colorsComponentsNavigation700: string;
439
- colorsComponentsNavigationTransparent: string;
440
- colorsComponentsNavigationYin100: string;
441
- colorsComponentsNavigationYin030: string;
442
- colorsComponentsNavigationYin055: string;
443
- colorsComponentsNavigationYin065: string;
444
- colorsComponentsNavigationYin090: string;
445
- colorsComponentsNavigationYang100: string;
446
436
  colorsUtilityMajor100: string;
447
437
  colorsUtilityMajor150: string;
448
438
  colorsUtilityMajor200: string;
@@ -566,6 +556,7 @@ declare function _default(palette: any): {
566
556
  sizing075: string;
567
557
  sizingLogowidth: string;
568
558
  sizing010: string;
559
+ spacing1000: string;
569
560
  borderWidth100: string;
570
561
  borderWidth200: string;
571
562
  borderWidth300: string;
@@ -610,6 +601,9 @@ declare function _default(palette: any): {
610
601
  typographyButtonLabelS: string;
611
602
  typographyButtonLabelM: string;
612
603
  typographyButtonLabelL: string;
604
+ typographyCardSelectTitleM: string;
605
+ typographyCardSelectSubtitleM: string;
606
+ typographyCardSelectParagraphM: string;
613
607
  typographyDatePickerCalendarDateM: string;
614
608
  typographyDatePickerCalendarDayM: string;
615
609
  typographyDatePickerCalendarMonthM: string;
package/lib/style/themes/sage/index.d.ts CHANGED
@@ -70,16 +70,6 @@ declare var _default: {
70
70
  colorsComponentsMenuYin090: string;
71
71
  colorsComponentsMenuYang100: string;
72
72
  colorsComponentsMenuYang080: string;
73
- colorsComponentsNavigation500: string;
74
- colorsComponentsNavigation600: string;
75
- colorsComponentsNavigation700: string;
76
- colorsComponentsNavigationTransparent: string;
77
- colorsComponentsNavigationYin100: string;
78
- colorsComponentsNavigationYin030: string;
79
- colorsComponentsNavigationYin055: string;
80
- colorsComponentsNavigationYin065: string;
81
- colorsComponentsNavigationYin090: string;
82
- colorsComponentsNavigationYang100: string;
83
73
  colorsUtilityMajor100: string;
84
74
  colorsUtilityMajor150: string;
85
75
  colorsUtilityMajor200: string;
@@ -224,6 +214,7 @@ declare var _default: {
224
214
  spacing700: string;
225
215
  spacing800: string;
226
216
  spacing900: string;
217
+ spacing1000: string;
227
218
  spacing000: string;
228
219
  spacing025: string;
229
220
  spacing050: string;
@@ -273,6 +264,9 @@ declare var _default: {
273
264
  typographyButtonLabelS: string;
274
265
  typographyButtonLabelM: string;
275
266
  typographyButtonLabelL: string;
267
+ typographyCardSelectTitleM: string;
268
+ typographyCardSelectSubtitleM: string;
269
+ typographyCardSelectParagraphM: string;
276
270
  typographyDatePickerCalendarDateM: string;
277
271
  typographyDatePickerCalendarDayM: string;
278
272
  typographyDatePickerCalendarMonthM: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.38.0",
3
+ "version": "104.39.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {
@@ -157,7 +157,7 @@
157
157
  "dependencies": {
158
158
  "@octokit/rest": "^18.12.0",
159
159
  "@popperjs/core": "^2.9.0",
160
- "@sage/design-tokens": "^1.92.0",
160
+ "@sage/design-tokens": "^1.93.0",
161
161
  "@styled-system/prop-types": "^5.1.5",
162
162
  "@tippyjs/react": "^4.2.5",
163
163
  "@types/styled-system": "^5.1.11",