@layers-app/shared 0.1.5 → 0.2.1

package/dist/components/FormViewer/components/NavControls.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import { useTranslation as d } from "react-i18next";
+import { Flex as S, Button as h } from "@mantine/core";
+import { useMediaQuery as C, useWindowEvent as g } from "@mantine/hooks";
+import { IconCornerDownLeft as w } from "@tabler/icons-react";
+import { STATIC_CLASSES as b } from "../helpers/staticClasses.js";
+import { useSteps as E } from "../hooks/useCreateFormContext.js";
+import { useInterpolateText as x } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as c } from "../store/formStore.js";
+import { EditableContent as T } from "./fields/EditableContent/EditableContent.js";
+const F = ({ data: e }) => {
+  const { t: n } = d("forms"), { handleNext: i } = E(), { api: l } = c(), s = C("(max-width: 992px)"), { useStore: m } = c(), r = m((o) => o.editing), p = m((o) => o.config.settings), f = a(
+    (o) => {
+      r || e.isEnd || s || o.code !== "Enter" || i();
+    },
+    [e.isEnd, r, i, s]
+  );
+  g("keydown", f);
+  const u = x(
+    e.confirmLabel,
+    r
+  );
+  return e.isStart || e.isEnd ? null : /* @__PURE__ */ t(
+    S,
+    {
+      justify: "var(--align)",
+      gap: 8,
+      wrap: "wrap",
+      direction: e.theme?.align === "start" ? "row" : "row-reverse",
+      children: /* @__PURE__ */ t(
+        h,
+        {
+          color: e.theme?.primaryColor,
+          size: e.theme?.size,
+          radius: e.theme?.borderRadius,
+          className: b.SUBMIT_BUTTON,
+          onClick: r ? void 0 : i,
+          leftSection: p.enterIndicator && /* @__PURE__ */ t(w, { size: "1em" }),
+          children: r ? /* @__PURE__ */ t(
+            T,
+            {
+              value: e.confirmLabel?.trim() || n("continue"),
+              onChange: (o) => {
+                l.updateStep(e.id, {
+                  confirmLabel: o
+                });
+              }
+            }
+          ) : u || n("continue")
+        }
+      )
+    }
+  );
+};
+export {
+  F as NavControls
+};

package/dist/components/FormViewer/components/Navigation/Navigation.d.ts

@@ -1 +1,2 @@
 export declare const Navigation: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Navigation.d.ts.map

package/dist/components/FormViewer/components/Navigation/Navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/Navigation/Navigation.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,UAAU,sDAiDtB,CAAC"}

package/dist/components/FormViewer/components/Navigation/Navigation.js

@@ -0,0 +1,37 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
+import { ActionIcon as n, Tooltip as c } from "@mantine/core";
+import { useMediaQuery as v } from "@mantine/hooks";
+import { IconChevronUp as u, IconChevronLeft as g, IconChevronDown as S, IconChevronRight as C } from "@tabler/icons-react";
+import { useActiveStep as x } from "../../hooks/useActiveStep.js";
+import { useSteps as z } from "../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as b } from "../../store/formStore.js";
+import { stepsReselect as I } from "../../store/selectors.js";
+const T = () => {
+  const { useStore: i } = b(), { handleNext: m, handlePrev: p } = z(), o = x(), a = i(I), t = i((r) => r.config.settings), { t: s } = f("forms"), d = v("(max-width: 768px)"), l = i((r) => r.editing);
+  return a.currentSteps.length < 2 || o?.isEnd || d ? null : /* @__PURE__ */ h(n.Group, { children: [
+    t.freeNav && /* @__PURE__ */ e(c, { label: s("prevStep"), children: /* @__PURE__ */ e(
+      n,
+      {
+        disabled: o?.isStart,
+        size: "lg",
+        color: o?.theme?.primaryColor,
+        onClick: l ? void 0 : p,
+        children: t.slideAnimation === "vertical" ? /* @__PURE__ */ e(u, { size: 18 }) : /* @__PURE__ */ e(g, { size: 18 })
+      }
+    ) }),
+    /* @__PURE__ */ e(c, { label: s("nextStep"), children: /* @__PURE__ */ e(
+      n,
+      {
+        disabled: o?.isEnd,
+        size: "lg",
+        color: o?.theme?.primaryColor,
+        onClick: l ? void 0 : m,
+        children: t.slideAnimation === "vertical" ? /* @__PURE__ */ e(S, { size: 18 }) : /* @__PURE__ */ e(C, { size: 18 })
+      }
+    ) })
+  ] });
+};
+export {
+  T as Navigation
+};

package/dist/components/FormViewer/components/OneSlideLayput.d.ts

@@ -5,3 +5,4 @@ type OneSlideLayoutProps = {
 };
 export declare const OneSlideLayout: ({ NoStepSlot, copyright, }: OneSlideLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=OneSlideLayput.d.ts.map

package/dist/components/FormViewer/components/OneSlideLayput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneSlideLayput.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/OneSlideLayput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAQ,MAAM,OAAO,CAAC;AAiBhD,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4BAG5B,mBAAmB,4CAqBrB,CAAC"}

package/dist/components/FormViewer/components/OneSlideLayput.js

@@ -0,0 +1,133 @@
+import { jsx as e, jsxs as s, Fragment as c } from "react/jsx-runtime";
+import { memo as d } from "react";
+import { createPortal as h } from "react-dom";
+import { Stack as u, Flex as b } from "@mantine/core";
+import { AnimatePresence as y, motion as k } from "framer-motion";
+import { Copyright as S } from "../../Copyright/index.js";
+import { animations as w } from "../helpers/slides.js";
+import { useFormViewerStore as p } from "../store/formStore.js";
+import { startStepReselect as v, themeReselect as F } from "../store/selectors.js";
+import { Navigation as x } from "./Navigation/Navigation.js";
+import { getImageFilter as $, Step as R } from "./Step.js";
+import { ProgressLine as A } from "./fields/ProgressLine.js";
+import g from "../FormViewer.module.css.js";
+import { useSteps as C } from "../hooks/useCreateFormContext.js";
+import { useFormMobile as j } from "../hooks/useFormMobile.js";
+import { useActiveStep as N } from "../hooks/useActiveStep.js";
+const T = ({
+  NoStepSlot: m,
+  copyright: l
+}) => {
+  const { useStore: a } = p();
+  return a(v) ? /* @__PURE__ */ e(P, { copyright: l }) : /* @__PURE__ */ e(
+    u,
+    {
+      align: "center",
+      justify: "center",
+      gap: 4,
+      w: "100%",
+      h: "100%",
+      p: 16,
+      children: /* @__PURE__ */ e(m, {})
+    }
+  );
+}, P = d(({ copyright: m }) => {
+  const { anim: l } = C(), { ref: a } = j(), { useStore: n } = p(), i = n((r) => r.config.settings), f = n((r) => r.editing), t = n(F), o = N();
+  return /* @__PURE__ */ s(c, { children: [
+    h(
+      /* @__PURE__ */ s(c, { children: [
+        /* @__PURE__ */ e(
+          "link",
+          {
+            rel: "stylesheet",
+            href: `https://fonts.googleapis.com/css2?family=${t.title?.fontFamily || "Roboto"}:wght@${t.title?.fontWeight || 400}&display=swap`
+          }
+        ),
+        /* @__PURE__ */ e(
+          "link",
+          {
+            rel: "stylesheet",
+            href: `https://fonts.googleapis.com/css2?family=${t.description?.fontFamily || "Roboto"}:wght@${t.description?.fontWeight || 400}&display=swap`
+          }
+        ),
+        /* @__PURE__ */ e(
+          "link",
+          {
+            rel: "stylesheet",
+            href: `https://fonts.googleapis.com/css2?family=${t.font?.fontFamily || "Roboto"}:wght@${t.font?.fontWeight || 400}&display=swap`
+          }
+        )
+      ] }),
+      document.head
+    ),
+    /* @__PURE__ */ s("div", { ref: a, className: g.root, children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: g.background,
+          style: {
+            "--bg-blend": t.background?.blendMode,
+            "--bg-fit": t.background?.fit || "cover",
+            "--bg-image": t.background?.image ? `url(${t.background.image})` : "none",
+            "--bg-color": t.background?.color || "none",
+            "--bg-image-filter": $({
+              brightness: t.background?.brightness || 100,
+              blur: t.background?.blur,
+              layout: "background"
+            })
+          }
+        }
+      ),
+      /* @__PURE__ */ e(y, { mode: "wait", children: o && /* @__PURE__ */ e(
+        k.div,
+        {
+          style: {
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0
+          },
+          transition: {
+            duration: 0.25
+          },
+          ...w[i.slideAnimation][l],
+          animate: { opacity: 1, y: 0, x: 0 },
+          children: /* @__PURE__ */ e(
+            R,
+            {
+              step: o,
+              theme: o.theme
+            },
+            o.id
+          )
+        },
+        o.id
+      ) })
+    ] }),
+    /* @__PURE__ */ s(
+      b,
+      {
+        pos: "absolute",
+        bottom: 24,
+        right: 24,
+        onClick: f ? (r) => r.preventDefault() : void 0,
+        children: [
+          i.copyright && /* @__PURE__ */ e(
+            S,
+            {
+              size: "sm",
+              color: o?.theme?.primaryColor,
+              title: m
+            }
+          ),
+          i.navArrows && i.layout === "slides" && /* @__PURE__ */ e(x, {})
+        ]
+      }
+    ),
+    i.progressBar && /* @__PURE__ */ e(A, {})
+  ] });
+});
+export {
+  T as OneSlideLayout
+};

package/dist/components/FormViewer/components/Step.d.ts

@@ -1,6 +1,7 @@
 import { MediaData, StepData, ThemeData } from '../types/form';
 export declare const getImageFilter: (v: MediaData | null | undefined) => string;
-export declare const Step: import('react').MemoExoticComponent<({ step, theme }: {
+export declare const Step: import("react").MemoExoticComponent<({ step, theme }: {
     step: StepData;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=Step.d.ts.map

package/dist/components/FormViewer/components/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/Step.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,SAAS,EAET,QAAQ,EACR,SAAS,EACV,MAAM,eAAe,CAAC;AA2BvB,eAAO,MAAM,cAAc,GAAI,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,WAI7D,CAAC;AAiDF,eAAO,MAAM,IAAI,wDACG;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,6CAkLxD,CAAC"}

package/dist/components/FormViewer/components/Step.js

@@ -0,0 +1,225 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { memo as I, Fragment as T } from "react";
+import { Stack as N, Flex as O, Image as E } from "@mantine/core";
+import { combineClasses as l, STATIC_CLASSES as i, getPageNumberClass as M } from "../helpers/staticClasses.js";
+import { alignRelation as f } from "../helpers/themeUtils.js";
+import { useFormViewerStore as h } from "../store/formStore.js";
+import { stepByControlReselect as S, questionNumberReselect as U } from "../store/selectors.js";
+import { Container as D } from "./Container.js";
+import { ListFocusBox as R } from "./ListFocusBox.js";
+import { NavControls as B } from "./NavControls.js";
+import { StepDescription as x } from "./StepDescription.js";
+import { StepTitle as Y } from "./StepTitle.js";
+import { ButtonField as k } from "./fields/ButtonField/ButtonField.js";
+import { ChoiceField as G } from "./fields/ChoiceField/ChoiceField.js";
+import { PictureChoiceField as P } from "./fields/ChoiceField/PictureChoiceField.js";
+import { ConfirmField as v } from "./fields/ConfirmField.js";
+import { DateField as $ } from "./fields/DateField.js";
+import { DropdownField as z } from "./fields/DropdownField/DropdownField.js";
+import { EmailField as K } from "./fields/EmailField.js";
+import { LocationField as j } from "./fields/LocationField.js";
+import { LongTextField as w } from "./fields/LongTextField.js";
+import { MultipleChoiceField as H } from "./fields/MultipleChoice/MultipleChoiceField.js";
+import { NumberField as q } from "./fields/NumberField.js";
+import { PhoneField as W } from "./fields/PhoneField.js";
+import { RatingField as V } from "./fields/RatingField.js";
+import { SliderField as J } from "./fields/SliderField.js";
+import { StartField as Q } from "./fields/StartField.js";
+import { TextField as X } from "./fields/TextField.js";
+import { UploadField as Z } from "./fields/UploadField/UploadField.js";
+import { YesNoField as oo } from "./fields/YesNoField.js";
+import n from "../FormViewer.module.css.js";
+const io = (t) => t ? `brightness(${t.brightness ?? 0}%) ${t.layout === "background" ? `blur(${t.blur ?? 0}px)` : ""}` : "none", m = (t) => t ? {
+  content: i.MEDIA_LAYOUT_CONTENT,
+  left: i.MEDIA_LAYOUT_LEFT,
+  right: i.MEDIA_LAYOUT_RIGHT,
+  fullLeft: i.MEDIA_LAYOUT_FULL_LEFT,
+  fullRight: i.MEDIA_LAYOUT_FULL_RIGHT,
+  background: i.MEDIA_LAYOUT_BACKGROUND,
+  top: i.MEDIA_LAYOUT_TOP,
+  bottom: i.MEDIA_LAYOUT_BOTTOM,
+  fullTop: i.MEDIA_LAYOUT_FULL_TOP,
+  fullBottom: i.MEDIA_LAYOUT_FULL_BOTTOM
+}[t] || i.BLOCK_IMAGE : i.BLOCK_IMAGE, to = {
+  text: X,
+  date: $,
+  number: q,
+  multipleChoice: H,
+  slider: J,
+  dropdown: z,
+  choice: G,
+  upload: Z,
+  location: j,
+  phone: W,
+  email: K,
+  yesNo: oo,
+  longText: w,
+  pictureChoice: P,
+  start: Q,
+  confirm: v,
+  button: k,
+  rating: V
+}, xo = I(
+  ({ step: t, theme: r }) => {
+    const { useStore: p } = h(), L = p((a) => a.isMobile), F = p(S), b = p(U), { media: o } = t, s = t.controls?.[0];
+    let d = i.PAGE;
+    if (s)
+      if (s.controlType === "start")
+        d = i.START;
+      else if (s.controlType === "confirm")
+        d = i.END;
+      else {
+        const a = b[s.id];
+        a && (d = M(a));
+      }
+    const g = r?.align || "start";
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: l(
+          n.stepRoot,
+          i.PAGE,
+          d
+        ),
+        style: {
+          "--size": r?.size,
+          "--align": g,
+          "--media-image": o?.image ? `url(${o.image})` : "none",
+          "--media-image-filter": io(o),
+          "--bg-color": r?.background?.image ? "transparent" : r?.background?.color || "none",
+          "--bg-opacityHex": `${(r?.background?.opacity ?? 1) * 100}%`,
+          fontWeight: r?.font?.fontWeight
+        },
+        "data-mobile": L,
+        "data-align": f[g],
+        "data-media-layout": o?.layout,
+        children: [
+          o && o.layout === "background" && /* @__PURE__ */ e(
+            "div",
+            {
+              className: l(
+                m(o.layout),
+                n.media
+              )
+            }
+          ),
+          o && ["top", "fullTop", "left", "fullLeft"].includes(
+            o.layout ?? ""
+          ) && /* @__PURE__ */ e(
+            "div",
+            {
+              className: l(
+                m(o.layout),
+                n.media
+              ),
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: l(
+                    m(o.layout),
+                    n.mediaInner
+                  ),
+                  "data-radius": r?.borderRadius
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: l(n.content), children: !!t.controls?.length && /* @__PURE__ */ e(D, { theme: t.theme, children: t.controls.map((a, y, A) => {
+            const _ = to[a.controlType], C = y === A.length - 1, c = F[a.id];
+            return c ? /* @__PURE__ */ u(T, { children: [
+              /* @__PURE__ */ u(R, { controlId: a.id, children: [
+                /* @__PURE__ */ u(
+                  N,
+                  {
+                    gap: 4,
+                    align: f[r?.align || "start"],
+                    className: l(
+                      i.BLOCK,
+                      n.stack
+                    ),
+                    children: [
+                      /* @__PURE__ */ e(
+                        Y,
+                        {
+                          originalStepId: c.id,
+                          theme: r,
+                          control: a
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        x,
+                        {
+                          originalStepId: c.id,
+                          theme: r,
+                          control: a
+                        }
+                      )
+                    ]
+                  }
+                ),
+                o && ["content"].includes(o.layout ?? "") && /* @__PURE__ */ e(O, { justify: f[r?.align || "start"], children: /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: l(
+                      m(o.layout),
+                      n.media
+                    ),
+                    "data-radius": r?.borderRadius,
+                    style: {
+                      "--size": o.size ? `${o.size}%` : "100%"
+                    },
+                    children: /* @__PURE__ */ e(
+                      E,
+                      {
+                        src: o.image,
+                        className: l(
+                          m(o.layout),
+                          n.mediaInner
+                        )
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  _,
+                  {
+                    control: a,
+                    step: c,
+                    theme: r
+                  },
+                  a.id
+                )
+              ] }),
+              C && /* @__PURE__ */ e(B, { data: t })
+            ] }, a.id) : /* @__PURE__ */ e(T, {}, a.id);
+          }) }) }),
+          o && ["bottom", "fullBottom", "right", "fullRight"].includes(
+            o.layout ?? ""
+          ) && /* @__PURE__ */ e(
+            "div",
+            {
+              className: l(
+                m(o.layout),
+                n.media
+              ),
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: l(
+                    m(o.layout),
+                    n.mediaInner
+                  ),
+                  "data-radius": t.theme?.borderRadius
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  xo as Step,
+  io as getImageFilter
+};

package/dist/components/FormViewer/components/StepDescription.d.ts

@@ -4,3 +4,4 @@ export declare const StepDescription: ({ originalStepId, control, theme, }: {
     control: Control;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=StepDescription.d.ts.map

package/dist/components/FormViewer/components/StepDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepDescription.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/StepDescription.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAKnD,eAAO,MAAM,eAAe,GAAI,qCAI7B;IACD,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,mDAwEA,CAAC"}

package/dist/components/FormViewer/components/StepDescription.js

@@ -0,0 +1,73 @@
+import { jsxs as h, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { useMemo as y } from "react";
+import { createPortal as S } from "react-dom";
+import { useTranslation as T } from "react-i18next";
+import { useMantineTheme as z, parseThemeColor as C } from "@mantine/core";
+import { combineClasses as w, STATIC_CLASSES as x } from "../helpers/staticClasses.js";
+import { useInterpolateText as F } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as p } from "../store/formStore.js";
+import { EditableContent as L } from "./fields/EditableContent/EditableContent.js";
+import _ from "../FormViewer.module.css.js";
+const O = ({
+  originalStepId: l,
+  control: t,
+  theme: i
+}) => {
+  const { t: m } = T("forms"), { api: c } = p(), s = z(), { useStore: f } = p(), n = f((e) => e.editing), o = i?.description, d = y(() => {
+    const e = C({
+      color: o?.color || "",
+      theme: s
+    }), a = o?.fontSize;
+    return {
+      "--color": e.value || "auto",
+      "--font-size": a ? `${a}px` : `var(--font-size-${i?.size})`,
+      "--font-weight": o?.fontWeight,
+      "--font-family": o?.fontFamily
+    };
+  }, [
+    i?.size,
+    o?.color,
+    o?.fontFamily,
+    o?.fontSize,
+    o?.fontWeight,
+    s
+  ]), u = F(
+    t.description,
+    n
+  );
+  return !t.description && !n ? null : /* @__PURE__ */ h(g, { children: [
+    S(
+      /* @__PURE__ */ r(
+        "link",
+        {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css2?family=${o?.fontFamily}:wght@100..900&display=swap`
+        }
+      ),
+      document.head
+    ),
+    /* @__PURE__ */ r(
+      "p",
+      {
+        className: w(
+          _.stepDescription,
+          x.BLOCK_TEXT
+        ),
+        style: d,
+        "data-size": i?.size,
+        children: n ? /* @__PURE__ */ r(
+          L,
+          {
+            value: t.description,
+            placeholder: m("descriptionOptional"),
+            onChange: (e) => c.updateControl(l, t.id, { description: e }),
+            allowNewLines: !0
+          }
+        ) : /* @__PURE__ */ r("span", { dangerouslySetInnerHTML: { __html: u } })
+      }
+    )
+  ] });
+};
+export {
+  O as StepDescription
+};

package/dist/components/FormViewer/components/StepTitle.d.ts

@@ -4,3 +4,4 @@ export declare const StepTitle: ({ originalStepId, control, theme, }: {
     control: Control;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StepTitle.d.ts.map

package/dist/components/FormViewer/components/StepTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/components/StepTitle.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAKnD,eAAO,MAAM,SAAS,GAAI,qCAIvB;IACD,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA8GA,CAAC"}