var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { Switch, withStyles } from '@material-ui/core';
const FluentSwitch = withStyles((theme) => ({
    root: {
        width: 40,
        height: 20,
        padding: 0,
        display: 'flex',
    },
    switchBase: {
        padding: 4,
        color: theme.palette.grey[500],
        '&$checked': {
            transform: 'translateX(20px)',
            color: theme.palette.common.white,
            '& + $track': {
                opacity: 1,
                borderColor: theme.palette.primary.main
            }
        }
    },
    thumb: {
        width: 12,
        height: 12,
        boxShadow: 'none'
    },
    track: {
        border: `1px solid ${theme.palette.grey[500]}`,
        borderRadius: 20 / 2,
        opacity: 1,
        backgroundColor: theme.palette.common.white
    },
    checked: {}
}))(Switch);
export const FluentToggle = (props) => {
    const { name, onChange, checked } = props, otherProps = __rest(props, ["name", "onChange", "checked"]);
    return (React.createElement(FluentSwitch, Object.assign({}, otherProps, { checked: checked, onChange: onChange, name: name })));
};
//# sourceMappingURL=FluentToggle.js.map