@stakefish/ui/components/Switcher.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { a as __rest, _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx } from 'react/jsx-runtime';
import { styled } from '@mui/material/styles';
import Switch from '@mui/material/Switch';

var StyledSwitch = styled(Switch)(function (_a) {
    var theme = _a.theme;
    return ({
        width: 64,
        height: 32,
        padding: 0,
        "& .MuiSwitch-switchBase": {
            padding: 4,
            "&.Mui-checked": {
                transform: "translateX(32px)",
                "& + .MuiSwitch-track": {
                    backgroundColor: theme.palette.gray[900],
                    opacity: 1,
                    border: "none"
                }
            },
            "&.Mui-disabled": {
                "& + .MuiSwitch-track": {
                    backgroundColor: theme.palette.gray[300],
                    opacity: 0.7,
                    border: "none"
                }
            }
        },
        "& .MuiSwitch-thumb": {
            width: 24,
            height: 24,
            boxShadow: "none",
            backgroundColor: theme.palette.gray.white
        },
        "& .MuiSwitch-track": {
            borderRadius: theme.borders.radius.md,
            backgroundColor: theme.palette.gray[300],
            transition: theme.transitions.create(["background-color", "border"]),
            opacity: 1
        }
    });
});
var Switcher = function (_a) {
    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
    return jsx(StyledSwitch, __assign({ disabled: disabled }, props), void 0);
};

export { Switcher as default };