@owp/core 2.5.4 → 2.5.6

package/dist/features/themePreview/components/ThemePreviewCanvasSections.js

@@ -0,0 +1,678 @@
+var J = Object.defineProperty;
+var c = (f, o) => J(f, "name", { value: o, configurable: !0 });
+import { jsx as e, jsxs as r } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import Q from "../defs/ThemePreviewGridDef.xml.js";
+import K from "../defs/ThemePreviewReadonlyGridDef.xml.js";
+import { OwpDatePicker as Z } from "../../../components/OwpPicker/OwpDatePicker.js";
+import { OwpDataTable as I } from "../../../components/OwpTable/OwpDataTable.js";
+import { OwpFieldTable as A } from "../../../components/OwpTable/OwpFieldTable.js";
+import { OwpTable as j } from "../../../components/OwpTable/OwpTable.js";
+import { OwpStoreProvider as E } from "../../../contexts/OwpStoreProvider.js";
+import { highlightTreeGridCellById as ee } from "../../../utils/treeGridUtil.js";
+import O from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Close.js";
+import { Typography as x, Box as u, Paper as G, TextField as le, Skeleton as k, Button as b, ButtonBase as re, TableHead as ie, TableRow as $, TableCell as D, TableBody as ae, Table as oe, IconButton as te } from "@mui/material";
+import { useTheme as ne, alpha as F } from "@mui/material/styles";
+import { enqueueSnackbar as de, closeSnackbar as z, SnackbarContent as ce } from "notistack";
+import { memo as g } from "react";
+import { getThemePreviewFieldTableSx as L, getThemePreviewFieldTableTitleSx as se, tableFieldPreviewLayout as he, tableFieldPreviewData as xe, getThemePreviewFieldTableCellSx as fe, getThemePreviewBasicTableSx as me, tablePreviewRows as pe, tablePreviewHeaders as V, getThemePreviewDataTableSx as ue, dataTablePreviewRows as U, dataTablePreviewHeadCells as X, gridCanvasPreviewRows as _, gridStyledTablePreviewRows as we, gridStyledDataTablePreviewRows as ve, previewNoop as y, previewChromeBorder as B, previewInnerCardSx as Y, searchHeaderPreviewData as be, previewSectionCardClassName as ge, gridPreviewColumnLabels as Te, gridPreviewRows as ye, gridPreviewBodyText as Se } from "./themePreviewCanvas.shared.js";
+import { OwpStyleProvider as M } from "../../../components/OwpStyleProvider/OwpStyleProvider.js";
+import { OwpTreeGrid as H } from "../../../components/OwpTreeGrid/OwpTreeGrid.js";
+import { OwpSearchFilter as Re } from "../../../components/OwpSearchFilter/OwpSearchFilter.js";
+import { OwpYesNoSelector as Ce } from "../../../components/OwpYesNoSelector/OwpYesNoSelector.js";
+import { OwpPageContent as Ne } from "../../../components/OwpPageContent/OwpPageContent.js";
+import { OwpSection as Pe } from "../../../components/OwpSection/OwpSection.js";
+function S({
+  children: f,
+  fillContentHeight: o = !1,
+  gapClassName: t = "gap-16",
+  paperClassName: n = ge,
+  sx: a,
+  title: l
+}) {
+  const s = l != null && l !== "";
+  return /* @__PURE__ */ e(
+    G,
+    {
+      className: n,
+      sx: {
+        ...Y,
+        ...a
+      },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: `flex flex-col ${s ? t : ""} ${o ? "min-h-0 flex-1" : ""}`,
+          children: [
+            s ? /* @__PURE__ */ e(x, { variant: "subtitle1", fontWeight: 700, children: l }) : null,
+            f
+          ]
+        }
+      )
+    }
+  );
+}
+c(S, "PreviewSectionCard");
+const Je = g(/* @__PURE__ */ c(function({
+  buttonPreviewItems: o,
+  mainTextSecondary: t,
+  previewSectionCardSx: n
+}) {
+  return /* @__PURE__ */ e(S, { title: "Buttons", sx: n, children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-12", children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-12", children: [
+      /* @__PURE__ */ e(x, { variant: "caption", sx: { minWidth: 56, color: t }, children: "contained" }),
+      o.map(({ label: a, color: l, previewContrastColor: s }) => /* @__PURE__ */ e(
+        b,
+        {
+          variant: "contained",
+          sx: {
+            backgroundColor: l,
+            color: s
+          },
+          children: a
+        },
+        `contained-${a}`
+      ))
+    ] }),
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-12", children: [
+      /* @__PURE__ */ e(x, { variant: "caption", sx: { minWidth: 56, color: t }, children: "outlined" }),
+      o.map(({ label: a, color: l }) => /* @__PURE__ */ e(
+        b,
+        {
+          variant: "outlined",
+          sx: {
+            borderColor: F(l, 0.52),
+            color: l,
+            "&:hover": {
+              borderColor: l,
+              backgroundColor: F(l, 0.08)
+            }
+          },
+          children: a
+        },
+        `outlined-${a}`
+      ))
+    ] })
+  ] }) });
+}, "ThemePreviewButtonsSection2")), Qe = g(/* @__PURE__ */ c(function({
+  previewSectionCardSx: o,
+  previewSnackbarKeysRef: t,
+  snackbarAnchorOrigin: n,
+  snackbarAutoHideDuration: a,
+  snackbarPreviewAnchorHorizontal: l,
+  snackbarPreviewAnchorVertical: s,
+  snackbarPreviewFontSize: m,
+  snackbarPreviewItems: h,
+  snackbarPreviewLineHeight: i,
+  snackbarPreviewMaxSnack: d
+}) {
+  const p = ne(), w = /* @__PURE__ */ c((R, T, C, v, N, P) => {
+    const q = de(T, {
+      anchorOrigin: n,
+      autoHideDuration: a,
+      variant: R,
+      content: /* @__PURE__ */ c((W) => /* @__PURE__ */ e(
+        ce,
+        {
+          role: "alert",
+          style: {
+            backgroundColor: C,
+            borderRadius: `${p.shape.borderRadius}px`,
+            boxShadow: p.shadows[2],
+            color: v,
+            fontSize: m,
+            lineHeight: i,
+            overflow: "hidden",
+            padding: 0
+          },
+          children: /* @__PURE__ */ r(
+            u,
+            {
+              sx: {
+                alignItems: "center",
+                color: "inherit",
+                display: "flex",
+                minWidth: 0,
+                px: 2,
+                py: 1.25,
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ r(
+                  u,
+                  {
+                    sx: {
+                      alignItems: "center",
+                      color: "inherit",
+                      display: "flex",
+                      flex: 1,
+                      gap: 1.25,
+                      minWidth: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ e(
+                        u,
+                        {
+                          sx: {
+                            alignItems: "center",
+                            color: "inherit",
+                            display: "flex",
+                            flexShrink: 0,
+                            "& .MuiSvgIcon-root": {
+                              fontSize: 20
+                            }
+                          },
+                          children: P
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        u,
+                        {
+                          sx: {
+                            color: "inherit",
+                            flex: 1,
+                            fontSize: m,
+                            lineHeight: i,
+                            minWidth: 0
+                          },
+                          children: T
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  te,
+                  {
+                    "aria-label": "close",
+                    onClick: /* @__PURE__ */ c(() => z(W), "onClick"),
+                    size: "small",
+                    sx: {
+                      color: "inherit",
+                      flexShrink: 0,
+                      ml: 1,
+                      "&:hover": {
+                        backgroundColor: N
+                      }
+                    },
+                    children: /* @__PURE__ */ e(O, { fontSize: "small" })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ), "content")
+    });
+    for (t.current.push(q); t.current.length > d; ) {
+      const W = t.current.shift();
+      W && z(W);
+    }
+  }, "openPreviewSnackbar");
+  return /* @__PURE__ */ e(
+    S,
+    {
+      fillContentHeight: !0,
+      paperClassName: "flex min-h-0 flex-1 flex-col rounded-lg p-14",
+      title: "Snackbars",
+      sx: o,
+      children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-10", children: [
+        /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", children: "스넥바를 클릭하면 실제 동작을 바로 확인할 수 있습니다." }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex min-h-0 flex-1 flex-col gap-10",
+            style: {
+              alignItems: l === "left" ? "flex-start" : l === "right" ? "flex-end" : "center",
+              justifyContent: s === "bottom" ? "flex-end" : "flex-start"
+            },
+            children: h.map(
+              ({ key: R, actionHoverColor: T, backgroundColor: C, color: v, icon: N, message: P }) => /* @__PURE__ */ r(
+                re,
+                {
+                  className: "flex items-center justify-between gap-10 px-16 py-10 text-left",
+                  onClick: /* @__PURE__ */ c(() => {
+                    w(
+                      R,
+                      P,
+                      C,
+                      v,
+                      T,
+                      N
+                    );
+                  }, "onClick"),
+                  style: {
+                    backgroundColor: C,
+                    borderRadius: 8,
+                    boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)",
+                    color: v,
+                    width: "min(100%, 360px)"
+                  },
+                  children: [
+                    /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 items-center gap-10", children: [
+                      /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", style: { color: v }, children: N }),
+                      /* @__PURE__ */ e(
+                        x,
+                        {
+                          variant: "body2",
+                          className: "truncate",
+                          sx: {
+                            color: "inherit",
+                            ...m && {
+                              fontSize: m
+                            },
+                            ...i && {
+                              lineHeight: i
+                            }
+                          },
+                          children: P
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "flex h-28 w-28 shrink-0 items-center justify-center rounded-full",
+                        style: {
+                          backgroundColor: T,
+                          color: v
+                        },
+                        children: /* @__PURE__ */ e(O, { sx: { fontSize: 16 } })
+                      }
+                    )
+                  ]
+                },
+                R
+              )
+            )
+          }
+        )
+      ] })
+    }
+  );
+}, "ThemePreviewSnackbarsSection2")), Ke = g(/* @__PURE__ */ c(function({
+  gridPreviewTable: o,
+  mainBackground: t,
+  mainPaper: n,
+  mainText: a,
+  mainThemePreviewStoreState: l,
+  previewSectionCardSx: s,
+  searchHeaderPreviewDate: m,
+  searchHeaderPreviewNumber: h,
+  searchHeaderPreviewVersionKey: i,
+  tablePreviewCanTableRadiusZero: d,
+  tableTheme: p,
+  tableThemePreviewVersionKey: w
+}) {
+  return /* @__PURE__ */ e(S, { paperClassName: "overflow-hidden rounded-lg p-0", sx: s, children: /* @__PURE__ */ e(
+    E,
+    {
+      preloadedState: l,
+      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ r(
+        u,
+        {
+          className: "flex flex-col gap-16 p-16",
+          sx: {
+            backgroundColor: t,
+            color: a,
+            "& .OwpPageContent-header .MuiDivider-root": {
+              my: 1.5
+            },
+            "& form": {
+              width: "100%"
+            }
+          },
+          children: [
+            /* @__PURE__ */ e(
+              G,
+              {
+                className: "w-full",
+                sx: {
+                  backgroundColor: "transparent",
+                  boxShadow: "none"
+                },
+                children: /* @__PURE__ */ r(Re, { onSubmit: y, onReset: y, children: [
+                  /* @__PURE__ */ e(
+                    Z,
+                    {
+                      label: "작업일자",
+                      value: m,
+                      variant: "standard",
+                      onChange: y
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    Ce,
+                    {
+                      label: "사용여부",
+                      yesLabel: "사용",
+                      noLabel: "미사용",
+                      value: "Y",
+                      onChange: y
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    le,
+                    {
+                      label: "번호",
+                      variant: "standard",
+                      value: h,
+                      onChange: y
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ e(
+              G,
+              {
+                className: "w-full rounded-lg p-16",
+                sx: {
+                  ...Y,
+                  backgroundColor: n,
+                  border: `1px solid ${B}`
+                },
+                children: /* @__PURE__ */ e(
+                  Ne,
+                  {
+                    title: "제목",
+                    centerSlot: /* @__PURE__ */ e("div", { className: "w-[240px]", children: /* @__PURE__ */ e(
+                      u,
+                      {
+                        sx: L(
+                          p,
+                          d
+                        ),
+                        children: /* @__PURE__ */ e(
+                          A,
+                          {
+                            canUseTreeGridStyle: !1,
+                            cellSx: { py: 0.5, textAlign: "center" },
+                            data: be,
+                            layout: [[{ title: "상태", key: "previewValue" }]],
+                            titleSx: { py: 0.5, textAlign: "center" },
+                            titleWidth: 92
+                          },
+                          `search-header-field-table-${w}`
+                        )
+                      }
+                    ) }),
+                    actions: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-8", children: [
+                      /* @__PURE__ */ e(b, { color: "primary", size: "small", variant: "contained", children: "추가" }),
+                      /* @__PURE__ */ e(b, { color: "secondary", size: "small", variant: "contained", children: "수정" }),
+                      /* @__PURE__ */ e(b, { color: "error", size: "small", variant: "contained", children: "삭제" }),
+                      /* @__PURE__ */ e(b, { color: "success", size: "small", variant: "contained", children: "다운로드" })
+                    ] }),
+                    children: /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col gap-12", children: [
+                      o,
+                      /* @__PURE__ */ e(Pe, { className: "min-h-0 flex-1", title: "섹션 제목", children: /* @__PURE__ */ r(
+                        "div",
+                        {
+                          className: "flex min-h-0 flex-1 flex-col gap-10 pt-12",
+                          style: { borderTop: `1px solid ${B}` },
+                          children: [
+                            /* @__PURE__ */ e(k, { animation: !1, height: 16, variant: "rounded", width: "100%" }),
+                            /* @__PURE__ */ e(k, { animation: !1, height: 16, variant: "rounded", width: "78%" }),
+                            /* @__PURE__ */ e(k, { animation: !1, className: "flex-1", variant: "rounded", width: "100%" })
+                          ]
+                        }
+                      ) })
+                    ] })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ) })
+    },
+    `search-header-${i}`
+  ) });
+}, "ThemePreviewSearchHeaderSection2")), Ze = g(/* @__PURE__ */ c(function({
+  editableThemePreviewGridId: o,
+  mainGridChangedBackgroundColor: t,
+  mainThemePreviewStoreKey: n,
+  mainThemePreviewStoreState: a,
+  previewSectionCardSx: l,
+  readonlyThemePreviewGridId: s
+}) {
+  return /* @__PURE__ */ e(S, { title: "Grid", sx: l, children: /* @__PURE__ */ e(
+    E,
+    {
+      preloadedState: a,
+      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "flex min-h-0 flex-col gap-12",
+          style: {
+            height: "min(640px, calc(100vh - 360px))"
+          },
+          children: [
+            /* @__PURE__ */ r("div", { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-12", children: [
+              /* @__PURE__ */ e(
+                H,
+                {
+                  data: _,
+                  height: "100%",
+                  id: o,
+                  layoutData: Q,
+                  onReady: /* @__PURE__ */ c((i) => {
+                    if (!i)
+                      return;
+                    const d = i.GetFirst(), p = d ? i.GetNext(d) : null, w = p ? i.GetNext(p) : d;
+                    d && (i.SelectRow(d, 1), p ? i.Focus(p, "OWP_THEME_PREVIEW.STATUS") : i.Focus(d, "OWP_THEME_PREVIEW.STATUS"), w && (ee(o, {
+                      row: w,
+                      col: "OWP_THEME_PREVIEW.REMARK",
+                      backgroundColor: t
+                    }), i.RefreshRow(w)));
+                  }, "handleEditableThemePreviewGridReady")
+                },
+                o
+              ),
+              /* @__PURE__ */ e(
+                H,
+                {
+                  data: _,
+                  height: "100%",
+                  id: s,
+                  layoutData: K,
+                  onReady: /* @__PURE__ */ c((i) => {
+                    if (!i)
+                      return;
+                    const d = i.GetFirst();
+                    d && i.Focus(d, "OWP_THEME_PREVIEW.WORK_DATE");
+                  }, "handleReadonlyThemePreviewGridReady")
+                },
+                s
+              )
+            ] }),
+            /* @__PURE__ */ r("div", { className: "grid shrink-0 grid-cols-2 gap-12", children: [
+              /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+                /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Basic Table (Grid Style)" }),
+                /* @__PURE__ */ e(
+                  j,
+                  {
+                    canUseTreeGridStyle: !0,
+                    headers: V,
+                    rows: we
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+                /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table (Grid Style)" }),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    canCheckbox: !1,
+                    canTotalCountRow: !1,
+                    canUseOrderBy: !1,
+                    canUseTreeGridStyle: !0,
+                    fixedRowCount: 1,
+                    headCells: X,
+                    rows: ve,
+                    sx: {
+                      "& .MuiTableBody-root > .MuiTableRow-root, & .MuiTableBody-root > .MuiTableRow-root:hover, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected, & .MuiTableBody-root > .MuiTableRow-root.Mui-selected:hover": {
+                        backgroundColor: "transparent"
+                      },
+                      "& .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root": {
+                        backgroundColor: "transparent"
+                      }
+                    }
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      ) })
+    },
+    `grid-preview-${n}`
+  ) });
+}, "ThemePreviewGridSection2")), el = g(/* @__PURE__ */ c(function({
+  mainThemePreviewStoreState: o,
+  previewSectionCardSx: t,
+  tablePreviewCanTableRadiusZero: n,
+  tableTheme: a,
+  tableThemePreviewVersionKey: l
+}) {
+  return /* @__PURE__ */ e(S, { title: "Tables", sx: t, children: /* @__PURE__ */ e(
+    E,
+    {
+      preloadedState: o,
+      children: /* @__PURE__ */ e(M, { children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-14", children: [
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Field Table" }),
+          /* @__PURE__ */ e(u, { sx: L(a, n), children: /* @__PURE__ */ e(
+            A,
+            {
+              canUseTreeGridStyle: !1,
+              cellSx: fe(a),
+              data: xe,
+              layout: he,
+              titleSx: se(a),
+              titleWidth: 108
+            },
+            `field-table-${l}`
+          ) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Table" }),
+          /* @__PURE__ */ e(u, { sx: me(a, n), children: /* @__PURE__ */ e(
+            j,
+            {
+              canUseTreeGridStyle: !1,
+              headers: V,
+              rows: pe
+            },
+            `basic-table-${l}`
+          ) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ e(x, { variant: "body2", color: "text.secondary", fontWeight: 600, children: "Data Table" }),
+          /* @__PURE__ */ e(u, { sx: ue(a, n), children: /* @__PURE__ */ e(
+            I,
+            {
+              canCheckbox: !1,
+              canTableRadiusZero: n,
+              canTotalCountRow: !1,
+              canUseOrderBy: !1,
+              canUseTreeGridStyle: !1,
+              fixedRowCount: 2,
+              headCells: X,
+              rows: U,
+              selected: U.slice(0, 1)
+            },
+            `data-table-${l}`
+          ) })
+        ] })
+      ] }) })
+    },
+    `table-preview-${l}`
+  ) });
+}, "ThemePreviewTablesSection2")), ll = g(/* @__PURE__ */ c(function({
+  gridBodyBorder: o,
+  layoutPreviewGridCellBackground: t,
+  layoutPreviewGridCellFontSize: n,
+  layoutPreviewGridHeaderBackground: a,
+  layoutPreviewGridHeaderBorder: l,
+  layoutPreviewGridHeaderColor: s,
+  layoutPreviewGridHeaderFontSize: m
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "overflow-hidden border border-solid",
+      style: {
+        borderColor: B
+      },
+      children: /* @__PURE__ */ r(
+        oe,
+        {
+          size: "small",
+          sx: {
+            tableLayout: "fixed"
+          },
+          children: [
+            /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e($, { children: Te.map((h) => /* @__PURE__ */ e(
+              D,
+              {
+                sx: {
+                  backgroundColor: a,
+                  borderBottom: `1px solid ${l}`,
+                  borderRight: `1px solid ${l}`,
+                  color: s,
+                  fontSize: m,
+                  fontWeight: 500,
+                  px: 1.25,
+                  py: 1,
+                  textAlign: "center",
+                  "&:last-of-type": {
+                    borderRight: "none"
+                  }
+                },
+                children: h
+              },
+              h
+            )) }) }),
+            /* @__PURE__ */ e(ae, { children: ye.map((h) => /* @__PURE__ */ e(
+              $,
+              {
+                sx: {
+                  backgroundColor: t
+                },
+                children: h.map((i, d) => /* @__PURE__ */ e(
+                  D,
+                  {
+                    sx: {
+                      borderBottom: `1px solid ${o}`,
+                      borderRight: `1px solid ${o}`,
+                      color: Se,
+                      fontSize: n,
+                      px: 1.25,
+                      py: 1,
+                      textAlign: "center",
+                      "&:last-of-type": {
+                        borderRight: "none"
+                      }
+                    },
+                    children: i
+                  },
+                  `${i}-${d}`
+                ))
+              },
+              h.join("-")
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}, "ThemePreviewGridPreviewTable2"));
+export {
+  Je as ThemePreviewButtonsSection,
+  ll as ThemePreviewGridPreviewTable,
+  Ze as ThemePreviewGridSection,
+  Ke as ThemePreviewSearchHeaderSection,
+  Qe as ThemePreviewSnackbarsSection,
+  el as ThemePreviewTablesSection
+};
+//# sourceMappingURL=ThemePreviewCanvasSections.js.map