@atlaskit/flag/dist/esm/flag-actions.js

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

/* flag-actions.tsx generated by @compiled/babel-plugin v3.0.2 */
/* eslint-disable @atlaskit/design-system/no-nested-styles */
import "./flag-actions.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import Button from '@atlaskit/button/custom-theme-button/custom-theme-button';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Inline } from '@atlaskit/primitives/compiled';
import { actionTextColor } from './action-text-color';
import { DEFAULT_APPEARANCE } from './constants';
import { actionBackgroundColor } from './theme';
var buttonStylesOld = null;
var buttonStyles = null;
var fontStyles = null;
var appearanceNormalButtonStyles = null;
var appearanceBoldButtonStyles = null;
var appearanceNormalActionsContainerStyles = null;
var FlagActions = function FlagActions(props) {
  var _props$appearance = props.appearance,
    appearance = _props$appearance === void 0 ? DEFAULT_APPEARANCE : _props$appearance,
    _props$actions = props.actions,
    actions = _props$actions === void 0 ? [] : _props$actions,
    linkComponent = props.linkComponent,
    testId = props.testId;
  if (!actions.length) {
    return null;
  }
  var isBold = appearance !== DEFAULT_APPEARANCE;
  return /*#__PURE__*/React.createElement("span", {
    className: ax([!isBold && "_1g4l107e _y8dn107e", "_11c8fhey"])
  }, /*#__PURE__*/React.createElement(Inline, {
    space: "space.100",
    shouldWrap: true,
    alignBlock: "center",
    separator: isBold ? undefined : '·',
    testId: testId && "".concat(testId, "-actions")
  }, actions.map(function (action, index) {
    return fg('platform_dst_flag_action_padding_fix') ? /*#__PURE__*/React.createElement(Button, {
      onClick: action.onClick,
      href: action.href,
      target: action.target,
      appearance: isBold ? 'default' : 'link',
      component: linkComponent,
      spacing: "compact",
      testId: action.testId,
      key: index,
      style: {
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
        '--color': actionTextColor[appearance],
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
        '--bg-color': actionBackgroundColor[appearance].default,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
        '--bg-color-hover': actionBackgroundColor[appearance].pressed,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
        '--bg-color-active': actionBackgroundColor[appearance].active
      },
      className: ax(["_nup91zz4 _u4iq1zz4 _1w901pkf _qkwg1pkf _12r21wq8 _il101wq8 _ow071r31 _1p6b1r31 _8dbm1r31 _77mc1r31 _17rj8stv _1p6m8stv _5kwq8stv _1pd88stv _1iqunqa1 _1ejunqa1 _b6ztnqa1 _1rsgnqa1 _u1mb14jz _10fu17w4", isBold ? "_1dltgrf3 _h03xgrf3 _w8sq1a66 _1iys1a66 _fjwrgrf3 _cwkngrf3 _1yxx1a66 _z7cd1a66" : "_1dltgrf3 _h03xgrf3 _w8sqgrf3 _1iysgrf3 _fjwrgrf3 _cwkngrf3 _1yxxgrf3 _z7cdgrf3"])
    }, action.content) : /*#__PURE__*/React.createElement(Button, {
      onClick: action.onClick,
      href: action.href,
      target: action.target,
      appearance: isBold ? 'default' : 'link',
      component: linkComponent,
      spacing: "compact",
      testId: action.testId,
      key: index,
      style: {
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
        '--color': actionTextColor[appearance],
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
        '--bg-color': actionBackgroundColor[appearance].default,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
        '--bg-color-hover': actionBackgroundColor[appearance].pressed,
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
        '--bg-color-active': actionBackgroundColor[appearance].active
      },
      className: ax(["_nup91zz4 _u4iq1zz4 _1w901pkf _qkwg1pkf _12r21wq8 _il101wq8 _1ku2grf3 _1v8mgrf3 _gbuigrf3 _1dwvgrf3 _1bk61a66 _1wy61a66 _b3g31a66 _eqps1a66 _ow071r31 _1p6b1r31 _8dbm1r31 _77mc1r31 _17rj8stv _1p6m8stv _5kwq8stv _1pd88stv _1iqunqa1 _1ejunqa1 _b6ztnqa1 _1rsgnqa1 _u1mb14jz _10fu17w4", !isBold && "_1dltgrf3 _h03xgrf3 _w8sqgrf3 _1iysgrf3 _fjwrgrf3 _cwkngrf3 _1yxxgrf3 _z7cdgrf3"])
    }, action.content);
  })));
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default FlagActions;