@razorpay/blade/build/lib/web/production/components/Elevate/Elevate.web.js

The Design System that powers Razorpay

import 'react';
import '../BaseMotion/index.js';
import { msToSeconds } from '../../utils/msToSeconds.js';
import { cssBezierToArray } from '../../utils/cssBezierToArray.js';
import '../../utils/index.js';
import { jsx } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.js';

var Elevate = function Elevate(_ref) {
  var children = _ref.children,
    isHighlighted = _ref.isHighlighted,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'inout' : _ref$type,
    motionTriggers = _ref.motionTriggers;
  var isControlledHighlighted = typeof isHighlighted === 'boolean';
  var defaultMotionTriggers = isControlledHighlighted ? ['mount'] : ['hover'];
  var _useTheme = useTheme(),
    theme = _useTheme.theme;
  var elevateVariants = {
    initial: {
      boxShadow: 'none'
    },
    animate: {
      boxShadow: isHighlighted || !isControlledHighlighted ? castWebType(theme.elevation.lowRaised) : undefined,
      transition: {
        duration: msToSeconds(theme.motion.duration.moderate),
        ease: cssBezierToArray(castWebType(theme.motion.easing.standard))
      }
    },
    exit: {
      boxShadow: 'none'
    }
  };
  return /*#__PURE__*/jsx(BaseMotionEnhancerBox, {
    motionVariants: elevateVariants,
    type: type,
    children: children,
    motionTriggers: motionTriggers !== null && motionTriggers !== void 0 ? motionTriggers : defaultMotionTriggers
  });
};

export { Elevate };
//# sourceMappingURL=Elevate.web.js.map