@atlaskit/button 21.1.4 → 21.1.6

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

@@ -1,16 +1,72 @@
+/* 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 = ["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"],
+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"],
   _excluded2 = ["className", "css", "as", "style"];
-import React, { forwardRef, memo } from 'react';
-import Anchor from '@atlaskit/primitives/anchor';
-import useDefaultButton from './use-default-button';
+import "./link.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, 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 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 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
+  buttonIconBefore: "_bozgu2gc",
+  buttonIconAfter: "_y4tiu2gc"
+};
+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 _f8pj15cr _30l315cr _irr31wqm _9h8h15cr _1di617hq"
+};
+var warningStyles = {
+  root: "_bfhk1ikc _syazal3n _1053al3n _f8pjal3n _30l3al3n _irr31j43 _9h8hal3n _1di6h4op"
+};
+var dangerStyles = {
+  root: "_bfhk1v7l _syaz15cr _105315cr _f8pj15cr _30l315cr _irr31rwk _9h8h15cr _1di6yycf"
+};
+var discoveryStyles = {
+  root: "_bfhk1vbi _syaz15cr _105315cr _f8pj15cr _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 _30l31pke _1di619ru _9h8h1pke",
+  rootRefreshed: "_bfhkfg4m _syaz1ldt _8l3mcoux _aetrb3bt _10531ldt _f8pj1ldt _30l31ldt _9h8h1ldt",
+  warning: "_bfhkvdtc _syaz16q2 _30l31pke _irr3vdtc _9h8h1pke _1di6vdtc",
+  danger: "_bfhkbeib _syaz1pke _30l31pke _irr3beib _9h8h1pke _1di6beib",
+  discovery: "_bfhk1g49 _syaz1pke _30l31pke _irr31g49 _9h8h1pke _1di61g49"
+};
+
+/**
+ * __Link Button__
+ *
+ * Renders a link in the style of a button.
+ *
+ * - [Examples](https://atlassian.design/components/link-button/examples)
+ * - [Code](https://atlassian.design/components/link-button/code)
+ * - [Usage](https://atlassian.design/components/link-button/usage)
+ */
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
-    appearance = _ref.appearance,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     ariaLabel = _ref['aria-label'],
     ariaLabelledBy = _ref['aria-labelledby'],
-    autoFocus = _ref.autoFocus,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
     children = _ref.children,
     href = _ref.href,
     iconAfter = _ref.iconAfter,
@@ -28,9 +84,9 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
+    xcss = _ref.xcss,
     unsafeRest = _objectWithoutProperties(_ref, _excluded);
   // @ts-expect-error
   var _className = unsafeRest.className,
@@ -38,19 +94,25 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     _as = unsafeRest.as,
     _style = unsafeRest.style,
     saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
-  var baseProps = useDefaultButton({
+  var hasIconAfter = Boolean(iconAfter);
+  var hasIconBefore = Boolean(iconBefore);
+  var localRef = useRef(null);
+  useAutoFocus(localRef, autoFocus);
+  var combinedRef = mergeRefs([localRef, ref]);
+  return /*#__PURE__*/React.createElement(Anchor, _extends({
     analyticsContext: analyticsContext,
-    appearance: appearance,
-    ariaLabel: ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
-    autoFocus: autoFocus,
-    buttonType: 'link',
-    children: children,
-    iconAfter: iconAfter,
-    iconBefore: iconBefore,
-    interactionName: interactionName,
-    isDisabled: isDisabled,
-    isSelected: isSelected,
+    ref: combinedRef
+    /**
+     * 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: isDisabled ? undefined : href,
+    role: isDisabled ? 'link' : undefined,
+    "aria-disabled": isDisabled === true ? true : undefined,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     onClick: onClick,
     onClickCapture: onClickCapture,
     onKeyDownCapture: onKeyDownCapture,
@@ -61,47 +123,36 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    ref: ref,
-    shouldFitContainer: shouldFitContainer,
-    spacing: spacing,
-    testId: testId
-  });
-  return /*#__PURE__*/React.createElement(Anchor
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , _extends({}, saferRest, {
-    "aria-label": baseProps['aria-label'],
-    "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,
-    testId: testId
-    /**
-     * 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,
-    analyticsContext: analyticsContext,
-    interactionName: interactionName,
-    componentName: "LinkButton"
-  }), baseProps.children);
+    testId: testId,
+    componentName: "LinkButton",
+    interactionName: interactionName
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, saferRest, {
+    xcss: cx(styles.base, appearance === 'default' && (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' && (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 === '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, spacing === 'compact' && styles.spacingCompact, hasIconBefore && styles.buttonIconBefore, hasIconAfter && styles.buttonIconAfter)
+  }), iconBefore && /*#__PURE__*/React.createElement(Content, {
+    type: "icon",
+    position: "before",
+    isLoading: false
+  }, /*#__PURE__*/React.createElement(IconRenderer, {
+    icon: iconBefore
+  })), children && /*#__PURE__*/React.createElement(Content, {
+    isLoading: false
+  }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
+    type: "icon",
+    position: "after",
+    isLoading: false
+  }, /*#__PURE__*/React.createElement(IconRenderer, {
+    icon: iconAfter
+  })));
 };
 
-// Workarounds to support generic types with forwardRef + memo
-var WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
-
+// Workarounds to support generic types with forwardRef
 /**
  * __Link Button__
  *
@@ -111,5 +162,6 @@ var WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
  * - [Code](https://atlassian.design/components/link-button/code)
  * - [Usage](https://atlassian.design/components/link-button/usage)
  */
-var LinkButton = /*#__PURE__*/memo(WithRef);
+var LinkButton = /*#__PURE__*/forwardRef(LinkButtonBase);
+LinkButton.displayName = 'LinkButton';
 export default LinkButton;

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

@@ -3,9 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 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"],
   _excluded2 = ["className", "css", "as", "style"];
 import React from 'react';
-import Pressable from '@atlaskit/primitives/pressable';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import Tooltip from '@atlaskit/tooltip';
-import useIconButton from './use-icon-button';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import ButtonBase from '../shared/button-base';
+import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 /**
  * __Icon Button__
  *
@@ -16,6 +19,7 @@ import useIconButton from './use-icon-button';
  * - [Usage](https://atlassian.design/components/button/icon-button/usage)
  */
 var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+  var _tooltip$content;
   var preventedAriaLabel = _ref['aria-label'],
     ariaLabelledBy = _ref['aria-labelledby'],
     analyticsContext = _ref.analyticsContext,
@@ -24,12 +28,13 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
-    isLoading = _ref.isLoading,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     isSelected = _ref.isSelected,
     _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,
@@ -52,146 +57,126 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _as = unsafeRest.as,
     _style = unsafeRest.style,
     saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
-
-  /**
-   * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
-   * buttons. It's currently duplicated and mostly the same.
-   */
-  var baseProps = useIconButton({
-    analyticsContext: analyticsContext,
-    appearance: appearance,
-    ariaLabelledBy: ariaLabelledBy,
-    autoFocus: autoFocus,
-    buttonType: 'button',
-    icon: icon,
-    interactionName: interactionName,
-    isDisabled: isDisabled,
-    isLoading: isLoading,
-    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
-  });
-  if (!isTooltipDisabled) {
-    var _tooltip$content;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
-      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
-      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
-      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
-      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
-      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
-      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
-      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
-      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
-      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
-      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
-      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
-      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
-      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
-      ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
-    }, function (triggerProps) {
-      return /*#__PURE__*/React.createElement(Pressable, _extends({}, saferRest, {
-        // Top level props
-        "aria-labelledby": baseProps['aria-labelledby'],
-        type: type,
-        testId: testId,
-        componentName: "IconButton",
-        analyticsContext: analyticsContext,
-        interactionName: interactionName
-        // Shared between tooltip and native props
-        ,
-        onMouseOver: function onMouseOver(e) {
-          var _triggerProps$onMouse, _saferRest$onMouseOve;
-          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
-          (_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 || _saferRest$onMouseOve.call(saferRest, e);
-        },
-        onMouseOut: function onMouseOut(e) {
-          var _triggerProps$onMouse2, _saferRest$onMouseOut;
-          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
-          (_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 || _saferRest$onMouseOut.call(saferRest, e);
-        },
-        onMouseMove: function onMouseMove(e) {
-          var _triggerProps$onMouse3, _saferRest$onMouseMov;
-          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
-          (_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 || _saferRest$onMouseMov.call(saferRest, e);
-        },
-        onMouseDown: function onMouseDown(e) {
-          var _triggerProps$onMouse4, _saferRest$onMouseDow;
-          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
-          (_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 || _saferRest$onMouseDow.call(saferRest, e);
-        },
-        onFocus: function onFocus(e) {
-          var _triggerProps$onFocus, _saferRest$onFocus;
-          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
-          (_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 || _saferRest$onFocus.call(saferRest, e);
-        },
-        onBlur: function onBlur(e) {
-          var _triggerProps$onBlur, _saferRest$onBlur;
-          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
-          (_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 || _saferRest$onBlur.call(saferRest, e);
-        }
-        // 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);
-          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);
-        }
-        // Base props only
-        ,
-        xcss: baseProps.xcss,
-        isDisabled: baseProps.isDisabled,
-        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
-      }), baseProps.children);
-    });
+  if (isTooltipDisabled) {
+    return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, saferRest, {
+      ref: ref,
+      appearance: appearance,
+      autoFocus: autoFocus,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      isSelected: isSelected,
+      isIconButton: true,
+      isCircle: shape === 'circle',
+      hasIconBefore: !!icon,
+      spacing: spacing,
+      ariaLabelledBy: ariaLabelledBy,
+      onClick: _onClick,
+      onClickCapture: onClickCapture,
+      onKeyDownCapture: onKeyDownCapture,
+      onKeyUpCapture: onKeyUpCapture,
+      onMouseDownCapture: onMouseDownCapture,
+      onMouseUpCapture: onMouseUpCapture,
+      onPointerDownCapture: onPointerDownCapture,
+      onPointerUpCapture: onPointerUpCapture,
+      onTouchStartCapture: onTouchStartCapture,
+      onTouchEndCapture: onTouchEndCapture,
+      testId: testId,
+      componentName: "IconButton",
+      analyticsContext: analyticsContext,
+      type: type,
+      interactionName: interactionName
+    }), /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      isLoading: isLoading
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: icon
+    }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
   }
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, saferRest, {
-    "aria-labelledby": baseProps['aria-labelledby'],
-    ref: baseProps.ref,
-    xcss: baseProps.xcss,
-    isDisabled: baseProps.isDisabled,
-    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,
-    type: type,
-    testId: testId,
-    componentName: "IconButton",
-    analyticsContext: analyticsContext,
-    interactionName: interactionName
-  }), baseProps.children);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
+    testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
+    position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
+    delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
+    onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
+    onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
+    mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
+    analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
+    strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
+    tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
+    truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
+    component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
+    hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
+    hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
+    ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
+  }, function (triggerProps) {
+    return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, saferRest, {
+      appearance: appearance,
+      autoFocus: autoFocus,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      isSelected: isSelected,
+      isIconButton: true,
+      isCircle: shape === 'circle',
+      hasIconBefore: false,
+      spacing: spacing,
+      ariaLabelledBy: ariaLabelledBy,
+      onClick: function onClick(e, analyticsEvent) {
+        var _triggerProps$onClick;
+        _onClick === null || _onClick === void 0 || _onClick(e, analyticsEvent);
+        (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, e);
+      },
+      onMouseOver: function onMouseOver(e) {
+        var _triggerProps$onMouse, _saferRest$onMouseOve;
+        (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
+        (_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 || _saferRest$onMouseOve.call(saferRest, e);
+      },
+      onMouseOut: function onMouseOut(e) {
+        var _triggerProps$onMouse2, _saferRest$onMouseOut;
+        (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
+        (_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 || _saferRest$onMouseOut.call(saferRest, e);
+      },
+      onMouseMove: function onMouseMove(e) {
+        var _triggerProps$onMouse3, _saferRest$onMouseMov;
+        (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
+        (_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 || _saferRest$onMouseMov.call(saferRest, e);
+      },
+      onMouseDown: function onMouseDown(e) {
+        var _triggerProps$onMouse4, _saferRest$onMouseDow;
+        (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
+        (_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 || _saferRest$onMouseDow.call(saferRest, e);
+      },
+      onFocus: function onFocus(e) {
+        var _triggerProps$onFocus, _saferRest$onFocus;
+        (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
+        (_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 || _saferRest$onFocus.call(saferRest, e);
+      },
+      onBlur: function onBlur(e) {
+        var _triggerProps$onBlur, _saferRest$onBlur;
+        (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
+        (_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 || _saferRest$onBlur.call(saferRest, e);
+      },
+      ref: mergeRefs([ref, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.ref].filter(Boolean)),
+      onMouseDownCapture: onMouseDownCapture,
+      onMouseUpCapture: onMouseUpCapture,
+      onKeyDownCapture: onKeyDownCapture,
+      onKeyUpCapture: onKeyUpCapture,
+      onTouchStartCapture: onTouchStartCapture,
+      onTouchEndCapture: onTouchEndCapture,
+      onPointerDownCapture: onPointerDownCapture,
+      onPointerUpCapture: onPointerUpCapture,
+      onClickCapture: onClickCapture,
+      type: type,
+      testId: testId,
+      analyticsContext: analyticsContext,
+      interactionName: interactionName,
+      componentName: "IconButton"
+    }), /*#__PURE__*/React.createElement(Content, {
+      type: "icon",
+      isLoading: isLoading
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: icon
+    }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
+  });
 }));
 IconButton.displayName = 'IconButton';
 export default IconButton;

package/dist/esm/new-button/variants/icon/link.compiled.css

@@ -0,0 +1,104 @@
+
+._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}
+._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}
+._18postnw:after{position:absolute}
+._1bah1h6o{justify-content:center}
+._1bsb1k8s{width:1.5rem}
+._1bsb1wug{width:auto}
+._1bsbviql{width:2rem}
+._1e0c116y{display:inline-flex}
+._1hmsagmp{text-decoration-line:none!important}
+._1o9zidpf{flex-shrink:0}
+._4bfu1snc{text-decoration-color:currentColor!important}
+._4cvr1q9y{align-items:baseline}
+._4t3i1k8s{height:1.5rem}
+._4t3iviql{height:2rem}
+._80om13gf{cursor:not-allowed}
+._aetrb3bt:after{content:""}
+._aetrglyw:after{content:none}
+._ajmmvv82{text-decoration-style:solid!important}
+._bfhk1g49{background-color:var(--ds-background-selected,#403294)}
+._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
+._bfhk1vbi{background-color:var(--ds-background-discovery-bold,#5243aa)}
+._bfhk7btw{background-color:var(--ds-background-selected,#253858)}
+._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)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._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}
+._p12f1osq{max-width:100%}
+._s7n4nkob{vertical-align:middle}
+._syaz10s3{color:var(--ds-text,#42526e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._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)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1h6o{text-align:center}
+._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)}
+._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)}
+._f8pj1gjq:focus{color:var(--ds-text-subtle,#44546f)}
+._f8pj1ldt:focus{color:var(--ds-text-selected,#0052cc)}
+._f8pj1mjl:focus{color:color.text.subtle}
+._f8pj1pke:focus{color:var(--ds-text-selected,#f4f5f7)}
+._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)}
+._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31g49:hover{background-color:var(--ds-background-selected,#403294)}
+._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)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}
+._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)}
+._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._1di61g49:active{background-color:var(--ds-background-selected,#403294)}
+._1di61wu2:active{background-color:var(--ds-background-discovery-bold-pressed,#5243aa)}
+._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
+._1di6syzs:active{background-color:var(--ds-background-disabled,#091e4208)}
+._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)}
+._9h8haqb7:active{color:var(--ds-text-selected,#0c66e4)}
+._c2waglyw:active{text-decoration-line:none}