@makeswift/runtime 0.28.10-canary.8 → 0.29.0-canary.19

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

@@ -1,11 +1,11 @@
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import { lazy, Suspense } from "react";
 import { colorToString } from "../../../../utils/colorToString";
 import Parallax from "../Parallax";
-import { useStyle } from "../../../../../runtimes/react/use-style";
 import { useResponsiveStyle } from "../../../../utils/responsive-style";
 import { useFrameworkContext } from "../../../../../runtimes/react/components/hooks/use-framework-context";
+import { useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
 const BackgroundVideo = lazy(() => import("../BackgroundVideo"));
 function getColor(color) {
   if (color == null)
@@ -42,38 +42,50 @@ function BackgroundDeviceLayer({ layer, visibility }) {
   const visibilityStyle = useResponsiveStyle([visibility], ([v]) => ({
     display: v === true ? "block" : "none"
   }));
-  return /* @__PURE__ */ jsx("div", { className: useStyle({ ...containerStyle, ...visibilityStyle, overflow: "hidden" }), children: [...layer].reverse().map((bg) => {
-    if (bg.type === "color") {
-      return /* @__PURE__ */ jsx(ColorBackground, { color: getColor(bg.payload) }, bg.id);
-    }
-    if (bg.type === "image" && bg.payload) {
-      return /* @__PURE__ */ createElement(ImageBackground, { ...bg.payload, key: bg.id });
-    }
-    if (bg.type === "gradient" && bg.payload) {
-      return /* @__PURE__ */ createElement(
-        GradientBackground,
-        {
-          ...bg.payload,
-          key: bg.id,
-          gradient: getStopsStyle(bg.payload.stops)
-        }
-      );
-    }
-    if (bg.type === "video" && bg.payload) {
-      return /* @__PURE__ */ createElement(
-        VideoBackground,
-        {
-          ...bg.payload,
-          key: bg.id,
-          maskColor: getColor(bg.payload.maskColor)
-        }
-      );
-    }
-    return null;
-  }) });
+  const { className, styleElement } = useStyle({
+    ...containerStyle,
+    ...visibilityStyle,
+    overflow: "hidden"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("div", { className, children: [...layer].reverse().map((bg) => {
+      if (bg.type === "color") {
+        return /* @__PURE__ */ jsx(ColorBackground, { color: getColor(bg.payload) }, bg.id);
+      }
+      if (bg.type === "image" && bg.payload) {
+        return /* @__PURE__ */ createElement(ImageBackground, { ...bg.payload, key: bg.id });
+      }
+      if (bg.type === "gradient" && bg.payload) {
+        return /* @__PURE__ */ createElement(
+          GradientBackground,
+          {
+            ...bg.payload,
+            key: bg.id,
+            gradient: getStopsStyle(bg.payload.stops)
+          }
+        );
+      }
+      if (bg.type === "video" && bg.payload) {
+        return /* @__PURE__ */ createElement(
+          VideoBackground,
+          {
+            ...bg.payload,
+            key: bg.id,
+            maskColor: getColor(bg.payload.maskColor)
+          }
+        );
+      }
+      return null;
+    }) })
+  ] });
 }
 function ColorBackground({ color }) {
-  return /* @__PURE__ */ jsx("div", { className: useStyle({ ...containerStyle, backgroundColor: color }) });
+  const { className, styleElement } = useStyle({ ...containerStyle, backgroundColor: color });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("div", { className })
+  ] });
 }
 const ImageBackgroundRepeat = {
   NoRepeat: "no-repeat",
@@ -96,7 +108,7 @@ function ImageBackground({
   priority
 }) {
   const backgroundPosition = `${position.x}% ${position.y}%`;
-  const containerClassName = useStyle(containerStyle);
+  const { className: containerClassName, styleElement: containerStyleElement } = useStyle(containerStyle);
   const { Image } = useFrameworkContext();
   if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
     return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ style: { opacity, overflow: "hidden" } }), children: /* @__PURE__ */ jsx(
@@ -114,36 +126,38 @@ function ImageBackground({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: containerClassName,
-      ...getParallaxProps({
-        style: {
-          backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
-          backgroundPosition,
-          backgroundRepeat: repeat,
-          backgroundSize: size,
-          opacity
-        }
-      })
-    }
-  ) });
+  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    containerStyleElement,
+    /* @__PURE__ */ 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__ */ jsx(
-    "div",
-    {
-      className: useStyle({
-        ...containerStyle,
-        background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
-      })
-    }
-  );
+  const { className, styleElement } = useStyle({
+    ...containerStyle,
+    background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("div", { className })
+  ] });
 }
 const BackgroundVideoAspectRatio = {
   Wide: "wide",
@@ -167,16 +181,20 @@ function VideoBackground({
   opacity,
   parallax
 }) {
-  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsx("div", { ...getParallaxProps({ className: useStyle(containerStyle) }), children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
-    BackgroundVideo,
-    {
-      url,
-      zoom,
-      opacity,
-      aspectRatio: getAspectRatio(aspectRatio),
-      maskColor
-    }
-  ) }) }) });
+  const { className: containerClassName, styleElement: containerStyleElement } = useStyle(containerStyle);
+  return /* @__PURE__ */ jsx(Parallax, { strength: parallax, children: (getParallaxProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    containerStyleElement,
+    /* @__PURE__ */ jsx("div", { ...getParallaxProps({ className: containerClassName }), children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+      BackgroundVideo,
+      {
+        url,
+        zoom,
+        opacity,
+        aspectRatio: getAspectRatio(aspectRatio),
+        maskColor
+      }
+    ) }) })
+  ] }) });
 }
 export {
   Backgrounds as default

package/dist/esm/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":"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","names":[]}
+{"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":[]}

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

@@ -1,42 +1,46 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   Children,
   forwardRef
 } from "react";
-import { useStyle } from "../../../runtimes/react/use-style";
 import { useBackgrounds } from "../../hooks";
 import Backgrounds from "./components/Backgrounds";
+import { useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 var BackgroundsContainer_default = forwardRef(function BackgroundsContainer({ backgrounds, children, className, ...restOfProps }, ref) {
-  const widthAndMarginStyle = useStyle({
-    width: "100%",
-    margin: "0 auto"
-  });
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const { className: widthAndMarginClassName, styleElement: widthAndMarginStyleElement } = useStyle(
     {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({
-          position: "relative",
-          "> *": {
-            borderRadius: "inherit",
-            height: "inherit"
-          },
-          "> :last-child": {
-            position: "relative"
-          }
-        }),
-        className ? className : widthAndMarginStyle
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Backgrounds, { backgrounds: useBackgrounds(backgrounds) }),
-        Children.only(children)
-      ]
+      width: "100%",
+      margin: "0 auto"
     }
   );
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({
+    position: "relative",
+    "> *": {
+      borderRadius: "inherit",
+      height: "inherit"
+    },
+    "> :last-child": {
+      position: "relative"
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    baseStyleElement,
+    widthAndMarginStyleElement,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...restOfProps,
+        ref,
+        className: clsx(baseClassName, className ? className : widthAndMarginClassName),
+        children: [
+          /* @__PURE__ */ jsx(Backgrounds, { backgrounds: useBackgrounds(backgrounds) }),
+          Children.only(children)
+        ]
+      }
+    )
+  ] });
 });
 export {
   BackgroundsContainer_default as default

package/dist/esm/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":";AAiCI,SAiBE,KAjBF;AA/BJ,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EAGA;AAAA,OAGK;AACP,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,OAAO,iBAAiB;AAUxB,IAAO,+BAAQ,WAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,QAAM,sBAAsB,SAAS;AAAA,IACnC,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;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,4BAAC,eAAY,aAAa,eAAe,WAAW,GAAG;AAAA,QACtD,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,EACzB;AAEJ,CAAC;","names":[]}
+{"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":";AA6CI,mBAQI,KALF,YAHF;AA3CJ;AAAA,EACE;AAAA,EAGA;AAAA,OAGK;AACP,SAAS,sBAAsB;AAC/B,OAAO,iBAAiB;AAExB,SAAS,gBAAgB;AACzB,OAAO,UAAU;AASjB,IAAO,+BAAQ,WAAyC,SAAS,qBAC/D,EAAE,aAAa,UAAU,WAAW,GAAG,YAAY,GACnD,KACA;AACA,QAAM,EAAE,WAAW,yBAAyB,cAAc,2BAA2B,IAAI;AAAA,IACvF;AAAA,MACE,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACA,QAAM,EAAE,WAAW,eAAe,cAAc,iBAAiB,IAAI,SAAS;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,iCACG;AAAA;AAAA,IACA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW,KAAK,eAAe,YAAY,YAAY,uBAAuB;AAAA,QAE9E;AAAA,8BAAC,eAAY,aAAa,eAAe,WAAW,GAAG;AAAA,UACtD,SAAS,KAAK,QAAQ;AAAA;AAAA;AAAA,IACzB;AAAA,KACF;AAEJ,CAAC;","names":[]}

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

@@ -1,33 +1,34 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useStyle } from "../../../runtimes/react/use-style";
 import { Warning20 } from "../../icons/Warning20";
+import { useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const FallbackComponent = forwardRef(function FallbackComponent2({ text, details }, ref) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: 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__ */ jsx(Warning20, {}),
-        /* @__PURE__ */ jsx("span", { children: text }),
-        /* @__PURE__ */ jsx("span", { className: useStyle({ display: "none" }), children: details })
-      ]
-    }
-  );
+  const { className: outerClassName, styleElement: outerStyleElement } = 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 } = useStyle({
+    display: "none"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    outerStyleElement,
+    /* @__PURE__ */ jsxs("div", { ref, className: outerClassName, children: [
+      noDisplayStyleElement,
+      /* @__PURE__ */ jsx(Warning20, {}),
+      /* @__PURE__ */ jsx("span", { children: text }),
+      /* @__PURE__ */ jsx("span", { className: noDisplayClassName, children: details })
+    ] })
+  ] });
 });
 export {
   FallbackComponent

package/dist/esm/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":"AAcI,SAiBE,KAjBF;AAdJ,SAAS,kBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAOnB,MAAM,oBAAoB,WAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,SAAS;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,4BAAC,aAAU;AAAA,QACX,oBAAC,UAAM,gBAAK;AAAA,QACZ,oBAAC,UAAK,WAAW,SAAS,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":"AA+BI,mBAII,KAFF,YAFF;AA/BJ,SAAS,kBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAOlB,MAAM,oBAAoB,WAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,QAAM,EAAE,WAAW,gBAAgB,cAAc,kBAAkB,IAAI,SAAS;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,IAAI,SAAS;AAAA,IACtF,SAAS;AAAA,EACX,CAAC;AACD,SACE,iCACG;AAAA;AAAA,IACD,qBAAC,SAAI,KAAU,WAAW,gBACvB;AAAA;AAAA,MACD,oBAAC,aAAU;AAAA,MACX,oBAAC,UAAM,gBAAK;AAAA,MACZ,oBAAC,UAAK,WAAW,oBAAqB,mBAAQ;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;","names":["FallbackComponent"]}

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

@@ -1,23 +1,20 @@
-import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
-import { useStyle } from "../../../runtimes/react/use-style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveStyle } from "../../utils/responsive-style";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 function GutterContainer({ className, gutter, first, last, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle(
-          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 = composeStyles(
+    useStyle(
+      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__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 export {
   GutterContainer as default

package/dist/esm/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":"AAiBI;AAjBJ,SAAS,UAAU;AAEnB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAYpB,SAAR,gBAAiC,EAAE,WAAW,QAAQ,OAAO,MAAM,GAAG,YAAY,GAAU;AACjG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,UACE,mBAAmB,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":"AAyBI,mBAEE,KAFF;AAxBJ,SAAS,0BAA0B;AAEnC,SAAS,eAAe,gBAAgB;AAWzB,SAAR,gBAAiC,EAAE,WAAW,QAAQ,OAAO,MAAM,GAAG,YAAY,GAAU;AACjG,QAAM,SAAS;AAAA,IACb;AAAA,MACE,mBAAmB,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,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAK,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACrD;AAEJ;","names":["gutter"]}

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

@@ -1,8 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
-import { useStyle } from "../../runtimes/react/use-style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useItemAnimation } from "../builtin/Box/animations";
 import { useResponsiveGridItem } from "../utils/responsive-style";
+import { useStyle } from "../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 const gridItemIdentifierClassName = "grid-item";
 function GridItem({
   grid,
@@ -15,20 +15,26 @@ function GridItem({
   itemStaggerDuration,
   ...restOfProps
 }) {
-  const gridItemClassName = useStyle(useResponsiveGridItem({ grid, index, columnGap, rowGap }));
-  const animationClassName = useItemAnimation(
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle(
+    useResponsiveGridItem({ grid, index, columnGap, rowGap })
+  );
+  const [animationClassName, animationStyle] = useItemAnimation(
     itemAnimateDuration,
     itemAnimateDelay,
     itemStaggerDuration,
     index
   );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    baseStyleElement,
+    animationStyle,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...restOfProps,
+        className: clsx(baseClassName, className, animationClassName, gridItemIdentifierClassName)
+      }
+    )
+  ] });
 }
 export {
   GridItem,

package/dist/esm/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":"AA2CI;AA3CJ,SAAS,UAAU;AAGnB,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;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,oBAAoB,SAAS,sBAAsB,EAAE,MAAM,OAAO,WAAW,OAAO,CAAC,CAAC;AAC5F,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,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":"AA6CI,mBAGE,KAHF;AA3CJ,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAEtC,SAAS,gBAAgB;AACzB,OAAO,UAAU;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,IAAI;AAAA,IACnE,sBAAsB,EAAE,MAAM,OAAO,WAAW,OAAO,CAAC;AAAA,EAC1D;AACA,QAAM,CAAC,oBAAoB,cAAc,IAAI;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,iCACG;AAAA;AAAA,IACA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,KAAK,eAAe,WAAW,oBAAoB,2BAA2B;AAAA;AAAA,IAC3F;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/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,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAMA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,MAAM,sBAAsB;AACrC,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,UAAU,sBAAsB,yBAAyB;AAClE,SAAS,MAAM,gBAAgB,mBAAmB;AAClD,SAAS,kBAAkB,mBAAmB,sBAAsB;","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,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAOA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,MAAM,sBAAsB;AACrC,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,UAAU,sBAAsB,yBAAyB;AAClE,SAAS,MAAM,gBAAgB,mBAAmB;AAClD,SAAS,kBAAkB,mBAAmB,sBAAsB;","names":[]}