@makeswift/runtime 0.0.20 → 0.0.21

package/dist/index.cjs.js

@@ -46,6 +46,7 @@ var client = require("@apollo/client");
 var batchHttp = require("@apollo/client/link/batch-http");
 var slate = require("slate");
 var graphql = require("./graphql.cjs.js");
+var image = require("./image.cjs.js");
 var shape = require("./shape.cjs.js");
 var style = require("./style.cjs.js");
 var descriptors = require("./descriptors.cjs.js");
@@ -69,7 +70,7 @@ var isHotkey = require("is-hotkey");
 var slateReact = require("slate-react");
 var Lists = require("@convertkit/slate-lists");
 var textInput = require("./text-input.cjs.js");
-var image = require("./image.cjs.js");
+var color = require("./color.cjs.js");
 var reactDom = require("react-dom");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -632,11 +633,11 @@ function useBackgrounds(value) {
                 angle: bg.payload.angle,
                 isRadial: bg.payload.isRadial,
                 stops: bg.payload.stops.map((_b2) => {
-                  var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
+                  var _c = _b2, { color: color2 } = _c, restOfStop = __objRest(_c, ["color"]);
                   return __spreadProps(__spreadValues({}, restOfStop), {
-                    color: color && {
-                      swatch: swatches.find((s) => s && s.id === color.swatchId),
-                      alpha: color.alpha
+                    color: color2 && {
+                      swatch: swatches.find((s) => s && s.id === color2.swatchId),
+                      alpha: color2.alpha
                     }
                   });
                 })
@@ -661,11 +662,11 @@ function useBackgrounds(value) {
   }, [filesResult, swatchesResult, value]);
 }
 function mapSideColor(swatches, _c) {
-  var _d = _c, { color } = _d, restOfSide = __objRest(_d, ["color"]);
+  var _d = _c, { color: color2 } = _d, restOfSide = __objRest(_d, ["color"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
-    color: color && {
-      alpha: color.alpha,
-      swatch: swatches.find((s) => s && s.id === color.swatchId)
+    color: color2 && {
+      alpha: color2.alpha,
+      swatch: swatches.find((s) => s && s.id === color2.swatchId)
     }
   });
 }
@@ -705,7 +706,7 @@ const ShadowDefaultValue = {
 };
 function useBoxShadow(value) {
   const swatchIds = value == null ? [] : [
-    ...Array.from(new Set(value.map(({ value: shadows }) => shadows.map(({ payload: { color } }) => color && color.swatchId)).reduce((a, b) => a.concat(b), []).filter(isNonNullable)))
+    ...Array.from(new Set(value.map(({ value: shadows }) => shadows.map(({ payload: { color: color2 } }) => color2 && color2.swatchId)).reduce((a, b) => a.concat(b), []).filter(isNonNullable)))
   ];
   const skip = value == null || swatchIds.length === 0;
   const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
@@ -717,15 +718,15 @@ function useBoxShadow(value) {
     return __spreadProps(__spreadValues({}, restOfValue), {
       value: shadows.map((_a2) => {
         var _b2 = _a2, {
-          payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius }
+          payload: { color: color2, inset, offsetX, offsetY, blurRadius, spreadRadius }
         } = _b2, restOfShadow = __objRest(_b2, [
           "payload"
         ]);
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
-            color: color != null ? {
-              swatch: swatches.find((s) => s && s.id === color.swatchId),
-              alpha: color.alpha
+            color: color2 != null ? {
+              swatch: swatches.find((s) => s && s.id === color2.swatchId),
+              alpha: color2.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
             offsetX: offsetX != null ? offsetX : ShadowDefaultValue.offsetX,
@@ -738,14 +739,14 @@ function useBoxShadow(value) {
     });
   });
 }
-function useResponsiveColor(color) {
-  const swatchIds = color == null ? [] : [...Array.from(new Set(color.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
+function useResponsiveColor(color2) {
+  const swatchIds = color2 == null ? [] : [...Array.from(new Set(color2.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
   const skip = swatchIds.length === 0;
   const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (color == null || error != null)
+  if (color2 == null || error != null)
     return null;
   const { swatches = [] } = data;
-  return color.map((_a) => {
+  return color2.map((_a) => {
     var _b = _a, { value: v } = _b, rest = __objRest(_b, ["value"]);
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
@@ -1114,8 +1115,8 @@ const getIndexes = (spans, index) => {
   }
   return [rowIndex, remainder];
 };
-function colorToString(color) {
-  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
+function colorToString(color2) {
+  return color2 && color2.swatch ? `hsla(${color2.swatch.hue},${color2.swatch.saturation}%,${color2.swatch.lightness}%,${color2.alpha})` : "";
 }
 function cssMediaRules(responsiveValues, join$1, strategy) {
   return (props) => join(typeof responsiveValues === "function" ? responsiveValues(props) : responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
@@ -1185,7 +1186,7 @@ function cssPadding(defaultValue = {}) {
   `;
 }
 const defaultBorderSide = { width: 0, style: "solid", color: null };
-const getBorderSide = ({ width, style: style2, color }) => `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
+const getBorderSide = ({ width, style: style2, color: color2 }) => `${width != null ? width : 0}px ${style2} ${color2 != null ? colorToString(color2) : "black"}`;
 function cssBorder(defaultValue = {}) {
   const defaultBorderTop = defaultValue.borderTop === void 0 ? defaultBorderSide : defaultValue.borderTop;
   const defaultBorderRight = defaultValue.borderRight === void 0 ? defaultBorderSide : defaultValue.borderRight;
@@ -1231,7 +1232,7 @@ function cssBorderRadius(defaultValue = {}) {
       `)}
   `;
 }
-const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color != null ? colorToString(color) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
+const getBoxShadow = (shadows) => shadows.map(({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color: color2 } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blurRadius}px ${spreadRadius}px ${color2 != null ? colorToString(color2) : "rgba(0,0,0,0.2)"}`).filter(Boolean).join();
 function cssBoxShadow(defaultValue = []) {
   return (props) => styled.css`
     ${cssMediaRules([props.boxShadow], ([boxShadow = defaultValue]) => styled.css`
@@ -1518,11 +1519,11 @@ function BackgroundVideo({
     })]
   });
 }
-function getColor(color) {
-  if (color == null)
+function getColor(color2) {
+  if (color2 == null)
     return "black";
-  if (color.swatch == null) {
-    return colorToString(__spreadProps(__spreadValues({}, color), {
+  if (color2.swatch == null) {
+    return colorToString(__spreadProps(__spreadValues({}, color2), {
       swatch: {
         hue: 0,
         saturation: 0,
@@ -1530,12 +1531,12 @@ function getColor(color) {
       }
     }));
   }
-  return colorToString(color);
+  return colorToString(color2);
 }
 const getStopsStyle = (stops) => stops.map(({
-  color,
+  color: color2,
   location
-}) => `${getColor(color)} ${location}%`).join(",");
+}) => `${getColor(color2)} ${location}%`).join(",");
 const getAspectRatio = (aspectRatio) => {
   switch (aspectRatio) {
     case "wide":
@@ -2171,7 +2172,7 @@ const StyledButton$1 = styled__default["default"](Link).withConfig({
     lightness: 100
   },
   alpha: 1
-}, color = {
+}, color2 = {
   swatch: {
     hue: 0,
     saturation: 0,
@@ -2202,35 +2203,35 @@ const StyledButton$1 = styled__default["default"](Link).withConfig({
           font-size: ${`${fontSize.value}${fontSize.unit}`};
           ${{
     flat: styled.css`
-              background: ${colorToString(color)};
+              background: ${colorToString(color2)};
               border: none;
               transition: ${["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", ")};
 
               :hover {
-                background: ${ColorHelper__default["default"](colorToString(color)).darken(0.1).hex()};
+                background: ${ColorHelper__default["default"](colorToString(color2)).darken(0.1).hex()};
               }
 
               :active {
-                background: ${ColorHelper__default["default"](colorToString(color)).darken(0.15).hex()};
+                background: ${ColorHelper__default["default"](colorToString(color2)).darken(0.15).hex()};
               }
             `,
     outline: styled.css`
               background: transparent;
-              box-shadow: inset 0 0 0 2px ${colorToString(color)};
+              box-shadow: inset 0 0 0 2px ${colorToString(color2)};
               transition: ${["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", ")};
 
               :hover {
-                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](colorToString(color)).darken(0.1).hex()};
-                color: ${ColorHelper__default["default"](colorToString(color)).darken(0.1).hex()};
+                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](colorToString(color2)).darken(0.1).hex()};
+                color: ${ColorHelper__default["default"](colorToString(color2)).darken(0.1).hex()};
               }
 
               :active {
-                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](colorToString(color)).darken(0.15).hex()};
-                color: ${ColorHelper__default["default"](colorToString(color)).darken(0.15).hex()};
+                box-shadow: inset 0 0 0 2px ${ColorHelper__default["default"](colorToString(color2)).darken(0.15).hex()};
+                color: ${ColorHelper__default["default"](colorToString(color2)).darken(0.15).hex()};
               }
             `,
     shadow: styled.css`
-              background: ${colorToString(color)};
+              background: ${colorToString(color2)};
               box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
               transition: ${["transform", "box-shadow"].map((property) => `${property} 0.18s`).join(", ")};
 
@@ -2257,28 +2258,28 @@ const StyledButton$1 = styled__default["default"](Link).withConfig({
               }
             `,
     blocky: styled.css`
-              background: ${colorToString(color)};
+              background: ${colorToString(color2)};
               border-width: 1px;
               border-style: solid;
-              border-color: ${ColorHelper__default["default"](colorToString(color)).darken(0.25).hex()};
-              box-shadow: 0 4px ${ColorHelper__default["default"](colorToString(color)).darken(0.25).hex()};
+              border-color: ${ColorHelper__default["default"](colorToString(color2)).darken(0.25).hex()};
+              box-shadow: 0 4px ${ColorHelper__default["default"](colorToString(color2)).darken(0.25).hex()};
               transition: ${["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", ")};
 
               :hover {
                 transform: translateY(2px);
-                box-shadow: 0 2px ${ColorHelper__default["default"](colorToString(color)).darken(0.25).hex()};
+                box-shadow: 0 2px ${ColorHelper__default["default"](colorToString(color2)).darken(0.25).hex()};
               }
 
               :active {
                 transform: translateY(4px);
-                box-shadow: 0 0 ${ColorHelper__default["default"](colorToString(color)).darken(0.25).hex()};
+                box-shadow: 0 0 ${ColorHelper__default["default"](colorToString(color2)).darken(0.25).hex()};
               }
             `,
     bubbly: styled.css`
               background: linear-gradient(
                 180deg,
-                ${ColorHelper__default["default"](colorToString(color)).lighten(0.05).hex()},
-                ${ColorHelper__default["default"](colorToString(color)).darken(0.3).saturate(0.05).hex()}
+                ${ColorHelper__default["default"](colorToString(color2)).lighten(0.05).hex()},
+                ${ColorHelper__default["default"](colorToString(color2)).darken(0.3).saturate(0.05).hex()}
               );
               position: relative;
               z-index: 0;
@@ -2294,8 +2295,8 @@ const StyledButton$1 = styled__default["default"](Link).withConfig({
                 border-radius: inherit;
                 background: linear-gradient(
                   180deg,
-                  ${ColorHelper__default["default"](colorToString(color)).lighten(0.2).hex()},
-                  ${ColorHelper__default["default"](colorToString(color)).darken(0.2).saturate(0.05).hex()}
+                  ${ColorHelper__default["default"](colorToString(color2)).lighten(0.2).hex()},
+                  ${ColorHelper__default["default"](colorToString(color2)).darken(0.2).saturate(0.05).hex()}
                 );
                 opacity: 0;
                 transition: opacity 0.15s;
@@ -2325,7 +2326,7 @@ const StyledButton$1 = styled__default["default"](Link).withConfig({
                 bottom: 0;
                 left: 0;
                 z-index: -1;
-                background: ${colorToString(color)};
+                background: ${colorToString(color2)};
                 transform: skewX(-12deg);
                 border-radius: inherit;
                 transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);
@@ -2353,7 +2354,7 @@ const Button$1 = React.forwardRef(function Button2(_m, ref) {
     shape: shape2,
     size,
     textColor,
-    color,
+    color: color2,
     textStyle,
     width,
     margin,
@@ -2376,7 +2377,7 @@ const Button$1 = React.forwardRef(function Button2(_m, ref) {
     ref,
     id,
     className: css.cx(css.css(responsiveWidth(width, "auto")), className),
-    color,
+    color: color2,
     link,
     margin,
     shape: shape2,
@@ -2703,7 +2704,7 @@ const Slop = styled__default["default"].div.withConfig({
   align-items: center;
   cursor: pointer;
   z-index: 2;
-  ${(p) => cssMediaRules([p.color], ([color = {
+  ${(p) => cssMediaRules([p.color], ([color2 = {
   swatch: {
     hue: 0,
     saturation: 0,
@@ -2711,7 +2712,7 @@ const Slop = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        color: ${colorToString(color)};
+        color: ${colorToString(color2)};
       `)}
 `;
 const Slide = styled__default["default"](framerMotion.motion.div).withConfig({
@@ -2812,7 +2813,7 @@ const Dots = styled__default["default"].div.withConfig({
   display: ${(props) => props.hidden ? "none" : "flex"};
   justify-content: center;
   margin-top: 20px;
-  ${(p) => cssMediaRules([p.color], ([color = {
+  ${(p) => cssMediaRules([p.color], ([color2 = {
   swatch: {
     hue: 0,
     saturation: 0,
@@ -2820,7 +2821,7 @@ const Dots = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        color: ${colorToString(color)};
+        color: ${colorToString(color2)};
       `)}
 `;
 const Dot = styled__default["default"].div.withConfig({
@@ -3626,7 +3627,7 @@ const Line = styled__default["default"].div.withConfig({
   ${(p) => cssMediaRules([p.variant, p.thickness, p.color], ([variant = "solid", thickness = {
   value: 1,
   unit: "px"
-}, color = {
+}, color2 = {
   swatch: {
     hue: 0,
     saturation: 0,
@@ -3641,17 +3642,17 @@ const Line = styled__default["default"].div.withConfig({
       return styled.css`
               border-bottom-width: ${thickness == null ? "1px" : `${thickness.value}${thickness.unit}`};
               border-bottom-style: ${variant};
-              border-bottom-color: ${colorToString(color)};
+              border-bottom-color: ${colorToString(color2)};
             `;
     case "blended":
       return styled.css`
               height: ${`${thickness.value}${thickness.unit}`};
               background: linear-gradient(
                 ${["90deg", colorToString({
-        swatch: color.swatch,
+        swatch: color2.swatch,
         alpha: 0
-      }), colorToString(color), colorToString({
-        swatch: color.swatch,
+      }), colorToString(color2), colorToString({
+        swatch: color2.swatch,
         alpha: 0
       })].join(", ")}
               );
@@ -3665,7 +3666,7 @@ const Divider = React.forwardRef(function Divider2({
   id,
   variant,
   thickness,
-  color,
+  color: color2,
   width,
   margin
 }, ref) {
@@ -3678,7 +3679,7 @@ const Divider = React.forwardRef(function Divider2({
       children: /* @__PURE__ */ jsxRuntime.jsx(Line, {
         variant,
         thickness,
-        color
+        color: color2
       })
     })
   });
@@ -5884,7 +5885,7 @@ const StyledDropDownItem = styled__default["default"](Link).withConfig({
   background-color: transparent;
   transition: background-color 0.2s;
   ${cssTextStyle()}
-  ${(p) => cssMediaRules([p.color, p.textStyle], ([color, textStyle = {}]) => {
+  ${(p) => cssMediaRules([p.color, p.textStyle], ([color2, textStyle = {}]) => {
   const fontSize = textStyle.fontSize || {
     value: 14,
     unit: "px"
@@ -5894,7 +5895,7 @@ const StyledDropDownItem = styled__default["default"](Link).withConfig({
   const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing;
   const textTransform = textStyle.textTransform || [];
   return styled.css`
-        color: ${color == null ? "black" : colorToString(color)};
+        color: ${color2 == null ? "black" : colorToString(color2)};
         font-size: ${`${fontSize.value}${fontSize.unit}`};
         font-weight: ${fontWeight};
         font-style: ${fontStyle.includes("italic") ? "italic" : "normal"};
@@ -5909,12 +5910,12 @@ const StyledDropDownItem = styled__default["default"](Link).withConfig({
 `;
 function DropDownItem$1(_S) {
   var _T = _S, {
-    color
+    color: color2
   } = _T, restOfProps = __objRest(_T, [
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(StyledDropDownItem, __spreadProps(__spreadValues({}, restOfProps), {
-    color: useResponsiveColor(color)
+    color: useResponsiveColor(color2)
   }));
 }
 function DropDownButton(_U) {
@@ -5923,7 +5924,7 @@ function DropDownButton(_U) {
     caret = "caret",
     links: links2 = [],
     textColor,
-    color
+    color: color2
   } = _V, restOfProps = __objRest(_V, [
     "label",
     "caret",
@@ -5944,7 +5945,7 @@ function DropDownButton(_U) {
     ref: container,
     children: [/* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
       textColor: useResponsiveColor(textColor),
-      color: useResponsiveColor(color),
+      color: useResponsiveColor(color2),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
@@ -6018,18 +6019,18 @@ const StyledLink$2 = styled__default["default"](Link).withConfig({
   padding: 8px 16px;
   color: black;
   ${cssTextStyle()}
-  ${(p) => cssMediaRules([p.color], ([color]) => styled.css`
-        color: ${color == null ? "black" : colorToString(color)};
+  ${(p) => cssMediaRules([p.color], ([color2]) => styled.css`
+        color: ${color2 == null ? "black" : colorToString(color2)};
       `)}
 `;
 function DropDownItem(_W) {
   var _X = _W, {
-    color
+    color: color2
   } = _X, restOfProps = __objRest(_X, [
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(StyledLink$2, __spreadProps(__spreadValues({}, restOfProps), {
-    color: useResponsiveColor(color)
+    color: useResponsiveColor(color2)
   }));
 }
 function MobileDropDownButton(_Y) {
@@ -6039,7 +6040,7 @@ function MobileDropDownButton(_Y) {
     links: links2 = [],
     onClose = () => {
     },
-    color,
+    color: color2,
     textColor
   } = _Z, restOfProps = __objRest(_Z, [
     "label",
@@ -6053,7 +6054,7 @@ function MobileDropDownButton(_Y) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx(ButtonLink$1, __spreadProps(__spreadValues({}, restOfProps), {
       textColor: useResponsiveColor(textColor),
-      color: useResponsiveColor(color),
+      color: useResponsiveColor(color2),
       onPointerDown: () => setIsOpen((prev) => !prev),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         style: {
@@ -6090,14 +6091,14 @@ function MobileDropDownButton(_Y) {
 function NavigationButton$1(props) {
   const _a = props, {
     textColor,
-    color
+    color: color2
   } = _a, restOfProps = __objRest(_a, [
     "textColor",
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
     textColor: useResponsiveColor(textColor),
-    color: useResponsiveColor(color)
+    color: useResponsiveColor(color2)
   }));
 }
 const ButtonLink = styled__default["default"](NavigationButton$1)`
@@ -6148,8 +6149,8 @@ const CloseIconContainer = styled__default["default"].button.withConfig({
   outline: 0;
   background: none;
   fill: currentColor;
-  ${(p) => cssMediaRules([p.color], ([color]) => styled.css`
-        color: ${color == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color)};
+  ${(p) => cssMediaRules([p.color], ([color2]) => styled.css`
+        color: ${color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)};
       `)}
 `;
 function MobileMenu({
@@ -6223,23 +6224,23 @@ const OpenIconContainer = styled__default["default"].button.withConfig({
   border: 0;
   padding: 0;
   fill: currentColor;
-  ${(p) => cssMediaRules([p.mobileMenuAnimation, p.alignment, p.color], ([mobileMenuAnimation, alignment = "flex-end", color]) => styled.css`
+  ${(p) => cssMediaRules([p.mobileMenuAnimation, p.alignment, p.color], ([mobileMenuAnimation, alignment = "flex-end", color2]) => styled.css`
         display: ${mobileMenuAnimation == null ? "none" : "flex"};
         justify-content: ${alignment};
-        color: ${color == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color)};
+        color: ${color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)};
       `)}
 `;
 function NavigationButton(props) {
   const _a = props, {
     textColor,
-    color
+    color: color2
   } = _a, restOfProps = __objRest(_a, [
     "textColor",
     "color"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(Button$1, __spreadProps(__spreadValues({}, restOfProps), {
     textColor: useResponsiveColor(textColor),
-    color: useResponsiveColor(color)
+    color: useResponsiveColor(color2)
   }));
 }
 const placeholder = {
@@ -7566,15 +7567,15 @@ function useTypography(typographyId) {
   return data == null ? void 0 : data.typographies[0];
 }
 const concat = (a, b) => a.concat(b);
-const getSwatchId = ({ value: { color } }) => color && color.swatchId;
+const getSwatchId = ({ value: { color: color2 } }) => color2 && color2.swatchId;
 const getDeviceId = ({ deviceId }) => deviceId;
 const withColor = (swatches) => (_a) => {
-  var _b = _a, { value: _c } = _b, _d = _c, { color } = _d, restOfValue = __objRest(_d, ["color"]), rest = __objRest(_b, ["value"]);
+  var _b = _a, { value: _c } = _b, _d = _c, { color: color2 } = _d, restOfValue = __objRest(_d, ["color"]), rest = __objRest(_b, ["value"]);
   return __spreadProps(__spreadValues({}, rest), {
-    value: __spreadValues(__spreadValues({}, restOfValue), color ? {
+    value: __spreadValues(__spreadValues({}, restOfValue), color2 ? {
       color: {
-        swatch: swatches.find((s) => s && s.id === color.swatchId),
-        alpha: color.alpha
+        swatch: swatches.find((s) => s && s.id === color2.swatchId),
+        alpha: color2.alpha
       }
     } : {})
   });
@@ -7603,7 +7604,7 @@ function useTypographyMark(value) {
 }
 const Span = styled__default["default"].span`
   ${(p) => cssMediaRules([p.typographyStyle], ([{
-  color,
+  color: color2,
   fontFamily,
   fontSize,
   fontWeight,
@@ -7614,8 +7615,8 @@ const Span = styled__default["default"].span`
   strikethrough,
   italic
 } = {}]) => styled.css`
-        ${color == null ? "" : styled.css`
-              color: ${colorToString(color)};
+        ${color2 == null ? "" : styled.css`
+              color: ${colorToString(color2)};
             `}
 
         ${fontFamily == null ? "" : styled.css`
@@ -8825,8 +8826,8 @@ function useStyleControlCssObject(style$1, controlDefinition) {
   function borderSideToString(borderSide) {
     if (borderSide == null)
       return null;
-    const { width, color, style: style2 } = borderSide;
-    return `${width != null ? width : 0}px ${style2} ${color != null ? colorToString(color) : "black"}`;
+    const { width, color: color2, style: style2 } = borderSide;
+    return `${width != null ? width : 0}px ${style2} ${color2 != null ? colorToString(color2) : "black"}`;
   }
   function borderRadiusToString(borderRadius) {
     if (borderRadius == null)
@@ -8881,9 +8882,19 @@ function useColorValue(data, definition) {
 function useComboboxControlValue(data) {
   return data == null ? void 0 : data.value;
 }
-function useImageControlValue(data) {
+function useImageControlValue(data, definition) {
   var _a;
-  return (_a = useFile(data)) == null ? void 0 : _a.publicUrl;
+  const format = (_a = definition.config.format) != null ? _a : image.ImageControlValueFormat.URL;
+  const file = useFile(data);
+  if (format === image.ImageControlValueFormat.URL) {
+    return file == null ? void 0 : file.publicUrl;
+  }
+  if (file == null || file.dimensions == null)
+    return void 0;
+  return {
+    url: file.publicUrl,
+    dimensions: { width: file.dimensions.width, height: file.dimensions.height }
+  };
 }
 function ListControlValue({
   definition,
@@ -8957,7 +8968,7 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case image.ColorControlType:
+    case color.ColorControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useColorValue,
         parameters: [data, definition],
@@ -8966,7 +8977,7 @@ function ControlValue({
     case image.ImageControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useImageControlValue,
-        parameters: [data],
+        parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
     case shape.ComboboxControlType:
@@ -9014,7 +9025,7 @@ function PropsValue({
       case textInput.TextInputControlType:
       case textInput.TextAreaControlType:
       case textInput.SelectControlType:
-      case image.ColorControlType:
+      case color.ColorControlType:
       case image.ImageControlType:
       case shape.ComboboxControlType:
       case shape.ShapeControlType: