@wulperstudio/cms/organisms/VideoModalCta/components/close-button.js

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { IconButton, useTheme } from '@mui/material';
import { Icon } from '@iconify/react';
import { jsx as _jsx } from "react/jsx-runtime";
export var CloseButton = function CloseButton(_ref) {
  var onClose = _ref.onClose,
    sxIconButton = _ref.sxIconButton,
    restIconButton = _ref.restIconButton,
    icon = _ref.icon,
    color = _ref.color,
    width = _ref.width,
    height = _ref.height,
    restIcon = _ref.restIcon;
  var theme = useTheme();
  return /*#__PURE__*/_jsx(IconButton, Object.assign({
    onClick: onClose,
    "aria-label": "Close video modal",
    sx: Object.assign(_defineProperty({
      position: 'absolute',
      top: -12,
      right: -12,
      zIndex: theme.zIndex.fab,
      width: 40,
      height: 40,
      bgcolor: '#000',
      transition: 'all 0.2s ease',
      color: 'white',
      '&:hover': {
        bgcolor: '#1a1a1a',
        transform: 'scale(1.1)'
      }
    }, theme.breakpoints.down('md'), {
      top: 12,
      right: 12
    }), sxIconButton)
  }, restIconButton, {
    children: /*#__PURE__*/_jsx(Icon, Object.assign({
      icon: icon,
      color: color,
      width: width,
      height: height
    }, restIcon))
  }));
};