@atlaskit/spotlight/dist/es2019/ui/card/legacy.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

/* legacy.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./legacy.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useContext, useEffect, useRef } from 'react';
import { cx } from '@atlaskit/css';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Box } from '@atlaskit/primitives/compiled';
import { SpotlightContext } from '../../controllers/context';
import { Caret } from './caret';
const styles = {
  root: "_1bsb1ns9",
  container: "_kqswh2mm",
  card: "_2rko1mok _zulpu2gc _kqswstnw _1bsbaq3k _1q51u2gc _85i5utpp _1e0c1txw _2lx21bp4 _16qs1nax"
};
const placementStyles = {
  'top-start': "_u7co12x7 _rjxpc7mi",
  'top-center': "_u7co12x7 _1e021qz4",
  'top-end': "_u7co12x7 _1e02c7mi",
  'right-start': "_1e0212x7 _u7comgjw",
  'right-end': "_1e0212x7 _152tmgjw",
  'bottom-start': "_152t12x7 _rjxpc7mi",
  'bottom-center': "_152t12x7 _1e021qz4",
  'bottom-end': "_152t12x7 _1e02c7mi",
  'left-start': "_rjxp12x7 _u7comgjw",
  'left-end': "_rjxp12x7 _152tmgjw"
};
/**
 * __Spotlight__
 *
 * The base UI card that wraps composable spotlight components.
 *
 */
export const SpotlightCard = /*#__PURE__*/forwardRef(({
  children,
  placement,
  testId
}, ref) => {
  const {
    card
  } = useContext(SpotlightContext);
  const cardRef = useRef(null);
  useEffect(() => {
    card.setRef(cardRef);
  }, [card]);
  const content = fg('platform_spotlight_card_fit_content_anchor') ? /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    ref: ref,
    className: ax([styles.root])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.container])
  }, /*#__PURE__*/React.createElement(Caret, {
    placement: placement || card.placement
  }), /*#__PURE__*/React.createElement(Box, {
    ref: cardRef,
    backgroundColor: "color.background.neutral.bold",
    xcss: cx(styles.card, placementStyles[placement || card.placement])
  }, children))) : /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    ref: ref,
    className: ax([styles.container])
  }, /*#__PURE__*/React.createElement(Caret, {
    placement: placement || card.placement
  }), /*#__PURE__*/React.createElement(Box, {
    ref: cardRef,
    backgroundColor: "color.background.neutral.bold",
    xcss: cx(styles.card, placementStyles[placement || card.placement])
  }, children));
  if (fg('platform-dst-motion-uplift-spotlight')) {
    const Motion = card.motion;
    if (Motion) {
      return /*#__PURE__*/React.createElement(Motion, null, content);
    } else {
      return content;
    }
  }
  return content;
});