mypgs 2.0.0 → 3.0.0

package/templates/html/layout/flex.html

@@ -1,109 +0,0 @@
-<!--
-/**
- * @title Flex
- * @description Esempi di layout flex responsive che distribuiscono da due a sei elementi per riga adattando automaticamente la disposizione allo spazio disponibile.
- *
- * @pgs
- * - flex-2: crea una distribuzione responsive fino a due elementi per riga.
- * - flex-3: crea una distribuzione responsive fino a tre elementi per riga.
- * - flex-4: crea una distribuzione responsive fino a quattro elementi per riga.
- * - flex-6: crea una distribuzione responsive fino a sei elementi per riga.
- *
- * @related
- * - container: definisce il contesto contenitore dell'introduzione.
- * - flexColumnTexts: organizza verticalmente e distanzia testi e contenuti delle card.
- * - card: rende visibili le celle dimostrative del layout flex.
- *
- * @return Raccolta HTML dei layout flex responsive a due, tre, quattro e sei elementi.
- */
--->
-
-<div pgs="container flexColumnTexts">
-    <strong>Sezione standard</strong>
-    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-</div>
-
-
-<div pgs="flex-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-</div>
-
-<div pgs="flex-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna cinque</strong>
-        <p>Contenuto della quinta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna sei</strong>
-        <p>Contenuto della sesta colonna.</p>
-    </article>
-</div

package/templates/html/layout/footer.html

@@ -1,64 +0,0 @@
-<!--
-/**
- * @title Footer
- * @description Piè di pagina completo con controllo tema, area di brand, navigazione, contenuti informativi e collegamento alle preferenze cookie.
- *
- * @pgs
- * - footer: identifica il contenitore principale del piè di pagina.
- * - footer-top: identifica la sezione superiore con brand e contenuti.
- * - footer-top-content: identifica il layout interno responsive della sezione superiore.
- * - footer-brand: identifica il gruppo dedicato al marchio.
- * - footer-brand-motto: identifica il testo descrittivo associato al marchio.
- * - footer-content: identifica una colonna informativa del footer.
- * - footer-legal: identifica la sezione inferiore dedicata alle informazioni legali.
- * - footer-legal-content: identifica il contenuto della sezione legale.
- *
- * @related
- * - button: presenta i controlli del tema e delle preferenze cookie come pulsanti.
- * - toggleDarkmode: collega il controllo al gestore globale del tema chiaro o scuro.
- * - section: applica alle aree superiore e legale la struttura condivisa delle sezioni.
- * - flex-3: distribuisce in modo responsive le colonne della parte superiore.
- * - logo: inserisce il marchio nel footer.
- * - logo-text: usa la variante testuale del logo.
- * - cookieConsent-actionOpen: apre il pannello delle preferenze del pattern Cookie Consent.
- *
- * @return Struttura HTML completa del footer con brand, menu e area legale.
- */
--->
-
-<footer pgs="footer">
-    <button pgs="button toggleDarkmode" type="button" aria-label="Cambia tema">
-        <i class="fa-solid fa-moon"></i>
-    </button>
-
-    <section pgs="footer-top section">
-        <div pgs="footer-top-content flex-3">
-            <div pgs="footer-brand">
-                <a aria-label="Logo" pgs="logo" href="/">
-                    <span pgs="logo-text">MyPGS</span>
-                </a>
-                <p pgs="footer-brand-motto">Componenti frontend riutilizzabili.</p>
-            </div>
-
-            <div pgs="footer-content">
-                <h2>Menu</h2>
-                <nav aria-label="Menu footer">
-                    <ul>
-                        <li><a href="/">Home</a></li>
-                        <li><a href="/contatti">Contatti</a></li>
-                    </ul>
-                </nav>
-            </div>
-        </div>
-    </section>
-
-    <section pgs="footer-legal section">
-        <div pgs="footer-legal-content">
-            <button type="button" pgs="button cookieConsent-actionOpen">Preferenze cookie</button>
-            <p><a href="">Privacy Policy</a></p>
-            <p><a href="">Cookie Policy</a></p>
-            <p><a href="">Termini e Condizioni</a></p>
-            <p>© 2026 MyPgs. Nessun diritto riservato.</p>
-        </div>
-    </section>
-</footer>

package/templates/html/layout/grid.html

@@ -1,109 +0,0 @@
-<!--
-/**
- * @title Grid
- * @description Esempi di griglie responsive che distribuiscono da due a sei colonne mantenendo gap e ridimensionamento coerenti con il design system.
- *
- * @pgs
- * - grid-2: crea una griglia responsive fino a due colonne.
- * - grid-3: crea una griglia responsive fino a tre colonne.
- * - grid-4: crea una griglia responsive fino a quattro colonne.
- * - grid-6: crea una griglia responsive fino a sei colonne.
- *
- * @related
- * - container: definisce il contesto contenitore dell'introduzione.
- * - flexColumnTexts: organizza e distanzia i testi introduttivi e delle card.
- * - card: rende visibili le celle dimostrative delle griglie.
- *
- * @return Raccolta HTML delle griglie responsive a due, tre, quattro e sei colonne.
- */
--->
-
-<div pgs="container flexColumnTexts">
-    <strong>Sezione standard</strong>
-    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-</div>
-
-
-<div pgs="grid-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-</div>
-
-<div pgs="grid-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna cinque</strong>
-        <p>Contenuto della quinta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna sei</strong>
-        <p>Contenuto della sesta colonna.</p>
-    </article>
-</div

package/templates/html/layout/header.html

@@ -1,107 +0,0 @@
-<!--
-/**
- * @title Header
- * @description Intestazione responsive che misura lo spazio disponibile, alterna contenuti desktop e mobile e integra menu, tema scuro e navigazione modale.
- *
- * @pgs
- * - header: identifica l'intestazione principale osservata dal modulo JavaScript.
- * - header-element: identifica il gruppo interno misurato per determinare il passaggio alla modalità mobile.
- * - header-element-alwaysOn: identifica l'area iniziale sempre visibile.
- * - header-element-onlyDesktop: identifica i contenuti mostrati soltanto quando il menu desktop è attivo.
- * - header-element-onlyMobile: identifica i contenuti mostrati soltanto in modalità mobile.
- * - header-element-alwaysOnLast: identifica l'area finale sempre visibile.
- * - header-element-hamburger: identifica il gruppo della navigazione mobile.
- * - header-element-hamburger-button: identifica il controllo hamburger specifico dell'header.
- *
- * @pgs-option
- * - horizontal: dispone orizzontalmente il menu desktop correlato.
- * - vertical: dispone verticalmente il menu mobile correlato.
- * - menuHeader: adatta entrambi i menu al contesto dell'header.
- * - containerPGS: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'intestazione.
- * - right: sul dialog della navigazione mobile presenta il contenuto dal lato destro.
- *
- * @pgs-state
- * - mobileActive: viene applicato a header e header-element quando larghezza o viewport richiedono la navigazione mobile.
- *
- * @related
- * - logo: inserisce il marchio nell'area iniziale.
- * - logo-text: usa la variante testuale del logo.
- * - menu: fornisce la navigazione desktop e mobile.
- * - buttonIcon: presenta i controlli tema e hamburger come pulsanti a icona.
- * - toggleDarkmode: collega il controllo al gestore globale del tema.
- * - modal: fornisce apertura e chiusura della navigazione mobile.
- * - modal-button: apre il pannello mobile.
- * - modal-close: chiude il pannello mobile e condivide il controllo hamburger.
- * - modal-dialog: identifica il dialog della navigazione mobile.
- * - modal-dialog-content: identifica il pannello interno della navigazione mobile.
- *
- * @return Header HTML completo con navigazione desktop e pannello mobile laterale.
- */
--->
-
-<header pgs="header">
-	<div pgs="header-element">
-		<div pgs="header-element-alwaysOn">
-			<a aria-label="Logo" pgs="logo" href="/">
-				<span pgs="logo-text">MyPGS</span>
-			</a>
-		</div>
-
-		<div pgs="header-element-onlyDesktop">
-			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Menu principale">
-				<ul>
-					<li><a href="/">Home</a></li>
-					<li><a href="#componenti">Componenti</a></li>
-					<li><a href="#layout">Layout</a></li>
-				</ul>
-			</nav>
-		</div>
-
-		<div pgs="header-element-onlyMobile">
-		</div>
-
-		<div pgs="header-element-alwaysOnLast">
-			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
-				<i class="fa-solid fa-moon"></i>
-			</button>
-		</div>
-
-		<div pgs="header-element-hamburger modal" pgs-option="containerPGS[header] ">
-
-			<button pgs="buttonIcon modal-button modal-close header-element-hamburger-button" type="button"></button>
-
-			<dialog pgs="modal-dialog" pgs-option="right">
-				<div pgs="modal-dialog-content">
-					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Menu mobile">
-						<ul>
-							<li><a href="/">Home</a></li>
-							<li><a href="#componenti">Componenti</a></li>
-							<li><a href="#layout">Layout</a></li>
-						</ul>
-					</nav>
-				</div>
-			</dialog>
-		</div>
-	</div>
-
-	<!-- //# HEADER BOTTOM -->
-
-	<script>
-		const addPgsState = (element, state) => {
-			if (!element) return;
-
-			const states = element.getAttribute("pgs-state")?.split(/\s+/) ?? [];
-			element.setAttribute("pgs-state", [...new Set([...states, state])].join(" "));
-		};
-
-		if (localStorage.getItem("screenIsDarkMode") === "true") {
-			addPgsState(document.documentElement, "darkmode");
-			addPgsState(document.body, "darkmode");
-		}
-
-		if (window.innerWidth < 600) {
-			addPgsState(document.querySelector("header"), "mobileActive");
-			addPgsState(document.querySelector("[pgs~=header-element]"), "mobileActive");
-		}
-	</script>
-</header>

package/templates/html/layout/section.html

@@ -1,62 +0,0 @@
-<!--
-/**
- * @title Section
- * @description Varianti di sezione che controllano larghezza, padding e trattamento di contenuti specifici mantenendo la spaziatura verticale condivisa.
- *
- * @pgs
- * - section: identifica la sezione standard con contenuto centrato.
- * - sectionFull: identifica una sezione estesa a tutta la larghezza disponibile.
- * - sectionSpecificity: identifica una sezione che applica una struttura specifica al relativo figlio.
- * - sectionSpecificity-child: identifica il contenuto figlio gestito dalla variante sectionSpecificity.
- * - sectionMax: identifica una sezione con larghezza massima estesa.
- * - sectionNoPadding: identifica una sezione priva del padding standard.
- *
- * @related
- * - flexColumnSections: distanzia verticalmente tutte le sezioni dell'esempio.
- * - flexColumnElements: organizza verticalmente gli elementi principali di ogni sezione.
- * - flexColumnTexts: organizza e distanzia i contenuti interni.
- * - card-img: riutilizza il trattamento delle immagini card nelle sezioni dimostrative.
- * - imgCover: adatta le immagini alla larghezza della sezione.
- *
- * @return Raccolta HTML delle varianti di section disponibili.
- */
--->
-
-<div pgs="flexColumnSections">
-    <section pgs="section flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <strong>Sezione standard</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
-        </div>
-    </section>
-
-    <section pgs="sectionFull flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <strong>Sezione full-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
-        </div>
-    </section>
-
-    <section pgs="sectionSpecificity flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Immagine segnaposto">
-        </div>
-        <div pgs="sectionSpecificity-child flexColumnTexts">
-            <strong>Sezione specificità-child</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
-        </div>
-    </section>
-
-    <section pgs="sectionMax flexColumnElements" style="background-color: var(--color-primary-soft)">
-        <div pgs="flexColumnTexts">
-            <strong>Sezione max-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
-        </div>
-    </section>
-
-    <section pgs="sectionNoPadding flexColumnElements">
-        <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Immagine segnaposto">
-        </div>
-    </section>
-</div>

package/templates/html/patterns/cookieConsent.html

@@ -1,82 +0,0 @@
-<!--
-/**
- * @title Cookie Consent
- * @description Pattern accessibile per raccogliere e memorizzare il consenso ai cookie analitici, applicare le preferenze e caricare Google Analytics solo quando autorizzato.
- *
- * @pgs
- * - cookieConsent: identifica il pannello principale inizializzato dal pattern JavaScript.
- * - cookieConsent-panel: identifica il gruppo delle preferenze configurabili.
- * - cookieConsent-featureEssential: identifica la riga dei cookie tecnici sempre attivi.
- * - cookieConsent-panel-badge: identifica l'indicatore dello stato dei cookie tecnici.
- * - cookieConsent-featureAnalytics: identifica la riga dei cookie analitici opzionali.
- * - cookieConsent-toggleAnalytics: identifica il controllo che abilita il consenso analytics.
- * - cookieConsent-actionReject: applica le preferenze selezionate senza accettare automaticamente analytics.
- * - cookieConsent-actionAccept: accetta tutti i cookie disponibili.
- * - cookieConsent-actionOpen: identifica controlli esterni che riaprono il pannello delle preferenze.
- * - cookieConsent-gaUnavailable: token runtime applicato al root quando manca un measurement ID utilizzabile.
- * - cookieConsent-accepted: token runtime applicato al root quando analytics è consentito.
- * - cookieConsent-declined: token runtime applicato al root quando analytics non è consentito.
- *
- * @related
- * - flexColumn: organizza verticalmente il pannello delle preferenze.
- * - flexRow: dispone righe e azioni del pannello.
- * - nowrap: impedisce il ritorno a capo nella riga dei cookie essenziali.
- * - toggle: presenta il consenso analytics come interruttore.
- * - button: presenta l'azione di selezione con lo stile standard.
- * - buttonStrong: presenta l'accettazione completa come azione primaria.
- *
- * @return Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attributi accessibili.
- */
--->
-
-<section id="pgs-cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id="G-XXXXXXXXXX" hidden tabindex="-1">
-    <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookie e privacy <br></p>
-    <h2>La tua privacy prima di tutto</h2>
-
-    <p>
-        Utilizziamo cookie tecnici per offrire il servizio e, previo consenso, cookie analitici di
-        <strong>Google Analytics</strong> per misurare in modo anonimo il traffico e migliorare i contenuti.
-        Puoi modificare la scelta in qualsiasi momento.
-    </p>
-
-    <p>
-        <a href="/privacy-policy/" target="_blank" rel="noopener">Privacy Policy</a> -
-        <a href="/cookie-policy/" target="_blank" rel="noopener">Cookie Policy</a>
-    </p>
-
-    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Preferenze cookie">
-        <div pgs="flexRow nowrap cookieConsent-featureEssential">
-            <div>
-                <p>
-                    <strong>Cookie tecnici</strong>
-                    <br>
-                    <small>Sempre attivi per garantire il corretto funzionamento del sito.</small>
-                </p>
-            </div>
-
-            <span pgs="cookieConsent-panel-badge">Attivi</span>
-        </div>
-
-        <div pgs="flexRow cookieConsent-featureAnalytics">
-            <label pgs="toggle">
-                <p>
-                    <strong>Analytics</strong>
-                    <br>
-                    <small>Dati di navigazione raccolti in forma aggregata per statistiche anonime.</small>
-                </p>
-
-                <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Abilita Google Analytics">
-            </label>
-        </div>
-    </div>
-
-    <div pgs="flexRow">
-        <button type="button" pgs="button cookieConsent-actionReject">
-            <i class="fa-solid fa-duotone fa-sliders"></i>Solo selezionati
-        </button>
-
-        <button type="button" pgs="buttonStrong cookieConsent-actionAccept">
-            <i class="fa-solid fa-check"></i> Accetta tutto
-        </button>
-    </div>
-</section>

package/templates/react/components/summary.jsx

@@ -1,18 +0,0 @@
-export default function Summary() {
-    return (
-        <div pgs="summary">
-            <div pgs="summary-content">
-                <p>
-                    Questo testo dimostrativo e' abbastanza lungo da occupare piu righe e mostrare il comportamento del componente summary. Il contenuto puo includere testo, link e altri elementi inline senza richiedere markup aggiuntivo.
-                </p>
-                <p>
-                    Quando il contenuto supera tre righe viene mostrato un pulsante per espandere o richiudere l'area visibile.
-                </p>
-            </div>
-
-            <button pgs="summary-button" type="button">
-                Mostra di più
-            </button>
-        </div>
-    );
-}

package/templates/react/layout/flex.jsx

@@ -1,36 +0,0 @@
-const columns = [
-    ["Colonna uno", "Contenuto della prima colonna."],
-    ["Colonna due", "Contenuto della seconda colonna."],
-    ["Colonna tre", "Contenuto della terza colonna."],
-    ["Colonna quattro", "Contenuto della quarta colonna."],
-    ["Colonna cinque", "Contenuto della quinta colonna."],
-    ["Colonna sei", "Contenuto della sesta colonna."],
-];
-
-function ColumnCard({ title, text }) {
-    return (
-        <article pgs="card flexColumnTexts">
-            <strong>{title}</strong>
-            <p>{text}</p>
-        </article>
-    );
-}
-
-export default function Flex() {
-    return (
-        <>
-            <div pgs="container flexColumnTexts">
-                <strong>Sezione standard</strong>
-                <p>Contenuto centrato dentro una sezione MyPGS.</p>
-            </div>
-
-            {[2, 3, 4, 6].map((count) => (
-                <div key={count} pgs={`flex-${count}`}>
-                    {columns.slice(0, count).map(([title, text]) => (
-                        <ColumnCard key={title} title={title} text={text} />
-                    ))}
-                </div>
-            ))}
-        </>
-    );
-}

package/templates/react/layout/grid.jsx

@@ -1,36 +0,0 @@
-const columns = [
-    ["Colonna uno", "Contenuto della prima colonna."],
-    ["Colonna due", "Contenuto della seconda colonna."],
-    ["Colonna tre", "Contenuto della terza colonna."],
-    ["Colonna quattro", "Contenuto della quarta colonna."],
-    ["Colonna cinque", "Contenuto della quinta colonna."],
-    ["Colonna sei", "Contenuto della sesta colonna."],
-];
-
-function ColumnCard({ title, text }) {
-    return (
-        <article pgs="card flexColumnTexts">
-            <strong>{title}</strong>
-            <p>{text}</p>
-        </article>
-    );
-}
-
-export default function Grid() {
-    return (
-        <>
-            <div pgs="container flexColumnTexts">
-                <strong>Sezione standard</strong>
-                <p>Contenuto centrato dentro una sezione MyPGS.</p>
-            </div>
-
-            {[2, 3, 4, 6].map((count) => (
-                <div key={count} pgs={`grid-${count}`}>
-                    {columns.slice(0, count).map(([title, text]) => (
-                        <ColumnCard key={title} title={title} text={text} />
-                    ))}
-                </div>
-            ))}
-        </>
-    );
-}

package/templates/react/layout/section.jsx

@@ -1,44 +0,0 @@
-export default function Section() {
-    return (
-        <div pgs="flexColumnSections">
-            <section pgs="section flexColumnElements">
-                <div pgs="container flexColumnTexts">
-                    <strong>Sezione standard</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-                </div>
-            </section>
-
-            <section pgs="sectionFull flexColumnElements">
-                <div pgs="container flexColumnTexts">
-                    <strong>Sezione full-width</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-                </div>
-            </section>
-
-            <section pgs="sectionSpecificity flexColumnElements">
-                <div pgs="container flexColumnTexts">
-                    <strong>Sezione specificità</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-                </div>
-                <div pgs="sectionSpecificity-child container flexColumnTexts">
-                    <strong>Sezione specificità-child</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-                </div>
-            </section>
-
-            <section pgs="sectionMax flexColumnElements" style={{ backgroundColor: "var(--color-primary-soft)" }}>
-                <div pgs="container flexColumnTexts">
-                    <strong>Sezione max-width</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-                </div>
-            </section>
-
-            <section pgs="sectionNoPadding flexColumnElements">
-                <div pgs="container flexColumnTexts">
-                    <strong>Sezione no-padding</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-                </div>
-            </section>
-        </div>
-    );
-}