@wix/design-system/dist/esm/CloseButton/CloseButton.js

@wix/design-system

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { generateDataAttr } from '../utils/generateDataAttr';
import { st, classes } from './CloseButton.st.css.js';
import ButtonCore from '../Button/ButtonCore';
import { ThemeContext } from '../ThemeProvider/ThemeContext';
import { Close, CloseLarge } from '@wix/wix-ui-icons-common/system';
import { SIZES, SKINS } from './CloseButton.constants';
const CHILD_SIZE = '18px';
const sizeToIconMap = {
    small: React.createElement(Close, { "data-hook": "close" }),
    medium: React.createElement(CloseLarge, { "data-hook": "close-medium" }),
    large: React.createElement(CloseLarge, { "data-hook": "close-large", size: "12" }),
};
const CloseButton = ({ skin = SKINS.standard, size = SIZES.small, disabled = false, className, dataHook, children, ...rest }) => {
    const theme = useContext(ThemeContext);
    const { icons } = theme || {};
    const closeIcon = icons?.CloseButton?.[size] ?? sizeToIconMap[size];
    return (React.createElement(ButtonCore, { ...rest, disabled: disabled, className: st(classes.root, { skin, size }, className), ...generateDataAttr({ skin, size }, ['skin', 'size']), "data-hook": dataHook }, children
        ? React.cloneElement(children, {
            size: CHILD_SIZE,
            width: CHILD_SIZE,
            height: CHILD_SIZE,
        })
        : closeIcon));
};
CloseButton.displayName = 'CloseButton';
CloseButton.propTypes = {
    as: PropTypes.any,
    className: PropTypes.any,
    children: PropTypes.node,
    skin: PropTypes.any,
    size: PropTypes.any,
    onClick: PropTypes.any,
    disabled: PropTypes.any,
    dataHook: PropTypes.any,
};
export default CloseButton;
//# sourceMappingURL=CloseButton.js.map