@atlaskit/button 21.1.4 → 21.1.6

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

@@ -1,13 +1,67 @@
+/* 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 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';
+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 _4t3i1k8s _y4tiutpp _bozgutpp _s7n4nkob",
+  buttonIconBefore: "_bozgu2gc",
+  buttonIconAfter: "_y4tiu2gc"
+};
+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 _f8pj15cr _30l315cr _irr31wqm _9h8h15cr _1di617hq"
+};
+const warningStyles = {
+  root: "_bfhk1ikc _syazal3n _1053al3n _f8pjal3n _30l3al3n _irr31j43 _9h8hal3n _1di6h4op"
+};
+const dangerStyles = {
+  root: "_bfhk1v7l _syaz15cr _105315cr _f8pj15cr _30l315cr _irr31rwk _9h8h15cr _1di6yycf"
+};
+const discoveryStyles = {
+  root: "_bfhk1vbi _syaz15cr _105315cr _f8pj15cr _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 _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)
+ */
 const LinkButtonBase = ({
   analyticsContext,
-  appearance,
+  appearance = 'default',
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  autoFocus,
+  autoFocus = false,
   children,
   href,
   iconAfter,
@@ -25,9 +79,9 @@ const LinkButtonBase = ({
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  shouldFitContainer,
   spacing,
   testId,
+  xcss,
   ...unsafeRest
 }, ref) => {
   // @ts-expect-error
@@ -38,70 +92,65 @@ const LinkButtonBase = ({
     style: _style,
     ...saferRest
   } = unsafeRest;
-  const baseProps = useDefaultButton({
-    analyticsContext,
-    appearance,
-    ariaLabel,
-    ariaLabelledBy,
-    autoFocus,
-    buttonType: 'link',
-    children,
-    iconAfter,
-    iconBefore,
-    interactionName,
-    isDisabled,
-    isSelected,
-    onClick,
-    onClickCapture,
-    onKeyDownCapture,
-    onKeyUpCapture,
-    onMouseDownCapture,
-    onMouseUpCapture,
-    onPointerDownCapture,
-    onPointerUpCapture,
-    onTouchEndCapture,
-    onTouchStartCapture,
-    ref,
-    shouldFitContainer,
-    spacing,
-    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
+  const hasIconAfter = Boolean(iconAfter);
+  const hasIconBefore = Boolean(iconBefore);
+  const localRef = useRef(null);
+  useAutoFocus(localRef, autoFocus);
+  const combinedRef = mergeRefs([localRef, ref]);
+  return /*#__PURE__*/React.createElement(Anchor, _extends({
+    analyticsContext: analyticsContext,
+    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: baseProps.isDisabled ? undefined : href,
-    role: baseProps.isDisabled ? 'link' : undefined,
-    "aria-disabled": baseProps.isDisabled === true ? true : undefined,
-    analyticsContext: analyticsContext,
-    interactionName: interactionName,
-    componentName: "LinkButton"
-  }), baseProps.children);
+    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,
+    onKeyUpCapture: onKeyUpCapture,
+    onMouseDownCapture: onMouseDownCapture,
+    onMouseUpCapture: onMouseUpCapture,
+    onPointerDownCapture: onPointerDownCapture,
+    onPointerUpCapture: onPointerUpCapture,
+    onTouchEndCapture: onTouchEndCapture,
+    onTouchStartCapture: onTouchStartCapture,
+    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
-const WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
-
+// Workarounds to support generic types with forwardRef
 /**
  * __Link Button__
  *
@@ -111,5 +160,6 @@ const WithRef = /*#__PURE__*/forwardRef(LinkButtonBase);
  * - [Code](https://atlassian.design/components/link-button/code)
  * - [Usage](https://atlassian.design/components/link-button/usage)
  */
-const LinkButton = /*#__PURE__*/memo(WithRef);
+const LinkButton = /*#__PURE__*/forwardRef(LinkButtonBase);
+LinkButton.displayName = 'LinkButton';
 export default LinkButton;

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

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 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__
  *
@@ -22,7 +25,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   icon,
   interactionName,
   isDisabled,
-  isLoading,
+  isLoading = false,
   isSelected,
   isTooltipDisabled = true,
   label,
@@ -43,6 +46,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   type = 'button',
   ...unsafeRest
 }, ref) {
+  var _tooltip$content;
   // @ts-expect-error
   const {
     className: _className,
@@ -51,144 +55,124 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     style: _style,
     ...saferRest
   } = unsafeRest;
-
-  /**
-   * 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.
-   */
-  const baseProps = useIconButton({
-    analyticsContext,
-    appearance,
-    ariaLabelledBy,
-    autoFocus,
-    buttonType: 'button',
-    icon,
-    interactionName,
-    isDisabled,
-    isLoading,
-    isSelected,
-    label,
-    onClick,
-    onClickCapture,
-    onKeyDownCapture,
-    onKeyUpCapture,
-    onMouseDownCapture,
-    onMouseUpCapture,
-    onPointerDownCapture,
-    onPointerUpCapture,
-    onTouchEndCapture,
-    onTouchStartCapture,
-    ref,
-    shape,
-    spacing,
-    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
-    }, triggerProps => /*#__PURE__*/React.createElement(Pressable, _extends({}, saferRest, {
-      // Top level props
-      "aria-labelledby": baseProps['aria-labelledby'],
-      type: type,
+  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
-      // Shared between tooltip and native props
-      ,
-      onMouseOver: e => {
-        var _triggerProps$onMouse, _saferRest$onMouseOve;
-        (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
-        (_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 ? void 0 : _saferRest$onMouseOve.call(saferRest, e);
-      },
-      onMouseOut: e => {
-        var _triggerProps$onMouse2, _saferRest$onMouseOut;
-        (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
-        (_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 ? void 0 : _saferRest$onMouseOut.call(saferRest, e);
-      },
-      onMouseMove: e => {
-        var _triggerProps$onMouse3, _saferRest$onMouseMov;
-        (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
-        (_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 ? void 0 : _saferRest$onMouseMov.call(saferRest, e);
-      },
-      onMouseDown: e => {
-        var _triggerProps$onMouse4, _saferRest$onMouseDow;
-        (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
-        (_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 ? void 0 : _saferRest$onMouseDow.call(saferRest, e);
-      },
-      onFocus: e => {
-        var _triggerProps$onFocus, _saferRest$onFocus;
-        (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
-        (_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 ? void 0 : _saferRest$onFocus.call(saferRest, e);
-      },
-      onBlur: e => {
-        var _triggerProps$onBlur, _saferRest$onBlur;
-        (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
-        (_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 ? void 0 : _saferRest$onBlur.call(saferRest, e);
-      }
-      // 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);
-        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);
-      }
-      // 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));
+    }), /*#__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,
+  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
+  }, triggerProps => /*#__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: (e, analyticsEvent) => {
+      var _triggerProps$onClick;
+      onClick === null || onClick === void 0 ? void 0 : onClick(e, analyticsEvent);
+      (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, e);
+    },
+    onMouseOver: e => {
+      var _triggerProps$onMouse, _saferRest$onMouseOve;
+      (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
+      (_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 ? void 0 : _saferRest$onMouseOve.call(saferRest, e);
+    },
+    onMouseOut: e => {
+      var _triggerProps$onMouse2, _saferRest$onMouseOut;
+      (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
+      (_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 ? void 0 : _saferRest$onMouseOut.call(saferRest, e);
+    },
+    onMouseMove: e => {
+      var _triggerProps$onMouse3, _saferRest$onMouseMov;
+      (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
+      (_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 ? void 0 : _saferRest$onMouseMov.call(saferRest, e);
+    },
+    onMouseDown: e => {
+      var _triggerProps$onMouse4, _saferRest$onMouseDow;
+      (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
+      (_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 ? void 0 : _saferRest$onMouseDow.call(saferRest, e);
+    },
+    onFocus: e => {
+      var _triggerProps$onFocus, _saferRest$onFocus;
+      (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
+      (_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 ? void 0 : _saferRest$onFocus.call(saferRest, e);
+    },
+    onBlur: e => {
+      var _triggerProps$onBlur, _saferRest$onBlur;
+      (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
+      (_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 ? 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,
-    componentName: "IconButton",
     analyticsContext: analyticsContext,
-    interactionName: interactionName
-  }), baseProps.children);
+    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/es2019/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}