@jjlmoya/utils-babies 1.1.0

package/src/tool/baby-feeding-calculator/i18n/fr.ts

@@ -0,0 +1,162 @@
+import type { BabyFeedingCalculatorLocaleContent } from '../index';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+
+const slug = 'calculateur-biberons-bebe';
+const title = 'Calculateur de biberons pour bébé';
+const description = "Calculez la quantité de lait dont votre bébé a besoin selon son poids et son âge. Tétées recommandées, millilitres par tétée et signaux de faim et de satiété.";
+
+const faq = [
+  {
+    question: "De quelle quantité de lait un nouveau-né a-t-il besoin ?",
+    answer: "Le premier jour de vie, l'estomac du nouveau-né a la taille d'une cerise et ne nécessite que 5 à 7 ml par tétée. À partir du cinquième jour, la capacité passe à 45–60 ml et les besoins augmentent progressivement.",
+  },
+  {
+    question: 'À quelle fréquence un bébé doit-il manger ?',
+    answer: 'Les nouveau-nés ont besoin de 8 à 12 tétées par jour. À 3 mois, cela se réduit généralement à 7–8 tétées, et à 6 mois à environ 5 tétées par jour.',
+  },
+  {
+    question: 'Comment savoir si mon bébé mange suffisamment ?',
+    answer: "Les indicateurs les plus fiables sont : une prise de poids adéquate, au moins 5 à 6 couches mouillées par jour et des signaux de satiété après les tétées.",
+  },
+  {
+    question: "Les quantités sont-elles identiques pour l'allaitement et le lait maternisé ?",
+    answer: "Avec l'allaitement, il est recommandé de nourrir à la demande sans mesurer les volumes. Avec le lait maternisé, la référence habituelle est de 150 ml par kg de poids corporel par jour.",
+  },
+];
+
+const howTo = [
+  {
+    name: "Sélectionnez l'âge du bébé",
+    text: "Choisissez l'unité (jours, semaines ou mois) et ajustez la valeur avec le curseur ou les boutons.",
+  },
+  {
+    name: 'Entrez le poids du bébé',
+    text: 'Utilisez le curseur de poids ou les boutons pour ajuster le poids actuel du bébé en kilogrammes.',
+  },
+  {
+    name: "Sélectionnez le type d'alimentation",
+    text: 'Choisissez entre sein, mixte ou lait maternisé pour obtenir le guide le plus adapté.',
+  },
+  {
+    name: 'Consultez le plan recommandé',
+    text: 'La calculatrice affiche le nombre de tétées, les millilitres par tétée et le total journalier estimé.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+export const content: BabyFeedingCalculatorLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    labelConfig: 'Paramètres actuels',
+    labelPlan: 'Plan recommandé',
+    unitDays: 'jours',
+    unitWeeks: 'semaines',
+    unitMonths: 'mois',
+    labelWeight: 'Poids du bébé',
+    labelFeedType: "Type d'alimentation",
+    feedBreast: 'Sein',
+    feedMixed: 'Mixte',
+    feedFormula: 'Lait maternisé',
+    labelFreeDemand: 'À la demande',
+    labelMlPerFeed: 'ml par tétée',
+    labelFeedsCount: 'Tétées / 24h',
+    labelDailyTotal: 'Total journalier (est.)',
+    labelHunger: 'Signaux de faim',
+    labelFullness: 'Signaux de satiété',
+    faqTitle: 'Questions fréquentes',
+    bibliographyTitle: 'Références',
+  },
+  seo: [
+    { type: 'summary', title: "Résumé : Alimentation du bébé", items: [
+      "La capacité gastrique du nouveau-né est de seulement 5 à 7 ml le premier jour.",
+      "La référence générale pour le lait maternisé est de 150 ml par kg de poids par jour.",
+      "L'allaitement maternel est proposé à la demande sans volumes fixes.",
+      "La fréquence des tétées diminue avec l'âge : de 8–12 à 4–5 à 6 mois.",
+    ]},
+    { type: 'title', text: "De combien de lait mon bébé a-t-il besoin selon son poids et son âge ?", level: 2 },
+    { type: 'paragraph', html: "Les besoins en lait évoluent rapidement au cours des premiers mois. La calculatrice estime la quantité selon le poids actuel et l'âge du bébé, en suivant les recommandations pédiatriques de l'OMS et de l'AAP." },
+    { type: 'stats', columns: 3, items: [
+      { value: '5–7 ml', label: 'Jour 1 (taille cerise)' },
+      { value: '150 ml/kg', label: 'Référence journalière lait maternisé' },
+      { value: '8–12', label: 'Tétées/jour nouveau-né' },
+    ]},
+    { type: 'title', text: "Taille de l'estomac par âge", level: 3 },
+    { type: 'table', headers: ['Âge', 'Taille réf.', 'Capacité', 'Tétées/jour'], rows: [
+      ['Jour 1', 'Cerise', '5–7 ml', '8–12'],
+      ['Jours 2–4', 'Noix', '22–27 ml', '8–12'],
+      ['Jours 5–30', 'Oeuf', '45–60 ml', '8–10'],
+      ['1–3 mois', 'Maximale', '90–120 ml', '7–8'],
+      ['3–6 mois', 'Maximale', '120–150 ml', '5–6'],
+      ['6+ mois', 'Maximale', '150–180 ml', '4–5'],
+    ]},
+    { type: 'tip', html: "Un indicateur fiable d'une alimentation adéquate est le nombre de couches mouillées : 5 à 6 par jour à partir du cinquième jour indiquent une bonne hydratation." },
+    { type: 'title', text: "Allaitement maternel vs lait maternisé", level: 3 },
+    { type: 'comparative', columns: 2, items: [
+      { title: "Allaitement maternel", description: "Alimentation naturelle à la demande.", points: ["Pas d'horaire fixe", "Anticorps actifs", "Composition variable", "Difficile à quantifier"] },
+      { title: "Lait maternisé", description: "Tétées programmées avec volume mesurable.", points: ["Toutes les 3–4 heures", "Composition stable", "Facile à contrôler", "Préparation stérile requise"] },
+    ]},
+    { type: 'list', items: [
+      "Prise de poids adéquate : 150–200 g/semaine le premier mois",
+      "Au moins 5–6 couches mouillées par jour",
+      "Le bébé est calme après les tétées",
+      "Urine claire ou jaune très pâle",
+    ]},
+  ],
+  faqTitle: "Questions fréquentes",
+  faq,
+  bibliographyTitle: "Références",
+  bibliography: [
+    {
+      name: "OMS - Alimentation du nourrisson et du jeune enfant",
+      url: 'https://www.who.int/fr/health-topics/infant-feeding',
+    },
+    {
+      name: 'La Leche League International',
+      url: 'https://www.llli.org',
+    },
+    {
+      name: "UNICEF - Allaitement maternel",
+      url: 'https://www.unicef.fr/article/lallaitement-maternel',
+    },
+    {
+      name: "Société Française de Pédiatrie",
+      url: 'https://www.sfpediatrie.com',
+    },
+  ],
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/baby-feeding-calculator/index.ts

@@ -0,0 +1,47 @@
+import type { BabiesToolEntry, ToolDefinition, ToolLocaleContent } from '../../types';
+import BabyFeedingCalculatorComponent from './component.astro';
+import BabyFeedingCalculatorSEO from './seo.astro';
+import BabyFeedingCalculatorBibliography from './bibliography.astro';
+
+export interface BabyFeedingCalculatorUI {
+  [key: string]: string;
+  labelConfig: string;
+  labelPlan: string;
+  unitDays: string;
+  unitWeeks: string;
+  unitMonths: string;
+  labelWeight: string;
+  labelFeedType: string;
+  feedBreast: string;
+  feedMixed: string;
+  feedFormula: string;
+  labelFreeDemand: string;
+  labelMlPerFeed: string;
+  labelFeedsCount: string;
+  labelDailyTotal: string;
+  labelHunger: string;
+  labelFullness: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+}
+
+export type BabyFeedingCalculatorLocaleContent = ToolLocaleContent<BabyFeedingCalculatorUI>;
+
+export const babyFeedingCalculator: BabiesToolEntry<BabyFeedingCalculatorUI> = {
+  id: 'baby-feeding-calculator',
+  icons: { bg: 'mdi:baby-bottle', fg: 'mdi:baby-bottle-outline' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export { BabyFeedingCalculatorComponent, BabyFeedingCalculatorSEO, BabyFeedingCalculatorBibliography };
+
+export const BABY_FEEDING_CALCULATOR_TOOL: ToolDefinition = {
+  entry: babyFeedingCalculator,
+  Component: BabyFeedingCalculatorComponent,
+  SEOComponent: BabyFeedingCalculatorSEO,
+  BibliographyComponent: BabyFeedingCalculatorBibliography,
+};

package/src/tool/baby-feeding-calculator/logic.ts

@@ -0,0 +1,85 @@
+export type FeedType = 'breast' | 'mixed' | 'formula';
+export type AgeUnit = 'days' | 'weeks' | 'months';
+
+export function toAgeInDays(age: number, unit: AgeUnit): number {
+  if (unit === 'weeks') return age * 7;
+  if (unit === 'months') return age * 30.44;
+  return age;
+}
+
+export interface FeedingResult {
+  numFeeds: number;
+  perFeedMin: number;
+  perFeedMax: number;
+  totalMin: number;
+  totalMax: number;
+  showAcWarning: boolean;
+  scale: number;
+  hint: string;
+}
+
+function getStomachInfo(ageInDays: number): { scale: number; hint: string } {
+  if (ageInDays <= 1) return { scale: 0.25, hint: 'Cereza' };
+  if (ageInDays <= 4) return { scale: 0.5, hint: 'Nuez' };
+  if (ageInDays <= 30) return { scale: 0.8, hint: 'Huevo' };
+  return { scale: 1.0, hint: 'Máxima capacidad' };
+}
+
+function getNumFeeds(ageInDays: number): number {
+  if (ageInDays < 30) return 8;
+  if (ageInDays < 90) return 7;
+  if (ageInDays < 180) return 5;
+  return 4;
+}
+
+function getBaseRatio(ageInDays: number): number {
+  if (ageInDays > 300) return 80;
+  if (ageInDays > 180) return 100;
+  return 150;
+}
+
+function applyEarlyAgeFactors(
+  totalMin: number,
+  totalMax: number,
+  ageInDays: number,
+  weight: number,
+): [number, number] {
+  if (ageInDays >= 10) return [totalMin, totalMax];
+  const factor = Math.max(0.15, ageInDays / 10);
+  let min = totalMin * factor;
+  let max = totalMax * factor;
+  if (ageInDays < 2) {
+    min = weight * 15;
+    max = weight * 25;
+  }
+  return [min, max];
+}
+
+function applyAcCap(min: number, max: number): [number, number] {
+  return [Math.min(min, 800), Math.min(max, 950)];
+}
+
+function calcPerFeed(
+  totalMin: number,
+  totalMax: number,
+  numFeeds: number,
+  ageInDays: number,
+): [number, number, number, number] {
+  if (ageInDays <= 1) return [5, 10, 5 * numFeeds, 10 * numFeeds];
+  const pMin = Math.min(Math.round((totalMin / numFeeds) / 5) * 5, 240);
+  const pMax = Math.min(Math.round((totalMax / numFeeds) / 5) * 5, 270);
+  return [pMin, pMax, Math.round(totalMin), Math.round(totalMax)];
+}
+
+export function calculateFeeding(ageInDays: number, weight: number): FeedingResult {
+  const { scale, hint } = getStomachInfo(ageInDays);
+  const numFeeds = getNumFeeds(ageInDays);
+  const baseRatio = getBaseRatio(ageInDays);
+  const showAcWarning = ageInDays >= 180;
+  let tMin = weight * baseRatio;
+  let tMax = weight * (baseRatio + 20);
+  if (showAcWarning) [tMin, tMax] = applyAcCap(tMin, tMax);
+  [tMin, tMax] = applyEarlyAgeFactors(tMin, tMax, ageInDays, weight);
+  const [perFeedMin, perFeedMax, totalMin, totalMax] = calcPerFeed(tMin, tMax, numFeeds, ageInDays);
+  return { numFeeds, perFeedMin, perFeedMax, totalMin, totalMax, showAcWarning, scale, hint };
+}

package/src/tool/baby-feeding-calculator/seo.astro

@@ -0,0 +1,58 @@
+---
+import {
+  SEOTitle,
+  SEOStats,
+  SEOTip,
+  SEOTable,
+  SEOList,
+  SEOSummary,
+  SEOComparative,
+  SEOGlossary,
+  SEOArticle,
+} from '@jjlmoya/utils-shared';
+import { babyFeedingCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await babyFeedingCalculator.i18n[locale]?.();
+if (!content) return null;
+
+const { seo } = content;
+---
+
+<SEOArticle>
+  {seo.map((section: any) => {
+    switch (section.type) {
+      case 'summary':
+        return <SEOSummary title={section.title} items={section.items} />;
+      case 'title':
+        return <SEOTitle title={section.text} level={section.level || 2} />;
+      case 'paragraph':
+        return <p set:html={section.html} />;
+      case 'stats':
+        return <SEOStats stats={section.items} columns={section.columns} />;
+      case 'tip':
+        return <SEOTip><Fragment set:html={section.html} /></SEOTip>;
+      case 'table':
+        return (
+          <SEOTable headers={section.headers}>
+            {section.rows.map((row: string[]) => (
+              <tr>{row.map((cell: string) => <td set:html={cell} />)}</tr>
+            ))}
+          </SEOTable>
+        );
+      case 'list':
+        return <SEOList items={section.items} />;
+      case 'comparative':
+        return <SEOComparative items={section.items} columns={section.columns} />;
+      case 'glossary':
+        return <SEOGlossary items={section.items} />;
+      default:
+        return null;
+    }
+  })}
+</SEOArticle>

package/src/tool/baby-feeding-calculator/style.css

@@ -0,0 +1,329 @@
+.baby-feeding-calculator {
+  --bfc-bg: #fff;
+  --bfc-bg-muted: #f8fafc;
+  --bfc-bg-alt: #f1f5f9;
+  --bfc-text: #0f172a;
+  --bfc-text-muted: #334155;
+  --bfc-text-dim: #64748b;
+  --bfc-border: #e2e8f0;
+  --bfc-border-inner: #cbd5e1;
+  --bfc-shadow: rgba(0, 0, 0, 0.08);
+  --bfc-primary: #0d9488;
+  --bfc-primary-on: #fff;
+  --bfc-primary-soft: #f0fdfa;
+  --bfc-primary-glow: rgba(13, 148, 136, 0.3);
+  --bfc-hunger-bg: #fff7ed;
+  --bfc-hunger-text: #c2410c;
+  --bfc-satiety-bg: #f0fdf4;
+  --bfc-satiety-text: #15803d;
+
+  width: 100%;
+}
+
+.theme-dark .baby-feeding-calculator {
+  --bfc-bg: #111827;
+  --bfc-bg-muted: #1f2937;
+  --bfc-bg-alt: #374151;
+  --bfc-text: #f9fafb;
+  --bfc-text-muted: #e2e8f0;
+  --bfc-text-dim: #94a3b8;
+  --bfc-border: #374151;
+  --bfc-border-inner: #4b5563;
+  --bfc-shadow: rgba(0, 0, 0, 0.3);
+  --bfc-primary: #2dd4bf;
+  --bfc-primary-on: #fff;
+  --bfc-primary-soft: rgba(13, 148, 136, 0.05);
+  --bfc-primary-glow: rgba(45, 212, 191, 0.3);
+  --bfc-hunger-bg: rgba(194, 65, 12, 0.1);
+  --bfc-hunger-text: #fdba74;
+  --bfc-satiety-bg: rgba(21, 128, 61, 0.1);
+  --bfc-satiety-text: #4ade80;
+}
+
+.baby-feeding-calculator-card {
+  background: var(--bfc-bg);
+  border: 1px solid var(--bfc-border);
+  border-radius: 1rem;
+  box-shadow: 0 2px 12px var(--bfc-shadow);
+  overflow: hidden;
+  width: 100%;
+}
+
+.baby-feeding-calculator-card-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+
+@media (max-width: 720px) {
+  .baby-feeding-calculator-card-main {
+    grid-template-columns: 1fr;
+  }
+}
+
+.baby-feeding-calculator-card-left {
+  padding: 1.5rem;
+  border-right: 1px solid var(--bfc-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+@media (max-width: 720px) {
+  .baby-feeding-calculator-card-left {
+    border-right: none;
+    border-bottom: 1px solid var(--bfc-border);
+  }
+}
+
+.baby-feeding-calculator-card-right {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.baby-feeding-calculator-section-marker {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--bfc-text-dim);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--bfc-border);
+}
+
+.baby-feeding-calculator-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.baby-feeding-calculator-input-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--bfc-text-muted);
+}
+
+.baby-feeding-calculator-unit-nav {
+  display: flex;
+  gap: 0.25rem;
+  background: var(--bfc-bg-alt);
+  border-radius: 0.5rem;
+  padding: 0.2rem;
+}
+
+.baby-feeding-calculator-unit-tab {
+  flex: 1;
+  padding: 0.3rem 0.5rem;
+  border: none;
+  border-radius: 0.35rem;
+  background: transparent;
+  color: var(--bfc-text-dim);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.baby-feeding-calculator-unit-tab.active {
+  background: var(--bfc-primary);
+  color: var(--bfc-primary-on);
+}
+
+.baby-feeding-calculator-stepper-box {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.baby-feeding-calculator-btn-step {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--bfc-border-inner);
+  border-radius: 0.4rem;
+  background: var(--bfc-bg-muted);
+  color: var(--bfc-text);
+  font-size: 1.1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.baby-feeding-calculator-btn-step:hover {
+  background: var(--bfc-primary-soft);
+  border-color: var(--bfc-primary);
+  color: var(--bfc-primary);
+}
+
+.baby-feeding-calculator-val-view {
+  flex: 1;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.3rem;
+}
+
+.baby-feeding-calculator-val-big {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--bfc-text);
+}
+
+.baby-feeding-calculator-val-sub {
+  font-size: 0.75rem;
+  color: var(--bfc-text-dim);
+}
+
+.baby-feeding-calculator-slider-line {
+  width: 100%;
+  accent-color: var(--bfc-primary);
+  cursor: pointer;
+}
+
+.baby-feeding-calculator-type-rack {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.baby-feeding-calculator-type-tile {
+  flex: 1;
+  padding: 0.45rem 0.5rem;
+  border: 1px solid var(--bfc-border-inner);
+  border-radius: 0.5rem;
+  background: var(--bfc-bg-muted);
+  color: var(--bfc-text-muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.baby-feeding-calculator-type-tile.active {
+  background: var(--bfc-primary-soft);
+  border-color: var(--bfc-primary);
+  color: var(--bfc-primary);
+}
+
+.baby-feeding-calculator-gauge-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0;
+}
+
+.baby-feeding-calculator-gauge-viz {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.baby-feeding-calculator-stomach-bubble {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--bfc-primary-soft);
+  border: 2px solid var(--bfc-primary);
+  box-shadow: 0 0 16px var(--bfc-primary-glow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center;
+  transition: transform 0.4s ease;
+}
+
+.baby-feeding-calculator-visual-hint {
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--bfc-primary);
+  text-align: center;
+}
+
+.baby-feeding-calculator-res-card-box {
+  background: var(--bfc-bg-muted);
+  border: 1px solid var(--bfc-border);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  text-align: center;
+}
+
+.baby-feeding-calculator-res-main-val {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--bfc-primary);
+}
+
+.baby-feeding-calculator-res-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--bfc-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+}
+
+.baby-feeding-calculator-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.baby-feeding-calculator-stat-item {
+  background: var(--bfc-bg-muted);
+  border: 1px solid var(--bfc-border);
+  border-radius: 0.6rem;
+  padding: 0.75rem 0.5rem;
+  text-align: center;
+}
+
+.baby-feeding-calculator-stat-value {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--bfc-text);
+  margin-bottom: 0.2rem;
+}
+
+.baby-feeding-calculator-stat-label {
+  font-size: 0.65rem;
+  color: var(--bfc-text-dim);
+}
+
+.baby-feeding-calculator-behavior-sec {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.baby-feeding-calculator-pills-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.baby-feeding-calculator-pill {
+  display: inline-block;
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.baby-feeding-calculator-pill-hambre {
+  background: var(--bfc-hunger-bg);
+  color: var(--bfc-hunger-text);
+}
+
+.baby-feeding-calculator-pill-saciedad {
+  background: var(--bfc-satiety-bg);
+  color: var(--bfc-satiety-text);
+}
+
+.baby-feeding-calculator-hidden {
+  display: none;
+}

package/src/tool/baby-percentile-calculator/bibliography.astro

@@ -0,0 +1,7 @@
+---
+import { Bibliography as BibliographyUI } from '@jjlmoya/utils-shared';
+import type { BibliographyEntry } from '../../types';
+interface Props { links?: BibliographyEntry[]; title: string; }
+const { links = [], title } = Astro.props;
+---
+<BibliographyUI links={links} title={title} />