@atlaskit/button 21.1.4 → 21.1.6

package/dist/esm/new-button/variants/icon/link.js

@@ -1,17 +1,55 @@
+/* link.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip"],
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "xcss"],
   _excluded2 = ["className", "css", "as", "style"];
-import React, { forwardRef, memo } from 'react';
-import Anchor from '@atlaskit/primitives/anchor';
+import "./link.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, memo, useRef } from 'react';
+import { cx } from '@atlaskit/css';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
-import useIconButton from './use-icon-button';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
+var styles = {
+  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",
+  linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
+  disabled: "_80om13gf _bfhksyzs _syaz1lh4 _aetrglyw _irr3syzs _30l31lh4 _1di6syzs _9h8h1lh4",
+  spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
+  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t"
+};
+var defaultStyles = {
+  root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
+  rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _irr3166n _30l31gjq _1di61dty _9h8h1gjq"
+};
+var primaryStyles = {
+  root: "_bfhkomb0 _syaz15cr _105315cr _30l315cr _irr31wqm _9h8h15cr _1di617hq"
+};
+var discoveryStyles = {
+  root: "_bfhk1vbi _syaz15cr _105315cr _30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
+};
+var subtleStyles = {
+  root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _irr34mfv _30l310s3 _1di619qy _9h8h10s3",
+  rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1mjl _irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
+};
+var selectedStyles = {
+  root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _irr3i1yw _30l3aqb7 _1di619ru _9h8haqb7",
+  rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
+  discovery: "_bfhk1g49 _syaz1pke _30l31pke _irr31g49 _9h8h1pke _1di61g49"
+};
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],
     ariaLabelledBy = _ref['aria-labelledby'],
     analyticsContext = _ref.analyticsContext,
-    appearance = _ref.appearance,
-    autoFocus = _ref.autoFocus,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
     href = _ref.href,
     icon = _ref.icon,
     interactionName = _ref.interactionName,
@@ -20,7 +58,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     _ref$isTooltipDisable = _ref.isTooltipDisabled,
     isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
     label = _ref.label,
-    onClick = _ref.onClick,
+    _onClick = _ref.onClick,
     onClickCapture = _ref.onClickCapture,
     onKeyDownCapture = _ref.onKeyDownCapture,
     onKeyUpCapture = _ref.onKeyUpCapture,
@@ -34,6 +72,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     spacing = _ref.spacing,
     testId = _ref.testId,
     tooltip = _ref.tooltip,
+    xcss = _ref.xcss,
     unsafeRest = _objectWithoutProperties(_ref, _excluded);
   // @ts-expect-error
   var _className = unsafeRest.className,
@@ -41,32 +80,8 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     _as = unsafeRest.as,
     _style = unsafeRest.style,
     saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
-  var baseProps = useIconButton({
-    analyticsContext: analyticsContext,
-    appearance: appearance,
-    ariaLabelledBy: ariaLabelledBy,
-    autoFocus: autoFocus,
-    buttonType: 'link',
-    icon: icon,
-    interactionName: interactionName,
-    isDisabled: isDisabled,
-    isSelected: isSelected,
-    label: label,
-    onClick: onClick,
-    onClickCapture: onClickCapture,
-    onKeyDownCapture: onKeyDownCapture,
-    onKeyUpCapture: onKeyUpCapture,
-    onMouseDownCapture: onMouseDownCapture,
-    onMouseUpCapture: onMouseUpCapture,
-    onPointerDownCapture: onPointerDownCapture,
-    onPointerUpCapture: onPointerUpCapture,
-    onTouchEndCapture: onTouchEndCapture,
-    onTouchStartCapture: onTouchStartCapture,
-    ref: ref,
-    shape: shape,
-    spacing: spacing,
-    testId: testId
-  });
+  var localRef = useRef(null);
+  useAutoFocus(localRef, autoFocus);
   if (!isTooltipDisabled) {
     var _tooltip$content;
     return /*#__PURE__*/React.createElement(Tooltip, {
@@ -89,7 +104,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
       return /*#__PURE__*/React.createElement(Anchor
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       , _extends({}, saferRest, {
-        "aria-labelledby": baseProps['aria-labelledby'],
+        "aria-labelledby": ariaLabelledBy,
         testId: testId,
         componentName: "LinkIconButton",
         analyticsContext: analyticsContext,
@@ -129,55 +144,61 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
         // Shared between tooltip and base props
         ,
         onClick: function onClick(event, analyticsEvent) {
-          var _baseProps$onClick, _triggerProps$onClick;
-          baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
+          var _triggerProps$onClick;
+          _onClick === null || _onClick === void 0 || _onClick(event, analyticsEvent);
           triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
         },
-        ref: function ref(_ref2) {
-          var _triggerProps$ref;
-          baseProps.ref(_ref2);
-          triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
-        }
+        ref: mergeRefs([localRef, ref, triggerProps.ref].filter(Boolean))
         // Base props only
         ,
-        xcss: baseProps.xcss,
-        onMouseDownCapture: baseProps.onMouseDownCapture,
-        onMouseUpCapture: baseProps.onMouseUpCapture,
-        onKeyDownCapture: baseProps.onKeyDownCapture,
-        onKeyUpCapture: baseProps.onKeyUpCapture,
-        onTouchStartCapture: baseProps.onTouchStartCapture,
-        onTouchEndCapture: baseProps.onTouchEndCapture,
-        onPointerDownCapture: baseProps.onPointerDownCapture,
-        onPointerUpCapture: baseProps.onPointerUpCapture,
-        onClickCapture: baseProps.onClickCapture
+        xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
+        // TODO: remove me once we kill color fallbacks
+        isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, spacing === 'compact' && styles.spacingCompact, styles.iconButton),
+        onMouseDownCapture: onMouseDownCapture,
+        onMouseUpCapture: onMouseUpCapture,
+        onKeyDownCapture: onKeyDownCapture,
+        onKeyUpCapture: onKeyUpCapture,
+        onTouchStartCapture: onTouchStartCapture,
+        onTouchEndCapture: onTouchEndCapture,
+        onPointerDownCapture: onPointerDownCapture,
+        onPointerUpCapture: onPointerUpCapture,
+        onClickCapture: onClickCapture
         /**
          * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
          * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
          */
         // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
         ,
-        href: baseProps.isDisabled ? undefined : href,
-        role: baseProps.isDisabled ? 'link' : undefined,
-        "aria-disabled": baseProps.isDisabled === true ? true : undefined
-      }), baseProps.children);
+        href: isDisabled ? undefined : href,
+        role: isDisabled ? 'link' : undefined,
+        "aria-disabled": isDisabled === true ? true : undefined
+      }), /*#__PURE__*/React.createElement(Content, {
+        type: "icon",
+        isLoading: false
+      }, /*#__PURE__*/React.createElement(IconRenderer, {
+        icon: icon
+      }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
     });
   }
   return /*#__PURE__*/React.createElement(Anchor
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, saferRest, {
-    "aria-labelledby": baseProps['aria-labelledby'],
-    ref: baseProps.ref,
-    xcss: baseProps.xcss,
-    onClick: baseProps.onClick,
-    onMouseDownCapture: baseProps.onMouseDownCapture,
-    onMouseUpCapture: baseProps.onMouseUpCapture,
-    onKeyDownCapture: baseProps.onKeyDownCapture,
-    onKeyUpCapture: baseProps.onKeyUpCapture,
-    onTouchStartCapture: baseProps.onTouchStartCapture,
-    onTouchEndCapture: baseProps.onTouchEndCapture,
-    onPointerDownCapture: baseProps.onPointerDownCapture,
-    onPointerUpCapture: baseProps.onPointerUpCapture,
-    onClickCapture: baseProps.onClickCapture,
+    // aria-label={preventedAriaLabel}
+    "aria-labelledby": ariaLabelledBy,
+    ref: mergeRefs([localRef, ref]),
+    xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root),
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact),
+    onClick: _onClick,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture,
     testId: testId
     /**
      * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
@@ -185,13 +206,18 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
      */
     // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
     ,
-    href: baseProps.isDisabled ? undefined : href,
-    role: baseProps.isDisabled ? 'link' : undefined,
-    "aria-disabled": baseProps.isDisabled === true ? true : undefined,
+    href: isDisabled ? undefined : href,
+    role: isDisabled ? 'link' : undefined,
+    "aria-disabled": isDisabled === true ? true : undefined,
     componentName: "LinkIconButton",
     analyticsContext: analyticsContext,
     interactionName: interactionName
-  }), baseProps.children);
+  }), /*#__PURE__*/React.createElement(Content, {
+    type: "icon",
+    isLoading: false
+  }, /*#__PURE__*/React.createElement(IconRenderer, {
+    icon: icon
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
 };
 
 // Workarounds to support generic types with forwardRef + memo

package/dist/esm/new-button/variants/shared/button-base.compiled.css

@@ -0,0 +1,137 @@
+
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._14mj1kw7:after{border-radius:inherit}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._9v7aze3t:after{inset:var(--ds-space-0,0)}
+._v5649dqc{transition:background .1s ease-out}
+._189eidpf{border-width:0}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1tv3nqa1:after{border-style:solid}
+._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
+._8l3mcoux:after{border-color:var(--ds-border-selected,#0052cc)}
+._8l3mmuej:after{border-color:var(--ds-border,#091e4224)}
+._11fnglyw:after{pointer-events:none}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._18postnw:after{position:absolute}
+._1bah1h6o{justify-content:center}
+._1bsb1k8s{width:1.5rem}
+._1bsb1osq{width:100%}
+._1bsb1tcg{width:24px}
+._1bsb1wug{width:auto}
+._1bsbviql{width:2rem}
+._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1o9zidpf{flex-shrink:0}
+._1pbycs5v{z-index:2}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._4cvr1q9y{align-items:baseline}
+._4t3i1k8s{height:1.5rem}
+._4t3iviql{height:2rem}
+._80om13gf{cursor:not-allowed}
+._80om15jw{cursor:progress}
+._aetrb3bt:after{content:""}
+._aetrglyw:after{content:none}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1fvb{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
+._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
+._bfhk1ikc{background-color:var(--ds-background-warning-bold,#ffab00)}
+._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
+._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
+._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
+._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
+._bfhkbeib{background-color:var(--ds-background-selected,#bf2600)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
+._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhkvdtc{background-color:var(--ds-background-selected,#ff991f)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._gy1p1b66{column-gap:var(--ds-space-050,4px)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._p12f1osq{max-width:100%}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
+._s7n4nkob{vertical-align:middle}
+._syaz10s3{color:var(--ds-text,#42526e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._syaz16q2{color:var(--ds-text-selected,#172b4d)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._syaz1pke{color:var(--ds-text-selected,#f4f5f7)}
+._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
+._u7coze3t{inset-block-end:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1h6o{text-align:center}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}._105310s3:visited{color:var(--ds-text,#42526e)}
+._105315cr:visited{color:var(--ds-text-inverse,#fff)}
+._10531gjq:visited{color:var(--ds-text-subtle,#44546f)}
+._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
+._10531pke:visited{color:var(--ds-text-selected,#f4f5f7)}
+._1053al3n:visited{color:var(--ds-text-warning-inverse,#172b4d)}
+._1a3b1r31:focus{text-decoration-color:currentColor}
+._4fprglyw:focus{text-decoration-line:none}
+._5goinqa1:focus{text-decoration-style:solid}
+._f8pj10s3:focus{color:var(--ds-text,#42526e)}
+._f8pj15cr:focus{color:var(--ds-text-inverse,#fff)}
+._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
+._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
+._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
+._f8pjal3n:focus{color:var(--ds-text-warning-inverse,#172b4d)}
+._g0pbb4wl:focus-visible{z-index:100}
+._1bnxglyw:hover{text-decoration-line:none}
+._30l310s3:hover{color:var(--ds-text,#42526e)}
+._30l315cr:hover{color:var(--ds-text-inverse,#fff)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
+._30l31ldt:hover{color:var(--ds-text-selected,#0052cc)}
+._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
+._30l31pke:hover{color:var(--ds-text-selected,#f4f5f7)}
+._30l3al3n:hover{color:var(--ds-text-warning-inverse,#172b4d)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31fvb:hover{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
+._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
+._irr31j43:hover{background-color:var(--ds-background-warning-bold-hovered,#ffc400)}
+._irr31rwk:hover{background-color:var(--ds-background-danger-bold-hovered,#ff5630)}
+._irr31wqm:hover{background-color:var(--ds-background-brand-bold-hovered,#0065ff)}
+._irr34mfv:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e4214)}
+._irr37gr8:hover{background-color:var(--ds-background-discovery-bold-hovered,#8777d9)}
+._irr3beib:hover{background-color:var(--ds-background-selected,#bf2600)}
+._irr3t71w:hover{background-color:var(--ds-background-selected-hovered,#253858)}
+._irr3vdtc:hover{background-color:var(--ds-background-selected,#ff991f)}
+._irr3yw9d:hover{background-color:var(--ds-background-neutral-hovered,#091e4214)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di617hq:active{background-color:var(--ds-background-brand-bold-pressed,#0747a6)}
+._1di619qy:active{background-color:var(--ds-background-neutral-subtle-pressed,#b3d4ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._1di61fvb:active{background-color:var(--ds-background-disabled,rgba(9,30,66,.04))}
+._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
+._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
+._1di6beib:active{background-color:var(--ds-background-selected,#bf2600)}
+._1di6h4op:active{background-color:var(--ds-background-warning-bold-pressed,#ff991f)}
+._1di6ih13:active{background-color:var(--ds-background-neutral-pressed,#b3d4ff)}
+._1di6vdtc:active{background-color:var(--ds-background-selected,#ff991f)}
+._1di6yssv:active{background-color:var(--ds-background-selected-pressed,#253858)}
+._1di6yycf:active{background-color:var(--ds-background-danger-bold-pressed,#bf2600)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
+._9h8h10s3:active{color:var(--ds-text,#42526e)}
+._9h8h15cr:active{color:var(--ds-text-inverse,#fff)}
+._9h8h1gjq:active{color:var(--ds-text-subtle,#44546f)}
+._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
+._9h8h1lh4:active{color:var(--ds-text-disabled,#091e424f)}
+._9h8h1pke:active{color:var(--ds-text-selected,#f4f5f7)}
+._9h8hal3n:active{color:var(--ds-text-warning-inverse,#172b4d)}
+._c2waglyw:active{text-decoration-line:none}

package/dist/esm/new-button/variants/shared/button-base.js

@@ -0,0 +1,213 @@
+/* button-base.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["appearance", "autoFocus", "isDisabled", "isLoading", "isSelected", "isIconButton", "isCircle", "hasIconBefore", "hasIconAfter", "shouldFitContainer", "spacing", "ariaLabel", "ariaLabelledBy", "children", "interactionName", "onClick", "onMouseDown", "onMouseDownCapture", "onMouseUp", "onMouseUpCapture", "onKeyDown", "onKeyDownCapture", "onKeyUp", "onKeyUpCapture", "onTouchStart", "onTouchStartCapture", "onTouchEnd", "onTouchEndCapture", "onPointerDown", "onPointerDownCapture", "onPointerUp", "onPointerUpCapture", "onClickCapture", "testId", "analyticsContext", "componentName", "role", "onMouseOver", "onMouseOut", "onFocus", "onBlur", "onMouseMove", "type"],
+  _excluded2 = ["className", "css", "as", "style"];
+import "./button-base.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { Fragment, useRef } from 'react';
+import { cx } from '@atlaskit/css';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import { useId } from '@atlaskit/ds-lib/use-id';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
+import blockEvents from './block-events';
+import renderLoadingOverlay from './loading-overlay';
+var LOADING_LABEL = ', Loading';
+var styles = {
+  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",
+  linkDecorationUnset: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
+  disabled: "_80om13gf _bfhk1fvb _syaz1lh4 _aetrglyw _irr31fvb _30l31lh4 _1di61fvb _9h8h1lh4",
+  spacingCompact: "_1rjcv77o _gy1p1b66 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
+  circle: "_2rko14q2",
+  fullWidth: "_1bsb1osq",
+  loading: "_80om15jw",
+  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
+  iconButtonCompact: "_4t3i1k8s _1bsb1k8s",
+  buttonIconBefore: "_bozgu2gc",
+  buttonIconAfter: "_y4tiu2gc",
+  splitButton: "_g0pbb4wl",
+  loadingOverlay: "_1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t",
+  navigationSplitButton: "_1bsb1tcg _bfhksm61 _y4ti12x7 _bozg12x7"
+};
+var defaultStyles = {
+  root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
+  rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
+  interactive: "_irr3yw9d _30l310s3 _1di6ih13 _9h8h10s3",
+  interactiveRefreshed: "_irr3166n _30l31gjq _1di61dty _9h8h1gjq"
+};
+var primaryStyles = {
+  root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
+  interactive: "_30l315cr _irr31wqm _9h8h15cr _1di617hq"
+};
+var warningStyles = {
+  root: "_bfhk1ikc _syazal3n _1053al3n _f8pjal3n _30l3al3n _9h8hal3n",
+  interactive: "_30l3al3n _irr31j43 _9h8hal3n _1di6h4op"
+};
+var dangerStyles = {
+  root: "_bfhk1v7l _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
+  interactive: "_30l315cr _irr31rwk _9h8h15cr _1di6yycf"
+};
+var discoveryStyles = {
+  root: "_bfhk1vbi _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
+  interactive: "_30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
+};
+var subtleStyles = {
+  root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _30l310s3 _9h8h10s3",
+  rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1gjq _30l31gjq _9h8h1gjq",
+  interactive: "_irr34mfv _30l310s3 _1di619qy _9h8h10s3",
+  interactiveRefreshed: "_irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
+};
+var selectedStyles = {
+  root: "_bfhk7btw _syaz1pke _10531pke _f8pj1pke _30l31pke _9h8h1pke",
+  rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
+  insideSplitButton: "_1pbycs5v",
+  interactive: "_irr3t71w _30l31pke _1di6yssv _9h8h1pke",
+  warning: "_bfhkvdtc _syaz16q2 _30l31pke _irr3vdtc _9h8h1pke _1di6vdtc",
+  danger: "_bfhkbeib _syaz1pke _30l31pke _irr3beib _9h8h1pke _1di6beib",
+  discovery: "_bfhk1g49 _syaz1pke _30l31pke _irr31g49 _9h8h1pke _1di61g49"
+};
+
+/**
+ * __button base__
+ *
+ * - Implements auto focus when enabled.
+ * - Appends the `onClick` event with UFO analytics tracking.
+ *
+ * @private
+ */
+var ButtonBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var propAppearance = _ref.appearance,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$isDisabled = _ref.isDisabled,
+    propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isSelected = _ref.isSelected,
+    propIsSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isIconButton = _ref.isIconButton,
+    isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
+    _ref$isCircle = _ref.isCircle,
+    isCircle = _ref$isCircle === void 0 ? false : _ref$isCircle,
+    _ref$hasIconBefore = _ref.hasIconBefore,
+    hasIconBefore = _ref$hasIconBefore === void 0 ? false : _ref$hasIconBefore,
+    _ref$hasIconAfter = _ref.hasIconAfter,
+    hasIconAfter = _ref$hasIconAfter === void 0 ? false : _ref$hasIconAfter,
+    _ref$shouldFitContain = _ref.shouldFitContainer,
+    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
+    _ref$spacing = _ref.spacing,
+    propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    children = _ref.children,
+    interactionName = _ref.interactionName,
+    onClick = _ref.onClick,
+    onMouseDown = _ref.onMouseDown,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUp = _ref.onMouseUp,
+    onMouseUpCapture = _ref.onMouseUpCapture,
+    onKeyDown = _ref.onKeyDown,
+    onKeyDownCapture = _ref.onKeyDownCapture,
+    onKeyUp = _ref.onKeyUp,
+    onKeyUpCapture = _ref.onKeyUpCapture,
+    onTouchStart = _ref.onTouchStart,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    onTouchEnd = _ref.onTouchEnd,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onPointerDown = _ref.onPointerDown,
+    onPointerDownCapture = _ref.onPointerDownCapture,
+    onPointerUp = _ref.onPointerUp,
+    onPointerUpCapture = _ref.onPointerUpCapture,
+    onClickCapture = _ref.onClickCapture,
+    testId = _ref.testId,
+    analyticsContext = _ref.analyticsContext,
+    componentName = _ref.componentName,
+    role = _ref.role,
+    onMouseOver = _ref.onMouseOver,
+    onMouseOut = _ref.onMouseOut,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onMouseMove = _ref.onMouseMove,
+    type = _ref.type,
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  var localRef = useRef(null);
+  var splitButtonContext = useSplitButtonContext();
+  var loadingLabelId = useId();
+  var isSplitButton = Boolean(splitButtonContext);
+  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
+  var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
+  var appearance = isDefaultAppearanceSplitButton && fg('platform-component-visual-refresh') ? 'subtle' : propAppearance || (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || 'default';
+  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
+  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
+  var isInteractive = !isDisabled && !isLoading;
+  // Also treat loading buttons as disabled
+  var isEffectivelyDisabled = isDisabled || isLoading;
+  var isSelected = propIsSelected && !isDisabled;
+  useAutoFocus(localRef, autoFocus);
+
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, saferRest, {
+    componentName: componentName || 'button',
+    analyticsContext: analyticsContext,
+    role: role,
+    ref: mergeRefs([localRef, ref]),
+    xcss: cx(styles.base, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultStyles.rootRefreshed : defaultStyles.root), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultStyles.interactiveRefreshed : defaultStyles.interactive), appearance === 'primary' && primaryStyles.root, appearance === 'primary' && isInteractive && primaryStyles.interactive, appearance === 'warning' && warningStyles.root, appearance === 'warning' && isInteractive && warningStyles.interactive, appearance === 'danger' && dangerStyles.root, appearance === 'danger' && isInteractive && dangerStyles.interactive, appearance === 'discovery' && discoveryStyles.root, appearance === 'discovery' && isInteractive && discoveryStyles.interactive, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleStyles.rootRefreshed : subtleStyles.root), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleStyles.interactiveRefreshed : subtleStyles.interactive), styles.linkDecorationUnset, isSelected && (fg('platform-component-visual-refresh') ? selectedStyles.rootRefreshed : selectedStyles.root), isSelected && isSplitButton && selectedStyles.insideSplitButton, isSelected && isInteractive && selectedStyles.interactive,
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'danger' && selectedStyles.danger,
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'warning' && selectedStyles.warning,
+    // TODO: remove me once we kill color fallbacks
+    isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, isCircle && !isSplitButton && styles.circle, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, shouldFitContainer && styles.fullWidth, hasIconAfter && styles.buttonIconAfter, isIconButton && styles.iconButton, isIconButton && spacing === 'compact' && styles.iconButtonCompact, isLoading && styles.loading, isSplitButton && styles.splitButton, isNavigationSplitButton && styles.navigationSplitButton),
+    isDisabled: isEffectivelyDisabled,
+    "aria-label": isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(LOADING_LABEL) : ariaLabel,
+    "aria-labelledby": isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy,
+    onClick: onClick
+  }, blockEvents(isEffectivelyDisabled, {
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    onKeyUpCapture: onKeyUpCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onClickCapture: onClickCapture
+  }), {
+    testId: testId,
+    onMouseOver: onMouseOver,
+    onFocus: onFocus,
+    onMouseMove: onMouseMove,
+    onBlur: onBlur,
+    type: type,
+    interactionName: interactionName,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onKeyDown: onKeyDown,
+    onMouseOut: onMouseOut,
+    onKeyUp: onKeyUp,
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd,
+    onPointerDown: onPointerDown,
+    onPointerUp: onPointerUp
+  }), /*#__PURE__*/React.createElement(Fragment, null, children, isLoading && /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.loadingOverlay])
+  }, renderLoadingOverlay({
+    spacing: spacing,
+    appearance: appearance,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    testId: testId
+  })), isLoading && (ariaLabelledBy || !ariaLabel) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: loadingLabelId
+  }, LOADING_LABEL)));
+});
+export default ButtonBase;

package/dist/esm/new-button/variants/shared/content.compiled.css

@@ -0,0 +1,19 @@
+
+._v564g17y{transition:opacity .3s}._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1he91b66{--ds--button--new-icon-padding-start:var(--ds-space-050,4px)}
+._1he9v77o{--ds--button--new-icon-padding-start:var(--ds-space-025,2px)}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1wpz1h6o{align-self:center}
+._1wybidpf{font-size:0}
+._o5721q9c{white-space:nowrap}
+._tzy4idpf{opacity:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vwz4idpf{line-height:0}
+._w7951b66{--ds--button--new-icon-padding-end:var(--ds-space-050,4px)}
+._w795v77o{--ds--button--new-icon-padding-end:var(--ds-space-025,2px)}