/* button.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./button.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef } from 'react';
import { cx } from '@compiled/react';
import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { fg } from '@atlaskit/platform-feature-flags';
import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
import Tooltip from '@atlaskit/tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden';
import IconRenderer from '../icon-renderer';

/**
 * Props from primitives that we explicitly ignore and remove from spread props,
 * because they apply styles.
 *
 * `css` / `className` are not here because primitives don't support them.
 *
 * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
 * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
 */

/**
 * Returns the spread props to pass through to underlying primitive components.
 *
 * It removes the props which apply styles.
 */
function getPrimitiveSpreadProps({
  style,
  xcss,
  backgroundColor,
  padding,
  paddingBlock,
  paddingBlockStart,
  paddingBlockEnd,
  paddingInline,
  paddingInlineStart,
  paddingInlineEnd,
  ...props
}) {
  return props;
}

/**
 * Props present in underlying primitives but we want to override,
 * so we don't want to inherit their definitions
 */

/**
 * Props that are common between link buttons.
 */

/**
 * Props shared by `Button` and `IconButton`
 */

export const themedButtonBackground = '--ds-top-bar-button-background';
export const themedButtonBackgroundHovered = '--ds-top-bar-button-background-hovered';
export const themedButtonBackgroundPressed = '--ds-top-bar-button-background-pressed';
export const themedButtonBorder = '--ds-top-bar-button-border';
export const themedButtonPrimaryText = '--ds-top-bar-button-primary-text';
export const themedButtonPrimaryBackground = '--ds-top-bar-button-primary-background';
export const themedButtonPrimaryBackgroundHovered = '--ds-top-bar-button-primary-background-hovered';
export const themedButtonPrimaryBackgroundPressed = '--ds-top-bar-button-primary-background-pressed';
export const themedButtonSelectedText = '--ds-top-bar-button-selected-text';
export const themedButtonSelectedBackground = '--ds-top-bar-button-selected-background';
export const themedButtonSelectedBackgroundHovered = '--ds-top-bar-button-selected-background-hovered';
export const themedButtonSelectedBackgroundPressed = '--ds-top-bar-button-selected-background-pressed';
export const themedButtonSelectedBorder = '--ds-top-bar-button-selected-border';
export const themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
export const themedButtonDisabledBackground = '--ds-top-bar-button-disabled-background';
const styles = {
  root: "_zulp12x7 _11c82smr _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
  rootT26Shape: "_2rko1qi0",
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
};
const shapeStyles = {
  default: "_18zrutpp",
  square: "_18zrze3t _1bsb5r7u _vwz4idpf"
};
const appearanceStyles = {
  default: "_11q7pkxg _syaz1r31 _8l3maykr _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
  subtle: "_11q7pkxg _syaz1r31 _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
  primary: "_11q7esko _syaz15o7 _f8pj15o7 _105315o7 _19lcp6hf _30l315o7 _j6xt5sko _9h8h15o7"
};

/**
 * Props shared by `ThemedPressable` and `ThemedAnchor`
 */

/**
 * Intentionally an almost-duplicate of `ThemedAnchor` - make sure to update both.
 *
 * See `ThemedAnchor` for more context.
 */
const ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable({
  appearance = 'default',
  shape = 'default',
  isSelected,
  isDisabled,
  ...props
}, ref) {
  const hasBorder = appearance === 'default' || isSelected;
  return /*#__PURE__*/React.createElement(Pressable, _extends({}, getPrimitiveSpreadProps(props), {
    ref: ref,
    type: "button"
    /**
     * We are using some style values that are outside of the strict
     * `@atlaskit/css` types.
     */
    // @ts-expect-error
    // eslint-disable-next-line @compiled/no-suppress-xcss
    ,
    xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
    isDisabled: isDisabled
  }));
});
function ThemedAnchorFn({
  appearance = 'default',
  shape = 'default',
  isSelected,
  isDisabled,
  ...props
}, ref) {
  const hasBorder = appearance === 'default' || isSelected;
  return /*#__PURE__*/React.createElement(Anchor, _extends({}, getPrimitiveSpreadProps(props), {
    ref: ref
    /**
     * We are using some style values that are outside of the strict
     * `@atlaskit/css` types.
     */
    // @ts-expect-error
    // eslint-disable-next-line @compiled/no-suppress-xcss
    ,
    xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
  }));
}
/**
 * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
 *
 * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
 *
 * Polymorphism had many typing issues and required sacrificing type safety.
 *
 * Render props had problems passing down styles through `xcss` to the `children` function.
 */
const ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);
const textButtonStyles = {
  iconBefore: "_vwz4idpf",
  text: "_k48p1wq8"
};

/**
 * Props shared by `Button` and `LinkButton`
 */

/**
 * __Themed button__
 *
 * A themed button for the top bar.
 */
export const ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton({
  iconBefore: IconBefore,
  children,
  ...props
}, ref) {
  return /*#__PURE__*/React.createElement(ThemedPressable, _extends({}, props, {
    ref: ref
  }), IconBefore && /*#__PURE__*/React.createElement("span", {
    className: ax([textButtonStyles.iconBefore])
  }, fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
    icon: IconBefore
  }) : /*#__PURE__*/React.createElement(IconBefore, {
    label: "",
    color: "currentColor"
  })), /*#__PURE__*/React.createElement("span", {
    className: ax([textButtonStyles.text])
  }, children));
});
function ThemedLinkButtonFn({
  iconBefore: IconBefore,
  children,
  ...props
}, ref) {
  return /*#__PURE__*/React.createElement(ThemedAnchor, _extends({}, props, {
    ref: ref
  }), IconBefore && /*#__PURE__*/React.createElement("span", {
    className: ax([textButtonStyles.iconBefore])
  }, /*#__PURE__*/React.createElement(IconBefore, {
    label: "",
    color: "currentColor"
  })), /*#__PURE__*/React.createElement("span", {
    className: ax([textButtonStyles.text])
  }, children));
}
/**
 * __Themed link button__
 *
 * A themed link button for the top bar.
 */
export const ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);

/**
 * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
 */

/**
 * __Themed icon button__
 *
 * A themed icon button for the top bar.
 */
export const ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton({
  icon: Icon,
  label,
  tooltip,
  ...props
}, ref) {
  var _tooltip$content;
  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
    content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label
  }), triggerProps =>
  /*#__PURE__*/
  /**
   * The `aria-describedby` from `triggerProps` is intentionally not passed down,
   * because it would cause double announcements with the `VisuallyHidden` label.
   *
   * The `@atlaskit/button` IconButton uses the same approach.
   */
  React.createElement(ThemedPressable, _extends({}, props, {
    shape: "square",
    ref: mergeRefs([ref, triggerProps.ref]),
    onClick: (event, analyticsEvent) => {
      var _props$onClick, _triggerProps$onClick;
      (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, 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);
    },
    onMouseOver: e => {
      var _triggerProps$onMouse, _props$onMouseOver;
      (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
      (_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 ? void 0 : _props$onMouseOver.call(props, e);
    },
    onMouseOut: e => {
      var _triggerProps$onMouse2, _props$onMouseOut;
      (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
      (_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 ? void 0 : _props$onMouseOut.call(props, e);
    },
    onMouseMove: e => {
      var _triggerProps$onMouse3, _props$onMouseMove;
      (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
      (_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 ? void 0 : _props$onMouseMove.call(props, e);
    },
    onMouseDown: e => {
      var _triggerProps$onMouse4, _props$onMouseDown;
      (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
      (_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 ? void 0 : _props$onMouseDown.call(props, e);
    },
    onFocus: e => {
      var _triggerProps$onFocus, _props$onFocus;
      (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
      (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, e);
    },
    onBlur: e => {
      var _triggerProps$onBlur, _props$onBlur;
      (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
      (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, e);
    }
  }), fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
    icon: Icon
  }) : /*#__PURE__*/React.createElement(Icon, {
    label: "",
    color: "currentColor"
  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
});
function ThemedLinkIconButtonFn({
  icon: Icon,
  label,
  tooltip,
  ...props
}, ref) {
  var _tooltip$content2;
  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
    content: (_tooltip$content2 = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content2 !== void 0 ? _tooltip$content2 : label
  }), triggerProps =>
  /*#__PURE__*/
  /**
   * The `aria-describedby` from `triggerProps` is intentionally not passed down,
   * because it would cause double announcements with the `VisuallyHidden` label.
   *
   * The `@atlaskit/button` IconButton uses the same approach.
   */
  React.createElement(ThemedAnchor, _extends({}, props, {
    shape: "square",
    ref: mergeRefs([ref, triggerProps.ref]),
    onClick: (event, analyticsEvent) => {
      var _props$onClick2, _triggerProps$onClick2;
      (_props$onClick2 = props.onClick) === null || _props$onClick2 === void 0 ? void 0 : _props$onClick2.call(props, event, analyticsEvent);
      triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick2 = triggerProps.onClick) === null || _triggerProps$onClick2 === void 0 ? void 0 : _triggerProps$onClick2.call(triggerProps, event);
    },
    onMouseOver: e => {
      var _triggerProps$onMouse5, _props$onMouseOver2;
      (_triggerProps$onMouse5 = triggerProps.onMouseOver) === null || _triggerProps$onMouse5 === void 0 ? void 0 : _triggerProps$onMouse5.call(triggerProps, e);
      (_props$onMouseOver2 = props.onMouseOver) === null || _props$onMouseOver2 === void 0 ? void 0 : _props$onMouseOver2.call(props, e);
    },
    onMouseOut: e => {
      var _triggerProps$onMouse6, _props$onMouseOut2;
      (_triggerProps$onMouse6 = triggerProps.onMouseOut) === null || _triggerProps$onMouse6 === void 0 ? void 0 : _triggerProps$onMouse6.call(triggerProps, e);
      (_props$onMouseOut2 = props.onMouseOut) === null || _props$onMouseOut2 === void 0 ? void 0 : _props$onMouseOut2.call(props, e);
    },
    onMouseMove: e => {
      var _triggerProps$onMouse7, _props$onMouseMove2;
      (_triggerProps$onMouse7 = triggerProps.onMouseMove) === null || _triggerProps$onMouse7 === void 0 ? void 0 : _triggerProps$onMouse7.call(triggerProps, e);
      (_props$onMouseMove2 = props.onMouseMove) === null || _props$onMouseMove2 === void 0 ? void 0 : _props$onMouseMove2.call(props, e);
    },
    onMouseDown: e => {
      var _triggerProps$onMouse8, _props$onMouseDown2;
      (_triggerProps$onMouse8 = triggerProps.onMouseDown) === null || _triggerProps$onMouse8 === void 0 ? void 0 : _triggerProps$onMouse8.call(triggerProps, e);
      (_props$onMouseDown2 = props.onMouseDown) === null || _props$onMouseDown2 === void 0 ? void 0 : _props$onMouseDown2.call(props, e);
    },
    onFocus: e => {
      var _triggerProps$onFocus2, _props$onFocus2;
      (_triggerProps$onFocus2 = triggerProps.onFocus) === null || _triggerProps$onFocus2 === void 0 ? void 0 : _triggerProps$onFocus2.call(triggerProps, e);
      (_props$onFocus2 = props.onFocus) === null || _props$onFocus2 === void 0 ? void 0 : _props$onFocus2.call(props, e);
    },
    onBlur: e => {
      var _triggerProps$onBlur2, _props$onBlur2;
      (_triggerProps$onBlur2 = triggerProps.onBlur) === null || _triggerProps$onBlur2 === void 0 ? void 0 : _triggerProps$onBlur2.call(triggerProps, e);
      (_props$onBlur2 = props.onBlur) === null || _props$onBlur2 === void 0 ? void 0 : _props$onBlur2.call(props, e);
    }
  }), /*#__PURE__*/React.createElement(Icon, {
    label: "",
    color: "currentColor"
  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
}

/**
 * __Themed link icon button__
 *
 * A themed link icon button for the top bar.
 */
export const ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);