@hgdc/ui 0.17.2 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/README.md +8 -8
  2. package/dist/family-loader.d.ts +4 -3
  3. package/dist/family-loader.js +7 -4
  4. package/dist/family-svg.d.ts +16 -6
  5. package/dist/family-svg.js +39 -12
  6. package/dist/product-badge.d.ts +10 -7
  7. package/dist/product-badge.js +28 -19
  8. package/email-icons/account.png +0 -0
  9. package/email-icons/analytics.png +0 -0
  10. package/email-icons/docs.png +0 -0
  11. package/email-icons/host.png +0 -0
  12. package/email-icons/mail.png +0 -0
  13. package/email-icons/portal.png +0 -0
  14. package/email-icons/status.png +0 -0
  15. package/family/account-dark.svg +1 -0
  16. package/family/account.svg +1 -1
  17. package/family/analytics-dark.svg +1 -0
  18. package/family/analytics.svg +1 -1
  19. package/family/app/account/apple-touch-icon.png +0 -0
  20. package/family/app/account/favicon.ico +0 -0
  21. package/family/app/account/favicon.svg +1 -0
  22. package/family/app/account/icon-192.png +0 -0
  23. package/family/app/account/icon-512.png +0 -0
  24. package/family/app/account/icon-maskable-512.png +0 -0
  25. package/family/app/analytics/apple-touch-icon.png +0 -0
  26. package/family/app/analytics/favicon.ico +0 -0
  27. package/family/app/analytics/favicon.svg +1 -0
  28. package/family/app/analytics/icon-192.png +0 -0
  29. package/family/app/analytics/icon-512.png +0 -0
  30. package/family/app/analytics/icon-maskable-512.png +0 -0
  31. package/family/app/docs/apple-touch-icon.png +0 -0
  32. package/family/app/docs/favicon.ico +0 -0
  33. package/family/app/docs/favicon.svg +1 -0
  34. package/family/app/docs/icon-192.png +0 -0
  35. package/family/app/docs/icon-512.png +0 -0
  36. package/family/app/docs/icon-maskable-512.png +0 -0
  37. package/family/app/host/apple-touch-icon.png +0 -0
  38. package/family/app/host/favicon.ico +0 -0
  39. package/family/app/host/favicon.svg +1 -0
  40. package/family/app/host/icon-192.png +0 -0
  41. package/family/app/host/icon-512.png +0 -0
  42. package/family/app/host/icon-maskable-512.png +0 -0
  43. package/family/app/mail/apple-touch-icon.png +0 -0
  44. package/family/app/mail/favicon.ico +0 -0
  45. package/family/app/mail/favicon.svg +1 -0
  46. package/family/app/mail/icon-192.png +0 -0
  47. package/family/app/mail/icon-512.png +0 -0
  48. package/family/app/mail/icon-maskable-512.png +0 -0
  49. package/family/app/portal/apple-touch-icon.png +0 -0
  50. package/family/app/portal/favicon.ico +0 -0
  51. package/family/app/portal/favicon.svg +1 -0
  52. package/family/app/portal/icon-192.png +0 -0
  53. package/family/app/portal/icon-512.png +0 -0
  54. package/family/app/portal/icon-maskable-512.png +0 -0
  55. package/family/app/status/apple-touch-icon.png +0 -0
  56. package/family/app/status/favicon.ico +0 -0
  57. package/family/app/status/favicon.svg +1 -0
  58. package/family/app/status/icon-192.png +0 -0
  59. package/family/app/status/icon-512.png +0 -0
  60. package/family/app/status/icon-maskable-512.png +0 -0
  61. package/family/docs-dark.svg +1 -0
  62. package/family/docs.svg +1 -1
  63. package/family/hcollection-icon-dark.svg +1 -0
  64. package/family/hcollection-icon.svg +1 -0
  65. package/family/host-dark.svg +1 -0
  66. package/family/host.svg +1 -1
  67. package/family/mail-dark.svg +1 -0
  68. package/family/mail.svg +1 -1
  69. package/family/portal-dark.svg +1 -0
  70. package/family/portal.svg +1 -1
  71. package/family/status-dark.svg +1 -0
  72. package/family/status.svg +1 -1
  73. package/family/tile/account-favicon.svg +1 -0
  74. package/family/tile/account-round.svg +1 -0
  75. package/family/tile/account.svg +1 -0
  76. package/family/tile/analytics-favicon.svg +1 -0
  77. package/family/tile/analytics-round.svg +1 -0
  78. package/family/tile/analytics.svg +1 -0
  79. package/family/tile/docs-favicon.svg +1 -0
  80. package/family/tile/docs-round.svg +1 -0
  81. package/family/tile/docs.svg +1 -0
  82. package/family/tile/host-favicon.svg +1 -0
  83. package/family/tile/host-round.svg +1 -0
  84. package/family/tile/host.svg +1 -0
  85. package/family/tile/mail-favicon.svg +1 -0
  86. package/family/tile/mail-round.svg +1 -0
  87. package/family/tile/mail.svg +1 -0
  88. package/family/tile/portal-favicon.svg +1 -0
  89. package/family/tile/portal-round.svg +1 -0
  90. package/family/tile/portal.svg +1 -0
  91. package/family/tile/status-favicon.svg +1 -0
  92. package/family/tile/status-round.svg +1 -0
  93. package/family/tile/status.svg +1 -0
  94. package/package.json +1 -1
  95. package/styles.css +95 -34
  96. package/family/hfamily-dark.svg +0 -1
  97. package/family/hfamily-icon.svg +0 -1
  98. package/family/hfamily.svg +0 -1
package/README.md CHANGED
@@ -67,14 +67,14 @@ Une seule règle dans les sept produits, posée par la coque :
67
67
 
68
68
  ## Identité H Collection
69
69
 
70
- | Import | Rôle |
71
- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
72
- | `product-badge` | `<ProductBadge product="host" className="size-8" />`, `<FamilyMark />` (le H tricolore), `PRODUCT_GRADIENT` |
73
- | `@hgdc/ui/family/<mot>.svg` | Fichiers des pastilles (`account`, `host`, `mail`, `portal`, `status`, `analytics`, `docs`), à copier en `favicon.svg` |
74
- | `@hgdc/ui/family/hfamily*.svg` | `hfamily-icon.svg` (le H seul), `hfamily.svg` et `hfamily-dark.svg` (logo sur fond clair ou sombre, jamais recoloré) |
75
- | `styles.css` | `--product-<mot>-from` / `--product-<mot>-to` (dégradé de chaque pastille), `--glow-blue`, `--glow-violet`, `--glow-pink`, `--glow-orange` |
76
-
77
- Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)`, jamais `in oklch`. Une pastille reste seule, jamais dans une tuile de couleur. Les originaux vivent dans le dépôt du site hgdc.ch : les recopier dans `packages/ui/family/`, puis `bun scripts/family.ts && bun run format` (SVG embarqués et PNG des e-mails).
70
+ | Import | Rôle |
71
+ | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
72
+ | `product-badge` | `<ProductBadge product="host" className="size-8" />` (squircle blanc ; `shape="round"` pour « Propulsé par »), `<FamilyMark />` (le H « Double », clair et sombre selon le thème), `PRODUCT_GRADIENT` |
73
+ | `@hgdc/ui/family/<mot>.svg` | Pictogrammes des produits (`account`, `host`, `mail`, `portal`, `status`, `analytics`, `docs`), originaux du site ; `family/tile/<mot>.svg` (squircle blanc), `-round.svg`, `-favicon.svg` (carré arrondi 22 %) ; `family/app/<mot>/` : favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, à copier dans `public/` |
74
+ | `@hgdc/ui/family/hcollection-icon*.svg` | Le H « Double », marque de la H Collection, sur fond clair (`hcollection-icon.svg`) ou sombre (`-dark`), jamais recoloré |
75
+ | `styles.css` | `--product-<mot>-from` / `--product-<mot>-to` (dégradé de chaque icône sur fond clair), `--glow-blue`, `--glow-violet`, `--glow-pink`, `--glow-orange` |
76
+
77
+ Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)`, jamais `in oklch`. Une icône de produit se pose toujours sur son fond blanc, en clair comme en sombre, sans bordure ni ombre : squircle (barre, menu, e-mails, icône d'app), rond (« Propulsé par »), carré arrondi 22 % (favicon), plein cadre (apple-touch, maskable). Le H reste sans fond. Les originaux vivent dans le dépôt du site hgdc.ch : les recopier dans `packages/ui/family/`, puis `bun scripts/family.ts && bun run format` (SVG embarqués et PNG des e-mails).
78
78
 
79
79
  Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisation en haut, pastilles des produits ouverts, Account en bas, chacun par son entrée `/auth/hgdc?next=/`, le produit courant en teinte. Au survol (150 ms d'intention) ou au focus clavier, elle s'élargit par-dessus la page et écrit les noms. `productRail={false}` la coupe ; `accountHref` pointe vers un Account local. La barre latérale porte la marque du produit et se réduit en rail (`Ctrl+B`, mémorisé) : poser `sidebarInitScript` dans le `<head>`. En rail, la pastille du produit devient le bouton « Déplier » au survol. Le kit ne connaît ni routeur ni authentification : liens par `render={<Link />}`, actions par callbacks. Rôles d'organisation : `owner`, `admin`, `member` (Propriétaire, Admin, Membre).
80
80
 
@@ -21,9 +21,10 @@ export declare function syncFamilyLoader(root: Element | null): void;
21
21
  */
22
22
  export declare const FamilyLoaderRootContext: React.Context<boolean>;
23
23
  /**
24
- * Le H du chargement : la silhouette grise du H de la famille, toujours visible, dont les trois
25
- * pièces se remplissent de leurs dégradés en une seule boucle de 2 s (gauche, barre, droite, H
26
- * complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
24
+ * Le H du chargement, le H « Double » de la H Collection : la silhouette grise du H plein, devant
25
+ * son reflet immobile (35 %, 50 % en sombre), toujours visibles. Les trois pièces du H plein se
26
+ * remplissent de leurs dégradés en une seule boucle de 2 s (gauche, pont, droite, H complet,
27
+ * fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
27
28
  * seulement. Mouvement réduit : le H plein respire doucement.
28
29
  *
29
30
  * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
@@ -53,8 +53,10 @@ function useClockSync(ref) {
53
53
  return () => element.removeEventListener("animationstart", onStart);
54
54
  }, [ref]);
55
55
  }
56
+ const PIECES = ["left", "bar", "right"];
57
+ /** Le H « Double » : le reflet immobile, puis les trois pièces du H plein qui se remplissent. */
56
58
  function Mark() {
57
- return ["left", "bar", "right"].map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece)));
59
+ return (_jsxs(_Fragment, { children: [_jsx("span", { "data-reflet": true, "aria-hidden": true, children: PIECES.map((piece) => (_jsx("span", { "data-piece": piece, children: _jsx("span", {}) }, piece))) }), PIECES.map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece)))] }));
58
60
  }
59
61
  /**
60
62
  * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
@@ -62,9 +64,10 @@ function Mark() {
62
64
  */
63
65
  export const FamilyLoaderRootContext = createContext(false);
64
66
  /**
65
- * Le H du chargement : la silhouette grise du H de la famille, toujours visible, dont les trois
66
- * pièces se remplissent de leurs dégradés en une seule boucle de 2 s (gauche, barre, droite, H
67
- * complet, fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
67
+ * Le H du chargement, le H « Double » de la H Collection : la silhouette grise du H plein, devant
68
+ * son reflet immobile (35 %, 50 % en sombre), toujours visibles. Les trois pièces du H plein se
69
+ * remplissent de leurs dégradés en une seule boucle de 2 s (gauche, pont, droite, H complet,
70
+ * fondu), calée sur l'horloge. CSS seul (`styles.css`), `transform` et `opacity`
68
71
  * seulement. Mouvement réduit : le H plein respire doucement.
69
72
  *
70
73
  * Un chargement de page ne dessine pas ce H lui-même : c'est `PagePending`, qui passe par le H du
@@ -1,9 +1,19 @@
1
- /** Les produits de la H Collection qui ont une pastille, par leur mot en minuscules. */
1
+ /** Les produits de la H Collection qui ont une icône, par leur mot en minuscules. */
2
2
  export declare const FAMILY_PRODUCTS: readonly ["account", "host", "mail", "portal", "status", "analytics", "docs"];
3
3
  export type FamilyProduct = (typeof FAMILY_PRODUCTS)[number];
4
- /** Vrai si le mot en minuscules (« host ») désigne un produit qui a une pastille. */
4
+ /** Vrai si le mot en minuscules (« host ») désigne un produit qui a une icône. */
5
5
  export declare function isFamilyProduct(word: string): word is FamilyProduct;
6
- /** SVG de la pastille de chaque produit (`family/<mot>.svg`). */
7
- export declare const PRODUCT_BADGE_SVG: Readonly<Record<FamilyProduct, string>>;
8
- /** SVG du H tricolore, l'icône de la famille (`family/hfamily-icon.svg`). */
9
- export declare const FAMILY_MARK_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\"><defs><linearGradient id=\"l\" x1=\"0\" y1=\"24\" x2=\"0\" y2=\"232\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#2c78fd\"/><stop offset=\"1\" stop-color=\"#7343fe\"/></linearGradient><linearGradient id=\"r\" x1=\"0\" y1=\"24\" x2=\"0\" y2=\"232\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#fe5292\"/><stop offset=\"1\" stop-color=\"#ff9a46\"/></linearGradient><linearGradient id=\"b\" x1=\"64\" y1=\"0\" x2=\"192\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#8145ff\"/><stop offset=\"1\" stop-color=\"#fe5292\"/></linearGradient></defs><rect x=\"43\" y=\"24\" width=\"57\" height=\"208\" rx=\"18\" fill=\"url(#l)\"/><rect x=\"156\" y=\"24\" width=\"57\" height=\"208\" rx=\"18\" fill=\"url(#r)\"/><rect x=\"67\" y=\"107\" width=\"122\" height=\"43\" rx=\"14\" fill=\"url(#b)\"/></svg>";
6
+ /** Forme du fond blanc d'une icône : squircle (barre, menu, e-mails) ou rond (« Propulsé par »). */
7
+ export type BadgeShape = "squircle" | "round";
8
+ /** Un dessin en deux variantes : sur fond clair et sur fond sombre. */
9
+ export type ThemedSvg = Readonly<{
10
+ light: string;
11
+ dark: string;
12
+ }>;
13
+ /**
14
+ * SVG de l'icône de chaque produit sur son fond blanc, toujours le même en clair et en sombre
15
+ * (`family/tile/<mot>.svg`, `family/tile/<mot>-round.svg`).
16
+ */
17
+ export declare const PRODUCT_BADGE_SVG: Readonly<Record<FamilyProduct, Readonly<Record<BadgeShape, string>>>>;
18
+ /** SVG du H « Double », la marque de la H Collection, sans fond (`family/hcollection-icon(-dark).svg`). */
19
+ export declare const FAMILY_MARK_SVG: ThemedSvg;
@@ -1,19 +1,46 @@
1
1
  // Généré par `bun scripts/family.ts` depuis `packages/ui/family/`. Ne pas modifier à la main.
2
- /** Les produits de la H Collection qui ont une pastille, par leur mot en minuscules. */
2
+ /** Les produits de la H Collection qui ont une icône, par leur mot en minuscules. */
3
3
  export const FAMILY_PRODUCTS = ["account", "host", "mail", "portal", "status", "analytics", "docs"];
4
- /** Vrai si le mot en minuscules (« host ») désigne un produit qui a une pastille. */
4
+ /** Vrai si le mot en minuscules (« host ») désigne un produit qui a une icône. */
5
5
  export function isFamilyProduct(word) {
6
6
  return FAMILY_PRODUCTS.includes(word);
7
7
  }
8
- /** SVG de la pastille de chaque produit (`family/<mot>.svg`). */
8
+ /**
9
+ * SVG de l'icône de chaque produit sur son fond blanc, toujours le même en clair et en sombre
10
+ * (`family/tile/<mot>.svg`, `family/tile/<mot>-round.svg`).
11
+ */
9
12
  export const PRODUCT_BADGE_SVG = {
10
- account: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="48" fill="#fff"/><g fill="url(#acc)"><circle cx="202" cy="232" r="30"/><path d="M154 314A48 44 0 0 1 250 314Z"/><rect x="276" y="216" width="72" height="24" rx="12"/><rect x="276" y="262" width="48" height="24" rx="12"/></g></svg>',
11
- host: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g transform="translate(0 6)"><g fill="#fff"><path d="M158.7 331.3A262.3 262.3 0 0 0 353.3 331.3L334 283H178Z"/><circle cx="178" cy="283" r="52"/><circle cx="334" cy="283" r="52"/><circle cx="214" cy="238" r="54"/><circle cx="288" cy="222" r="72"/><rect x="178" y="232" width="156" height="100"/></g><path fill="none" stroke="url(#acc)" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" d="M256 302V234M224 266L256 234L288 266"/></g></svg>',
12
- mail: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="56" fill="#fff"/><path fill="url(#acc)" d="M182 194H330A22 22 0 0 1 341.82 234.56L271.04 279.62A28 28 0 0 1 240.96 279.62L170.18 234.56A22 22 0 0 1 182 194Z"/></svg>',
13
- portal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><path fill="#fff" d="M168 160H222A24 24 0 0 1 240 168L258 188H344A40 40 0 0 1 384 228V316A40 40 0 0 1 344 356H168A40 40 0 0 1 128 316V200A40 40 0 0 1 168 160Z"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" d="M212 272L244 302L304 240"/></svg>',
14
- status: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" d="M164 262H206L230 214L262 304L288 248H348"/></svg>',
15
- analytics: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" d="M198 304V276M256 304V240M314 304V206"/></svg>',
16
- docs: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g fill="#fff"><path d="M248 196C222 176 184 168 146 174A14 14 0 0 0 134 188V324A12 12 0 0 0 148 336C184 332 220 338 248 356Z"/><path d="M264 196C290 176 328 168 366 174A14 14 0 0 1 378 188V324A12 12 0 0 1 364 336C328 332 292 338 264 356Z"/></g><path fill="none" stroke="url(#acc)" stroke-width="16" stroke-linecap="round" d="M166 226C188 224 208 228 224 238M166 266C188 264 208 268 224 278M288 238C304 228 324 224 346 226M288 278C304 268 324 264 346 266"/></svg>',
13
+ account: {
14
+ squircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#c42a1a"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/></svg></svg>',
15
+ round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#c42a1a"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/></svg></svg>',
16
+ },
17
+ host: {
18
+ squircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#1636c9"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
19
+ round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#1636c9"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
20
+ },
21
+ mail: {
22
+ squircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0445f"/><stop offset="1" stop-color="#a8123d"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.35" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
23
+ round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0445f"/><stop offset="1" stop-color="#a8123d"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.35" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
24
+ },
25
+ portal: {
26
+ squircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#4a22c9"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
27
+ round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#4a22c9"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
28
+ },
29
+ status: {
30
+ squircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bc488"/><stop offset="1" stop-color="#057a55"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
31
+ round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bc488"/><stop offset="1" stop-color="#057a55"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
32
+ },
33
+ analytics: {
34
+ squircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#d96a00"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
35
+ round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#d96a00"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
36
+ },
37
+ docs: {
38
+ squircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#19b9d1"/><stop offset="1" stop-color="#0a6f8f"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.6" fill-rule="evenodd"/></svg></svg>',
39
+ round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#19b9d1"/><stop offset="1" stop-color="#0a6f8f"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.6" fill-rule="evenodd"/></svg></svg>',
40
+ },
41
+ };
42
+ /** SVG du H « Double », la marque de la H Collection, sans fond (`family/hcollection-icon(-dark).svg`). */
43
+ export const FAMILY_MARK_SVG = {
44
+ light: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 9 46 46"><defs><linearGradient id="hl" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="hr" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="hf" x1="24.5" y1="0" x2="34.5" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#000"/></linearGradient><mask id="hm" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="64"><rect x="24" y="24" width="11" height="11" fill="url(#hf)"/></mask><g id="h"><path d="M24 25H35V34H24Z" fill="url(#hr)"/><path d="M24 25H35V34H24Z" fill="url(#hl)" mask="url(#hm)"/><path d="M17.5 11.5H21.5A3 3 0 0 1 24.5 14.5V44.5A3 3 0 0 1 21.5 47.5H17.5A3 3 0 0 1 14.5 44.5V14.5A3 3 0 0 1 17.5 11.5Z" fill="url(#hl)"/><path d="M37.5 11.5H41.5A3 3 0 0 1 44.5 14.5V44.5A3 3 0 0 1 41.5 47.5H37.5A3 3 0 0 1 34.5 44.5V14.5A3 3 0 0 1 37.5 11.5Z" fill="url(#hr)"/></g></defs><use href="#h" transform="translate(6 6)" opacity="0.35"/><use href="#h"/></svg>',
45
+ dark: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 9 46 46"><defs><linearGradient id="hl" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6aa0ff"/><stop offset="1" stop-color="#9a7bff"/></linearGradient><linearGradient id="hr" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7aa8"/><stop offset="1" stop-color="#ffb070"/></linearGradient><linearGradient id="hf" x1="24.5" y1="0" x2="34.5" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#000"/></linearGradient><mask id="hm" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="64"><rect x="24" y="24" width="11" height="11" fill="url(#hf)"/></mask><g id="h"><path d="M24 25H35V34H24Z" fill="url(#hr)"/><path d="M24 25H35V34H24Z" fill="url(#hl)" mask="url(#hm)"/><path d="M17.5 11.5H21.5A3 3 0 0 1 24.5 14.5V44.5A3 3 0 0 1 21.5 47.5H17.5A3 3 0 0 1 14.5 44.5V14.5A3 3 0 0 1 17.5 11.5Z" fill="url(#hl)"/><path d="M37.5 11.5H41.5A3 3 0 0 1 44.5 14.5V44.5A3 3 0 0 1 41.5 47.5H37.5A3 3 0 0 1 34.5 44.5V14.5A3 3 0 0 1 37.5 11.5Z" fill="url(#hr)"/></g></defs><use href="#h" transform="translate(6 6)" opacity="0.5"/><use href="#h"/></svg>',
17
46
  };
18
- /** SVG du H tricolore, l'icône de la famille (`family/hfamily-icon.svg`). */
19
- export const FAMILY_MARK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/></svg>';
@@ -1,7 +1,8 @@
1
- import { type FamilyProduct } from "./family-svg.ts";
1
+ import { type BadgeShape, type FamilyProduct } from "./family-svg.ts";
2
2
  /**
3
- * Dégradé de chaque pastille, du coin haut gauche au coin bas droit. Mêmes valeurs que les jetons
4
- * `--product-<mot>-from` / `--product-<mot>-to` de `styles.css` et que les SVG de `family/`.
3
+ * Dégradé de chaque icône sur fond clair, de la teinte vive (haut gauche) à la teinte profonde (bas
4
+ * droit). Mêmes valeurs que les jetons `--product-<mot>-from` / `--product-<mot>-to` de `styles.css`
5
+ * et que les SVG de `family/`.
5
6
  */
6
7
  export declare const PRODUCT_GRADIENT: Readonly<Record<FamilyProduct, {
7
8
  from: string;
@@ -13,12 +14,14 @@ type MarkProps = {
13
14
  label?: string;
14
15
  };
15
16
  /**
16
- * Pastille d'un produit (dégradé plein, pictogramme blanc), toujours seule : jamais dans une tuile
17
- * de couleur. `size-4` par défaut, à agrandir par `className`.
17
+ * Icône d'un produit : le pictogramme dans le dégradé du produit, sur son fond blanc, le même en
18
+ * clair et en sombre, sans bordure ni ombre. Squircle par défaut (barre des produits, menu, cartes) ;
19
+ * `shape="round"` pour « Propulsé par ». `size-4` par défaut, à agrandir par `className`.
18
20
  */
19
- export declare function ProductBadge({ product, className, label }: MarkProps & {
21
+ export declare function ProductBadge({ product, shape, className, label, }: MarkProps & {
20
22
  product: FamilyProduct;
23
+ shape?: BadgeShape;
21
24
  }): React.JSX.Element;
22
- /** Le H tricolore de la famille (« Propulsé par », hub). `size-4` par défaut. */
25
+ /** Le H « Double », marque de la H Collection (« Propulsé par », hub). `size-4` par défaut. */
23
26
  export declare function FamilyMark({ className, label }: MarkProps): React.JSX.Element;
24
27
  export {};
@@ -1,32 +1,41 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { cn } from "./cn.js";
3
- import { FAMILY_MARK_SVG, PRODUCT_BADGE_SVG } from "./family-svg.js";
3
+ import { FAMILY_MARK_SVG, PRODUCT_BADGE_SVG, } from "./family-svg.js";
4
4
  /**
5
- * Dégradé de chaque pastille, du coin haut gauche au coin bas droit. Mêmes valeurs que les jetons
6
- * `--product-<mot>-from` / `--product-<mot>-to` de `styles.css` et que les SVG de `family/`.
5
+ * Dégradé de chaque icône sur fond clair, de la teinte vive (haut gauche) à la teinte profonde (bas
6
+ * droit). Mêmes valeurs que les jetons `--product-<mot>-from` / `--product-<mot>-to` de `styles.css`
7
+ * et que les SVG de `family/`.
7
8
  */
8
9
  export const PRODUCT_GRADIENT = {
9
- account: { from: "#ff3b47", to: "#ff6352" },
10
- host: { from: "#194ff7", to: "#02b4ff" },
11
- mail: { from: "#f61f8e", to: "#ff5cb8" },
12
- portal: { from: "#4732ed", to: "#b03cff" },
13
- status: { from: "#199f62", to: "#56db29" },
14
- analytics: { from: "#fe5623", to: "#ffb003" },
15
- docs: { from: "#1bb9cf", to: "#13e4c8" },
10
+ account: { from: "#ff6a3d", to: "#c42a1a" },
11
+ host: { from: "#3b7bff", to: "#1636c9" },
12
+ mail: { from: "#f0445f", to: "#a8123d" },
13
+ portal: { from: "#8b5cff", to: "#4a22c9" },
14
+ status: { from: "#1bc488", to: "#057a55" },
15
+ analytics: { from: "#ffb020", to: "#d96a00" },
16
+ docs: { from: "#19b9d1", to: "#0a6f8f" },
16
17
  };
17
- // En image plutôt qu'en SVG en ligne : chaque pastille garde ses identifiants de dégradé pour elle,
18
- // plusieurs pastilles dans une même page ne se marchent pas dessus.
18
+ // En image plutôt qu'en SVG en ligne : chaque icône garde ses identifiants de dégradé pour elle,
19
+ // plusieurs icônes dans une même page ne se marchent pas dessus.
19
20
  function dataUri(svg) {
20
21
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
21
22
  }
22
23
  /**
23
- * Pastille d'un produit (dégradé plein, pictogramme blanc), toujours seule : jamais dans une tuile
24
- * de couleur. `size-4` par défaut, à agrandir par `className`.
24
+ * Les deux variantes du dessin, l'une sur fond clair, l'autre sur fond sombre (`.dark`) : le thème
25
+ * choisit par CSS, sans JavaScript, dès le rendu serveur.
25
26
  */
26
- export function ProductBadge({ product, className, label }) {
27
- return (_jsx("img", { src: dataUri(PRODUCT_BADGE_SVG[product]), alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, className: cn("size-4 shrink-0 select-none", className) }));
27
+ function ThemedMark({ svg, slot, className, label }) {
28
+ return (_jsxs("span", { "data-slot": slot, ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), className: cn("inline-block size-4 shrink-0 select-none", className), children: [_jsx("img", { src: dataUri(svg.light), alt: "", width: 16, height: 16, draggable: false, "data-mark-theme": "light", className: "block size-full" }), _jsx("img", { src: dataUri(svg.dark), alt: "", width: 16, height: 16, draggable: false, "data-mark-theme": "dark", className: "block size-full" })] }));
28
29
  }
29
- /** Le H tricolore de la famille (« Propulsé par », hub). `size-4` par défaut. */
30
+ /**
31
+ * Icône d'un produit : le pictogramme dans le dégradé du produit, sur son fond blanc, le même en
32
+ * clair et en sombre, sans bordure ni ombre. Squircle par défaut (barre des produits, menu, cartes) ;
33
+ * `shape="round"` pour « Propulsé par ». `size-4` par défaut, à agrandir par `className`.
34
+ */
35
+ export function ProductBadge({ product, shape = "squircle", className, label, }) {
36
+ return (_jsx("img", { src: dataUri(PRODUCT_BADGE_SVG[product][shape]), alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, "data-slot": "product-badge", "data-shape": shape, className: cn("size-4 shrink-0 select-none", className) }));
37
+ }
38
+ /** Le H « Double », marque de la H Collection (« Propulsé par », hub). `size-4` par défaut. */
30
39
  export function FamilyMark({ className, label }) {
31
- return (_jsx("img", { src: dataUri(FAMILY_MARK_SVG), alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, className: cn("size-4 shrink-0 select-none", className) }));
40
+ return _jsx(ThemedMark, { svg: FAMILY_MARK_SVG, slot: "family-mark", className: className, label: label });
32
41
  }
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff9777"/><stop offset="1" stop-color="#ff6a3d"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.61" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.8" fill-rule="evenodd"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b47"/><stop offset="1" stop-color="#ff6352"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="48" fill="#fff"/><g fill="url(#acc)"><circle cx="202" cy="232" r="30"/><path d="M154 314A48 44 0 0 1 250 314Z"/><rect x="276" y="216" width="72" height="24" rx="12"/><rect x="276" y="262" width="48" height="24" rx="12"/></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#c42a1a"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffc863"/><stop offset="1" stop-color="#ffb020"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.61" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.8" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5623"/><stop offset="1" stop-color="#ffb003"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" d="M198 304V276M256 304V240M314 304V206"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#d96a00"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg>
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#c42a1a"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/></svg></svg>
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#d96a00"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#19b9d1"/><stop offset="1" stop-color="#0a6f8f"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.6" fill-rule="evenodd"/></svg></svg>
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#1636c9"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0445f"/><stop offset="1" stop-color="#a8123d"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.35" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#4a22c9"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
Binary file
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bc488"/><stop offset="1" stop-color="#057a55"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
Binary file
Binary file
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5ecedf"/><stop offset="1" stop-color="#19b9d1"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.61" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.74" fill-rule="evenodd"/></svg>
package/family/docs.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bb9cf"/><stop offset="1" stop-color="#13e4c8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g fill="#fff"><path d="M248 196C222 176 184 168 146 174A14 14 0 0 0 134 188V324A12 12 0 0 0 148 336C184 332 220 338 248 356Z"/><path d="M264 196C290 176 328 168 366 174A14 14 0 0 1 378 188V324A12 12 0 0 1 364 336C328 332 292 338 264 356Z"/></g><path fill="none" stroke="url(#acc)" stroke-width="16" stroke-linecap="round" d="M166 226C188 224 208 228 224 238M166 266C188 264 208 268 224 278M288 238C304 228 324 224 346 226M288 278C304 268 324 264 346 266"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#19b9d1"/><stop offset="1" stop-color="#0a6f8f"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.6" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="9 9 46 46"><defs><linearGradient id="hl" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6aa0ff"/><stop offset="1" stop-color="#9a7bff"/></linearGradient><linearGradient id="hr" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7aa8"/><stop offset="1" stop-color="#ffb070"/></linearGradient><linearGradient id="hf" x1="24.5" y1="0" x2="34.5" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#000"/></linearGradient><mask id="hm" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="64"><rect x="24" y="24" width="11" height="11" fill="url(#hf)"/></mask><g id="h"><path d="M24 25H35V34H24Z" fill="url(#hr)"/><path d="M24 25H35V34H24Z" fill="url(#hl)" mask="url(#hm)"/><path d="M17.5 11.5H21.5A3 3 0 0 1 24.5 14.5V44.5A3 3 0 0 1 21.5 47.5H17.5A3 3 0 0 1 14.5 44.5V14.5A3 3 0 0 1 17.5 11.5Z" fill="url(#hl)"/><path d="M37.5 11.5H41.5A3 3 0 0 1 44.5 14.5V44.5A3 3 0 0 1 41.5 47.5H37.5A3 3 0 0 1 34.5 44.5V14.5A3 3 0 0 1 37.5 11.5Z" fill="url(#hr)"/></g></defs><use href="#h" transform="translate(6 6)" opacity="0.5"/><use href="#h"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="9 9 46 46"><defs><linearGradient id="hl" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="hr" x1="0" y1="11.5" x2="0" y2="47.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="hf" x1="24.5" y1="0" x2="34.5" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#000"/></linearGradient><mask id="hm" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="64"><rect x="24" y="24" width="11" height="11" fill="url(#hf)"/></mask><g id="h"><path d="M24 25H35V34H24Z" fill="url(#hr)"/><path d="M24 25H35V34H24Z" fill="url(#hl)" mask="url(#hm)"/><path d="M17.5 11.5H21.5A3 3 0 0 1 24.5 14.5V44.5A3 3 0 0 1 21.5 47.5H17.5A3 3 0 0 1 14.5 44.5V14.5A3 3 0 0 1 17.5 11.5Z" fill="url(#hl)"/><path d="M37.5 11.5H41.5A3 3 0 0 1 44.5 14.5V44.5A3 3 0 0 1 41.5 47.5H37.5A3 3 0 0 1 34.5 44.5V14.5A3 3 0 0 1 37.5 11.5Z" fill="url(#hr)"/></g></defs><use href="#h" transform="translate(6 6)" opacity="0.35"/><use href="#h"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#76a3ff"/><stop offset="1" stop-color="#3b7bff"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.61" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.8" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg>
package/family/host.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#194ff7"/><stop offset="1" stop-color="#02b4ff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><g transform="translate(0 6)"><g fill="#fff"><path d="M158.7 331.3A262.3 262.3 0 0 0 353.3 331.3L334 283H178Z"/><circle cx="178" cy="283" r="52"/><circle cx="334" cy="283" r="52"/><circle cx="214" cy="238" r="54"/><circle cx="288" cy="222" r="72"/><rect x="178" y="232" width="156" height="100"/></g><path fill="none" stroke="url(#acc)" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" d="M256 302V234M224 266L256 234L288 266"/></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#1636c9"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f57c8f"/><stop offset="1" stop-color="#f0445f"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.58" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.8" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg>
package/family/mail.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f61f8e"/><stop offset="1" stop-color="#ff5cb8"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="162" width="256" height="188" rx="56" fill="#fff"/><path fill="url(#acc)" d="M182 194H330A22 22 0 0 1 341.82 234.56L271.04 279.62A28 28 0 0 1 240.96 279.62L170.18 234.56A22 22 0 0 1 182 194Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0445f"/><stop offset="1" stop-color="#a8123d"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.35" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ae8dff"/><stop offset="1" stop-color="#8b5cff"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.61" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg>
package/family/portal.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4732ed"/><stop offset="1" stop-color="#b03cff"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><path fill="#fff" d="M168 160H222A24 24 0 0 1 240 168L258 188H344A40 40 0 0 1 384 228V316A40 40 0 0 1 344 356H168A40 40 0 0 1 128 316V200A40 40 0 0 1 168 160Z"/><path fill="none" stroke="url(#acc)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" d="M212 272L244 302L304 240"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#4a22c9"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5fd6ac"/><stop offset="1" stop-color="#1bc488"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.49" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.64" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg>
package/family/status.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="66 66 380 380"><defs><linearGradient id="sky" x1="96" y1="76" x2="416" y2="436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient><linearGradient id="acc" x1="150" y1="160" x2="362" y2="352" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#199f62"/><stop offset="1" stop-color="#56db29"/></linearGradient></defs><circle cx="256" cy="256" r="190" fill="url(#sky)"/><rect x="128" y="160" width="256" height="192" rx="48" fill="#fff"/><path fill="none" stroke="url(#acc)" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" d="M164 262H206L230 214L262 304L288 248H348"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bc488"/><stop offset="1" stop-color="#057a55"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#c42a1a"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#c42a1a"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#c42a1a"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V36A5 5 0 0 1 42 41H22A5 5 0 0 1 17 36V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/><path d="M18 34.5A6 6 0 1 0 30 34.5A6 6 0 1 0 18 34.5Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#d96a00"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#d96a00"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#d96a00"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#19b9d1"/><stop offset="1" stop-color="#0a6f8f"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.6" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#19b9d1"/><stop offset="1" stop-color="#0a6f8f"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.6" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#19b9d1"/><stop offset="1" stop-color="#0a6f8f"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.6" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#1636c9"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#1636c9"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#1636c9"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0445f"/><stop offset="1" stop-color="#a8123d"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.35" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0445f"/><stop offset="1" stop-color="#a8123d"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.35" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0445f"/><stop offset="1" stop-color="#a8123d"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.35" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#4a22c9"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#4a22c9"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#4a22c9"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bc488"/><stop offset="1" stop-color="#057a55"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bc488"/><stop offset="1" stop-color="#057a55"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 0C48.6 0 56.9 0 60.5 3.5C64 7.1 64 15.4 64 32C64 48.6 64 56.9 60.5 60.5C56.9 64 48.6 64 32 64C15.4 64 7.1 64 3.5 60.5C0 56.9 0 48.6 0 32C0 15.4 0 7.1 3.5 3.5C7.1 0 15.4 0 32 0Z" fill="#fff"/><svg x="11.52" y="11.52" width="40.96" height="40.96" viewBox="11 11 42 42"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1bc488"/><stop offset="1" stop-color="#057a55"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hgdc/ui",
3
- "version": "0.17.2",
3
+ "version": "0.19.0",
4
4
  "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
5
5
  "license": "UNLICENSED",
6
6
  "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",
package/styles.css CHANGED
@@ -228,31 +228,42 @@
228
228
  --inverse: oklch(0.1 0 0);
229
229
  }
230
230
 
231
- /* Identité H Collection, la même en clair et en sombre. Dégradé de chaque pastille produit
232
- (`ProductBadge`, `family/<mot>.svg`) et palette du H tricolore. Réservés aux visuels de marque
233
- (pastille, carte de produit), jamais au chrome. Couleurs pleines ; pour éclaircir, mélanger au
231
+ /* Identité H Collection. Dégradé de chaque icône produit sur fond clair, de la teinte vive à la
232
+ teinte profonde (`ProductBadge`, `family/<mot>.svg`), et palette du H « Double » sur fond clair.
233
+ Réservés aux visuels de marque (icône, carte de produit), jamais au chrome. Couleurs pleines ; pour éclaircir, mélanger au
234
234
  blanc `in oklab`, jamais `in oklch` (la teinte du blanc s'y mêle, tout vire au rose). */
235
235
  :root {
236
- --product-account-from: #ff3b47;
237
- --product-account-to: #ff6352;
238
- --product-host-from: #194ff7;
239
- --product-host-to: #02b4ff;
240
- --product-mail-from: #f61f8e;
241
- --product-mail-to: #ff5cb8;
242
- --product-portal-from: #4732ed;
243
- --product-portal-to: #b03cff;
244
- --product-status-from: #199f62;
245
- --product-status-to: #56db29;
246
- --product-analytics-from: #fe5623;
247
- --product-analytics-to: #ffb003;
248
- --product-docs-from: #1bb9cf;
249
- --product-docs-to: #13e4c8;
236
+ --product-account-from: #ff6a3d;
237
+ --product-account-to: #c42a1a;
238
+ --product-host-from: #3b7bff;
239
+ --product-host-to: #1636c9;
240
+ --product-mail-from: #f0445f;
241
+ --product-mail-to: #a8123d;
242
+ --product-portal-from: #8b5cff;
243
+ --product-portal-to: #4a22c9;
244
+ --product-status-from: #1bc488;
245
+ --product-status-to: #057a55;
246
+ --product-analytics-from: #ffb020;
247
+ --product-analytics-to: #d96a00;
248
+ --product-docs-from: #19b9d1;
249
+ --product-docs-to: #0a6f8f;
250
250
  --glow-blue: #2c78fd;
251
251
  --glow-violet: #7343fe;
252
252
  --glow-pink: #fe5292;
253
253
  --glow-orange: #ff9a46;
254
254
  }
255
255
 
256
+ /* Le H de la marque (`FamilyMark`, `HgdcMark` de @hgdc/auth) porte ses deux dessins, l'un pour
257
+ le fond clair, l'autre pour le fond sombre : le thème choisit, sans script. Les icônes des
258
+ produits, elles, ont un fond blanc et ne changent pas de dessin. */
259
+ [data-mark-theme="dark"],
260
+ .dark [data-mark-theme="light"] {
261
+ display: none;
262
+ }
263
+ .dark [data-mark-theme="dark"] {
264
+ display: block;
265
+ }
266
+
256
267
  @layer base {
257
268
  /* Une grille sans colonnes déclarées a une seule piste qui ne s'élargit jamais pour un
258
269
  texte long : sans ça, `min-width: auto` pousse la page en défilement horizontal sur
@@ -496,32 +507,85 @@
496
507
  .dark .family-loader {
497
508
  --fl-ghost-mix: 19%;
498
509
  }
510
+ /* Le H « Double » (`family/hcollection-icon.svg`, cadre de 46 unités) : le H plein, trois pièces,
511
+ devant son reflet décalé de 6 unités. Seul le H plein se remplit ; le reflet reste à 35 % (50 %
512
+ en sombre), immobile. */
513
+ .family-loader {
514
+ --fl-u: calc(var(--fl) / 46);
515
+ --fl-l0: #2c78fd;
516
+ --fl-l1: #7343fe;
517
+ --fl-r0: #fe5292;
518
+ --fl-r1: #ff9a46;
519
+ --fl-reflet: 0.35;
520
+ }
521
+ .dark .family-loader {
522
+ --fl-l0: #6aa0ff;
523
+ --fl-l1: #9a7bff;
524
+ --fl-r0: #ff7aa8;
525
+ --fl-r1: #ffb070;
526
+ --fl-reflet: 0.5;
527
+ }
499
528
  .family-loader [data-piece] {
500
529
  position: absolute;
501
530
  overflow: hidden;
502
- background: var(--fl-ghost);
503
531
  /* Le coin arrondi découpe aussi le remplissage, sur sa propre couche. */
504
532
  isolation: isolate;
505
533
  }
534
+ .family-loader > [data-piece] {
535
+ background: var(--fl-ghost);
536
+ }
506
537
  .family-loader [data-piece="left"],
507
538
  .family-loader [data-piece="right"] {
508
- top: calc(var(--fl) * 24 / 256);
509
- width: calc(var(--fl) * 57 / 256);
510
- height: calc(var(--fl) * 208 / 256);
511
- border-radius: calc(var(--fl) * 18 / 256);
539
+ z-index: 1;
540
+ top: calc(var(--fl-u) * 2.5);
541
+ width: calc(var(--fl-u) * 10);
542
+ height: calc(var(--fl-u) * 36);
543
+ border-radius: calc(var(--fl-u) * 3);
512
544
  }
513
545
  .family-loader [data-piece="left"] {
514
- left: calc(var(--fl) * 43 / 256);
546
+ left: calc(var(--fl-u) * 5.5);
515
547
  }
516
548
  .family-loader [data-piece="right"] {
517
- left: calc(var(--fl) * 156 / 256);
549
+ left: calc(var(--fl-u) * 25.5);
518
550
  }
551
+ /* Le pont déborde d'une demi-unité sous chaque montant, comme dans le dessin. */
519
552
  .family-loader [data-piece="bar"] {
520
- left: calc(var(--fl) * 67 / 256);
521
- top: calc(var(--fl) * 107 / 256);
522
- width: calc(var(--fl) * 122 / 256);
523
- height: calc(var(--fl) * 43 / 256);
524
- border-radius: calc(var(--fl) * 14 / 256);
553
+ left: calc(var(--fl-u) * 15);
554
+ top: calc(var(--fl-u) * 16);
555
+ width: calc(var(--fl-u) * 11);
556
+ height: calc(var(--fl-u) * 9);
557
+ }
558
+ /* Le reflet : le même H, plein, décalé de (6, 6), en un seul calque translucide. */
559
+ .family-loader > [data-reflet] {
560
+ position: absolute;
561
+ inset: 0;
562
+ opacity: var(--fl-reflet);
563
+ transform: translate(calc(var(--fl-u) * 6), calc(var(--fl-u) * 6));
564
+ }
565
+ /* Couleurs du H : chaque montant son dégradé vertical ; le pont prend celui du montant droit,
566
+ recouvert de celui du gauche qui s'efface de gauche à droite (le masque du dessin). Le pont
567
+ occupe les unités 25 à 34 des 11,5 à 47,5 des montants : dégradé quatre fois plus haut, centré. */
568
+ .family-loader [data-piece="left"] > *,
569
+ .family-loader [data-piece="bar"] > ::before {
570
+ background: linear-gradient(to bottom, var(--fl-l0), var(--fl-l1));
571
+ }
572
+ .family-loader [data-piece="right"] > * {
573
+ background: linear-gradient(to bottom, var(--fl-r0), var(--fl-r1));
574
+ }
575
+ .family-loader [data-piece="bar"] > * {
576
+ background: linear-gradient(to bottom, var(--fl-r0), var(--fl-r1)) 0 50% / 100% 400%;
577
+ }
578
+ .family-loader [data-piece="bar"] > ::before {
579
+ content: "";
580
+ position: absolute;
581
+ inset: 0;
582
+ background-size: 100% 400%;
583
+ background-position: 0 50%;
584
+ mask-image: linear-gradient(to right, #000 4.545%, transparent 95.455%);
585
+ }
586
+ .family-loader [data-reflet] [data-piece] > * {
587
+ position: absolute;
588
+ inset: 0;
525
589
  }
526
590
  .family-loader [data-fill] {
527
591
  position: absolute;
@@ -534,17 +598,14 @@
534
598
  animation-fill-mode: both;
535
599
  }
536
600
  .family-loader [data-piece="left"] [data-fill] {
537
- background: linear-gradient(to bottom, #2c78fd, #7343fe);
538
601
  animation-name: family-loader-left;
539
602
  }
540
603
  .family-loader [data-piece="bar"] [data-fill] {
541
- background: linear-gradient(to right, #8145ff, #fe5292);
542
604
  animation-name: family-loader-bar;
543
605
  }
544
606
  .family-loader [data-piece="right"] [data-fill] {
545
- background: linear-gradient(to bottom, #fe5292, #ff9a46);
546
- /* Le jambage droit s'ouvre depuis la barre (son milieu : 128,5 sur 256, soit 50,24 % du jambage). */
547
- transform-origin: 50% 50.24%;
607
+ /* Le jambage droit s'ouvre depuis le pont (son milieu, à 29,5 sur 11,5–47,5 : la moitié du jambage). */
608
+ transform-origin: 50% 50%;
548
609
  animation-name: family-loader-right;
549
610
  }
550
611
  /* La boucle, sur 2 s : gauche 0-500 ms, barre 300-800, droite 600-1100, H complet 1100-1500,
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="43 24 991.1 293.5"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/><path fill="#fafafa" fill-rule="evenodd" d="M957.4 317.3C935 314.4 918.7 300.9 914.8 282C911.5 265.8 919.2 250 936.1 238.5C940.6 235.5 940.6 235.4 937.2 234.7C918.8 230.4 904.1 219.3 895.6 203.4C892.8 198.2 890 190.3 889.1 185.1C888.9 184.1 888.7 183.3 888.7 183.1C888.5 182.5 887.6 176.3 887.4 173.4C886.9 167.6 886.9 85.7 887.5 85.2C888 84.6 920.3 84.6 920.8 85.1C921 85.4 921.1 89 921.1 129C921.2 177.2 921.1 173.9 922.4 178.9C926.6 195.4 940 206.5 957.2 207.7C977.4 209.1 994.7 196.5 999.5 176.7C1000.8 171.3 1000.8 174.4 1000.8 127.5C1000.9 88.2 1000.9 85.2 1001.2 85C1001.4 84.8 1005 84.8 1017.6 84.8C1033.7 84.8 1033.7 84.8 1034 85.3C1034.5 86 1034.3 239.4 1033.8 244.1C1031.8 263.7 1027.6 275.8 1018 289.3C1004.4 308.5 979.3 320.1 957.4 317.3ZM970.7 289C979.9 287.4 988.4 281.2 993.7 272.2C996.4 267.8 998.8 260 999.7 253.2C1000.2 249.7 1000.5 220.8 1000.1 220C999.8 219.5 999.8 219.5 997.1 221.6C991.4 225.9 984 230.4 978 233.2C956.7 243.2 947.5 250.9 944 261.7C941.2 270.2 943.8 279 950.5 284.2C954 286.9 957.8 288.4 963.4 289.2C964.9 289.5 968.5 289.3 970.7 289ZM867 235.3C855.2 234.4 843.9 227.7 837.9 218.1C833 210.1 830.6 202.2 829.4 190.4C829.1 187.4 829 26.8 829.3 26C829.3 25.9 829.5 25.7 829.7 25.6C830.5 25.4 862.5 25.4 862.8 25.7C863.1 25.9 863.1 33.7 863.1 105.6C863.1 189.4 863.1 187.7 864 192.3C865.8 201.5 869.8 205.9 876.6 206.1C878.9 206.1 878.8 206 880 208.8C882.2 213.4 886.5 220.3 890.1 224.8C893.1 228.6 893.1 228.5 887.4 231.3C880.9 234.5 874 235.8 867 235.3ZM276 231.9C275.6 231.6 275.6 231.6 275.6 178.5C275.6 126.2 275.6 125.4 275.2 125.3C275 125.1 271.9 125.1 266.4 125.1C259.4 125.1 257.8 125 257.5 124.8C256.9 124.4 256.9 98.9 257.4 98.3C257.7 98 258.4 98 266.4 97.9C273.7 97.9 275 97.8 275.3 97.6C275.5 97.3 275.6 96.4 275.7 88.6C275.8 76.1 276.4 70.6 278.5 63.4C282.9 47.5 293.8 35.1 309.1 28.5C312.1 27.2 319.4 25.2 322.9 24.6C328.4 23.8 346.7 24 347.7 24.9C348.2 25.3 348.2 53.2 347.7 53.7C347.4 53.9 345.7 53.9 338.2 53.9C328.2 53.9 327.9 53.9 324 55.3C317.6 57.4 312.2 63.5 310.5 70.5C309.4 74.6 309.4 75.2 309.3 86.3C309.1 96.3 309.2 97.4 309.7 97.7C309.8 97.8 318.2 97.9 328.4 97.9C344.1 97.9 347 97.9 347.3 98.2C347.8 98.5 347.9 124.2 347.5 124.7C347.3 124.9 343.5 125 328.4 125.1C314.1 125.1 309.6 125.2 309.4 125.4C309.2 125.6 309.2 137.6 309.2 178.6C309.1 230.9 309.1 231.7 308.8 231.9C308.2 232.3 276.6 232.3 276 231.9ZM536.7 231.9C536.2 231.4 536.4 143.4 536.9 139.3C538 129.6 540 122.9 544.2 114.7C555.4 92.8 580.1 79.6 604.6 82.7C621.1 84.7 633.2 92 643.3 105.7C644.5 107.3 644.7 107.3 645.8 105.9C652.4 97.2 657.9 92.6 666.5 88.3C686.2 78.5 711.2 80.9 728.5 94.3C737.2 101 743 108.3 747.4 118C750.8 125.6 752.3 131.3 753.2 140.1C753.7 145.3 753.8 231.4 753.2 231.8C752.8 232.2 720.6 232.2 720.3 231.8C720.1 231.6 720 222.9 719.9 185.2C719.8 144.2 719.8 138.6 719.5 137.2C716.7 122.3 707.5 112.3 694.7 110.5C679.5 108.3 666 118 661.6 134C660.3 139 660.4 134.7 660.3 185.7C660.2 223 660.1 231.6 659.9 231.8C659.7 232.1 629.6 232.3 628.2 232.1C627.9 232 627.5 231.9 627.3 231.7C627.1 231.4 627 226.6 627 186.6C627 161.1 626.9 140.8 626.8 139.5C625.5 121.3 611.2 108.3 594.9 110.5C583.3 112.1 574.3 120.8 571.3 133.5C570.3 137.6 570.4 135.6 570.2 184.9C570.1 229.2 570.1 231.4 569.8 231.8C569.3 232.3 537.2 232.4 536.7 231.9ZM775.3 232C775 231.9 774.8 231.7 774.7 231.6C774.6 231.4 774.5 198.5 774.5 158.4C774.5 87.4 774.5 85.5 774.8 85.1C775.5 84.5 807.9 84.6 808.3 85.2C808.9 86 808.7 231.5 808.2 231.9C807.7 232.2 776 232.3 775.3 232ZM789.3 67.4C789 67.3 788 67.2 787.2 67C783.5 66.4 779.3 64.1 776.1 61.1C770.8 56 768.5 47.9 770.3 40.7C773.5 27.7 788.9 20.5 800.8 26.5C806.6 29.4 810.5 34 812.5 40.3C813.3 43.2 813.4 48.3 812.6 51.2C810.1 59.3 804 65.1 795.9 66.9C794.4 67.3 790.3 67.6 789.3 67.4ZM432.5 77.2A84.1 80.9 0 0 1 516.7 158.1L516.7 232L484.2 232L484.2 220.9A81.9 80.9 0 1 1 432.5 77.2ZM432.5 109.7A49.4 48.4 0 1 0 432.5 206.5A49.4 48.4 0 1 0 432.5 109.7Z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="43 24 991.1 293.5"><defs><linearGradient id="l" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2c78fd"/><stop offset="1" stop-color="#7343fe"/></linearGradient><linearGradient id="r" x1="0" y1="24" x2="0" y2="232" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe5292"/><stop offset="1" stop-color="#ff9a46"/></linearGradient><linearGradient id="b" x1="64" y1="0" x2="192" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8145ff"/><stop offset="1" stop-color="#fe5292"/></linearGradient></defs><rect x="43" y="24" width="57" height="208" rx="18" fill="url(#l)"/><rect x="156" y="24" width="57" height="208" rx="18" fill="url(#r)"/><rect x="67" y="107" width="122" height="43" rx="14" fill="url(#b)"/><path fill="#0a0a0a" fill-rule="evenodd" d="M957.4 317.3C935 314.4 918.7 300.9 914.8 282C911.5 265.8 919.2 250 936.1 238.5C940.6 235.5 940.6 235.4 937.2 234.7C918.8 230.4 904.1 219.3 895.6 203.4C892.8 198.2 890 190.3 889.1 185.1C888.9 184.1 888.7 183.3 888.7 183.1C888.5 182.5 887.6 176.3 887.4 173.4C886.9 167.6 886.9 85.7 887.5 85.2C888 84.6 920.3 84.6 920.8 85.1C921 85.4 921.1 89 921.1 129C921.2 177.2 921.1 173.9 922.4 178.9C926.6 195.4 940 206.5 957.2 207.7C977.4 209.1 994.7 196.5 999.5 176.7C1000.8 171.3 1000.8 174.4 1000.8 127.5C1000.9 88.2 1000.9 85.2 1001.2 85C1001.4 84.8 1005 84.8 1017.6 84.8C1033.7 84.8 1033.7 84.8 1034 85.3C1034.5 86 1034.3 239.4 1033.8 244.1C1031.8 263.7 1027.6 275.8 1018 289.3C1004.4 308.5 979.3 320.1 957.4 317.3ZM970.7 289C979.9 287.4 988.4 281.2 993.7 272.2C996.4 267.8 998.8 260 999.7 253.2C1000.2 249.7 1000.5 220.8 1000.1 220C999.8 219.5 999.8 219.5 997.1 221.6C991.4 225.9 984 230.4 978 233.2C956.7 243.2 947.5 250.9 944 261.7C941.2 270.2 943.8 279 950.5 284.2C954 286.9 957.8 288.4 963.4 289.2C964.9 289.5 968.5 289.3 970.7 289ZM867 235.3C855.2 234.4 843.9 227.7 837.9 218.1C833 210.1 830.6 202.2 829.4 190.4C829.1 187.4 829 26.8 829.3 26C829.3 25.9 829.5 25.7 829.7 25.6C830.5 25.4 862.5 25.4 862.8 25.7C863.1 25.9 863.1 33.7 863.1 105.6C863.1 189.4 863.1 187.7 864 192.3C865.8 201.5 869.8 205.9 876.6 206.1C878.9 206.1 878.8 206 880 208.8C882.2 213.4 886.5 220.3 890.1 224.8C893.1 228.6 893.1 228.5 887.4 231.3C880.9 234.5 874 235.8 867 235.3ZM276 231.9C275.6 231.6 275.6 231.6 275.6 178.5C275.6 126.2 275.6 125.4 275.2 125.3C275 125.1 271.9 125.1 266.4 125.1C259.4 125.1 257.8 125 257.5 124.8C256.9 124.4 256.9 98.9 257.4 98.3C257.7 98 258.4 98 266.4 97.9C273.7 97.9 275 97.8 275.3 97.6C275.5 97.3 275.6 96.4 275.7 88.6C275.8 76.1 276.4 70.6 278.5 63.4C282.9 47.5 293.8 35.1 309.1 28.5C312.1 27.2 319.4 25.2 322.9 24.6C328.4 23.8 346.7 24 347.7 24.9C348.2 25.3 348.2 53.2 347.7 53.7C347.4 53.9 345.7 53.9 338.2 53.9C328.2 53.9 327.9 53.9 324 55.3C317.6 57.4 312.2 63.5 310.5 70.5C309.4 74.6 309.4 75.2 309.3 86.3C309.1 96.3 309.2 97.4 309.7 97.7C309.8 97.8 318.2 97.9 328.4 97.9C344.1 97.9 347 97.9 347.3 98.2C347.8 98.5 347.9 124.2 347.5 124.7C347.3 124.9 343.5 125 328.4 125.1C314.1 125.1 309.6 125.2 309.4 125.4C309.2 125.6 309.2 137.6 309.2 178.6C309.1 230.9 309.1 231.7 308.8 231.9C308.2 232.3 276.6 232.3 276 231.9ZM536.7 231.9C536.2 231.4 536.4 143.4 536.9 139.3C538 129.6 540 122.9 544.2 114.7C555.4 92.8 580.1 79.6 604.6 82.7C621.1 84.7 633.2 92 643.3 105.7C644.5 107.3 644.7 107.3 645.8 105.9C652.4 97.2 657.9 92.6 666.5 88.3C686.2 78.5 711.2 80.9 728.5 94.3C737.2 101 743 108.3 747.4 118C750.8 125.6 752.3 131.3 753.2 140.1C753.7 145.3 753.8 231.4 753.2 231.8C752.8 232.2 720.6 232.2 720.3 231.8C720.1 231.6 720 222.9 719.9 185.2C719.8 144.2 719.8 138.6 719.5 137.2C716.7 122.3 707.5 112.3 694.7 110.5C679.5 108.3 666 118 661.6 134C660.3 139 660.4 134.7 660.3 185.7C660.2 223 660.1 231.6 659.9 231.8C659.7 232.1 629.6 232.3 628.2 232.1C627.9 232 627.5 231.9 627.3 231.7C627.1 231.4 627 226.6 627 186.6C627 161.1 626.9 140.8 626.8 139.5C625.5 121.3 611.2 108.3 594.9 110.5C583.3 112.1 574.3 120.8 571.3 133.5C570.3 137.6 570.4 135.6 570.2 184.9C570.1 229.2 570.1 231.4 569.8 231.8C569.3 232.3 537.2 232.4 536.7 231.9ZM775.3 232C775 231.9 774.8 231.7 774.7 231.6C774.6 231.4 774.5 198.5 774.5 158.4C774.5 87.4 774.5 85.5 774.8 85.1C775.5 84.5 807.9 84.6 808.3 85.2C808.9 86 808.7 231.5 808.2 231.9C807.7 232.2 776 232.3 775.3 232ZM789.3 67.4C789 67.3 788 67.2 787.2 67C783.5 66.4 779.3 64.1 776.1 61.1C770.8 56 768.5 47.9 770.3 40.7C773.5 27.7 788.9 20.5 800.8 26.5C806.6 29.4 810.5 34 812.5 40.3C813.3 43.2 813.4 48.3 812.6 51.2C810.1 59.3 804 65.1 795.9 66.9C794.4 67.3 790.3 67.6 789.3 67.4ZM432.5 77.2A84.1 80.9 0 0 1 516.7 158.1L516.7 232L484.2 232L484.2 220.9A81.9 80.9 0 1 1 432.5 77.2ZM432.5 109.7A49.4 48.4 0 1 0 432.5 206.5A49.4 48.4 0 1 0 432.5 109.7Z"/></svg>