@mediquo/medicore 0.1.0

package/dist/components/card-professional-mini/card-professional-mini.d.ts

@@ -0,0 +1,22 @@
+import type { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+import { type CardHeadingLevel } from "../card";
+export interface CardProfessionalMiniProps extends Omit<ComponentProps<"article">, "title"> {
+    /** "Dra. Paula García". The card's heading. */
+    name: ReactNode;
+    /** "Nº de colegiado 282873573": their own, never a repeated placeholder number. */
+    license: ReactNode;
+    /** A real photo, always: never initials or an icon for a professional. */
+    avatarSrc?: string;
+    /** Their full profile (`CardProfessional`) when they have an agenda. The whole card links. */
+    href?: string;
+    /** Router link: `render={<Link to="…" />}`. */
+    render?: useRender.RenderProp;
+    /** Level of the name's heading. Default 3. */
+    headingLevel?: CardHeadingLevel;
+}
+/**
+ * A professional of a programme's medical team: photo + name + licence number, the
+ * first trust signal.
+ */
+export declare function CardProfessionalMini({ name, license, avatarSrc, href, render, headingLevel, className, ...props }: CardProfessionalMiniProps): React.JSX.Element;

package/dist/components/card-professional-mini/card-professional-mini.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Avatar } from "../avatar/avatar.js";
+import { CardLink } from "../card/card.js";
+function CardProfessionalMini({
+  name,
+  license,
+  avatarSrc,
+  href,
+  render,
+  headingLevel = 3,
+  className,
+  ...props
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "card-professional-mini",
+      className: cn(
+        "relative flex min-w-0 flex-col items-center gap-2 rounded-xl bg-background p-4 text-center shadow-s",
+        href || render ? "transition-colors hover:bg-surface" : void 0,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { size: 56, src: avatarSrc }),
+        /* @__PURE__ */ jsx(Heading, { className: "text-label-strong text-text-primary", children: href || render ? /* @__PURE__ */ jsx(CardLink, { href, render, children: name }) : name }),
+        /* @__PURE__ */ jsx("p", { className: "text-label-small text-text-secondary", children: license })
+      ]
+    }
+  );
+}
+export {
+  CardProfessionalMini
+};
+//# sourceMappingURL=card-professional-mini.js.map

package/dist/components/card-professional-mini/card-professional-mini.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-professional-mini.js","sources":["../../../src/components/card-professional-mini/card-professional-mini.tsx"],"sourcesContent":["import type { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Avatar } from \"../avatar\";\nimport { type CardHeadingLevel, CardLink } from \"../card\";\n\nexport interface CardProfessionalMiniProps\n  extends Omit<ComponentProps<\"article\">, \"title\"> {\n  /** \"Dra. Paula García\". The card's heading. */\n  name: ReactNode;\n  /** \"Nº de colegiado 282873573\": their own, never a repeated placeholder number. */\n  license: ReactNode;\n  /** A real photo, always: never initials or an icon for a professional. */\n  avatarSrc?: string;\n  /** Their full profile (`CardProfessional`) when they have an agenda. The whole card links. */\n  href?: string;\n  /** Router link: `render={<Link to=\"…\" />}`. */\n  render?: useRender.RenderProp;\n  /** Level of the name's heading. Default 3. */\n  headingLevel?: CardHeadingLevel;\n}\n\n/**\n * A professional of a programme's medical team: photo + name + licence number, the\n * first trust signal.\n */\nexport function CardProfessionalMini({\n  name,\n  license,\n  avatarSrc,\n  href,\n  render,\n  headingLevel = 3,\n  className,\n  ...props\n}: CardProfessionalMiniProps): React.JSX.Element {\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <article\n      data-slot=\"card-professional-mini\"\n      className={cn(\n        \"relative flex min-w-0 flex-col items-center gap-2 rounded-xl bg-background p-4 text-center shadow-s\",\n        href || render ? \"transition-colors hover:bg-surface\" : undefined,\n        className,\n      )}\n      {...props}\n    >\n      <Avatar size={56} src={avatarSrc} />\n      <Heading className=\"text-label-strong text-text-primary\">\n        {href || render ? (\n          <CardLink href={href} render={render}>\n            {name}\n          </CardLink>\n        ) : (\n          name\n        )}\n      </Heading>\n      <p className=\"text-label-small text-text-secondary\">{license}</p>\n    </article>\n  );\n}\n"],"names":[],"mappings":";;;;AA2BO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,QAAM,UAAU,IAAI,YAAY;AAEhC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,SAAS,uCAAuC;AAAA,QACxD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAO,MAAM,IAAI,KAAK,WAAW;AAAA,QAClC,oBAAC,SAAA,EAAQ,WAAU,uCAChB,UAAA,QAAQ,SACP,oBAAC,UAAA,EAAS,MAAY,QACnB,UAAA,KAAA,CACH,IAEA,MAEJ;AAAA,QACA,oBAAC,KAAA,EAAE,WAAU,wCAAwC,UAAA,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE;"}

package/dist/components/card-professional-mini/index.d.ts

@@ -0,0 +1 @@
+export { CardProfessionalMini, type CardProfessionalMiniProps, } from "./card-professional-mini";

package/dist/components/card-program/card-program.d.ts

@@ -0,0 +1,45 @@
+import type { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+import { type CardHeadingLevel } from "../card";
+export type CardProgramLayout = "grid" | "featured";
+export interface CardProgramProps extends Omit<ComponentProps<"article">, "title"> {
+    /** "Pérdida de peso". The card's heading and the link's name. */
+    title: ReactNode;
+    /** One or two lines. Hidden in the compact (Mobile) card. */
+    description?: ReactNode;
+    /**
+     * The live price of THIS clinic's page, es-ES format with a space: "Desde 30 €",
+     * "29,99 €". Never another clinic's price.
+     */
+    price: ReactNode;
+    /** "Videoconsulta". Shown after the price with a "·". Hidden in the compact card. */
+    channel?: ReactNode;
+    /** A real photo from mediQuo's image line: `<img src="…" alt="" />` if it adds nothing. */
+    image?: ReactNode;
+    /** "Tratamiento destacado": a brand Badge (on the image in Grid, above the title in Featured). */
+    badge?: ReactNode;
+    /** Featured only: a metric Badge next to `badge` ("4,6/5 valoración"). */
+    metric?: ReactNode;
+    /** The programme's page. The whole card is this link. */
+    href?: string;
+    /** Router link: `render={<Link to="…" />}`. */
+    render?: useRender.RenderProp;
+    /** Featured only: the one action, a primary `Button` "Reservar consulta" (never "Empezar tratamiento"). */
+    action?: ReactNode;
+    /**
+     * `grid` (default): the three-column grid; below 240px wide it becomes the compact
+     * Mobile card (two-column grid on a phone) by itself. `featured`: the highlighted
+     * programme, horizontal from 640px wide.
+     */
+    layout?: CardProgramLayout;
+    /** Level of the title's heading. Default 3. */
+    headingLevel?: CardHeadingLevel;
+}
+/**
+ * A specialised programme (Clínic). The whole card is the link to the programme's
+ * page (a `CardLink` in the title); the arrow is decorative. One action.
+ *
+ * Figma `Layout=Mobile` is not a value: the `grid` card turns compact (no
+ * description, no channel, no arrow) when its column is narrower than 240px.
+ */
+export declare function CardProgram({ title, description, price, channel, image, badge, metric, href, render, action, layout, headingLevel, className, ...props }: CardProgramProps): React.JSX.Element;

package/dist/components/card-program/card-program.js

@@ -0,0 +1,142 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ArrowNarrowRightIcon } from "../../icons/generated/arrow-narrow-right.js";
+import { cn } from "../../lib/cn.js";
+import { Badge } from "../badge/badge.js";
+import { CardLink } from "../card/card.js";
+function ImageSlot({
+  image,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative shrink-0 overflow-hidden bg-brand-subtle [&>img]:size-full [&>img]:object-cover",
+        className
+      ),
+      children: [
+        image,
+        children
+      ]
+    }
+  );
+}
+function CardProgram({
+  title,
+  description,
+  price,
+  channel,
+  image,
+  badge,
+  metric,
+  href,
+  render,
+  action,
+  layout = "grid",
+  headingLevel = 3,
+  className,
+  ...props
+}) {
+  const Heading = `h${headingLevel}`;
+  const heading = href || render ? /* @__PURE__ */ jsx(CardLink, { href, render, children: title }) : title;
+  const priceRow = /* @__PURE__ */ jsxs("p", { className: "flex min-w-0 flex-wrap items-baseline gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-label-strong text-text-primary", children: price }),
+    channel && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "text-body-small text-text-secondary",
+          layout === "grid" && "hidden @min-[240px]:inline"
+        ),
+        children: [
+          "· ",
+          channel
+        ]
+      }
+    )
+  ] });
+  if (layout === "featured") {
+    return /* @__PURE__ */ jsx(
+      "article",
+      {
+        "data-slot": "card-program",
+        "data-layout": "featured",
+        className: cn(
+          "@container relative min-w-0 rounded-xl bg-background shadow-s",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col @min-[640px]:flex-row", children: [
+          /* @__PURE__ */ jsx(
+            ImageSlot,
+            {
+              image,
+              className: "h-40 rounded-t-xl @min-[640px]:h-auto @min-[640px]:min-h-60 @min-[640px]:w-1/2 @min-[640px]:rounded-tr-none @min-[640px]:rounded-l-xl"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-4 p-6 @min-[640px]:p-8", children: [
+            (badge || metric) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              badge && /* @__PURE__ */ jsx(Badge, { variant: "brand", children: badge }),
+              metric && /* @__PURE__ */ jsx(Badge, { children: metric })
+            ] }),
+            /* @__PURE__ */ jsx(Heading, { className: "text-heading-h2 text-text-primary", children: heading }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: description }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+              priceRow,
+              action && /* @__PURE__ */ jsx("div", { className: "relative z-10 flex", children: action })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "card-program",
+      "data-layout": "grid",
+      className: cn(
+        "@container relative flex min-w-0 flex-col rounded-xl bg-background shadow-s",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ImageSlot,
+          {
+            image,
+            className: "h-27.5 rounded-t-xl @min-[240px]:h-40",
+            children: badge && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "brand",
+                className: "absolute top-3 left-3 hidden @min-[240px]:inline-flex",
+                children: badge
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2 p-3 @min-[240px]:p-4", children: [
+          /* @__PURE__ */ jsx(Heading, { className: "text-label-strong text-text-primary @min-[240px]:text-heading-h4", children: heading }),
+          description && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 hidden text-body-small text-text-secondary @min-[240px]:block", children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: priceRow }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "hidden size-7 shrink-0 items-center justify-center rounded-full bg-brand text-text-inverse @min-[240px]:flex",
+                children: /* @__PURE__ */ jsx(ArrowNarrowRightIcon, { size: "sm" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CardProgram
+};
+//# sourceMappingURL=card-program.js.map

package/dist/components/card-program/card-program.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-program.js","sources":["../../../src/components/card-program/card-program.tsx"],"sourcesContent":["import type { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { ArrowNarrowRightIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { Badge } from \"../badge\";\nimport { type CardHeadingLevel, CardLink } from \"../card\";\n\nexport type CardProgramLayout = \"grid\" | \"featured\";\n\nexport interface CardProgramProps\n  extends Omit<ComponentProps<\"article\">, \"title\"> {\n  /** \"Pérdida de peso\". The card's heading and the link's name. */\n  title: ReactNode;\n  /** One or two lines. Hidden in the compact (Mobile) card. */\n  description?: ReactNode;\n  /**\n   * The live price of THIS clinic's page, es-ES format with a space: \"Desde 30 €\",\n   * \"29,99 €\". Never another clinic's price.\n   */\n  price: ReactNode;\n  /** \"Videoconsulta\". Shown after the price with a \"·\". Hidden in the compact card. */\n  channel?: ReactNode;\n  /** A real photo from mediQuo's image line: `<img src=\"…\" alt=\"\" />` if it adds nothing. */\n  image?: ReactNode;\n  /** \"Tratamiento destacado\": a brand Badge (on the image in Grid, above the title in Featured). */\n  badge?: ReactNode;\n  /** Featured only: a metric Badge next to `badge` (\"4,6/5 valoración\"). */\n  metric?: ReactNode;\n  /** The programme's page. The whole card is this link. */\n  href?: string;\n  /** Router link: `render={<Link to=\"…\" />}`. */\n  render?: useRender.RenderProp;\n  /** Featured only: the one action, a primary `Button` \"Reservar consulta\" (never \"Empezar tratamiento\"). */\n  action?: ReactNode;\n  /**\n   * `grid` (default): the three-column grid; below 240px wide it becomes the compact\n   * Mobile card (two-column grid on a phone) by itself. `featured`: the highlighted\n   * programme, horizontal from 640px wide.\n   */\n  layout?: CardProgramLayout;\n  /** Level of the title's heading. Default 3. */\n  headingLevel?: CardHeadingLevel;\n}\n\nfunction ImageSlot({\n  image,\n  className,\n  children,\n}: {\n  image?: ReactNode;\n  className?: string;\n  children?: ReactNode;\n}): React.JSX.Element {\n  return (\n    <div\n      className={cn(\n        \"relative shrink-0 overflow-hidden bg-brand-subtle [&>img]:size-full [&>img]:object-cover\",\n        className,\n      )}\n    >\n      {image}\n      {children}\n    </div>\n  );\n}\n\n/**\n * A specialised programme (Clínic). The whole card is the link to the programme's\n * page (a `CardLink` in the title); the arrow is decorative. One action.\n *\n * Figma `Layout=Mobile` is not a value: the `grid` card turns compact (no\n * description, no channel, no arrow) when its column is narrower than 240px.\n */\nexport function CardProgram({\n  title,\n  description,\n  price,\n  channel,\n  image,\n  badge,\n  metric,\n  href,\n  render,\n  action,\n  layout = \"grid\",\n  headingLevel = 3,\n  className,\n  ...props\n}: CardProgramProps): React.JSX.Element {\n  const Heading = `h${headingLevel}` as const;\n  const heading =\n    href || render ? (\n      <CardLink href={href} render={render}>\n        {title}\n      </CardLink>\n    ) : (\n      title\n    );\n\n  const priceRow = (\n    <p className=\"flex min-w-0 flex-wrap items-baseline gap-1\">\n      <span className=\"text-label-strong text-text-primary\">{price}</span>\n      {channel && (\n        <span\n          className={cn(\n            \"text-body-small text-text-secondary\",\n            layout === \"grid\" && \"hidden @min-[240px]:inline\",\n          )}\n        >\n          · {channel}\n        </span>\n      )}\n    </p>\n  );\n\n  if (layout === \"featured\") {\n    return (\n      <article\n        data-slot=\"card-program\"\n        data-layout=\"featured\"\n        className={cn(\n          \"@container relative min-w-0 rounded-xl bg-background shadow-s\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex flex-col @min-[640px]:flex-row\">\n          <ImageSlot\n            image={image}\n            className=\"h-40 rounded-t-xl @min-[640px]:h-auto @min-[640px]:min-h-60 @min-[640px]:w-1/2 @min-[640px]:rounded-tr-none @min-[640px]:rounded-l-xl\"\n          />\n          <div className=\"flex min-w-0 flex-1 flex-col justify-center gap-4 p-6 @min-[640px]:p-8\">\n            {(badge || metric) && (\n              <div className=\"flex flex-wrap gap-2\">\n                {badge && <Badge variant=\"brand\">{badge}</Badge>}\n                {metric && <Badge>{metric}</Badge>}\n              </div>\n            )}\n            <Heading className=\"text-heading-h2 text-text-primary\">\n              {heading}\n            </Heading>\n            {description && (\n              <p className=\"text-body-small text-text-secondary\">\n                {description}\n              </p>\n            )}\n            <div className=\"flex flex-wrap items-center justify-between gap-4\">\n              {priceRow}\n              {action && <div className=\"relative z-10 flex\">{action}</div>}\n            </div>\n          </div>\n        </div>\n      </article>\n    );\n  }\n\n  return (\n    <article\n      data-slot=\"card-program\"\n      data-layout=\"grid\"\n      className={cn(\n        \"@container relative flex min-w-0 flex-col rounded-xl bg-background shadow-s\",\n        className,\n      )}\n      {...props}\n    >\n      <ImageSlot\n        image={image}\n        className=\"h-27.5 rounded-t-xl @min-[240px]:h-40\"\n      >\n        {badge && (\n          <Badge\n            variant=\"brand\"\n            className=\"absolute top-3 left-3 hidden @min-[240px]:inline-flex\"\n          >\n            {badge}\n          </Badge>\n        )}\n      </ImageSlot>\n      <div className=\"flex flex-1 flex-col gap-2 p-3 @min-[240px]:p-4\">\n        <Heading className=\"text-label-strong text-text-primary @min-[240px]:text-heading-h4\">\n          {heading}\n        </Heading>\n        {description && (\n          <p className=\"line-clamp-3 hidden text-body-small text-text-secondary @min-[240px]:block\">\n            {description}\n          </p>\n        )}\n        <div className=\"mt-auto flex items-center gap-2\">\n          <div className=\"min-w-0 flex-1\">{priceRow}</div>\n          <span\n            aria-hidden\n            className=\"hidden size-7 shrink-0 items-center justify-center rounded-full bg-brand text-text-inverse @min-[240px]:flex\"\n          >\n            <ArrowNarrowRightIcon size=\"sm\" />\n          </span>\n        </div>\n      </div>\n    </article>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/card-program/index.d.ts

@@ -0,0 +1 @@
+export { CardProgram, type CardProgramLayout, type CardProgramProps, } from "./card-program";

package/dist/components/card-service-option/card-service-option.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { CardHeadingLevel } from "../card";
+export interface CardServiceOptionProps extends Omit<ComponentProps<"article">, "title"> {
+    /** "Consulta médica". */
+    title: ReactNode;
+    /** "Videoconsulta con un médico especialista. Evaluación completa de tu caso." */
+    description?: ReactNode;
+    /** es-ES format with a space: "30 €". */
+    price: ReactNode;
+    /** What it includes and how long it lasts: "Valoración inicial", "30 min". Neutral Badges. */
+    includes?: string[];
+    /**
+     * The recommended one: 2px brand border and "La más solicitada"
+     * (`serviceOptionFeatured` label). Only one per page.
+     */
+    featured?: boolean;
+    /**
+     * "Reservar consulta": a `Button`, PRIMARY only in the featured option and
+     * secondary in the others — if every option has a purple button, none stands out.
+     */
+    action?: ReactNode;
+    /** Level of the title's heading. Default 3. */
+    headingLevel?: CardHeadingLevel;
+}
+/**
+ * One service option inside a programme page (initial consultation, follow-up,
+ * nutrition…).
+ *
+ * Figma `Layout` is not a prop: from 560px wide the price and the button sit on the
+ * right (Desktop); below it everything stacks and the button takes the full width
+ * (Mobile).
+ */
+export declare function CardServiceOption({ title, description, price, includes, featured, action, headingLevel, className, ...props }: CardServiceOptionProps): React.JSX.Element;

package/dist/components/card-service-option/card-service-option.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Badge } from "../badge/badge.js";
+function CardServiceOption({
+  title,
+  description,
+  price,
+  includes,
+  featured = false,
+  action,
+  headingLevel = 3,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      "data-slot": "card-service-option",
+      "data-featured": featured || void 0,
+      className: cn(
+        "@container min-w-0 rounded-xl bg-background shadow-s",
+        featured && "border-2 border-text-brand",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4 @min-[560px]:flex-row @min-[560px]:items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Heading, { className: "text-body-default-strong text-text-primary", children: title }),
+            featured && /* @__PURE__ */ jsx(Badge, { variant: "brand", children: labels.serviceOptionFeatured })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: description }),
+          includes && includes.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2", children: includes.map((item) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(Badge, { children: item }) }, item)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-2 @min-[560px]:items-end", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-heading-h3 text-text-primary", children: price }),
+          action && /* @__PURE__ */ jsx("div", { className: "flex *:flex-1 @min-[560px]:*:flex-none", children: action })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  CardServiceOption
+};
+//# sourceMappingURL=card-service-option.js.map

package/dist/components/card-service-option/card-service-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-service-option.js","sources":["../../../src/components/card-service-option/card-service-option.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Badge } from \"../badge\";\nimport type { CardHeadingLevel } from \"../card\";\n\nexport interface CardServiceOptionProps\n  extends Omit<ComponentProps<\"article\">, \"title\"> {\n  /** \"Consulta médica\". */\n  title: ReactNode;\n  /** \"Videoconsulta con un médico especialista. Evaluación completa de tu caso.\" */\n  description?: ReactNode;\n  /** es-ES format with a space: \"30 €\". */\n  price: ReactNode;\n  /** What it includes and how long it lasts: \"Valoración inicial\", \"30 min\". Neutral Badges. */\n  includes?: string[];\n  /**\n   * The recommended one: 2px brand border and \"La más solicitada\"\n   * (`serviceOptionFeatured` label). Only one per page.\n   */\n  featured?: boolean;\n  /**\n   * \"Reservar consulta\": a `Button`, PRIMARY only in the featured option and\n   * secondary in the others — if every option has a purple button, none stands out.\n   */\n  action?: ReactNode;\n  /** Level of the title's heading. Default 3. */\n  headingLevel?: CardHeadingLevel;\n}\n\n/**\n * One service option inside a programme page (initial consultation, follow-up,\n * nutrition…).\n *\n * Figma `Layout` is not a prop: from 560px wide the price and the button sit on the\n * right (Desktop); below it everything stacks and the button takes the full width\n * (Mobile).\n */\nexport function CardServiceOption({\n  title,\n  description,\n  price,\n  includes,\n  featured = false,\n  action,\n  headingLevel = 3,\n  className,\n  ...props\n}: CardServiceOptionProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <article\n      data-slot=\"card-service-option\"\n      data-featured={featured || undefined}\n      className={cn(\n        \"@container min-w-0 rounded-xl bg-background shadow-s\",\n        featured && \"border-2 border-text-brand\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-6 p-4 @min-[560px]:flex-row @min-[560px]:items-center\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <Heading className=\"text-body-default-strong text-text-primary\">\n              {title}\n            </Heading>\n            {featured && (\n              <Badge variant=\"brand\">{labels.serviceOptionFeatured}</Badge>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-body-small text-text-secondary\">{description}</p>\n          )}\n          {includes && includes.length > 0 && (\n            <ul className=\"flex flex-wrap gap-2\">\n              {includes.map((item) => (\n                <li key={item} className=\"flex\">\n                  <Badge>{item}</Badge>\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n        <div className=\"flex shrink-0 flex-col gap-2 @min-[560px]:items-end\">\n          <p className=\"text-heading-h3 text-text-primary\">{price}</p>\n          {action && (\n            <div className=\"flex *:flex-1 @min-[560px]:*:flex-none\">\n              {action}\n            </div>\n          )}\n        </div>\n      </div>\n    </article>\n  );\n}\n"],"names":[],"mappings":";;;;AAuCO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAA8C;AAC5C,QAAM,SAAS,kBAAA;AACf,QAAM,UAAU,IAAI,YAAY;AAEhC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe,YAAY;AAAA,MAC3B,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAA,EAAI,WAAU,2EACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,YAAA,oBAAC,SAAA,EAAQ,WAAU,8CAChB,UAAA,OACH;AAAA,YACC,YACC,oBAAC,OAAA,EAAM,SAAQ,SAAS,iBAAO,sBAAA,CAAsB;AAAA,UAAA,GAEzD;AAAA,UACC,eACC,oBAAC,KAAA,EAAE,WAAU,uCAAuC,UAAA,aAAY;AAAA,UAEjE,YAAY,SAAS,SAAS,yBAC5B,MAAA,EAAG,WAAU,wBACX,UAAA,SAAS,IAAI,CAAC,SACb,oBAAC,MAAA,EAAc,WAAU,QACvB,UAAA,oBAAC,SAAO,UAAA,KAAA,CAAK,KADN,IAET,CACD,EAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACA,qBAAC,OAAA,EAAI,WAAU,uDACb,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,qCAAqC,UAAA,OAAM;AAAA,UACvD,UACC,oBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA,OAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/card-service-option/index.d.ts

@@ -0,0 +1 @@
+export { CardServiceOption, type CardServiceOptionProps, } from "./card-service-option";

package/dist/components/card-testimonial/card-testimonial.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface CardTestimonialProps extends ComponentProps<"figure"> {
+    /** The review, quotes included. Real and authorised, from THIS programme. */
+    quote: ReactNode;
+    /** Name + initial of the surname: "Sofía M.". */
+    author: ReactNode;
+    /** 1–5, read-only brand stars (`Rating`), never amber. Default 5. */
+    rating?: number;
+}
+/**
+ * A patient's review. Only real, authorised reviews of the programme where it
+ * appears, and no figures of guaranteed results. It says so under the author:
+ * "Reseña real autorizada" (`testimonialVerified` label).
+ *
+ * A `<figure>`: the quote in a `<blockquote>`, the author in the `<figcaption>`.
+ */
+export declare function CardTestimonial({ quote, author, rating, className, ...props }: CardTestimonialProps): React.JSX.Element;

package/dist/components/card-testimonial/card-testimonial.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Rating } from "../rating/rating.js";
+function CardTestimonial({
+  quote,
+  author,
+  rating = 5,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "data-slot": "card-testimonial",
+      className: cn(
+        "flex min-w-0 flex-col gap-4 rounded-xl bg-background p-4 shadow-s",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Rating, { readOnly: true, value: rating }),
+        /* @__PURE__ */ jsx("blockquote", { className: "text-body-default text-text-primary", children: quote }),
+        /* @__PURE__ */ jsxs("figcaption", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-label-strong text-text-primary", children: author }),
+          /* @__PURE__ */ jsx("span", { className: "text-label-small text-text-secondary", children: labels.testimonialVerified })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CardTestimonial
+};
+//# sourceMappingURL=card-testimonial.js.map

package/dist/components/card-testimonial/card-testimonial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-testimonial.js","sources":["../../../src/components/card-testimonial/card-testimonial.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Rating } from \"../rating\";\n\nexport interface CardTestimonialProps extends ComponentProps<\"figure\"> {\n  /** The review, quotes included. Real and authorised, from THIS programme. */\n  quote: ReactNode;\n  /** Name + initial of the surname: \"Sofía M.\". */\n  author: ReactNode;\n  /** 1–5, read-only brand stars (`Rating`), never amber. Default 5. */\n  rating?: number;\n}\n\n/**\n * A patient's review. Only real, authorised reviews of the programme where it\n * appears, and no figures of guaranteed results. It says so under the author:\n * \"Reseña real autorizada\" (`testimonialVerified` label).\n *\n * A `<figure>`: the quote in a `<blockquote>`, the author in the `<figcaption>`.\n */\nexport function CardTestimonial({\n  quote,\n  author,\n  rating = 5,\n  className,\n  ...props\n}: CardTestimonialProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <figure\n      data-slot=\"card-testimonial\"\n      className={cn(\n        \"flex min-w-0 flex-col gap-4 rounded-xl bg-background p-4 shadow-s\",\n        className,\n      )}\n      {...props}\n    >\n      <Rating readOnly value={rating} />\n      <blockquote className=\"text-body-default text-text-primary\">\n        {quote}\n      </blockquote>\n      <figcaption className=\"flex flex-col gap-0.5\">\n        <span className=\"text-label-strong text-text-primary\">{author}</span>\n        <span className=\"text-label-small text-text-secondary\">\n          {labels.testimonialVerified}\n        </span>\n      </figcaption>\n    </figure>\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,kBAAA;AAEf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAO,UAAQ,MAAC,OAAO,QAAQ;AAAA,QAChC,oBAAC,cAAA,EAAW,WAAU,uCACnB,UAAA,OACH;AAAA,QACA,qBAAC,cAAA,EAAW,WAAU,yBACpB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,QAAO;AAAA,UAC9D,oBAAC,QAAA,EAAK,WAAU,wCACb,iBAAO,oBAAA,CACV;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/card-testimonial/index.d.ts

@@ -0,0 +1 @@
+export { CardTestimonial, type CardTestimonialProps, } from "./card-testimonial";

package/dist/components/chat/chat-attachment.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ChatMessageDirection } from "./chat-bubble";
+export interface ChatAttachmentProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Default `incoming` (the professional sends the prescription). */
+    direction?: ChatMessageDirection;
+    /**
+     * The document in human words: "Receta · Paracetamol 1 g", never the file name
+     * ("rx_2026_10_01_883.pdf"). It also names the download link.
+     */
+    name: string;
+    /** Type and size: "PDF · 120 KB". 120 KB on mobile data isn't the same as 12 MB. */
+    meta?: ReactNode;
+    /** Visible time, "10:06". */
+    time: string;
+    /** Machine-readable moment for `<time>` (ISO 8601). */
+    dateTime?: string;
+    /** Who sent it, for screen readers. Outgoing defaults to "Tú". */
+    sender?: string;
+    /** The file's URL: the download is a real link with `download`. */
+    href: string;
+    /** Suggested file name for `download`. */
+    fileName?: string;
+    /** Default `file-06`. */
+    icon?: ReactNode;
+}
+/**
+ * A document sent through the chat: the prescription, the report, the sick note.
+ * Same bubble as a message, with a white file card inside.
+ *
+ * The download is a link with `download` and the name "Descargar Receta ·
+ * Paracetamol 1 g". The document must also live in "Mis documentos": the chat
+ * can't be the only place a prescription exists.
+ */
+export declare function ChatAttachment({ direction, name, meta, time, dateTime, sender, href, fileName, icon, className, ...props }: ChatAttachmentProps): React.JSX.Element;

package/dist/components/chat/chat-attachment.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Download02Icon } from "../../icons/generated/download-02.js";
+import { File06Icon } from "../../icons/generated/file-06.js";
+import { cn } from "../../lib/cn.js";
+import { chatBubbleVariants } from "./chat-bubble.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { IconContainer } from "../icon-container/icon-container.js";
+import { IconButton } from "../icon-button/icon-button.js";
+const asLink = { nativeButton: false, role: void 0 };
+function ChatAttachment({
+  direction = "incoming",
+  name,
+  meta,
+  time,
+  dateTime,
+  sender,
+  href,
+  fileName,
+  icon = /* @__PURE__ */ jsx(File06Icon, {}),
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const outgoing = direction === "outgoing";
+  const senderName = sender ?? (outgoing ? labels.chatYou : void 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-attachment",
+      "data-direction": direction,
+      className: cn(
+        "flex w-full",
+        outgoing ? "justify-end" : "justify-start",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(chatBubbleVariants({ direction }), "w-68 max-w-full p-2"),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-background p-2", children: [
+              /* @__PURE__ */ jsx(IconContainer, { icon, size: 40, tone: "brand" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsxs("p", { className: "line-clamp-2 text-label-strong text-text-primary", children: [
+                  senderName && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                    labels.chatMessageFrom(senderName, time),
+                    " "
+                  ] }),
+                  name
+                ] }),
+                meta && /* @__PURE__ */ jsx("p", { className: "truncate text-caption-default text-text-secondary", children: meta })
+              ] }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost",
+                  size: "small",
+                  icon: /* @__PURE__ */ jsx(Download02Icon, {}),
+                  "aria-label": labels.chatDownload(name),
+                  ...asLink,
+                  render: (
+                    // biome-ignore lint/a11y/useAnchorContent: IconButton renders the icon and the aria-label inside.
+                    /* @__PURE__ */ jsx("a", { href, download: fileName ?? true })
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-end pe-1", children: /* @__PURE__ */ jsx(
+              "time",
+              {
+                "aria-hidden": true,
+                dateTime,
+                className: cn(
+                  "text-caption-default",
+                  outgoing ? "text-text-brand" : "text-text-secondary"
+                ),
+                children: time
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ChatAttachment
+};
+//# sourceMappingURL=chat-attachment.js.map

package/dist/components/chat/chat-attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-attachment.js","sources":["../../../src/components/chat/chat-attachment.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { Download02Icon, File06Icon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { IconButton } from \"../icon-button\";\nimport { IconContainer } from \"../icon-container\";\nimport { type ChatMessageDirection, chatBubbleVariants } from \"./chat-bubble\";\n\n// A real link, not a button: Base UI adds role=\"button\" to non-native buttons\n// unless the role is passed (as undefined) explicitly.\nconst asLink = { nativeButton: false, role: undefined } as const;\n\nexport interface ChatAttachmentProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /** Default `incoming` (the professional sends the prescription). */\n  direction?: ChatMessageDirection;\n  /**\n   * The document in human words: \"Receta · Paracetamol 1 g\", never the file name\n   * (\"rx_2026_10_01_883.pdf\"). It also names the download link.\n   */\n  name: string;\n  /** Type and size: \"PDF · 120 KB\". 120 KB on mobile data isn't the same as 12 MB. */\n  meta?: ReactNode;\n  /** Visible time, \"10:06\". */\n  time: string;\n  /** Machine-readable moment for `<time>` (ISO 8601). */\n  dateTime?: string;\n  /** Who sent it, for screen readers. Outgoing defaults to \"Tú\". */\n  sender?: string;\n  /** The file's URL: the download is a real link with `download`. */\n  href: string;\n  /** Suggested file name for `download`. */\n  fileName?: string;\n  /** Default `file-06`. */\n  icon?: ReactNode;\n}\n\n/**\n * A document sent through the chat: the prescription, the report, the sick note.\n * Same bubble as a message, with a white file card inside.\n *\n * The download is a link with `download` and the name \"Descargar Receta ·\n * Paracetamol 1 g\". The document must also live in \"Mis documentos\": the chat\n * can't be the only place a prescription exists.\n */\nexport function ChatAttachment({\n  direction = \"incoming\",\n  name,\n  meta,\n  time,\n  dateTime,\n  sender,\n  href,\n  fileName,\n  icon = <File06Icon />,\n  className,\n  ...props\n}: ChatAttachmentProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const outgoing = direction === \"outgoing\";\n  const senderName = sender ?? (outgoing ? labels.chatYou : undefined);\n\n  return (\n    <div\n      data-slot=\"chat-attachment\"\n      data-direction={direction}\n      className={cn(\n        \"flex w-full\",\n        outgoing ? \"justify-end\" : \"justify-start\",\n        className,\n      )}\n      {...props}\n    >\n      <div\n        className={cn(chatBubbleVariants({ direction }), \"w-68 max-w-full p-2\")}\n      >\n        <div className=\"flex items-center gap-3 rounded-lg bg-background p-2\">\n          <IconContainer icon={icon} size={40} tone=\"brand\" />\n          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <p className=\"line-clamp-2 text-label-strong text-text-primary\">\n              {senderName && (\n                <span className=\"sr-only\">\n                  {labels.chatMessageFrom(senderName, time)}{\" \"}\n                </span>\n              )}\n              {name}\n            </p>\n            {meta && (\n              <p className=\"truncate text-caption-default text-text-secondary\">\n                {meta}\n              </p>\n            )}\n          </div>\n          <IconButton\n            variant=\"ghost\"\n            size=\"small\"\n            icon={<Download02Icon />}\n            aria-label={labels.chatDownload(name)}\n            {...asLink}\n            render={\n              // biome-ignore lint/a11y/useAnchorContent: IconButton renders the icon and the aria-label inside.\n              <a href={href} download={fileName ?? true} />\n            }\n          />\n        </div>\n        <div className=\"flex justify-end pe-1\">\n          <time\n            aria-hidden\n            dateTime={dateTime}\n            className={cn(\n              \"text-caption-default\",\n              outgoing ? \"text-text-brand\" : \"text-text-secondary\",\n            )}\n          >\n            {time}\n          </time>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAS,EAAE,cAAc,OAAO,MAAM,OAAA;AAmCrC,SAAS,eAAe;AAAA,EAC7B,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,2BAAQ,YAAA,EAAW;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,SAAS,kBAAA;AACf,QAAM,WAAW,cAAc;AAC/B,QAAM,aAAa,WAAW,WAAW,OAAO,UAAU;AAE1D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,kBAAgB;AAAA,MAChB,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,mBAAmB,EAAE,UAAA,CAAW,GAAG,qBAAqB;AAAA,UAEtE,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,cAAA,oBAAC,eAAA,EAAc,MAAY,MAAM,IAAI,MAAK,SAAQ;AAAA,cAClD,qBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,gBAAA,qBAAC,KAAA,EAAE,WAAU,oDACV,UAAA;AAAA,kBAAA,cACC,qBAAC,QAAA,EAAK,WAAU,WACb,UAAA;AAAA,oBAAA,OAAO,gBAAgB,YAAY,IAAI;AAAA,oBAAG;AAAA,kBAAA,GAC7C;AAAA,kBAED;AAAA,gBAAA,GACH;AAAA,gBACC,QACC,oBAAC,KAAA,EAAE,WAAU,qDACV,UAAA,KAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,0BAAO,gBAAA,EAAe;AAAA,kBACtB,cAAY,OAAO,aAAa,IAAI;AAAA,kBACnC,GAAG;AAAA,kBACJ;AAAA;AAAA,oBAEE,oBAAC,KAAA,EAAE,MAAY,UAAU,YAAY,KAAA,CAAM;AAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAE/C,GACF;AAAA,YACA,oBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAW;AAAA,gBACX;AAAA,gBACA,WAAW;AAAA,kBACT;AAAA,kBACA,WAAW,oBAAoB;AAAA,gBAAA;AAAA,gBAGhC,UAAA;AAAA,cAAA;AAAA,YAAA,EACH,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}