From 9a2a41412ab73a524872507c4050a5a8aad28fee Mon Sep 17 00:00:00 2001
From: Virtute90 <32056724+Virtute90@users.noreply.github.com>
Date: Wed, 10 Jul 2024 16:34:38 +0200
Subject: [PATCH 1/6] [FEATURE] Added list component (#1079)

add list component with docs
---
 src/List/List.tsx                             |   40 +
 src/List/ListItem.tsx                         |   86 +
 src/index.ts                                  |    8 +-
 .../Components/LinkList/LinkList.stories.tsx  |    2 +-
 stories/Components/List.stories.tsx           |  246 +
 stories/Documentation/List.mdx                |   75 +
 test/List.test.tsx                            |  249 +
 test/__snapshots__/Storybook.test.tsx.snap    | 4618 +++++++++++------
 8 files changed, 3652 insertions(+), 1672 deletions(-)
 create mode 100644 src/List/List.tsx
 create mode 100644 src/List/ListItem.tsx
 create mode 100644 stories/Components/List.stories.tsx
 create mode 100644 stories/Documentation/List.mdx
 create mode 100644 test/List.test.tsx

diff --git a/src/List/List.tsx b/src/List/List.tsx
new file mode 100644
index 000000000..72761e02a
--- /dev/null
+++ b/src/List/List.tsx
@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  /** Classi aggiuntive da usare per il componente lista del List */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente wrapper del List */
+  wrapperClassName?: string;
+  /**
+   * Utilizzarlo in caso di utilizzo di componenti personalizzati per il wrapper della lista.
+   * Nota: viene ignorato quando usato in lista annidate.
+   * */
+  tag?: ElementType;
+  /** Quando attivo rimuove il componente contenitore della ListList. Utile per alcuni tipi di liste annidate. */
+  noWrapper?: boolean;
+  testId?: string;
+}
+
+export const List: FC<ListProps> = ({
+  className,
+  wrapperClassName,
+  tag = 'div',
+  noWrapper,
+  testId,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('it-list-wrapper', wrapperClassName);
+  const classes = classNames(className, 'it-list');
+
+  if (noWrapper) {
+    return <ul {...attributes} className={classes} data-testid={testId} />;
+  }
+
+  return (
+    <Tag className={wrapperClasses} data-testid={testId}>
+      <ul {...attributes} className={classes} />
+    </Tag>
+  );
+};
diff --git a/src/List/ListItem.tsx b/src/List/ListItem.tsx
new file mode 100644
index 000000000..db69b9bc2
--- /dev/null
+++ b/src/List/ListItem.tsx
@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import React, { AnchorHTMLAttributes, ElementType, FC, ReactNode } from 'react';
+
+export interface ListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Indica se l'elemento è attivo o no */
+  active?: boolean;
+  /** Indica se l'elemento ha un avatar */
+  avatar?: ReactNode;
+  /** Indica se l'elemento ha una icona */
+  icon?: ReactNode;
+  /** Indica se l'elemento ha una immagine */
+  img?: ReactNode;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente ListItem */
+  className?: string;
+  /** Classi aggiuntive da usare per l'elemento contenitore dell'item */
+  wrapperClassName?: string;
+  /** Indica il link a cui l'elemento deve puntare. */
+  href?: string;
+  /** Indica il link route a cui l'elemento deve puntare. */
+  to?: string;
+  testId?: string;
+}
+
+export const ListItem: FC<ListItemProps> & {
+  MultipleAction: typeof MultipleAction;
+} = ({
+  className,
+  active,
+  avatar,
+  icon,
+  img,
+  href,
+  tag = 'div',
+  to,
+  wrapperClassName,
+  testId,
+  children,
+  ...attributes
+}) => {
+    let Tag = tag;
+    const classes = classNames(
+      className,
+      { active },
+      'list-item'
+    ),
+      classesItem = classNames(className, {
+        'it-rounded-icon': icon,
+        'avatar size-lg': avatar,
+        'it-thumb': img
+      }),
+      leftItem = icon || avatar || img;
+
+    if (href) {
+      return (
+        <li className={wrapperClassName} data-testid={testId}>
+          <Tag>
+            <a href={href || '#'} {...attributes} className={classes}>
+              {children}
+            </a>
+          </Tag>
+        </li>
+      );
+    }
+
+    return (
+      <li className={wrapperClassName} data-testid={testId}>
+        <Tag
+          {...attributes}
+          className={classes}
+          href={href}
+          to={to}
+        >
+          {leftItem && <div className={classesItem}>{leftItem}</div>}
+          <div className="it-right-zone">{children}</div>
+        </Tag>
+      </li>
+    );
+  };
+
+const MultipleAction: FC<ListItemProps> = ({ children }) => {
+  return <span className='it-multiple'>{children}</span>
+};
+
+ListItem.MultipleAction = MultipleAction;
diff --git a/src/index.ts b/src/index.ts
index d8a44f275..196137072 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -96,10 +96,10 @@ export { HeaderBrand } from './Header/HeaderBrand';
 export { HeaderContent } from './Header/HeaderContent';
 export { HeaderLinkZone } from './Header/HeaderLinkZone';
 export { HeaderRightZone } from './Header/HeaderRightZone';
+export { Headers } from './Header/Headers';
 export { HeaderSearch } from './Header/HeaderSearch';
 export { HeaderSocialsZone } from './Header/HeaderSocialsZone';
 export { HeaderToggler } from './Header/HeaderToggler';
-export { Headers } from './Header/Headers';
 export { Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from './Hero/index';
 export { Icon, clearIconCache, iconsList as icons, preloadIcons } from './Icon/Icon';
 export { Input } from './Input/Input';
@@ -107,6 +107,8 @@ export { InputContainer } from './Input/InputContainer';
 export { TextArea } from './Input/TextArea';
 export { LinkList } from './LinkList/LinkList';
 export { LinkListItem } from './LinkList/LinkListItem';
+export { List } from './List/List';
+export { ListItem } from './List/ListItem';
 export { MegamenuFooter } from './Megamenu/MegamenuFooter';
 export { MegamenuHighlightColumn } from './Megamenu/MegamenuHighlightColumn';
 export { MegamenuItem } from './Megamenu/MegamenuItem';
@@ -193,10 +195,10 @@ export type { HeaderBrandProps } from './Header/HeaderBrand';
 export type { HeaderContentProps } from './Header/HeaderContent';
 export type { HeaderLinkZoneProps } from './Header/HeaderLinkZone';
 export type { HeaderRightZoneProps } from './Header/HeaderRightZone';
+export type { HeadersProps } from './Header/Headers';
 export type { HeaderSearchProps } from './Header/HeaderSearch';
 export type { HeaderSocialsZoneProps } from './Header/HeaderSocialsZone';
 export type { HeaderTogglerProps } from './Header/HeaderToggler';
-export type { HeadersProps } from './Header/Headers';
 export type {
   HeroBackgroundProps,
   HeroBodyProps,
@@ -211,6 +213,8 @@ export type { InputContainerProps } from './Input/InputContainer';
 export type { TextAreaProps } from './Input/TextArea';
 export type { LinkListProps } from './LinkList/LinkList';
 export type { LinkListItemProps } from './LinkList/LinkListItem';
+export type { ListProps } from './List/List';
+export type { ListItemProps } from './List/ListItem';
 export type { MegamenuFooterProps } from './Megamenu/MegamenuFooter';
 export type { MegamenuHCProps } from './Megamenu/MegamenuHighlightColumn';
 export type { MegamenuItemProps } from './Megamenu/MegamenuItem';
diff --git a/stories/Components/LinkList/LinkList.stories.tsx b/stories/Components/LinkList/LinkList.stories.tsx
index ce05ab9b0..c535c4e00 100644
--- a/stories/Components/LinkList/LinkList.stories.tsx
+++ b/stories/Components/LinkList/LinkList.stories.tsx
@@ -16,7 +16,7 @@ import {
 } from "../../../src";
 
 const meta: Meta<typeof LinkList> = {
-  title: "Documentazione/Organizzare i contenuti/Liste",
+  title: "Documentazione/Organizzare i contenuti/Liste di link",
   component: LinkList
 };
 
diff --git a/stories/Components/List.stories.tsx b/stories/Components/List.stories.tsx
new file mode 100644
index 000000000..4fb1fa70d
--- /dev/null
+++ b/stories/Components/List.stories.tsx
@@ -0,0 +1,246 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react";
+
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Icon,
+  List,
+  ListItem
+} from "../../src";
+
+const meta: Meta<typeof List> = {
+  title: "Documentazione/Organizzare i contenuti/Liste",
+  component: List
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItem>;
+
+const ListaTemplate: Story = {
+  render: ({ ...args }) => (
+    <List>
+      <ListItem {...args}>
+        <span className="text">Testo</span>
+      </ListItem>
+      <ListItem tag={'a'} {...args}>
+        <span className="text">Link</span>
+      </ListItem>
+      <ListItem active tag={'a'} {...args}>
+        <span className="text">Link attivo</span>
+      </ListItem>
+    </List>
+  )
+};
+
+export const ListaSemplice: Story = {
+  ...ListaTemplate
+};
+
+export const ListaAvatar: Story = {
+  ...ListaTemplate,
+  args: {
+    avatar: <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri" />
+  }
+};
+
+export const ListaIcona: Story = {
+  ...ListaTemplate,
+  args: {
+    icon: <Icon icon="it-folder" />
+  }
+};
+
+export const ListaImmagine: Story = {
+  ...ListaTemplate,
+  args: {
+    img: <img src="https://placehold.jp/40x40.png" alt="descrizione immagine" />
+  }
+};
+
+export const ListaFreccia: Story = {
+  render: () => (
+    <List>
+      <ListItem >
+        <span className="text">Testo</span>
+        <Icon icon="it-chevron-right" />
+      </ListItem>
+      <ListItem tag={'a'} >
+        <span className="text">Link</span>
+        <Icon icon="it-chevron-right" />
+      </ListItem>
+      <ListItem active tag={'a'}>
+        <span className="text">Link attivo</span>
+        <Icon icon="it-chevron-right" />
+      </ListItem>
+    </List>
+  )
+};
+
+export const ListaAzioniMultiple: Story = {
+  render: () => (
+    <List>
+      <ListItem >
+        <span className="text">Testo</span>
+        <ListItem.MultipleAction>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem>
+        <a href="#"><span className="text">Link</span></a>
+        <ListItem.MultipleAction>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem active>
+        <a href="#"><span className="text">Link attivo</span></a>
+        <ListItem.MultipleAction>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+    </List>
+  ),
+  parameters: {
+    docs: {
+      /**
+       * Sostituisco nel sorgente MultipleAction con ListItem.MultipleAction
+       * altrimenti non si capisce da dove si importa
+       */
+      source: { transform: (code: string) => code.replaceAll('MultipleAction', 'ListItem.MultipleAction') },
+    },
+  },
+};
+
+export const ListaMetadata: Story = {
+  render: ({ ...args }) => (
+    <List>
+      <ListItem {...args}>
+        <span className="text">Testo</span>
+        <span className="metadata">metadata testo</span>
+      </ListItem>
+      <ListItem {...args}>
+        <span className="text">Testo 2</span>
+        <span className="metadata"><a href="#">metadata link</a></span>
+      </ListItem>
+      <ListItem {...args}>
+        <a href="#"><span className="text">Link</span></a>
+        <span className="metadata">metadata testo</span>
+      </ListItem>
+      <ListItem {...args}>
+        <a href="#"><span className="text">Link 2</span></a>
+        <span className="metadata"><a href="#">metadata link</a></span>
+      </ListItem>
+      <ListItem active tag={'a'} {...args}>
+        <span className="text">Link attivo</span>
+        <span className="metadata">metadata testo</span>
+      </ListItem>
+      <ListItem active {...args}>
+        <a href="#"><span className="text">Link attivo</span></a>
+        <span className="metadata"><a href="#">metadata link</a></span>
+      </ListItem>
+    </List>
+  ),
+  args: {
+    avatar: <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri" />
+  }
+};
+
+export const ListaTestoAzioniMultipleMetadata: Story = {
+  render: () => (
+    <List>
+      <ListItem >
+        <span className="text">Testo<em>Lorem ipsum dolor sit amet.</em></span>
+        <ListItem.MultipleAction>
+          <span className="metadata">metadata testo</span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem >
+        <span className="text">Testo 2<em>Lorem ipsum dolor sit amet.</em></span>
+        <ListItem.MultipleAction>
+          <span className="metadata"><a href="#">metadata link</a></span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem >
+        <a href="#"><span className="text">Link<em>Lorem ipsum dolor sit amet.</em></span></a>
+        <ListItem.MultipleAction>
+          <span className="metadata"><a href="#">metadata link</a></span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem active>
+        <a href="#"><span className="text">Link attivo<em>Lorem ipsum dolor sit amet.</em></span></a>
+        <ListItem.MultipleAction>
+          <span className="metadata">metadata testo</span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+    </List>
+  ),
+  parameters: {
+    docs: {
+      /**
+       * Sostituisco nel sorgente MultipleAction con ListItem.MultipleAction
+       * altrimenti non si capisce da dove si importa
+       */
+      source: { transform: (code: string) => code.replaceAll('MultipleAction', 'ListItem.MultipleAction') },
+    },
+  },
+};
diff --git a/stories/Documentation/List.mdx b/stories/Documentation/List.mdx
new file mode 100644
index 000000000..2ab5e826d
--- /dev/null
+++ b/stories/Documentation/List.mdx
@@ -0,0 +1,75 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import { List, ListItem } from '../../src';
+import * as ListStories from '../Components/List.stories';
+
+<Meta of={ListStories} />
+
+# Liste
+
+#### La lista è un componente flessibile per la visualizzazione di liste con testo, link o elementi correlati.
+
+## Tipologie di lista
+
+Le liste, costituite da tag `<ul>` con classe `.it-list` all’interno di un wrapper con classe `.it-list-wrapper`, possono contenere testi, link, icone, avatar, immagini o una combinazione di questi elementi.
+
+### Lista semplice solo testo
+
+<Canvas of={ListStories.ListaSemplice} />
+
+### Lista con avatar
+
+L’elemento `.avatar` precede l’elemento `.it-right-zone` che contiene il testo.
+
+<Canvas of={ListStories.ListaAvatar} />
+
+### Lista con icona
+
+L’elemento `.it-rounded-icon` con all’interno la relativa icona, precede l’elemento `.it-right-zone` che contiene il testo.
+
+<Canvas of={ListStories.ListaIcona} />
+
+### Lista con immagine
+
+L’elemento `.it-thumb` con all’interno la relativa immagine, precede l’elemento `.it-right-zone` che contiene il testo.
+
+<Canvas of={ListStories.ListaImmagine} />
+
+## Lista con azioni
+
+Le liste con azioni hanno al loro interno icone o elementi interattivi da associare ad azioni specifiche decise in base alle esigenze.
+
+### Con freccia
+
+L’elemento `.icon` con all’interno la relativa icona segue l’elemento `.text` che contiene il testo.
+
+<Canvas of={ListStories.ListaFreccia} />
+
+### Con azioni multiple
+
+L’elemento `.it-multiple `con all’interno le relative icone, segue l’elemento `.text`.
+
+<Canvas of={ListStories.ListaAzioniMultiple} />
+
+## Altre variazioni
+
+### Con metadata
+
+Ad ogni lista si può aggiungere un campo testuale metadata, come nell’esempio seguente. L’elemento `.metadata`, segue l’elemento `.text`.
+
+<Canvas of={ListStories.ListaMetadata} />
+
+### Con testo aggiuntivo, azioni multiple e metadata
+
+Per il testo aggiuntivo, utilizzare il tag `<em>` all’interno dell’elemento `.text`.
+
+<Canvas of={ListStories.ListaTestoAzioniMultipleMetadata} />
+
+## Argomenti componente
+
+### List
+
+<ArgTypes of={List} />
+
+### ListItem
+
+<ArgTypes of={ListItem} />
diff --git a/test/List.test.tsx b/test/List.test.tsx
new file mode 100644
index 000000000..5f70a3907
--- /dev/null
+++ b/test/List.test.tsx
@@ -0,0 +1,249 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Icon, List, ListItem } from '../src';
+
+describe('List component', () => {
+  it('should work as container for children elements', () => {
+    render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    expect(screen.getByText('Testo')).not.toBe(null);
+  });
+
+  it('should append the passed className to the container', () => {
+    const { container } = render(
+      <List className='myclass'>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    expect(container.firstChild?.firstChild).toHaveClass('myclass');
+  });
+
+  it('should have the right class', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const ul = container.querySelector("ul"),
+      divInsideUl = ul?.querySelector("li div"),
+      divInsideDiv = divInsideUl?.querySelector("div");
+    if (ul && divInsideUl && divInsideUl) {
+
+      expect(container.firstChild).toHaveClass('it-list-wrapper');
+      expect(ul).toHaveClass('it-list');
+      expect(divInsideUl).toHaveClass('list-item');
+      expect(divInsideDiv).toHaveClass('it-right-zone');
+    }
+  });
+
+  it('should have avatar', () => {
+    const { container } = render(
+      <List>
+        <ListItem avatar={<img alt="Anna Barbieri" src="https://randomuser.me/api/portraits/women/41.jpg" />}>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const avatar = container.getElementsByClassName("list-item");
+    if (avatar) {
+      expect(avatar.length).toBe(1);
+      expect(avatar.item(0)?.querySelector("div")).toHaveClass('avatar size-lg');
+    }
+  });
+
+  it('should have icon', () => {
+    const { container } = render(
+      <List>
+        <ListItem icon={<Icon icon="it-folder" />}>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const icon = container.getElementsByClassName("list-item");
+    if (icon) {
+      expect(icon.length).toBe(1);
+      expect(icon.item(0)?.querySelector("div")).toHaveClass('it-rounded-icon');
+      expect(icon.item(0)?.querySelector("div")?.firstChild?.nodeName).toBe('svg');
+    }
+  });
+
+  it('should have image', () => {
+    const { container } = render(
+      <List>
+        <ListItem img={<img alt="descrizione immagine" src="https://placehold.jp/40x40.png" />}>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const image = container.getElementsByClassName("list-item");
+    if (image) {
+      expect(image.length).toBe(1);
+      expect(image.item(0)?.querySelector("div")).toHaveClass('it-thumb');
+      expect(image.item(0)?.querySelector("div")?.firstChild?.nodeName).toBe('IMG');
+    }
+  });
+
+  it('should have icon as arrow', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+          <Icon icon="it-chevron-right" />
+        </ListItem>
+      </List>
+    );
+
+    const element = container.getElementsByClassName("it-right-zone");
+    if (element) {
+      expect(element.item(0)?.querySelector("span")?.nodeName).toBe('SPAN');
+      expect(element.item(0)?.querySelector("svg")?.nodeName).toBe('svg');
+    }
+  });
+
+  it('should have multiple action', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+          <ListItem.MultipleAction>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+          </ListItem.MultipleAction>
+        </ListItem>
+      </List>
+    );
+
+    const element = container.getElementsByClassName("it-right-zone"),
+      action = element.item(0);
+    if (action) {
+      expect(action?.lastChild?.nodeName).toBe('SPAN');
+      expect(action?.lastChild).toHaveClass('it-multiple');
+      expect(action?.lastChild?.firstChild?.nodeName).toBe('A');
+    }
+  });
+
+  it('should have avatar and metadata', () => {
+    const { container } = render(
+      <List>
+        <ListItem avatar={<img alt="Anna Barbieri" src="https://randomuser.me/api/portraits/women/41.jpg" />}>
+          <span className="text">
+            Testo
+          </span>
+          <span className="metadata">
+            metadata testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const avatar = container.getElementsByClassName("list-item"),
+      metadata = container.getElementsByClassName("it-right-zone");
+    if (avatar) {
+      expect(avatar.length).toBe(1);
+      expect(avatar.item(0)?.querySelector("div")).toHaveClass('avatar size-lg');
+    }
+    if (metadata) {
+      expect(metadata.item(0)?.lastChild).toHaveClass("metadata");
+    }
+  });
+
+  it('should have text, multiple action and metadata', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+            <em>
+              Lorem ipsum dolor sit amet.
+            </em>
+          </span>
+          <ListItem.MultipleAction>
+            <span className="metadata">
+              metadata testo
+            </span>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+          </ListItem.MultipleAction>
+        </ListItem>
+      </List>
+    );
+
+    const element = container.getElementsByClassName("it-right-zone"),
+      action = element.item(1);
+    if (element) {
+      expect(element.item(0)?.firstChild?.nodeName).toBe("SPAN");
+      expect(element.item(0)?.firstChild?.lastChild?.nodeName).toBe("EM");
+    }
+    if (action) {
+      expect(action.lastChild?.nodeName).toBe('SPAN');
+      expect(action.lastChild).toHaveClass('it-multiple');
+      expect(action.lastChild?.firstChild?.nodeName).toBe('SPAN');
+      expect(action.lastChild?.firstChild).toHaveClass('metadata');
+      expect(action.querySelector("s")?.nodeName).toBe('A');
+    }
+  });
+});
diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
index ba3f099eb..667718cfb 100644
--- a/test/__snapshots__/Storybook.test.tsx.snap
+++ b/test/__snapshots__/Storybook.test.tsx.snap
@@ -33024,79 +33024,81 @@ exports[`Stories Snapshots Documentazione/Organizzare gli spazi/Griglie TuttiIBr
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _Esempi 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaAvatar 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 2
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
+        <div
           class="list-item"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo
+            </span>
+          </div>
+        </div>
       </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _StatoAttivo 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
       <li>
         <a
           class="list-item"
         >
-          <span>
-            Link list 1
-          </span>
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link
+            </span>
+          </div>
         </a>
       </li>
       <li>
         <a
           class="active list-item"
         >
-          <span>
-            Link list 2 active
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 3
-          </span>
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link attivo
+            </span>
+          </div>
         </a>
       </li>
     </ul>
@@ -33104,133 +33106,286 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _StatoAt
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _StatoDisabilitato 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaAzioniMultiple 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="disabled list-item"
-        >
-          <span>
-            Link list 2 disabled
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
+        <div
           class="list-item"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste CollapseExample 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="icon-right large medium list-item"
-          role="button"
-        >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 1 
+            <span
+              class="text"
+            >
+              Testo
             </span>
-            <svg
-              aria-hidden="true"
-              class="icon right icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="it-multiple"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
-              />
-            </svg>
-          </span>
-        </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
-      <div
-        class="collapse"
-      >
-        <ul
-          class="link-sublist"
+      <li>
+        <div
+          class="list-item"
         >
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 4 
-              </span>
-            </a>
-          </li>
-          <li>
+          <div
+            class="it-right-zone"
+          >
             <a
-              class="list-item"
+              href="#"
             >
-              <span>
-                Link list 5 
+              <span
+                class="text"
+              >
+                Link
               </span>
             </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
+            <span
+              class="it-multiple"
             >
-              <span>
-                Link list 6 
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
       <li>
-        <a
-          class="icon-right large medium list-item"
-          role="button"
+        <div
+          class="active list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 2 
+            <a
+              href="#"
+            >
+              <span
+                class="text"
+              >
+                Link attivo
+              </span>
+            </a>
+            <span
+              class="it-multiple"
+            >
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaFreccia 1`] = `
+<div>
+  <div
+    class="it-list-wrapper"
+  >
+    <ul
+      class="it-list"
+    >
+      <li>
+        <div
+          class="list-item"
+        >
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo
             </span>
             <svg
-              aria-hidden="true"
-              class="icon right icon-primary"
+              class="icon"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -33241,61 +33396,26 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Collapse
                 icon
               </title>
               <path
-                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
               />
             </svg>
-          </span>
-        </a>
+          </div>
+        </div>
       </li>
-      <div
-        class="collapse"
-      >
-        <ul
-          class="link-sublist"
-        >
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 7 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 8 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 9 
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
       <li>
         <a
-          class="icon-right large medium list-item"
-          role="button"
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 3 
+            <span
+              class="text"
+            >
+              Link
             </span>
             <svg
-              aria-hidden="true"
-              class="icon right icon-primary"
+              class="icon"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -33306,103 +33426,155 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Collapse
                 icon
               </title>
               <path
-                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
               />
             </svg>
-          </span>
+          </div>
         </a>
       </li>
-      <div
-        class="collapse"
-      >
-        <ul
-          class="link-sublist"
+      <li>
+        <a
+          class="active list-item"
         >
-          <li>
-            <a
-              class="list-item"
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              <span>
-                Link list 10 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
+              Link attivo
+            </span>
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span>
-                Link list 11 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 12 
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </div>
+        </a>
+      </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConAvatar 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaIcona 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="active list-item"
+        <div
+          class="list-item"
         >
-          <img
-            alt="avataralt"
-            class="avatar lg-size"
-            src="http://via.placeholder.com/40x40"
-            title="avatartitle"
-          />
-          <span>
-            Link list 1 active 
-          </span>
-        </a>
+          <div
+            class="it-rounded-icon"
+          >
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm1 12c.1.5-.3.9-.8 1H4c-.5.1-.9-.3-1-.8V6c-.1-.5.3-.9.8-1h5.8l1.7 1.7.3.3H20c.5-.1.9.3 1 .8V18zM4 8h16v1H4V8z"
+              />
+            </svg>
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo
+            </span>
+          </div>
+        </div>
       </li>
       <li>
         <a
           class="list-item"
         >
-          <img
-            alt="avataralt"
-            class="avatar lg-size"
-            src="http://via.placeholder.com/40x40"
-            title="avatartitle"
-          />
-          <span>
-            Link list 2 
-          </span>
+          <div
+            class="it-rounded-icon"
+          >
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm1 12c.1.5-.3.9-.8 1H4c-.5.1-.9-.3-1-.8V6c-.1-.5.3-.9.8-1h5.8l1.7 1.7.3.3H20c.5-.1.9.3 1 .8V18zM4 8h16v1H4V8z"
+              />
+            </svg>
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link
+            </span>
+          </div>
         </a>
       </li>
       <li>
         <a
-          class="disabled list-item"
+          class="active list-item"
         >
-          <img
-            alt="avataralt"
-            class="avatar lg-size"
-            src="http://via.placeholder.com/40x40"
-            title="avatartitle"
-          />
-          <span>
-            Link list 3 disabled 
-          </span>
+          <div
+            class="it-rounded-icon"
+          >
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm1 12c.1.5-.3.9-.8 1H4c-.5.1-.9-.3-1-.8V6c-.1-.5.3-.9.8-1h5.8l1.7 1.7.3.3H20c.5-.1.9.3 1 .8V18zM4 8h16v1H4V8z"
+              />
+            </svg>
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link attivo
+            </span>
+          </div>
         </a>
       </li>
     </ul>
@@ -33410,640 +33582,798 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConAvata
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConCheckbox 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaImmagine 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
         <div
-          class="active list-item"
+          class="list-item"
         >
           <div
-            class="form-check-group form-check"
+            class="it-thumb"
           >
-            <input
-              aria-describedby="checkbox1Description"
-              checked=""
-              class="form-control"
-              id="checkbox1"
-              type="checkbox"
-              value=""
+            <img
+              alt="descrizione immagine"
+              src="https://placehold.jp/40x40.png"
             />
-            <label
-              class="form-check-label"
-              for="checkbox1"
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Checkbox selezionato
-            </label>
+              Testo
+            </span>
           </div>
         </div>
       </li>
       <li>
-        <div
-          class="active list-item"
+        <a
+          class="list-item"
         >
           <div
-            class="form-check-group form-check"
+            class="it-thumb"
           >
-            <input
-              aria-describedby="checkbox2Description"
-              class="form-control"
-              id="checkbox2"
-              type="checkbox"
-              value=""
+            <img
+              alt="descrizione immagine"
+              src="https://placehold.jp/40x40.png"
             />
-            <label
-              class="form-check-label"
-              for="checkbox2"
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Checkbox non selezionato
-            </label>
+              Link
+            </span>
           </div>
-        </div>
+        </a>
       </li>
       <li>
-        <div
-          class="disabled list-item"
+        <a
+          class="active list-item"
         >
           <div
-            class="form-check-group form-check"
+            class="it-thumb"
           >
-            <input
-              aria-describedby="checkbox3Description"
-              class="form-control"
-              disabled=""
-              id="checkbox3"
-              type="checkbox"
-              value=""
+            <img
+              alt="descrizione immagine"
+              src="https://placehold.jp/40x40.png"
             />
-            <label
-              class="form-check-label"
-              for="checkbox3"
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Checkbox disabilitato non selezionato
-            </label>
+              Link attivo
+            </span>
           </div>
-        </div>
+        </a>
       </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConSwitch 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaMetadata 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
         <div
-          class="active list-item"
+          class="list-item"
         >
           <div
-            class="toggles"
+            class="avatar size-lg"
           >
-            <label
-              class="form-check-label"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Label per toggle
-              <input
-                class="form-check-input"
-                type="checkbox"
-              />
-              <span
-                class="lever"
-              />
-            </label>
+              Testo
+            </span>
+            <span
+              class="metadata"
+            >
+              metadata testo
+            </span>
           </div>
         </div>
       </li>
       <li>
         <div
-          class="disabled list-item"
+          class="list-item"
         >
           <div
-            class="toggles"
+            class="avatar size-lg"
           >
-            <label
-              class="form-check-label"
-            >
-              Label per disabled toggle
-              <input
-                class="form-check-input"
-                disabled=""
-                type="checkbox"
-              />
-              <span
-                class="lever"
-              />
-            </label>
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
           </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ControlliComponent 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo 2
+            </span>
+            <span
+              class="metadata"
+            >
+              <a
+                href="#"
+              >
+                metadata link
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
       <li>
-        <a
-          class="icon-left active list-item"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="avatar size-lg"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-            <span>
-              Link list 1 active
+              <span
+                class="text"
+              >
+                Link
+              </span>
+            </a>
+            <span
+              class="metadata"
+            >
+              metadata testo
             </span>
-          </span>
-        </a>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="icon-left list-item"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="avatar size-lg"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-            <span>
-              Link list 2
+              <span
+                class="text"
+              >
+                Link 2
+              </span>
+            </a>
+            <span
+              class="metadata"
+            >
+              <a
+                href="#"
+              >
+                metadata link
+              </a>
             </span>
-          </span>
-        </a>
+          </div>
+        </div>
       </li>
       <li>
         <a
-          class="icon-left disabled list-item"
+          class="active list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="avatar size-lg"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-            <span>
-              Link list 3 disabled
+              Link attivo
             </span>
-          </span>
+            <span
+              class="metadata"
+            >
+              metadata testo
+            </span>
+          </div>
         </a>
       </li>
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
+            >
+              <span
+                class="text"
+              >
+                Link attivo
+              </span>
+            </a>
+            <span
+              class="metadata"
+            >
+              <a
+                href="#"
+              >
+                metadata link
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ControlliSecondariComponent 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaSemplice 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="icon-right active list-item"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 1 active
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
-        </a>
+              Testo
+            </span>
+          </div>
+        </div>
       </li>
       <li>
         <a
-          class="icon-right list-item"
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 2
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
+              Link
+            </span>
+          </div>
         </a>
       </li>
       <li>
         <a
-          class="icon-right disabled list-item"
+          class="active list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 3 disabled
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
-        </a>
+              Link attivo
+            </span>
+          </div>
+        </a>
       </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste EsempioMultiline 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaTestoAzioniMultipleMetadata 1`] = `
 <div>
   <div
-    class="link-list-wrapper multiline"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="icon-right active list-item"
-          href="#"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 1 active
+            <span
+              class="text"
+            >
+              Testo
+              <em>
+                Lorem ipsum dolor sit amet.
+              </em>
             </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="it-multiple"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-          </span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
-          </p>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
+              <span
+                class="metadata"
+              >
+                metadata testo
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="icon-right list-item"
-          href="#"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 2
+            <span
+              class="text"
+            >
+              Testo 2
+              <em>
+                Lorem ipsum dolor sit amet.
+              </em>
             </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="it-multiple"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-          </span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
-          </p>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
+              <span
+                class="metadata"
+              >
+                <a
+                  href="#"
+                >
+                  metadata link
+                </a>
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="icon-right disabled list-item"
-          href="#"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 3 disabled
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              href="#"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-          </span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
-          </p>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste HeaderEDividerConLink 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <div
-      class="link-list-heading"
-    >
-      <a
-        href="#"
-      >
-        Intestazione con link
-      </a>
-    </div>
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 2
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
+              <span
+                class="text"
+              >
+                Link
+                <em>
+                  Lorem ipsum dolor sit amet.
+                </em>
+              </span>
+            </a>
+            <span
+              class="it-multiple"
+            >
+              <span
+                class="metadata"
+              >
+                <a
+                  href="#"
+                >
+                  metadata link
+                </a>
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="list-item"
+        <div
+          class="active list-item"
         >
-          <span>
-            Link list 4
-          </span>
-        </a>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
+            >
+              <span
+                class="text"
+              >
+                Link attivo
+                <em>
+                  Lorem ipsum dolor sit amet.
+                </em>
+              </span>
+            </a>
+            <span
+              class="it-multiple"
+            >
+              <span
+                class="metadata"
+              >
+                metadata testo
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste HeaderEDividerNoLink 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini ElementoSingolo 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="row"
   >
     <div
-      class="link-list-heading"
-    >
-      Intestazione senza link
-    </div>
-    <ul
-      class="link-list"
+      class="col-12 col-lg-4"
     >
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
+      <div
+        class="it-grid-item-wrapper"
+      >
         <a
-          class="list-item"
+          href="#"
         >
-          <span>
-            Link list 2
-          </span>
+          <div
+            class="img-responsive-wrapper"
+          >
+            <div
+              class="img-responsive"
+            >
+              <div
+                class="img-wrapper"
+              >
+                <img
+                  alt="Alternative Text"
+                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                  title="Image Title"
+                />
+              </div>
+            </div>
+          </div>
         </a>
-      </li>
-      <li>
+      </div>
+    </div>
+    <div
+      class="col-12 col-lg-4"
+    >
+      <div
+        class="it-grid-item-wrapper"
+      >
         <a
-          class="list-item"
+          href="#"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 4
-          </span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste NavigationComponentFixed 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="icon-right large medium list-item"
-        >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="img-responsive-wrapper"
           >
-            <span>
-              Link list 1 
-            </span>
-            <svg
-              class="icon right icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="icon-right large medium list-item"
-        >
+              <div
+                class="img-wrapper"
+              >
+                <img
+                  alt="Alternative Text"
+                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                  title="Image Title"
+                />
+              </div>
+            </div>
+          </div>
           <span
-            class="list-item-title-icon-wrapper"
+            class="it-griditem-text-wrapper"
           >
-            <span>
-              Link list 2 
+            <span
+              class="it-griditem-text"
+            >
+              Didascalia
             </span>
             <svg
-              class="icon right icon-primary"
+              class="icon icon-sm"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -34054,55 +34384,49 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Navigati
                 icon
               </title>
               <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
               />
             </svg>
           </span>
         </a>
-      </li>
-      <ul
-        class="link-sublist"
+      </div>
+    </div>
+    <div
+      class="col-12 col-lg-4"
+    >
+      <div
+        class="it-grid-item-wrapper it-grid-item-overlay"
       >
-        <li>
-          <a
-            class="list-item"
-          >
-            <span>
-              Link list 4 
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            class="list-item"
-          >
-            <span>
-              Link list 5 
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            class="list-item"
-          >
-            <span>
-              Link list 6 
-            </span>
-          </a>
-        </li>
-      </ul>
-      <li>
         <a
-          class="icon-right large medium list-item"
+          href="#"
         >
+          <div
+            class="img-responsive-wrapper"
+          >
+            <div
+              class="img-responsive"
+            >
+              <div
+                class="img-wrapper"
+              >
+                <img
+                  alt="Alternative Text"
+                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                  title="Image Title"
+                />
+              </div>
+            </div>
+          </div>
           <span
-            class="list-item-title-icon-wrapper"
+            class="it-griditem-text-wrapper"
           >
-            <span>
-              Link list 3 
+            <span
+              class="it-griditem-text"
+            >
+              Didascalia
             </span>
             <svg
-              class="icon right icon-primary"
+              class="icon icon-sm"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -34113,647 +34437,371 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Navigati
                 icon
               </title>
               <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
               />
             </svg>
           </span>
         </a>
-      </li>
-    </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste PrimaryESecondaryAction 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini GrigliaStandard 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-grid-list-wrapper"
   >
-    <ul
-      class="link-list"
+    <div
+      class="grid-row"
     >
-      <li>
-        <a
-          class="icon-left active list-item"
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <a
+            href="#"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive-wrapper"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-            <span>
-              Link list 1 active
-            </span>
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="icon-left list-item"
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <a
+            href="#"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive-wrapper"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-            <span>
-              Link list 2
-            </span>
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="icon-left disabled list-item"
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <a
+            href="#"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive-wrapper"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-            <span>
-              Link list 3 disabled
-            </span>
-          </span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Sizing 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <div
-      class="link-list-heading"
-    >
-      Intestazione senza link
-    </div>
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="large list-item"
-          href="#"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="large list-item"
-          href="#"
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span>
-            Link list 2
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="large list-item"
-          href="#"
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
-      </li>
-      <li>
-        <a
-          class="large list-item"
-          href="#"
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span>
-            Link list 4
-          </span>
-        </a>
-      </li>
-    </ul>
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste TitoloLista 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Masonry 1`] = `
 <div>
   <div
-    class="sticky-wrapper navbar-wrapper"
+    class="it-grid-list-wrapper it-image-label-grid it-masonry"
   >
-    <nav
-      class="it-navscroll-wrapper it-top-navscroll navbar navbar-expand-lg"
+    <div
+      class="card-columns"
     >
       <div
-        class="container-fluid"
+        class="col-12"
       >
         <div
-          class="menu-wrapper"
+          class="it-grid-item-wrapper"
         >
-          <div
-            class="link-list-wrapper menu-link-list"
+          <a
+            href="#"
           >
-            <h3>
-              Indice della pagina
-            </h3>
-            <ul
-              class="link-list"
+            <div
+              class="img-responsive-wrapper"
             >
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#cos-e"
-                >
-                  <span>
-                    Cos'è
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
+              <div
+                class="img-responsive"
               >
-                <a
-                  class="nav-link"
-                  href="#luogo"
+                <div
+                  class="img-wrapper"
                 >
-                  <span>
-                    Luogo
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#date-e-orari"
-                >
-                  <span>
-                    Date e orari
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#costi"
-                >
-                  <span>
-                    Costi
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#documenti"
-                >
-                  <span>
-                    Documenti
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#contatti"
-                >
-                  <span>
-                    Contatti
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/400x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
               >
-                <a
-                  class="nav-link"
-                  href="#appuntamenti"
-                >
-                  <span>
-                    Appuntamenti
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <a
-                  class="nav-link"
-                  href="#ulteriori-informazioni"
-                >
-                  <span>
-                    Ulteriori informazioni
-                  </span>
-                </a>
-              </li>
-            </ul>
-          </div>
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
         </div>
       </div>
-    </nav>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini ElementoSingolo 1`] = `
-<div>
-  <div
-    class="row"
-  >
-    <div
-      class="col-12 col-lg-4"
-    >
       <div
-        class="it-grid-item-wrapper"
+        class="col-12"
       >
-        <a
-          href="#"
+        <div
+          class="it-grid-item-wrapper"
         >
-          <div
-            class="img-responsive-wrapper"
+          <a
+            href="#"
           >
             <div
-              class="img-responsive"
+              class="img-responsive-wrapper"
             >
               <div
-                class="img-wrapper"
+                class="img-responsive"
               >
-                <img
-                  alt="Alternative Text"
-                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                  title="Image Title"
-                />
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
               </div>
             </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="col-12 col-lg-4"
-    >
-      <div
-        class="it-grid-item-wrapper"
-      >
-        <a
-          href="#"
-        >
-          <div
-            class="img-responsive-wrapper"
-          >
-            <div
-              class="img-responsive"
+            <span
+              class="it-griditem-text-wrapper"
             >
-              <div
-                class="img-wrapper"
+              <span
+                class="it-griditem-text"
               >
-                <img
-                  alt="Alternative Text"
-                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                  title="Image Title"
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
                 />
-              </div>
-            </div>
-          </div>
-          <span
-            class="it-griditem-text-wrapper"
-          >
-            <span
-              class="it-griditem-text"
-            >
-              Didascalia
+              </svg>
             </span>
-            <svg
-              class="icon icon-sm"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                icon
-              </title>
-              <path
-                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-              />
-            </svg>
-          </span>
-        </a>
+          </a>
+        </div>
       </div>
-    </div>
-    <div
-      class="col-12 col-lg-4"
-    >
       <div
-        class="it-grid-item-wrapper it-grid-item-overlay"
+        class="col-12"
       >
-        <a
-          href="#"
+        <div
+          class="it-grid-item-wrapper"
         >
-          <div
-            class="img-responsive-wrapper"
+          <a
+            href="#"
           >
             <div
-              class="img-responsive"
+              class="img-responsive-wrapper"
             >
               <div
-                class="img-wrapper"
+                class="img-responsive"
               >
-                <img
-                  alt="Alternative Text"
-                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                  title="Image Title"
-                />
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/400x700/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
               </div>
             </div>
-          </div>
-          <span
-            class="it-griditem-text-wrapper"
-          >
             <span
-              class="it-griditem-text"
-            >
-              Didascalia
-            </span>
-            <svg
-              class="icon icon-sm"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                icon
-              </title>
-              <path
-                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-              />
-            </svg>
-          </span>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini GrigliaStandard 1`] = `
-<div>
-  <div
-    class="it-grid-list-wrapper"
-  >
-    <div
-      class="grid-row"
-    >
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
+              class="it-griditem-text-wrapper"
             >
-              <div
-                class="img-responsive"
+              <span
+                class="it-griditem-text"
               >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
           </a>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Masonry 1`] = `
-<div>
-  <div
-    class="it-grid-list-wrapper it-image-label-grid it-masonry"
-  >
-    <div
-      class="card-columns"
-    >
       <div
         class="col-12"
       >
@@ -34774,7 +34822,7 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
                 >
                   <img
                     alt="Alternative Text"
-                    src="https://via.placeholder.com/400x300/ebebeb/808080/?text=Immagine"
+                    src="https://via.placeholder.com/400x600/ebebeb/808080/?text=Immagine"
                     title="Image Title"
                   />
                 </div>
@@ -34880,7 +34928,7 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
                 >
                   <img
                     alt="Alternative Text"
-                    src="https://via.placeholder.com/400x700/ebebeb/808080/?text=Immagine"
+                    src="https://via.placeholder.com/400x400/ebebeb/808080/?text=Immagine"
                     title="Image Title"
                   />
                 </div>
@@ -35231,178 +35279,19 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
           </a>
         </div>
       </div>
-      <div
-        class="col-12"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/400x600/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-12"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-12"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/400x400/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Proporzionale 1`] = `
-<div>
-  <div
-    class="it-grid-list-wrapper it-quilted-grid"
-  >
-    <div
-      class="grid-row"
-    >
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Proporzionale 1`] = `
+<div>
+  <div
+    class="it-grid-list-wrapper it-quilted-grid"
+  >
+    <div
+      class="grid-row"
+    >
       <div
         class="col-12 col-md-6"
       >
@@ -35797,165 +35686,1556 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
         </div>
       </div>
       <div
-        class="col-6 col-lg-4"
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
+        >
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
+              >
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
+        >
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
+              >
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
+        >
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
+              >
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link _Esempi 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link _StatoAttivo 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="active list-item"
+        >
+          <span>
+            Link list 2 active
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link _StatoDisabilitato 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="disabled list-item"
+        >
+          <span>
+            Link list 2 disabled
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link CollapseExample 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right large medium list-item"
+          role="button"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <div
+        class="collapse"
+      >
+        <ul
+          class="link-sublist"
+        >
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 4 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 5 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 6 
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+          role="button"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2 
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <div
+        class="collapse"
+      >
+        <ul
+          class="link-sublist"
+        >
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 7 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 8 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 9 
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+          role="button"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <div
+        class="collapse"
+      >
+        <ul
+          class="link-sublist"
+        >
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 10 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 11 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 12 
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ConAvatar 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="active list-item"
+        >
+          <img
+            alt="avataralt"
+            class="avatar lg-size"
+            src="http://via.placeholder.com/40x40"
+            title="avatartitle"
+          />
+          <span>
+            Link list 1 active 
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <img
+            alt="avataralt"
+            class="avatar lg-size"
+            src="http://via.placeholder.com/40x40"
+            title="avatartitle"
+          />
+          <span>
+            Link list 2 
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="disabled list-item"
+        >
+          <img
+            alt="avataralt"
+            class="avatar lg-size"
+            src="http://via.placeholder.com/40x40"
+            title="avatartitle"
+          />
+          <span>
+            Link list 3 disabled 
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ConCheckbox 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="form-check-group form-check"
+          >
+            <input
+              aria-describedby="checkbox1Description"
+              checked=""
+              class="form-control"
+              id="checkbox1"
+              type="checkbox"
+              value=""
+            />
+            <label
+              class="form-check-label"
+              for="checkbox1"
+            >
+              Checkbox selezionato
+            </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="form-check-group form-check"
+          >
+            <input
+              aria-describedby="checkbox2Description"
+              class="form-control"
+              id="checkbox2"
+              type="checkbox"
+              value=""
+            />
+            <label
+              class="form-check-label"
+              for="checkbox2"
+            >
+              Checkbox non selezionato
+            </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div
+          class="disabled list-item"
+        >
+          <div
+            class="form-check-group form-check"
+          >
+            <input
+              aria-describedby="checkbox3Description"
+              class="form-control"
+              disabled=""
+              id="checkbox3"
+              type="checkbox"
+              value=""
+            />
+            <label
+              class="form-check-label"
+              for="checkbox3"
+            >
+              Checkbox disabilitato non selezionato
+            </label>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ConSwitch 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="toggles"
+          >
+            <label
+              class="form-check-label"
+            >
+              Label per toggle
+              <input
+                class="form-check-input"
+                type="checkbox"
+              />
+              <span
+                class="lever"
+              />
+            </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div
+          class="disabled list-item"
+        >
+          <div
+            class="toggles"
+          >
+            <label
+              class="form-check-label"
+            >
+              Label per disabled toggle
+              <input
+                class="form-check-input"
+                disabled=""
+                type="checkbox"
+              />
+              <span
+                class="lever"
+              />
+            </label>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ControlliComponent 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-left active list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+            <span>
+              Link list 1 active
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+            <span>
+              Link list 2
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left disabled list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+            <span>
+              Link list 3 disabled
+            </span>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ControlliSecondariComponent 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right active list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 active
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-right list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-right disabled list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 disabled
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link EsempioMultiline 1`] = `
+<div>
+  <div
+    class="link-list-wrapper multiline"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right active list-item"
+          href="#"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 active
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
+          </p>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="icon-right list-item"
+          href="#"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
+          </p>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="icon-right disabled list-item"
+          href="#"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 disabled
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
+          </p>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link HeaderEDividerConLink 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <div
+      class="link-list-heading"
+    >
+      <a
+        href="#"
+      >
+        Intestazione con link
+      </a>
+    </div>
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 4
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link HeaderEDividerNoLink 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <div
+      class="link-list-heading"
+    >
+      Intestazione senza link
+    </div>
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 4
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link NavigationComponentFixed 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right large medium list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 
+            </span>
+            <svg
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2 
+            </span>
+            <svg
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <ul
+        class="link-sublist"
+      >
+        <li>
+          <a
+            class="list-item"
+          >
+            <span>
+              Link list 4 
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            class="list-item"
+          >
+            <span>
+              Link list 5 
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            class="list-item"
+          >
+            <span>
+              Link list 6 
+            </span>
+          </a>
+        </li>
+      </ul>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 
+            </span>
+            <svg
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link PrimaryESecondaryAction 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-left active list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+            <span>
+              Link list 1 active
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+            <span>
+              Link list 2
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left disabled list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+            <span>
+              Link list 3 disabled
+            </span>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link Sizing 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <div
+      class="link-list-heading"
+    >
+      Intestazione senza link
+    </div>
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 4
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link TitoloLista 1`] = `
+<div>
+  <div
+    class="sticky-wrapper navbar-wrapper"
+  >
+    <nav
+      class="it-navscroll-wrapper it-top-navscroll navbar navbar-expand-lg"
+    >
+      <div
+        class="container-fluid"
       >
         <div
-          class="it-grid-item-wrapper"
+          class="menu-wrapper"
         >
-          <a
-            href="#"
+          <div
+            class="link-list-wrapper menu-link-list"
           >
-            <div
-              class="img-responsive-wrapper"
+            <h3>
+              Indice della pagina
+            </h3>
+            <ul
+              class="link-list"
             >
-              <div
-                class="img-responsive"
+              <li
+                class="nav-item"
               >
-                <div
-                  class="img-wrapper"
+                <a
+                  class="nav-link"
+                  href="#cos-e"
                 >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
+                  <span>
+                    Cos'è
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
+                <a
+                  class="nav-link"
+                  href="#luogo"
+                >
+                  <span>
+                    Luogo
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <div
-                  class="img-wrapper"
+                <a
+                  class="nav-link"
+                  href="#date-e-orari"
                 >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
+                  <span>
+                    Date e orari
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
+                <a
+                  class="nav-link"
+                  href="#costi"
+                >
+                  <span>
+                    Costi
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
+                <a
+                  class="nav-link"
+                  href="#documenti"
+                >
+                  <span>
+                    Documenti
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <div
-                  class="img-wrapper"
+                <a
+                  class="nav-link"
+                  href="#contatti"
                 >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
+                  <span>
+                    Contatti
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
+                <a
+                  class="nav-link"
+                  href="#appuntamenti"
+                >
+                  <span>
+                    Appuntamenti
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
+                <a
+                  class="nav-link"
+                  href="#ulteriori-informazioni"
+                >
+                  <span>
+                    Ulteriori informazioni
+                  </span>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
+    </nav>
   </div>
 </div>
 `;

From 08314c4313a6e970a4429d46d76532f52089cbe8 Mon Sep 17 00:00:00 2001
From: Virtute90 <matteo.ave@gmail.com>
Date: Thu, 4 Jul 2024 21:16:35 +0000
Subject: [PATCH 2/6] chore: updated node version

---
 .nvmrc       | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.nvmrc b/.nvmrc
index da2d3988d..2edeafb09 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-14
\ No newline at end of file
+20
\ No newline at end of file
diff --git a/package.json b/package.json
index bad8b20c6..2c78322e6 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "url": "git+https://github.com/italia/design-react-kit.git"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "scripts": {
     "start": "NODE_OPTIONS=--max_old_space_size=16384 npm run storybook:serve",

From 9860124396d471b1d654e6f693e3c5d94fc456be Mon Sep 17 00:00:00 2001
From: Virtute90 <32056724+Virtute90@users.noreply.github.com>
Date: Mon, 15 Jul 2024 09:10:49 +0200
Subject: [PATCH 3/6] fix: Thumbnav is a navigation component (#1081)

* fix: Thumbnav is a navigation component #1074

* test: update snapshot
---
 stories/Components/ThumbNav.stories.tsx    |    2 +-
 test/__snapshots__/Storybook.test.tsx.snap | 2322 ++++++++++----------
 2 files changed, 1162 insertions(+), 1162 deletions(-)

diff --git a/stories/Components/ThumbNav.stories.tsx b/stories/Components/ThumbNav.stories.tsx
index 1ec8f746c..831811386 100644
--- a/stories/Components/ThumbNav.stories.tsx
+++ b/stories/Components/ThumbNav.stories.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { ThumbNav, ThumbNavItem, ThumbNavProps } from '../../src';
 
 const meta: Meta<typeof ThumbNav> = {
-  title: "Documentazione/Componenti/ThumbNav",
+  title: "Documentazione/Menu di navigazione/ThumbNav",
   component: ThumbNav
 };
 
diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
index 667718cfb..6c7b30a4f 100644
--- a/test/__snapshots__/Storybook.test.tsx.snap
+++ b/test/__snapshots__/Storybook.test.tsx.snap
@@ -16059,1051 +16059,14 @@ exports[`Stories Snapshots Documentazione/Componenti/Tables TableThead 1`] = `
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav Esempio 1`] = `
-<div>
-  <ul
-    class="thumb-nav"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioAutoWidth 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-auto thumb-nav-auto-3"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 4"
-          src="https://picsum.photos/480/320?image=1040"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 5"
-          src="https://picsum.photos/480/320?image=1055"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 6"
-          src="https://picsum.photos/480/320?image=1057"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioAutoWidthFive 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Timeline Esempi 1`] = `
 <div>
-  <ul
-    class="thumb-nav thumb-nav-auto thumb-nav-auto-5"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 4"
-          src="https://picsum.photos/480/320?image=1040"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 5"
-          src="https://picsum.photos/480/320?image=1055"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 6"
-          src="https://picsum.photos/480/320?image=1057"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioBlackLayer 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-black"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioFixed 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-fixed"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 4"
-          src="https://picsum.photos/480/320?image=1040"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 5"
-          src="https://picsum.photos/480/320?image=1055"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 6"
-          src="https://picsum.photos/480/320?image=1057"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioNoZoom 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-nozoom"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioPrimaryLayer 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-primary"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioSmall 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-small"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioVerticale 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-vertical"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav Overlay 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-bottom"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav OverlayLeft 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-left"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav OverlayRight 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-right"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav OverlayTop 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-top"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/Timeline Esempi 1`] = `
-<div>
-  <div>
-    <div
-      class="it-timeline-wrapper"
-    >
-      <div
-        class="row"
+  <div>
+    <div
+      class="it-timeline-wrapper"
+    >
+      <div
+        class="row"
       >
         <div
           class="col-12"
@@ -32471,137 +31434,1174 @@ exports[`Stories Snapshots Documentazione/Menu di navigazione/Navscroll Posizion
       <div
         class="it-page-sections-container col-12 col-lg-8"
       >
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec congue eros. Maecenas sagittis commodo libero nec porta. Nunc semper velit venenatis ligula condimentum ultricies. In hac habitasse platea dictumst. In malesuada pharetra nulla, id aliquam metus egestas ut. Nulla sollicitudin cursus felis, eu sagittis ante porta id. Suspendisse pellentesque ex non sem tincidunt, aliquam rhoncus turpis maximus. Vivamus eget massa turpis. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer feugiat et massa nec rhoncus. Morbi vitae metus et sapien suscipit mattis vitae ac ex. Proin pharetra, sem vitae varius malesuada, risus tortor sodales arcu, eu aliquam lorem libero vel urna. Aliquam massa lacus, faucibus quis urna ac, pharetra pretium ex. In facilisis urna non urna luctus, a bibendum tortor facilisis. Mauris sed risus justo. In et erat fermentum eros hendrerit tempor. Quisque accumsan magna ac risus ultricies, vel condimentum ipsum accumsan. Proin blandit mauris sed sodales sollicitudin.
-        </p>
-        <h2
-          class="it-page-section"
-          id="1"
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec congue eros. Maecenas sagittis commodo libero nec porta. Nunc semper velit venenatis ligula condimentum ultricies. In hac habitasse platea dictumst. In malesuada pharetra nulla, id aliquam metus egestas ut. Nulla sollicitudin cursus felis, eu sagittis ante porta id. Suspendisse pellentesque ex non sem tincidunt, aliquam rhoncus turpis maximus. Vivamus eget massa turpis. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer feugiat et massa nec rhoncus. Morbi vitae metus et sapien suscipit mattis vitae ac ex. Proin pharetra, sem vitae varius malesuada, risus tortor sodales arcu, eu aliquam lorem libero vel urna. Aliquam massa lacus, faucibus quis urna ac, pharetra pretium ex. In facilisis urna non urna luctus, a bibendum tortor facilisis. Mauris sed risus justo. In et erat fermentum eros hendrerit tempor. Quisque accumsan magna ac risus ultricies, vel condimentum ipsum accumsan. Proin blandit mauris sed sodales sollicitudin.
+        </p>
+        <h2
+          class="it-page-section"
+          id="1"
+        >
+          Introduzione
+        </h2>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="1_1"
+        >
+          Nested item 1.1
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="1_1_1"
+        >
+          Nested item 1.1.1
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="1_1_2"
+        >
+          Nested item 1.1.2
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="1_1_3"
+        >
+          Nested item 1.1.3
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="1_2"
+        >
+          Nested item 1.2
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="1_3"
+        >
+          Nested item 1.3
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h2
+          class="it-page-section"
+          id="2"
+        >
+          Introduzione 2
+        </h2>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="2_1"
+        >
+          Nested item 2.1
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="2_1_1"
+        >
+          Nested item 2.1.1
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="2_1_2"
+        >
+          Nested item 2.1.2
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="2_1_3"
+        >
+          Nested item 2.1.3
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="2_2"
+        >
+          Nested item 2.2
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="2_3"
+        >
+          Nested item 2.3
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav Esempio 1`] = `
+<div>
+  <ul
+    class="thumb-nav"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioAutoWidth 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-auto thumb-nav-auto-3"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 4"
+          src="https://picsum.photos/480/320?image=1040"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 5"
+          src="https://picsum.photos/480/320?image=1055"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 6"
+          src="https://picsum.photos/480/320?image=1057"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioAutoWidthFive 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-auto thumb-nav-auto-5"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 4"
+          src="https://picsum.photos/480/320?image=1040"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 5"
+          src="https://picsum.photos/480/320?image=1055"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 6"
+          src="https://picsum.photos/480/320?image=1057"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioBlackLayer 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-black"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioFixed 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-fixed"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 4"
+          src="https://picsum.photos/480/320?image=1040"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 5"
+          src="https://picsum.photos/480/320?image=1055"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 6"
+          src="https://picsum.photos/480/320?image=1057"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioNoZoom 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-nozoom"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioPrimaryLayer 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-primary"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioSmall 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-small"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioVerticale 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-vertical"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav Overlay 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-bottom"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Introduzione
-        </h2>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="1_1"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="1_1_1"
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1.1
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="1_1_2"
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1.2
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="1_1_3"
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav OverlayLeft 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-left"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1.3
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="1_2"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
+        >
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
+        >
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.2
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="1_3"
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav OverlayRight 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-right"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.3
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h2
-          class="it-page-section"
-          id="2"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
         >
-          Introduzione 2
-        </h2>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="2_1"
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="2_1_1"
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1.1
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="2_1_2"
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav OverlayTop 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-top"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1.2
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="2_1_3"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1.3
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="2_2"
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.2
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="2_3"
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.3
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-      </div>
-    </div>
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
   </div>
 </div>
 `;

From cd61399d6d16a027961817c2e3a79d3398d1732e Mon Sep 17 00:00:00 2001
From: Virtute90 <32056724+Virtute90@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:12:31 +0200
Subject: [PATCH 4/6] deps: removed unused dependencies

Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
---
 package.json |  11 --
 yarn.lock    | 384 +++------------------------------------------------
 2 files changed, 21 insertions(+), 374 deletions(-)

diff --git a/package.json b/package.json
index bad8b20c6..a8d579922 100644
--- a/package.json
+++ b/package.json
@@ -76,15 +76,8 @@
     "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint:staged"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.20",
-    "@babel/helper-remap-async-to-generator": "^7.18.9",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.24.1",
-    "@chromatic-com/storybook": "^1.2.25",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
-    "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^8.0.5",
     "@storybook/addon-docs": "^8.0.5",
     "@storybook/addon-essentials": "^8.0.5",
@@ -95,18 +88,14 @@
     "@storybook/react": "^8.0.5",
     "@storybook/react-vite": "^8.0.5",
     "@storybook/test": "^8.0.5",
-    "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16",
-    "@testing-library/react-hooks": "^8.0.1",
     "@types/is-number": "^7.0.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-polyfill-corejs3": "^0.10.4",
     "bootstrap-italia": "^2.8.8",
     "browserslist-config-design-italia": "^1.0.0",
     "eslint": "^8.57.0",
diff --git a/yarn.lock b/yarn.lock
index b37033cd3..f5e95f3ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -30,12 +30,12 @@
     "@babel/highlight" "^7.24.7"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.24.7":
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.7.tgz#d23bbea508c3883ba8251fb4164982c36ea577ed"
   integrity sha512-qJzAIcv03PyaWqxRgO4mSU3lihncDT296vnyuE2O8uA4w3UHWI4S3hgeZd1L8W1Bft40w9JxJ2b412iDUFFRhw==
 
-"@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.18.9", "@babel/core@^7.21.3", "@babel/core@^7.22.20", "@babel/core@^7.23.0", "@babel/core@^7.23.9", "@babel/core@^7.24.4":
+"@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.18.9", "@babel/core@^7.23.0", "@babel/core@^7.23.9", "@babel/core@^7.24.4":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.7.tgz#b676450141e0b52a3d43bc91da86aa608f950ac4"
   integrity sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==
@@ -75,7 +75,7 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.24.7":
+"@babel/helper-annotate-as-pure@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab"
   integrity sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==
@@ -90,7 +90,7 @@
     "@babel/traverse" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.24.7":
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.7.tgz#4eb6c4a80d6ffeac25ab8cd9a21b5dfa48d503a9"
   integrity sha512-ctSdRHBi20qWOfy27RUb4Fhp07KSJ3sXcuSvTrXrc4aG8NSYDo1ici3Vhg9bg69y5bj0Mr1lh0aeEgTvc12rMg==
@@ -101,7 +101,7 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0", "@babel/helper-create-class-features-plugin@^7.24.7":
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.7.tgz#2eaed36b3a1c11c53bdf80d53838b293c52f5b3b"
   integrity sha512-kTkaDl7c9vO80zeX1rJxnuRpEsD5tA81yh11X1gQo+PhSti3JS+7qeZo9U4RHobKRiFPKaGK3svUAeb8D0Q7eg==
@@ -197,7 +197,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.7.tgz#98c84fe6fe3d0d3ae7bfc3a5e166a46844feb2a0"
   integrity sha512-Rq76wjt7yz9AAc1KnlRKNAi/dMSVWgDRx43FHoJEbcYU6xOWaE2dVPwcdTukJrjxS65GITyfbvEYHvkirZ6uEg==
 
-"@babel/helper-remap-async-to-generator@^7.18.9", "@babel/helper-remap-async-to-generator@^7.24.7":
+"@babel/helper-remap-async-to-generator@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.24.7.tgz#b3f0f203628522713849d49403f1a414468be4c7"
   integrity sha512-9pKLcTlZ92hNZMQfGCHImUpDOlAgkkpqalWEeftW5FBya75k8Li2ilerxkM/uBEj01iBZXcCIB/bwvDYgWyibA==
@@ -351,17 +351,6 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
-  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
-  dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.7"
-
 "@babel/plugin-proposal-optional-chaining@^7.16.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
@@ -384,16 +373,6 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
   integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
-"@babel/plugin-proposal-private-property-in-object@^7.21.11":
-  version "7.21.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c"
-  integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -837,7 +816,7 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.24.7":
+"@babel/plugin-transform-parameters@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.7.tgz#5881f0ae21018400e320fc7eb817e529d1254b68"
   integrity sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==
@@ -869,13 +848,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/plugin-transform-react-constant-elements@^7.21.3":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.7.tgz#b85e8f240b14400277f106c9c9b585d9acf608a1"
-  integrity sha512-7LidzZfUXyfZ8/buRW6qIIHBY8wAZ1OrY9c/wTr8YhZ6vMPo+Uc/CVFLYY1spZrEQlD4w5u8wjqk5NQ3OVqQKA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
 "@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.7.tgz#9caff79836803bc666bcfe210aeb6626230c293b"
@@ -1013,7 +985,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.24.7"
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/preset-env@^7.16.4", "@babel/preset-env@^7.20.2", "@babel/preset-env@^7.24.4":
+"@babel/preset-env@^7.16.4", "@babel/preset-env@^7.24.4":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.7.tgz#ff067b4e30ba4a72f225f12f123173e77b987f37"
   integrity sha512-1YZNsc+y6cTvWlDHidMBsQZrZfEFjRIo/BZCT906PMdzOyXtSLTgqGdrpcuTDCXyd11Am5uQULtDIcCfnTc8fQ==
@@ -1118,7 +1090,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.16.0", "@babel/preset-react@^7.18.6", "@babel/preset-react@^7.24.1":
+"@babel/preset-react@^7.16.0":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.24.7.tgz#480aeb389b2a798880bf1f889199e3641cbb22dc"
   integrity sha512-AAH4lEkpmzFWrGVlHaxJB7RLH21uPQ9+He+eFLWHmF9IuFQVugz8eAsamaW0DXRrTfco5zj1wWtpdcXJUOfsag==
@@ -1130,7 +1102,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.24.7"
     "@babel/plugin-transform-react-pure-annotations" "^7.24.7"
 
-"@babel/preset-typescript@^7.16.0", "@babel/preset-typescript@^7.21.0", "@babel/preset-typescript@^7.23.0":
+"@babel/preset-typescript@^7.16.0", "@babel/preset-typescript@^7.23.0":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.24.7.tgz#66cd86ea8f8c014855671d5ea9a737139cbbfef1"
   integrity sha512-SyXRe3OdWwIwalxDg5UtJnJQO+YPcTfwiIY2B0Xlddh9o7jpWLvv8X1RthIeDOxQ+O1ML5BLPCONToObyVQVuQ==
@@ -1189,7 +1161,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.24.0", "@babel/types@^7.24.7", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.24.0", "@babel/types@^7.24.7", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.7.tgz#6027fe12bc1aa724cd32ab113fb7f1988f1f66f2"
   integrity sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==
@@ -1208,17 +1180,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@chromatic-com/storybook@^1.2.25":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@chromatic-com/storybook/-/storybook-1.6.0.tgz#a55233e098e824f83fcfb1d730d56694249a969e"
-  integrity sha512-6sHj0l194KMBIZ0D5SeJ+Ys+zslehKHcC2d6Hd/YEn4cCl7p9mLuxrZjvf8xharGKy8vf9Q1tKrU2YdldzUBoQ==
-  dependencies:
-    chromatic "^11.4.0"
-    filesize "^10.0.12"
-    jsonfile "^6.1.0"
-    react-confetti "^6.1.0"
-    strip-ansi "^7.1.0"
-
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -2149,16 +2110,7 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
-"@rollup/plugin-url@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-url/-/plugin-url-8.0.2.tgz#aab4e209e9e012f65582bd99eb80b3bbdfe15afb"
-  integrity sha512-5yW2LP5NBEgkvIRSSEdJkmxe5cUNZKG3eenKtfJvSkxVm/xTTu7w+ayBtNwhozl1ZnTUCU0xFaRQR+cBl2H7TQ==
-  dependencies:
-    "@rollup/pluginutils" "^5.0.1"
-    make-dir "^3.1.0"
-    mime "^3.0.0"
-
-"@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.0.2":
+"@rollup/pluginutils@^5.0.2":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
@@ -2935,113 +2887,6 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
-"@svgr/babel-plugin-add-jsx-attribute@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"
-  integrity sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==
-
-"@svgr/babel-plugin-remove-jsx-attribute@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz#69177f7937233caca3a1afb051906698f2f59186"
-  integrity sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==
-
-"@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz#c2c48104cfd7dcd557f373b70a56e9e3bdae1d44"
-  integrity sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==
-
-"@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz#8fbb6b2e91fa26ac5d4aa25c6b6e4f20f9c0ae27"
-  integrity sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==
-
-"@svgr/babel-plugin-svg-dynamic-title@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz#1d5ba1d281363fc0f2f29a60d6d936f9bbc657b0"
-  integrity sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==
-
-"@svgr/babel-plugin-svg-em-dimensions@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz#35e08df300ea8b1d41cb8f62309c241b0369e501"
-  integrity sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==
-
-"@svgr/babel-plugin-transform-react-native-svg@8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz#90a8b63998b688b284f255c6a5248abd5b28d754"
-  integrity sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==
-
-"@svgr/babel-plugin-transform-svg-component@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz#013b4bfca88779711f0ed2739f3f7efcefcf4f7e"
-  integrity sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==
-
-"@svgr/babel-preset@8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-8.1.0.tgz#0e87119aecdf1c424840b9d4565b7137cabf9ece"
-  integrity sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==
-  dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute" "8.0.0"
-    "@svgr/babel-plugin-remove-jsx-attribute" "8.0.0"
-    "@svgr/babel-plugin-remove-jsx-empty-expression" "8.0.0"
-    "@svgr/babel-plugin-replace-jsx-attribute-value" "8.0.0"
-    "@svgr/babel-plugin-svg-dynamic-title" "8.0.0"
-    "@svgr/babel-plugin-svg-em-dimensions" "8.0.0"
-    "@svgr/babel-plugin-transform-react-native-svg" "8.1.0"
-    "@svgr/babel-plugin-transform-svg-component" "8.0.0"
-
-"@svgr/core@8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-8.1.0.tgz#41146f9b40b1a10beaf5cc4f361a16a3c1885e88"
-  integrity sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==
-  dependencies:
-    "@babel/core" "^7.21.3"
-    "@svgr/babel-preset" "8.1.0"
-    camelcase "^6.2.0"
-    cosmiconfig "^8.1.3"
-    snake-case "^3.0.4"
-
-"@svgr/hast-util-to-babel-ast@8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz#6952fd9ce0f470e1aded293b792a2705faf4ffd4"
-  integrity sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==
-  dependencies:
-    "@babel/types" "^7.21.3"
-    entities "^4.4.0"
-
-"@svgr/plugin-jsx@8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz#96969f04a24b58b174ee4cd974c60475acbd6928"
-  integrity sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==
-  dependencies:
-    "@babel/core" "^7.21.3"
-    "@svgr/babel-preset" "8.1.0"
-    "@svgr/hast-util-to-babel-ast" "8.0.0"
-    svg-parser "^2.0.4"
-
-"@svgr/plugin-svgo@8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz#b115b7b967b564f89ac58feae89b88c3decd0f00"
-  integrity sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==
-  dependencies:
-    cosmiconfig "^8.1.3"
-    deepmerge "^4.3.1"
-    svgo "^3.0.2"
-
-"@svgr/rollup@^8.1.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@svgr/rollup/-/rollup-8.1.0.tgz#2c8e09655336cda4b7843799a5d2a5860300b030"
-  integrity sha512-0XR1poYvPQoPpmfDYLEqUGu5ePAQ4pdgN3VFsZBNAeze7qubVpsIY1o1R6PZpKep/DKu33GSm2NhwpCLkMs2Cw==
-  dependencies:
-    "@babel/core" "^7.21.3"
-    "@babel/plugin-transform-react-constant-elements" "^7.21.3"
-    "@babel/preset-env" "^7.20.2"
-    "@babel/preset-react" "^7.18.6"
-    "@babel/preset-typescript" "^7.21.0"
-    "@rollup/pluginutils" "^5.0.2"
-    "@svgr/core" "8.1.0"
-    "@svgr/plugin-jsx" "8.1.0"
-    "@svgr/plugin-svgo" "8.1.0"
-
 "@testing-library/dom@10.1.0":
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.1.0.tgz#2d073e49771ad614da999ca48f199919e5176fb6"
@@ -3084,14 +2929,6 @@
     lodash "^4.17.21"
     redent "^3.0.0"
 
-"@testing-library/react-hooks@^8.0.1":
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
-  integrity sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    react-error-boundary "^3.1.0"
-
 "@testing-library/react@^16":
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.0.tgz#0a1e0c7a3de25841c3591b8cb7fb0cf0c0a27321"
@@ -3109,11 +2946,6 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@trysound/sax@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
-  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
-
 "@types/acorn@^4.0.0":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
@@ -4155,13 +3987,6 @@ babel-jest@^29.7.0:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-plugin-dynamic-import-node@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
-  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
-  dependencies:
-    object.assign "^4.1.0"
-
 babel-plugin-istanbul@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
@@ -4328,11 +4153,6 @@ body-parser@1.20.2:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
-boolbase@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
-
 bootstrap-italia@^2.8.8:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/bootstrap-italia/-/bootstrap-italia-2.8.8.tgz#e9a9327c9e9aecfa418e8c40e132035a70fd70ee"
@@ -4621,11 +4441,6 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chromatic@^11.4.0:
-  version "11.5.4"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.5.4.tgz#57e71f8a5ad54d10656da53c1761198067c189b5"
-  integrity sha512-+J+CopeUSyGUIQJsU6X7CfvSmeVBs0j6LZ9AgF4+XTjI4pFmUiUXsTc00rH9x9W1jCppOaqDXv2kqJJXGDK3mA==
-
 ci-info@^3.2.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
@@ -4778,11 +4593,6 @@ commander@^6.2.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
-  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
-
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -4927,7 +4737,7 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmiconfig@^8.1.3, cosmiconfig@^8.3.6:
+cosmiconfig@^8.3.6:
   version "8.3.6"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz#060a2b871d66dba6c8538ea1118ba1ac16f5fae3"
   integrity sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==
@@ -4966,50 +4776,11 @@ crypto-random-string@^4.0.0:
   dependencies:
     type-fest "^1.0.1"
 
-css-select@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
-  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^6.1.0"
-    domhandler "^5.0.2"
-    domutils "^3.0.1"
-    nth-check "^2.0.1"
-
-css-tree@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
-  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
-  dependencies:
-    mdn-data "2.0.30"
-    source-map-js "^1.0.1"
-
-css-tree@~2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
-  integrity sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==
-  dependencies:
-    mdn-data "2.0.28"
-    source-map-js "^1.0.1"
-
-css-what@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
-  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
-
 css.escape@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
-csso@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
-  integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==
-  dependencies:
-    css-tree "~2.2.0"
-
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -5172,7 +4943,7 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.2.2, deepmerge@^4.3.1:
+deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -5336,25 +5107,11 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-dom-serializer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
-  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
-  dependencies:
-    domelementtype "^2.3.0"
-    domhandler "^5.0.2"
-    entities "^4.2.0"
-
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
-domelementtype@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
-  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
-
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -5362,30 +5119,6 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
-domhandler@^5.0.2, domhandler@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
-  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
-  dependencies:
-    domelementtype "^2.3.0"
-
-domutils@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
-  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
-  dependencies:
-    dom-serializer "^2.0.0"
-    domelementtype "^2.3.0"
-    domhandler "^5.0.3"
-
-dot-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
-  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-
 dot-prop@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -5467,7 +5200,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
-entities@^4.2.0, entities@^4.4.0:
+entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -6245,11 +5978,6 @@ filelist@^1.0.4:
   dependencies:
     minimatch "^5.0.1"
 
-filesize@^10.0.12:
-  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.1.2.tgz#33bb71c5c134102499f1bc36e6f2863137f6cb0c"
-  integrity sha512-Dx770ai81ohflojxhU+oG+Z2QGvKdYxgEr9OSA8UVrqhwNHjfH9A8f5NKfg83fEH8ZFA5N5llJo5T3PIoZ4CRA==
-
 fill-range@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
@@ -7904,7 +7632,7 @@ json5@^2.2.2, json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jsonfile@^6.0.1, jsonfile@^6.1.0:
+jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
   integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
@@ -8185,13 +7913,6 @@ loupe@^2.3.6, loupe@^2.3.7:
   dependencies:
     get-func-name "^2.0.1"
 
-lower-case@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
-  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
-  dependencies:
-    tslib "^2.0.3"
-
 lru-cache@^10.2.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.3.0.tgz#4a4aaf10c84658ab70f79a85a9a3f1e1fb11196b"
@@ -8247,7 +7968,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.2, make-dir@^3.1.0:
+make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -8418,16 +8139,6 @@ mdast-util-to-string@^4.0.0:
   dependencies:
     "@types/mdast" "^4.0.0"
 
-mdn-data@2.0.28:
-  version "2.0.28"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
-  integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==
-
-mdn-data@2.0.30:
-  version "2.0.30"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
-  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -8816,11 +8527,6 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
-  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -8995,14 +8701,6 @@ neo-async@^2.5.0, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-no-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
-  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
-  dependencies:
-    lower-case "^2.0.2"
-    tslib "^2.0.3"
-
 node-dir@^0.1.17:
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
@@ -9083,13 +8781,6 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
-nth-check@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
-  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
-  dependencies:
-    boolbase "^1.0.0"
-
 nwsapi@^2.2.2:
   version "2.2.10"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.10.tgz#0b77a68e21a0b483db70b11fad055906e867cda8"
@@ -9130,7 +8821,7 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.0, object.assign@^4.1.4, object.assign@^4.1.5:
+object.assign@^4.1.4, object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
   integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
@@ -9785,13 +9476,6 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
-react-error-boundary@^3.1.0:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
-  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 react-fast-compare@^3.0.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
@@ -10458,15 +10142,7 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
-snake-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
-  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"
-
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -10727,7 +10403,7 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -10817,24 +10493,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-svg-parser@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
-  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
-
-svgo@^3.0.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8"
-  integrity sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==
-  dependencies:
-    "@trysound/sax" "0.2.0"
-    commander "^7.2.0"
-    css-select "^5.1.0"
-    css-tree "^2.3.1"
-    css-what "^6.1.0"
-    csso "^5.0.5"
-    picocolors "^1.0.0"
-
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -11100,7 +10758,7 @@ tslib@^1.13.0, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.6.2:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==

From e071581ac2380dfbbc69af86871f1da0fc248f60 Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Thu, 1 Aug 2024 13:51:32 +0200
Subject: [PATCH 5/6] chore(ci): update node version

---
 .github/workflows/check-tree-shakeability.yml | 2 +-
 .github/workflows/ci.yml                      | 2 +-
 .github/workflows/commit-lint.yml             | 2 +-
 .github/workflows/publish-release.yml         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/check-tree-shakeability.yml b/.github/workflows/check-tree-shakeability.yml
index 060404b9d..040d79b99 100644
--- a/.github/workflows/check-tree-shakeability.yml
+++ b/.github/workflows/check-tree-shakeability.yml
@@ -11,7 +11,7 @@ jobs:
       - name: Setup Node.js with Yarn cache
         uses: actions/setup-node@v2
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'yarn'
 
       - name: Install dependencies
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2049558a2..d28303ed9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -14,7 +14,7 @@ jobs:
       - name: Setup Node.js with Yarn cache
         uses: actions/setup-node@v2
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'yarn'
 
       - name: Install dependencies
diff --git a/.github/workflows/commit-lint.yml b/.github/workflows/commit-lint.yml
index 6bfc99bf6..5094b29d1 100644
--- a/.github/workflows/commit-lint.yml
+++ b/.github/workflows/commit-lint.yml
@@ -15,6 +15,6 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - run: yarn add @commitlint/cli
       - run: npx commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD
diff --git a/.github/workflows/publish-release.yml b/.github/workflows/publish-release.yml
index 12ebac0a7..0f809ae22 100644
--- a/.github/workflows/publish-release.yml
+++ b/.github/workflows/publish-release.yml
@@ -12,7 +12,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
       - name: git config
         run: |

From 55ea4a955914e31b9ac2109484f41a329eeb3356 Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Thu, 1 Aug 2024 14:07:18 +0200
Subject: [PATCH 6/6] chore(ci): update node and checkout actions

---
 .github/workflows/check-tree-shakeability.yml | 4 ++--
 .github/workflows/ci.yml                      | 4 ++--
 .github/workflows/commit-lint.yml             | 4 ++--
 .github/workflows/pc-update.yml               | 2 +-
 .github/workflows/publish-release.yml         | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/check-tree-shakeability.yml b/.github/workflows/check-tree-shakeability.yml
index 040d79b99..68cf86333 100644
--- a/.github/workflows/check-tree-shakeability.yml
+++ b/.github/workflows/check-tree-shakeability.yml
@@ -7,9 +7,9 @@ jobs:
       pull-requests: write
     concurrency: ci-treeshake-${{ github.ref }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Setup Node.js with Yarn cache
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
           cache: 'yarn'
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d28303ed9..8d220cd55 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,9 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     concurrency: ci-test-${{ github.ref }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Setup Node.js with Yarn cache
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
           cache: 'yarn'
diff --git a/.github/workflows/commit-lint.yml b/.github/workflows/commit-lint.yml
index 5094b29d1..ed750cd12 100644
--- a/.github/workflows/commit-lint.yml
+++ b/.github/workflows/commit-lint.yml
@@ -10,10 +10,10 @@ jobs:
   lint-commits:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
       - run: yarn add @commitlint/cli
diff --git a/.github/workflows/pc-update.yml b/.github/workflows/pc-update.yml
index cac69934e..8579b84c1 100644
--- a/.github/workflows/pc-update.yml
+++ b/.github/workflows/pc-update.yml
@@ -10,7 +10,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Check publiccode.yml version and date ✅
diff --git a/.github/workflows/publish-release.yml b/.github/workflows/publish-release.yml
index 0f809ae22..8074812f7 100644
--- a/.github/workflows/publish-release.yml
+++ b/.github/workflows/publish-release.yml
@@ -7,10 +7,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: 'https://registry.npmjs.org'