@zendeskgarden/react-buttons 8.57.1 → 8.58.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 (3) hide show
  1. package/dist/index.cjs.js +182 -314
  2. package/dist/index.esm.js +182 -314
  3. package/package.json +3 -3
package/dist/index.esm.js CHANGED
@@ -13,154 +13,66 @@ import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden
13
13
  import { rgba, math, em } from 'polished';
14
14
  import { useButtonGroup } from '@zendeskgarden/container-buttongroup';
15
15
 
16
- function ownKeys(object, enumerableOnly) {
17
- var keys = Object.keys(object);
18
-
19
- if (Object.getOwnPropertySymbols) {
20
- var symbols = Object.getOwnPropertySymbols(object);
21
- enumerableOnly && (symbols = symbols.filter(function (sym) {
22
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
23
- })), keys.push.apply(keys, symbols);
24
- }
25
-
26
- return keys;
27
- }
28
-
29
- function _objectSpread2(target) {
30
- for (var i = 1; i < arguments.length; i++) {
31
- var source = null != arguments[i] ? arguments[i] : {};
32
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
33
- _defineProperty(target, key, source[key]);
34
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
35
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
36
- });
37
- }
38
-
39
- return target;
40
- }
41
-
42
- function _defineProperty(obj, key, value) {
43
- if (key in obj) {
44
- Object.defineProperty(obj, key, {
45
- value: value,
46
- enumerable: true,
47
- configurable: true,
48
- writable: true
49
- });
50
- } else {
51
- obj[key] = value;
52
- }
53
-
54
- return obj;
55
- }
56
-
57
16
  function _extends$2() {
58
17
  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
59
18
  for (var i = 1; i < arguments.length; i++) {
60
19
  var source = arguments[i];
61
-
62
20
  for (var key in source) {
63
21
  if (Object.prototype.hasOwnProperty.call(source, key)) {
64
22
  target[key] = source[key];
65
23
  }
66
24
  }
67
25
  }
68
-
69
26
  return target;
70
27
  };
71
28
  return _extends$2.apply(this, arguments);
72
29
  }
73
30
 
74
- function _objectWithoutPropertiesLoose(source, excluded) {
75
- if (source == null) return {};
76
- var target = {};
77
- var sourceKeys = Object.keys(source);
78
- var key, i;
79
-
80
- for (i = 0; i < sourceKeys.length; i++) {
81
- key = sourceKeys[i];
82
- if (excluded.indexOf(key) >= 0) continue;
83
- target[key] = source[key];
84
- }
85
-
86
- return target;
87
- }
88
-
89
- function _objectWithoutProperties(source, excluded) {
90
- if (source == null) return {};
91
-
92
- var target = _objectWithoutPropertiesLoose(source, excluded);
93
-
94
- var key, i;
31
+ const SIZE = ['small', 'medium', 'large'];
95
32
 
96
- if (Object.getOwnPropertySymbols) {
97
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
98
-
99
- for (i = 0; i < sourceSymbolKeys.length; i++) {
100
- key = sourceSymbolKeys[i];
101
- if (excluded.indexOf(key) >= 0) continue;
102
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
103
- target[key] = source[key];
104
- }
105
- }
106
-
107
- return target;
108
- }
109
-
110
- var SIZE = ['small', 'medium', 'large'];
111
-
112
- var COMPONENT_ID$5 = 'buttons.button_group_view';
113
- var StyledButtonGroup = styled.div.attrs({
33
+ const COMPONENT_ID$5 = 'buttons.button_group_view';
34
+ const StyledButtonGroup = styled.div.attrs({
114
35
  'data-garden-id': COMPONENT_ID$5,
115
- 'data-garden-version': '8.57.1'
36
+ 'data-garden-version': '8.58.0'
116
37
  }).withConfig({
117
38
  displayName: "StyledButtonGroup",
118
39
  componentId: "sc-1fbpzef-0"
119
- })(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], function (props) {
120
- return props.theme.rtl && 'rtl';
121
- }, function (props) {
122
- return retrieveComponentStyles(COMPONENT_ID$5, props);
123
- });
40
+ })(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$5, props));
124
41
  StyledButtonGroup.defaultProps = {
125
42
  theme: DEFAULT_THEME
126
43
  };
127
44
 
128
- var _excluded$6 = ["children", "isRotated", "theme"];
129
- var COMPONENT_ID$4 = 'buttons.icon';
130
- var sizeStyles$1 = function sizeStyles(props) {
131
- var marginProperty;
45
+ const COMPONENT_ID$4 = 'buttons.icon';
46
+ const sizeStyles$1 = props => {
47
+ let marginProperty;
132
48
  if (props.position === 'start') {
133
- marginProperty = "margin-".concat(props.theme.rtl ? 'left' : 'right');
49
+ marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
134
50
  } else if (props.position === 'end') {
135
- marginProperty = "margin-".concat(props.theme.rtl ? 'right' : 'left');
51
+ marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
136
52
  }
137
53
  return marginProperty && css(["", ":", "px;"], marginProperty, props.theme.space.base * 2);
138
54
  };
139
- var StyledIcon = styled(function (_ref) {
140
- var children = _ref.children;
141
- _ref.isRotated;
142
- _ref.theme;
143
- var props = _objectWithoutProperties(_ref, _excluded$6);
55
+ const StyledIcon = styled(_ref => {
56
+ let {
57
+ children,
58
+ isRotated,
59
+ theme,
60
+ ...props
61
+ } = _ref;
144
62
  return React__default.cloneElement(Children.only(children), props);
145
63
  }).attrs({
146
64
  'data-garden-id': COMPONENT_ID$4,
147
- 'data-garden-version': '8.57.1'
65
+ 'data-garden-version': '8.58.0'
148
66
  }).withConfig({
149
67
  displayName: "StyledIcon",
150
68
  componentId: "sc-19meqgg-0"
151
- })(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], function (props) {
152
- return props.isRotated && "rotate(".concat(props.theme.rtl ? '-' : '+', "180deg)");
153
- }, function (props) {
154
- return sizeStyles$1(props);
155
- }, function (props) {
156
- return retrieveComponentStyles(COMPONENT_ID$4, props);
157
- });
69
+ })(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
158
70
  StyledIcon.defaultProps = {
159
71
  theme: DEFAULT_THEME
160
72
  };
161
73
 
162
- var COMPONENT_ID$3 = 'buttons.button';
163
- var getBorderRadius = function getBorderRadius(props) {
74
+ const COMPONENT_ID$3 = 'buttons.button';
75
+ const getBorderRadius = props => {
164
76
  if (props.isLink) {
165
77
  return 0;
166
78
  } else if (props.isPill) {
@@ -168,20 +80,20 @@ var getBorderRadius = function getBorderRadius(props) {
168
80
  }
169
81
  return props.theme.borderRadii.md;
170
82
  };
171
- var getDisabledBackgroundColor = function getDisabledBackgroundColor(props) {
83
+ const getDisabledBackgroundColor = props => {
172
84
  return getColor('neutralHue', 200, props.theme);
173
85
  };
174
- var getHeight = function getHeight(props) {
86
+ const getHeight = props => {
175
87
  if (props.size === 'small') {
176
- return "".concat(props.theme.space.base * 8, "px");
88
+ return `${props.theme.space.base * 8}px`;
177
89
  } else if (props.size === 'large') {
178
- return "".concat(props.theme.space.base * 12, "px");
90
+ return `${props.theme.space.base * 12}px`;
179
91
  }
180
- return "".concat(props.theme.space.base * 10, "px");
92
+ return `${props.theme.space.base * 10}px`;
181
93
  };
182
- var colorStyles = function colorStyles(props) {
183
- var retVal;
184
- var hue;
94
+ const colorStyles = props => {
95
+ let retVal;
96
+ let hue;
185
97
  if (props.disabled || props.isNeutral && (props.isPrimary || props.isSelected) && !props.isDanger) {
186
98
  hue = 'neutralHue';
187
99
  } else if (props.isDanger) {
@@ -189,132 +101,88 @@ var colorStyles = function colorStyles(props) {
189
101
  } else {
190
102
  hue = 'primaryHue';
191
103
  }
192
- var shade = 600;
193
- var baseColor = getColor(hue, shade, props.theme);
194
- var hoverColor = getColor(hue, shade + 100, props.theme);
195
- var activeColor = getColor(hue, shade + 200, props.theme);
196
- var disabledBackgroundColor = getDisabledBackgroundColor(props);
197
- var disabledForegroundColor = getColor(hue, shade - 200, props.theme);
198
- var boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
199
- var boxShadow = "\n ".concat(props.focusInset ? 'inset' : '', "\n ").concat(props.theme.shadows.md(rgba(boxShadowColor, 0.35)));
104
+ const shade = 600;
105
+ const baseColor = getColor(hue, shade, props.theme);
106
+ const hoverColor = getColor(hue, shade + 100, props.theme);
107
+ const activeColor = getColor(hue, shade + 200, props.theme);
108
+ const disabledBackgroundColor = getDisabledBackgroundColor(props);
109
+ const disabledForegroundColor = getColor(hue, shade - 200, props.theme);
110
+ const boxShadowColor = props.focusInset && (props.isPrimary || props.isSelected) ? props.theme.palette.white : baseColor;
111
+ const boxShadow = `
112
+ ${props.focusInset ? 'inset' : ''}
113
+ ${props.theme.shadows.md(rgba(boxShadowColor, 0.35))}`;
200
114
  if (props.isLink) {
201
115
  retVal = css(["background-color:transparent;color:", ";&:focus{color:", ";}&:hover,&[data-garden-focus-visible]{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, baseColor, hoverColor, activeColor, disabledForegroundColor);
202
116
  } else if (props.isPrimary || props.isSelected) {
203
117
  retVal = css(["background-color:", ";color:", ";&:hover{background-color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], props.isPrimary && props.isSelected ? activeColor : baseColor, props.theme.palette.white, hoverColor, boxShadow, activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
204
118
  } else {
205
- var borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor;
206
- var foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
207
- var hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
208
- var hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
119
+ const borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor;
120
+ const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
121
+ const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
122
+ const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
209
123
  retVal = css(["border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}&[data-garden-focus-visible]{border-color:", ";box-shadow:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, props.isNeutral && baseColor, boxShadow, !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
210
124
  }
211
125
  return retVal;
212
126
  };
213
- var groupStyles = function groupStyles(props) {
214
- var isPrimary = props.isPrimary;
215
- var rtl = props.theme.rtl;
216
- var lightBorderColor = props.theme.colors.background;
217
- var disabledBackgroundColor = getDisabledBackgroundColor(props);
218
- return css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', math("".concat(props.theme.borderWidths.sm, " * -1")), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
127
+ const groupStyles = props => {
128
+ const isPrimary = props.isPrimary;
129
+ const rtl = props.theme.rtl;
130
+ const lightBorderColor = props.theme.colors.background;
131
+ const disabledBackgroundColor = getDisabledBackgroundColor(props);
132
+ return css(["position:relative;margin-", ":", ";border-top-width:", ";border-bottom-width:", ";border-right-color:", ";border-left-color:", ";&:hover,&[data-garden-focus-visible],&:active{z-index:1;}&:disabled{z-index:-1;border-top-width:0;border-bottom-width:0;border-right-color:", ";border-left-color:", ";background-color:", ";}&:first-of-type:not(:last-of-type){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;border-", "-width:", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], rtl ? 'right' : 'left', math(`${props.theme.borderWidths.sm} * -1`), isPrimary && 0, isPrimary && 0, isPrimary && lightBorderColor, isPrimary && lightBorderColor, lightBorderColor, lightBorderColor, !isPrimary && disabledBackgroundColor, rtl ? 'right' : 'left', rtl ? 'left' : 'right', rtl ? 'left' : 'right', rtl ? 'right' : 'left', isPrimary && 0, rtl ? 'right' : 'left', rtl ? 'right' : 'left', rtl ? 'left' : 'right', isPrimary && 0, StyledIcon, rtl ? 'left' : 'right', props.isPill && '-2px', StyledIcon, rtl ? 'right' : 'left', props.isPill && '-2px');
219
133
  };
220
- var iconStyles$1 = function iconStyles(props) {
221
- var size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
134
+ const iconStyles$1 = props => {
135
+ const size = props.size === 'small' ? props.theme.iconSizes.sm : props.theme.iconSizes.md;
222
136
  return css(["width:", ";min-width:", ";height:", ";vertical-align:", ";"], size, size, size, props.isLink && 'middle');
223
137
  };
224
- var sizeStyles = function sizeStyles(props) {
225
- var retVal;
138
+ const sizeStyles = props => {
139
+ let retVal;
226
140
  if (props.isLink) {
227
141
  retVal = css(["padding:0;font-size:inherit;"]);
228
142
  } else {
229
- var height = getHeight(props);
230
- var lineHeight = math("".concat(height, " - (").concat(props.theme.borderWidths.sm, " * 2)"));
231
- var padding;
232
- var fontSize;
143
+ const height = getHeight(props);
144
+ const lineHeight = math(`${height} - (${props.theme.borderWidths.sm} * 2)`);
145
+ let padding;
146
+ let fontSize;
233
147
  if (props.size === 'small') {
234
148
  fontSize = props.theme.fontSizes.sm;
235
- padding = "".concat(props.theme.space.base * 3, "px");
149
+ padding = `${props.theme.space.base * 3}px`;
236
150
  } else {
237
151
  fontSize = props.theme.fontSizes.md;
238
152
  if (props.size === 'large') {
239
- padding = "".concat(props.theme.space.base * 5, "px");
153
+ padding = `${props.theme.space.base * 5}px`;
240
154
  } else {
241
- padding = "".concat(props.theme.space.base * 4, "px");
155
+ padding = `${props.theme.space.base * 4}px`;
242
156
  }
243
157
  }
244
- retVal = css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], em(math("".concat(padding, " - ").concat(props.theme.borderWidths.sm)), fontSize), height, lineHeight, fontSize);
158
+ retVal = css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], em(math(`${padding} - ${props.theme.borderWidths.sm}`), fontSize), height, lineHeight, fontSize);
245
159
  }
246
160
  return retVal;
247
161
  };
248
- var StyledButton = styled.button.attrs(function (props) {
249
- return {
250
- 'data-garden-id': COMPONENT_ID$3,
251
- 'data-garden-version': '8.57.1',
252
- type: props.type || 'button'
253
- };
254
- }).withConfig({
162
+ const StyledButton = styled.button.attrs(props => ({
163
+ 'data-garden-id': COMPONENT_ID$3,
164
+ 'data-garden-version': '8.58.0',
165
+ type: props.type || 'button'
166
+ })).withConfig({
255
167
  displayName: "StyledButton",
256
168
  componentId: "sc-qe3ace-0"
257
- })(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], function (props) {
258
- return props.isLink ? 'inline' : 'inline-flex';
259
- }, function (props) {
260
- return !props.isLink && 'center';
261
- }, function (props) {
262
- return !props.isLink && 'center';
263
- }, function (props) {
264
- return props.isLink ? 'none' : "".concat(props.theme.borders.sm, " transparent");
265
- }, function (props) {
266
- return getBorderRadius(props);
267
- }, function (props) {
268
- return props.isStretched ? '100%' : '';
269
- }, function (props) {
270
- return !props.isLink && 'nowrap';
271
- }, function (props) {
272
- return props.isLink ? 'inherit' : props.theme.fontWeights.regular;
273
- }, function (props) {
274
- return !props.isLink && 'none';
275
- }, function (props) {
276
- return sizeStyles(props);
277
- }, function (props) {
278
- return props.isLink && 'none';
279
- }, function (props) {
280
- return props.isLink ? 'underline' : 'none';
281
- }, function (props) {
282
- return props.isLink ? 'underline' : 'none';
283
- }, function (props) {
284
- return props.isLink ? 'underline' : 'none';
285
- }, function (props) {
286
- return colorStyles(props);
287
- }, function (props) {
288
- return props.isLink && 'none';
289
- }, StyledIcon, function (props) {
290
- return iconStyles$1(props);
291
- }, StyledButtonGroup, function (props) {
292
- return groupStyles(props);
293
- }, function (props) {
294
- return retrieveComponentStyles(COMPONENT_ID$3, props);
295
- });
169
+ })(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;text-decoration:", ";}&:hover{text-decoration:", ";}&[data-garden-focus-visible]{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", ";}", ";"], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => props.isLink ? 'none' : `${props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), props => props.isLink && 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledButtonGroup, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
296
170
  StyledButton.defaultProps = {
297
171
  theme: DEFAULT_THEME
298
172
  };
299
173
 
300
- var COMPONENT_ID$2 = 'buttons.anchor';
301
- var StyledAnchor = styled(StyledButton).attrs(function (props) {
302
- return {
303
- 'data-garden-id': COMPONENT_ID$2,
304
- 'data-garden-version': '8.57.1',
305
- as: 'a',
306
- dir: props.theme.rtl ? 'rtl' : undefined,
307
- isLink: true,
308
- type: undefined
309
- };
310
- }).withConfig({
174
+ const COMPONENT_ID$2 = 'buttons.anchor';
175
+ const StyledAnchor = styled(StyledButton).attrs(props => ({
176
+ 'data-garden-id': COMPONENT_ID$2,
177
+ 'data-garden-version': '8.58.0',
178
+ as: 'a',
179
+ dir: props.theme.rtl ? 'rtl' : undefined,
180
+ isLink: true,
181
+ type: undefined
182
+ })).withConfig({
311
183
  displayName: "StyledAnchor",
312
184
  componentId: "sc-xshgmo-0"
313
- })(["direction:", ";", ";"], function (props) {
314
- return props.theme.rtl && 'rtl';
315
- }, function (props) {
316
- return retrieveComponentStyles(COMPONENT_ID$2, props);
317
- });
185
+ })(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$2, props));
318
186
  StyledAnchor.defaultProps = {
319
187
  theme: DEFAULT_THEME
320
188
  };
@@ -330,7 +198,8 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
330
198
  height: 12,
331
199
  focusable: "false",
332
200
  viewBox: "0 0 12 12",
333
- "aria-hidden": "true"
201
+ "aria-hidden": "true",
202
+ role: "img"
334
203
  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
335
204
  fill: "none",
336
205
  stroke: "currentColor",
@@ -339,96 +208,84 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
339
208
  })));
340
209
  };
341
210
 
342
- var COMPONENT_ID$1 = 'buttons.external_icon';
343
- var StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
211
+ const COMPONENT_ID$1 = 'buttons.external_icon';
212
+ const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
344
213
  'data-garden-id': COMPONENT_ID$1,
345
- 'data-garden-version': '8.57.1'
214
+ 'data-garden-version': '8.58.0'
346
215
  }).withConfig({
347
216
  displayName: "StyledExternalIcon",
348
217
  componentId: "sc-16oz07e-0"
349
- })(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], function (props) {
350
- return props.theme.rtl && 'scaleX(-1)';
351
- }, function (props) {
352
- return retrieveComponentStyles(COMPONENT_ID$1, props);
353
- });
218
+ })(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => retrieveComponentStyles(COMPONENT_ID$1, props));
354
219
  StyledExternalIcon.defaultProps = {
355
220
  theme: DEFAULT_THEME
356
221
  };
357
222
 
358
- var COMPONENT_ID = 'buttons.icon_button';
359
- var iconColorStyles = function iconColorStyles(props) {
360
- var shade = 600;
361
- var baseColor = getColor('neutralHue', shade, props.theme);
362
- var hoverColor = getColor('neutralHue', shade + 100, props.theme);
363
- var activeColor = getColor('neutralHue', shade + 200, props.theme);
223
+ const COMPONENT_ID = 'buttons.icon_button';
224
+ const iconColorStyles = props => {
225
+ const shade = 600;
226
+ const baseColor = getColor('neutralHue', shade, props.theme);
227
+ const hoverColor = getColor('neutralHue', shade + 100, props.theme);
228
+ const activeColor = getColor('neutralHue', shade + 200, props.theme);
364
229
  return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
365
230
  };
366
- var iconButtonStyles = function iconButtonStyles(props) {
367
- var width = getHeight(props);
231
+ const iconButtonStyles = props => {
232
+ const width = getHeight(props);
368
233
  return css(["border:", ";padding:0;width:", ";min-width:", ";", ";&:disabled{background-color:", ";}"], props.isBasic && 'none', width, width, props.isBasic && !(props.isPrimary || props.isDanger || props.disabled) && iconColorStyles(props), !props.isPrimary && 'transparent');
369
234
  };
370
- var iconStyles = function iconStyles(props) {
371
- var size = props.theme.iconSizes.md;
235
+ const iconStyles = props => {
236
+ const size = props.theme.iconSizes.md;
372
237
  return css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
373
238
  };
374
- var StyledIconButton = styled(StyledButton).attrs({
239
+ const StyledIconButton = styled(StyledButton).attrs({
375
240
  'data-garden-id': COMPONENT_ID,
376
- 'data-garden-version': '8.57.1'
241
+ 'data-garden-version': '8.58.0'
377
242
  }).withConfig({
378
243
  displayName: "StyledIconButton",
379
244
  componentId: "sc-1t0ughp-0"
380
- })(["", ";& ", "{", "}", ";"], function (props) {
381
- return iconButtonStyles(props);
382
- }, StyledIcon, function (props) {
383
- return iconStyles(props);
384
- }, function (props) {
385
- return retrieveComponentStyles(COMPONENT_ID, props);
386
- });
245
+ })(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
387
246
  StyledIconButton.defaultProps = {
388
247
  theme: DEFAULT_THEME
389
248
  };
390
249
 
391
- var ButtonGroupContext = createContext(undefined);
392
- var useButtonGroupContext = function useButtonGroupContext() {
250
+ const ButtonGroupContext = createContext(undefined);
251
+ const useButtonGroupContext = () => {
393
252
  return useContext(ButtonGroupContext);
394
253
  };
395
254
 
396
- var SplitButtonContext = createContext(undefined);
397
- var useSplitButtonContext = function useSplitButtonContext() {
255
+ const SplitButtonContext = createContext(undefined);
256
+ const useSplitButtonContext = () => {
398
257
  return useContext(SplitButtonContext);
399
258
  };
400
259
 
401
- var StartIconComponent = function StartIconComponent(props) {
402
- return React__default.createElement(StyledIcon, _extends$2({
403
- position: "start"
404
- }, props));
405
- };
260
+ const StartIconComponent = props => React__default.createElement(StyledIcon, _extends$2({
261
+ position: "start"
262
+ }, props));
406
263
  StartIconComponent.displayName = 'Button.StartIcon';
407
- var StartIcon = StartIconComponent;
264
+ const StartIcon = StartIconComponent;
408
265
 
409
- var EndIconComponent = function EndIconComponent(props) {
410
- return React__default.createElement(StyledIcon, _extends$2({
411
- position: "end"
412
- }, props));
413
- };
266
+ const EndIconComponent = props => React__default.createElement(StyledIcon, _extends$2({
267
+ position: "end"
268
+ }, props));
414
269
  EndIconComponent.displayName = 'Button.EndIcon';
415
- var EndIcon = EndIconComponent;
270
+ const EndIcon = EndIconComponent;
416
271
 
417
- var ButtonComponent = forwardRef(function (props, ref) {
418
- var buttonGroupContext = useButtonGroupContext();
419
- var splitButtonContext = useSplitButtonContext();
420
- var computedProps = _objectSpread2(_objectSpread2({}, props), {}, {
272
+ const ButtonComponent = forwardRef((props, ref) => {
273
+ const buttonGroupContext = useButtonGroupContext();
274
+ const splitButtonContext = useSplitButtonContext();
275
+ let computedProps = {
276
+ ...props,
421
277
  focusInset: props.focusInset || buttonGroupContext !== undefined || splitButtonContext
422
- });
278
+ };
423
279
  if (buttonGroupContext && !props.disabled) {
424
280
  if (!props.value) {
425
281
  throw new Error('"value" prop must be provided to Button when used within a ButtonGroup');
426
282
  }
427
- computedProps = buttonGroupContext.getButtonProps(_objectSpread2({
283
+ computedProps = buttonGroupContext.getButtonProps({
428
284
  item: props.value,
429
285
  focusRef: React__default.createRef(),
430
- isSelected: props.value === buttonGroupContext.selectedItem
431
- }, computedProps));
286
+ isSelected: props.value === buttonGroupContext.selectedItem,
287
+ ...computedProps
288
+ });
432
289
  }
433
290
  return React__default.createElement(StyledButton, _extends$2({
434
291
  ref: ref
@@ -450,21 +307,23 @@ ButtonComponent.propTypes = {
450
307
  ButtonComponent.defaultProps = {
451
308
  size: 'medium'
452
309
  };
453
- var Button = ButtonComponent;
310
+ const Button = ButtonComponent;
454
311
  Button.EndIcon = EndIcon;
455
312
  Button.StartIcon = StartIcon;
456
313
 
457
- var _excluded$5 = ["children", "isExternal"];
458
- var Anchor = forwardRef(function (_ref, ref) {
459
- var children = _ref.children,
460
- isExternal = _ref.isExternal,
461
- otherProps = _objectWithoutProperties(_ref, _excluded$5);
462
- var anchorProps = otherProps;
314
+ const Anchor = forwardRef((_ref, ref) => {
315
+ let {
316
+ children,
317
+ isExternal,
318
+ ...otherProps
319
+ } = _ref;
320
+ let anchorProps = otherProps;
463
321
  if (isExternal) {
464
- anchorProps = _objectSpread2({
322
+ anchorProps = {
465
323
  target: '_blank',
466
- rel: 'noopener noreferrer'
467
- }, anchorProps);
324
+ rel: 'noopener noreferrer',
325
+ ...anchorProps
326
+ };
468
327
  }
469
328
  return React__default.createElement(StyledAnchor, _extends$2({
470
329
  ref: ref
@@ -476,26 +335,26 @@ Anchor.propTypes = {
476
335
  isDanger: PropTypes.bool
477
336
  };
478
337
 
479
- var _excluded$4 = ["children", "onSelect", "selectedItem"];
480
- var ButtonGroup = forwardRef(function (_ref, ref) {
481
- var children = _ref.children,
482
- onSelect = _ref.onSelect,
483
- controlledSelectedItem = _ref.selectedItem,
484
- otherProps = _objectWithoutProperties(_ref, _excluded$4);
485
- var _useButtonGroup = useButtonGroup({
338
+ const ButtonGroup = forwardRef((_ref, ref) => {
339
+ let {
340
+ children,
341
+ onSelect,
342
+ selectedItem: controlledSelectedItem,
343
+ ...otherProps
344
+ } = _ref;
345
+ const {
346
+ selectedItem,
347
+ getButtonProps,
348
+ getGroupProps
349
+ } = useButtonGroup({
486
350
  selectedItem: controlledSelectedItem,
487
351
  defaultSelectedIndex: 0,
488
- onSelect: onSelect
489
- }),
490
- selectedItem = _useButtonGroup.selectedItem,
491
- getButtonProps = _useButtonGroup.getButtonProps,
492
- getGroupProps = _useButtonGroup.getGroupProps;
493
- var contextValue = useMemo(function () {
494
- return {
495
- selectedItem: selectedItem,
496
- getButtonProps: getButtonProps
497
- };
498
- }, [selectedItem, getButtonProps]);
352
+ onSelect
353
+ });
354
+ const contextValue = useMemo(() => ({
355
+ selectedItem,
356
+ getButtonProps
357
+ }), [selectedItem, getButtonProps]);
499
358
  return React__default.createElement(ButtonGroupContext.Provider, {
500
359
  value: contextValue
501
360
  }, React__default.createElement(StyledButtonGroup, _extends$2({
@@ -508,12 +367,13 @@ ButtonGroup.propTypes = {
508
367
  onSelect: PropTypes.func
509
368
  };
510
369
 
511
- var _excluded$3 = ["children", "isRotated"];
512
- var IconButton = forwardRef(function (_ref, ref) {
513
- var children = _ref.children,
514
- isRotated = _ref.isRotated,
515
- otherProps = _objectWithoutProperties(_ref, _excluded$3);
516
- var focusInset = useSplitButtonContext();
370
+ const IconButton = forwardRef((_ref, ref) => {
371
+ let {
372
+ children,
373
+ isRotated,
374
+ ...otherProps
375
+ } = _ref;
376
+ const focusInset = useSplitButtonContext();
517
377
  return React__default.createElement(StyledIconButton, _extends$2({
518
378
  ref: ref
519
379
  }, otherProps, {
@@ -550,15 +410,18 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
550
410
  height: 16,
551
411
  focusable: "false",
552
412
  viewBox: "0 0 16 16",
553
- "aria-hidden": "true"
413
+ "aria-hidden": "true",
414
+ role: "img"
554
415
  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
555
416
  fill: "currentColor",
556
417
  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
557
418
  })));
558
419
  };
559
420
 
560
- var ChevronButton = forwardRef(function (_ref, ref) {
561
- var buttonProps = _extends$2({}, _ref);
421
+ const ChevronButton = forwardRef((_ref, ref) => {
422
+ let {
423
+ ...buttonProps
424
+ } = _ref;
562
425
  return React__default.createElement(IconButton, _extends$2({
563
426
  ref: ref
564
427
  }, buttonProps), React__default.createElement(SvgChevronDownStroke, null));
@@ -571,10 +434,11 @@ ChevronButton.defaultProps = {
571
434
  size: 'medium'
572
435
  };
573
436
 
574
- var _excluded$2 = ["children"];
575
- var SplitButton = forwardRef(function (_ref, ref) {
576
- var children = _ref.children,
577
- other = _objectWithoutProperties(_ref, _excluded$2);
437
+ const SplitButton = forwardRef((_ref, ref) => {
438
+ let {
439
+ children,
440
+ ...other
441
+ } = _ref;
578
442
  return React__default.createElement(SplitButtonContext.Provider, {
579
443
  value: true
580
444
  }, React__default.createElement(StyledButtonGroup, _extends$2({
@@ -583,36 +447,40 @@ var SplitButton = forwardRef(function (_ref, ref) {
583
447
  });
584
448
  SplitButton.displayName = 'SplitButton';
585
449
 
586
- var _excluded$1 = ["isPressed"];
587
- var ToggleButton = forwardRef(function (_ref, ref) {
588
- var isPressed = _ref.isPressed,
589
- otherProps = _objectWithoutProperties(_ref, _excluded$1);
450
+ const ToggleButton = forwardRef((_ref, ref) => {
451
+ let {
452
+ isPressed,
453
+ ...otherProps
454
+ } = _ref;
590
455
  return React__default.createElement(Button, _extends$2({
591
456
  "aria-pressed": isPressed,
592
457
  ref: ref
593
458
  }, otherProps));
594
459
  });
595
460
  ToggleButton.displayName = 'ToggleButton';
596
- ToggleButton.propTypes = _objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
461
+ ToggleButton.propTypes = {
462
+ ...Button.propTypes,
597
463
  isPressed: PropTypes.oneOf([true, false, 'mixed'])
598
- });
464
+ };
599
465
  ToggleButton.defaultProps = {
600
466
  size: 'medium'
601
467
  };
602
468
 
603
- var _excluded = ["isPressed"];
604
- var ToggleIconButton = forwardRef(function (_ref, ref) {
605
- var isPressed = _ref.isPressed,
606
- otherProps = _objectWithoutProperties(_ref, _excluded);
469
+ const ToggleIconButton = forwardRef((_ref, ref) => {
470
+ let {
471
+ isPressed,
472
+ ...otherProps
473
+ } = _ref;
607
474
  return React__default.createElement(IconButton, _extends$2({
608
475
  "aria-pressed": isPressed,
609
476
  ref: ref
610
477
  }, otherProps));
611
478
  });
612
479
  ToggleIconButton.displayName = 'ToggleIconButton';
613
- ToggleIconButton.propTypes = _objectSpread2(_objectSpread2({}, IconButton.propTypes), {}, {
480
+ ToggleIconButton.propTypes = {
481
+ ...IconButton.propTypes,
614
482
  isPressed: PropTypes.oneOf([true, false, 'mixed'])
615
- });
483
+ };
616
484
  ToggleIconButton.defaultProps = {
617
485
  isPill: true,
618
486
  isBasic: true,