@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/billing/plan-card.d.ts

@@ -0,0 +1,248 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { ChoiceCardProps } from '../components/choice-card.js';
+import { PlanPrices, BillingCurrency, BillingInterval } from './plan-price.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-kpAAVi6g.js';
+import '../components/data-table-sort.js';
+import '../components/swipeable-row.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../hooks/use-breakpoint.js';
+import '../components/chip.js';
+import 'lucide-react';
+import '../components/field-parts.js';
+import '../components/field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import '../components/user-avatar.js';
+import '../lib/person-name.js';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../shell/topbar-action-menu.js';
+import '../components/menu-item.js';
+import '../components/floating-panel.js';
+import '../hooks/use-authed-src.js';
+import '../components/account-settings-labels.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
+import '../components/write-lock.js';
+import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
+import '../shell/topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
+import '../auth/complete-name-dialog.js';
+import '../auth/forgot-password-form.js';
+import '../auth/status-parts.js';
+import '../auth/reset-password-form.js';
+import '../auth/verify-email.js';
+import '../auth/not-found-page.js';
+import '../auth/accept-invitation.js';
+import '../shell/company-switcher.js';
+import '../account/email-change-setting.js';
+import '../account/sessions-setting.js';
+import '../lib/format.js';
+import '../account/data-export-setting.js';
+import '../components/account-chips.js';
+import '../admin/admin-parts.js';
+import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
+import '../components/appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
+import '../components/reauth-dialog.js';
+import '../components/server-wake.js';
+import '../lib/server-wake.js';
+import '../components/translation-review-labels.js';
+import '../lib/translation-review.js';
+import '../components/country-select.js';
+import '../components/inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/focus-ring.js';
+
+/**
+ * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:
+ * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's
+ * (display names and feature lines come from its i18n, never from the provider).
+ */
+interface BillingPlan {
+    /** The plan code, lowercase on the wire (§12.16); compared without case here. */
+    code: string;
+    /** The app's display name, in the reader's language: "Pro". */
+    name: string;
+    /** A line under the price. */
+    description?: ReactNode;
+    /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —
+     *  or 0 — is a free plan. */
+    prices?: PlanPrices | null;
+    /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */
+    limits?: Readonly<Record<string, number | null>>;
+    /** The app's feature lines. */
+    features?: readonly ReactNode[];
+    /** Not choosable — a plan being retired, say. */
+    disabled?: boolean;
+}
+/**
+ * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes
+ * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.
+ */
+type PlanRelation = "current" | "upgrade" | "downgrade";
+/** The plan's place against `current`, by the order of `plans`; `undefined` without a
+ *  current plan (a trial, an ended plan) or for a code that is not in the list. */
+declare function planRelation(plans: readonly Pick<BillingPlan, "code">[], code: string, current: string | null | undefined): PlanRelation | undefined;
+/** What both parts need to draw a plan. */
+interface PlanDisplayProps {
+    /** The currency the prices are shown in (§2.6). */
+    currency: BillingCurrency;
+    /** The period the prices are shown for. */
+    interval: BillingInterval;
+    /** The app's name of each limit's dimension ("Budgets"). A dimension without one is
+     *  shown by its key. */
+    dimensionLabels?: Readonly<Record<string, string>>;
+    /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).
+     *  Default: a number in the kit's locale. */
+    formatLimit?: (dimension: string, value: number) => string;
+    /** Over the provider's locale. */
+    locale?: string;
+    /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
+    labels?: LabelOverride<BillingLabels>;
+}
+interface PlanCardProps extends Omit<ChoiceCardProps, "type" | "title" | "description" | "icon" | "indeterminate" | "value" | "labels">, PlanDisplayProps {
+    plan: BillingPlan;
+    /** See {@link PlanRelation}. `current` draws the "Current plan" chip — a word in the
+     *  card's name, never a colour alone. */
+    relation?: PlanRelation;
+    /**
+     * The provider's own localised price in place of the catalogue's figure (§12.17) — a
+     * Merchant of Record's price preview for the buyer's country, tax included. The period
+     * and "VAT included" stay: the law asks for a gross price, and the card says so.
+     */
+    pricePreview?: ReactNode;
+}
+/**
+ * One plan as a {@link ChoiceCard} radio (§7): the name (and "Current plan"), the GROSS
+ * price in the chosen currency and period through `formatMoney` ("CHF 49 per year, VAT
+ * included", §12.17), the limits ("Budgets: 3", "Seats: Unlimited") and the app's feature
+ * lines. A plan with prices but none for this currency and period is shown, "Not offered
+ * for this billing period", and cannot be picked.
+ *
+ * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that
+ * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,
+ * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.
+ */
+declare const PlanCard: react.ForwardRefExoticComponent<PlanCardProps & react.RefAttributes<HTMLInputElement>>;
+/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`
+ *  takes (§4). */
+interface PlanChoice {
+    plan: string;
+    interval: BillingInterval;
+    currency: BillingCurrency;
+}
+interface PlanPickerProps extends Omit<PlanDisplayProps, "currency" | "interval"> {
+    /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides
+     *  upgrade and downgrade. */
+    plans: readonly BillingPlan[];
+    /**
+     * The plan the payer pays for now (`plan` of the overview while `active` or
+     * `past_due`). Leave it out during a trial and after a plan ended: then every plan is
+     * "Choose …", the trial's plan included, since none is paid for yet.
+     */
+    current?: string | null;
+    /** The picked plan, controlled. `null` while none is. */
+    value?: string | null;
+    /** The picked plan, uncontrolled. Default: `current`, else nothing. */
+    defaultValue?: string | null;
+    onValueChange?: (plan: string) => void;
+    /** The period, controlled. */
+    interval?: BillingInterval;
+    /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */
+    defaultInterval?: BillingInterval;
+    onIntervalChange?: (interval: BillingInterval) => void;
+    /** The currency, controlled. */
+    currency?: BillingCurrency;
+    /** The currency, uncontrolled. Default: the account's stored currency is the app's to
+     *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */
+    defaultCurrency?: BillingCurrency;
+    onCurrencyChange?: (currency: BillingCurrency) => void;
+    /** The currencies the payer may switch between. Default: every currency a plan has a
+     *  price in. The switch shows only for more than one. */
+    currencies?: readonly BillingCurrency[];
+    /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the
+     *  provider's page). The kit sends no request. */
+    onChoose: (choice: PlanChoice) => void;
+    /** The checkout is being opened: the button's spinner, no second press. */
+    pending?: boolean;
+    /** The provider's localised price for a plan, or `undefined` for the catalogue's —
+     *  see {@link PlanCardProps.pricePreview}. */
+    pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, "plan">) => ReactNode | undefined;
+    /** A visible question over the cards. Without one the set is named "Plans". */
+    legend?: ReactNode;
+    /** Shared by the radios. Generated if omitted. */
+    name?: string;
+    /** Classes for the whole picker. */
+    className?: string;
+    /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */
+    gridClassName?: string;
+    /** Classes for every card. */
+    cardClassName?: string;
+}
+/**
+ * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where
+ * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in
+ * a radio set; and one button that says what pressing it does: "Upgrade to Pro", "Switch
+ * to Free", or "Choose Pro" with no plan paid for yet.
+ *
+ * One button under the set rather than one per card: each card IS a radio — a `<label>`
+ * round an `<input>` — and a button inside a label is interactive content inside
+ * interactive content. Picking and committing are two steps anyway: the price under the
+ * picked card is what checkout will charge.
+ *
+ * The button never takes the write lock: billing itself always works, a read-only payer
+ * must be able to pay (§3.3). It is off, with the reason on hover and focus, while
+ * nothing is picked or the current plan is.
+ */
+declare function PlanPicker({ plans, current, value: valueProp, defaultValue, onValueChange, interval: intervalProp, defaultInterval, onIntervalChange, currency: currencyProp, defaultCurrency, onCurrencyChange, currencies: currenciesProp, onChoose, pending, pricePreview, legend, name, className, gridClassName, cardClassName, dimensionLabels, formatLimit, locale: localeProp, labels: labelsProp, }: PlanPickerProps): react.JSX.Element;
+
+export { type BillingPlan, PlanCard, type PlanCardProps, type PlanChoice, PlanPicker, type PlanPickerProps, type PlanRelation, planRelation };

package/dist/billing/plan-card.js

@@ -0,0 +1,248 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Check, Gauge } from "lucide-react";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { formatNumber } from "../lib/format.js";
+import { cn } from "../lib/cn.js";
+import { ChoiceCard } from "../components/choice-card.js";
+import { Chip } from "../components/chip.js";
+import { ToggleGroup } from "../components/toggle-group.js";
+import { Button } from "../components/ui.js";
+import { useBillingLabels } from "./billing-labels.js";
+import { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from "./plan-price.js";
+function planRelation(plans, code, current) {
+  if (!current) return void 0;
+  const index = (c) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());
+  const at = index(code);
+  const now = index(current);
+  if (at < 0 || now < 0) return void 0;
+  return at === now ? "current" : at > now ? "upgrade" : "downgrade";
+}
+function SpanList({ name, items, icon }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("span", { role: "list", "aria-label": name, className: "block space-y-1", children: items.map((item, i) => /* @__PURE__ */ jsxs("span", { role: "listitem", className: "flex items-start gap-1.5 text-[var(--text-secondary)]", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mt-[0.0625rem] flex shrink-0 text-[var(--text-muted)] [&_svg]:size-3.5", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+      item,
+      " "
+    ] })
+  ] }, i)) });
+}
+const PlanCard = forwardRef(function PlanCard2({
+  plan,
+  relation,
+  pricePreview,
+  currency,
+  interval,
+  dimensionLabels,
+  formatLimit,
+  locale: localeProp,
+  labels: labelsProp,
+  disabled,
+  ...rest
+}, ref) {
+  const labels = useBillingLabels(labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const locale = useKitLocale(localeProp);
+  const price = planPrice(plan.prices, currency, interval);
+  const priced = price.kind === "price";
+  const figure = priced ? pricePreview !== void 0 && pricePreview !== null ? pricePreview : formatPlanPrice(price.minor, currency, { locale }) : price.kind === "free" ? labels.free : labels.notOffered;
+  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {
+    const name = dimensionLabels?.[dimension] ?? dimension;
+    const shown = value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });
+    return common.fieldValue(name, shown);
+  });
+  const body = /* @__PURE__ */ jsxs("span", { className: "mt-1 block space-y-2", children: [
+    /* @__PURE__ */ jsxs("span", { className: "block", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-part": "price",
+          className: cn(
+            "tabular-nums",
+            price.kind === "not-offered" ? "text-xs text-[var(--text-muted)]" : "text-lg font-semibold leading-tight text-[var(--text-primary)]"
+          ),
+          children: figure
+        }
+      ),
+      priced && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-secondary)]", children: interval === "year" ? labels.perYear : labels.perMonth }),
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--text-muted)]", children: labels.vatIncluded })
+      ] }),
+      " "
+    ] }),
+    plan.description !== void 0 && plan.description !== null && /* @__PURE__ */ jsxs("span", { className: "block text-[var(--text-secondary)]", children: [
+      plan.description,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx(SpanList, { name: labels.limits, items: limitLines, icon: /* @__PURE__ */ jsx(Gauge, {}) }),
+    /* @__PURE__ */ jsx(SpanList, { name: labels.features, items: [...plan.features ?? []], icon: /* @__PURE__ */ jsx(Check, {}) })
+  ] });
+  return /* @__PURE__ */ jsx(
+    ChoiceCard,
+    {
+      ref,
+      ...rest,
+      type: "radio",
+      value: plan.code,
+      disabled: disabled || plan.disabled || price.kind === "not-offered",
+      "data-plan": plan.code,
+      "data-relation": relation,
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        plan.name,
+        relation === "current" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx(Chip, { size: "xs", tone: "brand", shape: "square", caps: true, className: "ms-1 align-[0.0625rem]", children: labels.current })
+        ] })
+      ] }),
+      description: body
+    }
+  );
+});
+PlanCard.displayName = "PlanCard";
+function pricedCurrencies(plans) {
+  const found = /* @__PURE__ */ new Set();
+  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c);
+  return ["CHF", "EUR"].filter((c) => found.has(c));
+}
+function pricedIntervals(plans) {
+  const found = /* @__PURE__ */ new Set();
+  for (const p of plans)
+    for (const byInterval of Object.values(p.prices ?? {}))
+      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === "number") found.add(k);
+  return BILLING_INTERVALS.filter((i) => found.has(i));
+}
+function PlanPicker({
+  plans,
+  current,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  interval: intervalProp,
+  defaultInterval = "year",
+  onIntervalChange,
+  currency: currencyProp,
+  defaultCurrency,
+  onCurrencyChange,
+  currencies: currenciesProp,
+  onChoose,
+  pending,
+  pricePreview,
+  legend,
+  name,
+  className,
+  gridClassName,
+  cardClassName,
+  dimensionLabels,
+  formatLimit,
+  locale: localeProp,
+  labels: labelsProp
+}) {
+  const labels = useBillingLabels(labelsProp);
+  const locale = useKitLocale(localeProp);
+  const generated = useId();
+  const groupName = name ?? generated;
+  const legendId = `${generated}-legend`;
+  const [ownValue, setOwnValue] = useState(() => defaultValue ?? current ?? null);
+  const [ownInterval, setOwnInterval] = useState(defaultInterval);
+  const [ownCurrency, setOwnCurrency] = useState(
+    () => defaultCurrency ?? billingCurrencyFor(locale)
+  );
+  const value = valueProp !== void 0 ? valueProp : ownValue;
+  const interval = intervalProp ?? ownInterval;
+  const currency = currencyProp ?? ownCurrency;
+  const pick = (code) => {
+    if (valueProp === void 0) setOwnValue(code);
+    onValueChange?.(code);
+  };
+  const setInterval = (next) => {
+    if (intervalProp === void 0) setOwnInterval(next);
+    onIntervalChange?.(next);
+  };
+  const setCurrency = (next) => {
+    if (currencyProp === void 0) setOwnCurrency(next);
+    onCurrencyChange?.(next);
+  };
+  const currencies = currenciesProp ?? pricedCurrencies(plans);
+  const intervals = pricedIntervals(plans);
+  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : void 0;
+  const relation = picked ? planRelation(plans, picked.code, current) : void 0;
+  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : void 0;
+  const buttonText = !picked ? labels.choosePlan : relation === "upgrade" ? labels.upgrade(picked.name) : relation === "downgrade" ? labels.downgrade(picked.name) : labels.choose(picked.name);
+  const blocked = !picked ? labels.pickFirst : relation === "current" ? labels.isCurrent : pickedPrice?.kind === "not-offered" ? labels.notOffered : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 space-y-3", className), "data-billing-interval": interval, "data-billing-currency": currency, children: [
+    (intervals.length > 1 || currencies.length > 1) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      intervals.length > 1 && /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          "aria-label": labels.interval,
+          className: "w-auto",
+          options: intervals.map((i) => ({ value: i, label: i === "year" ? labels.yearly : labels.monthly })),
+          value: interval,
+          onChange: setInterval
+        }
+      ),
+      currencies.length > 1 && /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          "aria-label": labels.currency,
+          className: "w-auto",
+          options: currencies.map((c) => ({ value: c, label: c })),
+          value: currency,
+          onChange: setCurrency
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        className: "min-w-0",
+        "aria-labelledby": legend !== void 0 ? legendId : void 0,
+        "aria-label": legend === void 0 ? labels.plans : void 0,
+        children: [
+          legend !== void 0 && /* @__PURE__ */ jsx("legend", { id: legendId, className: "mb-2 text-sm font-medium text-[var(--text-primary)]", children: legend }),
+          /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", gridClassName), children: plans.map((plan) => /* @__PURE__ */ jsx(
+            PlanCard,
+            {
+              plan,
+              name: groupName,
+              currency,
+              interval,
+              relation: planRelation(plans, plan.code, current),
+              pricePreview: pricePreview?.(plan, { interval, currency }),
+              checked: picked?.code === plan.code,
+              onCheckedChange: (on) => on && pick(plan.code),
+              dimensionLabels,
+              formatLimit,
+              locale,
+              labels: labelsProp,
+              className: cardClassName
+            },
+            plan.code
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "primary",
+        className: "max-sm:w-full",
+        disabledReason: blocked,
+        pending,
+        onClick: () => picked && onChoose({ plan: picked.code, interval, currency }),
+        children: buttonText
+      }
+    ) })
+  ] });
+}
+export {
+  PlanCard,
+  PlanPicker,
+  planRelation
+};
+//# sourceMappingURL=plan-card.js.map

package/dist/billing/plan-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/billing/plan-card.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check, Gauge } from \"lucide-react\";\n\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { cn } from \"../lib/cn\";\nimport { ChoiceCard } from \"../components/choice-card\";\nimport type { ChoiceCardProps } from \"../components/choice-card\";\nimport { Chip } from \"../components/chip\";\nimport { ToggleGroup } from \"../components/toggle-group\";\nimport { Button } from \"../components/ui\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\nimport { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from \"./plan-price\";\nimport type { BillingCurrency, BillingInterval, PlanPrices } from \"./plan-price\";\n\n/**\n * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:\n * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's\n * (display names and feature lines come from its i18n, never from the provider).\n */\nexport interface BillingPlan {\n  /** The plan code, lowercase on the wire (§12.16); compared without case here. */\n  code: string;\n  /** The app's display name, in the reader's language: \"Pro\". */\n  name: string;\n  /** A line under the price. */\n  description?: ReactNode;\n  /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —\n   *  or 0 — is a free plan. */\n  prices?: PlanPrices | null;\n  /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */\n  limits?: Readonly<Record<string, number | null>>;\n  /** The app's feature lines. */\n  features?: readonly ReactNode[];\n  /** Not choosable — a plan being retired, say. */\n  disabled?: boolean;\n}\n\n/**\n * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes\n * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.\n */\nexport type PlanRelation = \"current\" | \"upgrade\" | \"downgrade\";\n\n/** The plan's place against `current`, by the order of `plans`; `undefined` without a\n *  current plan (a trial, an ended plan) or for a code that is not in the list. */\nexport function planRelation(\n  plans: readonly Pick<BillingPlan, \"code\">[],\n  code: string,\n  current: string | null | undefined,\n): PlanRelation | undefined {\n  if (!current) return undefined;\n  const index = (c: string) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());\n  const at = index(code);\n  const now = index(current);\n  if (at < 0 || now < 0) return undefined;\n  return at === now ? \"current\" : at > now ? \"upgrade\" : \"downgrade\";\n}\n\n/** What both parts need to draw a plan. */\ninterface PlanDisplayProps {\n  /** The currency the prices are shown in (§2.6). */\n  currency: BillingCurrency;\n  /** The period the prices are shown for. */\n  interval: BillingInterval;\n  /** The app's name of each limit's dimension (\"Budgets\"). A dimension without one is\n   *  shown by its key. */\n  dimensionLabels?: Readonly<Record<string, string>>;\n  /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatLimit?: (dimension: string, value: number) => string;\n  /** Over the provider's locale. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport interface PlanCardProps\n  extends Omit<ChoiceCardProps, \"type\" | \"title\" | \"description\" | \"icon\" | \"indeterminate\" | \"value\" | \"labels\">,\n    PlanDisplayProps {\n  plan: BillingPlan;\n  /** See {@link PlanRelation}. `current` draws the \"Current plan\" chip — a word in the\n   *  card's name, never a colour alone. */\n  relation?: PlanRelation;\n  /**\n   * The provider's own localised price in place of the catalogue's figure (§12.17) — a\n   * Merchant of Record's price preview for the buyer's country, tax included. The period\n   * and \"VAT included\" stay: the law asks for a gross price, and the card says so.\n   */\n  pricePreview?: ReactNode;\n}\n\n/** A list from spans (`role=\"list\"`): the card is a `<label>`, which may hold phrasing\n *  content only, so a `<ul>` there would be invalid HTML. */\nfunction SpanList({ name, items, icon }: { name: string; items: ReactNode[]; icon: ReactNode }) {\n  if (items.length === 0) return null;\n  return (\n    <span role=\"list\" aria-label={name} className=\"block space-y-1\">\n      {items.map((item, i) => (\n        <span role=\"listitem\" key={i} className=\"flex items-start gap-1.5 text-[var(--text-secondary)]\">\n          <span aria-hidden className=\"mt-[0.0625rem] flex shrink-0 text-[var(--text-muted)] [&_svg]:size-3.5\">\n            {icon}\n          </span>\n          <span className=\"min-w-0\">\n            {item}\n            {/* A space between the items' texts in the flattened description. */}{\" \"}\n          </span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * One plan as a {@link ChoiceCard} radio (§7): the name (and \"Current plan\"), the GROSS\n * price in the chosen currency and period through `formatMoney` (\"CHF 49 per year, VAT\n * included\", §12.17), the limits (\"Budgets: 3\", \"Seats: Unlimited\") and the app's feature\n * lines. A plan with prices but none for this currency and period is shown, \"Not offered\n * for this billing period\", and cannot be picked.\n *\n * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that\n * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,\n * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.\n */\nexport const PlanCard = forwardRef<HTMLInputElement, PlanCardProps>(function PlanCard(\n  {\n    plan,\n    relation,\n    pricePreview,\n    currency,\n    interval,\n    dimensionLabels,\n    formatLimit,\n    locale: localeProp,\n    labels: labelsProp,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n  const price = planPrice(plan.prices, currency, interval);\n\n  const priced = price.kind === \"price\";\n  const figure = priced\n    ? pricePreview !== undefined && pricePreview !== null\n      ? pricePreview\n      : formatPlanPrice(price.minor, currency, { locale })\n    : price.kind === \"free\"\n      ? labels.free\n      : labels.notOffered;\n\n  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {\n    const name = dimensionLabels?.[dimension] ?? dimension;\n    const shown =\n      value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });\n    return common.fieldValue(name, shown);\n  });\n\n  const body = (\n    <span className=\"mt-1 block space-y-2\">\n      <span className=\"block\">\n        <span\n          data-part=\"price\"\n          className={cn(\n            \"tabular-nums\",\n            price.kind === \"not-offered\"\n              ? \"text-xs text-[var(--text-muted)]\"\n              : \"text-lg font-semibold leading-tight text-[var(--text-primary)]\",\n          )}\n        >\n          {figure}\n        </span>\n        {priced && (\n          <>\n            {\" \"}\n            <span className=\"text-xs text-[var(--text-secondary)]\">\n              {interval === \"year\" ? labels.perYear : labels.perMonth}\n            </span>{\" \"}\n            <span className=\"block text-xs text-[var(--text-muted)]\">{labels.vatIncluded}</span>\n          </>\n        )}{\" \"}\n      </span>\n      {plan.description !== undefined && plan.description !== null && (\n        <span className=\"block text-[var(--text-secondary)]\">{plan.description} </span>\n      )}\n      <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />\n      <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />\n    </span>\n  );\n\n  return (\n    <ChoiceCard\n      ref={ref}\n      {...rest}\n      type=\"radio\"\n      value={plan.code}\n      disabled={disabled || plan.disabled || price.kind === \"not-offered\"}\n      data-plan={plan.code}\n      data-relation={relation}\n      title={\n        <>\n          {plan.name}\n          {relation === \"current\" && (\n            <>\n              {\" \"}\n              <Chip size=\"xs\" tone=\"brand\" shape=\"square\" caps className=\"ms-1 align-[0.0625rem]\">\n                {labels.current}\n              </Chip>\n            </>\n          )}\n        </>\n      }\n      description={body}\n    />\n  );\n});\nPlanCard.displayName = \"PlanCard\";\n\n/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`\n *  takes (§4). */\nexport interface PlanChoice {\n  plan: string;\n  interval: BillingInterval;\n  currency: BillingCurrency;\n}\n\nexport interface PlanPickerProps extends Omit<PlanDisplayProps, \"currency\" | \"interval\"> {\n  /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides\n   *  upgrade and downgrade. */\n  plans: readonly BillingPlan[];\n  /**\n   * The plan the payer pays for now (`plan` of the overview while `active` or\n   * `past_due`). Leave it out during a trial and after a plan ended: then every plan is\n   * \"Choose …\", the trial's plan included, since none is paid for yet.\n   */\n  current?: string | null;\n  /** The picked plan, controlled. `null` while none is. */\n  value?: string | null;\n  /** The picked plan, uncontrolled. Default: `current`, else nothing. */\n  defaultValue?: string | null;\n  onValueChange?: (plan: string) => void;\n  /** The period, controlled. */\n  interval?: BillingInterval;\n  /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */\n  defaultInterval?: BillingInterval;\n  onIntervalChange?: (interval: BillingInterval) => void;\n  /** The currency, controlled. */\n  currency?: BillingCurrency;\n  /** The currency, uncontrolled. Default: the account's stored currency is the app's to\n   *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */\n  defaultCurrency?: BillingCurrency;\n  onCurrencyChange?: (currency: BillingCurrency) => void;\n  /** The currencies the payer may switch between. Default: every currency a plan has a\n   *  price in. The switch shows only for more than one. */\n  currencies?: readonly BillingCurrency[];\n  /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the\n   *  provider's page). The kit sends no request. */\n  onChoose: (choice: PlanChoice) => void;\n  /** The checkout is being opened: the button's spinner, no second press. */\n  pending?: boolean;\n  /** The provider's localised price for a plan, or `undefined` for the catalogue's —\n   *  see {@link PlanCardProps.pricePreview}. */\n  pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, \"plan\">) => ReactNode | undefined;\n  /** A visible question over the cards. Without one the set is named \"Plans\". */\n  legend?: ReactNode;\n  /** Shared by the radios. Generated if omitted. */\n  name?: string;\n  /** Classes for the whole picker. */\n  className?: string;\n  /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */\n  gridClassName?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\n/** Every currency some plan has a price in, CHF first. */\nfunction pricedCurrencies(plans: readonly BillingPlan[]): BillingCurrency[] {\n  const found = new Set<BillingCurrency>();\n  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c as BillingCurrency);\n  return ([\"CHF\", \"EUR\"] as const).filter((c) => found.has(c));\n}\n\n/** Every period some plan has a price for, yearly first. */\nfunction pricedIntervals(plans: readonly BillingPlan[]): BillingInterval[] {\n  const found = new Set<BillingInterval>();\n  for (const p of plans)\n    for (const byInterval of Object.values(p.prices ?? {}))\n      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === \"number\") found.add(k as BillingInterval);\n  return BILLING_INTERVALS.filter((i) => found.has(i));\n}\n\n/**\n * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where\n * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in\n * a radio set; and one button that says what pressing it does: \"Upgrade to Pro\", \"Switch\n * to Free\", or \"Choose Pro\" with no plan paid for yet.\n *\n * One button under the set rather than one per card: each card IS a radio — a `<label>`\n * round an `<input>` — and a button inside a label is interactive content inside\n * interactive content. Picking and committing are two steps anyway: the price under the\n * picked card is what checkout will charge.\n *\n * The button never takes the write lock: billing itself always works, a read-only payer\n * must be able to pay (§3.3). It is off, with the reason on hover and focus, while\n * nothing is picked or the current plan is.\n */\nexport function PlanPicker({\n  plans,\n  current,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  interval: intervalProp,\n  defaultInterval = \"year\",\n  onIntervalChange,\n  currency: currencyProp,\n  defaultCurrency,\n  onCurrencyChange,\n  currencies: currenciesProp,\n  onChoose,\n  pending,\n  pricePreview,\n  legend,\n  name,\n  className,\n  gridClassName,\n  cardClassName,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n}: PlanPickerProps) {\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const generated = useId();\n  const groupName = name ?? generated;\n  const legendId = `${generated}-legend`;\n\n  const [ownValue, setOwnValue] = useState<string | null>(() => defaultValue ?? current ?? null);\n  const [ownInterval, setOwnInterval] = useState<BillingInterval>(defaultInterval);\n  const [ownCurrency, setOwnCurrency] = useState<BillingCurrency>(\n    () => defaultCurrency ?? billingCurrencyFor(locale),\n  );\n  const value = valueProp !== undefined ? valueProp : ownValue;\n  const interval = intervalProp ?? ownInterval;\n  const currency = currencyProp ?? ownCurrency;\n\n  const pick = (code: string) => {\n    if (valueProp === undefined) setOwnValue(code);\n    onValueChange?.(code);\n  };\n  const setInterval = (next: BillingInterval) => {\n    if (intervalProp === undefined) setOwnInterval(next);\n    onIntervalChange?.(next);\n  };\n  const setCurrency = (next: BillingCurrency) => {\n    if (currencyProp === undefined) setOwnCurrency(next);\n    onCurrencyChange?.(next);\n  };\n\n  const currencies = currenciesProp ?? pricedCurrencies(plans);\n  const intervals = pricedIntervals(plans);\n  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : undefined;\n  const relation = picked ? planRelation(plans, picked.code, current) : undefined;\n  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : undefined;\n\n  const buttonText = !picked\n    ? labels.choosePlan\n    : relation === \"upgrade\"\n      ? labels.upgrade(picked.name)\n      : relation === \"downgrade\"\n        ? labels.downgrade(picked.name)\n        : labels.choose(picked.name);\n  const blocked = !picked\n    ? labels.pickFirst\n    : relation === \"current\"\n      ? labels.isCurrent\n      : pickedPrice?.kind === \"not-offered\"\n        ? labels.notOffered\n        : undefined;\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3\", className)} data-billing-interval={interval} data-billing-currency={currency}>\n      {(intervals.length > 1 || currencies.length > 1) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {intervals.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.interval}\n              // Content-wide, so the two switches share a row and wrap only when narrow.\n              className=\"w-auto\"\n              options={intervals.map((i) => ({ value: i, label: i === \"year\" ? labels.yearly : labels.monthly }))}\n              value={interval}\n              onChange={setInterval}\n            />\n          )}\n          {currencies.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.currency}\n              className=\"w-auto\"\n              options={currencies.map((c) => ({ value: c, label: c }))}\n              value={currency}\n              onChange={setCurrency}\n            />\n          )}\n        </div>\n      )}\n      <fieldset\n        className=\"min-w-0\"\n        aria-labelledby={legend !== undefined ? legendId : undefined}\n        aria-label={legend === undefined ? labels.plans : undefined}\n      >\n        {legend !== undefined && (\n          <legend id={legendId} className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n            {legend}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3\", gridClassName)}>\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.code}\n              plan={plan}\n              name={groupName}\n              currency={currency}\n              interval={interval}\n              relation={planRelation(plans, plan.code, current)}\n              pricePreview={pricePreview?.(plan, { interval, currency })}\n              checked={picked?.code === plan.code}\n              onCheckedChange={(on) => on && pick(plan.code)}\n              dimensionLabels={dimensionLabels}\n              formatLimit={formatLimit}\n              locale={locale}\n              labels={labelsProp}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n      </fieldset>\n      <div className=\"flex justify-end\">\n        <Button\n          type=\"button\"\n          variant=\"primary\"\n          className=\"max-sm:w-full\"\n          disabledReason={blocked}\n          pending={pending}\n          onClick={() => picked && onChoose({ plan: picked.code, interval, currency })}\n        >\n          {buttonText}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAuGU,SA4EA,UA5EA,KAGA,YAHA;AAvGV,SAAS,YAAY,OAAO,gBAAgB;AAE5C,SAAS,OAAO,aAAa;AAE7B,SAAS,uBAAuB,cAAc,oBAAoB;AAElE,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAEjC,SAAS,mBAAmB,oBAAoB,iBAAiB,iBAAiB;AAkC3E,SAAS,aACd,OACA,MACA,SAC0B;AAC1B,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,QAAQ,CAAC,MAAc,MAAM,UAAU,CAAC,MAAM,EAAE,KAAK,YAAY,MAAM,EAAE,YAAY,CAAC;AAC5F,QAAM,KAAK,MAAM,IAAI;AACrB,QAAM,MAAM,MAAM,OAAO;AACzB,MAAI,KAAK,KAAK,MAAM,EAAG,QAAO;AAC9B,SAAO,OAAO,MAAM,YAAY,KAAK,MAAM,YAAY;AACzD;AAqCA,SAAS,SAAS,EAAE,MAAM,OAAO,KAAK,GAA0D;AAC9F,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,oBAAC,UAAK,MAAK,QAAO,cAAY,MAAM,WAAU,mBAC3C,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,UAAK,MAAK,YAAmB,WAAU,yDACtC;AAAA,wBAAC,UAAK,eAAW,MAAC,WAAU,0EACzB,gBACH;AAAA,IACA,qBAAC,UAAK,WAAU,WACb;AAAA;AAAA,MACsE;AAAA,OACzE;AAAA,OAPyB,CAQ3B,CACD,GACH;AAEJ;AAaO,MAAM,WAAW,WAA4C,SAASA,UAC3E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,QAAQ,UAAU,KAAK,QAAQ,UAAU,QAAQ;AAEvD,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,SAAS,SACX,iBAAiB,UAAa,iBAAiB,OAC7C,eACA,gBAAgB,MAAM,OAAO,UAAU,EAAE,OAAO,CAAC,IACnD,MAAM,SAAS,SACb,OAAO,OACP,OAAO;AAEb,QAAM,aAAa,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,WAAW,KAAK,MAAM;AAC/E,UAAM,OAAO,kBAAkB,SAAS,KAAK;AAC7C,UAAM,QACJ,UAAU,OAAO,OAAO,YAAY,cAAc,YAAY,WAAW,KAAK,IAAI,aAAa,OAAO,EAAE,OAAO,CAAC;AAClH,WAAO,OAAO,WAAW,MAAM,KAAK;AAAA,EACtC,CAAC;AAED,QAAM,OACJ,qBAAC,UAAK,WAAU,wBACd;AAAA,yBAAC,UAAK,WAAU,SACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,MAAM,SAAS,gBACX,qCACA;AAAA,UACN;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,UACC,iCACG;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,wCACb,uBAAa,SAAS,OAAO,UAAU,OAAO,UACjD;AAAA,QAAQ;AAAA,QACR,oBAAC,UAAK,WAAU,0CAA0C,iBAAO,aAAY;AAAA,SAC/E;AAAA,MACC;AAAA,OACL;AAAA,IACC,KAAK,gBAAgB,UAAa,KAAK,gBAAgB,QACtD,qBAAC,UAAK,WAAU,sCAAsC;AAAA,WAAK;AAAA,MAAY;AAAA,OAAC;AAAA,IAE1E,oBAAC,YAAS,MAAM,OAAO,QAAQ,OAAO,YAAY,MAAM,oBAAC,SAAM,GAAI;AAAA,IACnE,oBAAC,YAAS,MAAM,OAAO,UAAU,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,GAAG,MAAM,oBAAC,SAAM,GAAI;AAAA,KACvF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK,YAAY,MAAM,SAAS;AAAA,MACtD,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,OACE,iCACG;AAAA,aAAK;AAAA,QACL,aAAa,aACZ,iCACG;AAAA;AAAA,UACD,oBAAC,QAAK,MAAK,MAAK,MAAK,SAAQ,OAAM,UAAS,MAAI,MAAC,WAAU,0BACxD,iBAAO,SACV;AAAA,WACF;AAAA,SAEJ;AAAA,MAEF,aAAa;AAAA;AAAA,EACf;AAEJ,CAAC;AACD,SAAS,cAAc;AA4DvB,SAAS,iBAAiB,OAAkD;AAC1E,QAAM,QAAQ,oBAAI,IAAqB;AACvC,aAAW,KAAK,MAAO,YAAW,KAAK,OAAO,KAAK,EAAE,UAAU,CAAC,CAAC,EAAG,OAAM,IAAI,CAAoB;AAClG,SAAQ,CAAC,OAAO,KAAK,EAAY,OAAO,CAAC,MAAM,MAAM,IAAI,CAAC,CAAC;AAC7D;AAGA,SAAS,gBAAgB,OAAkD;AACzE,QAAM,QAAQ,oBAAI,IAAqB;AACvC,aAAW,KAAK;AACd,eAAW,cAAc,OAAO,OAAO,EAAE,UAAU,CAAC,CAAC;AACnD,iBAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,cAAc,CAAC,CAAC,EAAG,KAAI,OAAO,MAAM,SAAU,OAAM,IAAI,CAAoB;AACpH,SAAO,kBAAkB,OAAO,CAAC,MAAM,MAAM,IAAI,CAAC,CAAC;AACrD;AAiBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AACV,GAAoB;AAClB,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,QAAQ;AAC1B,QAAM,WAAW,GAAG,SAAS;AAE7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,MAAM,gBAAgB,WAAW,IAAI;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAA0B,eAAe;AAC/E,QAAM,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,MAAM,mBAAmB,mBAAmB,MAAM;AAAA,EACpD;AACA,QAAM,QAAQ,cAAc,SAAY,YAAY;AACpD,QAAM,WAAW,gBAAgB;AACjC,QAAM,WAAW,gBAAgB;AAEjC,QAAM,OAAO,CAAC,SAAiB;AAC7B,QAAI,cAAc,OAAW,aAAY,IAAI;AAC7C,oBAAgB,IAAI;AAAA,EACtB;AACA,QAAM,cAAc,CAAC,SAA0B;AAC7C,QAAI,iBAAiB,OAAW,gBAAe,IAAI;AACnD,uBAAmB,IAAI;AAAA,EACzB;AACA,QAAM,cAAc,CAAC,SAA0B;AAC7C,QAAI,iBAAiB,OAAW,gBAAe,IAAI;AACnD,uBAAmB,IAAI;AAAA,EACzB;AAEA,QAAM,aAAa,kBAAkB,iBAAiB,KAAK;AAC3D,QAAM,YAAY,gBAAgB,KAAK;AACvC,QAAM,SAAS,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,KAAK,YAAY,MAAM,MAAM,YAAY,CAAC,IAAI;AACzF,QAAM,WAAW,SAAS,aAAa,OAAO,OAAO,MAAM,OAAO,IAAI;AACtE,QAAM,cAAc,SAAS,UAAU,OAAO,QAAQ,UAAU,QAAQ,IAAI;AAE5E,QAAM,aAAa,CAAC,SAChB,OAAO,aACP,aAAa,YACX,OAAO,QAAQ,OAAO,IAAI,IAC1B,aAAa,cACX,OAAO,UAAU,OAAO,IAAI,IAC5B,OAAO,OAAO,OAAO,IAAI;AACjC,QAAM,UAAU,CAAC,SACb,OAAO,YACP,aAAa,YACX,OAAO,YACP,aAAa,SAAS,gBACpB,OAAO,aACP;AAER,SACE,qBAAC,SAAI,WAAW,GAAG,qBAAqB,SAAS,GAAG,yBAAuB,UAAU,yBAAuB,UACxG;AAAA,eAAU,SAAS,KAAK,WAAW,SAAS,MAC5C,qBAAC,SAAI,WAAU,qCACZ;AAAA,gBAAU,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,OAAO;AAAA,UAEnB,WAAU;AAAA,UACV,SAAS,UAAU,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,MAAM,SAAS,OAAO,SAAS,OAAO,QAAQ,EAAE;AAAA,UAClG,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,MAED,WAAW,SAAS,KACnB;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,OAAO;AAAA,UACnB,WAAU;AAAA,UACV,SAAS,WAAW,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,EAAE;AAAA,UACvD,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,mBAAiB,WAAW,SAAY,WAAW;AAAA,QACnD,cAAY,WAAW,SAAY,OAAO,QAAQ;AAAA,QAEjD;AAAA,qBAAW,UACV,oBAAC,YAAO,IAAI,UAAU,WAAU,uDAC7B,kBACH;AAAA,UAEF,oBAAC,SAAI,WAAW,GAAG,wDAAwD,aAAa,GACrF,gBAAM,IAAI,CAAC,SACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA,UAAU,aAAa,OAAO,KAAK,MAAM,OAAO;AAAA,cAChD,cAAc,eAAe,MAAM,EAAE,UAAU,SAAS,CAAC;AAAA,cACzD,SAAS,QAAQ,SAAS,KAAK;AAAA,cAC/B,iBAAiB,CAAC,OAAO,MAAM,KAAK,KAAK,IAAI;AAAA,cAC7C;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,WAAW;AAAA;AAAA,YAbN,KAAK;AAAA,UAcZ,CACD,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,WAAU,oBACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,gBAAgB;AAAA,QAChB;AAAA,QACA,SAAS,MAAM,UAAU,SAAS,EAAE,MAAM,OAAO,MAAM,UAAU,SAAS,CAAC;AAAA,QAE1E;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":["PlanCard"]}