@makeswift/runtime 0.0.0-20230106212652 → 0.0.0-20230107201938

package/dist/Box.cjs.js

@@ -32,23 +32,24 @@ var __objRest = (source, exclude) => {
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
+var framerMotion = require("framer-motion");
 var css = require("@emotion/css");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
-var gridItem = require("./grid-item.cjs.js");
+require("use-sync-external-store/shim");
+require("./slot.cjs.js");
+var useMediaQuery = require("./useMediaQuery.cjs.js");
 var boxModels = require("./box-models.cjs.js");
+var gridItem = require("./grid-item.cjs.js");
 require("use-sync-external-store/shim/with-selector");
 require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
-require("./slot.cjs.js");
 require("./control.cjs.js");
 require("next/dynamic");
-require("@apollo/client");
-require("@apollo/client/link/batch-http");
 require("slate");
-require("./graphql.cjs.js");
+require("./types.cjs.js");
 require("./text-input.cjs.js");
 require("./combobox.cjs.js");
 require("color");
@@ -64,10 +65,9 @@ require("http-proxy");
 require("set-cookie-parser");
 require("uuid/v4");
 require("corporate-ipsum");
+require("css-box-model");
 require("next/image");
 require("react-player");
-require("./useMediaQuery.cjs.js");
-require("css-box-model");
 var Placeholder = React.forwardRef(function Placeholder2(_a, ref) {
   var _b = _a, {
     hide = false
@@ -107,6 +107,238 @@ var Placeholder = React.forwardRef(function Placeholder2(_a, ref) {
     })
   }));
 });
+const defaultExitedProps = {
+  opacity: 0,
+  x: 0,
+  y: 0,
+  scale: 1
+};
+const boxAnimations = {
+  none: {
+    entered: {
+      opacity: 1
+    },
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      opacity: 1
+    }),
+    transition: {}
+  },
+  fadeIn: {
+    exited: defaultExitedProps,
+    entered: {
+      opacity: 1
+    },
+    transition: {}
+  },
+  fadeLeft: {
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      x: 60
+    }),
+    entered: {
+      opacity: 1,
+      x: 0
+    },
+    transition: {
+      x: {
+        type: "tween",
+        ease: [0.165, 0.84, 0.44, 1]
+      }
+    }
+  },
+  fadeRight: {
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      x: -60
+    }),
+    entered: {
+      opacity: 1,
+      x: 0
+    },
+    transition: {
+      x: {
+        type: "tween",
+        ease: [0.165, 0.84, 0.44, 1]
+      }
+    }
+  },
+  fadeUp: {
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      y: 80
+    }),
+    entered: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: {
+        type: "tween",
+        ease: [0.165, 0.84, 0.44, 1]
+      }
+    }
+  },
+  fadeDown: {
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      y: -80
+    }),
+    entered: {
+      opacity: 1,
+      y: 0
+    },
+    transition: {
+      y: {
+        type: "tween",
+        ease: [0.165, 0.84, 0.44, 1]
+      }
+    }
+  },
+  blurIn: {
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      filter: "blur(20px)"
+    }),
+    entered: {
+      opacity: 1,
+      filter: "blur(0px)"
+    },
+    transition: {}
+  },
+  scaleDown: {
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      scale: 1.2
+    }),
+    entered: {
+      opacity: 1,
+      scale: 1
+    },
+    transition: {
+      scale: {
+        type: "tween",
+        ease: [0.165, 0.84, 0.44, 1]
+      }
+    }
+  },
+  scaleUp: {
+    exited: __spreadProps(__spreadValues({}, defaultExitedProps), {
+      scale: 0.75
+    }),
+    entered: {
+      opacity: 1,
+      scale: 1
+    },
+    transition: {
+      scale: {
+        type: "tween",
+        ease: [0.165, 0.84, 0.44, 1]
+      }
+    }
+  }
+};
+const mergeCustomTransitionWithDefault = (transitions, props) => transitions ? Object.keys(transitions).reduce((a, c) => __spreadProps(__spreadValues({}, a), {
+  [c]: __spreadValues(__spreadValues({}, transitions[c]), props)
+}), props) : props;
+const useElementOnScreen = (element, options) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(intersectionCallback, options);
+    if (element)
+      observer.observe(element);
+    return () => {
+      if (element)
+        observer.unobserve(element);
+    };
+    function intersectionCallback([entry]) {
+      if (entry == null ? void 0 : entry.isIntersecting) {
+        setIsVisible(true);
+      }
+    }
+  }, [element, options]);
+  return isVisible;
+};
+const useBoxAnimations = (_c) => {
+  var _d = _c, {
+    boxElement,
+    elements
+  } = _d, props = __objRest(_d, [
+    "boxElement",
+    "elements"
+  ]);
+  const reducedMotion = framerMotion.useReducedMotion();
+  const boxAnimateType = useMediaQuery.useMediaQuery(props.boxAnimateType) || next.DEFAULT_BOX_ANIMATE_TYPE;
+  const boxAnimateDuration = useMediaQuery.useMediaQuery(props.boxAnimateDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
+  const boxAnimateDelay = useMediaQuery.useMediaQuery(props.boxAnimateDelay) || next.DEFAULT_BOX_ANIMATE_DELAY;
+  const itemAnimateType = useMediaQuery.useMediaQuery(props.itemAnimateType) || next.DEFAULT_ITEM_ANIMATE_TYPE;
+  const itemAnimateDuration = useMediaQuery.useMediaQuery(props.itemAnimateDuration) || next.DEFAULT_ITEM_ANIMATE_DURATION;
+  const itemAnimateDelay = useMediaQuery.useMediaQuery(props.itemAnimateDelay) || next.DEFAULT_ITEM_ANIMATE_DELAY;
+  const itemStaggerDuration = useMediaQuery.useMediaQuery(props.itemStaggerDuration) || next.DEFAULT_ITEM_STAGGER_DURATION;
+  const isBoxVisible = useElementOnScreen(boxElement, {
+    root: null,
+    rootMargin: `0px 0px -10% 0px`,
+    threshold: 0.2
+  });
+  const itemControls = framerMotion.useAnimation();
+  const boxControls = framerMotion.useAnimation();
+  const setSequence = React.useCallback((variant) => {
+    boxControls.stop();
+    itemControls.stop();
+    boxControls.set(variant);
+    itemControls.set(variant);
+  }, [boxControls, itemControls]);
+  const playSequence = React.useCallback(() => {
+    boxControls.stop();
+    itemControls.stop();
+    boxControls.set("exited");
+    itemControls.set("exited");
+    boxControls.start("entered");
+    itemControls.start("entered");
+  }, [boxControls, itemControls]);
+  React.useEffect(() => {
+    if (isBoxVisible) {
+      setSequence("entered");
+    }
+  }, [elements == null ? void 0 : elements.map((e) => e.key).sort().join(), setSequence]);
+  React.useEffect(() => {
+    if (isBoxVisible) {
+      playSequence();
+    }
+  }, [isBoxVisible, boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration, reducedMotion, playSequence]);
+  const boxVariant = boxAnimations[boxAnimateType];
+  const itemVariant = boxAnimations[itemAnimateType];
+  return {
+    initial: {
+      container: reducedMotion ? "entered" : "exited",
+      parent: reducedMotion ? "entered" : "exited"
+    },
+    animate: {
+      container: reducedMotion ? void 0 : boxControls,
+      parent: reducedMotion ? void 0 : itemControls
+    },
+    variants: {
+      container: {
+        exited: boxVariant.exited,
+        entered: boxVariant.entered
+      },
+      child: {
+        exited: itemVariant.exited,
+        entered: itemVariant.entered
+      }
+    },
+    transition: {
+      container: mergeCustomTransitionWithDefault(boxVariant.transition, {
+        delay: boxAnimateDelay,
+        duration: boxAnimateDuration
+      }),
+      parent: {
+        delayChildren: itemAnimateDelay,
+        staggerChildren: itemStaggerDuration,
+        duration: itemAnimateDuration
+      },
+      child: mergeCustomTransitionWithDefault(itemVariant.transition, {
+        duration: itemAnimateDuration
+      })
+    },
+    key: {
+      container: boxAnimateType + boxAnimateDuration + boxAnimateDelay + itemAnimateType + itemAnimateDuration + itemAnimateDelay + itemStaggerDuration + reducedMotion
+    }
+  };
+};
 const Box = React.forwardRef(function Box2({
   id,
   backgrounds,
@@ -132,6 +364,8 @@ const Box = React.forwardRef(function Box2({
 }, ref) {
   const innerRef = React.useRef(null);
   const [boxElement, setBoxElement] = React.useState(null);
+  const hasAnimations = boxAnimateType != null || itemAnimateType != null;
+  const Grid = hasAnimations ? framerMotion.motion.div : "div";
   React.useImperativeHandle(ref, () => ({
     getBoxModel() {
       var _a, _b, _c, _d;
@@ -172,52 +406,65 @@ const Box = React.forwardRef(function Box2({
     alignItems
   })));
   const {
-    exited,
-    entered
-  } = gridItem.useAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay);
-  const isEntered = gridItem.useIsEntered(boxElement, [boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration]);
-  return /* @__PURE__ */ jsxRuntime.jsx(gridItem.EnteredContext.Provider, {
-    value: {
-      isEntered
-    },
-    children: /* @__PURE__ */ jsxRuntime.jsx(gridItem.BackgroundsContainer, {
-      ref: setBoxElement,
-      id,
-      className: css.cx(width, margin, borderRadius, next.useStyle({
-        display: "flex"
-      }), next.useStyle(next.responsiveStyle([height], ([alignSelf = "auto"]) => ({
-        alignSelf
-      }))), exited, isEntered && entered),
-      backgrounds,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ref: innerRef,
-        className: css.cx(padding, boxShadow, border, next.useStyle({
-          display: "flex",
-          flexWrap: "wrap",
-          width: "100%"
-        }), next.useStyle(next.responsiveStyle([verticalAlign], ([alignContent = "flex-start"]) => ({
-          alignContent
-        })))),
-        children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(gridItem.GridItem, {
-          className: gridItemClassName,
-          grid: children.columns,
-          index,
-          itemAnimateType,
-          itemAnimateDuration,
-          itemAnimateDelay,
-          itemStaggerDuration,
-          isEntered,
-          columnGap,
-          rowGap,
-          children: /* @__PURE__ */ jsxRuntime.jsx(next.Element, {
-            element: child
-          })
-        }, child.key)) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {
-          hide: hidePlaceholder
+    initial,
+    animate,
+    variants,
+    transition,
+    key
+  } = useBoxAnimations({
+    boxAnimateType,
+    boxAnimateDuration,
+    boxAnimateDelay,
+    itemAnimateDelay,
+    itemAnimateType,
+    itemAnimateDuration,
+    itemStaggerDuration,
+    boxElement,
+    elements: children == null ? void 0 : children.elements
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(gridItem.BackgroundsContainer, {
+    ref: setBoxElement,
+    hasAnimations,
+    id,
+    className: css.cx(width, margin, borderRadius, next.useStyle({
+      display: "flex"
+    }), next.useStyle(next.responsiveStyle([height], ([alignSelf = "auto"]) => ({
+      alignSelf
+    })))),
+    backgrounds,
+    animate: animate == null ? void 0 : animate.container,
+    initial: initial == null ? void 0 : initial.container,
+    variants: variants == null ? void 0 : variants.container,
+    transition: transition == null ? void 0 : transition.container,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Grid, {
+      ref: innerRef,
+      className: css.cx(padding, boxShadow, border, next.useStyle({
+        display: "flex",
+        flexWrap: "wrap",
+        width: "100%"
+      }), next.useStyle(next.responsiveStyle([verticalAlign], ([alignContent = "flex-start"]) => ({
+        alignContent
+      })))),
+      animate: animate == null ? void 0 : animate.parent,
+      initial: initial == null ? void 0 : initial.parent,
+      transition: transition == null ? void 0 : transition.parent,
+      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(gridItem.GridItem, {
+        as: hasAnimations ? framerMotion.motion.div : "div",
+        className: gridItemClassName,
+        grid: children.columns,
+        index,
+        columnGap,
+        rowGap,
+        variants: variants == null ? void 0 : variants.child,
+        transition: transition == null ? void 0 : transition.child,
+        children: /* @__PURE__ */ jsxRuntime.jsx(next.Element, {
+          element: child
         })
+      }, child.key)) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {
+        hide: hidePlaceholder
       })
     })
-  });
+  }, key == null ? void 0 : key.container);
 });
 exports["default"] = Box;
 //# sourceMappingURL=Box.cjs.js.map

package/dist/Box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { EnteredContext, useIsEntered } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { BoxAnimateIn } from './constants'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useAnimation } from './animations'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const { exited, entered } = useAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay)\n\n  const isEntered = useIsEntered(boxElement, [\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  ])\n\n  return (\n    <EnteredContext.Provider value={{ isEntered }}>\n      <BackgroundsContainer\n        ref={setBoxElement}\n        id={id}\n        className={cx(\n          width,\n          margin,\n          borderRadius,\n          useStyle({ display: 'flex' }),\n          useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n          exited,\n          isEntered && entered,\n        )}\n        backgrounds={backgrounds}\n      >\n        <div\n          ref={innerRef}\n          className={cx(\n            padding,\n            boxShadow,\n            border,\n            useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n            useStyle(\n              responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n                alignContent,\n              })),\n            ),\n          )}\n        >\n          {children && children.elements.length > 0 ? (\n            children.elements.map((child, index) => (\n              <GridItem\n                key={child.key}\n                className={gridItemClassName}\n                grid={children.columns}\n                index={index}\n                itemAnimateType={itemAnimateType}\n                itemAnimateDuration={itemAnimateDuration}\n                itemAnimateDelay={itemAnimateDelay}\n                itemStaggerDuration={itemStaggerDuration}\n                isEntered={isEntered}\n                columnGap={columnGap}\n                rowGap={rowGap}\n              >\n                <Element element={child} />\n              </GridItem>\n            ))\n          ) : (\n            <Placeholder hide={hidePlaceholder} />\n          )}\n        </div>\n      </BackgroundsContainer>\n    </EnteredContext.Provider>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElement","setBoxElement","useState","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","exited","entered","useAnimation","isEntered","useIsEntered","_jsx","EnteredContext","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element","key"],"mappings":"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"}
+{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/animations.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import {\n  TargetAndTransition,\n  Transition,\n  useAnimation,\n  useReducedMotion,\n  Variants,\n  MotionProps,\n} from 'framer-motion'\nimport { TransitionMap } from 'framer-motion/types/types'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { ResponsiveValue } from '../../../prop-controllers'\nimport { useMediaQuery } from '../../hooks'\nimport { Element } from '../../../state/react-page'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_BOX_ANIMATE_TYPE,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_TYPE,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\n\nconst defaultExitedProps = {\n  opacity: 0,\n  x: 0,\n  y: 0,\n  scale: 1,\n}\n\ntype BoxAnimationVariants = {\n  entered: TargetAndTransition\n  exited: TargetAndTransition\n}\n\nexport const boxAnimations: {\n  [key in BoxAnimateIn]: {\n    transition: TransitionMap\n  } & BoxAnimationVariants\n} = {\n  none: {\n    entered: {\n      opacity: 1,\n    },\n    exited: {\n      ...defaultExitedProps,\n      opacity: 1,\n    },\n    transition: {},\n  },\n  fadeIn: {\n    exited: defaultExitedProps,\n    entered: {\n      opacity: 1,\n    },\n    transition: {},\n  },\n  fadeLeft: {\n    exited: {\n      ...defaultExitedProps,\n      x: 60,\n    },\n    entered: {\n      opacity: 1,\n      x: 0,\n    },\n    transition: {\n      x: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeRight: {\n    exited: {\n      ...defaultExitedProps,\n      x: -60,\n    },\n    entered: {\n      opacity: 1,\n      x: 0,\n    },\n    transition: {\n      x: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeUp: {\n    exited: {\n      ...defaultExitedProps,\n      y: 80,\n    },\n    entered: {\n      opacity: 1,\n      y: 0,\n    },\n    transition: {\n      y: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  fadeDown: {\n    exited: {\n      ...defaultExitedProps,\n      y: -80,\n    },\n    entered: {\n      opacity: 1,\n      y: 0,\n    },\n    transition: {\n      y: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  blurIn: {\n    exited: {\n      ...defaultExitedProps,\n      filter: 'blur(20px)',\n    },\n    entered: {\n      opacity: 1,\n      filter: 'blur(0px)',\n    },\n    transition: {},\n  },\n  scaleDown: {\n    exited: {\n      ...defaultExitedProps,\n      scale: 1.2,\n    },\n    entered: {\n      opacity: 1,\n      scale: 1,\n    },\n    transition: {\n      scale: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n  scaleUp: {\n    exited: {\n      ...defaultExitedProps,\n      scale: 0.75,\n    },\n    entered: {\n      opacity: 1,\n      scale: 1,\n    },\n    transition: {\n      scale: {\n        type: 'tween',\n        ease: [0.165, 0.84, 0.44, 1],\n      },\n    },\n  },\n}\n\nconst mergeCustomTransitionWithDefault = (\n  transitions: TransitionMap,\n  props: Transition,\n): TransitionMap | Transition =>\n  transitions\n    ? Object.keys(transitions).reduce(\n        (a, c) => ({\n          ...a,\n          [c]: {\n            ...transitions[c as string],\n            ...props,\n          },\n        }),\n        props,\n      )\n    : props\n\nexport type BoxAnimationType = {\n  containerAnimationProps: {\n    transition: Transition\n    variants: Variants\n  }\n  parentAnimationProps: {\n    transition: Transition\n  }\n  childAnimationProps: {\n    transition: Transition\n    variants: Variants\n  }\n}\n\nconst useElementOnScreen = (element: HTMLElement | null, options: IntersectionObserverInit) => {\n  const [isVisible, setIsVisible] = useState(false)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(intersectionCallback, options)\n\n    if (element) observer.observe(element)\n\n    return () => {\n      if (element) observer.unobserve(element)\n    }\n\n    function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n      if (entry?.isIntersecting) {\n        setIsVisible(true)\n      }\n    }\n  }, [element, options])\n\n  return isVisible\n}\n\ntype UseBoxAnimationsPayload = {\n  initial?: { container: MotionProps['initial']; parent: MotionProps['initial'] }\n  animate?: { container: MotionProps['animate']; parent: MotionProps['animate'] }\n  variants?: { container: MotionProps['variants']; child: MotionProps['variants'] }\n  transition?: {\n    container: MotionProps['transition']\n    parent: MotionProps['transition']\n    child: MotionProps['transition']\n  }\n  key?: { container: string }\n}\n\nexport const useBoxAnimations = ({\n  boxElement,\n  elements,\n  ...props\n}: {\n  boxAnimateType: ResponsiveValue<BoxAnimateIn> | undefined\n  boxAnimateDuration: ResponsiveValue<number> | undefined\n  boxAnimateDelay: ResponsiveValue<number> | undefined\n  itemAnimateType: ResponsiveValue<BoxAnimateIn> | undefined\n  itemAnimateDuration: ResponsiveValue<number> | undefined\n  itemAnimateDelay: ResponsiveValue<number> | undefined\n  itemStaggerDuration: ResponsiveValue<number> | undefined\n  boxElement: HTMLElement | null\n  elements: Element[] | undefined\n}): UseBoxAnimationsPayload => {\n  const reducedMotion = useReducedMotion()\n  const boxAnimateType = useMediaQuery(props.boxAnimateType) || DEFAULT_BOX_ANIMATE_TYPE\n  const boxAnimateDuration = useMediaQuery(props.boxAnimateDuration) || DEFAULT_BOX_ANIMATE_DURATION\n  const boxAnimateDelay = useMediaQuery(props.boxAnimateDelay) || DEFAULT_BOX_ANIMATE_DELAY\n  const itemAnimateType = useMediaQuery(props.itemAnimateType) || DEFAULT_ITEM_ANIMATE_TYPE\n  const itemAnimateDuration =\n    useMediaQuery(props.itemAnimateDuration) || DEFAULT_ITEM_ANIMATE_DURATION\n  const itemAnimateDelay = useMediaQuery(props.itemAnimateDelay) || DEFAULT_ITEM_ANIMATE_DELAY\n  const itemStaggerDuration =\n    useMediaQuery(props.itemStaggerDuration) || DEFAULT_ITEM_STAGGER_DURATION\n\n  const isBoxVisible = useElementOnScreen(boxElement, {\n    root: null,\n    rootMargin: `0px 0px -10% 0px`,\n    threshold: 0.2,\n  })\n\n  const itemControls = useAnimation()\n  const boxControls = useAnimation()\n\n  const setSequence = useCallback(\n    (variant: keyof BoxAnimationVariants) => {\n      boxControls.stop()\n      itemControls.stop()\n      boxControls.set(variant)\n      itemControls.set(variant)\n    },\n    [boxControls, itemControls],\n  )\n\n  const playSequence = useCallback(() => {\n    boxControls.stop()\n    itemControls.stop()\n    boxControls.set('exited')\n    itemControls.set('exited')\n    boxControls.start('entered')\n    itemControls.start('entered')\n  }, [boxControls, itemControls])\n\n  useEffect(() => {\n    if (isBoxVisible) {\n      setSequence('entered')\n    }\n  }, [\n    elements\n      ?.map(e => e.key)\n      .sort()\n      .join(),\n    setSequence,\n  ])\n\n  useEffect(() => {\n    if (isBoxVisible) {\n      playSequence()\n    }\n  }, [\n    isBoxVisible,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n    reducedMotion,\n    playSequence,\n  ])\n\n  const boxVariant = boxAnimations[boxAnimateType]\n  const itemVariant = boxAnimations[itemAnimateType]\n\n  return {\n    initial: {\n      container: reducedMotion ? 'entered' : 'exited',\n      parent: reducedMotion ? 'entered' : 'exited',\n    },\n    animate: {\n      container: reducedMotion ? undefined : boxControls,\n      parent: reducedMotion ? undefined : itemControls,\n    },\n    variants: {\n      container: {\n        exited: boxVariant.exited,\n        entered: boxVariant.entered,\n      },\n      child: {\n        exited: itemVariant.exited,\n        entered: itemVariant.entered,\n      },\n    },\n    transition: {\n      container: mergeCustomTransitionWithDefault(boxVariant.transition, {\n        delay: boxAnimateDelay,\n        duration: boxAnimateDuration,\n      }),\n      parent: {\n        delayChildren: itemAnimateDelay,\n        staggerChildren: itemStaggerDuration,\n        duration: itemAnimateDuration,\n      },\n      child: mergeCustomTransitionWithDefault(itemVariant.transition, {\n        duration: itemAnimateDuration,\n      }),\n    },\n    key: {\n      container:\n        boxAnimateType +\n        boxAnimateDuration +\n        boxAnimateDelay +\n        itemAnimateType +\n        itemAnimateDuration +\n        itemAnimateDelay +\n        itemStaggerDuration +\n        reducedMotion,\n    },\n  }\n}\n","import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react'\nimport { motion } from 'framer-motion'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useBoxAnimations } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { BoxAnimateIn } from './constants'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n  const hasAnimations = boxAnimateType != null || itemAnimateType != null\n  const Grid = hasAnimations ? motion.div : 'div'\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const { initial, animate, variants, transition, key } = useBoxAnimations({\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n    boxElement,\n    elements: children?.elements,\n  })\n\n  return (\n    <BackgroundsContainer\n      ref={setBoxElement}\n      hasAnimations={hasAnimations}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n      )}\n      backgrounds={backgrounds}\n      animate={animate?.container}\n      initial={initial?.container}\n      variants={variants?.container}\n      transition={transition?.container}\n      key={key?.container}\n    >\n      <Grid\n        ref={innerRef}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n        animate={animate?.parent}\n        initial={initial?.parent}\n        transition={transition?.parent}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              as={hasAnimations ? motion.div : 'div'}\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              columnGap={columnGap}\n              rowGap={rowGap}\n              // @ts-ignore: `variants` is not a prop for `div`, but it is for `motion.div`.\n              variants={variants?.child}\n              transition={transition?.child}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </Grid>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","defaultExitedProps","opacity","x","y","scale","boxAnimations","none","entered","exited","transition","fadeIn","fadeLeft","type","ease","fadeRight","fadeUp","fadeDown","blurIn","filter","scaleDown","scaleUp","mergeCustomTransitionWithDefault","transitions","props","Object","keys","reduce","a","c","useElementOnScreen","element","options","isVisible","setIsVisible","useState","useEffect","observer","IntersectionObserver","intersectionCallback","observe","unobserve","entry","isIntersecting","useBoxAnimations","boxElement","elements","reducedMotion","useReducedMotion","boxAnimateType","useMediaQuery","DEFAULT_BOX_ANIMATE_TYPE","boxAnimateDuration","DEFAULT_BOX_ANIMATE_DURATION","boxAnimateDelay","DEFAULT_BOX_ANIMATE_DELAY","itemAnimateType","DEFAULT_ITEM_ANIMATE_TYPE","itemAnimateDuration","DEFAULT_ITEM_ANIMATE_DURATION","itemAnimateDelay","DEFAULT_ITEM_ANIMATE_DELAY","itemStaggerDuration","DEFAULT_ITEM_STAGGER_DURATION","isBoxVisible","root","rootMargin","threshold","itemControls","useAnimation","boxControls","setSequence","useCallback","variant","stop","set","playSequence","start","map","e","key","sort","join","boxVariant","itemVariant","initial","container","parent","animate","undefined","variants","child","delay","duration","delayChildren","staggerChildren","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","innerRef","useRef","setBoxElement","hasAnimations","Grid","motion","div","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","length","index","GridItem","columns","Element"],"mappings":"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"}