@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/dsfr/DsfrButtonsGroup.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Size } from "../types";
+type ButtonsGroupSize = Extract<Size, "sm" | "md" | "lg">;
+type Button = {
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+    id?: string;
+    kind?: string;
+    preset?: string;
+    title?: string;
+    href?: string;
+    blank?: boolean;
+};
+interface Props {
+    /** Taille des boutons */
+    size?: ButtonsGroupSize;
+    /** Les boutons ont une icône */
+    hasIcon?: boolean;
+    /** Emplacement de l'icône<br>Si non défini alors que le paramètre icon est défini, bouton avec icône seule, sans label<br>valeurs :<br>- left : icône à gauche du label<br>- right : icône à droite du label */
+    iconPlace?: "only" | "left" | "right";
+    /** Type de balise HTML pour la liste du groupe de boutons */
+    groupMarkup?: "ul" | "div";
+    /** Disposition des boutons<br>Valeurs:<br>- Vertical : les boutons sont disposés les uns en dessous des autres<br>- en ligne : les boutons sont disposés les uns à côté des autres<br>- En ligne à partir du breakpoint sm : les boutons sont disposés les uns à côté des autres à partir du breakpoint sm<br>- En ligne à partir du breakpoint md : les boutons sont disposés les uns à côté des autres à partir du breakpoint md<br>- En ligne à partir du breakpoint lg : les boutons sont disposés les uns à côté des autres à partir du breakpoint lg */
+    inline?: "false" | "true" | "sm" | "md" | "lg";
+    /** Les boutons ont la même largeur. Fixe la largeur des boutons à celle du plus grand bouton du groupe. */
+    equisized?: boolean;
+    /** Alignement horizontal des boutons dans le groupe */
+    align?: "left" | "center" | "right";
+    /** Inverse l'ordre des boutons en ligne lorsqu'ils sont spécifiquement alignés à droite */
+    reverse?: boolean;
+    /** Liste de boutons */
+    buttons?: Button[];
+}
+declare const DsfrButtonsGroup: import("svelte").Component<Props, {}, "">;
+type DsfrButtonsGroup = ReturnType<typeof DsfrButtonsGroup>;
+export default DsfrButtonsGroup;

package/dist/dsfr/DsfrCallout.svelte

@@ -0,0 +1,242 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-callout",
+    props: {
+      hasTitle: { attribute: "has-title", type: "Boolean" },
+      title: { attribute: "title", type: "String" },
+      text: { attribute: "text", type: "String" },
+      id: { attribute: "id", type: "String" },
+      hasIcon: { attribute: "has-icon", type: "Boolean" },
+      icon: { attribute: "icon", type: "String" },
+      titleMarkup: { attribute: "title-markup", type: "String" },
+      hasButton: { attribute: "has-button", type: "Boolean" },
+      buttonLabel: { attribute: "button-label", type: "String" },
+      accent: { attribute: "accent", type: "String" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { withIconsStyleSheet, setIconClass, setThemeable } from "../utilitaires";
+import DsfrButton from "./DsfrButton.svelte";
+setThemeable($host());
+let { hasTitle = true, title, text, id, hasIcon = false, icon, titleMarkup = "h3", hasButton = false, buttonLabel, accent } = $props();
+const accentClass = $derived(accent && `fr-callout--${accent}`);
+const iconClass = $derived(hasIcon && icon && setIconClass(icon));
+</script>
+
+<div {id} class={["fr-callout", accentClass, iconClass]}>
+  {#if hasTitle}
+    <slot name="title">
+      <svelte:element this={titleMarkup} class="fr-callout__title">{title}</svelte:element>
+    </slot>
+  {/if}
+  <slot name="description">
+    <p class="fr-callout__text">{text}</p>
+  </slot>
+  {#if hasButton}
+    <div class="fr-callout__btn">
+      <slot name="button">
+        {#if buttonLabel}
+          <DsfrButton label={buttonLabel} />
+        {/if}
+      </slot>
+    </div>
+  {/if}
+</div>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */.fr-callout{--title-spacing:0 0 0.5rem;--text-spacing:0;--idle:transparent;--hover:var(--background-contrast-grey-hover);--active:var(--background-contrast-grey-active);background-color:var(--background-contrast-grey);background-image:linear-gradient(0deg,var(--border-default-blue-france),var(--border-default-blue-france));background-position:0 0;background-repeat:no-repeat;background-size:.25rem 100%;margin:0 0 1.5rem;padding:1.5rem;position:relative}.fr-callout[class*=" fr-fi-"]:before,.fr-callout[class*=" fr-icon-"]:before,.fr-callout[class^=fr-fi-]:before,.fr-callout[class^=fr-icon-]:before{display:block;margin:-.5rem 0 .5rem}.fr-callout__title{color:var(--text-title-grey);font-size:1.375rem;font-weight:700;line-height:1.75rem;margin:var(--title-spacing)}.fr-callout__text{font-size:1.125rem;line-height:1.75rem}.fr-callout .fr-btn{margin-top:1rem}.fr-callout:before{color:var(--text-title-grey)}.fr-callout--green-tilleul-verveine{--idle:transparent;--hover:var(--background-contrast-green-tilleul-verveine-hover);--active:var(--background-contrast-green-tilleul-verveine-active);background-color:var(--background-contrast-green-tilleul-verveine);background-image:linear-gradient(0deg,var(--border-default-green-tilleul-verveine),var(--border-default-green-tilleul-verveine))}.fr-callout--green-bourgeon{--idle:transparent;--hover:var(--background-contrast-green-bourgeon-hover);--active:var(--background-contrast-green-bourgeon-active);background-color:var(--background-contrast-green-bourgeon);background-image:linear-gradient(0deg,var(--border-default-green-bourgeon),var(--border-default-green-bourgeon))}.fr-callout--green-emeraude{--idle:transparent;--hover:var(--background-contrast-green-emeraude-hover);--active:var(--background-contrast-green-emeraude-active);background-color:var(--background-contrast-green-emeraude);background-image:linear-gradient(0deg,var(--border-default-green-emeraude),var(--border-default-green-emeraude))}.fr-callout--green-menthe{--idle:transparent;--hover:var(--background-contrast-green-menthe-hover);--active:var(--background-contrast-green-menthe-active);background-color:var(--background-contrast-green-menthe);background-image:linear-gradient(0deg,var(--border-default-green-menthe),var(--border-default-green-menthe))}.fr-callout--green-archipel{--idle:transparent;--hover:var(--background-contrast-green-archipel-hover);--active:var(--background-contrast-green-archipel-active);background-color:var(--background-contrast-green-archipel);background-image:linear-gradient(0deg,var(--border-default-green-archipel),var(--border-default-green-archipel))}.fr-callout--blue-ecume{--idle:transparent;--hover:var(--background-contrast-blue-ecume-hover);--active:var(--background-contrast-blue-ecume-active);background-color:var(--background-contrast-blue-ecume);background-image:linear-gradient(0deg,var(--border-default-blue-ecume),var(--border-default-blue-ecume))}.fr-callout--blue-cumulus{--idle:transparent;--hover:var(--background-contrast-blue-cumulus-hover);--active:var(--background-contrast-blue-cumulus-active);background-color:var(--background-contrast-blue-cumulus);background-image:linear-gradient(0deg,var(--border-default-blue-cumulus),var(--border-default-blue-cumulus))}.fr-callout--purple-glycine{--idle:transparent;--hover:var(--background-contrast-purple-glycine-hover);--active:var(--background-contrast-purple-glycine-active);background-color:var(--background-contrast-purple-glycine);background-image:linear-gradient(0deg,var(--border-default-purple-glycine),var(--border-default-purple-glycine))}.fr-callout--pink-macaron{--idle:transparent;--hover:var(--background-contrast-pink-macaron-hover);--active:var(--background-contrast-pink-macaron-active);background-color:var(--background-contrast-pink-macaron);background-image:linear-gradient(0deg,var(--border-default-pink-macaron),var(--border-default-pink-macaron))}.fr-callout--pink-tuile{--idle:transparent;--hover:var(--background-contrast-pink-tuile-hover);--active:var(--background-contrast-pink-tuile-active);background-color:var(--background-contrast-pink-tuile);background-image:linear-gradient(0deg,var(--border-default-pink-tuile),var(--border-default-pink-tuile))}.fr-callout--yellow-tournesol{--idle:transparent;--hover:var(--background-contrast-yellow-tournesol-hover);--active:var(--background-contrast-yellow-tournesol-active);background-color:var(--background-contrast-yellow-tournesol);background-image:linear-gradient(0deg,var(--border-default-yellow-tournesol),var(--border-default-yellow-tournesol))}.fr-callout--yellow-moutarde{--idle:transparent;--hover:var(--background-contrast-yellow-moutarde-hover);--active:var(--background-contrast-yellow-moutarde-active);background-color:var(--background-contrast-yellow-moutarde);background-image:linear-gradient(0deg,var(--border-default-yellow-moutarde),var(--border-default-yellow-moutarde))}.fr-callout--orange-terre-battue{--idle:transparent;--hover:var(--background-contrast-orange-terre-battue-hover);--active:var(--background-contrast-orange-terre-battue-active);background-color:var(--background-contrast-orange-terre-battue);background-image:linear-gradient(0deg,var(--border-default-orange-terre-battue),var(--border-default-orange-terre-battue))}.fr-callout--brown-cafe-creme{--idle:transparent;--hover:var(--background-contrast-brown-cafe-creme-hover);--active:var(--background-contrast-brown-cafe-creme-active);background-color:var(--background-contrast-brown-cafe-creme);background-image:linear-gradient(0deg,var(--border-default-brown-cafe-creme),var(--border-default-brown-cafe-creme))}.fr-callout--brown-caramel{--idle:transparent;--hover:var(--background-contrast-brown-caramel-hover);--active:var(--background-contrast-brown-caramel-active);background-color:var(--background-contrast-brown-caramel);background-image:linear-gradient(0deg,var(--border-default-brown-caramel),var(--border-default-brown-caramel))}.fr-callout--brown-opera{--idle:transparent;--hover:var(--background-contrast-brown-opera-hover);--active:var(--background-contrast-brown-opera-active);background-color:var(--background-contrast-brown-opera);background-image:linear-gradient(0deg,var(--border-default-brown-opera),var(--border-default-brown-opera))}.fr-callout--beige-gris-galet{--idle:transparent;--hover:var(--background-contrast-beige-gris-galet-hover);--active:var(--background-contrast-beige-gris-galet-active);background-color:var(--background-contrast-beige-gris-galet);background-image:linear-gradient(0deg,var(--border-default-beige-gris-galet),var(--border-default-beige-gris-galet))}@media (min-width:36em){
+  /*! media sm */}@media (min-width:48em){
+  /*! media md */.fr-callout{padding:2rem 3rem}.fr-callout[class*=" fr-fi-"]:before,.fr-callout[class*=" fr-icon-"]:before,.fr-callout[class^=fr-fi-]:before,.fr-callout[class^=fr-icon-]:before{margin:-1rem 0 1rem -2rem}.fr-callout__title{font-size:1.5rem;line-height:2rem}}@media (min-width:62em){
+  /*! media lg */}@media (min-width:78em){
+  /*! media xl */}@media (-ms-high-contrast:active),(forced-colors:active){.fr-callout{border-left:4px solid;padding-left:1.25rem}}@media (-ms-high-contrast:active) and (min-width:48em),(forced-colors:active) and (min-width:48em){.fr-callout{padding-left:2.75rem}}h6 {
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+@media (min-width: 48em) {
+  h6 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+h6 {
+  margin: var(--title-spacing);
+}
+
+h5 {
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+@media (min-width: 48em) {
+  h5 {
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+  }
+}
+h5 {
+  margin: var(--title-spacing);
+}
+
+h4 {
+  font-weight: 700;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+}
+@media (min-width: 48em) {
+  h4 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+h4 {
+  margin: var(--title-spacing);
+}
+
+h3 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+@media (min-width: 48em) {
+  h3 {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+h3 {
+  margin: var(--title-spacing);
+}
+
+h2 {
+  font-weight: 700;
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+}
+@media (min-width: 48em) {
+  h2 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+h2 {
+  margin: var(--title-spacing);
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+@media (min-width: 48em) {
+  h1 {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+h1 {
+  margin: var(--title-spacing);
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: var(--text-spacing);
+}
+
+[class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+[class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+  --icon-size: 1.5rem;
+}
+[class^=fr-icon-]::before, [class*=" fr-icon-"]::before, [class^=fr-fi-]::before, [class*=" fr-fi-"]::before {
+  content: "";
+}
+
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  [class^=fr-icon-]::before, [class^=fr-icon-]::after, [class*=" fr-icon-"]::before, [class*=" fr-icon-"]::after, [class^=fr-fi-]::before, [class^=fr-fi-]::after, [class*=" fr-fi-"]::before, [class*=" fr-fi-"]::after {
+    forced-color-adjust: none;
+    background-color: canvastext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  button[class^=fr-icon-]:not([disabled])::before, button[class^=fr-icon-]:not([disabled])::after, button[class*=" fr-icon-"]:not([disabled])::before, button[class*=" fr-icon-"]:not([disabled])::after, button[class^=fr-fi-]:not([disabled])::before, button[class^=fr-fi-]:not([disabled])::after, button[class*=" fr-fi-"]:not([disabled])::before, button[class*=" fr-fi-"]:not([disabled])::after {
+    background-color: buttontext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  a[href][class^=fr-icon-]::before, a[href][class^=fr-icon-]::after, a[href][class*=" fr-icon-"]::before, a[href][class*=" fr-icon-"]::after, a[href][class^=fr-fi-]::before, a[href][class^=fr-fi-]::after, a[href][class*=" fr-fi-"]::before, a[href][class*=" fr-fi-"]::after {
+    background-color: linktext;
+  }
+}
+@media (-ms-high-contrast: active) and (-ms-high-contrast: active), (-ms-high-contrast: active) and (forced-colors: active), (forced-colors: active) and (-ms-high-contrast: active), (forced-colors: active) and (forced-colors: active) {
+  a[class^=fr-icon-]:not([href])::before, a[class^=fr-icon-]:not([href])::after, a[class*=" fr-icon-"]:not([href])::before, a[class*=" fr-icon-"]:not([href])::after, a[class^=fr-fi-]:not([href])::before, a[class^=fr-fi-]:not([href])::after, a[class*=" fr-fi-"]:not([href])::before, a[class*=" fr-fi-"]:not([href])::after, button[class^=fr-icon-]:disabled::before, button[class^=fr-icon-]:disabled::after, button[class*=" fr-icon-"]:disabled::before, button[class*=" fr-icon-"]:disabled::after, button[class^=fr-fi-]:disabled::before, button[class^=fr-fi-]:disabled::after, button[class*=" fr-fi-"]:disabled::before, button[class*=" fr-fi-"]:disabled::after, input[class^=fr-icon-]:disabled::before, input[class^=fr-icon-]:disabled::after, input[class*=" fr-icon-"]:disabled::before, input[class*=" fr-icon-"]:disabled::after, input[class^=fr-fi-]:disabled::before, input[class^=fr-fi-]:disabled::after, input[class*=" fr-fi-"]:disabled::before, input[class*=" fr-fi-"]:disabled::after, input[type=checkbox][class^=fr-icon-]:disabled::before, input[type=checkbox][class^=fr-icon-]:disabled::after, input[type=checkbox][class*=" fr-icon-"]:disabled::before, input[type=checkbox][class*=" fr-icon-"]:disabled::after, input[type=checkbox][class^=fr-fi-]:disabled::before, input[type=checkbox][class^=fr-fi-]:disabled::after, input[type=checkbox][class*=" fr-fi-"]:disabled::before, input[type=checkbox][class*=" fr-fi-"]:disabled::after, input[type=checkbox]:disabled + label[class^=fr-icon-]::before, input[type=checkbox]:disabled + label[class^=fr-icon-]::after, input[type=checkbox]:disabled + label[class*=" fr-icon-"]::before, input[type=checkbox]:disabled + label[class*=" fr-icon-"]::after, input[type=checkbox]:disabled + label[class^=fr-fi-]::before, input[type=checkbox]:disabled + label[class^=fr-fi-]::after, input[type=checkbox]:disabled + label[class*=" fr-fi-"]::before, input[type=checkbox]:disabled + label[class*=" fr-fi-"]::after, input[type=radio][class^=fr-icon-]:disabled::before, input[type=radio][class^=fr-icon-]:disabled::after, input[type=radio][class*=" fr-icon-"]:disabled::before, input[type=radio][class*=" fr-icon-"]:disabled::after, input[type=radio][class^=fr-fi-]:disabled::before, input[type=radio][class^=fr-fi-]:disabled::after, input[type=radio][class*=" fr-fi-"]:disabled::before, input[type=radio][class*=" fr-fi-"]:disabled::after, input[type=radio]:disabled + label[class^=fr-icon-]::before, input[type=radio]:disabled + label[class^=fr-icon-]::after, input[type=radio]:disabled + label[class*=" fr-icon-"]::before, input[type=radio]:disabled + label[class*=" fr-icon-"]::after, input[type=radio]:disabled + label[class^=fr-fi-]::before, input[type=radio]:disabled + label[class^=fr-fi-]::after, input[type=radio]:disabled + label[class*=" fr-fi-"]::before, input[type=radio]:disabled + label[class*=" fr-fi-"]::after, select[class^=fr-icon-]:disabled::before, select[class^=fr-icon-]:disabled::after, select[class*=" fr-icon-"]:disabled::before, select[class*=" fr-icon-"]:disabled::after, select[class^=fr-fi-]:disabled::before, select[class^=fr-fi-]:disabled::after, select[class*=" fr-fi-"]:disabled::before, select[class*=" fr-fi-"]:disabled::after, textarea[class^=fr-icon-]:disabled::before, textarea[class^=fr-icon-]:disabled::after, textarea[class*=" fr-icon-"]:disabled::before, textarea[class*=" fr-icon-"]:disabled::after, textarea[class^=fr-fi-]:disabled::before, textarea[class^=fr-fi-]:disabled::after, textarea[class*=" fr-fi-"]:disabled::before, textarea[class*=" fr-fi-"]:disabled::after, video[class^=fr-icon-]:not([href])::before, video[class^=fr-icon-]:not([href])::after, video[class*=" fr-icon-"]:not([href])::before, video[class*=" fr-icon-"]:not([href])::after, video[class^=fr-fi-]:not([href])::before, video[class^=fr-fi-]:not([href])::after, video[class*=" fr-fi-"]:not([href])::before, video[class*=" fr-fi-"]:not([href])::after, audio[class^=fr-icon-]:not([href])::before, audio[class^=fr-icon-]:not([href])::after, audio[class*=" fr-icon-"]:not([href])::before, audio[class*=" fr-icon-"]:not([href])::after, audio[class^=fr-fi-]:not([href])::before, audio[class^=fr-fi-]:not([href])::after, audio[class*=" fr-fi-"]:not([href])::before, audio[class*=" fr-fi-"]:not([href])::after {
+    background-color: graytext;
+  }
+}
+.fr-icon--xs::before, .fr-icon--xs::after {
+  --icon-size: 0.75rem;
+}
+.fr-icon--sm::before, .fr-icon--sm::after {
+  --icon-size: 1rem;
+}
+.fr-icon--md::before, .fr-icon--md::after {
+  --icon-size: 1.5rem;
+}
+.fr-icon--lg::before, .fr-icon--lg::after {
+  --icon-size: 2rem;
+}
+
+:host {
+  display: block;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background-color: var(--background-default-grey);
+  --idle: transparent;
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  color: var(--text-default-grey);
+  background-color: transparent;
+}
+
+.fr-callout {
+  box-sizing: border-box;
+}
+.fr-callout__btn {
+  margin-top: 1rem;
+}
+.fr-callout :global(::slotted([slot="title"])) {
+  font-weight: 700;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+}
+@media (min-width: 48em) {
+  .fr-callout :global(::slotted([slot="title"])) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+.fr-callout :global(::slotted([slot="title"])) {
+  margin: var(--title-spacing);
+  color: var(--text-title-grey);
+}
+.fr-callout :global(::slotted([slot="description"])) {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  margin: var(--text-spacing);
+}</style>

package/dist/dsfr/DsfrCallout.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { Accent } from "../types";
+export type TitleMarkup = "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+export interface Props {
+    /** Ajoute un titre dans la mise en avant */
+    hasTitle?: boolean;
+    /** Titre de la mise en avant */
+    title?: string;
+    /** Contenu texte de la mise en avant */
+    text: string;
+    /** Attribut id de la mise en avant */
+    id?: string;
+    /** Affiche une icône */
+    hasIcon?: boolean;
+    /** Nom de l'icône */
+    icon?: string;
+    /** Niveau d'entête du titre */
+    titleMarkup?: TitleMarkup;
+    /** Affiche un bouton */
+    hasButton?: boolean;
+    /** Libellé du bouton */
+    buttonLabel?: string;
+    /** Couleur d'accentuation */
+    accent?: Accent;
+}
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DsfrCallout: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    description: {};
+    button: {};
+}, {}, "">;
+type DsfrCallout = InstanceType<typeof DsfrCallout>;
+export default DsfrCallout;