@lab-anssi/ui-kit 1.25.0 → 1.25.2

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheDroite.svelte.d.ts

@@ -1,26 +0,0 @@
-export default IconeFlecheDroite;
-type IconeFlecheDroite = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const IconeFlecheDroite: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheGauche.svelte

@@ -1,12 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z"
-    fill="#042794"
-  />
-</svg>
-
-<style>svg path {
-  fill: var(--brique-carrousel-bouton-action-texte-couleur);
-}</style>

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheGauche.svelte.d.ts

@@ -1,26 +0,0 @@
-export default IconeFlecheGauche;
-type IconeFlecheGauche = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const IconeFlecheGauche: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/lab/vitrines-produits/briques/LecteurVideo.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">let { source, sourceSousTitres, imageDeCouverture = "", classe = "" } = $props();
-</script>
-
-<video controls class={classe} src={source} poster={imageDeCouverture}>
-  <source src={source} type="video/mp4" />
-  <track src={sourceSousTitres} kind="captions" srclang="fr" label="Français" />
-  Votre navigateur ne supporte pas la fonctionnalité de lecture de vidéos.
-</video>
-
-<style>video {
-  width: 100%;
-  max-width: 792px;
-  max-height: 446px;
-}</style>

package/dist/lab/vitrines-produits/briques/LecteurVideo.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    source: string;
-    sourceSousTitres: string;
-    imageDeCouverture?: string;
-    classe?: string;
-}
-declare const LecteurVideo: import("svelte").Component<Props, {}, "">;
-type LecteurVideo = ReturnType<typeof LecteurVideo>;
-export default LecteurVideo;

package/dist/lab/vitrines-produits/briques/PresentationANSSI.svelte

@@ -1,138 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-presentation-anssi",
-  }}
-/>
-
-<script lang="ts">import Brique from "./Brique.svelte";
-import { srcAsset } from "../../../assets/assets.js";
-import LienExterne from "../../icones/LienExterne.svelte";
-</script>
-
-<Brique variation="transparent">
-  <div class="presentation-anssi">
-    <div class="logo-anssi">
-      <img src={srcAsset("/illustrations/logo-anssi.svg")} alt="Logo de l'ANSSI" />
-    </div>
-    <div class="contenu">
-      <h2>Qu'est ce que l'ANSSI ?</h2>
-      <p>
-        Créée en 2009, l’Agence nationale de la sécurité des systèmes d’information (ANSSI) est
-        l’autorité nationale en matière de cybersécurité et de cyberdéfense.
-        <br />
-        <br />
-        <b>
-          Son action pour la protection de la Nation face aux cyberattaques se traduit en quatre
-          grandes missions : défendre, connaître, partager, accompagner.
-        </b>
-      </p>
-    </div>
-    <div class="encart-action">
-      <a class="action" role="button" href="https://cyber.gouv.fr/" target="_blank">
-        En savoir plus
-        <LienExterne />
-      </a>
-    </div>
-  </div>
-</Brique>
-
-<style>.presentation-anssi {
-  color: #3a3a3a;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "logo-anssi" "contenu" "encart-action";
-  row-gap: 24px;
-  padding: 16px 16px;
-}
-@media (min-width: 932px) {
-  .presentation-anssi {
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas: "contenu logo-anssi" "encart-action logo-anssi";
-  }
-}
-.presentation-anssi .logo-anssi {
-  grid-area: logo-anssi;
-  display: flex;
-  justify-content: center;
-}
-@media (min-width: 932px) {
-  .presentation-anssi .logo-anssi {
-    align-items: center;
-  }
-}
-.presentation-anssi .logo-anssi img {
-  max-width: 140px;
-  max-height: 140px;
-}
-.presentation-anssi .contenu {
-  text-align: center;
-  grid-area: contenu;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-}
-@media (min-width: 932px) {
-  .presentation-anssi .contenu {
-    text-align: start;
-    align-items: start;
-  }
-}
-.presentation-anssi .contenu h2 {
-  color: var(--brique-presentation-anssi-titre-couleur);
-  font-size: 1.75rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 2.25rem;
-  margin: 0;
-}
-.presentation-anssi .contenu p {
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5rem;
-  margin: 0;
-}
-.presentation-anssi .encart-action {
-  grid-area: encart-action;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-@media (min-width: 932px) {
-  .presentation-anssi .encart-action {
-    justify-content: start;
-  }
-}
-.presentation-anssi .encart-action a[role=button] {
-  width: 100%;
-  text-decoration: none;
-  font-family: Marianne, sans-serif;
-  padding: 8px 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 24px;
-  border-radius: 4px;
-}
-@media (min-width: 576px) {
-  .presentation-anssi .encart-action a[role=button] {
-    width: fit-content;
-  }
-}
-.presentation-anssi .encart-action a[role=button].action {
-  background-color: var(--brique-presentation-anssi-bouton-background);
-  color: var(--brique-presentation-anssi-bouton-texte);
-  border: 1px solid var(--brique-presentation-anssi-bouton-texte);
-  cursor: pointer;
-}
-.presentation-anssi .encart-action a[role=button].action:active {
-  background-color: var(--brique-presentation-anssi-bouton-background-active);
-}
-.presentation-anssi .encart-action a[role=button].action:hover {
-  background-color: var(--brique-presentation-anssi-bouton-background-hover);
-}</style>

package/dist/lab/vitrines-produits/briques/PresentationANSSI.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PresentationAnssi: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PresentationAnssi = InstanceType<typeof PresentationAnssi>;
-export default PresentationAnssi;

package/dist/lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte

@@ -1,137 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-brique-rejoindre-la-communaute",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      raisons: { reflect: false, type: "Array", attribute: "raisons" },
-      action: { reflect: false, type: "Object", attribute: "action" },
-      illustration: { reflect: false, type: "Object", attribute: "illustration" },
-    },
-  }}
-/>
-
-<script lang="ts">import Brique from "./Brique.svelte";
-let { titre, raisons, action = void 0, illustration } = $props();
-</script>
-
-<Brique variation="primaire">
-  <div class="grille-contenu">
-    <div class="illustration">
-      <img src={illustration.lien} alt={illustration.alt} />
-    </div>
-    <div class="contenu">
-      <h2>{titre}</h2>
-      <p>
-        En tant que <b>membre de la communauté</b>, vous pourrez :
-      </p>
-      <ul>
-        {#each raisons as raison, idx (idx)}
-          <li>{raison}</li>
-        {/each}
-      </ul>
-    </div>
-    <div class="action">
-      {#if action}
-        <a role="button" href={action.lien} target="_blank">
-          {action.titre}
-        </a>
-      {/if}
-    </div>
-  </div>
-</Brique>
-
-<style>.grille-contenu {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "contenu" "illustration" "action";
-  row-gap: 32px;
-}
-@media (min-width: 932px) {
-  .grille-contenu {
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas: "illustration contenu" "illustration action";
-    row-gap: 0;
-    column-gap: 24px;
-  }
-}
-.grille-contenu .contenu {
-  grid-area: contenu;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
-@media (min-width: 932px) {
-  .grille-contenu .contenu {
-    justify-content: center;
-  }
-}
-.grille-contenu .contenu h2 {
-  font-size: 1.75rem;
-  line-height: 2.25rem;
-  font-weight: 700;
-  word-break: break-word;
-  margin: 0;
-}
-.grille-contenu .contenu p {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  margin: 0;
-}
-.grille-contenu .action {
-  grid-area: action;
-}
-.grille-contenu .action a[role=button] {
-  display: flex;
-  justify-content: center;
-  text-decoration: none;
-  font-family: Marianne, sans-serif;
-  padding: 8px 16px;
-  max-width: 100%;
-  text-align: center;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 24px;
-  border-radius: 4px;
-  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background);
-  color: var(--brique-contenu-deux-colonnes-action-bouton-texte);
-  border: none;
-  cursor: pointer;
-}
-.grille-contenu .action a[role=button]:active {
-  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-active);
-  box-shadow: none;
-  border: none;
-}
-.grille-contenu .action a[role=button]:hover {
-  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-hover);
-  box-shadow: none;
-  border: none;
-}
-@media (min-width: 576px) {
-  .grille-contenu .action a[role=button] {
-    max-width: unset;
-    width: fit-content;
-  }
-}
-.grille-contenu .illustration {
-  grid-area: illustration;
-}
-.grille-contenu .illustration img {
-  width: 204px;
-  height: 157px;
-  display: flex;
-  margin: 0 auto 0 auto;
-}
-@media (min-width: 576px) {
-  .grille-contenu .illustration img {
-    width: 364px;
-    height: 282px;
-  }
-}
-@media (min-width: 932px) {
-  .grille-contenu .illustration img {
-    width: 364px;
-    height: 282px;
-  }
-}</style>

package/dist/lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Action, Image } from "../../../types";
-interface Props {
-    titre: string;
-    raisons: string[];
-    action?: Action | undefined;
-    illustration: Image;
-}
-declare const RejoindreLaCommunaute: import("svelte").Component<Props, {}, "">;
-type RejoindreLaCommunaute = ReturnType<typeof RejoindreLaCommunaute>;
-export default RejoindreLaCommunaute;

package/dist/lab/vitrines-produits/briques/Tuile.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">let { titre, illustration, contenu, position = null } = $props();
-</script>
-
-<div class="tuile {position ?? ''}">
-  <div class="conteneur-image">
-    <img src={illustration.lien} alt={illustration.alt} />
-  </div>
-  <p>{titre}</p>
-  <span>{contenu}</span>
-</div>
-
-<style>.tuile {
-  --couleur-texte: #000000;
-  border-radius: 8px;
-  border: 1px solid #ddd;
-  background: #fff;
-  padding: 32px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-  color: var(--couleur-texte);
-  min-width: 212px;
-  box-sizing: border-box;
-  scroll-snap-align: center;
-  flex-shrink: 0;
-  width: calc(100vw - 60px);
-  max-width: 384px;
-}
-.tuile.premiere {
-  margin-left: var(--espacement);
-}
-@media (min-width: 1200px) {
-  .tuile.premiere {
-    margin-left: 0;
-  }
-}
-.tuile.derniere {
-  margin-right: var(--espacement);
-}
-@media (min-width: 1200px) {
-  .tuile.derniere {
-    margin-right: 0;
-  }
-}
-.tuile .conteneur-image img {
-  max-width: 96px;
-  max-height: 96px;
-}
-
-p {
-  margin: 0;
-  font-size: 18px;
-  line-height: 24px;
-  font-style: normal;
-  font-weight: 700;
-}
-@media (min-width: 768px) {
-  p {
-    font-size: 20px;
-    line-height: 28px;
-  }
-}
-
-span {
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-}</style>

package/dist/lab/vitrines-produits/briques/Tuile.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Image } from "../../../types";
-interface Props {
-    titre: string;
-    illustration: Image;
-    contenu: string;
-    position?: "premiere" | "derniere" | null;
-}
-declare const Tuile: import("svelte").Component<Props, {}, "">;
-type Tuile = ReturnType<typeof Tuile>;
-export default Tuile;

package/dist/lab/vitrines-produits/briques/marelle/Etape.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">import LienExterne from "../../../icones/LienExterne.svelte";
-let { index, etapeMarelle } = $props();
-</script>
-
-<div class="marelle-etape">
-  <div class="illustration">
-    <img src={etapeMarelle.illustration.lien} alt={etapeMarelle.illustration.alt} />
-  </div>
-  <div class="numero-etape">
-    <div class="encart-rond">
-      <span>{index + 1}</span>
-    </div>
-  </div>
-  <div class="contenu">
-    <h4>{etapeMarelle.titre}</h4>
-    <p>{etapeMarelle.description}</p>
-    {#if etapeMarelle.lien}
-      <a href={etapeMarelle.lien.href} target={etapeMarelle.lien.target}>
-        {etapeMarelle.lien.texte}
-        {#if etapeMarelle.lien.target === "_blank"}
-          <LienExterne />
-        {/if}
-      </a>
-    {/if}
-  </div>
-</div>
-
-<style>.marelle-etape {
-  display: grid;
-  row-gap: 32px;
-  grid-template-areas: "numero-etape" "contenu" "illustration";
-}
-@media (min-width: 932px) {
-  .marelle-etape {
-    grid-template-areas: "contenu numero-etape illustration";
-    grid-template-columns: 1fr 136px 1fr;
-    column-gap: 24px;
-    row-gap: 24px;
-  }
-  .marelle-etape:nth-child(even) {
-    grid-template-areas: "illustration numero-etape contenu";
-  }
-}
-.marelle-etape:nth-child(even) .numero-etape {
-  padding-right: 16px;
-  justify-content: center;
-}
-@media (min-width: 932px) {
-  .marelle-etape:nth-child(even) .numero-etape {
-    justify-content: end;
-  }
-}
-.marelle-etape:nth-child(odd) .numero-etape {
-  padding-left: 16px;
-  justify-content: center;
-}
-@media (min-width: 932px) {
-  .marelle-etape:nth-child(odd) .numero-etape {
-    justify-content: start;
-  }
-}
-.marelle-etape .contenu {
-  grid-area: contenu;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 8px;
-}
-.marelle-etape .numero-etape {
-  grid-area: numero-etape;
-  text-align: center;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-}
-.marelle-etape .numero-etape .encart-rond {
-  width: 72px;
-  height: 72px;
-  background: var(--brique-marelle-etapes-numero-etape-couleur);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.marelle-etape .numero-etape .encart-rond span {
-  color: #ffffff;
-  font-size: 2rem;
-  font-weight: bold;
-}
-@media (min-width: 932px) {
-  .marelle-etape .numero-etape .encart-rond span {
-    font-size: 2.5rem;
-  }
-}
-
-.illustration img {
-  width: 100%;
-}
-
-.marelle-etape > div > h4 {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 28px;
-}
-@media (min-width: 932px) {
-  .marelle-etape > div > h4 {
-    font-size: 1.375rem;
-    line-height: 28px;
-  }
-}
-
-.marelle-etape > div > p {
-  margin: 0 0 8px 0;
-  font-size: 1rem;
-  line-height: 24px;
-}
-@media (min-width: 932px) {
-  .marelle-etape > div > p {
-    font-size: 1rem;
-    line-height: 24px;
-  }
-}
-
-.marelle-etape > div > a {
-  position: relative;
-  width: fit-content;
-  color: var(--brique-marelle-etapes-lien-couleur);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: none;
-  text-decoration: none;
-}
-.marelle-etape > div > a:hover:after {
-  bottom: -1px;
-  height: 2px;
-}
-.marelle-etape > div > a:after {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  content: "";
-  width: 100%;
-  height: 1px;
-  background: var(--brique-marelle-etapes-lien-couleur);
-}</style>

package/dist/lab/vitrines-produits/briques/marelle/Etape.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { EtapeMarelle } from "../../../../types";
-interface Props {
-    index: number;
-    etapeMarelle: EtapeMarelle;
-}
-declare const Etape: import("svelte").Component<Props, {}, "">;
-type Etape = ReturnType<typeof Etape>;
-export default Etape;