@atlaskit/button 21.1.4 → 21.1.6

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

@@ -1,15 +1,51 @@
+/* link.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-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';
+const 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"
+};
+const defaultStyles = {
+  root: "_bfhk1j54 _syaz10s3 _105310s3 _f8pj10s3 _irr3yw9d _30l310s3 _1di6ip91 _9h8h10s3",
+  rootRefreshed: "_bfhksm61 _syaz1gjq _8l3mmuej _aetrb3bt _10531gjq _f8pj1gjq _irr3166n _30l31gjq _1di61dty _9h8h1gjq"
+};
+const primaryStyles = {
+  root: "_bfhkomb0 _syaz15cr _105315cr _30l315cr _irr31wqm _9h8h15cr _1di617hq"
+};
+const discoveryStyles = {
+  root: "_bfhk1vbi _syaz15cr _105315cr _30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
+};
+const subtleStyles = {
+  root: "_bfhkqtfy _syaz10s3 _105310s3 _f8pj10s3 _irr34mfv _30l310s3 _1di619qy _9h8h10s3",
+  rootRefreshed: "_bfhkqtfy _syaz1gjq _10531gjq _f8pj1mjl _irr34mfv _30l31gjq _1di619qy _9h8h1gjq"
+};
+const 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"
+};
 const LinkIconButtonBase = ({
   // Prevent duplicate labels being added.
   'aria-label': preventedAriaLabel,
   'aria-labelledby': ariaLabelledBy,
   analyticsContext,
-  appearance,
-  autoFocus,
+  appearance = 'default',
+  autoFocus = false,
   href,
   icon,
   interactionName,
@@ -31,6 +67,7 @@ const LinkIconButtonBase = ({
   spacing,
   testId,
   tooltip,
+  xcss,
   ...unsafeRest
 }, ref) => {
   // @ts-expect-error
@@ -41,32 +78,8 @@ const LinkIconButtonBase = ({
     style: _style,
     ...saferRest
   } = unsafeRest;
-  const baseProps = useIconButton({
-    analyticsContext,
-    appearance,
-    ariaLabelledBy,
-    autoFocus,
-    buttonType: 'link',
-    icon,
-    interactionName,
-    isDisabled,
-    isSelected,
-    label,
-    onClick,
-    onClickCapture,
-    onKeyDownCapture,
-    onKeyUpCapture,
-    onMouseDownCapture,
-    onMouseUpCapture,
-    onPointerDownCapture,
-    onPointerUpCapture,
-    onTouchEndCapture,
-    onTouchStartCapture,
-    ref,
-    shape,
-    spacing,
-    testId
-  });
+  const localRef = useRef(null);
+  useAutoFocus(localRef, autoFocus);
   if (!isTooltipDisabled) {
     var _tooltip$content;
     return /*#__PURE__*/React.createElement(Tooltip, {
@@ -88,7 +101,7 @@ const LinkIconButtonBase = ({
     }, triggerProps => /*#__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,
@@ -128,54 +141,60 @@ const LinkIconButtonBase = ({
       // Shared between tooltip and base props
       ,
       onClick: (event, analyticsEvent) => {
-        var _baseProps$onClick, _triggerProps$onClick;
-        baseProps === null || baseProps === void 0 ? void 0 : (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 ? void 0 : _baseProps$onClick.call(baseProps, event, analyticsEvent);
+        var _triggerProps$onClick;
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent);
         triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
       },
-      ref: ref => {
-        var _triggerProps$ref;
-        baseProps.ref(ref);
-        triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 ? void 0 : _triggerProps$ref.call(triggerProps, ref);
-      }
+      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`.
@@ -183,13 +202,18 @@ const LinkIconButtonBase = ({
      */
     // @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/es2019/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/es2019/new-button/variants/shared/button-base.js

@@ -0,0 +1,203 @@
+/* button-base.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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';
+const LOADING_LABEL = ', Loading';
+const 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"
+};
+const 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"
+};
+const primaryStyles = {
+  root: "_bfhkomb0 _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
+  interactive: "_30l315cr _irr31wqm _9h8h15cr _1di617hq"
+};
+const warningStyles = {
+  root: "_bfhk1ikc _syazal3n _1053al3n _f8pjal3n _30l3al3n _9h8hal3n",
+  interactive: "_30l3al3n _irr31j43 _9h8hal3n _1di6h4op"
+};
+const dangerStyles = {
+  root: "_bfhk1v7l _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
+  interactive: "_30l315cr _irr31rwk _9h8h15cr _1di6yycf"
+};
+const discoveryStyles = {
+  root: "_bfhk1vbi _syaz15cr _105315cr _f8pj15cr _30l315cr _9h8h15cr",
+  interactive: "_30l315cr _irr37gr8 _9h8h15cr _1di61wu2"
+};
+const 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"
+};
+const 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
+ */
+const ButtonBase = /*#__PURE__*/React.forwardRef(({
+  appearance: propAppearance,
+  autoFocus = false,
+  isDisabled: propIsDisabled = false,
+  isLoading = false,
+  isSelected: propIsSelected = false,
+  isIconButton = false,
+  isCircle = false,
+  hasIconBefore = false,
+  hasIconAfter = false,
+  shouldFitContainer = false,
+  spacing: propSpacing = 'default',
+  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,
+  ...unsafeRest
+}, ref) => {
+  const localRef = useRef(null);
+  const splitButtonContext = useSplitButtonContext();
+  const loadingLabelId = useId();
+  const isSplitButton = Boolean(splitButtonContext);
+  const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
+  const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
+  const appearance = isDefaultAppearanceSplitButton && fg('platform-component-visual-refresh') ? 'subtle' : propAppearance || (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || 'default';
+  const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
+  const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
+  const isInteractive = !isDisabled && !isLoading;
+  // Also treat loading buttons as disabled
+  const isEffectivelyDisabled = isDisabled || isLoading;
+  const isSelected = propIsSelected && !isDisabled;
+  useAutoFocus(localRef, autoFocus);
+
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  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 ? `${ariaLabel} ${LOADING_LABEL}` : ariaLabel,
+    "aria-labelledby": isLoading && ariaLabelledBy ? `${ariaLabelledBy} ${loadingLabelId}` : ariaLabelledBy,
+    onClick: onClick
+  }, blockEvents(isEffectivelyDisabled, {
+    onMouseDownCapture,
+    onMouseUpCapture,
+    onKeyDownCapture,
+    onKeyUpCapture,
+    onTouchStartCapture,
+    onTouchEndCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    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
+  })), isLoading && (ariaLabelledBy || !ariaLabel) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: loadingLabelId
+  }, LOADING_LABEL)));
+});
+export default ButtonBase;

package/dist/es2019/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)}

package/dist/es2019/new-button/variants/shared/content.js

@@ -1,53 +1,15 @@
+/* content.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./content.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, xcss } from '@atlaskit/primitives';
-const textStyles = xcss({
-  // content can grow and shrink
-  flexGrow: 1,
-  flexShrink: 1,
-  // ellipsis for overflow text
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-const iconStyles = xcss({
-  display: 'flex',
-  // icon size cannot grow and shrink
-  flexGrow: 0,
-  flexShrink: 0,
-  alignSelf: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: 0,
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 0,
-  userSelect: 'none'
-});
-const commonStyles = xcss({
-  transition: 'opacity 0.3s'
-});
-const fadeStyles = xcss({
-  opacity: 0
-});
-
-/**
- * These CSS variables consumed by the new icons, to allow them to have appropriate
- * padding inside Button while also maintaining spacing for the existing icons.
- *
- * These styles can be removed once the new icons are fully rolled out, feature flag
- * platform-visual-refresh-icons is cleaned up,
- * and we bump Button to set padding based on the new icons.
- */
-const beforeIconStyles = xcss({
-  // @ts-ignore
-  '--ds--button--new-icon-padding-start': "var(--ds-space-050, 4px)",
-  // @ts-ignore
-  '--ds--button--new-icon-padding-end': "var(--ds-space-025, 2px)"
-});
-const afterIconStyles = xcss({
-  // @ts-ignore
-  '--ds--button--new-icon-padding-start': "var(--ds-space-025, 2px)",
-  // @ts-ignore
-  '--ds--button--new-icon-padding-end': "var(--ds-space-050, 4px)"
-});
+const styles = {
+  text: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _1bto1l2s _o5721q9c",
+  icon: "_1e0c1txw _16jlidpf _1o9zidpf _1wpz1h6o _1wybidpf _vwz4idpf _uiztglyw",
+  beforeIcon: "_1he91b66 _w795v77o",
+  afterIcon: "_1he9v77o _w7951b66",
+  common: "_v564g17y",
+  fade: "_tzy4idpf"
+};
 /**
  * __Content__
  *
@@ -59,9 +21,8 @@ const Content = ({
   isLoading,
   position
 }) => {
-  return /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    xcss: [commonStyles, ...(type === 'text' ? [textStyles] : [iconStyles]), ...(isLoading ? [fadeStyles] : []), ...(position === 'before' ? [beforeIconStyles] : []), ...(position === 'after' ? [afterIconStyles] : [])]
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.common, type === 'text' && styles.text, type === 'icon' && styles.icon, isLoading && styles.fade, position === 'before' && styles.beforeIcon, position === 'after' && styles.afterIcon])
   }, children);
 };
 export default Content;