@vlinderclimate/net-zero-ui/components/ToggleButtonGroup.js

<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var styles = require('@mui/material/styles');
var MuiToggleButton = require('@mui/material/ToggleButton');
var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
var theme_typography = require('../theme/typography.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var MuiToggleButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButton);
var MuiToggleButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButtonGroup);

/**
 * Styles
 */
var StyledToggleButtonGroup = styles.styled(MuiToggleButtonGroup__default["default"])(function (_a) {
    _a.theme;
    return ({});
});
var StyledToggleButton = styles.styled(MuiToggleButton__default["default"])(function (_a) {
    var theme = _a.theme;
    return ({
        border: "1.5px solid",
        borderRadius: "0 !important",
        color: theme.palette.gray["700"],
        borderColor: theme.palette.gray["500"],
        fontSize: theme_typography.fontSize.xs3,
        lineHeight: theme_typography.lineHeight.xs4,
        paddingBlock: theme.spacing(0.5),
        paddingInline: theme.spacing(1.5),
        textTransform: "none",
        letterSpacing: "normal",
        "&.MuiToggleButtonGroup-grouped:not(:first-of-type)": {
            borderWidth: "1.5px !important",
            marginLeft: -1.5
        },
        "&.Mui-selected": {
            borderColor: theme.palette.gray["800"],
            color: theme.palette.gray["800"],
            zIndex: 5,
            backgroundColor: "transparent !important",
            "&.MuiToggleButtonGroup-grouped:not(:first-of-type)": {
                borderColor: theme.palette.gray["800"]
            }
        }
    });
});
/**
 * Components
 */
var ToggleButtonGroup = function (_a) {
    var onChange = _a.onChange, selectedValue = _a.selectedValue, list = _a.list, props = tslib_es6.__rest(_a, ["onChange", "selectedValue", "list"]);
    return (jsxRuntime.jsx(StyledToggleButtonGroup, tslib_es6.__assign({ value: selectedValue, exclusive: true, onChange: onChange }, props, { children: list.map(function (item, i) { return (jsxRuntime.jsx(StyledToggleButton, tslib_es6.__assign({ value: item.value }, { children: item.children }), i)); }) }), void 0));
};

exports["default"] = ToggleButtonGroup;