@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.20

package/dist/cjs/components/shared/BackgroundsContainer/components/Backgrounds/index.js

@@ -36,9 +36,9 @@ var import_react = require("react");
 var import_react2 = require("react");
 var import_colorToString = require("../../../../utils/colorToString");
 var import_Parallax = __toESM(require("../Parallax"));
-var import_use_style = require("../../../../../runtimes/react/use-style");
 var import_responsive_style = require("../../../../utils/responsive-style");
 var import_use_framework_context = require("../../../../../runtimes/react/components/hooks/use-framework-context");
+var import_use_style = require("../../../../../runtimes/react/css-runtime/hooks/use-style");
 const BackgroundVideo = (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("../BackgroundVideo"))));
 function getColor(color) {
   if (color == null)
@@ -75,38 +75,50 @@ function BackgroundDeviceLayer({ layer, visibility }) {
   const visibilityStyle = (0, import_responsive_style.useResponsiveStyle)([visibility], ([v]) => ({
     display: v === true ? "block" : "none"
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ ...containerStyle, ...visibilityStyle, overflow: "hidden" }), children: [...layer].reverse().map((bg) => {
-    if (bg.type === "color") {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorBackground, { color: getColor(bg.payload) }, bg.id);
-    }
-    if (bg.type === "image" && bg.payload) {
-      return /* @__PURE__ */ (0, import_react.createElement)(ImageBackground, { ...bg.payload, key: bg.id });
-    }
-    if (bg.type === "gradient" && bg.payload) {
-      return /* @__PURE__ */ (0, import_react.createElement)(
-        GradientBackground,
-        {
-          ...bg.payload,
-          key: bg.id,
-          gradient: getStopsStyle(bg.payload.stops)
-        }
-      );
-    }
-    if (bg.type === "video" && bg.payload) {
-      return /* @__PURE__ */ (0, import_react.createElement)(
-        VideoBackground,
-        {
-          ...bg.payload,
-          key: bg.id,
-          maskColor: getColor(bg.payload.maskColor)
-        }
-      );
-    }
-    return null;
-  }) });
+  const { className, styleElement } = (0, import_use_style.useStyle)({
+    ...containerStyle,
+    ...visibilityStyle,
+    overflow: "hidden"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: [...layer].reverse().map((bg) => {
+      if (bg.type === "color") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorBackground, { color: getColor(bg.payload) }, bg.id);
+      }
+      if (bg.type === "image" && bg.payload) {
+        return /* @__PURE__ */ (0, import_react.createElement)(ImageBackground, { ...bg.payload, key: bg.id });
+      }
+      if (bg.type === "gradient" && bg.payload) {
+        return /* @__PURE__ */ (0, import_react.createElement)(
+          GradientBackground,
+          {
+            ...bg.payload,
+            key: bg.id,
+            gradient: getStopsStyle(bg.payload.stops)
+          }
+        );
+      }
+      if (bg.type === "video" && bg.payload) {
+        return /* @__PURE__ */ (0, import_react.createElement)(
+          VideoBackground,
+          {
+            ...bg.payload,
+            key: bg.id,
+            maskColor: getColor(bg.payload.maskColor)
+          }
+        );
+      }
+      return null;
+    }) })
+  ] });
 }
 function ColorBackground({ color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ ...containerStyle, backgroundColor: color }) });
+  const { className, styleElement } = (0, import_use_style.useStyle)({ ...containerStyle, backgroundColor: color });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className })
+  ] });
 }
 const ImageBackgroundRepeat = {
   NoRepeat: "no-repeat",
@@ -129,7 +141,7 @@ function ImageBackground({
   priority
 }) {
   const backgroundPosition = `${position.x}% ${position.y}%`;
-  const containerClassName = (0, import_use_style.useStyle)(containerStyle);
+  const { className: containerClassName, styleElement: containerStyleElement } = (0, import_use_style.useStyle)(containerStyle);
   const { Image } = (0, import_use_framework_context.useFrameworkContext)();
   if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -147,36 +159,38 @@ function ImageBackground({
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: containerClassName,
-      ...getParallaxProps({
-        style: {
-          backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
-          backgroundPosition,
-          backgroundRepeat: repeat,
-          backgroundSize: size,
-          opacity
-        }
-      })
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    containerStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: containerClassName,
+        ...getParallaxProps({
+          style: {
+            backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
+            backgroundPosition,
+            backgroundRepeat: repeat,
+            backgroundSize: size,
+            opacity
+          }
+        })
+      }
+    )
+  ] }) });
 }
 function GradientBackground({
   gradient,
   isRadial = false,
   angle = Math.PI
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: (0, import_use_style.useStyle)({
-        ...containerStyle,
-        background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
-      })
-    }
-  );
+  const { className, styleElement } = (0, import_use_style.useStyle)({
+    ...containerStyle,
+    background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className })
+  ] });
 }
 const BackgroundVideoAspectRatio = {
   Wide: "wide",
@@ -200,15 +214,19 @@ function VideoBackground({
   opacity,
   parallax
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getParallaxProps({ className: (0, import_use_style.useStyle)(containerStyle) }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    BackgroundVideo,
-    {
-      url,
-      zoom,
-      opacity,
-      aspectRatio: getAspectRatio(aspectRatio),
-      maskColor
-    }
-  ) }) }) });
+  const { className: containerClassName, styleElement: containerStyleElement } = (0, import_use_style.useStyle)(containerStyle);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Parallax.default, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    containerStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getParallaxProps({ className: containerClassName }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      BackgroundVideo,
+      {
+        url,
+        zoom,
+        opacity,
+        aspectRatio: getAspectRatio(aspectRatio),
+        maskColor
+      }
+    ) }) })
+  ] }) });
 }
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/BackgroundsContainer/components/Backgrounds/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import { lazy, ReactNode, Suspense } from 'react'\nimport { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport { type CSSObject } from '@emotion/serialize'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { useFrameworkContext } from '../../../../../runtimes/react/components/hooks/use-framework-context'\n\nconst BackgroundVideo = lazy(() => import('../BackgroundVideo'))\n\nfunction getColor(color: Color | null | undefined) {\n  if (color == null) return 'black'\n\n  if (color.swatch == null) {\n    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n  }\n\n  return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n  stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n}\n\nconst containerStyle: CSSObject = {\n  ...absoluteFillStyle,\n  borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerValue | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): ReactNode {\n  if (backgrounds == null) return <></>\n\n  return (\n    <>\n      {backgrounds.map(({ value, deviceId }) => {\n        const visibility = backgrounds.map(v => ({\n          deviceId: v.deviceId,\n          value: v.deviceId === deviceId,\n        }))\n\n        return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n      })}\n    </>\n  )\n}\n\ntype BackgroundLayerProps = {\n  layer: BackgroundsData\n  visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n    display: v === true ? 'block' : 'none',\n  }))\n\n  return (\n    <div className={useStyle({ ...containerStyle, ...visibilityStyle, overflow: 'hidden' })}>\n      {[...layer].reverse().map(bg => {\n        if (bg.type === 'color') {\n          return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n        }\n\n        if (bg.type === 'image' && bg.payload) {\n          return <ImageBackground {...bg.payload} key={bg.id} />\n        }\n\n        if (bg.type === 'gradient' && bg.payload) {\n          return (\n            <GradientBackground\n              {...bg.payload}\n              key={bg.id}\n              gradient={getStopsStyle(bg.payload.stops)}\n            />\n          )\n        }\n\n        if (bg.type === 'video' && bg.payload) {\n          return (\n            <VideoBackground\n              {...bg.payload}\n              key={bg.id}\n              maskColor={getColor(bg.payload.maskColor)}\n            />\n          )\n        }\n\n        return null\n      })}\n    </div>\n  )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n  return <div className={useStyle({ ...containerStyle, backgroundColor: color })} />\n}\n\nconst ImageBackgroundRepeat = {\n  NoRepeat: 'no-repeat',\n  RepeatX: 'repeat-x',\n  RepeatY: 'repeat-y',\n  Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = (typeof ImageBackgroundRepeat)[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n  Cover: 'cover',\n  Contain: 'contain',\n  Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = (typeof ImageBackgroundSize)[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n  publicUrl?: string\n  position: { x: number; y: number }\n  repeat?: ImageBackgroundRepeat\n  size?: ImageBackgroundSize\n  opacity?: number\n  parallax?: number\n  priority?: boolean\n}\n\nfunction ImageBackground({\n  publicUrl,\n  position,\n  repeat = ImageBackgroundRepeat.NoRepeat,\n  size = ImageBackgroundSize.Cover,\n  opacity,\n  parallax,\n  priority,\n}: ImageBackgroundProps) {\n  const backgroundPosition = `${position.x}% ${position.y}%`\n  const containerClassName = useStyle(containerStyle)\n  const { Image } = useFrameworkContext()\n\n  if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n    return (\n      <Parallax strength={parallax}>\n        {getParallaxProps => (\n          <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n            <Image\n              src={publicUrl}\n              alt={''}\n              fill\n              sizes=\"100vw\"\n              style={{\n                objectPosition: backgroundPosition,\n                objectFit: size,\n              }}\n              priority={priority}\n            />\n          </div>\n        )}\n      </Parallax>\n    )\n  }\n\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div\n          className={containerClassName}\n          {...getParallaxProps({\n            style: {\n              backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n              backgroundPosition,\n              backgroundRepeat: repeat,\n              backgroundSize: size,\n              opacity,\n            },\n          })}\n        />\n      )}\n    </Parallax>\n  )\n}\n\ntype GradientBackgroundProps = {\n  gradient: string\n  angle?: number\n  isRadial?: boolean\n}\n\nfunction GradientBackground({\n  gradient,\n  isRadial = false,\n  angle = Math.PI,\n}: GradientBackgroundProps) {\n  return (\n    <div\n      className={useStyle({\n        ...containerStyle,\n        background: isRadial\n          ? `radial-gradient(${gradient})`\n          : `linear-gradient(${angle}rad, ${gradient})`,\n      })}\n    />\n  )\n}\n\nconst BackgroundVideoAspectRatio = {\n  Wide: 'wide',\n  Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n  (typeof BackgroundVideoAspectRatio)[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio | null | undefined): number {\n  switch (aspectRatio) {\n    case 'wide':\n      return 16 / 9\n\n    case 'standard':\n      return 4 / 3\n\n    default:\n      return 16 / 9\n  }\n}\n\ntype VideoBackgroundProps = {\n  url?: string\n  aspectRatio?: BackgroundVideoAspectRatio\n  maskColor: string\n  zoom?: number\n  opacity?: number\n  parallax?: number\n}\n\nfunction VideoBackground({\n  url,\n  aspectRatio,\n  maskColor,\n  zoom,\n  opacity,\n  parallax,\n}: VideoBackgroundProps) {\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <div {...getParallaxProps({ className: useStyle(containerStyle) })}>\n          <Suspense>\n            <BackgroundVideo\n              url={url}\n              zoom={zoom}\n              opacity={opacity}\n              aspectRatio={getAspectRatio(aspectRatio)}\n              maskColor={maskColor}\n            />\n          </Suspense>\n        </div>\n      )}\n    </Parallax>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CkC;AAkCjB;AA9EjB,IAAAA,gBAA0C;AAI1C,2BAA8B;AAC9B,sBAAqB;AAErB,uBAAyB;AACzB,8BAAmC;AACnC,mCAAoC;AAEpC,MAAM,sBAAkB,oBAAK,MAAM,6CAAO,oBAAoB,GAAC;AAE/D,SAAS,SAAS,OAAiC;AACjD,MAAI,SAAS;AAAM,WAAO;AAE1B,MAAI,MAAM,UAAU,MAAM;AACxB,eAAO,oCAAc,EAAE,GAAG,OAAO,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,EAAE,CAAC;AAAA,EACpF;AAEA,aAAO,oCAAc,KAAK;AAC5B;AAIA,MAAM,gBAAgB,CAAC,UACrB,MAAM,IAAI,CAAC,EAAE,OAAO,SAAS,MAAM,GAAG,SAAS,KAAK,CAAC,IAAI,QAAQ,GAAG,EAAE,KAAK,GAAG;AAEhF,MAAM,oBAA+B;AAAA,EACnC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,iBAA4B;AAAA,EAChC,GAAG;AAAA,EACH,cAAc;AAChB;AAIe,SAAR,YAA6B,EAAE,YAAY,GAAqB;AACrE,MAAI,eAAe;AAAM,WAAO,2EAAE;AAElC,SACE,2EACG,sBAAY,IAAI,CAAC,EAAE,OAAO,SAAS,MAAM;AACxC,UAAM,aAAa,YAAY,IAAI,QAAM;AAAA,MACvC,UAAU,EAAE;AAAA,MACZ,OAAO,EAAE,aAAa;AAAA,IACxB,EAAE;AAEF,WAAO,4CAAC,yBAAqC,OAAO,OAAO,cAAxB,QAAgD;AAAA,EACrF,CAAC,GACH;AAEJ;AAOA,SAAS,sBAAsB,EAAE,OAAO,WAAW,GAAyB;AAC1E,QAAM,sBAAkB,4CAAmB,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,OAAO;AAAA,IACjE,SAAS,MAAM,OAAO,UAAU;AAAA,EAClC,EAAE;AAEF,SACE,4CAAC,SAAI,eAAW,2BAAS,EAAE,GAAG,gBAAgB,GAAG,iBAAiB,UAAU,SAAS,CAAC,GACnF,WAAC,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,QAAM;AAC9B,QAAI,GAAG,SAAS,SAAS;AACvB,aAAO,4CAAC,mBAA4B,OAAO,SAAS,GAAG,OAAO,KAAjC,GAAG,EAAiC;AAAA,IACnE;AAEA,QAAI,GAAG,SAAS,WAAW,GAAG,SAAS;AACrC,aAAO,gDAAC,mBAAiB,GAAG,GAAG,SAAS,KAAK,GAAG,IAAI;AAAA,IACtD;AAEA,QAAI,GAAG,SAAS,cAAc,GAAG,SAAS;AACxC,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,GAAG;AAAA,UACP,KAAK,GAAG;AAAA,UACR,UAAU,cAAc,GAAG,QAAQ,KAAK;AAAA;AAAA,MAC1C;AAAA,IAEJ;AAEA,QAAI,GAAG,SAAS,WAAW,GAAG,SAAS;AACrC,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,GAAG;AAAA,UACP,KAAK,GAAG;AAAA,UACR,WAAW,SAAS,GAAG,QAAQ,SAAS;AAAA;AAAA,MAC1C;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT,CAAC,GACH;AAEJ;AAIA,SAAS,gBAAgB,EAAE,MAAM,GAAyB;AACxD,SAAO,4CAAC,SAAI,eAAW,2BAAS,EAAE,GAAG,gBAAgB,iBAAiB,MAAM,CAAC,GAAG;AAClF;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAIA,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAcA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,SAAS,sBAAsB;AAAA,EAC/B,OAAO,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,qBAAqB,GAAG,SAAS,CAAC,KAAK,SAAS,CAAC;AACvD,QAAM,yBAAqB,2BAAS,cAAc;AAClD,QAAM,EAAE,MAAM,QAAI,kDAAoB;AAEtC,MAAI,WAAW,eAAe,SAAS,UAAU,aAAa,MAAM;AAClE,WACE,4CAAC,gBAAAC,SAAA,EAAS,UAAU,UACjB,gCACC,4CAAC,SAAK,GAAG,iBAAiB,EAAE,OAAO,EAAE,SAAS,UAAU,SAAS,EAAE,CAAC,GAClE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAI;AAAA,QACJ,OAAM;AAAA,QACN,OAAO;AAAA,UACL,gBAAgB;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF,GACF,GAEJ;AAAA,EAEJ;AAEA,SACE,4CAAC,gBAAAA,SAAA,EAAS,UAAU,UACjB,gCACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACV,GAAG,iBAAiB;AAAA,QACnB,OAAO;AAAA,UACL,iBAAiB,aAAa,OAAO,QAAQ,SAAS,OAAO;AAAA,UAC7D;AAAA,UACA,kBAAkB;AAAA,UAClB,gBAAgB;AAAA,UAChB;AAAA,QACF;AAAA,MACF,CAAC;AAAA;AAAA,EACH,GAEJ;AAEJ;AAQA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,EACX,QAAQ,KAAK;AACf,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,GAAG;AAAA,QACH,YAAY,WACR,mBAAmB,QAAQ,MAC3B,mBAAmB,KAAK,QAAQ,QAAQ;AAAA,MAC9C,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,6BAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AACZ;AAKA,SAAS,eAAe,aAAoE;AAC1F,UAAQ,aAAa;AAAA,IACnB,KAAK;AACH,aAAO,KAAK;AAAA,IAEd,KAAK;AACH,aAAO,IAAI;AAAA,IAEb;AACE,aAAO,KAAK;AAAA,EAChB;AACF;AAWA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,SACE,4CAAC,gBAAAA,SAAA,EAAS,UAAU,UACjB,gCACC,4CAAC,SAAK,GAAG,iBAAiB,EAAE,eAAW,2BAAS,cAAc,EAAE,CAAC,GAC/D,sDAAC,0BACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,eAAe,WAAW;AAAA,MACvC;AAAA;AAAA,EACF,GACF,GACF,GAEJ;AAEJ;","names":["import_react","Parallax"]}
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/Backgrounds/index.tsx"],"sourcesContent":["import { lazy, ReactNode, Suspense } from 'react'\nimport { BackgroundsPropControllerValue, BackgroundsData } from '../../../../hooks'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport Parallax from '../Parallax'\nimport { type CSSObject } from '@emotion/serialize'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { useFrameworkContext } from '../../../../../runtimes/react/components/hooks/use-framework-context'\nimport { useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nconst BackgroundVideo = lazy(() => import('../BackgroundVideo'))\n\nfunction getColor(color: Color | null | undefined) {\n  if (color == null) return 'black'\n\n  if (color.swatch == null) {\n    return colorToString({ ...color, swatch: { hue: 0, saturation: 0, lightness: 0 } })\n  }\n\n  return colorToString(color)\n}\n\ntype GradientStop = { color: Color | null | undefined; location: number }\n\nconst getStopsStyle = (stops: GradientStop[]) =>\n  stops.map(({ color, location }) => `${getColor(color)} ${location}%`).join(',')\n\nconst absoluteFillStyle: CSSObject = {\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n}\n\nconst containerStyle: CSSObject = {\n  ...absoluteFillStyle,\n  borderRadius: 'inherit',\n}\n\ntype Props = { backgrounds: BackgroundsPropControllerValue | null | undefined }\n\nexport default function Backgrounds({ backgrounds }: Props): ReactNode {\n  if (backgrounds == null) return <></>\n\n  return (\n    <>\n      {backgrounds.map(({ value, deviceId }) => {\n        const visibility = backgrounds.map(v => ({\n          deviceId: v.deviceId,\n          value: v.deviceId === deviceId,\n        }))\n\n        return <BackgroundDeviceLayer key={deviceId} layer={value} visibility={visibility} />\n      })}\n    </>\n  )\n}\n\ntype BackgroundLayerProps = {\n  layer: BackgroundsData\n  visibility: ResponsiveValue<boolean>\n}\n\nfunction BackgroundDeviceLayer({ layer, visibility }: BackgroundLayerProps) {\n  const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({\n    display: v === true ? 'block' : 'none',\n  }))\n  const { className, styleElement } = useStyle({\n    ...containerStyle,\n    ...visibilityStyle,\n    overflow: 'hidden',\n  })\n\n  return (\n    <>\n      {styleElement}\n      <div className={className}>\n        {[...layer].reverse().map(bg => {\n          if (bg.type === 'color') {\n            return <ColorBackground key={bg.id} color={getColor(bg.payload)} />\n          }\n\n          if (bg.type === 'image' && bg.payload) {\n            return <ImageBackground {...bg.payload} key={bg.id} />\n          }\n\n          if (bg.type === 'gradient' && bg.payload) {\n            return (\n              <GradientBackground\n                {...bg.payload}\n                key={bg.id}\n                gradient={getStopsStyle(bg.payload.stops)}\n              />\n            )\n          }\n\n          if (bg.type === 'video' && bg.payload) {\n            return (\n              <VideoBackground\n                {...bg.payload}\n                key={bg.id}\n                maskColor={getColor(bg.payload.maskColor)}\n              />\n            )\n          }\n\n          return null\n        })}\n      </div>\n    </>\n  )\n}\n\ntype ColorBackgroundProps = { color: string }\n\nfunction ColorBackground({ color }: ColorBackgroundProps) {\n  const { className, styleElement } = useStyle({ ...containerStyle, backgroundColor: color })\n  return (\n    <>\n      {styleElement}\n      <div className={className} />\n    </>\n  )\n}\n\nconst ImageBackgroundRepeat = {\n  NoRepeat: 'no-repeat',\n  RepeatX: 'repeat-x',\n  RepeatY: 'repeat-y',\n  Repeat: 'repeat',\n} as const\n\ntype ImageBackgroundRepeat = (typeof ImageBackgroundRepeat)[keyof typeof ImageBackgroundRepeat]\n\nconst ImageBackgroundSize = {\n  Cover: 'cover',\n  Contain: 'contain',\n  Auto: 'auto',\n} as const\n\ntype ImageBackgroundSize = (typeof ImageBackgroundSize)[keyof typeof ImageBackgroundSize]\n\ntype ImageBackgroundProps = {\n  publicUrl?: string\n  position: { x: number; y: number }\n  repeat?: ImageBackgroundRepeat\n  size?: ImageBackgroundSize\n  opacity?: number\n  parallax?: number\n  priority?: boolean\n}\n\nfunction ImageBackground({\n  publicUrl,\n  position,\n  repeat = ImageBackgroundRepeat.NoRepeat,\n  size = ImageBackgroundSize.Cover,\n  opacity,\n  parallax,\n  priority,\n}: ImageBackgroundProps) {\n  const backgroundPosition = `${position.x}% ${position.y}%`\n  const { className: containerClassName, styleElement: containerStyleElement } =\n    useStyle(containerStyle)\n  const { Image } = useFrameworkContext()\n\n  if (repeat === 'no-repeat' && size !== 'auto' && publicUrl != null) {\n    return (\n      <Parallax strength={parallax}>\n        {getParallaxProps => (\n          <div {...getParallaxProps({ style: { opacity, overflow: 'hidden' } })}>\n            <Image\n              src={publicUrl}\n              alt={''}\n              fill\n              sizes=\"100vw\"\n              style={{\n                objectPosition: backgroundPosition,\n                objectFit: size,\n              }}\n              priority={priority}\n            />\n          </div>\n        )}\n      </Parallax>\n    )\n  }\n\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <>\n          {containerStyleElement}\n          <div\n            className={containerClassName}\n            {...getParallaxProps({\n              style: {\n                backgroundImage: publicUrl != null ? `url('${publicUrl}')` : undefined,\n                backgroundPosition,\n                backgroundRepeat: repeat,\n                backgroundSize: size,\n                opacity,\n              },\n            })}\n          />\n        </>\n      )}\n    </Parallax>\n  )\n}\n\ntype GradientBackgroundProps = {\n  gradient: string\n  angle?: number\n  isRadial?: boolean\n}\n\nfunction GradientBackground({\n  gradient,\n  isRadial = false,\n  angle = Math.PI,\n}: GradientBackgroundProps) {\n  const { className, styleElement } = useStyle({\n    ...containerStyle,\n    background: isRadial\n      ? `radial-gradient(${gradient})`\n      : `linear-gradient(${angle}rad, ${gradient})`,\n  })\n  return (\n    <>\n      {styleElement}\n      <div className={className} />\n    </>\n  )\n}\n\nconst BackgroundVideoAspectRatio = {\n  Wide: 'wide',\n  Standard: 'standard',\n} as const\n\ntype BackgroundVideoAspectRatio =\n  (typeof BackgroundVideoAspectRatio)[keyof typeof BackgroundVideoAspectRatio]\n\nfunction getAspectRatio(aspectRatio: BackgroundVideoAspectRatio | null | undefined): number {\n  switch (aspectRatio) {\n    case 'wide':\n      return 16 / 9\n\n    case 'standard':\n      return 4 / 3\n\n    default:\n      return 16 / 9\n  }\n}\n\ntype VideoBackgroundProps = {\n  url?: string\n  aspectRatio?: BackgroundVideoAspectRatio\n  maskColor: string\n  zoom?: number\n  opacity?: number\n  parallax?: number\n}\n\nfunction VideoBackground({\n  url,\n  aspectRatio,\n  maskColor,\n  zoom,\n  opacity,\n  parallax,\n}: VideoBackgroundProps) {\n  const { className: containerClassName, styleElement: containerStyleElement } =\n    useStyle(containerStyle)\n  return (\n    <Parallax strength={parallax}>\n      {getParallaxProps => (\n        <>\n          {containerStyleElement}\n          <div {...getParallaxProps({ className: containerClassName })}>\n            <Suspense>\n              <BackgroundVideo\n                url={url}\n                zoom={zoom}\n                opacity={opacity}\n                aspectRatio={getAspectRatio(aspectRatio)}\n                maskColor={maskColor}\n              />\n            </Suspense>\n          </div>\n        </>\n      )}\n    </Parallax>\n  )\n}\n"],"mappings":"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","names":["import_react","Parallax"]}

package/dist/cjs/components/shared/BackgroundsContainer/index.js

@@ -33,39 +33,43 @@ __export(BackgroundsContainer_exports, {
 });
 module.exports = __toCommonJS(BackgroundsContainer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
 var import_react = require("react");
-var import_use_style = require("../../../runtimes/react/use-style");
 var import_hooks = require("../../hooks");
 var import_Backgrounds = __toESM(require("./components/Backgrounds"));
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 var BackgroundsContainer_default = (0, import_react.forwardRef)(function BackgroundsContainer({ backgrounds, children, className, ...restOfProps }, ref) {
-  const widthAndMarginStyle = (0, import_use_style.useStyle)({
-    width: "100%",
-    margin: "0 auto"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+  const { className: widthAndMarginClassName, styleElement: widthAndMarginStyleElement } = (0, import_use_style.useStyle)(
     {
-      ...restOfProps,
-      ref,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)({
-          position: "relative",
-          "> *": {
-            borderRadius: "inherit",
-            height: "inherit"
-          },
-          "> :last-child": {
-            position: "relative"
-          }
-        }),
-        className ? className : widthAndMarginStyle
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Backgrounds.default, { backgrounds: (0, import_hooks.useBackgrounds)(backgrounds) }),
-        import_react.Children.only(children)
-      ]
+      width: "100%",
+      margin: "0 auto"
     }
   );
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)({
+    position: "relative",
+    "> *": {
+      borderRadius: "inherit",
+      height: "inherit"
+    },
+    "> :last-child": {
+      position: "relative"
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    baseStyleElement,
+    widthAndMarginStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ...restOfProps,
+        ref,
+        className: (0, import_clsx.default)(baseClassName, className ? className : widthAndMarginClassName),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Backgrounds.default, { backgrounds: (0, import_hooks.useBackgrounds)(backgrounds) }),
+          import_react.Children.only(children)
+        ]
+      }
+    )
+  ] });
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/BackgroundsContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/BackgroundsContainer/index.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport {\n  Children,\n  ComponentPropsWithoutRef,\n  ElementType,\n  forwardRef,\n  ReactElement,\n  Ref,\n} from 'react'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useBackgrounds } from '../../hooks'\nimport Backgrounds from './components/Backgrounds'\nimport { ResponsiveBackgroundsData } from '@makeswift/prop-controllers'\n\ntype BaseProps = {\n  backgrounds: ResponsiveBackgroundsData | undefined\n  children: ReactElement<ElementType>\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default forwardRef<HTMLDivElement | null, Props>(function BackgroundsContainer(\n  { backgrounds, children, className, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const widthAndMarginStyle = useStyle({\n    width: '100%',\n    margin: '0 auto',\n  })\n\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          '> *': {\n            borderRadius: 'inherit',\n            height: 'inherit',\n          },\n          '> :last-child': {\n            position: 'relative',\n          },\n        }),\n        className ? className : widthAndMarginStyle,\n      )}\n    >\n      <Backgrounds backgrounds={useBackgrounds(backgrounds)} />\n      {Children.only(children)}\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCI;AA/BJ,iBAAmB;AACnB,mBAOO;AACP,uBAAyB;AACzB,mBAA+B;AAC/B,yBAAwB;AAUxB,IAAO,mCAAQ,yBAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,QAAM,0BAAsB,2BAAS;AAAA,IACnC,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,YACL,cAAc;AAAA,YACd,QAAQ;AAAA,UACV;AAAA,UACA,iBAAiB;AAAA,YACf,UAAU;AAAA,UACZ;AAAA,QACF,CAAC;AAAA,QACD,YAAY,YAAY;AAAA,MAC1B;AAAA,MAEA;AAAA,oDAAC,mBAAAA,SAAA,EAAY,iBAAa,6BAAe,WAAW,GAAG;AAAA,QACtD,sBAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,EACzB;AAEJ,CAAC;","names":["Backgrounds"]}
+{"version":3,"sources":["../../../../../src/components/shared/BackgroundsContainer/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  ComponentPropsWithoutRef,\n  ElementType,\n  forwardRef,\n  ReactElement,\n  Ref,\n} from 'react'\nimport { useBackgrounds } from '../../hooks'\nimport Backgrounds from './components/Backgrounds'\nimport { ResponsiveBackgroundsData } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\ntype BaseProps = {\n  backgrounds: ResponsiveBackgroundsData | undefined\n  children: ReactElement<ElementType>\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default forwardRef<HTMLDivElement | null, Props>(function BackgroundsContainer(\n  { backgrounds, children, className, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const { className: widthAndMarginClassName, styleElement: widthAndMarginStyleElement } = useStyle(\n    {\n      width: '100%',\n      margin: '0 auto',\n    },\n  )\n  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({\n    position: 'relative',\n    '> *': {\n      borderRadius: 'inherit',\n      height: 'inherit',\n    },\n    '> :last-child': {\n      position: 'relative',\n    },\n  })\n\n  return (\n    <>\n      {baseStyleElement}\n      {widthAndMarginStyleElement}\n      <div\n        {...restOfProps}\n        ref={ref}\n        className={clsx(baseClassName, className ? className : widthAndMarginClassName)}\n      >\n        <Backgrounds backgrounds={useBackgrounds(backgrounds)} />\n        {Children.only(children)}\n      </div>\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CI;AA3CJ,mBAOO;AACP,mBAA+B;AAC/B,yBAAwB;AAExB,uBAAyB;AACzB,kBAAiB;AASjB,IAAO,mCAAQ,yBAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,QAAM,EAAE,WAAW,yBAAyB,cAAc,2BAA2B,QAAI;AAAA,IACvF;AAAA,MACE,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACA,QAAM,EAAE,WAAW,eAAe,cAAc,iBAAiB,QAAI,2BAAS;AAAA,IAC5E,UAAU;AAAA,IACV,OAAO;AAAA,MACL,cAAc;AAAA,MACd,QAAQ;AAAA,IACV;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF,CAAC;AAED,SACE,4EACG;AAAA;AAAA,IACA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,eAAW,YAAAA,SAAK,eAAe,YAAY,YAAY,uBAAuB;AAAA,QAE9E;AAAA,sDAAC,mBAAAC,SAAA,EAAY,iBAAa,6BAAe,WAAW,GAAG;AAAA,UACtD,sBAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,IACzB;AAAA,KACF;AAEJ,CAAC;","names":["clsx","Backgrounds"]}

package/dist/cjs/components/shared/FallbackComponent/FallbackComponent.js

@@ -23,34 +23,35 @@ __export(FallbackComponent_exports, {
 module.exports = __toCommonJS(FallbackComponent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_use_style = require("../../../runtimes/react/use-style");
 var import_Warning20 = require("../../icons/Warning20");
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 const FallbackComponent = (0, import_react.forwardRef)(function FallbackComponent2({ text, details }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      ref,
-      className: (0, import_use_style.useStyle)({
-        width: "100%",
-        height: 54,
-        backgroundColor: "#fcedf2",
-        borderRadius: 6,
-        padding: 16,
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        color: "#c73e6d",
-        fill: "currentColor",
-        fontFamily: "Heebo, sans-serif",
-        fontSize: 16
-      }),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Warning20.Warning20, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: text }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_use_style.useStyle)({ display: "none" }), children: details })
-      ]
-    }
-  );
+  const { className: outerClassName, styleElement: outerStyleElement } = (0, import_use_style.useStyle)({
+    width: "100%",
+    height: 54,
+    backgroundColor: "#fcedf2",
+    borderRadius: 6,
+    padding: 16,
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    color: "#c73e6d",
+    fill: "currentColor",
+    fontFamily: "Heebo, sans-serif",
+    fontSize: 16
+  });
+  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = (0, import_use_style.useStyle)({
+    display: "none"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    outerStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: outerClassName, children: [
+      noDisplayStyleElement,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Warning20.Warning20, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: text }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: noDisplayClassName, children: details })
+    ] })
+  ] });
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/shared/FallbackComponent/FallbackComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { Warning20 } from '../../icons/Warning20'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      ref={ref}\n      className={useStyle({\n        width: '100%',\n        height: 54,\n        backgroundColor: '#fcedf2',\n        borderRadius: 6,\n        padding: 16,\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        color: '#c73e6d',\n        fill: 'currentColor',\n        fontFamily: 'Heebo, sans-serif',\n        fontSize: 16,\n      })}\n    >\n      <Warning20 />\n      <span>{text}</span>\n      <span className={useStyle({ display: 'none' })}>{details}</span>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,mBAAgC;AAChC,uBAAyB;AACzB,uBAA0B;AAOnB,MAAM,wBAAoB,yBAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,2BAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ,CAAC;AAAA,MAED;AAAA,oDAAC,8BAAU;AAAA,QACX,4CAAC,UAAM,gBAAK;AAAA,QACZ,4CAAC,UAAK,eAAW,2BAAS,EAAE,SAAS,OAAO,CAAC,GAAI,mBAAQ;AAAA;AAAA;AAAA,EAC3D;AAEJ,CAAC;","names":["FallbackComponent"]}
+{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { Warning20 } from '../../icons/Warning20'\nimport { useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const { className: outerClassName, styleElement: outerStyleElement } = useStyle({\n    width: '100%',\n    height: 54,\n    backgroundColor: '#fcedf2',\n    borderRadius: 6,\n    padding: 16,\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    color: '#c73e6d',\n    fill: 'currentColor',\n    fontFamily: 'Heebo, sans-serif',\n    fontSize: 16,\n  })\n  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = useStyle({\n    display: 'none',\n  })\n  return (\n    <>\n      {outerStyleElement}\n      <div ref={ref} className={outerClassName}>\n        {noDisplayStyleElement}\n        <Warning20 />\n        <span>{text}</span>\n        <span className={noDisplayClassName}>{details}</span>\n      </div>\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BI;AA/BJ,mBAAgC;AAChC,uBAA0B;AAC1B,uBAAyB;AAOlB,MAAM,wBAAoB,yBAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,QAAM,EAAE,WAAW,gBAAgB,cAAc,kBAAkB,QAAI,2BAAS;AAAA,IAC9E,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,EAAE,WAAW,oBAAoB,cAAc,sBAAsB,QAAI,2BAAS;AAAA,IACtF,SAAS;AAAA,EACX,CAAC;AACD,SACE,4EACG;AAAA;AAAA,IACD,6CAAC,SAAI,KAAU,WAAW,gBACvB;AAAA;AAAA,MACD,4CAAC,8BAAU;AAAA,MACX,4CAAC,UAAM,gBAAK;AAAA,MACZ,4CAAC,UAAK,WAAW,oBAAqB,mBAAQ;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;","names":["FallbackComponent"]}

package/dist/cjs/components/shared/GutterContainer/index.js

@@ -22,24 +22,21 @@ __export(GutterContainer_exports, {
 });
 module.exports = __toCommonJS(GutterContainer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
-var import_use_style = require("../../../runtimes/react/use-style");
 var import_responsive_style = require("../../utils/responsive-style");
+var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 function GutterContainer({ className, gutter, first, last, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(
-        (0, import_use_style.useStyle)(
-          (0, import_responsive_style.useResponsiveStyle)([gutter], ([gutter2 = { value: 0, unit: "px" }]) => ({
-            paddingLeft: first ? "0px" : `${gutter2.value / 2}${gutter2.unit}`,
-            paddingRight: last ? "0px" : `${gutter2.value / 2}${gutter2.unit}`
-          }))
-        ),
-        className
-      )
-    }
+  const styles = (0, import_use_style.composeStyles)(
+    (0, import_use_style.useStyle)(
+      (0, import_responsive_style.useResponsiveStyle)([gutter], ([gutter2 = { value: 0, unit: "px" }]) => ({
+        paddingLeft: first ? "0px" : `${gutter2.value / 2}${gutter2.unit}`,
+        paddingRight: last ? "0px" : `${gutter2.value / 2}${gutter2.unit}`
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/GutterContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/GutterContainer/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { LengthData, ResponsiveValue } from '@makeswift/prop-controllers'\n\ntype BaseProps = {\n  className?: string\n  gutter?: ResponsiveValue<LengthData>\n  first: boolean\n  last: boolean\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default function GutterContainer({ className, gutter, first, last, ...restOfProps }: Props) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle(\n          useResponsiveStyle([gutter] as const, ([gutter = { value: 0, unit: 'px' }]) => ({\n            paddingLeft: first ? '0px' : `${gutter.value / 2}${gutter.unit}`,\n            paddingRight: last ? '0px' : `${gutter.value / 2}${gutter.unit}`,\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAjBJ,iBAAmB;AAEnB,uBAAyB;AACzB,8BAAmC;AAYpB,SAAR,gBAAiC,EAAE,WAAW,QAAQ,OAAO,MAAM,GAAG,YAAY,GAAU;AACjG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT;AAAA,cACE,4CAAmB,CAAC,MAAM,GAAY,CAAC,CAACA,UAAS,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO;AAAA,YAC9E,aAAa,QAAQ,QAAQ,GAAGA,QAAO,QAAQ,CAAC,GAAGA,QAAO,IAAI;AAAA,YAC9D,cAAc,OAAO,QAAQ,GAAGA,QAAO,QAAQ,CAAC,GAAGA,QAAO,IAAI;AAAA,UAChE,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["gutter"]}
+{"version":3,"sources":["../../../../../src/components/shared/GutterContainer/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { LengthData, ResponsiveValue } from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype BaseProps = {\n  className?: string\n  gutter?: ResponsiveValue<LengthData>\n  first: boolean\n  last: boolean\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport default function GutterContainer({ className, gutter, first, last, ...restOfProps }: Props) {\n  const styles = composeStyles(\n    useStyle(\n      useResponsiveStyle([gutter] as const, ([gutter = { value: 0, unit: 'px' }]) => ({\n        paddingLeft: first ? '0px' : `${gutter.value / 2}${gutter.unit}`,\n        paddingRight: last ? '0px' : `${gutter.value / 2}${gutter.unit}`,\n      })),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBI;AAxBJ,8BAAmC;AAEnC,uBAAwC;AAWzB,SAAR,gBAAiC,EAAE,WAAW,QAAQ,OAAO,MAAM,GAAG,YAAY,GAAU;AACjG,QAAM,aAAS;AAAA,QACb;AAAA,UACE,4CAAmB,CAAC,MAAM,GAAY,CAAC,CAACA,UAAS,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO;AAAA,QAC9E,aAAa,QAAQ,QAAQ,GAAGA,QAAO,QAAQ,CAAC,GAAGA,QAAO,IAAI;AAAA,QAC9D,cAAc,OAAO,QAAQ,GAAGA,QAAO,QAAQ,CAAC,GAAGA,QAAO,IAAI;AAAA,MAChE,EAAE;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AACA,SACE,4EACG;AAAA,WAAO;AAAA,IACR,4CAAC,SAAK,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACrD;AAEJ;","names":["gutter"]}

package/dist/cjs/components/shared/grid-item.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var grid_item_exports = {};
 __export(grid_item_exports, {
@@ -23,10 +33,10 @@ __export(grid_item_exports, {
 });
 module.exports = __toCommonJS(grid_item_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
-var import_use_style = require("../../runtimes/react/use-style");
 var import_animations = require("../builtin/Box/animations");
 var import_responsive_style = require("../utils/responsive-style");
+var import_use_style = require("../../runtimes/react/css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 const gridItemIdentifierClassName = "grid-item";
 function GridItem({
   grid,
@@ -39,20 +49,26 @@ function GridItem({
   itemStaggerDuration,
   ...restOfProps
 }) {
-  const gridItemClassName = (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveGridItem)({ grid, index, columnGap, rowGap }));
-  const animationClassName = (0, import_animations.useItemAnimation)(
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)(
+    (0, import_responsive_style.useResponsiveGridItem)({ grid, index, columnGap, rowGap })
+  );
+  const [animationClassName, animationStyle] = (0, import_animations.useItemAnimation)(
     itemAnimateDuration,
     itemAnimateDelay,
     itemStaggerDuration,
     index
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ...restOfProps,
-      className: (0, import_css.cx)(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    baseStyleElement,
+    animationStyle,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...restOfProps,
+        className: (0, import_clsx.default)(baseClassName, className, animationClassName, gridItemIdentifierClassName)
+      }
+    )
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/shared/grid-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/shared/grid-item.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { useStyle } from '../../runtimes/react/use-style'\nimport { useItemAnimation } from '../builtin/Box/animations'\nimport { useResponsiveGridItem } from '../utils/responsive-style'\nimport { type LengthData, type ResponsiveNumberValue } from '@makeswift/prop-controllers'\n\ntype BaseProps = {\n  className?: string\n  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n  index: number\n  columnGap?: ResponsiveValue<LengthData>\n  rowGap?: ResponsiveValue<LengthData>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport const gridItemIdentifierClassName = 'grid-item'\n\nexport function GridItem({\n  grid,\n  index,\n  columnGap,\n  rowGap,\n  className,\n  itemAnimateDuration,\n  itemAnimateDelay,\n  itemStaggerDuration,\n  ...restOfProps\n}: Props) {\n  const gridItemClassName = useStyle(useResponsiveGridItem({ grid, index, columnGap, rowGap }))\n  const animationClassName = useItemAnimation(\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n    index,\n  )\n\n  return (\n    <div\n      {...restOfProps}\n      className={cx(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CI;AA3CJ,iBAAmB;AAGnB,uBAAyB;AACzB,wBAAiC;AACjC,8BAAsC;AAgB/B,MAAM,8BAA8B;AAEpC,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,wBAAoB,+BAAS,+CAAsB,EAAE,MAAM,OAAO,WAAW,OAAO,CAAC,CAAC;AAC5F,QAAM,yBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,mBAAmB,WAAW,oBAAoB,2BAA2B;AAAA;AAAA,EAC7F;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/shared/grid-item.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\nimport { type ResponsiveValue } from '@makeswift/controls'\nimport { useItemAnimation } from '../builtin/Box/animations'\nimport { useResponsiveGridItem } from '../utils/responsive-style'\nimport { type LengthData, type ResponsiveNumberValue } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\ntype BaseProps = {\n  className?: string\n  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n  index: number\n  columnGap?: ResponsiveValue<LengthData>\n  rowGap?: ResponsiveValue<LengthData>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport const gridItemIdentifierClassName = 'grid-item'\n\nexport function GridItem({\n  grid,\n  index,\n  columnGap,\n  rowGap,\n  className,\n  itemAnimateDuration,\n  itemAnimateDelay,\n  itemStaggerDuration,\n  ...restOfProps\n}: Props) {\n  const { className: baseClassName, styleElement: baseStyleElement } = useStyle(\n    useResponsiveGridItem({ grid, index, columnGap, rowGap }),\n  )\n  const [animationClassName, animationStyle] = useItemAnimation(\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n    index,\n  )\n\n  return (\n    <>\n      {baseStyleElement}\n      {animationStyle}\n      <div\n        {...restOfProps}\n        className={clsx(baseClassName, className, animationClassName, gridItemIdentifierClassName)}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CI;AA3CJ,wBAAiC;AACjC,8BAAsC;AAEtC,uBAAyB;AACzB,kBAAiB;AAeV,MAAM,8BAA8B;AAEpC,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,EAAE,WAAW,eAAe,cAAc,iBAAiB,QAAI;AAAA,QACnE,+CAAsB,EAAE,MAAM,OAAO,WAAW,OAAO,CAAC;AAAA,EAC1D;AACA,QAAM,CAAC,oBAAoB,cAAc,QAAI;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,4EACG;AAAA;AAAA,IACA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,YAAAA,SAAK,eAAe,WAAW,oBAAoB,2BAA2B;AAAA;AAAA,IAC3F;AAAA,KACF;AAEJ;","names":["clsx"]}

package/dist/cjs/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/controls/index.ts"],"sourcesContent":["export * from './control'\n\nexport {\n  ControlDefinition,\n  ControlDefinitionVisitor,\n  Checkbox,\n  CheckboxDefinition,\n  Code,\n  CodeDefinition,\n  Color,\n  ColorDefinition,\n  Combobox,\n  ComboboxDefinition,\n  isDependsOnConfig,\n  isProvidesConfig,\n  isContextValue,\n  unstable_ContextValue,\n  type ProvidesConfig,\n  type DependsOnConfig,\n  type AnyContextValue,\n  type ContextValueDependencies,\n  type ContextValues,\n  Font,\n  FontDefinition,\n  unstable_Gallery,\n  unstable_GalleryDefinition,\n  type GalleryOption,\n  type GalleryPage,\n  Group,\n  GroupDefinition,\n  GroupControl,\n  IconRadioGroup,\n  IconRadioGroupDefinition,\n  type IconRadioGroupIcon,\n  Image,\n  ImageDefinition,\n  List,\n  ListDefinition,\n  ListControl,\n  Number,\n  NumberDefinition,\n  Select,\n  SelectDefinition,\n  Shape,\n  ShapeDefinition,\n  ShapeControl,\n  Slider,\n  SliderDefinition,\n  Style,\n  StyleDefinition,\n  type StyleProperty,\n  StyleControl,\n  TextInput,\n  TextInputDefinition,\n  TextArea,\n  TextAreaDefinition,\n  unstable_Typography,\n  unstable_TypographyDefinition,\n} from '@makeswift/controls'\n\nexport { Link, LinkDefinition } from './link'\nexport { RichTextV1Definition, RichTextV1Control } from './rich-text'\nexport { RichText, RichTextV2Definition, RichTextV2Control } from './rich-text-v2'\nexport { Slot, SlotDefinition, SlotControl } from './slot'\nexport { unstable_StyleV2, StyleV2Definition, StyleV2Control } from './style-v2/style-v2'\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAc,sBAAd;AAEA,sBAwDO;AAEP,kBAAqC;AACrC,uBAAwD;AACxD,0BAAkE;AAClE,kBAAkD;AAClD,sBAAoE;","names":[]}
+{"version":3,"sources":["../../../src/controls/index.ts"],"sourcesContent":["export * from './control'\n\nexport {\n  ControlDefinition,\n  ControlDefinitionVisitor,\n  Checkbox,\n  CheckboxDefinition,\n  Code,\n  CodeDefinition,\n  Color,\n  ColorDefinition,\n  Combobox,\n  ComboboxDefinition,\n  isDependsOnConfig,\n  isProvidesConfig,\n  isContextValue,\n  unstable_ContextValue,\n  type ProvidesConfig,\n  type DependsOnConfig,\n  type AnyContextValue,\n  type ContextValueDependencies,\n  type ContextValues,\n  type ContextValue,\n  Font,\n  FontDefinition,\n  unstable_Gallery,\n  unstable_GalleryDefinition,\n  type GalleryOption,\n  type GalleryPage,\n  Group,\n  GroupDefinition,\n  GroupControl,\n  IconRadioGroup,\n  IconRadioGroupDefinition,\n  type IconRadioGroupIcon,\n  Image,\n  ImageDefinition,\n  List,\n  ListDefinition,\n  ListControl,\n  Number,\n  NumberDefinition,\n  Select,\n  SelectDefinition,\n  Shape,\n  ShapeDefinition,\n  ShapeControl,\n  Slider,\n  SliderDefinition,\n  Style,\n  StyleDefinition,\n  type StyleProperty,\n  StyleControl,\n  TextInput,\n  TextInputDefinition,\n  TextArea,\n  TextAreaDefinition,\n  unstable_Typography,\n  unstable_TypographyDefinition,\n} from '@makeswift/controls'\n\nexport { Link, LinkDefinition } from './link'\nexport { RichTextV1Definition, RichTextV1Control } from './rich-text'\nexport { RichText, RichTextV2Definition, RichTextV2Control } from './rich-text-v2'\nexport { Slot, SlotDefinition, SlotControl } from './slot'\nexport { unstable_StyleV2, StyleV2Definition, StyleV2Control } from './style-v2/style-v2'\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAc,sBAAd;AAEA,sBAyDO;AAEP,kBAAqC;AACrC,uBAAwD;AACxD,0BAAkE;AAClE,kBAAkD;AAClD,sBAAoE;","names":[]}