@atlaskit/onboarding/dist/es2019/styled/target.js

An onboarding spotlight introduces new features to users through focused messages or multi-step tours.

/* target.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./target.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
const reduceMotionAsPerUserPreference = null;
// NOTE:
// Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
const baseShadow = `0 0 0 2px ${"var(--ds-border-discovery, #AF59E1)"}`;
const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
const pulseKeyframes = null;
const animationStyles = null;
const Base = ({
  bgColor,
  children,
  className,
  radius,
  testId,
  style,
  // The rest of these props are from `HTMLDivElement`
  ...props
}) => /*#__PURE__*/React.createElement("div", _extends({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
  className: className,
  "data-testid": testId,
  style: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Pass-through style is not allowed at the moment
    ...style,
    backgroundColor: bgColor,
    borderRadius: radius ? typeof radius === 'number' ? `${radius}px` : radius : undefined
  }
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, props), children);

/**
 * __Target inner__
 *
 * Used to apply spotlight border and pulse to spotlight targets.
 *
 * @internal
 */
export const TargetInner = ({
  bgColor,
  children,
  className,
  pulse,
  radius,
  testId,
  // Thes rest of these are from `HTMLDivElement`
  ...props
}) => /*#__PURE__*/React.createElement(Base, _extends({
  bgColor: bgColor
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
  ,
  className: ax([pulse && "", pulse && "_5sag19pg _tip812c5 _j7hqfamb _1pglmcjr _16qs1peg", "_1bumglyw _sedtglyw", className]),
  radius: radius,
  testId: testId
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, props, {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
  style: props.style
}), children);
const targetOverlayStyles = null;

/**
 * __Target overlay__
 *
 * Overlays a spotlight target, allowing for custom click events that are intended
 * only for onboarding.
 *
 * @internal
 */
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports, @repo/internal/react/require-jsdoc
export const TargetOverlay = ({
  onClick,
  ...props
}) => /*#__PURE__*/React.createElement("div", _extends({
  onClick: onClick
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, props, {
  style: {
    cursor: onClick ? 'pointer' : 'auto'
  },
  className: ax(["_1bsb1osq _4t3i1osq _kqswstnw _152tze3t _1e02ze3t"])
}));

/**
 * __Spotlight pulse__
 *
 * A spotlight pulse draws attention to a new feature.
 *
 * - [Examples](https://atlassian.design/components/onboarding/examples)
 * - [Code](https://atlassian.design/components/onboarding/code)
 * - [Usage](https://atlassian.design/components/onboarding/usage)
 *
 * @deprecated Use `@atlaskit/spotlight` instead.
 */
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports, @repo/internal/react/require-jsdoc
export const Pulse = ({
  bgColor,
  children,
  className,
  radius,
  pulse = true,
  testId,
  ...props
}) => /*#__PURE__*/React.createElement(Base, _extends({
  bgColor: bgColor
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
  ,
  className: ax([pulse && "", pulse && "_5sag19pg _tip812c5 _j7hqfamb _1pglmcjr _16qs1peg", "_1bumglyw _sedtglyw", className]),
  radius: radius,
  testId: testId
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, props, {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
  style: props.style
}), children);