@alfadocs/ui-kit 0.0.19 → 0.1.0

package/dist/_chunks/floating-action-button-RigP2E7o.js

@@ -0,0 +1,95 @@
+import { jsxs as m, jsx as d } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { c as g } from "./index-D2ZczOXr.js";
+import { useTranslation as b } from "react-i18next";
+const x = g(
+  [
+    // `relative` anchors the `::before` hit-target expansion on `sm`.
+    "ds:relative ds:inline-flex ds:items-center ds:justify-center",
+    "ds:font-medium ds:whitespace-nowrap",
+    "ds:rounded-full",
+    "ds:shadow-[var(--shadow-lg)] ds:hover:shadow-[var(--shadow-xl)] ds:active:shadow-[var(--shadow-md)]",
+    "ds:transition-[box-shadow,background-color,transform]",
+    "ds:duration-[var(--animation-duration)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    // Under Windows High Contrast Mode the `shadow-*` affordance is stripped.
+    // Repaint a solid edge + swap the focus ring to CanvasText so the FAB
+    // remains identifiable and its focus state stays visible.
+    "ds:forced-colors:border ds:forced-colors:border-[ButtonBorder] ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:shadow-[var(--shadow-md)]",
+    "ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: "ds:bg-primary ds:text-primary-foreground ds:hover:bg-primary-hover",
+        secondary: "ds:bg-accent ds:text-accent-foreground ds:hover:bg-accent-hover"
+      },
+      size: {
+        // `sm` is 40x40 which sits below the 44/48 px WCAG 2.5.5 target.
+        // Mirror Button's pseudo-expansion pattern: below the `sm:` (640 px)
+        // breakpoint, a `::before` rectangle enlarges the hit area to
+        // `--min-target-size` (44 default, 48 accessible). Above the
+        // breakpoint (desktop / trackpad), the physical 40 px circle is
+        // enough — the pseudo hides.
+        sm: 'ds:h-10 ds:w-10 ds:text-[var(--font-size-sm)] ds:[&_svg]:size-5 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""] ds:sm:before:hidden',
+        md: "ds:h-14 ds:w-14 ds:text-[var(--font-size-base)] ds:[&_svg]:size-6",
+        lg: "ds:h-16 ds:w-16 ds:text-[var(--font-size-lg)] ds:[&_svg]:size-7"
+      },
+      extended: {
+        true: "ds:w-auto ds:gap-[var(--spacing-sm)]",
+        false: ""
+      },
+      position: {
+        "bottom-end": "ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:end-[var(--spacing-lg)]",
+        "bottom-start": "ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:start-[var(--spacing-lg)]",
+        "top-end": "ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:end-[var(--spacing-lg)]",
+        "top-start": "ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:start-[var(--spacing-lg)]",
+        static: ""
+      }
+    },
+    compoundVariants: [
+      { extended: !0, size: "sm", class: "ds:ps-3 ds:pe-4" },
+      { extended: !0, size: "md", class: "ds:ps-4 ds:pe-5" },
+      { extended: !0, size: "lg", class: "ds:ps-5 ds:pe-6" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      extended: !1,
+      position: "bottom-end"
+    }
+  }
+), h = u((t, o) => {
+  const {
+    variant: i,
+    size: r,
+    extended: s,
+    position: n,
+    className: l,
+    icon: e,
+    children: c,
+    type: f,
+    ...a
+  } = t, { t: v } = b(), p = a["aria-label"] ?? (s ? void 0 : v("ui.common.add", { defaultValue: "Add" }));
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      ref: o,
+      type: f ?? "button",
+      className: x({ variant: i, size: r, extended: s, position: n, className: l }),
+      ...a,
+      "aria-label": p,
+      children: [
+        e ? /* @__PURE__ */ d("span", { "aria-hidden": "true", className: "ds:inline-flex ds:items-center ds:justify-center", children: e }) : null,
+        s ? /* @__PURE__ */ d("span", { className: "ds:inline-flex", children: c }) : null
+      ]
+    }
+  );
+});
+h.displayName = "FloatingActionButton";
+export {
+  h as F
+};
+//# sourceMappingURL=floating-action-button-RigP2E7o.js.map

package/dist/_chunks/floating-action-button-RigP2E7o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-action-button-RigP2E7o.js","sources":["../../src/components/floating-action-button/floating-action-button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\nconst fabVariants = cva(\n  [\n    // `relative` anchors the `::before` hit-target expansion on `sm`.\n    'ds:relative ds:inline-flex ds:items-center ds:justify-center',\n    'ds:font-medium ds:whitespace-nowrap',\n    'ds:rounded-full',\n    'ds:shadow-[var(--shadow-lg)] ds:hover:shadow-[var(--shadow-xl)] ds:active:shadow-[var(--shadow-md)]',\n    'ds:transition-[box-shadow,background-color,transform]',\n    'ds:duration-[var(--animation-duration)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    // Under Windows High Contrast Mode the `shadow-*` affordance is stripped.\n    // Repaint a solid edge + swap the focus ring to CanvasText so the FAB\n    // remains identifiable and its focus state stays visible.\n    'ds:forced-colors:border ds:forced-colors:border-[ButtonBorder] ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:shadow-[var(--shadow-md)]',\n    'ds:motion-reduce:transition-none',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        primary:\n          'ds:bg-primary ds:text-primary-foreground ds:hover:bg-primary-hover',\n        secondary:\n          'ds:bg-accent ds:text-accent-foreground ds:hover:bg-accent-hover',\n      },\n      size: {\n        // `sm` is 40x40 which sits below the 44/48 px WCAG 2.5.5 target.\n        // Mirror Button's pseudo-expansion pattern: below the `sm:` (640 px)\n        // breakpoint, a `::before` rectangle enlarges the hit area to\n        // `--min-target-size` (44 default, 48 accessible). Above the\n        // breakpoint (desktop / trackpad), the physical 40 px circle is\n        // enough — the pseudo hides.\n        sm: 'ds:h-10 ds:w-10 ds:text-[var(--font-size-sm)] ds:[&_svg]:size-5 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden',\n        md: 'ds:h-14 ds:w-14 ds:text-[var(--font-size-base)] ds:[&_svg]:size-6',\n        lg: 'ds:h-16 ds:w-16 ds:text-[var(--font-size-lg)] ds:[&_svg]:size-7',\n      },\n      extended: {\n        true: 'ds:w-auto ds:gap-[var(--spacing-sm)]',\n        false: '',\n      },\n      position: {\n        'bottom-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:end-[var(--spacing-lg)]',\n        'bottom-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:start-[var(--spacing-lg)]',\n        'top-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:end-[var(--spacing-lg)]',\n        'top-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:start-[var(--spacing-lg)]',\n        static: '',\n      },\n    },\n    compoundVariants: [\n      { extended: true, size: 'sm', class: 'ds:ps-3 ds:pe-4' },\n      { extended: true, size: 'md', class: 'ds:ps-4 ds:pe-5' },\n      { extended: true, size: 'lg', class: 'ds:ps-5 ds:pe-6' },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      extended: false,\n      position: 'bottom-end',\n    },\n  },\n);\n\ntype FabBaseProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof fabVariants>;\n\ninterface CircularFabProps extends FabBaseProps {\n  extended?: false;\n  icon: ReactNode;\n  'aria-label': string;\n  children?: never;\n}\n\ninterface ExtendedFabProps extends FabBaseProps {\n  extended: true;\n  icon?: ReactNode;\n  children: ReactNode;\n}\n\nexport type FloatingActionButtonProps = CircularFabProps | ExtendedFabProps;\n\nexport const FloatingActionButton = forwardRef<\n  HTMLButtonElement,\n  FloatingActionButtonProps\n>((props, ref) => {\n  const {\n    variant,\n    size,\n    extended,\n    position,\n    className,\n    icon,\n    children,\n    type,\n    ...rest\n  } = props;\n  const { t } = useTranslation();\n\n  const ariaLabel =\n    rest['aria-label'] ??\n    (!extended ? t('ui.common.add', { defaultValue: 'Add' }) : undefined);\n\n  return (\n    <button\n      ref={ref}\n      type={type ?? 'button'}\n      className={fabVariants({ variant, size, extended, position, className })}\n      {...rest}\n      aria-label={ariaLabel}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"ds:inline-flex ds:items-center ds:justify-center\">\n          {icon}\n        </span>\n      ) : null}\n      {extended ? <span className=\"ds:inline-flex\">{children}</span> : null}\n    </button>\n  );\n});\n\nFloatingActionButton.displayName = 'FloatingActionButton';\n"],"names":["fabVariants","cva","FloatingActionButton","forwardRef","props","ref","variant","size","extended","position","className","icon","children","type","rest","t","useTranslation","ariaLabel","jsxs","jsx"],"mappings":";;;;AAQA,MAAMA,IAAcC;AAAA,EAClB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,cACE;AAAA,QACF,gBACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,IAAkB;AAAA,IAEzD,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAoBaC,IAAuBC,EAGlC,CAACC,GAAOC,MAAQ;AAChB,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDV,GACE,EAAE,GAAAW,EAAA,IAAMC,EAAA,GAERC,IACJH,EAAK,YAAY,MACfN,IAAyD,SAA9CO,EAAE,iBAAiB,EAAE,cAAc,MAAA,CAAO;AAEzD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,MAAMQ,KAAQ;AAAA,MACd,WAAWb,EAAY,EAAE,SAAAM,GAAS,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,WAAAC,GAAW;AAAA,MACtE,GAAGI;AAAA,MACJ,cAAYG;AAAA,MAEX,UAAA;AAAA,QAAAN,sBACE,QAAA,EAAK,eAAY,QAAO,WAAU,oDAChC,aACH,IACE;AAAA,QACHH,IAAW,gBAAAW,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAP,GAAS,IAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC;AAEDV,EAAqB,cAAc;"}

package/dist/_chunks/form-field-DI5LY5aG.js

@@ -0,0 +1,121 @@
+import { jsx as i, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as z, useId as V, useMemo as p } from "react";
+import { c as f } from "./index-D2ZczOXr.js";
+import { useTranslation as j } from "react-i18next";
+import { F as w } from "./form-field-context-94LwgYTQ.js";
+import { C as B } from "./circle-alert-ChA9opNA.js";
+const C = f("ds:text-start", {
+  variants: {
+    orientation: {
+      vertical: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+      horizontal: "ds:grid ds:grid-cols-[minmax(0,var(--form-label-inline-size))_minmax(0,1fr)] ds:items-start ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-xs)]"
+    },
+    disabled: {
+      true: "ds:opacity-50 ds:cursor-not-allowed",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    disabled: !1
+  }
+}), I = f("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "ds:min-w-0"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+}), $ = z(
+  (x, v) => {
+    const {
+      label: u,
+      description: o,
+      error: s,
+      required: d = !1,
+      optional: h = !1,
+      orientation: n = "vertical",
+      disabled: l = !1,
+      className: g,
+      children: b,
+      ...N
+    } = x, { t: y } = j(), e = V(), a = `${e}-help`, r = `${e}-error`, c = !!s, m = p(
+      () => [o ? a : null, s ? r : null].filter(Boolean).join(" "),
+      [o, s, a, r]
+    ), F = p(
+      () => ({
+        id: e,
+        helpId: a,
+        errorId: r,
+        describedBy: m,
+        invalid: c,
+        required: d,
+        disabled: l
+      }),
+      [e, a, r, m, c, d, l]
+    );
+    return /* @__PURE__ */ i(w.Provider, { value: F, children: /* @__PURE__ */ t(
+      "div",
+      {
+        ref: v,
+        className: C({ orientation: n, disabled: l, className: g }),
+        ...N,
+        children: [
+          /* @__PURE__ */ t(
+            "label",
+            {
+              htmlFor: e,
+              className: "type-label ds:text-foreground",
+              children: [
+                u,
+                d && /* @__PURE__ */ i(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:text-destructive ds:ms-[var(--spacing-xs)]",
+                    children: "*"
+                  }
+                ),
+                h && /* @__PURE__ */ t("span", { className: "ds:text-muted-foreground ds:ms-[var(--spacing-xs)] ds:font-normal", children: [
+                  "(",
+                  y("ui.common.optional", "optional"),
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: I({ orientation: n }), children: [
+            b,
+            o && /* @__PURE__ */ i("p", { id: a, className: "type-body-sm ds:text-muted-foreground", children: o }),
+            s && /* @__PURE__ */ t(
+              "p",
+              {
+                id: r,
+                role: "alert",
+                className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive",
+                children: [
+                  /* @__PURE__ */ i(
+                    B,
+                    {
+                      "aria-hidden": "true",
+                      className: "ds:size-4 ds:shrink-0"
+                    }
+                  ),
+                  /* @__PURE__ */ i("span", { children: s })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+$.displayName = "FormField";
+export {
+  $ as F
+};
+//# sourceMappingURL=form-field-DI5LY5aG.js.map

package/dist/_chunks/form-field-DI5LY5aG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-DI5LY5aG.js","sources":["../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { AlertCircle } from 'lucide-react';\nimport {\n  FormFieldContext,\n  type FormFieldContextShape,\n} from './form-field-context';\n\nconst fieldVariants = cva('ds:text-start', {\n  variants: {\n    orientation: {\n      vertical: 'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]',\n      horizontal:\n        'ds:grid ds:grid-cols-[minmax(0,var(--form-label-inline-size))_minmax(0,1fr)] ds:items-start ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-xs)]',\n    },\n    disabled: {\n      true: 'ds:opacity-50 ds:cursor-not-allowed',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    disabled: false,\n  },\n});\n\nconst slotsVariants = cva('ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: 'ds:min-w-0',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\ntype RequiredIndicator =\n  | { required?: boolean; optional?: never }\n  | { required?: never; optional?: boolean };\n\ninterface BaseFormFieldProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>,\n    Omit<VariantProps<typeof fieldVariants>, 'disabled'> {\n  label: string;\n  description?: string;\n  error?: string;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport type FormFieldProps = BaseFormFieldProps & RequiredIndicator;\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      description,\n      error,\n      required = false,\n      optional = false,\n      orientation = 'vertical',\n      disabled = false,\n      className,\n      children,\n      ...rest\n    } = props as BaseFormFieldProps & {\n      required?: boolean;\n      optional?: boolean;\n    };\n\n    const { t } = useTranslation();\n    const id = useId();\n    const helpId = `${id}-help`;\n    const errorId = `${id}-error`;\n    const invalid = Boolean(error);\n\n    const describedBy = useMemo(\n      () =>\n        [description ? helpId : null, error ? errorId : null]\n          .filter(Boolean)\n          .join(' '),\n      [description, error, helpId, errorId],\n    );\n\n    const ctx: FormFieldContextShape = useMemo(\n      () => ({\n        id,\n        helpId,\n        errorId,\n        describedBy,\n        invalid,\n        required,\n        disabled,\n      }),\n      [id, helpId, errorId, describedBy, invalid, required, disabled],\n    );\n\n    return (\n      <FormFieldContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          className={fieldVariants({ orientation, disabled, className })}\n          {...rest}\n        >\n          <label\n            htmlFor={id}\n            className=\"type-label ds:text-foreground\"\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:text-destructive ds:ms-[var(--spacing-xs)]\"\n              >\n                *\n              </span>\n            )}\n            {optional && (\n              <span className=\"ds:text-muted-foreground ds:ms-[var(--spacing-xs)] ds:font-normal\">\n                ({t('ui.common.optional', 'optional')})\n              </span>\n            )}\n          </label>\n          <div className={slotsVariants({ orientation })}>\n            {children}\n            {description && (\n              <p id={helpId} className=\"type-body-sm ds:text-muted-foreground\">\n                {description}\n              </p>\n            )}\n            {error && (\n              <p\n                id={errorId}\n                role=\"alert\"\n                className=\"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive\"\n              >\n                <AlertCircle\n                  aria-hidden=\"true\"\n                  className=\"ds:size-4 ds:shrink-0\"\n                />\n                <span>{error}</span>\n              </p>\n            )}\n          </div>\n        </div>\n      </FormFieldContext.Provider>\n    );\n  },\n);\n\nFormField.displayName = 'FormField';\n"],"names":["fieldVariants","cva","slotsVariants","FormField","forwardRef","props","ref","label","description","error","required","optional","orientation","disabled","className","children","rest","t","useTranslation","id","useId","helpId","errorId","invalid","describedBy","useMemo","ctx","jsx","FormFieldContext","jsxs","AlertCircle"],"mappings":"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"}

package/dist/_chunks/freemium-paywall-D0GiUFOe.js

@@ -0,0 +1,197 @@
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as U, useId as y, useState as q } from "react";
+import * as t from "@radix-ui/react-alert-dialog";
+import * as b from "@radix-ui/react-radio-group";
+import { c as E } from "./index-D2ZczOXr.js";
+import { useTranslation as H } from "react-i18next";
+import { B as w } from "./button-DmiGFnNA.js";
+import { P as J } from "./progress-D4ELgHG3.js";
+import { f as O } from "./payment-form-l3j-gA-t.js";
+import { T as Q } from "./triangle-alert-CBPUIzQo.js";
+import { C as W } from "./check-DPdL_Sm7.js";
+const X = E(
+  [
+    "ds:fixed ds:z-[var(--z-modal)] ds:overflow-auto",
+    "ds:bg-[color:var(--popover)] ds:text-[color:var(--popover-foreground)]",
+    "ds:border ds:border-border ds:shadow-[var(--shadow-lg)]",
+    // forced-colors: keep the dialog boundary visible under Windows High
+    // Contrast, where `var(--border)` may collapse to system colours.
+    "ds:forced-colors:border-[CanvasText]",
+    "ds:focus:outline-none"
+  ].join(" "),
+  {
+    variants: {
+      layout: {
+        centered: "ds:start-1/2 ds:top-1/2 ds:-translate-x-1/2 ds:-translate-y-1/2 ds:rtl:translate-x-1/2 ds:rounded-[var(--radius-md)] ds:max-w-[var(--dialog-width-xl)] ds:w-[calc(100vw-2rem)] ds:max-h-[90vh]",
+        sheet: "ds:inset-inline-0 ds:bottom-0 ds:w-full ds:max-h-[90vh] ds:rounded-t-[var(--radius-md)]"
+      },
+      density: {
+        compact: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]",
+        full: "ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:pt-[var(--spacing-lg)] ds:pb-[var(--spacing-lg)]"
+      }
+    },
+    defaultVariants: { layout: "centered", density: "full" }
+  }
+), Y = U(
+  ({
+    open: N,
+    onOpenChange: n,
+    plans: m,
+    selectedPlanId: p,
+    defaultSelectedPlanId: j,
+    onSelectedPlanChange: l,
+    usage: r,
+    onUpgrade: k,
+    onCancel: o,
+    title: z,
+    description: C,
+    layout: K = "centered",
+    density: R = "full",
+    className: A
+  }, F) => {
+    var g;
+    const { t: e, i18n: T } = H(), u = y(), v = y(), f = p !== void 0, [I, L] = q(
+      j ?? ((g = m[0]) == null ? void 0 : g.id) ?? ""
+    ), c = f ? p ?? "" : I, P = (a) => {
+      f || L(a), l == null || l(a);
+    }, M = () => {
+      o == null || o(), n(!1);
+    }, V = () => {
+      c && k(c);
+    }, B = r ? Math.min(100, Math.max(0, r.used / Math.max(1, r.limit) * 100)) : 0, i = r ? r.used >= r.limit : !1;
+    return /* @__PURE__ */ s(t.Root, { open: N, onOpenChange: n, children: /* @__PURE__ */ d(t.Portal, { children: [
+      /* @__PURE__ */ s(
+        t.Overlay,
+        {
+          className: [
+            "ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]",
+            "ds:bg-[color:var(--foreground)]/40",
+            "ds:motion-safe:data-[state=open]:animate-in ds:motion-safe:data-[state=closed]:animate-out",
+            "ds:[.theme-accessible_&]:animate-none"
+          ].join(" ")
+        }
+      ),
+      /* @__PURE__ */ d(
+        t.Content,
+        {
+          ref: F,
+          "aria-labelledby": u,
+          "aria-describedby": v,
+          className: X({ layout: K, density: R, className: A }),
+          children: [
+            /* @__PURE__ */ s(t.Title, { id: u, asChild: !0, children: /* @__PURE__ */ s("h2", { className: "type-title-card", children: z ?? e("ui.paywall.title") }) }),
+            /* @__PURE__ */ s(t.Description, { id: v, asChild: !0, children: /* @__PURE__ */ s("p", { className: "ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: C ?? e("ui.paywall.description") }) }),
+            r ? /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-md)]", children: [
+              /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]", children: [
+                i ? /* @__PURE__ */ s(
+                  Q,
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:size-4 ds:text-[color:var(--destructive)]"
+                  }
+                ) : null,
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    className: [
+                      "type-body-sm",
+                      i ? "ds:text-[color:var(--destructive)]" : "ds:text-[color:var(--muted-foreground)]"
+                    ].join(" "),
+                    children: i ? e("ui.paywall.usageFull") : e("ui.paywall.usageLabel", {
+                      used: r.used,
+                      limit: r.limit
+                    })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s(
+                J,
+                {
+                  value: B,
+                  max: 100,
+                  ariaLabel: e("ui.paywall.usageLabel", {
+                    used: r.used,
+                    limit: r.limit
+                  }),
+                  className: i ? "ds:[&_[role=progressbar]>*]:bg-[color:var(--destructive)]" : ""
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ s(
+              b.Root,
+              {
+                value: c,
+                onValueChange: P,
+                "aria-label": e("ui.paywall.title"),
+                className: "ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+                children: m.map((a) => {
+                  const h = O(
+                    a.priceAmount,
+                    a.currency,
+                    T.language
+                  ), x = a.perKey ? e(a.perKey) : void 0, D = x ? e("ui.paywall.pricePer", { price: h, period: x }) : h, _ = e(a.nameKey);
+                  return /* @__PURE__ */ d(
+                    b.Item,
+                    {
+                      value: a.id,
+                      className: [
+                        "ds:group ds:relative ds:flex ds:flex-col ds:items-stretch",
+                        "ds:rounded-[var(--radius-md)] ds:border ds:border-border",
+                        "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+                        "ds:text-start ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]",
+                        "ds:data-[state=checked]:border-[color:var(--primary)]",
+                        "ds:data-[state=checked]:bg-[color:var(--primary)]/5",
+                        "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+                        "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+                      ].join(" "),
+                      children: [
+                        /* @__PURE__ */ d("span", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+                          /* @__PURE__ */ s("span", { className: "ds:font-semibold", children: _ }),
+                          /* @__PURE__ */ s("span", { className: "ds:tabular-nums", children: D })
+                        ] }),
+                        a.featuresKeys && a.featuresKeys.length > 0 ? /* @__PURE__ */ s(
+                          "ul",
+                          {
+                            "aria-label": e("ui.paywall.features"),
+                            className: "ds:mt-[var(--spacing-xs)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+                            children: a.featuresKeys.map((G, S) => /* @__PURE__ */ d(
+                              "li",
+                              {
+                                className: "ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm",
+                                children: [
+                                  /* @__PURE__ */ s(
+                                    W,
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "ds:size-4 ds:shrink-0 ds:text-[color:var(--primary)] ds:mt-[1px]"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ s("span", { children: e(G) })
+                                ]
+                              },
+                              S
+                            ))
+                          }
+                        ) : null
+                      ]
+                    },
+                    a.id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end", children: [
+              /* @__PURE__ */ s(t.Cancel, { asChild: !0, children: /* @__PURE__ */ s(w, { intent: "outline", onClick: M, children: e("ui.paywall.notNow") }) }),
+              /* @__PURE__ */ s(t.Action, { asChild: !0, children: /* @__PURE__ */ s(w, { intent: "primary", onClick: V, children: e("ui.paywall.upgrade") }) })
+            ] })
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+Y.displayName = "FreemiumPaywall";
+export {
+  Y as F
+};
+//# sourceMappingURL=freemium-paywall-D0GiUFOe.js.map

package/dist/_chunks/freemium-paywall-D0GiUFOe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"freemium-paywall-D0GiUFOe.js","sources":["../../src/components/freemium-paywall/freemium-paywall.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ReactNode,\n} from 'react';\nimport * as RadixAlertDialog from '@radix-ui/react-alert-dialog';\nimport * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { AlertTriangle, Check } from 'lucide-react';\nimport { Button } from '../button';\nimport { Progress } from '../progress';\nimport { formatPaymentAmount } from '../payment-form';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface FreemiumPlan {\n  id: string;\n  /** Translation key for the plan name (e.g. `app.paywall.plans.pro`). */\n  nameKey: string;\n  /** Amount in minor units (cents, centesimi). */\n  priceAmount: number;\n  /** ISO 4217 currency code. */\n  currency: string;\n  /** Translation key for the cadence suffix (e.g. `app.paywall.period.month`). */\n  perKey?: string;\n  /** Per-line feature translation keys. */\n  featuresKeys?: string[];\n}\n\nconst contentVariants = cva(\n  [\n    'ds:fixed ds:z-[var(--z-modal)] ds:overflow-auto',\n    'ds:bg-[color:var(--popover)] ds:text-[color:var(--popover-foreground)]',\n    'ds:border ds:border-border ds:shadow-[var(--shadow-lg)]',\n    // forced-colors: keep the dialog boundary visible under Windows High\n    // Contrast, where `var(--border)` may collapse to system colours.\n    'ds:forced-colors:border-[CanvasText]',\n    'ds:focus:outline-none',\n  ].join(' '),\n  {\n    variants: {\n      layout: {\n        centered:\n          'ds:start-1/2 ds:top-1/2 ds:-translate-x-1/2 ds:-translate-y-1/2 ds:rtl:translate-x-1/2 ds:rounded-[var(--radius-md)] ds:max-w-[var(--dialog-width-xl)] ds:w-[calc(100vw-2rem)] ds:max-h-[90vh]',\n        sheet:\n          'ds:inset-inline-0 ds:bottom-0 ds:w-full ds:max-h-[90vh] ds:rounded-t-[var(--radius-md)]',\n      },\n      density: {\n        compact: 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n        full: 'ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:pt-[var(--spacing-lg)] ds:pb-[var(--spacing-lg)]',\n      },\n    },\n    defaultVariants: { layout: 'centered', density: 'full' },\n  },\n);\n\nexport interface FreemiumPaywallProps\n  extends VariantProps<typeof contentVariants> {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  plans: FreemiumPlan[];\n  /** Currently-selected plan id (controlled) or default. */\n  selectedPlanId?: string;\n  defaultSelectedPlanId?: string;\n  onSelectedPlanChange?: (id: string) => void;\n  /** Usage indicator values — omit the object to hide the bar. */\n  usage?: { used: number; limit: number };\n  /** Fires on upgrade. */\n  onUpgrade: (planId: string) => void;\n  /** Fires when the user dismisses via Not Now. */\n  onCancel?: () => void;\n  /** Title override; defaults to t('ui.paywall.title'). */\n  title?: ReactNode;\n  /** Description override; defaults to t('ui.paywall.description'). */\n  description?: ReactNode;\n  className?: string;\n}\n\nexport const FreemiumPaywall = forwardRef<HTMLDivElement, FreemiumPaywallProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      plans,\n      selectedPlanId,\n      defaultSelectedPlanId,\n      onSelectedPlanChange,\n      usage,\n      onUpgrade,\n      onCancel,\n      title,\n      description,\n      layout = 'centered',\n      density = 'full',\n      className,\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n    const titleId = useId();\n    const descId = useId();\n\n    const isControlled = selectedPlanId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string>(\n      defaultSelectedPlanId ?? plans[0]?.id ?? '',\n    );\n    const currentSelected = isControlled\n      ? selectedPlanId ?? ''\n      : internalSelected;\n\n    const handleSelectedChange = (next: string) => {\n      if (!isControlled) setInternalSelected(next);\n      onSelectedPlanChange?.(next);\n    };\n\n    const handleCancel = () => {\n      onCancel?.();\n      onOpenChange(false);\n    };\n\n    const handleUpgrade = () => {\n      if (!currentSelected) return;\n      onUpgrade(currentSelected);\n    };\n\n    const usagePercent = usage\n      ? Math.min(100, Math.max(0, (usage.used / Math.max(1, usage.limit)) * 100))\n      : 0;\n    const usageFull = usage ? usage.used >= usage.limit : false;\n\n    return (\n      <RadixAlertDialog.Root open={open} onOpenChange={onOpenChange}>\n        <RadixAlertDialog.Portal>\n          <RadixAlertDialog.Overlay\n            className={[\n              'ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]',\n              'ds:bg-[color:var(--foreground)]/40',\n              'ds:motion-safe:data-[state=open]:animate-in ds:motion-safe:data-[state=closed]:animate-out',\n              'ds:[.theme-accessible_&]:animate-none',\n            ].join(' ')}\n          />\n          <RadixAlertDialog.Content\n            ref={ref}\n            aria-labelledby={titleId}\n            aria-describedby={descId}\n            className={contentVariants({ layout, density, className })}\n          >\n            <RadixAlertDialog.Title id={titleId} asChild>\n              <h2 className=\"type-title-card\">\n                {title ?? t('ui.paywall.title')}\n              </h2>\n            </RadixAlertDialog.Title>\n            <RadixAlertDialog.Description id={descId} asChild>\n              <p className=\"ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]\">\n                {description ?? t('ui.paywall.description')}\n              </p>\n            </RadixAlertDialog.Description>\n\n            {usage ? (\n              <div className=\"ds:mt-[var(--spacing-md)]\">\n                <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]\">\n                  {usageFull ? (\n                    <AlertTriangle\n                      aria-hidden=\"true\"\n                      className=\"ds:size-4 ds:text-[color:var(--destructive)]\"\n                    />\n                  ) : null}\n                  <span\n                    className={[\n                      'type-body-sm',\n                      usageFull\n                        ? 'ds:text-[color:var(--destructive)]'\n                        : 'ds:text-[color:var(--muted-foreground)]',\n                    ].join(' ')}\n                  >\n                    {usageFull\n                      ? t('ui.paywall.usageFull')\n                      : t('ui.paywall.usageLabel', {\n                          used: usage.used,\n                          limit: usage.limit,\n                        })}\n                  </span>\n                </div>\n                <Progress\n                  value={usagePercent}\n                  max={100}\n                  ariaLabel={t('ui.paywall.usageLabel', {\n                    used: usage.used,\n                    limit: usage.limit,\n                  })}\n                  className={usageFull ? 'ds:[&_[role=progressbar]>*]:bg-[color:var(--destructive)]' : ''}\n                />\n              </div>\n            ) : null}\n\n            <RadixRadioGroup.Root\n              value={currentSelected}\n              onValueChange={handleSelectedChange}\n              aria-label={t('ui.paywall.title')}\n              className=\"ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\"\n            >\n              {plans.map((plan) => {\n                // Reuse the payment-form helper — it knows about\n                // zero-decimal currencies (JPY, KRW, VND …) and applies\n                // the right divisor. Raw `/ 100` would 100× the price in\n                // those currencies.\n                const formattedPrice = formatPaymentAmount(\n                  plan.priceAmount,\n                  plan.currency,\n                  i18n.language,\n                );\n                const period = plan.perKey ? t(plan.perKey) : undefined;\n                const priceLine = period\n                  ? t('ui.paywall.pricePer', { price: formattedPrice, period })\n                  : formattedPrice;\n                const planName = t(plan.nameKey);\n                return (\n                  <RadixRadioGroup.Item\n                    key={plan.id}\n                    value={plan.id}\n                    className={[\n                      'ds:group ds:relative ds:flex ds:flex-col ds:items-stretch',\n                      'ds:rounded-[var(--radius-md)] ds:border ds:border-border',\n                      'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]',\n                      'ds:text-start ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]',\n                      'ds:data-[state=checked]:border-[color:var(--primary)]',\n                      'ds:data-[state=checked]:bg-[color:var(--primary)]/5',\n                      'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n                      'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n                    ].join(' ')}\n                  >\n                    <span className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]\">\n                      <span className=\"ds:font-semibold\">{planName}</span>\n                      <span className=\"ds:tabular-nums\">{priceLine}</span>\n                    </span>\n                    {plan.featuresKeys && plan.featuresKeys.length > 0 ? (\n                      <ul\n                        aria-label={t('ui.paywall.features')}\n                        className=\"ds:mt-[var(--spacing-xs)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\"\n                      >\n                        {plan.featuresKeys.map((key, i) => (\n                          <li\n                            key={i}\n                            className=\"ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm\"\n                          >\n                            <Check\n                              aria-hidden=\"true\"\n                              className=\"ds:size-4 ds:shrink-0 ds:text-[color:var(--primary)] ds:mt-[1px]\"\n                            />\n                            <span>{t(key)}</span>\n                          </li>\n                        ))}\n                      </ul>\n                    ) : null}\n                  </RadixRadioGroup.Item>\n                );\n              })}\n            </RadixRadioGroup.Root>\n\n            <div className=\"ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end\">\n              <RadixAlertDialog.Cancel asChild>\n                <Button intent=\"outline\" onClick={handleCancel}>\n                  {t('ui.paywall.notNow')}\n                </Button>\n              </RadixAlertDialog.Cancel>\n              <RadixAlertDialog.Action asChild>\n                <Button intent=\"primary\" onClick={handleUpgrade}>\n                  {t('ui.paywall.upgrade')}\n                </Button>\n              </RadixAlertDialog.Action>\n            </div>\n          </RadixAlertDialog.Content>\n        </RadixAlertDialog.Portal>\n      </RadixAlertDialog.Root>\n    );\n  },\n);\n\nFreemiumPaywall.displayName = 'FreemiumPaywall';\n"],"names":["contentVariants","cva","FreemiumPaywall","forwardRef","open","onOpenChange","plans","selectedPlanId","defaultSelectedPlanId","onSelectedPlanChange","usage","onUpgrade","onCancel","title","description","layout","density","className","ref","t","i18n","useTranslation","titleId","useId","descId","isControlled","internalSelected","setInternalSelected","useState","_a","currentSelected","handleSelectedChange","next","handleCancel","handleUpgrade","usagePercent","usageFull","jsx","RadixAlertDialog","jsxs","AlertTriangle","Progress","RadixRadioGroup","plan","formattedPrice","formatPaymentAmount","period","priceLine","planName","key","i","Check","Button"],"mappings":";;;;;;;;;;;AAiCA,MAAMA,IAAkBC;AAAA,EACtB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,UACE;AAAA,QACF,OACE;AAAA,MAAA;AAAA,MAEJ,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB,EAAE,QAAQ,YAAY,SAAS,OAAA;AAAA,EAAO;AAE3D,GAwBaC,IAAkBC;AAAA,EAC7B,CACE;AAAA,IACE,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,EAAA,GAEFC,MACG;;AACH,UAAM,EAAE,GAAAC,GAAG,MAAAC,EAAA,IAASC,EAAA,GACdC,IAAUC,EAAA,GACVC,IAASD,EAAA,GAETE,IAAelB,MAAmB,QAClC,CAACmB,GAAkBC,CAAmB,IAAIC;AAAA,MAC9CpB,OAAyBqB,IAAAvB,EAAM,CAAC,MAAP,gBAAAuB,EAAU,OAAM;AAAA,IAAA,GAErCC,IAAkBL,IACpBlB,KAAkB,KAClBmB,GAEEK,IAAuB,CAACC,MAAiB;AAC7C,MAAKP,KAAcE,EAAoBK,CAAI,GAC3CvB,KAAA,QAAAA,EAAuBuB;AAAA,IACzB,GAEMC,IAAe,MAAM;AACzB,MAAArB,KAAA,QAAAA,KACAP,EAAa,EAAK;AAAA,IACpB,GAEM6B,IAAgB,MAAM;AAC1B,MAAKJ,KACLnB,EAAUmB,CAAe;AAAA,IAC3B,GAEMK,IAAezB,IACjB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAIA,EAAM,OAAO,KAAK,IAAI,GAAGA,EAAM,KAAK,IAAK,GAAG,CAAC,IACxE,GACE0B,IAAY1B,IAAQA,EAAM,QAAQA,EAAM,QAAQ;AAEtD,WACE,gBAAA2B,EAACC,EAAiB,MAAjB,EAAsB,MAAAlC,GAAY,cAAAC,GACjC,UAAA,gBAAAkC,EAACD,EAAiB,QAAjB,EACC,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACC,EAAiB;AAAA,QAAjB;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA,EACA,KAAK,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,gBAAAC;AAAA,QAACD,EAAiB;AAAA,QAAjB;AAAA,UACC,KAAApB;AAAA,UACA,mBAAiBI;AAAA,UACjB,oBAAkBE;AAAA,UAClB,WAAWxB,EAAgB,EAAE,QAAAe,GAAQ,SAAAC,GAAS,WAAAC,GAAW;AAAA,UAEzD,UAAA;AAAA,YAAA,gBAAAoB,EAACC,EAAiB,OAAjB,EAAuB,IAAIhB,GAAS,SAAO,IAC1C,UAAA,gBAAAe,EAAC,MAAA,EAAG,WAAU,mBACX,UAAAxB,KAASM,EAAE,kBAAkB,GAChC,GACF;AAAA,8BACCmB,EAAiB,aAAjB,EAA6B,IAAId,GAAQ,SAAO,IAC/C,UAAA,gBAAAa,EAAC,KAAA,EAAE,WAAU,qEACV,UAAAvB,KAAeK,EAAE,wBAAwB,GAC5C,GACF;AAAA,YAECT,IACC,gBAAA6B,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,cAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,gFACZ,UAAA;AAAA,gBAAAH,IACC,gBAAAC;AAAA,kBAACG;AAAAA,kBAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,WAAU;AAAA,kBAAA;AAAA,gBAAA,IAEV;AAAA,gBACJ,gBAAAH;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW;AAAA,sBACT;AAAA,sBACAD,IACI,uCACA;AAAA,oBAAA,EACJ,KAAK,GAAG;AAAA,oBAET,UAAAA,IACGjB,EAAE,sBAAsB,IACxBA,EAAE,yBAAyB;AAAA,sBACzB,MAAMT,EAAM;AAAA,sBACZ,OAAOA,EAAM;AAAA,oBAAA,CACd;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACP,GACF;AAAA,cACA,gBAAA2B;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,OAAON;AAAA,kBACP,KAAK;AAAA,kBACL,WAAWhB,EAAE,yBAAyB;AAAA,oBACpC,MAAMT,EAAM;AAAA,oBACZ,OAAOA,EAAM;AAAA,kBAAA,CACd;AAAA,kBACD,WAAW0B,IAAY,8DAA8D;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvF,EAAA,CACF,IACE;AAAA,YAEJ,gBAAAC;AAAA,cAACK,EAAgB;AAAA,cAAhB;AAAA,gBACC,OAAOZ;AAAA,gBACP,eAAeC;AAAA,gBACf,cAAYZ,EAAE,kBAAkB;AAAA,gBAChC,WAAU;AAAA,gBAET,UAAAb,EAAM,IAAI,CAACqC,MAAS;AAKnB,wBAAMC,IAAiBC;AAAA,oBACrBF,EAAK;AAAA,oBACLA,EAAK;AAAA,oBACLvB,EAAK;AAAA,kBAAA,GAED0B,IAASH,EAAK,SAASxB,EAAEwB,EAAK,MAAM,IAAI,QACxCI,IAAYD,IACd3B,EAAE,uBAAuB,EAAE,OAAOyB,GAAgB,QAAAE,EAAA,CAAQ,IAC1DF,GACEI,IAAW7B,EAAEwB,EAAK,OAAO;AAC/B,yBACE,gBAAAJ;AAAA,oBAACG,EAAgB;AAAA,oBAAhB;AAAA,sBAEC,OAAOC,EAAK;AAAA,sBACZ,WAAW;AAAA,wBACT;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA;AAAA,sBAAA,EACA,KAAK,GAAG;AAAA,sBAEV,UAAA;AAAA,wBAAA,gBAAAJ,EAAC,QAAA,EAAK,WAAU,yEACd,UAAA;AAAA,0BAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAW,GAAS;AAAA,0BAC7C,gBAAAX,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAAU,EAAA,CAAU;AAAA,wBAAA,GAC/C;AAAA,wBACCJ,EAAK,gBAAgBA,EAAK,aAAa,SAAS,IAC/C,gBAAAN;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,cAAYlB,EAAE,qBAAqB;AAAA,4BACnC,WAAU;AAAA,4BAET,UAAAwB,EAAK,aAAa,IAAI,CAACM,GAAKC,MAC3B,gBAAAX;AAAA,8BAAC;AAAA,8BAAA;AAAA,gCAEC,WAAU;AAAA,gCAEV,UAAA;AAAA,kCAAA,gBAAAF;AAAA,oCAACc;AAAA,oCAAA;AAAA,sCACC,eAAY;AAAA,sCACZ,WAAU;AAAA,oCAAA;AAAA,kCAAA;AAAA,kCAEZ,gBAAAd,EAAC,QAAA,EAAM,UAAAlB,EAAE8B,CAAG,EAAA,CAAE;AAAA,gCAAA;AAAA,8BAAA;AAAA,8BAPTC;AAAA,4BAAA,CASR;AAAA,0BAAA;AAAA,wBAAA,IAED;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAnCCP,EAAK;AAAA,kBAAA;AAAA,gBAsChB,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAJ,EAAC,OAAA,EAAI,WAAU,+FACb,UAAA;AAAA,cAAA,gBAAAF,EAACC,EAAiB,QAAjB,EAAwB,SAAO,IAC9B,UAAA,gBAAAD,EAACe,GAAA,EAAO,QAAO,WAAU,SAASnB,GAC/B,UAAAd,EAAE,mBAAmB,GACxB,GACF;AAAA,cACA,gBAAAkB,EAACC,EAAiB,QAAjB,EAAwB,SAAO,IAC9B,UAAA,gBAAAD,EAACe,GAAA,EAAO,QAAO,WAAU,SAASlB,GAC/B,UAAAf,EAAE,oBAAoB,GACzB,EAAA,CACF;AAAA,YAAA,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACF;AAEAjB,EAAgB,cAAc;"}