@makeswift/runtime 0.0.19 → 0.0.22

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 };
@@ -398,7 +399,7 @@ async function introspect(element, client2, store) {
     variables: { ids: [...typographyIds] }
   });
   (_c = typographiesResult == null ? void 0 : typographiesResult.data) == null ? void 0 : _c.typographies.forEach((typography) => {
-    typography.style.forEach((style2) => {
+    typography == null ? void 0 : typography.style.forEach((style2) => {
       var _a2;
       const swatchId = (_a2 = style2.value.color) == null ? void 0 : _a2.swatchId;
       if (swatchId != null)
@@ -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
       })
     })
   });
@@ -3843,9 +3844,9 @@ function registerComponent$6(runtime) {
     }
   });
 }
-var _path$t;
-function _extends$u() {
-  _extends$u = Object.assign || function(target) {
+var _path$u;
+function _extends$v() {
+  _extends$v = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3856,15 +3857,15 @@ function _extends$u() {
     }
     return target;
   };
-  return _extends$u.apply(this, arguments);
+  return _extends$v.apply(this, arguments);
 }
 var SvgCheck12 = function SvgCheck122(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$u({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$v({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$t || (_path$t = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.7071 1.79289C12.0976 2.18342 12.0976 2.81658 11.7071 3.20711L4.70711 10.2071C4.31658 10.5976 3.68342 10.5976 3.29289 10.2071L0.292893 7.20711C-0.0976311 6.81658 -0.0976311 6.18342 0.292893 5.79289C0.683417 5.40237 1.31658 5.40237 1.70711 5.79289L4 8.08579L10.2929 1.79289C10.6834 1.40237 11.3166 1.40237 11.7071 1.79289Z"
@@ -5072,8 +5073,8 @@ function Field({
   });
 }
 var _g;
-function _extends$t() {
-  _extends$t = Object.assign || function(target) {
+function _extends$u() {
+  _extends$u = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5084,10 +5085,10 @@ function _extends$t() {
     }
     return target;
   };
-  return _extends$t.apply(this, arguments);
+  return _extends$u.apply(this, arguments);
 }
 var SvgSpinner20 = function SvgSpinner202(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$t({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20
@@ -5671,9 +5672,9 @@ function registerComponent$5(runtime) {
     }
   });
 }
-var _path$s;
-function _extends$s() {
-  _extends$s = Object.assign || function(target) {
+var _path$t;
+function _extends$t() {
+  _extends$t = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5684,14 +5685,14 @@ function _extends$s() {
     }
     return target;
   };
-  return _extends$s.apply(this, arguments);
+  return _extends$t.apply(this, arguments);
 }
 var SvgMobileMenu28 = function SvgMobileMenu282(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$s({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 28,
     height: 28
-  }, props), _path$s || (_path$s = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M27 15H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h26a1 1 0 0 1 1 1 1 1 0 0 1-1 1zm0-10H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 16H1a1 1 0 0 0-1 1 1 1 0 0 0 1 1h26a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"
   })));
 };
@@ -5735,9 +5736,9 @@ function LinksPlaceholder({
     }, i))
   });
 }
-var _path$r;
-function _extends$r() {
-  _extends$r = Object.assign || function(target) {
+var _path$s;
+function _extends$s() {
+  _extends$s = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5748,20 +5749,20 @@ function _extends$r() {
     }
     return target;
   };
-  return _extends$r.apply(this, arguments);
+  return _extends$s.apply(this, arguments);
 }
 var SvgCaretDown8 = function SvgCaretDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$r({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$s({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$r || (_path$r = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M1 2a1 1 0 0 0-.707 1.707l3 3a1 1 0 0 0 1.414 0l3-3A1 1 0 0 0 7 2H1z"
   })));
 };
-var _path$q;
-function _extends$q() {
-  _extends$q = Object.assign || function(target) {
+var _path$r;
+function _extends$r() {
+  _extends$r = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5772,20 +5773,20 @@ function _extends$q() {
     }
     return target;
   };
-  return _extends$q.apply(this, arguments);
+  return _extends$r.apply(this, arguments);
 }
 var SvgPlus8 = function SvgPlus82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$q({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$r({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M4 0a1 1 0 0 0-1 1v2H1a1 1 0 1 0 0 2h2v2a1 1 0 0 0 2 0V5h2a1 1 0 0 0 0-2H5V1a1 1 0 0 0-1-1z"
   })));
 };
-var _path$p;
-function _extends$p() {
-  _extends$p = Object.assign || function(target) {
+var _path$q;
+function _extends$q() {
+  _extends$q = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5796,20 +5797,20 @@ function _extends$p() {
     }
     return target;
   };
-  return _extends$p.apply(this, arguments);
+  return _extends$q.apply(this, arguments);
 }
 var SvgArrowDown8 = function SvgArrowDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$p({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$q({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /* @__PURE__ */ React__namespace.createElement("path", {
     d: "M5 1a1 1 0 0 0-2 0v3.586l-.293-.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0-1.414-1.414L5 4.586V1z"
   })));
 };
-var _path$o;
-function _extends$o() {
-  _extends$o = Object.assign || function(target) {
+var _path$p;
+function _extends$p() {
+  _extends$p = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5820,14 +5821,14 @@ function _extends$o() {
     }
     return target;
   };
-  return _extends$o.apply(this, arguments);
+  return _extends$p.apply(this, arguments);
 }
 var SvgChevronDown8 = function SvgChevronDown82(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$o({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$p({
     width: 8,
     height: 8,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M.293 2.293a1 1 0 0 1 1.414 0L4 4.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"
@@ -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",
@@ -5974,9 +5975,9 @@ function DropDownButton(_U) {
     })]
   });
 }
-var _path$n;
-function _extends$n() {
-  _extends$n = Object.assign || function(target) {
+var _path$o;
+function _extends$o() {
+  _extends$o = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -5987,14 +5988,14 @@ function _extends$n() {
     }
     return target;
   };
-  return _extends$n.apply(this, arguments);
+  return _extends$o.apply(this, arguments);
 }
 var SvgTimes16 = function SvgTimes162(props) {
-  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$n({
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$o({
     width: 16,
     height: 16,
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /* @__PURE__ */ React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /* @__PURE__ */ React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M13.707 3.707a1 1 0 0 0-1.414-1.414L8 6.586 3.707 2.293a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L8 9.414l4.293 4.293a1 1 0 0 0 1.414-1.414L9.414 8l4.293-4.293Z"
@@ -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 = {
@@ -6542,6 +6543,31 @@ function registerComponent$3(runtime) {
     }
   });
 }
+var _path$n;
+function _extends$n() {
+  _extends$n = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$n.apply(this, arguments);
+}
+var SvgLogoAngellist20 = function SvgLogoAngellist202(props) {
+  return /* @__PURE__ */ React__namespace.createElement("svg", _extends$n({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20"
+  }, props), _path$n || (_path$n = /* @__PURE__ */ React__namespace.createElement("path", {
+    d: "M13.7412,8.2967 C14.3582,6.6297 14.8392,5.2547 15.1842,4.1687 C15.5292,3.0837 15.7022,2.4177 15.7022,2.1707 C15.7022,1.9047 15.6442,1.6987 15.5292,1.5517 C15.4142,1.4057 15.2562,1.3327 15.0532,1.3327 C14.7962,1.3327 14.5332,1.5457 14.2662,1.9707 C13.9992,2.3967 13.7052,3.0817 13.3832,4.0247 L12.0022,7.9947 L13.7412,8.2967 Z M11.9052,11.9917 C11.5102,11.9737 11.1342,11.9327 10.7802,11.8677 C10.4262,11.8047 10.0872,11.7127 9.7652,11.5937 C9.9122,11.8867 10.0432,12.1797 10.1582,12.4727 C10.2742,12.7657 10.3682,13.0547 10.4422,13.3387 C10.6622,13.0637 10.8952,12.8137 11.1382,12.5887 C11.3832,12.3647 11.6382,12.1657 11.9052,11.9917 L11.9052,11.9917 Z M10.3452,7.8297 L8.8542,3.5437 C8.4672,2.4547 8.1682,1.7427 7.9562,1.4077 C7.7442,1.0737 7.5142,0.9067 7.2662,0.9067 C7.0732,0.9067 6.9162,0.9797 6.7972,1.1267 C6.6772,1.2727 6.6172,1.4697 6.6172,1.7167 C6.6172,2.1387 6.7782,2.8707 7.1002,3.9147 C7.4232,4.9587 7.9062,6.3277 8.5502,8.0217 C8.6052,7.9217 8.6832,7.8507 8.7852,7.8087 C8.8862,7.7677 9.0242,7.7477 9.1992,7.7477 C9.2542,7.7477 9.3652,7.7527 9.5312,7.7607 C9.6962,7.7707 9.9682,7.7937 10.3452,7.8297 L10.3452,7.8297 Z M8.9922,14.4637 C9.1482,14.4637 9.2912,14.3937 9.4202,14.2517 C9.5492,14.1097 9.6132,13.9567 9.6132,13.7917 C9.6132,13.6177 9.4872,13.2127 9.2342,12.5757 C8.9802,11.9397 8.6652,11.3147 8.2882,10.7007 C8.0122,10.2427 7.7402,9.8977 7.4732,9.6637 C7.2062,9.4297 6.9532,9.3137 6.7142,9.3137 C6.5202,9.3137 6.3062,9.4347 6.0722,9.6767 C5.8372,9.9197 5.7202,10.1467 5.7202,10.3577 C5.7202,10.5767 5.8352,10.9067 6.0652,11.3457 C6.2952,11.7857 6.6032,12.2527 6.9902,12.7477 C7.3952,13.2877 7.7772,13.7087 8.1362,14.0107 C8.4952,14.3137 8.7802,14.4637 8.9922,14.4637 L8.9922,14.4637 Z M4.8502,14.1347 C4.9792,14.2907 5.1582,14.5197 5.3882,14.8217 C5.9962,15.6547 6.5572,16.0717 7.0732,16.0717 C7.2472,16.0717 7.4042,16.0167 7.5422,15.9067 C7.6802,15.7967 7.7492,15.6827 7.7492,15.5637 C7.7492,15.4257 7.6572,15.1967 7.4732,14.8767 C7.2892,14.5557 7.0362,14.1947 6.7142,13.7917 C6.3452,13.3247 6.0392,12.9837 5.7962,12.7677 C5.5522,12.5527 5.3562,12.4447 5.2092,12.4447 C4.8872,12.4447 4.5902,12.6167 4.3182,12.9607 C4.0472,13.3037 3.9112,13.7087 3.9112,14.1757 C3.9112,14.5517 4.0052,14.9707 4.1942,15.4327 C4.3832,15.8957 4.6572,16.3597 5.0152,16.8267 C5.5582,17.5507 6.2332,18.1067 7.0382,18.4957 C7.8442,18.8857 8.7342,19.0797 9.7102,19.0797 C11.5052,19.0797 13.0082,18.4137 14.2182,17.0817 C15.4282,15.7487 16.0332,14.0797 16.0332,12.0737 C16.0332,11.4607 15.9872,10.9737 15.8952,10.6107 C15.8042,10.2497 15.6512,9.9857 15.4392,9.8217 C15.0622,9.5097 14.3282,9.2307 13.2372,8.9837 C12.1462,8.7357 11.0082,8.6127 9.8202,8.6127 C9.4892,8.6127 9.2542,8.6677 9.1162,8.7777 C8.9782,8.8877 8.9092,9.0747 8.9092,9.3407 C8.9092,9.9637 9.2592,10.4147 9.9582,10.6937 C10.6582,10.9737 11.7902,11.1127 13.3552,11.1127 L13.9212,11.1127 C14.0502,11.1127 14.1532,11.1607 14.2312,11.2567 C14.3092,11.3527 14.3632,11.4977 14.3902,11.6897 C14.2332,11.8367 13.9122,12.0037 13.4242,12.1917 C12.9362,12.3787 12.5632,12.5647 12.3052,12.7477 C11.7542,13.1507 11.3092,13.6287 10.9732,14.1827 C10.6372,14.7367 10.4692,15.2607 10.4692,15.7557 C10.4692,16.0577 10.5402,16.4217 10.6832,16.8477 C10.8262,17.2737 10.8972,17.5367 10.8972,17.6377 L10.8972,17.7337 L10.8692,17.8577 C10.4652,17.8297 10.1452,17.5937 9.9102,17.1497 C9.6752,16.7057 9.5582,16.1127 9.5582,15.3707 L9.5582,15.2477 C9.4842,15.3117 9.4132,15.3577 9.3442,15.3847 C9.2752,15.4127 9.1992,15.4257 9.1162,15.4257 C9.0332,15.4257 8.9552,15.4197 8.8822,15.4047 C8.8072,15.3917 8.7252,15.3707 8.6332,15.3437 C8.6602,15.4447 8.6812,15.5427 8.6952,15.6387 C8.7092,15.7347 8.7162,15.8107 8.7162,15.8657 C8.7162,16.2047 8.5822,16.4957 8.3152,16.7377 C8.0482,16.9807 7.7312,17.1017 7.3632,17.1017 C6.7832,17.1017 6.1942,16.8197 5.5952,16.2567 C4.9972,15.6937 4.6982,15.1427 4.6982,14.6017 C4.6982,14.5007 4.7102,14.4117 4.7332,14.3337 C4.7552,14.2557 4.7952,14.1897 4.8502,14.1347 L4.8502,14.1347 Z M14.7352,8.5297 C15.5642,8.6867 16.1482,9.0337 16.4892,9.5737 C16.8292,10.1147 17.0002,10.9667 17.0002,12.1297 C17.0002,14.4367 16.3032,16.3257 14.9082,17.7957 C13.5132,19.2647 11.7302,19.9997 9.5582,19.9997 C8.7022,19.9997 7.8712,19.8467 7.0662,19.5397 C6.2602,19.2337 5.5682,18.8047 4.9882,18.2557 C4.3252,17.6507 3.8282,17.0127 3.4972,16.3397 C3.1652,15.6667 3.0002,14.9777 3.0002,14.2727 C3.0002,13.4847 3.1702,12.8757 3.5112,12.4447 C3.8512,12.0147 4.3892,11.7217 5.1262,11.5667 C4.9882,11.2457 4.8872,10.9757 4.8222,10.7557 C4.7582,10.5357 4.7252,10.3667 4.7252,10.2477 C4.7252,9.8357 4.9442,9.4147 5.3822,8.9837 C5.8192,8.5527 6.2312,8.3377 6.6172,8.3377 C6.7832,8.3377 6.9572,8.3677 7.1422,8.4267 C7.3262,8.4867 7.5372,8.5857 7.7772,8.7227 C7.0682,6.7267 6.5532,5.1857 6.2312,4.1007 C5.9082,3.0147 5.7472,2.2667 5.7472,1.8547 C5.7472,1.2867 5.8942,0.8357 6.1892,0.5017 C6.4842,0.1677 6.8842,-0.0003 7.3902,-0.0003 C8.2552,-0.0003 9.3512,1.9227 10.6762,5.7697 C10.9062,6.4287 11.0812,6.9367 11.2012,7.2947 C11.3032,7.0097 11.4452,6.6077 11.6292,6.0857 C12.9552,2.2757 14.0952,0.3707 15.0532,0.3707 C15.5222,0.3707 15.8972,0.5287 16.1792,0.8447 C16.4592,1.1607 16.5992,1.5847 16.5992,2.1157 C16.5992,2.5187 16.4452,3.2557 16.1372,4.3267 C15.8282,5.3987 15.3612,6.7997 14.7352,8.5297 L14.7352,8.5297 Z"
+  })));
+};
 var _path$m;
 function _extends$m() {
   _extends$m = Object.assign || function(target) {
@@ -6557,14 +6583,14 @@ function _extends$m() {
   };
   return _extends$m.apply(this, arguments);
 }
-var SvgLogoAngellist20 = function SvgLogoAngellist202(props) {
+var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     viewBox: "0 0 20 20"
   }, props), _path$m || (_path$m = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M13.7412,8.2967 C14.3582,6.6297 14.8392,5.2547 15.1842,4.1687 C15.5292,3.0837 15.7022,2.4177 15.7022,2.1707 C15.7022,1.9047 15.6442,1.6987 15.5292,1.5517 C15.4142,1.4057 15.2562,1.3327 15.0532,1.3327 C14.7962,1.3327 14.5332,1.5457 14.2662,1.9707 C13.9992,2.3967 13.7052,3.0817 13.3832,4.0247 L12.0022,7.9947 L13.7412,8.2967 Z M11.9052,11.9917 C11.5102,11.9737 11.1342,11.9327 10.7802,11.8677 C10.4262,11.8047 10.0872,11.7127 9.7652,11.5937 C9.9122,11.8867 10.0432,12.1797 10.1582,12.4727 C10.2742,12.7657 10.3682,13.0547 10.4422,13.3387 C10.6622,13.0637 10.8952,12.8137 11.1382,12.5887 C11.3832,12.3647 11.6382,12.1657 11.9052,11.9917 L11.9052,11.9917 Z M10.3452,7.8297 L8.8542,3.5437 C8.4672,2.4547 8.1682,1.7427 7.9562,1.4077 C7.7442,1.0737 7.5142,0.9067 7.2662,0.9067 C7.0732,0.9067 6.9162,0.9797 6.7972,1.1267 C6.6772,1.2727 6.6172,1.4697 6.6172,1.7167 C6.6172,2.1387 6.7782,2.8707 7.1002,3.9147 C7.4232,4.9587 7.9062,6.3277 8.5502,8.0217 C8.6052,7.9217 8.6832,7.8507 8.7852,7.8087 C8.8862,7.7677 9.0242,7.7477 9.1992,7.7477 C9.2542,7.7477 9.3652,7.7527 9.5312,7.7607 C9.6962,7.7707 9.9682,7.7937 10.3452,7.8297 L10.3452,7.8297 Z M8.9922,14.4637 C9.1482,14.4637 9.2912,14.3937 9.4202,14.2517 C9.5492,14.1097 9.6132,13.9567 9.6132,13.7917 C9.6132,13.6177 9.4872,13.2127 9.2342,12.5757 C8.9802,11.9397 8.6652,11.3147 8.2882,10.7007 C8.0122,10.2427 7.7402,9.8977 7.4732,9.6637 C7.2062,9.4297 6.9532,9.3137 6.7142,9.3137 C6.5202,9.3137 6.3062,9.4347 6.0722,9.6767 C5.8372,9.9197 5.7202,10.1467 5.7202,10.3577 C5.7202,10.5767 5.8352,10.9067 6.0652,11.3457 C6.2952,11.7857 6.6032,12.2527 6.9902,12.7477 C7.3952,13.2877 7.7772,13.7087 8.1362,14.0107 C8.4952,14.3137 8.7802,14.4637 8.9922,14.4637 L8.9922,14.4637 Z M4.8502,14.1347 C4.9792,14.2907 5.1582,14.5197 5.3882,14.8217 C5.9962,15.6547 6.5572,16.0717 7.0732,16.0717 C7.2472,16.0717 7.4042,16.0167 7.5422,15.9067 C7.6802,15.7967 7.7492,15.6827 7.7492,15.5637 C7.7492,15.4257 7.6572,15.1967 7.4732,14.8767 C7.2892,14.5557 7.0362,14.1947 6.7142,13.7917 C6.3452,13.3247 6.0392,12.9837 5.7962,12.7677 C5.5522,12.5527 5.3562,12.4447 5.2092,12.4447 C4.8872,12.4447 4.5902,12.6167 4.3182,12.9607 C4.0472,13.3037 3.9112,13.7087 3.9112,14.1757 C3.9112,14.5517 4.0052,14.9707 4.1942,15.4327 C4.3832,15.8957 4.6572,16.3597 5.0152,16.8267 C5.5582,17.5507 6.2332,18.1067 7.0382,18.4957 C7.8442,18.8857 8.7342,19.0797 9.7102,19.0797 C11.5052,19.0797 13.0082,18.4137 14.2182,17.0817 C15.4282,15.7487 16.0332,14.0797 16.0332,12.0737 C16.0332,11.4607 15.9872,10.9737 15.8952,10.6107 C15.8042,10.2497 15.6512,9.9857 15.4392,9.8217 C15.0622,9.5097 14.3282,9.2307 13.2372,8.9837 C12.1462,8.7357 11.0082,8.6127 9.8202,8.6127 C9.4892,8.6127 9.2542,8.6677 9.1162,8.7777 C8.9782,8.8877 8.9092,9.0747 8.9092,9.3407 C8.9092,9.9637 9.2592,10.4147 9.9582,10.6937 C10.6582,10.9737 11.7902,11.1127 13.3552,11.1127 L13.9212,11.1127 C14.0502,11.1127 14.1532,11.1607 14.2312,11.2567 C14.3092,11.3527 14.3632,11.4977 14.3902,11.6897 C14.2332,11.8367 13.9122,12.0037 13.4242,12.1917 C12.9362,12.3787 12.5632,12.5647 12.3052,12.7477 C11.7542,13.1507 11.3092,13.6287 10.9732,14.1827 C10.6372,14.7367 10.4692,15.2607 10.4692,15.7557 C10.4692,16.0577 10.5402,16.4217 10.6832,16.8477 C10.8262,17.2737 10.8972,17.5367 10.8972,17.6377 L10.8972,17.7337 L10.8692,17.8577 C10.4652,17.8297 10.1452,17.5937 9.9102,17.1497 C9.6752,16.7057 9.5582,16.1127 9.5582,15.3707 L9.5582,15.2477 C9.4842,15.3117 9.4132,15.3577 9.3442,15.3847 C9.2752,15.4127 9.1992,15.4257 9.1162,15.4257 C9.0332,15.4257 8.9552,15.4197 8.8822,15.4047 C8.8072,15.3917 8.7252,15.3707 8.6332,15.3437 C8.6602,15.4447 8.6812,15.5427 8.6952,15.6387 C8.7092,15.7347 8.7162,15.8107 8.7162,15.8657 C8.7162,16.2047 8.5822,16.4957 8.3152,16.7377 C8.0482,16.9807 7.7312,17.1017 7.3632,17.1017 C6.7832,17.1017 6.1942,16.8197 5.5952,16.2567 C4.9972,15.6937 4.6982,15.1427 4.6982,14.6017 C4.6982,14.5007 4.7102,14.4117 4.7332,14.3337 C4.7552,14.2557 4.7952,14.1897 4.8502,14.1347 L4.8502,14.1347 Z M14.7352,8.5297 C15.5642,8.6867 16.1482,9.0337 16.4892,9.5737 C16.8292,10.1147 17.0002,10.9667 17.0002,12.1297 C17.0002,14.4367 16.3032,16.3257 14.9082,17.7957 C13.5132,19.2647 11.7302,19.9997 9.5582,19.9997 C8.7022,19.9997 7.8712,19.8467 7.0662,19.5397 C6.2602,19.2337 5.5682,18.8047 4.9882,18.2557 C4.3252,17.6507 3.8282,17.0127 3.4972,16.3397 C3.1652,15.6667 3.0002,14.9777 3.0002,14.2727 C3.0002,13.4847 3.1702,12.8757 3.5112,12.4447 C3.8512,12.0147 4.3892,11.7217 5.1262,11.5667 C4.9882,11.2457 4.8872,10.9757 4.8222,10.7557 C4.7582,10.5357 4.7252,10.3667 4.7252,10.2477 C4.7252,9.8357 4.9442,9.4147 5.3822,8.9837 C5.8192,8.5527 6.2312,8.3377 6.6172,8.3377 C6.7832,8.3377 6.9572,8.3677 7.1422,8.4267 C7.3262,8.4867 7.5372,8.5857 7.7772,8.7227 C7.0682,6.7267 6.5532,5.1857 6.2312,4.1007 C5.9082,3.0147 5.7472,2.2667 5.7472,1.8547 C5.7472,1.2867 5.8942,0.8357 6.1892,0.5017 C6.4842,0.1677 6.8842,-0.0003 7.3902,-0.0003 C8.2552,-0.0003 9.3512,1.9227 10.6762,5.7697 C10.9062,6.4287 11.0812,6.9367 11.2012,7.2947 C11.3032,7.0097 11.4452,6.6077 11.6292,6.0857 C12.9552,2.2757 14.0952,0.3707 15.0532,0.3707 C15.5222,0.3707 15.8972,0.5287 16.1792,0.8447 C16.4592,1.1607 16.5992,1.5847 16.5992,2.1157 C16.5992,2.5187 16.4452,3.2557 16.1372,4.3267 C15.8282,5.3987 15.3612,6.7997 14.7352,8.5297 L14.7352,8.5297 Z"
+    d: "M18.281,11.4383 L16.132,10.0003 L18.281,8.5623 L18.281,11.4383 Z M10.859,17.5343 L10.859,13.5263 L14.586,11.0343 L17.594,13.0453 L10.859,17.5343 Z M10,12.0333 L6.961,10.0003 L10,7.9663 L13.04,10.0003 L10,12.0333 Z M9.141,17.5343 L2.407,13.0453 L5.415,11.0343 L9.141,13.5263 L9.141,17.5343 Z M1.719,8.5623 L3.869,10.0003 L1.719,11.4383 L1.719,8.5623 Z M9.141,2.4653 L9.141,6.4743 L5.415,8.9663 L2.407,6.9543 L9.141,2.4653 Z M10.859,2.4653 L17.594,6.9543 L14.586,8.9663 L10.859,6.4743 L10.859,2.4653 Z M19.985,6.8033 C19.944,6.5803 19.812,6.3603 19.617,6.2383 L10.477,0.1443 C10.188,-0.0477 9.812,-0.0477 9.523,0.1443 L0.383,6.2383 C0.148,6.3943 0,6.6713 0,6.9533 L0,13.0463 C0,13.3283 0.148,13.6063 0.383,13.7613 L9.523,19.8553 C9.668,19.9523 9.834,20.0003 10,20.0003 C10.167,20.0003 10.333,19.9523 10.477,19.8553 L19.617,13.7613 C19.854,13.6133 20,13.3233 20,13.0463 L20,6.9533 C20.001,6.9023 19.996,6.8533 19.985,6.8033 L19.985,6.8033 Z"
   })));
 };
 var _path$l;
@@ -6582,14 +6608,14 @@ function _extends$l() {
   };
   return _extends$l.apply(this, arguments);
 }
-var SvgLogoCodepen20 = function SvgLogoCodepen202(props) {
+var SvgLogoDiscord20 = function SvgLogoDiscord202(props) {
   return /* @__PURE__ */ React__namespace.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
-    viewBox: "0 0 20 20"
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$l || (_path$l = /* @__PURE__ */ React__namespace.createElement("path", {
-    d: "M18.281,11.4383 L16.132,10.0003 L18.281,8.5623 L18.281,11.4383 Z M10.859,17.5343 L10.859,13.5263 L14.586,11.0343 L17.594,13.0453 L10.859,17.5343 Z M10,12.0333 L6.961,10.0003 L10,7.9663 L13.04,10.0003 L10,12.0333 Z M9.141,17.5343 L2.407,13.0453 L5.415,11.0343 L9.141,13.5263 L9.141,17.5343 Z M1.719,8.5623 L3.869,10.0003 L1.719,11.4383 L1.719,8.5623 Z M9.141,2.4653 L9.141,6.4743 L5.415,8.9663 L2.407,6.9543 L9.141,2.4653 Z M10.859,2.4653 L17.594,6.9543 L14.586,8.9663 L10.859,6.4743 L10.859,2.4653 Z M19.985,6.8033 C19.944,6.5803 19.812,6.3603 19.617,6.2383 L10.477,0.1443 C10.188,-0.0477 9.812,-0.0477 9.523,0.1443 L0.383,6.2383 C0.148,6.3943 0,6.6713 0,6.9533 L0,13.0463 C0,13.3283 0.148,13.6063 0.383,13.7613 L9.523,19.8553 C9.668,19.9523 9.834,20.0003 10,20.0003 C10.167,20.0003 10.333,19.9523 10.477,19.8553 L19.617,13.7613 C19.854,13.6133 20,13.3233 20,13.0463 L20,6.9533 C20.001,6.9023 19.996,6.8533 19.985,6.8033 L19.985,6.8033 Z"
+    d: "M16.918 3.742a16.52 16.52 0 0 0-4.068-1.24.06.06 0 0 0-.065.03 11.12 11.12 0 0 0-.506 1.022 15.401 15.401 0 0 0-4.569 0 9.946 9.946 0 0 0-.515-1.022.059.059 0 0 0-.065-.03A16.586 16.586 0 0 0 3.046 3.75a.045.045 0 0 0-.011.014C.445 7.573-.265 11.287.082 14.957a.074.074 0 0 0 .028.047 16.708 16.708 0 0 0 4.988 2.493.065.065 0 0 0 .07-.022c.388-.52.73-1.07 1.025-1.645a.06.06 0 0 0 .003-.05.061.061 0 0 0-.037-.036 11.399 11.399 0 0 1-1.56-.731.063.063 0 0 1 0-.106l.31-.238a.057.057 0 0 1 .065 0 11.983 11.983 0 0 0 10.043 0 .06.06 0 0 1 .065 0c.101.083.206.164.31.241a.064.064 0 0 1 .028.053.063.063 0 0 1-.028.052c-.498.286-1.02.53-1.56.729a.067.067 0 0 0-.035.037.065.065 0 0 0 .002.051c.3.569.642 1.115 1.021 1.635a.065.065 0 0 0 .07.022 16.64 16.64 0 0 0 4.997-2.493.055.055 0 0 0 .026-.047 16.305 16.305 0 0 0-2.978-11.196.045.045 0 0 0-.017-.01ZM6.68 12.725c-.985 0-1.796-.892-1.796-1.983 0-1.092.794-1.986 1.796-1.986s1.81.897 1.796 1.983c-.014 1.085-.797 1.986-1.796 1.986Zm6.64 0c-.985 0-1.796-.892-1.796-1.983 0-1.092.794-1.986 1.796-1.986s1.81.897 1.796 1.983c-.014 1.085-.788 1.986-1.796 1.986Z"
   })));
 };
 var _path$k;
@@ -7102,6 +7128,11 @@ const SocialLinksOptions = [{
   label: "CodePen",
   icon: /* @__PURE__ */ jsxRuntime.jsx(SvgLogoCodepen20, {}),
   brandColor: "black"
+}, {
+  type: "discord",
+  label: "Discord",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(SvgLogoDiscord20, {}),
+  brandColor: "#5865F2"
 }, {
   type: "dribbble",
   label: "Dribbble",
@@ -7536,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
       }
     } : {})
   });
@@ -7573,7 +7604,7 @@ function useTypographyMark(value) {
 }
 const Span = styled__default["default"].span`
   ${(p) => cssMediaRules([p.typographyStyle], ([{
-  color,
+  color: color2,
   fontFamily,
   fontSize,
   fontWeight,
@@ -7584,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`
@@ -8795,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)
@@ -8851,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,
@@ -8927,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],
@@ -8936,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:
@@ -8984,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: