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

package/dist/esm/components/builtin/SocialLinks/SocialLinks.js

@@ -1,13 +1,12 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Link } from "../../shared/Link";
 import { colorToString } from "../../utils/colorToString";
 import { SocialLinksOptions } from "./options";
 import GutterContainer from "../../shared/GutterContainer";
 import SocialLinksPlaceholder from "./components/SocialLinksPlaceholder";
-import { cx } from "@emotion/css";
-import { useStyle } from "../../../runtimes/react/use-style";
 import { useResponsiveStyle } from "../../utils/responsive-style";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const SocialLinks = forwardRef(function SocialLinks2({
   id,
   links: { links, openInNewTab } = { links: [], openInNewTab: false },
@@ -21,50 +20,46 @@ const SocialLinks = forwardRef(function SocialLinks2({
   width,
   margin
 }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      id,
-      className: cx(
-        useStyle({ display: "flex", flexDirection: "row", flexWrap: "wrap" }),
-        width,
-        margin,
-        useStyle(
-          useResponsiveStyle([alignment], ([alignment2 = "center"]) => ({
-            justifyContent: alignment2
-          }))
-        )
-      ),
-      children: links.length > 0 ? links.map((link, i) => {
-        const option = SocialLinksOptions.find((o) => o.type === link.payload.type);
-        if (option == null)
-          return null;
-        return /* @__PURE__ */ jsx(
-          GutterContainer,
-          {
-            gutter,
-            first: i === 0,
-            last: i === links.length - 1,
-            children: /* @__PURE__ */ jsx(
-              StyledLink,
-              {
-                backgroundColor,
-                brandColor: option.brandColor,
-                fill,
-                hoverStyle,
-                link: { type: "OPEN_URL", payload: { url: link.payload.url, openInNewTab } },
-                shape,
-                size,
-                children: option.icon
-              }
-            )
-          },
-          link.id
-        );
-      }) : /* @__PURE__ */ jsx(SocialLinksPlaceholder, { gutter })
-    }
+  const styles = composeStyles(
+    useStyle({ display: "flex", flexDirection: "row", flexWrap: "wrap" }),
+    width,
+    margin,
+    useStyle(
+      useResponsiveStyle([alignment], ([alignment2 = "center"]) => ({
+        justifyContent: alignment2
+      }))
+    )
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ref, id, className: styles.className, children: links.length > 0 ? links.map((link, i) => {
+      const option = SocialLinksOptions.find((o) => o.type === link.payload.type);
+      if (option == null)
+        return null;
+      return /* @__PURE__ */ jsx(
+        GutterContainer,
+        {
+          gutter,
+          first: i === 0,
+          last: i === links.length - 1,
+          children: /* @__PURE__ */ jsx(
+            StyledLink,
+            {
+              backgroundColor,
+              brandColor: option.brandColor,
+              fill,
+              hoverStyle,
+              link: { type: "OPEN_URL", payload: { url: link.payload.url, openInNewTab } },
+              shape,
+              size,
+              children: option.icon
+            }
+          )
+        },
+        link.id
+      );
+    }) : /* @__PURE__ */ jsx(SocialLinksPlaceholder, { gutter }) })
+  ] });
 });
 var SocialLinks_default = SocialLinks;
 function StyledLink({
@@ -77,42 +72,40 @@ function StyledLink({
   backgroundColor,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          display: "block",
-          color: brandColor,
-          transition: "transform, opacity 0.18s",
-          svg: { display: "block" }
-        }),
-        useStyle(
-          useResponsiveStyle(
-            [shape, size, hoverStyle, fill, backgroundColor],
-            ([shape2 = "naked", size2 = "medium", hoverStyle2 = "none", fill2, backgroundColor2]) => ({
-              padding: shape2 === "naked" ? 0 : { small: 10, medium: 12, large: 14 }[size2],
-              borderRadius: { circle: "50%", rounded: "8px", naked: 0, square: 0 }[shape2],
-              background: shape2 === "naked" ? "transparent" : backgroundColor2 == null ? "currentColor" : colorToString(backgroundColor2),
-              ":hover": {
-                none: {},
-                grow: { transform: "scale(1.1)" },
-                shrink: { transform: "scale(0.9)" },
-                fade: { opacity: 0.65 }
-              }[hoverStyle2],
-              svg: {
-                fill: fill2 == null ? shape2 === "naked" || backgroundColor2 != null ? "currentColor" : "white" : colorToString(fill2),
-                width: { small: 16, medium: 20, large: 24 }[size2],
-                height: { small: 16, medium: 20, large: 24 }[size2]
-              }
-            })
-          )
-        ),
-        className
+  const styles = composeStyles(
+    useStyle({
+      display: "block",
+      color: brandColor,
+      transition: "transform, opacity 0.18s",
+      svg: { display: "block" }
+    }),
+    useStyle(
+      useResponsiveStyle(
+        [shape, size, hoverStyle, fill, backgroundColor],
+        ([shape2 = "naked", size2 = "medium", hoverStyle2 = "none", fill2, backgroundColor2]) => ({
+          padding: shape2 === "naked" ? 0 : { small: 10, medium: 12, large: 14 }[size2],
+          borderRadius: { circle: "50%", rounded: "8px", naked: 0, square: 0 }[shape2],
+          background: shape2 === "naked" ? "transparent" : backgroundColor2 == null ? "currentColor" : colorToString(backgroundColor2),
+          "&:hover": {
+            none: {},
+            grow: { transform: "scale(1.1)" },
+            shrink: { transform: "scale(0.9)" },
+            fade: { opacity: 0.65 }
+          }[hoverStyle2],
+          svg: {
+            fill: fill2 == null ? shape2 === "naked" || backgroundColor2 != null ? "currentColor" : "white" : colorToString(fill2),
+            width: { small: 16, medium: 20, large: 24 }[size2],
+            height: { small: 16, medium: 20, large: 24 }[size2]
+          }
+        })
       )
-    }
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx(Link, { ...restOfProps, className: styles.className })
+  ] });
 }
 export {
   SocialLinks_default as default

package/dist/esm/components/builtin/SocialLinks/SocialLinks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/SocialLinks.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react'\n\nimport { Link } from '../../shared/Link'\nimport { colorToString } from '../../utils/colorToString'\nimport { type ColorValue as Color, type ResponsiveColor } from '../../utils/types'\nimport { SocialLinksOptions, SocialLinksOptionType } from './options'\nimport GutterContainer from '../../shared/GutterContainer'\nimport SocialLinksPlaceholder from './components/SocialLinksPlaceholder'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveValue,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: string\n  links?: {\n    links: { id: string; payload: { type: SocialLinksOptionType; url: string } }[]\n    openInNewTab: boolean\n  }\n  shape?: ResponsiveIconRadioGroupValue<'naked' | 'circle' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  hoverStyle?: ResponsiveSelectValue<'none' | 'grow' | 'shrink' | 'fade'>\n  fill?: ResponsiveColor | null\n  backgroundColor?: ResponsiveColor | null\n  alignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gutter?: ResponsiveGapData\n  width?: string\n  margin?: string\n}\n\nconst SocialLinks = forwardRef(function SocialLinks(\n  {\n    id,\n    links: { links, openInNewTab } = { links: [], openInNewTab: false },\n    shape,\n    size,\n    hoverStyle,\n    fill,\n    backgroundColor,\n    alignment,\n    gutter,\n    width,\n    margin,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }),\n        width,\n        margin,\n        useStyle(\n          useResponsiveStyle([alignment] as const, ([alignment = 'center']) => ({\n            justifyContent: alignment,\n          })),\n        ),\n      )}\n    >\n      {links.length > 0 ? (\n        links.map((link, i) => {\n          const option = SocialLinksOptions.find(o => o.type === link.payload.type)\n\n          if (option == null) return null\n\n          return (\n            <GutterContainer\n              key={link.id}\n              gutter={gutter}\n              first={i === 0}\n              last={i === links.length - 1}\n            >\n              <StyledLink\n                backgroundColor={backgroundColor}\n                brandColor={option.brandColor}\n                fill={fill}\n                hoverStyle={hoverStyle}\n                link={{ type: 'OPEN_URL', payload: { url: link.payload.url, openInNewTab } }}\n                shape={shape}\n                size={size}\n              >\n                {option.icon}\n              </StyledLink>\n            </GutterContainer>\n          )\n        })\n      ) : (\n        <SocialLinksPlaceholder gutter={gutter} />\n      )}\n    </div>\n  )\n})\n\nexport default SocialLinks\n\ntype StyledLinkProps = ComponentPropsWithoutRef<typeof Link> & {\n  brandColor: string\n  shape: Props['shape']\n  size: Props['size']\n  hoverStyle: Props['hoverStyle']\n  fill: ResponsiveValue<Color> | null | undefined\n  backgroundColor: ResponsiveValue<Color> | null | undefined\n}\n\nfunction StyledLink({\n  className,\n  brandColor,\n  shape,\n  size,\n  hoverStyle,\n  fill,\n  backgroundColor,\n  ...restOfProps\n}: StyledLinkProps) {\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'block',\n          color: brandColor,\n          transition: 'transform, opacity 0.18s',\n          svg: { display: 'block' },\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [shape, size, hoverStyle, fill, backgroundColor] as const,\n            ([shape = 'naked', size = 'medium', hoverStyle = 'none', fill, backgroundColor]) => ({\n              padding: shape === 'naked' ? 0 : { small: 10, medium: 12, large: 14 }[size],\n              borderRadius: { circle: '50%', rounded: '8px', naked: 0, square: 0 }[shape],\n              background:\n                shape === 'naked'\n                  ? 'transparent'\n                  : backgroundColor == null\n                    ? 'currentColor'\n                    : colorToString(backgroundColor),\n\n              ':hover': {\n                none: {},\n                grow: { transform: 'scale(1.1)' },\n                shrink: { transform: 'scale(0.9)' },\n                fade: { opacity: 0.65 },\n              }[hoverStyle],\n\n              svg: {\n                fill:\n                  fill == null\n                    ? shape === 'naked' || backgroundColor != null\n                      ? 'currentColor'\n                      : 'white'\n                    : colorToString(fill),\n                width: { small: 16, medium: 20, large: 24 }[size],\n                height: { small: 16, medium: 20, large: 24 }[size],\n              },\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["SocialLinks","alignment","shape","size","hoverStyle","fill","backgroundColor"]}
+{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/SocialLinks.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react'\n\nimport { Link } from '../../shared/Link'\nimport { colorToString } from '../../utils/colorToString'\nimport { type ColorValue as Color, type ResponsiveColor } from '../../utils/types'\nimport { SocialLinksOptions, SocialLinksOptionType } from './options'\nimport GutterContainer from '../../shared/GutterContainer'\nimport SocialLinksPlaceholder from './components/SocialLinksPlaceholder'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveValue,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  id?: string\n  links?: {\n    links: { id: string; payload: { type: SocialLinksOptionType; url: string } }[]\n    openInNewTab: boolean\n  }\n  shape?: ResponsiveIconRadioGroupValue<'naked' | 'circle' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  hoverStyle?: ResponsiveSelectValue<'none' | 'grow' | 'shrink' | 'fade'>\n  fill?: ResponsiveColor | null\n  backgroundColor?: ResponsiveColor | null\n  alignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gutter?: ResponsiveGapData\n  width?: string\n  margin?: string\n}\n\nconst SocialLinks = forwardRef(function SocialLinks(\n  {\n    id,\n    links: { links, openInNewTab } = { links: [], openInNewTab: false },\n    shape,\n    size,\n    hoverStyle,\n    fill,\n    backgroundColor,\n    alignment,\n    gutter,\n    width,\n    margin,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const styles = composeStyles(\n    useStyle({ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }),\n    width,\n    margin,\n    useStyle(\n      useResponsiveStyle([alignment] as const, ([alignment = 'center']) => ({\n        justifyContent: alignment,\n      })),\n    ),\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div ref={ref} id={id} className={styles.className}>\n        {links.length > 0 ? (\n          links.map((link, i) => {\n            const option = SocialLinksOptions.find(o => o.type === link.payload.type)\n\n            if (option == null) return null\n\n            return (\n              <GutterContainer\n                key={link.id}\n                gutter={gutter}\n                first={i === 0}\n                last={i === links.length - 1}\n              >\n                <StyledLink\n                  backgroundColor={backgroundColor}\n                  brandColor={option.brandColor}\n                  fill={fill}\n                  hoverStyle={hoverStyle}\n                  link={{ type: 'OPEN_URL', payload: { url: link.payload.url, openInNewTab } }}\n                  shape={shape}\n                  size={size}\n                >\n                  {option.icon}\n                </StyledLink>\n              </GutterContainer>\n            )\n          })\n        ) : (\n          <SocialLinksPlaceholder gutter={gutter} />\n        )}\n      </div>\n    </>\n  )\n})\n\nexport default SocialLinks\n\ntype StyledLinkProps = ComponentPropsWithoutRef<typeof Link> & {\n  brandColor: string\n  shape: Props['shape']\n  size: Props['size']\n  hoverStyle: Props['hoverStyle']\n  fill: ResponsiveValue<Color> | null | undefined\n  backgroundColor: ResponsiveValue<Color> | null | undefined\n}\n\nfunction StyledLink({\n  className,\n  brandColor,\n  shape,\n  size,\n  hoverStyle,\n  fill,\n  backgroundColor,\n  ...restOfProps\n}: StyledLinkProps) {\n  const styles = composeStyles(\n    useStyle({\n      display: 'block',\n      color: brandColor,\n      transition: 'transform, opacity 0.18s',\n      svg: { display: 'block' },\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [shape, size, hoverStyle, fill, backgroundColor] as const,\n        ([shape = 'naked', size = 'medium', hoverStyle = 'none', fill, backgroundColor]) => ({\n          padding: shape === 'naked' ? 0 : { small: 10, medium: 12, large: 14 }[size],\n          borderRadius: { circle: '50%', rounded: '8px', naked: 0, square: 0 }[shape],\n          background:\n            shape === 'naked'\n              ? 'transparent'\n              : backgroundColor == null\n                ? 'currentColor'\n                : colorToString(backgroundColor),\n\n          '&:hover': {\n            none: {},\n            grow: { transform: 'scale(1.1)' },\n            shrink: { transform: 'scale(0.9)' },\n            fade: { opacity: 0.65 },\n          }[hoverStyle],\n\n          svg: {\n            fill:\n              fill == null\n                ? shape === 'naked' || backgroundColor != null\n                  ? 'currentColor'\n                  : 'white'\n                : colorToString(fill),\n            width: { small: 16, medium: 20, large: 24 }[size],\n            height: { small: 16, medium: 20, large: 24 }[size],\n          },\n        }),\n      ),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <Link {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n"],"mappings":"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","names":["SocialLinks","alignment","shape","size","hoverStyle","fill","backgroundColor"]}

package/dist/esm/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.js

@@ -1,6 +1,6 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { useStyle } from "../../../../../runtimes/react/use-style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import GutterContainer from "../../../../shared/GutterContainer";
+import { useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
 const links = [{ id: "1" }, { id: "2" }, { id: "3" }];
 function SocialLinksPlaceholder({ gutter }) {
   return /* @__PURE__ */ jsx(Fragment, { children: links.map((link, i) => /* @__PURE__ */ jsx(
@@ -15,17 +15,16 @@ function SocialLinksPlaceholder({ gutter }) {
   )) });
 }
 function PlaceholderLink() {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: useStyle({
-        width: 44,
-        height: 44,
-        borderRadius: "50%",
-        backgroundColor: "rgba(161, 168, 194, 0.4)"
-      })
-    }
-  );
+  const { className, styleElement } = useStyle({
+    width: 44,
+    height: 44,
+    borderRadius: "50%",
+    backgroundColor: "rgba(161, 168, 194, 0.4)"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("div", { className })
+  ] });
 }
 export {
   SocialLinksPlaceholder as default

package/dist/esm/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { LengthData, ResponsiveValue } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport GutterContainer from '../../../../shared/GutterContainer'\n\nconst links = [{ id: '1' }, { id: '2' }, { id: '3' }]\n\ntype Props = { gutter?: ResponsiveValue<LengthData> }\n\nexport default function SocialLinksPlaceholder({ gutter }: Props): ReactNode {\n  return (\n    <>\n      {links.map((link, i) => (\n        <GutterContainer\n          key={link.id}\n          gutter={gutter}\n          first={i === 0}\n          last={i === links.length - 1}\n        >\n          <PlaceholderLink />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n\nfunction PlaceholderLink() {\n  return (\n    <div\n      className={useStyle({\n        width: 44,\n        height: 44,\n        borderRadius: '50%',\n        backgroundColor: 'rgba(161, 168, 194, 0.4)',\n      })}\n    />\n  )\n}\n"],"mappings":"AAYI,mBAQM,WARN;AAVJ,SAAS,gBAAgB;AAEzB,OAAO,qBAAqB;AAE5B,MAAM,QAAQ,CAAC,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC;AAIrC,SAAR,uBAAwC,EAAE,OAAO,GAAqB;AAC3E,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,MAAM,SAAS;AAAA,MAE3B,8BAAC,mBAAgB;AAAA;AAAA,IALZ,KAAK;AAAA,EAMZ,CACD,GACH;AAEJ;AAEA,SAAS,kBAAkB;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { LengthData, ResponsiveValue } from '@makeswift/prop-controllers'\n\nimport GutterContainer from '../../../../shared/GutterContainer'\nimport { useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nconst links = [{ id: '1' }, { id: '2' }, { id: '3' }]\n\ntype Props = { gutter?: ResponsiveValue<LengthData> }\n\nexport default function SocialLinksPlaceholder({ gutter }: Props): ReactNode {\n  return (\n    <>\n      {links.map((link, i) => (\n        <GutterContainer\n          key={link.id}\n          gutter={gutter}\n          first={i === 0}\n          last={i === links.length - 1}\n        >\n          <PlaceholderLink />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n\nfunction PlaceholderLink() {\n  const { className, styleElement } = useStyle({\n    width: 44,\n    height: 44,\n    borderRadius: '50%',\n    backgroundColor: 'rgba(161, 168, 194, 0.4)',\n  })\n  return (\n    <>\n      {styleElement}\n      <div className={className} />\n    </>\n  )\n}\n"],"mappings":"AAYI,mBAQM,KAeN,YAvBA;AATJ,OAAO,qBAAqB;AAC5B,SAAS,gBAAgB;AAEzB,MAAM,QAAQ,CAAC,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC;AAIrC,SAAR,uBAAwC,EAAE,OAAO,GAAqB;AAC3E,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,MAAM,SAAS;AAAA,MAE3B,8BAAC,mBAAgB;AAAA;AAAA,IALZ,KAAK;AAAA,EAMZ,CACD,GACH;AAEJ;AAEA,SAAS,kBAAkB;AACzB,QAAM,EAAE,WAAW,aAAa,IAAI,SAAS;AAAA,IAC3C,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,iBAAiB;AAAA,EACnB,CAAC;AACD,SACE,iCACG;AAAA;AAAA,IACD,oBAAC,SAAI,WAAsB;AAAA,KAC7B;AAEJ;","names":[]}

package/dist/esm/components/builtin/Text/Text.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
 import { forwardRef } from "react";
+import clsx from "clsx";
 const Text = forwardRef(({ id, text, width, margin }, ref) => {
-  return /* @__PURE__ */ jsx("div", { id, ref, className: cx(width, margin), children: text });
+  return /* @__PURE__ */ jsx("div", { id, ref, className: clsx(width, margin), children: text });
 });
 var Text_default = Text;
 export {

package/dist/esm/components/builtin/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Text/Text.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef } from 'react'\nimport { RichTextV2ControlValue } from '../../../runtimes/react/controls/rich-text-v2'\n\ntype Props = {\n  id?: string\n  text?: RichTextV2ControlValue\n  width?: string\n  margin?: string\n}\n\nconst Text = forwardRef<HTMLDivElement, Props>(({ id, text, width, margin }, ref) => {\n  return (\n    <div id={id} ref={ref} className={cx(width, margin)}>\n      {text}\n    </div>\n  )\n})\n\nexport default Text\n"],"mappings":"AAaI;AAbJ,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAU3B,MAAM,OAAO,WAAkC,CAAC,EAAE,IAAI,MAAM,OAAO,OAAO,GAAG,QAAQ;AACnF,SACE,oBAAC,SAAI,IAAQ,KAAU,WAAW,GAAG,OAAO,MAAM,GAC/C,gBACH;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { RichTextV2ControlValue } from '../../../runtimes/react/controls/rich-text-v2'\nimport clsx from 'clsx'\n\ntype Props = {\n  id?: string\n  text?: RichTextV2ControlValue\n  width?: string\n  margin?: string\n}\n\nconst Text = forwardRef<HTMLDivElement, Props>(({ id, text, width, margin }, ref) => {\n  return (\n    <div id={id} ref={ref} className={clsx(width, margin)}>\n      {text}\n    </div>\n  )\n})\n\nexport default Text\n"],"mappings":"AAaI;AAbJ,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AASjB,MAAM,OAAO,WAAkC,CAAC,EAAE,IAAI,MAAM,OAAO,OAAO,GAAG,QAAQ;AACnF,SACE,oBAAC,SAAI,IAAQ,KAAU,WAAW,KAAK,OAAO,MAAM,GACjD,gBACH;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}

package/dist/esm/components/builtin/Video/Video.js

@@ -1,10 +1,9 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from "react";
 import { ReactPlayer } from "../../shared/react-player";
-import { useStyle } from "../../../runtimes/react/use-style";
 import { placeholders } from "../../utils/placeholders";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const ASPECT_RATIO = 16 / 9;
 const Video = forwardRef(function Video2({ id, video, width, margin, borderRadius }, ref) {
   const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url);
@@ -12,35 +11,31 @@ const Video = forwardRef(function Video2({ id, video, width, margin, borderRadiu
   useEffect(() => {
     setShouldRenderReactPlayer(true);
   }, []);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      id,
-      className: cx(
-        useStyle({ display: "flex", flexDirection: "column", overflow: "hidden" }),
-        width,
-        margin,
-        borderRadius
-      ),
-      children: /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingTop: `${100 / ASPECT_RATIO}%` }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: shouldRenderReactPlayer && canPlayUrl === true ? /* @__PURE__ */ jsx(
-        ReactPlayer,
-        {
-          ...video,
-          width: "100%",
-          height: "100%",
-          config: {
-            vimeo: { playerOptions: { background: video != null && !video.controls } },
-            wistia: {
-              options: {
-                endVideoBehavior: video != null && video.loop === true ? "loop" : "default"
-              }
+  const styles = composeStyles(
+    useStyle({ display: "flex", flexDirection: "column", overflow: "hidden" }),
+    width,
+    margin,
+    borderRadius
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ref, id, className: styles.className, children: /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingTop: `${100 / ASPECT_RATIO}%` }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: shouldRenderReactPlayer && canPlayUrl === true ? /* @__PURE__ */ jsx(
+      ReactPlayer,
+      {
+        ...video,
+        width: "100%",
+        height: "100%",
+        config: {
+          vimeo: { playerOptions: { background: video != null && !video.controls } },
+          wistia: {
+            options: {
+              endVideoBehavior: video != null && video.loop === true ? "loop" : "default"
             }
           }
         }
-      ) : /* @__PURE__ */ jsx("img", { width: "100%", src: placeholders.video.src, alt: "Video Placeholder" }) }) })
-    }
-  );
+      }
+    ) : /* @__PURE__ */ jsx("img", { width: "100%", src: placeholders.video.src, alt: "Video Placeholder" }) }) }) })
+  ] });
 });
 var Video_default = Video;
 export {

package/dist/esm/components/builtin/Video/Video.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Video/Video.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { forwardRef, Ref, useEffect, useState } from 'react'\n\nimport { ReactPlayer } from '../../shared/react-player'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\nimport { VideoData } from '@makeswift/prop-controllers'\n\ntype Props = {\n  id?: string\n  video?: VideoData\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {shouldRenderReactPlayer && canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"mappings":";AAgDY;AA9CZ,SAAS,UAAU;AACnB,SAAS,YAAiB,WAAW,gBAAgB;AAErD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAW7B,MAAM,eAAe,KAAK;AAE1B,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,OAAO,QAAQ,aAAa,GACzC,KACA;AACA,QAAM,aAAa,SAAS,MAAM,OAAO,QAAQ,YAAY,QAAQ,MAAM,GAAG;AAI9E,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAAS,KAAK;AAE5E,YAAU,MAAM;AACd,+BAA2B,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,QAAQ,eAAe,UAAU,UAAU,SAAS,CAAC;AAAA,QACzE;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,GAAG,MAAM,YAAY,IAAI,GACvE,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE,GACtE,qCAA2B,eAAe,OACzC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,OAAO,EAAE,eAAe,EAAE,YAAY,SAAS,QAAQ,CAAC,MAAM,SAAS,EAAE;AAAA,YACzE,QAAQ;AAAA,cACN,SAAS;AAAA,gBACP,kBAAkB,SAAS,QAAQ,MAAM,SAAS,OAAO,SAAS;AAAA,cACpE;AAAA,YACF;AAAA,UACF;AAAA;AAAA,MACF,IAEA,oBAAC,SAAI,OAAM,QAAO,KAAK,aAAa,MAAM,KAAK,KAAI,qBAAoB,GAE3E,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Video"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Video/Video.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, Ref, useEffect, useState } from 'react'\n\nimport { ReactPlayer } from '../../shared/react-player'\nimport { placeholders } from '../../utils/placeholders'\nimport { VideoData } from '@makeswift/prop-controllers'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  id?: string\n  video?: VideoData\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  const styles = composeStyles(\n    useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n    width,\n    margin,\n    borderRadius,\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <div ref={ref} id={id} className={styles.className}>\n        <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n            {shouldRenderReactPlayer && canPlayUrl === true ? (\n              <ReactPlayer\n                {...video}\n                width=\"100%\"\n                height=\"100%\"\n                config={{\n                  vimeo: { playerOptions: { background: video != null && !video.controls } },\n                  wistia: {\n                    options: {\n                      endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                    },\n                  },\n                }}\n              />\n            ) : (\n              <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n            )}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n})\n\nexport default Video\n"],"mappings":";AAyCI,mBAMU,KANV;AAvCJ,SAAS,YAAiB,WAAW,gBAAgB;AAErD,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,SAAS,eAAe,gBAAgB;AAUxC,MAAM,eAAe,KAAK;AAE1B,MAAM,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,OAAO,QAAQ,aAAa,GACzC,KACA;AACA,QAAM,aAAa,SAAS,MAAM,OAAO,QAAQ,YAAY,QAAQ,MAAM,GAAG;AAI9E,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAAS,KAAK;AAE5E,YAAU,MAAM;AACd,+BAA2B,IAAI;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,SAAS,QAAQ,eAAe,UAAU,UAAU,SAAS,CAAC;AAAA,IACzE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAI,KAAU,IAAQ,WAAW,OAAO,WACvC,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,YAAY,GAAG,MAAM,YAAY,IAAI,GACvE,8BAAC,SAAI,OAAO,EAAE,UAAU,YAAY,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,EAAE,GACtE,qCAA2B,eAAe,OACzC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAM;AAAA,QACN,QAAO;AAAA,QACP,QAAQ;AAAA,UACN,OAAO,EAAE,eAAe,EAAE,YAAY,SAAS,QAAQ,CAAC,MAAM,SAAS,EAAE;AAAA,UACzE,QAAQ;AAAA,YACN,SAAS;AAAA,cACP,kBAAkB,SAAS,QAAQ,MAAM,SAAS,OAAO,SAAS;AAAA,YACpE;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF,IAEA,oBAAC,SAAI,OAAM,QAAO,KAAK,aAAa,MAAM,KAAK,KAAI,qBAAoB,GAE3E,GACF,GACF;AAAA,KACF;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Video"]}

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

@@ -1,53 +1,48 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
 import {
   useState,
   useRef,
   forwardRef
 } from "react";
 import { ReactPlayer } from "../../../react-player";
-import { useStyle } from "../../../../../runtimes/react/use-style";
 import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
+import { composeStyles, useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
 const Container = forwardRef(function Container2({ className, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          pointerEvents: "none",
-          overflow: "hidden"
-        }),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      overflow: "hidden"
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 function Mask({
   backgroundColor,
   visible
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: useStyle({
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: backgroundColor,
-        opacity: visible ? 1 : 0,
-        transition: "opacity 1s"
-      })
-    }
-  );
+  const { className, styleElement } = useStyle({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: backgroundColor,
+    opacity: visible ? 1 : 0,
+    transition: "opacity 1s"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("div", { className })
+  ] });
 }
 const getScale = (element, aspectRatio, zoom) => {
   const { offsetWidth: width, offsetHeight: height } = element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport {\n  useState,\n  useRef,\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\n\nimport { ReactPlayer } from '../../../react-player'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          pointerEvents: 'none',\n          overflow: 'hidden',\n        }),\n        className,\n      )}\n    />\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  return (\n    <div\n      className={useStyle({\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: backgroundColor,\n        opacity: visible ? 1 : 0,\n        transition: 'opacity 1s',\n      })}\n    />\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): ReactNode {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          playsinline={true}\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container"]}
+{"version":3,"sources":["../../../../../../../src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\n\nimport { ReactPlayer } from '../../../react-player'\n\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { composeStyles, useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\nconst Container = forwardRef(function Container(\n  { className, ...restOfProps }: ComponentPropsWithoutRef<'div'>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const styles = composeStyles(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      pointerEvents: 'none',\n      overflow: 'hidden',\n    }),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} ref={ref} className={styles.className} />\n    </>\n  )\n})\n\nfunction Mask({\n  backgroundColor,\n  visible,\n}: {\n  backgroundColor: string | undefined\n  visible: boolean\n}) {\n  const { className, styleElement } = useStyle({\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    background: backgroundColor,\n    opacity: visible ? 1 : 0,\n    transition: 'opacity 1s',\n  })\n  return (\n    <>\n      {styleElement}\n      <div className={className} />\n    </>\n  )\n}\n\nconst getScale = (element: HTMLElement, aspectRatio: number, zoom: number) => {\n  const { offsetWidth: width, offsetHeight: height } = element\n  const computedAspectRatio = width / height\n\n  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom\n}\n\ntype Props = {\n  url?: string\n  aspectRatio?: number\n  zoom?: number\n  opacity?: number\n  maskColor?: string\n}\n\nexport default function BackgroundVideo({\n  url = '',\n  aspectRatio = 16 / 9,\n  zoom = 1,\n  maskColor,\n  opacity,\n}: Props): ReactNode {\n  const [ready, setReady] = useState(false)\n  const [scale, setScale] = useState(1)\n  const container = useRef<HTMLDivElement>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: containerEl } = container\n\n    if (!containerEl) return undefined\n\n    const { defaultView } = containerEl.ownerDocument\n    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom))\n\n    handleResize()\n\n    defaultView!.addEventListener('resize', handleResize)\n\n    return () => defaultView!.removeEventListener('resize', handleResize)\n  }, [aspectRatio, zoom])\n\n  if (!ReactPlayer.canPlay(url)) return <></>\n\n  return (\n    <Container ref={container}>\n      {container.current && (\n        <ReactPlayer\n          url={url}\n          config={{\n            vimeo: { playerOptions: { background: true } },\n            youtube: {\n              playerVars: {\n                origin: container.current.ownerDocument.defaultView?.location.origin,\n              },\n            },\n            wistia: {\n              options: {\n                endVideoBehavior: 'loop',\n                playbackRateControl: false,\n                playbar: false,\n                playButton: false,\n                volumeControl: false,\n                fullscreenButton: false,\n                muted: true,\n              },\n            },\n          }}\n          playing\n          loop\n          muted\n          playsinline={true}\n          controls={false}\n          onReady={() => setReady(true)}\n          style={{\n            transform: `scale3d(${scale}, ${scale}, 1)`,\n            opacity,\n          }}\n          width=\"100%\"\n          height=\"100%\"\n        />\n      )}\n      <Mask backgroundColor={maskColor} visible={!ready} />\n    </Container>\n  )\n}\n"],"mappings":"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","names":["Container"]}