.at-gsm {
    display: none;
}
.ads-container {
    padding: 20px 10px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

.ads-container .ads-screenshot {
    width: 20%;
    max-width: 200px;
    display: inline-block;
    vertical-align: top;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.ads-container .ads-notice {
    width: 70%;
    display: block;
    vertical-align: top;
    padding: 0 20px;
}
.ads-container .ads-notice .plugin-install-notice {
    border-top: 1px solid #ddd;
    padding-top: 15px;
    margin-top: 25px;
    margin-bottom: 10px;
}
.ads-container a.ads-gsm-btn:before{
    margin: -2px 5px 0 -2px;
    vertical-align: middle;
}

.ads-notice h2 {
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.3;
}

.ads-container .ads-notice p {
    margin: 1em 0;
    padding: 0;
    color: #72777c;
}

a.ads-gsm-btn.button {
    background: #04bf41;
    color: #fff;
    border-color: #04bf41;
    font-size: 15px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
a.ads-gsm-btn.button:hover,
a.ads-gsm-btn.button:focus,
a.ads-gsm-btn.button:active {
    background: #00944a;
    border-color: #00944a;
    color: #fff;
}

@media (max-width: 600px) {
    .ads-container .ads-screenshot {
        display: none;
    }
    .ads-container .ads-notice {
        padding: 0;
        width: 100%;
    }
}<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="75px" height="75px" viewBox="0 0 75 75" enable-background="new 0 0 75 75" xml:space="preserve">
<g>
	<path fill="#6699CC" d="M63.657,12.237c-0.046-0.116-0.109-0.227-0.205-0.318L52.954,1.835c-0.028-0.027-0.065-0.039-0.097-0.062
		c-0.061-0.043-0.115-0.089-0.187-0.117c-0.067-0.027-0.144-0.034-0.215-0.043c-0.037-0.005-0.069-0.022-0.108-0.022H52.33h-0.001
		H14.114c-1.577,0-2.86,1.283-2.86,2.859v66.923c0,1.577,1.283,2.859,2.86,2.859h46.773c1.575,0,2.858-1.282,2.858-2.859V12.608
		C63.746,12.474,63.711,12.351,63.657,12.237z M53.223,4.52l7.51,7.213h-7.395c-0.064,0-0.115-0.052-0.115-0.118V4.52z
		 M61.996,71.373c0,0.611-0.498,1.109-1.109,1.109H14.114c-0.612,0-1.11-0.498-1.11-1.109V4.45c0-0.612,0.498-1.109,1.11-1.109
		h37.359v8.274c0,1.03,0.836,1.868,1.864,1.868h8.658L61.996,71.373L61.996,71.373z"/>
	<path fill="#6699CC" d="M45.43,44.486c-6.656,0-12.072,5.416-12.072,12.072c0,6.655,5.416,12.071,12.072,12.071
		c6.655,0,12.071-5.415,12.071-12.071S52.085,44.486,45.43,44.486z M45.43,66.881c-5.691,0-10.322-4.63-10.322-10.32
		s4.63-10.321,10.322-10.321c5.69,0,10.321,4.631,10.321,10.321S51.12,66.881,45.43,66.881z"/>
	<path fill="#6699CC" d="M51.299,50.689c-0.342-0.342-0.896-0.342-1.238,0L45.43,55.32l-4.631-4.631
		c-0.342-0.342-0.896-0.342-1.238,0c-0.34,0.342-0.34,0.896,0,1.236l4.631,4.633l-4.631,4.631c-0.34,0.342-0.34,0.896,0,1.236
		c0.172,0.172,0.396,0.258,0.619,0.258s0.448-0.086,0.619-0.258l4.631-4.631l4.631,4.631c0.172,0.172,0.396,0.258,0.619,0.258
		s0.448-0.086,0.619-0.258c0.342-0.342,0.342-0.896,0-1.236l-4.631-4.631l4.631-4.633C51.641,51.586,51.641,51.031,51.299,50.689z"
		/>
	<path fill="#6699CC" d="M19.826,18.879c0,0.483,0.392,0.875,0.875,0.875h33.598c0.483,0,0.875-0.392,0.875-0.875
		s-0.392-0.875-0.875-0.875H20.701C20.218,18.004,19.826,18.396,19.826,18.879z"/>
	<path fill="#6699CC" d="M20.701,29.511h33.598c0.483,0,0.875-0.392,0.875-0.875c0-0.483-0.392-0.875-0.875-0.875H20.701
		c-0.483,0-0.875,0.392-0.875,0.875C19.826,29.119,20.218,29.511,20.701,29.511z"/>
	<path fill="#6699CC" d="M20.701,39.27h33.598c0.483,0,0.875-0.393,0.875-0.875s-0.392-0.875-0.875-0.875H20.701
		c-0.483,0-0.875,0.392-0.875,0.875S20.218,39.27,20.701,39.27z"/>
	<path fill="#6699CC" d="M30.125,47.275h-9.423c-0.483,0-0.875,0.393-0.875,0.875s0.392,0.875,0.875,0.875h9.423
		c0.483,0,0.875-0.393,0.875-0.875S30.608,47.275,30.125,47.275z"/>
	<path fill="#6699CC" d="M27.75,57.034h-7.049c-0.483,0-0.875,0.392-0.875,0.875s0.392,0.875,0.875,0.875h7.049
		c0.483,0,0.875-0.392,0.875-0.875S28.233,57.034,27.75,57.034z"/>
</g>
</svg>
import Alert from '@elementor/ui/Alert';
import Box from '@elementor/ui/Box';
import Card from '@elementor/ui/Card';
import CardContent from '@elementor/ui/CardContent';
import CardHeader from '@elementor/ui/CardHeader';
import Divider from '@elementor/ui/Divider';
import List from '@elementor/ui/List';
import ListItem from '@elementor/ui/ListItem';
import ListItemText from '@elementor/ui/ListItemText';
import Typography from '@elementor/ui/Typography';
import { styled } from '@elementor/ui/styles';
import { CapabilitiesItem } from '@ea11y/components';
import { useSettings, useStorage } from '@ea11y/hooks';
import { LogoSettings } from '@ea11y/layouts';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { MENU_SETTINGS } from '../constants/menu-settings';

const StyledCardContent = styled(CardContent)`
	height: 55vh;
	overflow: auto;
	margin-block-end: ${({ theme }) => theme.spacing(2)};
	padding: 0 ${({ theme }) => theme.spacing(2)};
`;

const MenuSettings = () => {
	const {
		widgetMenuSettings,
		hideMinimumOptionAlert,
		setHideMinimumOptionAlert,
	} = useSettings();
	const [disableOptions, setDisableOptions] = useState(false);
	const { save } = useStorage();

	useEffect(() => {
		if (!areAtLeastTwoOptionsEnabled(widgetMenuSettings)) {
			setDisableOptions(true);
		} else {
			setDisableOptions(false);

			save({ a11y_hide_minimum_active_options_alert: false }).then(() => {
				setHideMinimumOptionAlert(false);
			});
		}
	}, [widgetMenuSettings]);

	/**
	 * Check if at least two options are enabled.
	 * @param {Object} settings - widget menu settings.
	 * @return {boolean} true if at least two options are enabled.
	 */
	const areAtLeastTwoOptionsEnabled = (settings) => {
		const enabled = Object.keys(settings)?.filter(
			(key) => settings[key].enabled,
		);
		return enabled.length > 2;
	};

	/**
	 * Close minimum option notification.
	 */
	const handleCloseNotification = () => {
		save({ a11y_hide_minimum_active_options_alert: true }).then(() => {
			setHideMinimumOptionAlert(true);
		});
	};

	const sectionsCount = Object.entries(MENU_SETTINGS).length;

	return (
		<Box display="flex" flexDirection="column" gap={2}>
			<Card variant="outlined">
				<CardHeader
					title={__('Feature Menu', 'pojo-accessibility')}
					titleTypographyProps={{ component: 'h2' }}
					subheader={
						<Typography variant="body2">
							{__(
								'Choose which accessibility features and capabilities you want to include.',
								'pojo-accessibility',
							)}
						</Typography>
					}
				/>

				{disableOptions && !hideMinimumOptionAlert && (
					<Alert
						severity="info"
						sx={{ m: 2 }}
						onClose={handleCloseNotification}
					>
						{__('At least two option must remain active', 'pojo-accessibility')}
					</Alert>
				)}

				<StyledCardContent>
					<List as="div">
						{Object.entries(MENU_SETTINGS).map(([parentKey, parentItem], i) => {
							return (
								<Box key={parentKey}>
									<ListItem as="div" disableGutters>
										<ListItemText sx={{ textAlign: 'start' }}>
											<Typography variant="subtitle2" component="h3">
												{parentItem.title}
											</Typography>
										</ListItemText>
									</ListItem>

									{parentItem.options &&
										Object.entries(parentItem.options).map(
											([childKey, childValue]) => {
												return (
													<CapabilitiesItem
														key={childKey}
														childKey={childKey}
														childValue={childValue}
														parentKey={parentKey}
														disableOptions={disableOptions}
													/>
												);
											},
										)}

									{i + 1 < sectionsCount && <Divider sx={{ my: 2 }} />}
								</Box>
							);
						})}
					</List>
				</StyledCardContent>
			</Card>
			<LogoSettings />
		</Box>
	);
};

export default MenuSettings;
<script id="tmpl-nf-field-wrap-no-container" type="text/template">

        {{{ data.renderElement() }}}

        <div class="nf-error-wrap"></div>
</script>
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Steps from './steps/index';
import './style.scss';

const App = () => {
	return (
		<Router>
			<div
				className={ `starter-templates-ai-steps ${
					!! astraSitesVars?.isRTLEnabled ? 'st-rtl' : ''
				}` }
			>
				<Steps />
			</div>
		</Router>
	);
};

export default App;