@atlaskit/button 21.1.4 → 21.1.6

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 (74) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.compiled.css +34 -0
  3. package/dist/cjs/new-button/containers/split-button/split-button.js +58 -118
  4. package/dist/cjs/new-button/variants/default/button.js +36 -41
  5. package/dist/cjs/new-button/variants/default/link.compiled.css +119 -0
  6. package/dist/cjs/new-button/variants/default/link.js +111 -59
  7. package/dist/cjs/new-button/variants/icon/button.js +128 -143
  8. package/dist/cjs/new-button/variants/icon/link.compiled.css +104 -0
  9. package/dist/cjs/new-button/variants/icon/link.js +101 -75
  10. package/dist/cjs/new-button/variants/shared/button-base.compiled.css +137 -0
  11. package/dist/cjs/new-button/variants/shared/button-base.js +223 -0
  12. package/dist/cjs/new-button/variants/shared/content.compiled.css +19 -0
  13. package/dist/cjs/new-button/variants/shared/content.js +13 -53
  14. package/dist/cjs/old-button/shared/button-base.js +1 -1
  15. package/dist/es2019/new-button/containers/split-button/split-button.compiled.css +34 -0
  16. package/dist/es2019/new-button/containers/split-button/split-button.js +54 -117
  17. package/dist/es2019/new-button/variants/default/button.js +47 -56
  18. package/dist/es2019/new-button/variants/default/link.compiled.css +119 -0
  19. package/dist/es2019/new-button/variants/default/link.js +113 -63
  20. package/dist/es2019/new-button/variants/icon/button.js +117 -133
  21. package/dist/es2019/new-button/variants/icon/link.compiled.css +104 -0
  22. package/dist/es2019/new-button/variants/icon/link.js +94 -70
  23. package/dist/es2019/new-button/variants/shared/button-base.compiled.css +137 -0
  24. package/dist/es2019/new-button/variants/shared/button-base.js +203 -0
  25. package/dist/es2019/new-button/variants/shared/content.compiled.css +19 -0
  26. package/dist/es2019/new-button/variants/shared/content.js +13 -52
  27. package/dist/es2019/old-button/shared/button-base.js +1 -1
  28. package/dist/esm/new-button/containers/split-button/split-button.compiled.css +34 -0
  29. package/dist/esm/new-button/containers/split-button/split-button.js +55 -120
  30. package/dist/esm/new-button/variants/default/button.js +33 -41
  31. package/dist/esm/new-button/variants/default/link.compiled.css +119 -0
  32. package/dist/esm/new-button/variants/default/link.js +111 -59
  33. package/dist/esm/new-button/variants/icon/button.js +128 -143
  34. package/dist/esm/new-button/variants/icon/link.compiled.css +104 -0
  35. package/dist/esm/new-button/variants/icon/link.js +98 -72
  36. package/dist/esm/new-button/variants/shared/button-base.compiled.css +137 -0
  37. package/dist/esm/new-button/variants/shared/button-base.js +213 -0
  38. package/dist/esm/new-button/variants/shared/content.compiled.css +19 -0
  39. package/dist/esm/new-button/variants/shared/content.js +13 -53
  40. package/dist/esm/old-button/shared/button-base.js +1 -1
  41. package/dist/types/new-button/containers/split-button/split-button.d.ts +4 -5
  42. package/dist/types/new-button/variants/default/button.d.ts +5 -1
  43. package/dist/types/new-button/variants/default/link.d.ts +22 -8
  44. package/dist/types/new-button/variants/icon/button.d.ts +5 -1
  45. package/dist/types/new-button/variants/icon/link.d.ts +11 -4
  46. package/dist/types/new-button/variants/shared/block-events.d.ts +1 -1
  47. package/dist/types/new-button/variants/shared/button-base.d.ts +45 -0
  48. package/dist/types/new-button/variants/shared/content.d.ts +5 -1
  49. package/dist/types/new-button/variants/types.d.ts +26 -6
  50. package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +4 -5
  51. package/dist/types-ts4.5/new-button/variants/default/button.d.ts +5 -1
  52. package/dist/types-ts4.5/new-button/variants/default/link.d.ts +22 -8
  53. package/dist/types-ts4.5/new-button/variants/icon/button.d.ts +5 -1
  54. package/dist/types-ts4.5/new-button/variants/icon/link.d.ts +11 -4
  55. package/dist/types-ts4.5/new-button/variants/shared/block-events.d.ts +1 -1
  56. package/dist/types-ts4.5/new-button/variants/shared/button-base.d.ts +45 -0
  57. package/dist/types-ts4.5/new-button/variants/shared/content.d.ts +5 -1
  58. package/dist/types-ts4.5/new-button/variants/types.d.ts +26 -6
  59. package/package.json +17 -15
  60. package/dist/cjs/new-button/variants/default/use-default-button.js +0 -98
  61. package/dist/cjs/new-button/variants/icon/use-icon-button.js +0 -88
  62. package/dist/cjs/new-button/variants/shared/use-button-base.js +0 -639
  63. package/dist/es2019/new-button/variants/default/use-default-button.js +0 -88
  64. package/dist/es2019/new-button/variants/icon/use-icon-button.js +0 -81
  65. package/dist/es2019/new-button/variants/shared/use-button-base.js +0 -619
  66. package/dist/esm/new-button/variants/default/use-default-button.js +0 -88
  67. package/dist/esm/new-button/variants/icon/use-icon-button.js +0 -81
  68. package/dist/esm/new-button/variants/shared/use-button-base.js +0 -629
  69. package/dist/types/new-button/variants/default/use-default-button.d.ts +0 -16
  70. package/dist/types/new-button/variants/icon/use-icon-button.d.ts +0 -16
  71. package/dist/types/new-button/variants/shared/use-button-base.d.ts +0 -46
  72. package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts +0 -16
  73. package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts +0 -16
  74. package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +0 -46
@@ -1,3 +1,4 @@
1
+ /* link.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,21 +7,76 @@ Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.default = void 0;
10
+ require("./link.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
9
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
- var _react = _interopRequireWildcard(require("react"));
12
- var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
13
- var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
14
- var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId"],
16
+ var _css2 = require("@atlaskit/css");
17
+ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
18
+ var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
+ var _compiled = require("@atlaskit/primitives/compiled");
21
+ var _content = _interopRequireDefault(require("../shared/content"));
22
+ var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
23
+ var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "spacing", "testId", "xcss"],
15
24
  _excluded2 = ["className", "css", "as", "style"];
16
25
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
26
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
27
+ var styles = {
28
+ base: "_2rkosqtm _11c82smr _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
29
+ linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
30
+ disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
31
+ spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
32
+ buttonIconBefore: "_bozgu2gc",
33
+ buttonIconAfter: "_y4tiu2gc"
34
+ };
35
+ var defaultStyles = {
36
+ root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
37
+ rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _irr3166n _30l31gjq _1di61dty _9h8h1gjq"
38
+ };
39
+ var primaryStyles = {
40
+ root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _irr31wqm _9h8h15cr _1di617hq"
41
+ };
42
+ var warningStyles = {
43
+ root: "_bfhk1ikc _syazal3n _1053al3n _f8pjal3n _30l3al3n _irr31j43 _9h8hal3n _1di6h4op"
44
+ };
45
+ var dangerStyles = {
46
+ root: "_bfhk1v7l _syaz15cr _105315cr _f8pj15cr _30l315cr _irr31rwk _9h8h15cr _1di6yycf"
47
+ };
48
+ var discoveryStyles = {
49
+ root: "_bfhk1vbi _syaz15cr _105315cr _f8pj15cr _30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
50
+ };
51
+ var subtleStyles = {
52
+ root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _irr34mfv _30l310s3 _1di619qy _9h8h10s3",
53
+ rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1mjl _irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
54
+ };
55
+ var selectedStyles = {
56
+ root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _irr3i1yw _30l31pke _1di619ru _9h8h1pke",
57
+ rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
58
+ warning: "_bfhkvdtc _syaz16q2 _30l31pke _irr3vdtc _9h8h1pke _1di6vdtc",
59
+ danger: "_bfhkbeib _syaz1pke _30l31pke _irr3beib _9h8h1pke _1di6beib",
60
+ discovery: "_bfhk1g49 _syaz1pke _30l31pke _irr31g49 _9h8h1pke _1di61g49"
61
+ };
62
+
63
+ /**
64
+ * __Link Button__
65
+ *
66
+ * Renders a link in the style of a button.
67
+ *
68
+ * - [Examples](https://atlassian.design/components/link-button/examples)
69
+ * - [Code](https://atlassian.design/components/link-button/code)
70
+ * - [Usage](https://atlassian.design/components/link-button/usage)
71
+ */
18
72
  var LinkButtonBase = function LinkButtonBase(_ref, ref) {
19
73
  var analyticsContext = _ref.analyticsContext,
20
- appearance = _ref.appearance,
74
+ _ref$appearance = _ref.appearance,
75
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
21
76
  ariaLabel = _ref['aria-label'],
22
77
  ariaLabelledBy = _ref['aria-labelledby'],
23
- autoFocus = _ref.autoFocus,
78
+ _ref$autoFocus = _ref.autoFocus,
79
+ autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
24
80
  children = _ref.children,
25
81
  href = _ref.href,
26
82
  iconAfter = _ref.iconAfter,
@@ -38,9 +94,9 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
38
94
  onPointerUpCapture = _ref.onPointerUpCapture,
39
95
  onTouchEndCapture = _ref.onTouchEndCapture,
40
96
  onTouchStartCapture = _ref.onTouchStartCapture,
41
- shouldFitContainer = _ref.shouldFitContainer,
42
97
  spacing = _ref.spacing,
43
98
  testId = _ref.testId,
99
+ xcss = _ref.xcss,
44
100
  unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
45
101
  // @ts-expect-error
46
102
  var _className = unsafeRest.className,
@@ -48,19 +104,25 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
48
104
  _as = unsafeRest.as,
49
105
  _style = unsafeRest.style,
50
106
  saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
51
- var baseProps = (0, _useDefaultButton.default)({
107
+ var hasIconAfter = Boolean(iconAfter);
108
+ var hasIconBefore = Boolean(iconBefore);
109
+ var localRef = (0, _react.useRef)(null);
110
+ (0, _useAutoFocus.default)(localRef, autoFocus);
111
+ var combinedRef = (0, _mergeRefs.default)([localRef, ref]);
112
+ return /*#__PURE__*/React.createElement(_compiled.Anchor, (0, _extends2.default)({
52
113
  analyticsContext: analyticsContext,
53
- appearance: appearance,
54
- ariaLabel: ariaLabel,
55
- ariaLabelledBy: ariaLabelledBy,
56
- autoFocus: autoFocus,
57
- buttonType: 'link',
58
- children: children,
59
- iconAfter: iconAfter,
60
- iconBefore: iconBefore,
61
- interactionName: interactionName,
62
- isDisabled: isDisabled,
63
- isSelected: isSelected,
114
+ ref: combinedRef
115
+ /**
116
+ * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
117
+ * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
118
+ */
119
+ // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
120
+ ,
121
+ href: isDisabled ? undefined : href,
122
+ role: isDisabled ? 'link' : undefined,
123
+ "aria-disabled": isDisabled === true ? true : undefined,
124
+ "aria-label": ariaLabel,
125
+ "aria-labelledby": ariaLabelledBy,
64
126
  onClick: onClick,
65
127
  onClickCapture: onClickCapture,
66
128
  onKeyDownCapture: onKeyDownCapture,
@@ -71,47 +133,36 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
71
133
  onPointerUpCapture: onPointerUpCapture,
72
134
  onTouchEndCapture: onTouchEndCapture,
73
135
  onTouchStartCapture: onTouchStartCapture,
74
- ref: ref,
75
- shouldFitContainer: shouldFitContainer,
76
- spacing: spacing,
77
- testId: testId
78
- });
79
- return /*#__PURE__*/_react.default.createElement(_anchor.default
80
- // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
81
- , (0, _extends2.default)({}, saferRest, {
82
- "aria-label": baseProps['aria-label'],
83
- "aria-labelledby": baseProps['aria-labelledby'],
84
- ref: baseProps.ref,
85
- xcss: baseProps.xcss,
86
- onClick: baseProps.onClick,
87
- onMouseDownCapture: baseProps.onMouseDownCapture,
88
- onMouseUpCapture: baseProps.onMouseUpCapture,
89
- onKeyDownCapture: baseProps.onKeyDownCapture,
90
- onKeyUpCapture: baseProps.onKeyUpCapture,
91
- onTouchStartCapture: baseProps.onTouchStartCapture,
92
- onTouchEndCapture: baseProps.onTouchEndCapture,
93
- onPointerDownCapture: baseProps.onPointerDownCapture,
94
- onPointerUpCapture: baseProps.onPointerUpCapture,
95
- onClickCapture: baseProps.onClickCapture,
96
- testId: testId
97
- /**
98
- * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
99
- * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
100
- */
101
- // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
102
- ,
103
- href: baseProps.isDisabled ? undefined : href,
104
- role: baseProps.isDisabled ? 'link' : undefined,
105
- "aria-disabled": baseProps.isDisabled === true ? true : undefined,
106
- analyticsContext: analyticsContext,
107
- interactionName: interactionName,
108
- componentName: "LinkButton"
109
- }), baseProps.children);
136
+ testId: testId,
137
+ componentName: "LinkButton",
138
+ interactionName: interactionName
139
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
140
+ }, saferRest, {
141
+ xcss: (0, _css2.cx)(styles.base, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'warning' && warningStyles.root, appearance === 'danger' && dangerStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
142
+ // TODO: remove me once we kill color fallbacks
143
+ isSelected && appearance === 'danger' && selectedStyles.danger,
144
+ // TODO: remove me once we kill color fallbacks
145
+ isSelected && appearance === 'warning' && selectedStyles.warning,
146
+ // TODO: remove me once we kill color fallbacks
147
+ isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter)
148
+ }), iconBefore && /*#__PURE__*/React.createElement(_content.default, {
149
+ type: "icon",
150
+ position: "before",
151
+ isLoading: false
152
+ }, /*#__PURE__*/React.createElement(_iconRenderer.default, {
153
+ icon: iconBefore
154
+ })), children && /*#__PURE__*/React.createElement(_content.default, {
155
+ isLoading: false
156
+ }, children), iconAfter && /*#__PURE__*/React.createElement(_content.default, {
157
+ type: "icon",
158
+ position: "after",
159
+ isLoading: false
160
+ }, /*#__PURE__*/React.createElement(_iconRenderer.default, {
161
+ icon: iconAfter
162
+ })));
110
163
  };
111
164
 
112
- // Workarounds to support generic types with forwardRef + memo
113
- var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkButtonBase);
114
-
165
+ // Workarounds to support generic types with forwardRef
115
166
  /**
116
167
  * __Link Button__
117
168
  *
@@ -121,5 +172,6 @@ var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkButtonBase);
121
172
  * - [Code](https://atlassian.design/components/link-button/code)
122
173
  * - [Usage](https://atlassian.design/components/link-button/usage)
123
174
  */
124
- var LinkButton = /*#__PURE__*/(0, _react.memo)(WithRef);
175
+ var LinkButton = /*#__PURE__*/(0, _react.forwardRef)(LinkButtonBase);
176
+ LinkButton.displayName = 'LinkButton';
125
177
  var _default = exports.default = LinkButton;
@@ -8,9 +8,12 @@ exports.default = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _react = _interopRequireDefault(require("react"));
11
- var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
11
+ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
12
12
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
13
- var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
13
+ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
14
+ var _buttonBase = _interopRequireDefault(require("../shared/button-base"));
15
+ var _content = _interopRequireDefault(require("../shared/content"));
16
+ var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
14
17
  var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "type"],
15
18
  _excluded2 = ["className", "css", "as", "style"];
16
19
  /**
@@ -23,6 +26,7 @@ var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearanc
23
26
  * - [Usage](https://atlassian.design/components/button/icon-button/usage)
24
27
  */
25
28
  var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
29
+ var _tooltip$content;
26
30
  var preventedAriaLabel = _ref['aria-label'],
27
31
  ariaLabelledBy = _ref['aria-labelledby'],
28
32
  analyticsContext = _ref.analyticsContext,
@@ -31,12 +35,13 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
31
35
  icon = _ref.icon,
32
36
  interactionName = _ref.interactionName,
33
37
  isDisabled = _ref.isDisabled,
34
- isLoading = _ref.isLoading,
38
+ _ref$isLoading = _ref.isLoading,
39
+ isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
35
40
  isSelected = _ref.isSelected,
36
41
  _ref$isTooltipDisable = _ref.isTooltipDisabled,
37
42
  isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
38
43
  label = _ref.label,
39
- onClick = _ref.onClick,
44
+ _onClick = _ref.onClick,
40
45
  onClickCapture = _ref.onClickCapture,
41
46
  onKeyDownCapture = _ref.onKeyDownCapture,
42
47
  onKeyUpCapture = _ref.onKeyUpCapture,
@@ -59,146 +64,126 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
59
64
  _as = unsafeRest.as,
60
65
  _style = unsafeRest.style,
61
66
  saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
62
-
63
- /**
64
- * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
65
- * buttons. It's currently duplicated and mostly the same.
66
- */
67
- var baseProps = (0, _useIconButton.default)({
68
- analyticsContext: analyticsContext,
69
- appearance: appearance,
70
- ariaLabelledBy: ariaLabelledBy,
71
- autoFocus: autoFocus,
72
- buttonType: 'button',
73
- icon: icon,
74
- interactionName: interactionName,
75
- isDisabled: isDisabled,
76
- isLoading: isLoading,
77
- isSelected: isSelected,
78
- label: label,
79
- onClick: onClick,
80
- onClickCapture: onClickCapture,
81
- onKeyDownCapture: onKeyDownCapture,
82
- onKeyUpCapture: onKeyUpCapture,
83
- onMouseDownCapture: onMouseDownCapture,
84
- onMouseUpCapture: onMouseUpCapture,
85
- onPointerDownCapture: onPointerDownCapture,
86
- onPointerUpCapture: onPointerUpCapture,
87
- onTouchEndCapture: onTouchEndCapture,
88
- onTouchStartCapture: onTouchStartCapture,
89
- ref: ref,
90
- shape: shape,
91
- spacing: spacing,
92
- testId: testId
93
- });
94
- if (!isTooltipDisabled) {
95
- var _tooltip$content;
96
- return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
97
- content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
98
- testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
99
- position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
100
- delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
101
- onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
102
- onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
103
- mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
104
- analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
105
- strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
106
- tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
107
- truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
108
- component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
109
- hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
110
- hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
111
- ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
112
- }, function (triggerProps) {
113
- return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, saferRest, {
114
- // Top level props
115
- "aria-labelledby": baseProps['aria-labelledby'],
116
- type: type,
117
- testId: testId,
118
- componentName: "IconButton",
119
- analyticsContext: analyticsContext,
120
- interactionName: interactionName
121
- // Shared between tooltip and native props
122
- ,
123
- onMouseOver: function onMouseOver(e) {
124
- var _triggerProps$onMouse, _saferRest$onMouseOve;
125
- (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
126
- (_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 || _saferRest$onMouseOve.call(saferRest, e);
127
- },
128
- onMouseOut: function onMouseOut(e) {
129
- var _triggerProps$onMouse2, _saferRest$onMouseOut;
130
- (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
131
- (_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 || _saferRest$onMouseOut.call(saferRest, e);
132
- },
133
- onMouseMove: function onMouseMove(e) {
134
- var _triggerProps$onMouse3, _saferRest$onMouseMov;
135
- (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
136
- (_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 || _saferRest$onMouseMov.call(saferRest, e);
137
- },
138
- onMouseDown: function onMouseDown(e) {
139
- var _triggerProps$onMouse4, _saferRest$onMouseDow;
140
- (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
141
- (_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 || _saferRest$onMouseDow.call(saferRest, e);
142
- },
143
- onFocus: function onFocus(e) {
144
- var _triggerProps$onFocus, _saferRest$onFocus;
145
- (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
146
- (_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 || _saferRest$onFocus.call(saferRest, e);
147
- },
148
- onBlur: function onBlur(e) {
149
- var _triggerProps$onBlur, _saferRest$onBlur;
150
- (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
151
- (_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 || _saferRest$onBlur.call(saferRest, e);
152
- }
153
- // Shared between tooltip and base props
154
- ,
155
- onClick: function onClick(event, analyticsEvent) {
156
- var _baseProps$onClick, _triggerProps$onClick;
157
- baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
158
- triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
159
- },
160
- ref: function ref(_ref2) {
161
- var _triggerProps$ref;
162
- baseProps.ref(_ref2);
163
- triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
164
- }
165
- // Base props only
166
- ,
167
- xcss: baseProps.xcss,
168
- isDisabled: baseProps.isDisabled,
169
- onMouseDownCapture: baseProps.onMouseDownCapture,
170
- onMouseUpCapture: baseProps.onMouseUpCapture,
171
- onKeyDownCapture: baseProps.onKeyDownCapture,
172
- onKeyUpCapture: baseProps.onKeyUpCapture,
173
- onTouchStartCapture: baseProps.onTouchStartCapture,
174
- onTouchEndCapture: baseProps.onTouchEndCapture,
175
- onPointerDownCapture: baseProps.onPointerDownCapture,
176
- onPointerUpCapture: baseProps.onPointerUpCapture,
177
- onClickCapture: baseProps.onClickCapture
178
- }), baseProps.children);
179
- });
67
+ if (isTooltipDisabled) {
68
+ return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, saferRest, {
69
+ ref: ref,
70
+ appearance: appearance,
71
+ autoFocus: autoFocus,
72
+ isDisabled: isDisabled,
73
+ isLoading: isLoading,
74
+ isSelected: isSelected,
75
+ isIconButton: true,
76
+ isCircle: shape === 'circle',
77
+ hasIconBefore: !!icon,
78
+ spacing: spacing,
79
+ ariaLabelledBy: ariaLabelledBy,
80
+ onClick: _onClick,
81
+ onClickCapture: onClickCapture,
82
+ onKeyDownCapture: onKeyDownCapture,
83
+ onKeyUpCapture: onKeyUpCapture,
84
+ onMouseDownCapture: onMouseDownCapture,
85
+ onMouseUpCapture: onMouseUpCapture,
86
+ onPointerDownCapture: onPointerDownCapture,
87
+ onPointerUpCapture: onPointerUpCapture,
88
+ onTouchStartCapture: onTouchStartCapture,
89
+ onTouchEndCapture: onTouchEndCapture,
90
+ testId: testId,
91
+ componentName: "IconButton",
92
+ analyticsContext: analyticsContext,
93
+ type: type,
94
+ interactionName: interactionName
95
+ }), /*#__PURE__*/_react.default.createElement(_content.default, {
96
+ type: "icon",
97
+ isLoading: isLoading
98
+ }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
99
+ icon: icon
100
+ }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)));
180
101
  }
181
- return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, saferRest, {
182
- "aria-labelledby": baseProps['aria-labelledby'],
183
- ref: baseProps.ref,
184
- xcss: baseProps.xcss,
185
- isDisabled: baseProps.isDisabled,
186
- onClick: baseProps.onClick,
187
- onMouseDownCapture: baseProps.onMouseDownCapture,
188
- onMouseUpCapture: baseProps.onMouseUpCapture,
189
- onKeyDownCapture: baseProps.onKeyDownCapture,
190
- onKeyUpCapture: baseProps.onKeyUpCapture,
191
- onTouchStartCapture: baseProps.onTouchStartCapture,
192
- onTouchEndCapture: baseProps.onTouchEndCapture,
193
- onPointerDownCapture: baseProps.onPointerDownCapture,
194
- onPointerUpCapture: baseProps.onPointerUpCapture,
195
- onClickCapture: baseProps.onClickCapture,
196
- type: type,
197
- testId: testId,
198
- componentName: "IconButton",
199
- analyticsContext: analyticsContext,
200
- interactionName: interactionName
201
- }), baseProps.children);
102
+ return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
103
+ content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
104
+ testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
105
+ position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
106
+ delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
107
+ onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
108
+ onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
109
+ mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
110
+ analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
111
+ strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
112
+ tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
113
+ truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
114
+ component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
115
+ hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
116
+ hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
117
+ ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
118
+ }, function (triggerProps) {
119
+ return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, saferRest, {
120
+ appearance: appearance,
121
+ autoFocus: autoFocus,
122
+ isDisabled: isDisabled,
123
+ isLoading: isLoading,
124
+ isSelected: isSelected,
125
+ isIconButton: true,
126
+ isCircle: shape === 'circle',
127
+ hasIconBefore: false,
128
+ spacing: spacing,
129
+ ariaLabelledBy: ariaLabelledBy,
130
+ onClick: function onClick(e, analyticsEvent) {
131
+ var _triggerProps$onClick;
132
+ _onClick === null || _onClick === void 0 || _onClick(e, analyticsEvent);
133
+ (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, e);
134
+ },
135
+ onMouseOver: function onMouseOver(e) {
136
+ var _triggerProps$onMouse, _saferRest$onMouseOve;
137
+ (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
138
+ (_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 || _saferRest$onMouseOve.call(saferRest, e);
139
+ },
140
+ onMouseOut: function onMouseOut(e) {
141
+ var _triggerProps$onMouse2, _saferRest$onMouseOut;
142
+ (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
143
+ (_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 || _saferRest$onMouseOut.call(saferRest, e);
144
+ },
145
+ onMouseMove: function onMouseMove(e) {
146
+ var _triggerProps$onMouse3, _saferRest$onMouseMov;
147
+ (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
148
+ (_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 || _saferRest$onMouseMov.call(saferRest, e);
149
+ },
150
+ onMouseDown: function onMouseDown(e) {
151
+ var _triggerProps$onMouse4, _saferRest$onMouseDow;
152
+ (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
153
+ (_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 || _saferRest$onMouseDow.call(saferRest, e);
154
+ },
155
+ onFocus: function onFocus(e) {
156
+ var _triggerProps$onFocus, _saferRest$onFocus;
157
+ (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
158
+ (_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 || _saferRest$onFocus.call(saferRest, e);
159
+ },
160
+ onBlur: function onBlur(e) {
161
+ var _triggerProps$onBlur, _saferRest$onBlur;
162
+ (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
163
+ (_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 || _saferRest$onBlur.call(saferRest, e);
164
+ },
165
+ ref: (0, _mergeRefs.default)([ref, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.ref].filter(Boolean)),
166
+ onMouseDownCapture: onMouseDownCapture,
167
+ onMouseUpCapture: onMouseUpCapture,
168
+ onKeyDownCapture: onKeyDownCapture,
169
+ onKeyUpCapture: onKeyUpCapture,
170
+ onTouchStartCapture: onTouchStartCapture,
171
+ onTouchEndCapture: onTouchEndCapture,
172
+ onPointerDownCapture: onPointerDownCapture,
173
+ onPointerUpCapture: onPointerUpCapture,
174
+ onClickCapture: onClickCapture,
175
+ type: type,
176
+ testId: testId,
177
+ analyticsContext: analyticsContext,
178
+ interactionName: interactionName,
179
+ componentName: "IconButton"
180
+ }), /*#__PURE__*/_react.default.createElement(_content.default, {
181
+ type: "icon",
182
+ isLoading: isLoading
183
+ }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
184
+ icon: icon
185
+ }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)));
186
+ });
202
187
  }));
203
188
  IconButton.displayName = 'IconButton';
204
189
  var _default = exports.default = IconButton;
@@ -0,0 +1,104 @@
1
+
2
+ ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
+ ._14mj1kw7:after{border-radius:inherit}
4
+ ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
5
+ ._9v7aze3t:after{inset:var(--ds-space-0,0)}
6
+ ._v5649dqc{transition:background .1s ease-out}
7
+ ._189eidpf{border-width:0}
8
+ ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
9
+ ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
10
+ ._1tv3nqa1:after{border-style:solid}
11
+ ._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
12
+ ._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
13
+ ._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
14
+ ._11fnglyw:after{pointer-events:none}
15
+ ._18postnw:after{position:absolute}
16
+ ._1bah1h6o{justify-content:center}
17
+ ._1bsb1k8s{width:1.5rem}
18
+ ._1bsb1wug{width:auto}
19
+ ._1bsbviql{width:2rem}
20
+ ._1e0c116y{display:inline-flex}
21
+ ._1hmsagmp{text-decoration-line:none!important}
22
+ ._1o9zidpf{flex-shrink:0}
23
+ ._4bfu1snc{text-decoration-color:currentColor!important}
24
+ ._4cvr1q9y{align-items:baseline}
25
+ ._4t3i1k8s{height:1.5rem}
26
+ ._4t3iviql{height:2rem}
27
+ ._80om13gf{cursor:not-allowed}
28
+ ._aetrb3bt:after{content:""}
29
+ ._aetrglyw:after{content:none}
30
+ ._ajmmvv82{text-decoration-style:solid!important}
31
+ ._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
32
+ ._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
33
+ ._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
34
+ ._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
35
+ ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
36
+ ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
37
+ ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
38
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
39
+ ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
40
+ ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
41
+ ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
42
+ ._gy1p1b66{column-gap:var(--ds-space-050,4px)}
43
+ ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
44
+ ._kqswh2mm{position:relative}
45
+ ._p12f1osq{max-width:100%}
46
+ ._s7n4nkob{vertical-align:middle}
47
+ ._syaz10s3{color:var(--ds-text,#42526e)}
48
+ ._syaz15cr{color:var(--ds-text-inverse,#fff)}
49
+ ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
50
+ ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
51
+ ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
52
+ ._syaz1pke{color:var(--ds-text-selected,#f4f5f7)}
53
+ ._vchhusvi{box-sizing:border-box}
54
+ ._y3gn1h6o{text-align:center}
55
+ ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
56
+ ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105310s3:visited{color:var(--ds-text,#42526e)}
57
+ ._105315cr:visited{color:var(--ds-text-inverse,#fff)}
58
+ ._10531gjq:visited{color:var(--ds-text-subtle,#44546f)}
59
+ ._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
60
+ ._10531pke:visited{color:var(--ds-text-selected,#f4f5f7)}
61
+ ._1a3b1r31:focus{text-decoration-color:currentColor}
62
+ ._4fprglyw:focus{text-decoration-line:none}
63
+ ._5goinqa1:focus{text-decoration-style:solid}
64
+ ._f8pj10s3:focus{color:var(--ds-text,#42526e)}
65
+ ._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
66
+ ._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
67
+ ._f8pj1mjl:focus{color:color.text.subtle}
68
+ ._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
69
+ ._1bnxglyw:hover{text-decoration-line:none}
70
+ ._30l310s3:hover{color:var(--ds-text,#42526e)}
71
+ ._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
72
+ ._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
73
+ ._30l31ldt:hover{color:var(--ds-text-selected,#0052cc)}
74
+ ._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
75
+ ._30l31pke:hover{color:var(--ds-text-selected,#f4f5f7)}
76
+ ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
77
+ ._9oik1r31:hover{text-decoration-color:currentColor}
78
+ ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
79
+ ._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
80
+ ._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
81
+ ._irr34mfv:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e4214)}
82
+ ._irr37gr8:hover{background-color:var(--ds-background-discovery-bold-hovered,#8777d9)}
83
+ ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
84
+ ._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}
85
+ ._irr3yw9d:hover{background-color:var(--ds-background-neutral-hovered,#091e4214)}
86
+ ._jf4cnqa1:hover{text-decoration-style:solid}
87
+ ._1di617hq:active{background-color:var(--ds-background-brand-bold-pressed,#0747a6)}
88
+ ._1di619qy:active{background-color:var(--ds-background-neutral-subtle-pressed,#b3d4ff)}
89
+ ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
90
+ ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
91
+ ._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
92
+ ._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
93
+ ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
94
+ ._1di6syzs:active{background-color:var(--ds-background-disabled,#091e4208)}
95
+ ._1iohnqa1:active{text-decoration-style:solid}
96
+ ._1nrm1r31:active{text-decoration-color:currentColor}
97
+ ._9h8h10s3:active{color:var(--ds-text,#42526e)}
98
+ ._9h8h15cr:active{color:var(--ds-text-inverse,#fff)}
99
+ ._9h8h1gjq:active{color:var(--ds-text-subtle,#44546f)}
100
+ ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
101
+ ._9h8h1lh4:active{color:var(--ds-text-disabled,#091e424f)}
102
+ ._9h8h1pke:active{color:var(--ds-text-selected,#f4f5f7)}
103
+ ._9h8haqb7:active{color:var(--ds-text-selected,#0c66e4)}
104
+ ._c2waglyw:active{text-decoration-line:none}