@overmap-ai/core 1.0.38-component-fields.18 → 1.0.38-component-fields.20

package/dist/overmap-core.js

@@ -7722,15 +7722,15 @@ function withBreakpoints(value, classPrefix = "", valueMap) {
   }
   return classes.join(" ");
 }
-const paddingValues = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const paddingValues$1 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const paddingPropDefs = {
-  p: { type: "enum", values: paddingValues, default: void 0, responsive: true },
-  px: { type: "enum", values: paddingValues, default: void 0, responsive: true },
-  py: { type: "enum", values: paddingValues, default: void 0, responsive: true },
-  pt: { type: "enum", values: paddingValues, default: void 0, responsive: true },
-  pr: { type: "enum", values: paddingValues, default: void 0, responsive: true },
-  pb: { type: "enum", values: paddingValues, default: void 0, responsive: true },
-  pl: { type: "enum", values: paddingValues, default: void 0, responsive: true }
+  p: { type: "enum", values: paddingValues$1, default: void 0, responsive: true },
+  px: { type: "enum", values: paddingValues$1, default: void 0, responsive: true },
+  py: { type: "enum", values: paddingValues$1, default: void 0, responsive: true },
+  pt: { type: "enum", values: paddingValues$1, default: void 0, responsive: true },
+  pr: { type: "enum", values: paddingValues$1, default: void 0, responsive: true },
+  pb: { type: "enum", values: paddingValues$1, default: void 0, responsive: true },
+  pl: { type: "enum", values: paddingValues$1, default: void 0, responsive: true }
 };
 function extractPaddingProps(props) {
   const { p = layoutPropDefs.p.default, px = layoutPropDefs.px.default, py = layoutPropDefs.py.default, pt = layoutPropDefs.pt.default, pr = layoutPropDefs.pr.default, pb = layoutPropDefs.pb.default, pl = layoutPropDefs.pl.default, ...rest } = props;
@@ -7871,6 +7871,26 @@ const flexPropDefs = {
   wrap: { type: "enum", values: wrapValues, default: void 0, responsive: true },
   gap: { type: "enum", values: gapValues, default: void 0, responsive: true }
 };
+const sides = ["all", "x", "y", "top", "bottom", "left", "right"];
+const clipValues = ["border-box", "padding-box"];
+const paddingValues = ["current", "0"];
+const insetPropDefs = {
+  side: { type: "enum", values: sides, default: "all", responsive: true },
+  clip: { type: "enum", values: clipValues, default: "border-box", responsive: true },
+  p: { type: "enum", values: paddingValues, default: void 0, responsive: true },
+  px: { type: "enum", values: paddingValues, default: void 0, responsive: true },
+  py: { type: "enum", values: paddingValues, default: void 0, responsive: true },
+  pt: { type: "enum", values: paddingValues, default: void 0, responsive: true },
+  pr: { type: "enum", values: paddingValues, default: void 0, responsive: true },
+  pb: { type: "enum", values: paddingValues, default: void 0, responsive: true },
+  pl: { type: "enum", values: paddingValues, default: void 0, responsive: true }
+};
+const Inset = React.forwardRef((props, forwardedRef) => {
+  const { rest: marginRest, ...marginProps } = extractMarginProps(props);
+  const { className, side = insetPropDefs.side.default, clip = insetPropDefs.clip.default, p, px, py, pt, pr, pb, pl, ...insetProps } = marginRest;
+  return React.createElement("div", { ...insetProps, ref: forwardedRef, className: classNames("rt-Inset", className, withBreakpoints(side, "rt-r-side"), withBreakpoints(clip, "rt-r-clip"), withBreakpoints(p, "rt-r-p"), withBreakpoints(px, "rt-r-px"), withBreakpoints(py, "rt-r-py"), withBreakpoints(pt, "rt-r-pt"), withBreakpoints(pr, "rt-r-pr"), withBreakpoints(pb, "rt-r-pb"), withBreakpoints(pl, "rt-r-pl"), withMarginProps(marginProps)) });
+});
+Inset.displayName = "Inset";
 const sizes$4 = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const headingPropDefs = {
   size: { type: "enum", values: sizes$4, default: "6", responsive: true },
@@ -9661,10 +9681,10 @@ class FieldInputClonerField extends CustomField {
     super(options, FieldInputCloner);
   }
 }
-const previewImage$1 = "_previewImage_ebhyt_1";
-const nameContainer = "_nameContainer_ebhyt_9";
-const hasPreview = "_hasPreview_ebhyt_14";
-const useEllipsis = "_useEllipsis_ebhyt_19";
+const previewImage$1 = "_previewImage_1piva_1";
+const nameContainer = "_nameContainer_1piva_11";
+const hasPreview = "_hasPreview_1piva_16";
+const useEllipsis = "_useEllipsis_1piva_21";
 const styles$4 = {
   previewImage: previewImage$1,
   nameContainer,
@@ -9810,9 +9830,36 @@ const DisplayFile = memo((props) => {
     },
     [name, resolvedFile]
   );
-  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: { initial: "column", sm: "row" }, gap: "3", justify: "between", children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "3", align: "center", grow: "1", shrink: "0", children: [
-      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+  return /* @__PURE__ */ jsxs(Card, { style: { width: "100%" }, size: "1", children: [
+    /* @__PURE__ */ jsx(Inset, { clip: "border-box", side: "top", pb: "0", children: url && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: styles$4.previewImage,
+          src: url,
+          alt: name,
+          onClick: () => {
+            setShowPreview(true);
+          }
+        }
+      ),
+      showPreview && /* @__PURE__ */ jsx(
+        FullScreenImagePreview,
+        {
+          file: resolvedFile,
+          url,
+          name,
+          setShowPreview
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(Flex, { style: { marginBottom: "calc(-1 * var(--space-1))" }, children: /* @__PURE__ */ jsxs(Flex, { align: "center", width: "100%", children: [
+      /* @__PURE__ */ jsxs(Flex, { align: "center", grow: "1", children: [
+        /* @__PURE__ */ jsx(Text, { className: styles$4.useEllipsis, size: "1", children: name }),
+        /* @__PURE__ */ jsx(Text, { size: "1", children: size }),
+        error2 && /* @__PURE__ */ jsx(Text, { size: "1", severity: "danger", children: error2 })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
         /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -9834,44 +9881,9 @@ const DisplayFile = memo((props) => {
             children: /* @__PURE__ */ jsx(Cross1Icon, {})
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          className: classNames$1(styles$4.nameContainer, { [styles$4.hasPreview]: !!url }),
-          direction: "column",
-          gap: "1",
-          children: [
-            /* @__PURE__ */ jsx(Text, { className: styles$4.useEllipsis, children: name }),
-            /* @__PURE__ */ jsx(Text, { size: "1", children: size }),
-            error2 && /* @__PURE__ */ jsx(Text, { size: "1", severity: "danger", children: error2 })
-          ]
-        }
-      )
-    ] }),
-    url && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          className: styles$4.previewImage,
-          src: url,
-          alt: name,
-          onClick: () => {
-            setShowPreview(true);
-          }
-        }
-      ),
-      showPreview && /* @__PURE__ */ jsx(
-        FullScreenImagePreview,
-        {
-          file: resolvedFile,
-          url,
-          name,
-          setShowPreview
-        }
-      )
-    ] })
-  ] }) });
+      ] })
+    ] }) })
+  ] });
 });
 DisplayFile.displayName = "DisplayFile";
 const emptyUploadField = {