@makeswift/runtime 0.13.1 → 0.14.1

package/next/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/next/index.js",
+  "module": "../dist/esm/next/index.js",
+  "types": "../dist/types/next/index.d.ts"
+}

package/next/plugin/index.d.ts

@@ -0,0 +1,3 @@
+import MakeswiftNextPlugin from '@makeswift/next-plugin'
+
+export = MakeswiftNextPlugin

package/next/plugin/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../../dist/cjs/next/plugin.js",
+  "types": "./index.d.ts"
+}

package/next/server/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/next/server.js",
+  "module": "../../dist/esm/next/server.js",
+  "types": "../../dist/types/next/server.d.ts"
+}

package/package.json

@@ -1,105 +1,88 @@
 {
   "name": "@makeswift/runtime",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "license": "MIT",
-  "main": "dist/main.cjs",
-  "module": "dist/main.es",
-  "types": "dist/types/src",
   "files": [
     "dist",
-    "prop-controllers.js",
-    "react.js",
-    "box-model.js",
-    "components.js",
-    "api.js",
-    "next.js",
-    "next/plugin.js",
-    "builder.js",
-    "controls.js",
-    "slate.js",
-    "state/breakpoints.js"
+    "prop-controllers",
+    "react",
+    "box-model",
+    "components",
+    "api",
+    "next",
+    "builder",
+    "controls",
+    "slate",
+    "state"
   ],
+  "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/main.es.js",
-      "require": "./dist/main.cjs.js"
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
     },
     "./prop-controllers": {
-      "import": "./dist/prop-controllers.es.js",
-      "require": "./dist/prop-controllers.cjs.js"
+      "require": "./dist/cjs/prop-controllers/index.js",
+      "import": "./dist/esm/prop-controllers/index.js",
+      "types": "./dist/types/prop-controllers/index.d.ts"
     },
     "./react": {
-      "import": "./dist/react.es.js",
-      "require": "./dist/react.cjs.js"
+      "require": "./dist/cjs/react.js",
+      "import": "./dist/esm/react.js",
+      "types": "./dist/types/react.d.ts"
     },
     "./box-model": {
-      "import": "./dist/box-model.es.js",
-      "require": "./dist/box-model.cjs.js"
+      "require": "./dist/cjs/box-model.js",
+      "import": "./dist/esm/box-model.js",
+      "types": "./dist/types/box-model.d.ts"
     },
     "./components": {
-      "import": "./dist/components.es.js",
-      "require": "./dist/components.cjs.js"
+      "require": "./dist/cjs/components/index.js",
+      "import": "./dist/esm/components/index.js",
+      "types": "./dist/types/components/index.d.ts"
     },
     "./api": {
-      "import": "./dist/api.es.js",
-      "require": "./dist/api.cjs.js"
+      "require": "./dist/cjs/api/index.js",
+      "import": "./dist/esm/api/index.js",
+      "types": "./dist/types/api/index.d.ts"
     },
     "./next": {
-      "import": "./dist/next.es.js",
-      "require": "./dist/next.cjs.js"
+      "require": "./dist/cjs/next/index.js",
+      "import": "./dist/esm/next/index.js",
+      "types": "./dist/types/next/index.d.ts"
+    },
+    "./next/server": {
+      "require": "./dist/cjs/next/server.js",
+      "module": "./dist/esm/next/server.js",
+      "types": "./dist/types/next/server.d.ts"
+    },
+    "./next/plugin": {
+      "require": "./dist/cjs/next/plugin.js",
+      "types": "./next/plugin/index.d.ts"
     },
-    "./next/plugin": "./next/plugin.js",
     "./builder": {
-      "import": "./dist/builder.es.js",
-      "require": "./dist/builder.cjs.js"
+      "require": "./dist/cjs/builder/index.js",
+      "import": "./dist/esm/builder/index.js",
+      "types": "./dist/types/builder/index.d.ts"
     },
     "./controls": {
-      "import": "./dist/controls.es.js",
-      "require": "./dist/controls.cjs.js"
+      "require": "./dist/cjs/controls/index.js",
+      "import": "./dist/esm/controls/index.js",
+      "types": "./dist/types/controls/index.d.ts"
     },
     "./slate": {
-      "import": "./dist/slate.es.js",
-      "require": "./dist/slate.cjs.js"
+      "require": "./dist/cjs/slate/index.js",
+      "import": "./dist/esm/slate/index.js",
+      "types": "./dist/types/slate/index.d.ts"
     },
     "./state/breakpoints": {
-      "import": "./dist/state/breakpoints.es.js",
-      "require": "./dist/state/breakpoints.cjs.js"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "prop-controllers": [
-        "dist/types/src/prop-controllers/index.d.ts"
-      ],
-      "react": [
-        "dist/types/src/react.d.ts"
-      ],
-      "box-model": [
-        "dist/types/src/box-model.d.ts"
-      ],
-      "components": [
-        "dist/types/src/components/index.d.ts"
-      ],
-      "api": [
-        "dist/types/src/api/index.d.ts"
-      ],
-      "next": [
-        "dist/types/src/next/index.d.ts"
-      ],
-      "builder": [
-        "dist/types/src/builder/index.d.ts"
-      ],
-      "controls": [
-        "dist/types/src/controls/index.d.ts"
-      ],
-      "slate": [
-        "dist/types/src/slate/index.d.ts"
-      ],
-      "state/breakpoints": [
-        "dist/types/src/state/modules/breakpoints.d.ts"
-      ]
+      "require": "./dist/cjs/state/module/breakpoints.js",
+      "import": "./dist/esm/state/module/breakpoints.js",
+      "types": "./dist/types/state/module/breakpoints.d.ts"
     }
   },
+  "types": "./dist/types/index.d.ts",
   "peerDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -166,14 +149,12 @@
     "@graphql-codegen/cli": "2.6.2",
     "@graphql-codegen/typescript-document-nodes": "^2.3.12",
     "@graphql-codegen/typescript-operations": "2.3.4",
-    "@svgr/rollup": "^6.2.1",
     "@types/color": "^3.0.2",
     "@types/cors": "^2.8.12",
     "@types/escape-html": "^1.0.2",
     "@types/node": "^17.0.21",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@vitejs/plugin-react": "^1.1.4",
     "concurrently": "^5.3.0",
     "madge": "^6.0.0",
     "next": "14.0.4",
@@ -183,18 +164,17 @@
     "slate": "^0.91.4",
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.91.7",
+    "tsup": "^8.0.1",
     "typescript": "^5.1.6",
-    "vite": "^2.8.6",
     "vitest": "^0.7.4"
   },
   "scripts": {
-    "dev": "concurrently -k 'tsc --watch --preserveWatchOutput' 'vite build --watch'",
+    "dev": "concurrently -k 'tsc --watch --preserveWatchOutput' 'tsup --watch'",
     "clean": "rm -rf dist",
-    "build": "pnpm run clean && tsc && vite build",
-    "preview": "vite preview",
+    "build": "pnpm run clean && tsc && tsup",
     "generate": "graphql-codegen --config codegen.yml",
-    "test": "vitest run --config vite.test.config.ts",
-    "test:watch": "vitest watch --config vite.test.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "madge": "madge --circular --warning --extensions ts,tsx src/ --exclude \"dist/.+\""
   }
 }

package/prop-controllers/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/prop-controllers/index.js",
+  "module": "../dist/esm/prop-controllers/index.js",
+  "types": "../dist/types/prop-controllers/index.d.ts"
+}

package/react/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/react.js",
+  "module": "../dist/esm/react.js",
+  "types": "../dist/types/react.d.ts"
+}

package/slate/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/slate/index.js",
+  "module": "../dist/es/slate/index.js",
+  "types": "../dist/src/types/slate/index.d.ts"
+}

package/state/breakpoints/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/state/modules/breakpoints.js",
+  "module": "../../dist/esm/state/modules/breakpoints.js",
+  "types": "../../dist/types/state/modules/breakpoints.d.ts"
+}

package/api.js

@@ -1 +0,0 @@
-module.exports = require('./dist/api.cjs')

package/box-model.js

@@ -1 +0,0 @@
-module.exports = require('./dist/box-model.cjs')

package/builder.js

@@ -1 +0,0 @@
-module.exports = require('./dist/builder.cjs')

package/components.js

@@ -1 +0,0 @@
-module.exports = require('./dist/components.cjs')

package/controls.js

@@ -1 +0,0 @@
-module.exports = require('./dist/controls.cjs')

package/dist/Box.cjs.js

@@ -1,248 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var React = require("react");
-var css = require("@emotion/css");
-var uuid = require("uuid");
-var next = require("./index.cjs.js");
-var reactPage = require("./react-page.cjs.js");
-var jsxRuntime = require("react/jsx-runtime");
-var index = require("./index.cjs2.js");
-var boxModels = require("./box-models.cjs.js");
-require("use-sync-external-store/shim/with-selector");
-require("next/dynamic");
-require("./actions.cjs.js");
-require("zod");
-require("./number.cjs.js");
-require("./combobox.cjs.js");
-require("ts-pattern");
-require("slate");
-require("escape-html");
-require("slate-hyperscript");
-require("parse5");
-require("is-hotkey");
-require("./breakpoints.cjs.js");
-require("use-sync-external-store/shim");
-require("redux");
-require("redux-thunk");
-require("./types.cjs.js");
-require("color");
-require("scroll-into-view-if-needed");
-require("react-dom");
-require("html-react-parser");
-require("next/head");
-require("@emotion/server/create-instance");
-require("next/document");
-require("cors");
-require("path-to-regexp");
-require("cookie");
-require("http-proxy");
-require("set-cookie-parser");
-require("./constants.cjs.js");
-require("corporate-ipsum");
-require("@emotion/serialize");
-require("@emotion/utils");
-require("./useMediaQuery.cjs.js");
-require("next/image");
-require("./useIsomorphicLayoutEffect.cjs.js");
-require("react-player");
-require("./next-version.cjs.js");
-require("next/package.json");
-require("css-box-model");
-var Placeholder = React.forwardRef(function Placeholder2(_a, ref) {
-  var _b = _a, {
-    hide = false
-  } = _b, restOfProps = __objRest(_b, [
-    "hide"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    style: {
-      visibility: hide ? "hidden" : "initial"
-    },
-    className: reactPage.useStyle({
-      width: "100%",
-      background: "rgba(161, 168, 194, 0.18)",
-      height: 80,
-      padding: 8
-    }),
-    children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "100%",
-      height: "100%",
-      style: {
-        overflow: "visible"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("rect", {
-        x: 0,
-        y: 0,
-        width: "100%",
-        height: "100%",
-        strokeWidth: 2,
-        strokeDasharray: "4 2",
-        fill: "none",
-        stroke: "rgba(161, 168, 194, 0.40)",
-        rx: "4",
-        ry: "4"
-      })
-    })
-  }));
-});
-const Box = React.forwardRef(function Box2({
-  id,
-  backgrounds,
-  width,
-  height,
-  margin,
-  padding,
-  border,
-  children,
-  borderRadius,
-  boxShadow,
-  rowGap,
-  columnGap,
-  hidePlaceholder,
-  verticalAlign,
-  boxAnimateType,
-  boxAnimateDuration,
-  boxAnimateDelay,
-  itemAnimateDelay,
-  itemAnimateType,
-  itemAnimateDuration,
-  itemStaggerDuration
-}, ref) {
-  const innerRef = React.useRef(null);
-  const boxElementObjectRef = React.useRef(null);
-  const [animationClassName, replayAnimation, setElement] = index.useBoxAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType);
-  const boxElementCallbackRef = React.useCallback((current) => {
-    boxElementObjectRef.current = current;
-    setElement(current);
-  }, []);
-  React.useImperativeHandle(ref, () => ({
-    getDomNode() {
-      return boxElementObjectRef.current;
-    },
-    getBoxModel() {
-      var _a, _b, _c, _d;
-      const paddingBoxElement = innerRef.current;
-      const borderBoxElement = innerRef.current;
-      const marginBoxElement = boxElementObjectRef.current;
-      const borderBox = (_a = innerRef.current) == null ? void 0 : _a.getBoundingClientRect();
-      const paddingBoxComputedStyle = (_b = paddingBoxElement == null ? void 0 : paddingBoxElement.ownerDocument.defaultView) == null ? void 0 : _b.getComputedStyle(paddingBoxElement);
-      const borderBoxComputedStyle = (_c = borderBoxElement == null ? void 0 : borderBoxElement.ownerDocument.defaultView) == null ? void 0 : _c.getComputedStyle(borderBoxElement);
-      const marginBoxComputedStyle = (_d = marginBoxElement == null ? void 0 : marginBoxElement.ownerDocument.defaultView) == null ? void 0 : _d.getComputedStyle(marginBoxElement);
-      const padding2 = paddingBoxComputedStyle && {
-        top: boxModels.parse(paddingBoxComputedStyle.paddingTop),
-        right: boxModels.parse(paddingBoxComputedStyle.paddingRight),
-        bottom: boxModels.parse(paddingBoxComputedStyle.paddingBottom),
-        left: boxModels.parse(paddingBoxComputedStyle.paddingLeft)
-      };
-      const border2 = borderBoxComputedStyle && {
-        top: boxModels.parse(borderBoxComputedStyle.borderTopWidth),
-        right: boxModels.parse(borderBoxComputedStyle.borderRightWidth),
-        bottom: boxModels.parse(borderBoxComputedStyle.borderBottomWidth),
-        left: boxModels.parse(borderBoxComputedStyle.borderLeftWidth)
-      };
-      const margin2 = marginBoxComputedStyle && {
-        top: boxModels.parse(marginBoxComputedStyle.marginTop),
-        right: boxModels.parse(marginBoxComputedStyle.marginRight),
-        bottom: boxModels.parse(marginBoxComputedStyle.marginBottom),
-        left: boxModels.parse(marginBoxComputedStyle.marginLeft)
-      };
-      return borderBox ? boxModels.createBox({
-        borderBox,
-        padding: padding2,
-        border: border2,
-        margin: margin2
-      }) : null;
-    }
-  }), []);
-  const gridItemClassName = reactPage.useStyle(next.useResponsiveStyle([verticalAlign], ([alignItems = "flex-start"]) => ({
-    alignItems
-  })));
-  const [key, setKey] = React.useState(() => uuid.v4());
-  const animationProps = {
-    boxAnimateType,
-    boxAnimateDuration,
-    boxAnimateDelay,
-    itemAnimateType,
-    itemAnimateDuration,
-    itemAnimateDelay,
-    itemStaggerDuration
-  };
-  const prevAnimationProps = React.useRef(animationProps);
-  React.useEffect(() => {
-    if (!index.areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {
-      replayAnimation();
-      setKey(uuid.v4());
-      prevAnimationProps.current = animationProps;
-    }
-  }, [replayAnimation, animationProps]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.BackgroundsContainer, {
-    ref: boxElementCallbackRef,
-    id,
-    className: css.cx(width, margin, borderRadius, reactPage.useStyle({
-      display: "flex"
-    }), reactPage.useStyle(next.useResponsiveStyle([height], ([alignSelf = "auto"]) => ({
-      alignSelf
-    }))), animationClassName),
-    backgrounds,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ref: innerRef,
-      className: css.cx(padding, boxShadow, border, reactPage.useStyle({
-        display: "flex",
-        flexWrap: "wrap",
-        width: "100%"
-      }), reactPage.useStyle(next.useResponsiveStyle([verticalAlign], ([alignContent = "flex-start"]) => ({
-        alignContent
-      })))),
-      children: children && children.elements.length > 0 ? children.elements.map((child, index$1) => /* @__PURE__ */ jsxRuntime.jsx(index.GridItem, {
-        className: gridItemClassName,
-        grid: children.columns,
-        index: index$1,
-        itemAnimateDuration,
-        itemAnimateDelay,
-        itemStaggerDuration,
-        columnGap,
-        rowGap,
-        children: /* @__PURE__ */ jsxRuntime.jsx(next.Element, {
-          element: child
-        })
-      }, child.key)) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {
-        hide: hidePlaceholder
-      })
-    }, key)
-  });
-});
-exports["default"] = Box;
-//# sourceMappingURL=Box.cjs.js.map

package/dist/Box.cjs.js.map

@@ -1 +0,0 @@
-{"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 {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { useResponsiveStyle } 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  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\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 boxElementObjectRef = useRef<HTMLElement | null>(null)\n  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n  const boxElementCallbackRef = useCallback((current: HTMLElement | null) => {\n    boxElementObjectRef.current = current\n\n    setElement(current)\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return boxElementObjectRef.current\n      },\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElementObjectRef.current\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    [],\n  )\n\n  const gridItemClassName = useStyle(\n    useResponsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={boxElementCallbackRef}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(useResponsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            useResponsiveStyle([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              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\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  )\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","boxElementObjectRef","animationClassName","replayAnimation","setElement","useBoxAnimation","boxElementCallbackRef","useCallback","current","useImperativeHandle","getDomNode","getBoxModel","paddingBoxElement","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","useResponsiveStyle","alignItems","key","setKey","useState","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}