@makeswift/runtime 0.13.1 → 0.14.1

package/dist/cjs/components/builtin/Box/animations.js

@@ -0,0 +1,167 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var animations_exports = {};
+__export(animations_exports, {
+  areBoxAnimationPropsEqual: () => areBoxAnimationPropsEqual,
+  useBoxAnimation: () => useBoxAnimation,
+  useItemAnimation: () => useItemAnimation
+});
+module.exports = __toCommonJS(animations_exports);
+var import_react = require("react");
+var import_use_style = require("../../../runtimes/react/use-style");
+var import_hooks = require("../../hooks");
+var import_grid_item = require("../../shared/grid-item");
+var import_constants = require("./constants");
+function useElementOnScreen(options) {
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const intersectionObserverRef = (0, import_react.useRef)(null);
+  const setElement = (0, import_react.useCallback)((element) => {
+    if (element != null) {
+      const observer = new IntersectionObserver(([entry]) => {
+        if (entry?.isIntersecting)
+          setIsVisible(true);
+      }, options);
+      observer.observe(element);
+      intersectionObserverRef.current = observer;
+    } else {
+      intersectionObserverRef.current?.disconnect();
+      intersectionObserverRef.current = null;
+    }
+  }, []);
+  return [isVisible, setElement];
+}
+function compareResponsiveValues(a, b) {
+  if (a == null && b == null) {
+    return true;
+  }
+  if (a != null && b != null) {
+    let isEqual = true;
+    a.forEach((currentA, index) => {
+      const currentB = b.at(index);
+      if (currentB == null) {
+        isEqual = false;
+        return;
+      }
+      if (currentA.deviceId != currentB?.deviceId || currentA.value != currentB.value) {
+        isEqual = false;
+      }
+    });
+    return isEqual;
+  }
+  return false;
+}
+function areBoxAnimationPropsEqual(prevProps, props) {
+  return compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) && compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) && compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) && compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) && compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) && compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) && compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration);
+}
+const exitedBoxAnimationProperties = {
+  none: { opacity: 1 },
+  fadeIn: { opacity: 0 },
+  fadeLeft: { transform: "translate3d(60px,0,0)", opacity: 0 },
+  fadeRight: { transform: "translate3d(-60px,0,0)", opacity: 0 },
+  fadeDown: { transform: "translate3d(0,-80px,0)", opacity: 0 },
+  fadeUp: { transform: "translate3d(0,80px,0)", opacity: 0 },
+  blurIn: { filter: "blur(20px)", opacity: 0 },
+  scaleDown: {
+    transform: "scale(1.2)",
+    opacity: 0
+  },
+  scaleUp: {
+    transform: "scale(.75)",
+    opacity: 0
+  }
+};
+const enteredBoxAnimationProperties = {
+  none: { opacity: 1 },
+  fadeIn: { opacity: 1 },
+  fadeLeft: { transform: "translate3d(0px,0,0)", opacity: 1 },
+  fadeRight: { transform: "translate3d(0px,0,0)", opacity: 1 },
+  fadeDown: { transform: "translate3d(0,0px,0)", opacity: 1 },
+  fadeUp: { transform: "translate3d(0,0px,0)", opacity: 1 },
+  blurIn: { filter: "blur(0px)", opacity: 1 },
+  scaleDown: {
+    transform: "scale(1)",
+    opacity: 1
+  },
+  scaleUp: {
+    transform: "scale(1)",
+    opacity: 1
+  }
+};
+function useBoxAnimation(responsiveAnimationType, responsiveDuration, responisveDelay, itemResponsiveAnimationType) {
+  const [isVisible, setElement] = useElementOnScreen({
+    root: null,
+    rootMargin: `0px 0px -10% 0px`,
+    threshold: 0.2
+  });
+  const animationType = (0, import_hooks.useMediaQuery)(responsiveAnimationType) || import_constants.DEFAULT_BOX_ANIMATE_TYPE;
+  const itemAnimationType = (0, import_hooks.useMediaQuery)(itemResponsiveAnimationType) || import_constants.DEFAULT_ITEM_ANIMATE_TYPE;
+  const duration = (0, import_hooks.useMediaQuery)(responsiveDuration) || import_constants.DEFAULT_BOX_ANIMATE_DURATION;
+  const delay = (0, import_hooks.useMediaQuery)(responisveDelay) || import_constants.DEFAULT_BOX_ANIMATE_DELAY;
+  const actualDelay = delay * 1e3;
+  const actualDuration = duration * 1e3;
+  const entered = {
+    ...enteredBoxAnimationProperties[animationType],
+    transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,
+    [`& > div > .${import_grid_item.gridItemIdentifierClassName}`]: {
+      ...enteredBoxAnimationProperties[itemAnimationType]
+    }
+  };
+  const exited = {
+    ...exitedBoxAnimationProperties[animationType],
+    transition: `all 0ms`,
+    [`& > div > .${import_grid_item.gridItemIdentifierClassName}`]: {
+      ...exitedBoxAnimationProperties[itemAnimationType]
+    }
+  };
+  const [isEntered, setEntered] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (isVisible && !isEntered)
+      setEntered(true);
+  }, [isVisible, entered]);
+  const replayAnimation = (0, import_react.useCallback)(() => {
+    setEntered(false);
+  }, []);
+  return [
+    (0, import_use_style.useStyle)({
+      "@media (prefers-reduced-motion: no-preference)": isEntered ? entered : exited
+    }),
+    replayAnimation,
+    setElement
+  ];
+}
+function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger, index) {
+  const duration = (0, import_hooks.useMediaQuery)(responsiveDuration) || import_constants.DEFAULT_BOX_ANIMATE_DURATION;
+  const delay = (0, import_hooks.useMediaQuery)(responisveDelay) || import_constants.DEFAULT_BOX_ANIMATE_DELAY;
+  const stagger = (0, import_hooks.useMediaQuery)(responsiveStagger) || import_constants.DEFAULT_ITEM_STAGGER_DURATION;
+  const delayFromStagger = responsiveStagger == null || index == null ? 0 : stagger * index;
+  const actualDelay = (delay + delayFromStagger) * 1e3;
+  const actualDuration = duration * 1e3;
+  return (0, import_use_style.useStyle)({
+    "@media (prefers-reduced-motion: no-preference)": {
+      transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  areBoxAnimationPropsEqual,
+  useBoxAnimation,
+  useItemAnimation
+});
+//# sourceMappingURL=animations.js.map

package/dist/cjs/components/builtin/Box/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Box/animations.tsx"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport { useState, useEffect, useCallback, useRef } from 'react'\nimport {\n  ResponsiveNumberValue,\n  ResponsiveSelectValue,\n  ResponsiveValue,\n} from '../../../prop-controllers'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useMediaQuery } from '../../hooks'\nimport { gridItemIdentifierClassName } from '../../shared/grid-item'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_BOX_ANIMATE_TYPE,\n  DEFAULT_ITEM_ANIMATE_TYPE,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\n\nfunction useElementOnScreen(\n  options: IntersectionObserverInit,\n): [boolean, (element: HTMLElement | null) => void] {\n  const [isVisible, setIsVisible] = useState(false)\n  const intersectionObserverRef = useRef<IntersectionObserver | null>(null)\n\n  const setElement = useCallback((element: HTMLElement | null) => {\n    if (element != null) {\n      const observer = new IntersectionObserver(([entry]) => {\n        if (entry?.isIntersecting) setIsVisible(true)\n      }, options)\n\n      observer.observe(element)\n\n      intersectionObserverRef.current = observer\n    } else {\n      intersectionObserverRef.current?.disconnect()\n\n      intersectionObserverRef.current = null\n    }\n  }, [])\n\n  return [isVisible, setElement]\n}\n\nexport type BoxAnimationProps = {\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n}\n\nfunction compareResponsiveValues<T>(a?: ResponsiveValue<T>, b?: ResponsiveValue<T>) {\n  if (a == null && b == null) {\n    return true\n  }\n  if (a != null && b != null) {\n    let isEqual = true\n    a.forEach((currentA, index) => {\n      const currentB = b.at(index)\n      if (currentB == null) {\n        isEqual = false\n        return\n      }\n\n      if (currentA.deviceId != currentB?.deviceId || currentA.value != currentB.value) {\n        isEqual = false\n      }\n    })\n    return isEqual\n  }\n\n  return false\n}\n\nexport function areBoxAnimationPropsEqual(prevProps: BoxAnimationProps, props: BoxAnimationProps) {\n  return (\n    compareResponsiveValues(prevProps.boxAnimateType, props.boxAnimateType) &&\n    compareResponsiveValues(prevProps.boxAnimateDuration, props.boxAnimateDuration) &&\n    compareResponsiveValues(prevProps.boxAnimateDelay, props.boxAnimateDelay) &&\n    compareResponsiveValues(prevProps.itemAnimateType, props.itemAnimateType) &&\n    compareResponsiveValues(prevProps.itemAnimateDuration, props.itemAnimateDuration) &&\n    compareResponsiveValues(prevProps.itemAnimateDelay, props.itemAnimateDelay) &&\n    compareResponsiveValues(prevProps.itemStaggerDuration, props.itemStaggerDuration)\n  )\n}\n\nconst exitedBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n  none: { opacity: 1 },\n  fadeIn: { opacity: 0 },\n  fadeLeft: { transform: 'translate3d(60px,0,0)', opacity: 0 },\n  fadeRight: { transform: 'translate3d(-60px,0,0)', opacity: 0 },\n  fadeDown: { transform: 'translate3d(0,-80px,0)', opacity: 0 },\n  fadeUp: { transform: 'translate3d(0,80px,0)', opacity: 0 },\n  blurIn: { filter: 'blur(20px)', opacity: 0 },\n  scaleDown: {\n    transform: 'scale(1.2)',\n    opacity: 0,\n  },\n  scaleUp: {\n    transform: 'scale(.75)',\n    opacity: 0,\n  },\n}\n\nconst enteredBoxAnimationProperties: { [key in BoxAnimateIn]: CSSObject } = {\n  none: { opacity: 1 },\n  fadeIn: { opacity: 1 },\n  fadeLeft: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n  fadeRight: { transform: 'translate3d(0px,0,0)', opacity: 1 },\n  fadeDown: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n  fadeUp: { transform: 'translate3d(0,0px,0)', opacity: 1 },\n  blurIn: { filter: 'blur(0px)', opacity: 1 },\n  scaleDown: {\n    transform: 'scale(1)',\n    opacity: 1,\n  },\n  scaleUp: {\n    transform: 'scale(1)',\n    opacity: 1,\n  },\n}\n\nexport function useBoxAnimation(\n  responsiveAnimationType: ResponsiveValue<BoxAnimateIn> | undefined,\n  responsiveDuration: ResponsiveValue<number> | undefined,\n  responisveDelay: ResponsiveValue<number> | undefined,\n  itemResponsiveAnimationType: ResponsiveValue<BoxAnimateIn> | undefined,\n): [string, () => void, (element: HTMLElement | null) => void] {\n  const [isVisible, setElement] = useElementOnScreen({\n    root: null,\n    rootMargin: `0px 0px -10% 0px`,\n    threshold: 0.2,\n  })\n  const animationType = useMediaQuery(responsiveAnimationType) || DEFAULT_BOX_ANIMATE_TYPE\n  const itemAnimationType = useMediaQuery(itemResponsiveAnimationType) || DEFAULT_ITEM_ANIMATE_TYPE\n  const duration = useMediaQuery(responsiveDuration) || DEFAULT_BOX_ANIMATE_DURATION\n  const delay = useMediaQuery(responisveDelay) || DEFAULT_BOX_ANIMATE_DELAY\n  const actualDelay = delay * 1000\n  const actualDuration = duration * 1000\n\n  const entered = {\n    ...enteredBoxAnimationProperties[animationType],\n    transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n    [`& > div > .${gridItemIdentifierClassName}`]: {\n      ...enteredBoxAnimationProperties[itemAnimationType],\n    },\n  }\n\n  const exited = {\n    ...exitedBoxAnimationProperties[animationType],\n    transition: `all 0ms`,\n    [`& > div > .${gridItemIdentifierClassName}`]: {\n      ...exitedBoxAnimationProperties[itemAnimationType],\n    },\n  }\n\n  const [isEntered, setEntered] = useState(false)\n\n  useEffect(() => {\n    if (isVisible && !isEntered) setEntered(true)\n  }, [isVisible, entered])\n\n  const replayAnimation = useCallback(() => {\n    setEntered(false)\n  }, [])\n\n  return [\n    useStyle({\n      '@media (prefers-reduced-motion: no-preference)': isEntered ? entered : exited,\n    }),\n    replayAnimation,\n    setElement,\n  ]\n}\n\nexport function useItemAnimation(\n  responsiveDuration: ResponsiveValue<number> | undefined,\n  responisveDelay: ResponsiveValue<number> | undefined,\n  responsiveStagger: ResponsiveValue<number> | undefined,\n  index: number,\n) {\n  const duration = useMediaQuery(responsiveDuration) || DEFAULT_BOX_ANIMATE_DURATION\n  const delay = useMediaQuery(responisveDelay) || DEFAULT_BOX_ANIMATE_DELAY\n  const stagger = useMediaQuery(responsiveStagger) || DEFAULT_ITEM_STAGGER_DURATION\n  const delayFromStagger = responsiveStagger == null || index == null ? 0 : stagger * index\n  const actualDelay = (delay + delayFromStagger) * 1000\n  const actualDuration = duration * 1000\n\n  return useStyle({\n    '@media (prefers-reduced-motion: no-preference)': {\n      transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`,\n    },\n  })\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/components/builtin/Box/components/Placeholder/index.js

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Placeholder_exports = {};
+__export(Placeholder_exports, {
+  default: () => Placeholder_default
+});
+module.exports = __toCommonJS(Placeholder_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_use_style = require("../../../../../runtimes/react/use-style");
+var Placeholder_default = (0, import_react.forwardRef)(function Placeholder({ hide = false, ...restOfProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      style: { visibility: hide ? "hidden" : "initial" },
+      className: (0, import_use_style.useStyle)({
+        width: "100%",
+        background: "rgba(161, 168, 194, 0.18)",
+        height: 80,
+        padding: 8
+      }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "100%",
+          height: "100%",
+          style: { overflow: "visible" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.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"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Box/components/Placeholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/Box/components/Placeholder/index.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"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BQ;AA3BR,mBAAgC;AAChC,uBAAyB;AAIzB,IAAO,0BAAQ,yBAAW,SAAS,YACjC,EAAE,OAAO,OAAO,GAAG,YAAY,GAC/B,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,YAAY,OAAO,WAAW,UAAU;AAAA,MACjD,eAAW,2BAAS;AAAA,QAClB,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,EAAE,UAAU,UAAU;AAAA,UAE7B;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cACH,OAAM;AAAA,cACN,QAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAgB;AAAA,cAChB,MAAK;AAAA,cACL,QAAO;AAAA,cACP,IAAG;AAAA,cACH,IAAG;AAAA;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}

package/dist/cjs/components/builtin/Box/constants.js

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  DEFAULT_BOX_ANIMATE_DELAY: () => DEFAULT_BOX_ANIMATE_DELAY,
+  DEFAULT_BOX_ANIMATE_DURATION: () => DEFAULT_BOX_ANIMATE_DURATION,
+  DEFAULT_BOX_ANIMATE_TYPE: () => DEFAULT_BOX_ANIMATE_TYPE,
+  DEFAULT_ITEM_ANIMATE_DELAY: () => DEFAULT_ITEM_ANIMATE_DELAY,
+  DEFAULT_ITEM_ANIMATE_DURATION: () => DEFAULT_ITEM_ANIMATE_DURATION,
+  DEFAULT_ITEM_ANIMATE_TYPE: () => DEFAULT_ITEM_ANIMATE_TYPE,
+  DEFAULT_ITEM_STAGGER_DURATION: () => DEFAULT_ITEM_STAGGER_DURATION
+});
+module.exports = __toCommonJS(constants_exports);
+const DEFAULT_BOX_ANIMATE_TYPE = "none";
+const DEFAULT_BOX_ANIMATE_DELAY = 0;
+const DEFAULT_BOX_ANIMATE_DURATION = 0.75;
+const DEFAULT_ITEM_ANIMATE_TYPE = "none";
+const DEFAULT_ITEM_ANIMATE_DELAY = 0;
+const DEFAULT_ITEM_ANIMATE_DURATION = 0.75;
+const DEFAULT_ITEM_STAGGER_DURATION = 0;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_BOX_ANIMATE_DELAY,
+  DEFAULT_BOX_ANIMATE_DURATION,
+  DEFAULT_BOX_ANIMATE_TYPE,
+  DEFAULT_ITEM_ANIMATE_DELAY,
+  DEFAULT_ITEM_ANIMATE_DURATION,
+  DEFAULT_ITEM_ANIMATE_TYPE,
+  DEFAULT_ITEM_STAGGER_DURATION
+});
+//# sourceMappingURL=constants.js.map

package/dist/cjs/components/builtin/Box/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Box/constants.ts"],"sourcesContent":["export type BoxAnimateIn =\n  | 'none'\n  | 'fadeIn'\n  | 'fadeUp'\n  | 'fadeDown'\n  | 'fadeLeft'\n  | 'fadeRight'\n  | 'blurIn'\n  | 'scaleUp'\n  | 'scaleDown'\n\nexport const DEFAULT_BOX_ANIMATE_TYPE = 'none'\nexport const DEFAULT_BOX_ANIMATE_DELAY = 0.0\nexport const DEFAULT_BOX_ANIMATE_DURATION = 0.75\nexport const DEFAULT_ITEM_ANIMATE_TYPE = 'none'\nexport const DEFAULT_ITEM_ANIMATE_DELAY = 0.0\nexport const DEFAULT_ITEM_ANIMATE_DURATION = 0.75\nexport const DEFAULT_ITEM_STAGGER_DURATION = 0.0\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,2BAA2B;AACjC,MAAM,4BAA4B;AAClC,MAAM,+BAA+B;AACrC,MAAM,4BAA4B;AAClC,MAAM,6BAA6B;AACnC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;","names":[]}

package/dist/cjs/components/builtin/Box/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Box_exports = {};
+__export(Box_exports, {
+  DEFAULT_BOX_ANIMATE_DELAY: () => import_constants.DEFAULT_BOX_ANIMATE_DELAY,
+  DEFAULT_BOX_ANIMATE_DURATION: () => import_constants.DEFAULT_BOX_ANIMATE_DURATION,
+  DEFAULT_BOX_ANIMATE_TYPE: () => import_constants.DEFAULT_BOX_ANIMATE_TYPE,
+  DEFAULT_ITEM_ANIMATE_DELAY: () => import_constants.DEFAULT_ITEM_ANIMATE_DELAY,
+  DEFAULT_ITEM_ANIMATE_DURATION: () => import_constants.DEFAULT_ITEM_ANIMATE_DURATION,
+  DEFAULT_ITEM_ANIMATE_TYPE: () => import_constants.DEFAULT_ITEM_ANIMATE_TYPE,
+  DEFAULT_ITEM_STAGGER_DURATION: () => import_constants.DEFAULT_ITEM_STAGGER_DURATION,
+  default: () => import_Box.default
+});
+module.exports = __toCommonJS(Box_exports);
+var import_Box = __toESM(require("./Box"));
+var import_constants = require("./constants");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_BOX_ANIMATE_DELAY,
+  DEFAULT_BOX_ANIMATE_DURATION,
+  DEFAULT_BOX_ANIMATE_TYPE,
+  DEFAULT_ITEM_ANIMATE_DELAY,
+  DEFAULT_ITEM_ANIMATE_DURATION,
+  DEFAULT_ITEM_ANIMATE_TYPE,
+  DEFAULT_ITEM_STAGGER_DURATION
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Box/index.tsx"],"sourcesContent":["export { default } from './Box'\nexport {\n  DEFAULT_BOX_ANIMATE_TYPE,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_TYPE,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_ANIMATE_DURATION,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAwB;AACxB,uBAQO;","names":[]}

package/dist/cjs/components/builtin/Box/register.js

@@ -0,0 +1,190 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var register_exports = {};
+__export(register_exports, {
+  registerComponent: () => registerComponent
+});
+module.exports = __toCommonJS(register_exports);
+var import_dynamic = __toESM(require("next/dynamic"));
+var import_dynamic2 = require("../../../next/dynamic");
+var import_prop_controllers = require("../../../prop-controllers");
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_constants = require("../constants");
+var import_constants2 = require("./constants");
+function registerComponent(runtime) {
+  function isHiddenBasedOnAnimationType(props, deviceId, property) {
+    const animateIn = props[property];
+    return ((0, import_breakpoints.findBreakpointOverride)(runtime.getBreakpoints(), animateIn, deviceId)?.value ?? "none") === "none";
+  }
+  const isHiddenBasedOnBoxAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "boxAnimateType");
+  const isHiddenBasedOnItemAnimation = (props, deviceId) => isHiddenBasedOnAnimationType(props, deviceId, "itemAnimateType");
+  return runtime.registerComponent(
+    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(import("./Box")))),
+    {
+      type: import_constants.MakeswiftComponentType.Box,
+      label: "Box",
+      props: {
+        id: import_prop_controllers.Props.ElementID(),
+        backgrounds: import_prop_controllers.Props.Backgrounds(),
+        width: import_prop_controllers.Props.Width({
+          format: import_prop_controllers.Props.Width.Format.ClassName,
+          defaultValue: { value: 100, unit: "%" }
+        }),
+        height: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+          label: "Height",
+          options: [
+            { value: "auto", label: "Auto", icon: "HeightAuto16" },
+            { value: "stretch", label: "Stretch", icon: "HeightMatch16" }
+          ],
+          defaultValue: "auto"
+        }),
+        verticalAlign: import_prop_controllers.Props.ResponsiveIconRadioGroup({
+          label: "Align items",
+          options: [
+            { value: "flex-start", label: "Top", icon: "VerticalAlignStart16" },
+            { value: "center", label: "Middle", icon: "VerticalAlignMiddle16" },
+            { value: "flex-end", label: "Bottom", icon: "VerticalAlignEnd16" },
+            {
+              value: "space-between",
+              label: "Space between",
+              icon: "VerticalAlignSpaceBetween16"
+            }
+          ],
+          defaultValue: "flex-start"
+        }),
+        margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName }),
+        padding: import_prop_controllers.Props.Padding({
+          format: import_prop_controllers.Props.Padding.Format.ClassName,
+          preset: [
+            {
+              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              value: {
+                paddingTop: { value: 10, unit: "px" },
+                paddingRight: { value: 10, unit: "px" },
+                paddingBottom: { value: 10, unit: "px" },
+                paddingLeft: { value: 10, unit: "px" }
+              }
+            }
+          ]
+        }),
+        border: import_prop_controllers.Props.Border({ format: import_prop_controllers.Props.Border.Format.ClassName }),
+        borderRadius: import_prop_controllers.Props.BorderRadius({ format: import_prop_controllers.Props.BorderRadius.Format.ClassName }),
+        boxShadow: import_prop_controllers.Props.Shadows({ format: import_prop_controllers.Props.Shadows.Format.ClassName }),
+        rowGap: import_prop_controllers.Props.GapY((props) => ({
+          hidden: props.children == null
+        })),
+        columnGap: import_prop_controllers.Props.GapX((props) => ({
+          hidden: props.children == null
+        })),
+        boxAnimateType: import_prop_controllers.Props.ResponsiveSelect({
+          label: "Animate box in",
+          labelOrientation: "vertical",
+          options: [
+            { value: "none", label: "None" },
+            { value: "fadeIn", label: "Fade in" },
+            { value: "fadeRight", label: "Fade right" },
+            { value: "fadeDown", label: "Fade down" },
+            { value: "fadeLeft", label: "Fade left" },
+            { value: "fadeUp", label: "Fade up" },
+            { value: "blurIn", label: "Blur in" },
+            { value: "scaleUp", label: "Scale up" },
+            { value: "scaleDown", label: "Scale down" }
+          ],
+          defaultValue: "none"
+        }),
+        boxAnimateDuration: import_prop_controllers.Props.ResponsiveNumber((props, device) => ({
+          label: "Box duration",
+          defaultValue: import_constants2.DEFAULT_BOX_ANIMATE_DURATION,
+          min: 0.1,
+          step: 0.05,
+          suffix: "s",
+          hidden: isHiddenBasedOnBoxAnimation(props, device)
+        })),
+        boxAnimateDelay: import_prop_controllers.Props.ResponsiveNumber((props, device) => ({
+          label: "Box delay",
+          defaultValue: import_constants2.DEFAULT_BOX_ANIMATE_DELAY,
+          min: 0,
+          step: 0.05,
+          suffix: "s",
+          hidden: isHiddenBasedOnBoxAnimation(props, device)
+        })),
+        itemAnimateType: import_prop_controllers.Props.ResponsiveSelect({
+          label: "Animate items in",
+          labelOrientation: "vertical",
+          options: [
+            { value: "none", label: "None" },
+            { value: "fadeIn", label: "Fade in" },
+            { value: "fadeRight", label: "Fade right" },
+            { value: "fadeDown", label: "Fade down" },
+            { value: "fadeLeft", label: "Fade left" },
+            { value: "fadeUp", label: "Fade up" },
+            { value: "blurIn", label: "Blur in" },
+            { value: "scaleUp", label: "Scale up" },
+            { value: "scaleDown", label: "Scale down" }
+          ],
+          defaultValue: "none"
+        }),
+        itemAnimateDuration: import_prop_controllers.Props.ResponsiveNumber((props, device) => ({
+          label: "Items duration",
+          defaultValue: import_constants2.DEFAULT_BOX_ANIMATE_DURATION,
+          min: 0.1,
+          step: 0.05,
+          suffix: "s",
+          hidden: isHiddenBasedOnItemAnimation(props, device)
+        })),
+        itemAnimateDelay: import_prop_controllers.Props.ResponsiveNumber((props, device) => ({
+          label: "Items delay",
+          defaultValue: import_constants2.DEFAULT_ITEM_ANIMATE_DELAY,
+          min: 0,
+          step: 0.05,
+          suffix: "s",
+          hidden: isHiddenBasedOnItemAnimation(props, device)
+        })),
+        itemStaggerDuration: import_prop_controllers.Props.ResponsiveNumber((props, device) => ({
+          label: "Stagger",
+          min: 0,
+          step: 0.05,
+          suffix: "s",
+          defaultValue: import_constants2.DEFAULT_ITEM_STAGGER_DURATION,
+          hidden: isHiddenBasedOnItemAnimation(props, device)
+        })),
+        hidePlaceholder: import_prop_controllers.Props.Checkbox((props) => ({
+          label: "Hide placeholder",
+          hidden: props.children != null
+        })),
+        children: import_prop_controllers.Props.Grid()
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  registerComponent
+});
+//# sourceMappingURL=register.js.map

package/dist/cjs/components/builtin/Box/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Box/register.ts"],"sourcesContent":["import dynamic from 'next/dynamic'\n\nimport { forwardNextDynamicRef } from '../../../next/dynamic'\nimport { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  function isHiddenBasedOnAnimationType(\n    props: Record<string, unknown>,\n    deviceId: string,\n    property: 'boxAnimateType' | 'itemAnimateType',\n  ): boolean {\n    const animateIn = props[property] as ResponsiveValue<BoxAnimateIn>\n    return (\n      (findBreakpointOverride<BoxAnimateIn>(runtime.getBreakpoints(), animateIn, deviceId)?.value ??\n        'none') === 'none'\n    )\n  }\n  const isHiddenBasedOnBoxAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'boxAnimateType')\n  const isHiddenBasedOnItemAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'itemAnimateType')\n\n  return runtime.registerComponent(\n    forwardNextDynamicRef(patch => dynamic(() => patch(import('./Box')))),\n    {\n      type: MakeswiftComponentType.Box,\n      label: 'Box',\n      props: {\n        id: Props.ElementID(),\n        backgrounds: Props.Backgrounds(),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        height: Props.ResponsiveIconRadioGroup({\n          label: 'Height',\n          options: [\n            { value: 'auto', label: 'Auto', icon: 'HeightAuto16' },\n            { value: 'stretch', label: 'Stretch', icon: 'HeightMatch16' },\n          ],\n          defaultValue: 'auto',\n        }),\n        verticalAlign: Props.ResponsiveIconRadioGroup({\n          label: 'Align items',\n          options: [\n            { value: 'flex-start', label: 'Top', icon: 'VerticalAlignStart16' },\n            { value: 'center', label: 'Middle', icon: 'VerticalAlignMiddle16' },\n            { value: 'flex-end', label: 'Bottom', icon: 'VerticalAlignEnd16' },\n            {\n              value: 'space-between',\n              label: 'Space between',\n              icon: 'VerticalAlignSpaceBetween16',\n            },\n          ],\n          defaultValue: 'flex-start',\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n        padding: Props.Padding({\n          format: Props.Padding.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: {\n                paddingTop: { value: 10, unit: 'px' },\n                paddingRight: { value: 10, unit: 'px' },\n                paddingBottom: { value: 10, unit: 'px' },\n                paddingLeft: { value: 10, unit: 'px' },\n              },\n            },\n          ],\n        }),\n        border: Props.Border({ format: Props.Border.Format.ClassName }),\n        borderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName }),\n        boxShadow: Props.Shadows({ format: Props.Shadows.Format.ClassName }),\n        rowGap: Props.GapY(props => ({\n          hidden: props.children == null,\n        })),\n        columnGap: Props.GapX(props => ({\n          hidden: props.children == null,\n        })),\n        boxAnimateType: Props.ResponsiveSelect({\n          label: 'Animate box in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        boxAnimateDuration: Props.ResponsiveNumber((props, device) => ({\n          label: 'Box duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        boxAnimateDelay: Props.ResponsiveNumber((props, device) => ({\n          label: 'Box delay',\n          defaultValue: DEFAULT_BOX_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        itemAnimateType: Props.ResponsiveSelect({\n          label: 'Animate items in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        itemAnimateDuration: Props.ResponsiveNumber((props, device) => ({\n          label: 'Items duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemAnimateDelay: Props.ResponsiveNumber((props, device) => ({\n          label: 'Items delay',\n          defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemStaggerDuration: Props.ResponsiveNumber((props, device) => ({\n          label: 'Stagger',\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          defaultValue: DEFAULT_ITEM_STAGGER_DURATION,\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        hidePlaceholder: Props.Checkbox(props => ({\n          label: 'Hide placeholder',\n          hidden: props.children != null,\n        })),\n        children: Props.Grid(),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_dynamic","import_constants","dynamic"]}