@layers-app/shared 0.1.5 → 0.2.1

package/dist/components/OnBoarding/ProjectBoard.js

@@ -0,0 +1,141 @@
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { Fragment as v } from "react";
+import { useTranslation as x } from "react-i18next";
+import { useOnboardingState as b } from "../../store/onboarding.js";
+import { Flex as e, Avatar as i, Text as a, Divider as c, Box as L, Group as k, Button as A, Input as B, ActionIcon as S } from "@mantine/core";
+import { IconList as y, IconLayoutCards as j, IconLayoutSidebarLeftCollapse as C, IconBell as F, IconListSearch as D, IconFileText as N, IconCheckbox as V, IconGitMerge as E, IconDotsCircleHorizontal as G, IconSettings2 as T, IconHelp as H, IconListDetails as P, IconSearch as J, IconPlus as K } from "@tabler/icons-react";
+import M from "../../assets/images/person2.png.js";
+import O from "../../assets/images/person3.png.js";
+import $ from "../../assets/images/person4.png.js";
+import s from "../../assets/images/person.png.js";
+import l from "./styles.module.css.js";
+const q = [
+  {
+    value: "list",
+    Icon: y,
+    link: "sprintList"
+  },
+  {
+    value: "kanban",
+    Icon: j,
+    link: "sprintKanban"
+  }
+], ir = ({ children: m }) => {
+  const { projectName: p, step: d, layoutView: h, setLayoutView: f } = b(), { t: u } = x("onboarding"), z = q.map((t) => ({
+    ...t,
+    title: u(`sprintView.${t.value}`)
+  }));
+  return /* @__PURE__ */ r(
+    e,
+    {
+      h: "calc(100vh - 100px)",
+      w: "-webkit-fill-available",
+      p: "md",
+      className: l.boardContainer,
+      id: "my-modal-root",
+      children: /* @__PURE__ */ o(e, { h: "100%", w: "100%", children: [
+        /* @__PURE__ */ o(
+          e,
+          {
+            className: l.navBar,
+            h: "100%",
+            w: "56px",
+            direction: "column",
+            align: "center",
+            justify: "flex-start",
+            p: "16px",
+            children: [
+              /* @__PURE__ */ o(e, { gap: 16, h: "100%", w: "100%", direction: "column", children: [
+                /* @__PURE__ */ r(
+                  i,
+                  {
+                    m: 0,
+                    size: 24,
+                    color: "#228BE6",
+                    variant: "filled",
+                    radius: "sm",
+                    children: /* @__PURE__ */ r(a, { fz: 12, fw: 700, children: "AV" })
+                  }
+                ),
+                /* @__PURE__ */ r(C, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(F, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(c, { w: "100%" }),
+                /* @__PURE__ */ r(D, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(N, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(V, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(E, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(G, { color: "#495057", size: 20 })
+              ] }),
+              /* @__PURE__ */ o(e, { gap: 16, flex: 1, h: "100%", w: "100%", direction: "column", children: [
+                /* @__PURE__ */ r(c, { w: "100%" }),
+                /* @__PURE__ */ r(T, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(H, { color: "#495057", size: 20 }),
+                /* @__PURE__ */ r(i, { src: s, size: 24, alt: "John Doe" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(L, { w: "100%", h: "100%", children: [
+          /* @__PURE__ */ o(e, { mb: 24, gap: 36, h: 32, align: "center", children: [
+            /* @__PURE__ */ o(e, { h: "100%", pl: 12, children: [
+              /* @__PURE__ */ r(P, { size: 16, color: "#228BE6" }),
+              /* @__PURE__ */ r(a, { fz: 14, fw: 400, children: p })
+            ] }),
+            /* @__PURE__ */ r(k, { gap: 4, align: "center", wrap: "nowrap", children: z.map(({ title: t, Icon: w, value: n }, I, g) => /* @__PURE__ */ o(v, { children: [
+              /* @__PURE__ */ r(
+                A,
+                {
+                  className: l.button,
+                  variant: "subtle",
+                  radius: 4,
+                  color: "dark",
+                  size: "compact-sm",
+                  leftSection: /* @__PURE__ */ r(w, { size: 16 }),
+                  "data-active": h === n,
+                  onClick: () => f(n),
+                  children: t
+                }
+              ),
+              I < g.length - 1 && /* @__PURE__ */ r(c, { orientation: "vertical" })
+            ] }, n)) })
+          ] }),
+          /* @__PURE__ */ o(e, { direction: "column", w: "100%", gap: 14, children: [
+            /* @__PURE__ */ o(e, { gap: 0, w: "100%", align: "center", justify: "flex-start", children: [
+              /* @__PURE__ */ r(
+                B,
+                {
+                  w: 391,
+                  height: 32,
+                  leftSection: /* @__PURE__ */ r(J, { color: "#495057", size: 16 }),
+                  placeholder: "Search tasks...",
+                  mr: 24
+                }
+              ),
+              d < 3 ? /* @__PURE__ */ r(
+                i,
+                {
+                  mr: 16,
+                  variant: "filled",
+                  color: "#228BE6",
+                  radius: "xl",
+                  size: 36
+                }
+              ) : /* @__PURE__ */ o(i.Group, { mr: 16, children: [
+                /* @__PURE__ */ r(i, { size: 36, src: s }),
+                /* @__PURE__ */ r(i, { size: 36, src: M }),
+                /* @__PURE__ */ r(i, { size: 36, src: O }),
+                /* @__PURE__ */ r(i, { size: 36, src: $ }),
+                /* @__PURE__ */ r(i, { size: 36, children: "+1" })
+              ] }),
+              /* @__PURE__ */ r(S, { size: 36, radius: "xl", color: "#F8F9FA", children: /* @__PURE__ */ r(K, { color: "#495057" }) })
+            ] }),
+            m
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  ir as default
+};

package/dist/components/OnBoarding/StepsNavBar.d.ts

@@ -2,3 +2,4 @@ declare const StepsNavBar: ({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default StepsNavBar;
+//# sourceMappingURL=StepsNavBar.d.ts.map

package/dist/components/OnBoarding/StepsNavBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepsNavBar.d.ts","sourceRoot":"","sources":["../../../src/components/OnBoarding/StepsNavBar.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAkB/D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/OnBoarding/StepsNavBar.js

@@ -0,0 +1,21 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { Flex as n, Button as e } from "@mantine/core";
+const s = ({ children: r }) => /* @__PURE__ */ t(
+  n,
+  {
+    direction: "column",
+    align: "start",
+    wrap: "nowrap",
+    justify: "space-between",
+    h: "100%",
+    w: 400,
+    mt: 10,
+    children: [
+      r,
+      /* @__PURE__ */ o(e, { color: "#228BE6", variant: "outline", children: "Skip onboarding" })
+    ]
+  }
+);
+export {
+  s as default
+};

package/dist/components/OnBoarding/index.d.ts

@@ -1 +1,2 @@
 export * from './OnBoardingPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/OnBoarding/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OnBoarding/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/OnBoarding/steps/AddTasks/AddTasksNav.d.ts

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

package/dist/components/OnBoarding/steps/AddTasks/AddTasksNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddTasksNav.d.ts","sourceRoot":"","sources":["../../../../../src/components/OnBoarding/steps/AddTasks/AddTasksNav.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,WAAW,+CAmChB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/OnBoarding/steps/AddTasks/AddTasksNav.js

@@ -0,0 +1,42 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTranslation as d } from "react-i18next";
+import { useOnboardingState as m } from "../../../../store/onboarding.js";
+import { Flex as u, TextInput as x } from "@mantine/core";
+import { IconCheckbox as T } from "@tabler/icons-react";
+import f from "../Wrapper.js";
+const b = () => {
+  const { nextStep: n, prevStep: i, tasksList: a, setTasksList: s } = m(), { t } = d("onboarding");
+  return /* @__PURE__ */ e(
+    f,
+    {
+      title: t("addTasks.title"),
+      description: t("addTasks.description"),
+      nextText: t("next"),
+      prevText: t("prev"),
+      nextButtonProps: {
+        onClick: () => n()
+      },
+      prevButtonProps: {
+        onClick: () => i()
+      },
+      children: /* @__PURE__ */ e(u, { align: "start", direction: "column", w: "100%", gap: 8, children: a.map((o, p, l) => /* @__PURE__ */ e(
+        x,
+        {
+          leftSection: /* @__PURE__ */ e(T, { size: 16, color: "#000000" }),
+          w: "100%",
+          variant: "default",
+          placeholder: "Task name",
+          value: o.title,
+          onChange: (c) => {
+            const r = [...l];
+            r[p] = { ...o, title: c.target.value }, s(r);
+          }
+        },
+        o.id
+      )) })
+    }
+  );
+};
+export {
+  b as default
+};

package/dist/components/OnBoarding/steps/AddTasks/TasksListBoard.d.ts

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

package/dist/components/OnBoarding/steps/AddTasks/TasksListBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TasksListBoard.d.ts","sourceRoot":"","sources":["../../../../../src/components/OnBoarding/steps/AddTasks/TasksListBoard.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,cAAc,+CA0DnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/OnBoarding/steps/AddTasks/TasksListBoard.js

@@ -0,0 +1,51 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { useOnboardingState as u } from "../../../../store/onboarding.js";
+import { Flex as i, Text as s, Divider as f, ActionIcon as g } from "@mantine/core";
+import { randomId as c } from "@mantine/hooks";
+import { IconCheck as y, IconBug as h, IconSquareRotated as w } from "@tabler/icons-react";
+const j = () => {
+  const { tasksList: l } = u(), { t: r } = p("onboarding"), a = [
+    {
+      id: c(),
+      color: "blue",
+      icon: y,
+      name: r("selectCategory.options.task"),
+      type: "task",
+      order: 1
+    },
+    {
+      id: c(),
+      color: "orange",
+      icon: h,
+      name: r("selectCategory.options.bug"),
+      type: "bug",
+      order: 2
+    },
+    {
+      id: c(),
+      color: "grape",
+      icon: w,
+      name: r("selectCategory.options.milestone"),
+      type: "milestone",
+      order: 3
+    }
+  ], d = (o) => {
+    const e = a.find((m) => m.type === o);
+    return e ? /* @__PURE__ */ t(g, { size: 16, variant: "filled", color: e.color, children: /* @__PURE__ */ t(e.icon, {}) }) : null;
+  };
+  return /* @__PURE__ */ t(i, { pl: 38, direction: "column", align: "start", w: "100%", children: l.map((o, e) => /* @__PURE__ */ n(i, { w: "100%", direction: "column", children: [
+    /* @__PURE__ */ n(i, { w: "100%", align: "center", justify: "start", children: [
+      d(o.type),
+      /* @__PURE__ */ n(s, { w: 58, c: "#868E96", fz: 14, fw: 400, children: [
+        "DEMO-",
+        e + 1
+      ] }),
+      /* @__PURE__ */ t(s, { fz: 14, fw: 400, children: o.title })
+    ] }),
+    /* @__PURE__ */ t(f, { c: "#DEE2E6", w: "100%" })
+  ] }, o.id)) });
+};
+export {
+  j as default
+};

package/dist/components/OnBoarding/steps/CreateFirstProject.d.ts

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

package/dist/components/OnBoarding/steps/CreateFirstProject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateFirstProject.d.ts","sourceRoot":"","sources":["../../../../src/components/OnBoarding/steps/CreateFirstProject.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,kBAAkB,+CAkCvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/OnBoarding/steps/CreateFirstProject.js

@@ -0,0 +1,45 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useTranslation as c } from "react-i18next";
+import { useOnboardingState as l } from "../../../store/onboarding.js";
+import { TextInput as f, Text as m } from "@mantine/core";
+import u from "./Wrapper.js";
+const h = () => {
+  const { nextStep: r, prevStep: o, communityType: n, projectName: i, setProjectName: p } = l(), { t } = c("onboarding");
+  return /* @__PURE__ */ a(
+    u,
+    {
+      title: t("firstProject.title"),
+      description: t("firstProject.description"),
+      nextText: t("next"),
+      prevText: t("prev"),
+      nextButtonProps: {
+        onClick: () => r()
+      },
+      prevButtonProps: {
+        onClick: () => o()
+      },
+      children: [
+        /* @__PURE__ */ e(
+          f,
+          {
+            label: t("firstProject.inputLabel", {
+              option: n
+            }),
+            labelProps: {
+              style: { fontWeight: 600 }
+            },
+            w: "100%",
+            placeholder: t("firstProject.inputPlaceholder"),
+            onChange: (s) => p(s.target.value),
+            value: i,
+            variant: "default"
+          }
+        ),
+        /* @__PURE__ */ e(m, { fz: 14, children: t("firstProject.secondDescription") })
+      ]
+    }
+  );
+};
+export {
+  h as default
+};

package/dist/components/OnBoarding/steps/DefineStatuses/DefineStatusesNav.d.ts

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

package/dist/components/OnBoarding/steps/DefineStatuses/DefineStatusesNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefineStatusesNav.d.ts","sourceRoot":"","sources":["../../../../../src/components/OnBoarding/steps/DefineStatuses/DefineStatusesNav.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,iBAAiB,+CAqCtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/OnBoarding/steps/DefineStatuses/DefineStatusesNav.js

@@ -0,0 +1,42 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTranslation as c } from "react-i18next";
+import { useOnboardingState as m } from "../../../../store/onboarding.js";
+import { Flex as f, TextInput as d } from "@mantine/core";
+import { IconLayoutKanban as S } from "@tabler/icons-react";
+import x from "../Wrapper.js";
+const C = () => {
+  const { nextStep: r, prevStep: a, statusesList: s, setStatusesList: i } = m(), { t } = c("onboarding");
+  return /* @__PURE__ */ e(
+    x,
+    {
+      title: t("defineStatuses.title"),
+      description: t("defineStatuses.description"),
+      nextText: t("next"),
+      prevText: t("prev"),
+      nextButtonProps: {
+        onClick: () => r()
+      },
+      prevButtonProps: {
+        onClick: () => a()
+      },
+      children: /* @__PURE__ */ e(f, { align: "start", direction: "column", w: "100%", gap: 8, children: s.map((p, n, u) => /* @__PURE__ */ e(
+        d,
+        {
+          leftSection: /* @__PURE__ */ e(S, { color: "#000000", size: 16 }),
+          w: "100%",
+          variant: "default",
+          placeholder: "Status name",
+          value: p,
+          onChange: (l) => {
+            const o = [...u];
+            o[n] = l.target.value, i(o);
+          }
+        },
+        n
+      )) })
+    }
+  );
+};
+export {
+  C as default
+};

package/dist/components/OnBoarding/steps/DefineStatuses/StatusBadge.d.ts

@@ -6,3 +6,4 @@ declare const StatusBadge: ({ variant, title, color, rest, }: {
     rest?: BadgeProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default StatusBadge;
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/OnBoarding/steps/DefineStatuses/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/OnBoarding/steps/DefineStatuses/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAOX,MAAM,eAAe,CAAC;AAqBvB,QAAA,MAAM,WAAW,GAAI,kCAKlB;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,4CAQA,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/OnBoarding/steps/DefineStatuses/StatusBadge.js

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+import { MantineProvider as s, Badge as d, defaultVariantColorsResolver as n, parseThemeColor as h, darken as i, rgba as l } from "@mantine/core";
+const m = (r) => {
+  const o = n(r), e = h({
+    color: r.color || r.theme.primaryColor,
+    theme: r.theme
+  });
+  return r.variant === "light" ? {
+    background: l(e.value, 0.1),
+    hover: l(e.value, 0.15),
+    border: `1px solid ${e.value}`,
+    color: i(e.value, 0.1)
+  } : o;
+}, u = ({
+  variant: r = "light",
+  title: o,
+  color: e,
+  rest: t
+}) => /* @__PURE__ */ a(s, { theme: { variantColorResolver: m }, children: /* @__PURE__ */ a(d, { h: 22, radius: "sm", color: e, variant: r, ...t, children: o }) });
+export {
+  u as default
+};

package/dist/components/OnBoarding/steps/DefineStatuses/StatusesListBoard.d.ts

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

package/dist/components/OnBoarding/steps/DefineStatuses/StatusesListBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusesListBoard.d.ts","sourceRoot":"","sources":["../../../../../src/components/OnBoarding/steps/DefineStatuses/StatusesListBoard.tsx"],"names":[],"mappings":"AAyBA,QAAA,MAAM,iBAAiB,+CAgNtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/OnBoarding/steps/DefineStatuses/StatusesListBoard.js

@@ -0,0 +1,217 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useTranslation as B } from "react-i18next";
+import { useOnboardingState as F } from "../../../../store/onboarding.js";
+import { Flex as n, Accordion as i, Text as o, Avatar as h, Divider as m, ActionIcon as f, Skeleton as w } from "@mantine/core";
+import { randomId as u } from "@mantine/hooks";
+import { IconCheck as p, IconBug as A, IconSquareRotated as C, IconEqual as g, IconChevronUp as D } from "@tabler/icons-react";
+import s from "./StatusBadge.js";
+import d from "../styles.module.css.js";
+const T = () => {
+  const { tasksList: E, statusesList: c } = F(), { t: a } = B("onboarding"), v = [
+    {
+      id: u(),
+      color: "blue",
+      icon: p,
+      name: a("selectCategory.options.task"),
+      type: "task",
+      order: 1
+    },
+    {
+      id: u(),
+      color: "orange",
+      icon: A,
+      name: a("selectCategory.options.bug"),
+      type: "bug",
+      order: 2
+    },
+    {
+      id: u(),
+      color: "grape",
+      icon: C,
+      name: a("selectCategory.options.milestone"),
+      type: "milestone",
+      order: 3
+    }
+  ], z = (l) => {
+    const t = v.find((y) => y.type === l);
+    return t ? /* @__PURE__ */ e(f, { size: 16, variant: "filled", color: t.color, children: /* @__PURE__ */ e(t.icon, {}) }) : null;
+  };
+  return /* @__PURE__ */ e(n, { direction: "column", align: "start", w: "100%", children: /* @__PURE__ */ r(
+    i,
+    {
+      w: "100%",
+      classNames: {
+        root: d.accordion,
+        item: d.item,
+        control: d.control,
+        label: d.label,
+        content: d.content,
+        chevron: d.chevron
+      },
+      variant: "separated",
+      multiple: !0,
+      chevronPosition: "left",
+      chevron: /* @__PURE__ */ e(D, { color: "#495057", size: 20 }),
+      value: ["item-1"],
+      children: [
+        /* @__PURE__ */ r(i.Item, { value: "item-1", children: [
+          /* @__PURE__ */ e(i.Control, { children: /* @__PURE__ */ r(n, { gap: 14, align: "center", children: [
+            /* @__PURE__ */ e(s, { color: "#228BE6", title: c[0] }),
+            /* @__PURE__ */ r(o, { c: "#868E96", fz: 14, children: [
+              "(",
+              a("defineStatuses.tasks"),
+              ": ",
+              E.length,
+              ")"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e(i.Panel, { children: E.map((l, t) => /* @__PURE__ */ r(n, { direction: "column", children: [
+            /* @__PURE__ */ r(
+              n,
+              {
+                h: 36,
+                w: "100%",
+                align: "center",
+                justify: "space-between",
+                children: [
+                  /* @__PURE__ */ r(n, { align: "center", children: [
+                    z(l.type),
+                    /* @__PURE__ */ r(o, { w: 58, c: "#868E96", fz: 14, fw: 400, children: [
+                      "DEMO-",
+                      t + 1
+                    ] }),
+                    /* @__PURE__ */ e(o, { fz: 14, fw: 400, children: l.title })
+                  ] }),
+                  /* @__PURE__ */ r(n, { gap: 8, align: "center", children: [
+                    /* @__PURE__ */ e(g, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ e(s, { color: "#228BE6", title: c[0] }),
+                    /* @__PURE__ */ e(
+                      h,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(m, { c: "#DEE2E6", w: "100%" })
+          ] }, l.id)) })
+        ] }),
+        /* @__PURE__ */ r(i.Item, { value: "item-1", children: [
+          /* @__PURE__ */ e(i.Control, { children: /* @__PURE__ */ r(n, { gap: 14, align: "center", children: [
+            /* @__PURE__ */ e(s, { color: "#12B886", title: c[1] }),
+            /* @__PURE__ */ r(o, { c: "#868E96", fz: 14, children: [
+              "(",
+              a("defineStatuses.tasks"),
+              ": 2)"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e(i.Panel, { children: Array(2).fill(0).map((l, t) => /* @__PURE__ */ r(n, { direction: "column", children: [
+            /* @__PURE__ */ r(
+              n,
+              {
+                h: 36,
+                w: "100%",
+                align: "center",
+                justify: "space-between",
+                children: [
+                  /* @__PURE__ */ r(n, { children: [
+                    /* @__PURE__ */ e(f, { size: 16, variant: "filled", color: "#E9ECEF", children: /* @__PURE__ */ e(p, {}) }),
+                    /* @__PURE__ */ r(o, { w: 58, c: "#ADB5BD", fz: 14, fw: 400, children: [
+                      "DEMO-",
+                      t + 4
+                    ] }),
+                    /* @__PURE__ */ e(
+                      w,
+                      {
+                        radius: "xs",
+                        animate: !1,
+                        height: 10,
+                        w: t === 0 ? 86 : 106
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ r(n, { gap: 8, align: "center", children: [
+                    /* @__PURE__ */ e(g, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ e(s, { color: "#12B886", title: c[1] }),
+                    /* @__PURE__ */ e(
+                      h,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(m, { c: "#DEE2E6", w: "100%" })
+          ] }, `#12B886-${t}`)) })
+        ] }),
+        /* @__PURE__ */ r(i.Item, { value: "item-1", children: [
+          /* @__PURE__ */ e(i.Control, { children: /* @__PURE__ */ r(n, { gap: 14, align: "center", children: [
+            /* @__PURE__ */ e(s, { color: "#FA5252", title: c[2] }),
+            /* @__PURE__ */ r(o, { c: "#868E96", fz: 14, children: [
+              "(",
+              a("defineStatuses.tasks"),
+              ": 2)"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e(i.Panel, { children: Array(2).fill(0).map((l, t) => /* @__PURE__ */ r(n, { direction: "column", children: [
+            /* @__PURE__ */ r(
+              n,
+              {
+                h: 36,
+                w: "100%",
+                align: "center",
+                justify: "space-between",
+                children: [
+                  /* @__PURE__ */ r(n, { children: [
+                    /* @__PURE__ */ e(f, { size: 16, variant: "filled", color: "#E9ECEF", children: /* @__PURE__ */ e(p, {}) }),
+                    /* @__PURE__ */ r(o, { w: 58, c: "#ADB5BD", fz: 14, fw: 400, children: [
+                      "DEMO-",
+                      t + 6
+                    ] }),
+                    /* @__PURE__ */ e(
+                      w,
+                      {
+                        radius: "xs",
+                        animate: !1,
+                        height: 10,
+                        w: t === 0 ? 35 : 180
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ r(n, { gap: 8, align: "center", children: [
+                    /* @__PURE__ */ e(g, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ e(s, { color: "#FA5252", title: c[2] }),
+                    /* @__PURE__ */ e(
+                      h,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ]
+              },
+              `#FA5252-${t}`
+            ),
+            /* @__PURE__ */ e(m, { c: "#DEE2E6", w: "100%" })
+          ] }, `#FA5252-${t}`)) })
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  T as default
+};

package/dist/components/OnBoarding/steps/DifferentLayouts/DifferentLayoutsBoard.d.ts

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