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