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

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 },
@@ -9810,46 +9830,8 @@ 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: [
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            variant: "soft",
-            "aria-label": `Download ${name}`,
-            onClick: handleDownload,
-            disabled: !resolvedFile,
-            children: /* @__PURE__ */ jsx(DownloadIcon, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            severity: "info",
-            variant: "soft",
-            "aria-label": `Remove ${name}`,
-            disabled,
-            onClick: onRemove,
-            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: [
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(Inset, { clip: "border-box", side: "top", pb: "0", children: url && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "img",
         {
@@ -9870,8 +9852,36 @@ const DisplayFile = memo((props) => {
           setShowPreview
         }
       )
-    ] })
-  ] }) });
+    ] }) }),
+    /* @__PURE__ */ jsx(Flex, { style: { marginBottom: "calc(-1 * var(--space-1))" }, children: /* @__PURE__ */ jsxs(Flex, { align: "center", width: "100%", children: [
+      /* @__PURE__ */ jsxs(Flex, { className: classNames$1(styles$4.nameContainer, { [styles$4.hasPreview]: !!url }), 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 })
+      ] }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "soft",
+          "aria-label": `Download ${name}`,
+          onClick: handleDownload,
+          disabled: !resolvedFile,
+          children: /* @__PURE__ */ jsx(DownloadIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          severity: "info",
+          variant: "soft",
+          "aria-label": `Remove ${name}`,
+          disabled,
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsx(Cross1Icon, {})
+        }
+      )
+    ] }) })
+  ] });
 });
 DisplayFile.displayName = "DisplayFile";
 const emptyUploadField = {