@makeswift/runtime 0.0.0-20230110212203 → 0.0.0-20230110213327

package/dist/Box.cjs.js

@@ -173,12 +173,14 @@ const Box = React.forwardRef(function Box2({
   })));
   const key = React.useMemo(() => uuid.v4(), [boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration]);
   const observerRef = React.useRef(null);
+  const hasIntersected = React.useRef(false);
   const elementCallback = React.useCallback((element) => {
     var _a, _b;
     if (element) {
       const observer = (_a = observerRef.current) != null ? _a : new IntersectionObserver(function intersectionCallback([entry]) {
         if (entry.isIntersecting) {
           entry.target.classList.add("show");
+          hasIntersected.current = true;
         }
       }, {
         root: null,
@@ -194,6 +196,8 @@ const Box = React.forwardRef(function Box2({
     setBoxElement(element);
   }, []);
   React.useEffect(() => {
+    if (hasIntersected.current === false)
+      return;
     boxElement == null ? void 0 : boxElement.classList.remove("show");
     const timeout = setTimeout(() => boxElement == null ? void 0 : boxElement.classList.add("show"), 100);
     return () => clearTimeout(timeout);

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 {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\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 { v4 } from 'uuid'\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 key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const elementCallback = useCallback((element: HTMLDivElement | null) => {\n    if (element) {\n      const observer =\n        observerRef.current ??\n        new IntersectionObserver(\n          function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add('show')\n            }\n          },\n          {\n            root: null,\n            rootMargin: `0px 0px -10% 0px`,\n            threshold: 0.2,\n          },\n        )\n      observer.observe(element)\n      observerRef.current = observer\n    } else {\n      observerRef.current?.disconnect()\n      observerRef.current = null\n    }\n\n    setBoxElement(element)\n  }, [])\n\n  useEffect(() => {\n    boxElement?.classList.remove('show')\n    const timeout = setTimeout(() => boxElement?.classList.add('show'), 100)\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  return (\n    <BackgroundsContainer\n      ref={elementCallback}\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      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      itemAnimationType={itemAnimateType}\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            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              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","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","key","useMemo","v4","observerRef","elementCallback","useCallback","element","observer","IntersectionObserver","entry","isIntersecting","target","classList","add","root","rootMargin","threshold","observe","disconnect","useEffect","remove","timeout","setTimeout","clearTimeout","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}
+{"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  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\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 { v4 } from 'uuid'\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 key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const hasIntersected = useRef(false)\n  const elementCallback = useCallback((element: HTMLDivElement | null) => {\n    if (element) {\n      const observer =\n        observerRef.current ??\n        new IntersectionObserver(\n          function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add('show')\n              hasIntersected.current = true\n            }\n          },\n          {\n            root: null,\n            rootMargin: `0px 0px -10% 0px`,\n            threshold: 0.2,\n          },\n        )\n      observer.observe(element)\n      observerRef.current = observer\n    } else {\n      observerRef.current?.disconnect()\n      observerRef.current = null\n    }\n\n    setBoxElement(element)\n  }, [])\n\n  useEffect(() => {\n    if (hasIntersected.current === false) return\n\n    boxElement?.classList.remove('show')\n    const timeout = setTimeout(() => boxElement?.classList.add('show'), 100)\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  return (\n    <BackgroundsContainer\n      ref={elementCallback}\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      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      itemAnimationType={itemAnimateType}\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            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              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","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","key","useMemo","v4","observerRef","hasIntersected","elementCallback","useCallback","element","observer","IntersectionObserver","entry","isIntersecting","target","classList","add","root","rootMargin","threshold","observe","disconnect","useEffect","remove","timeout","setTimeout","clearTimeout","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}

package/dist/Box.es.js

@@ -171,12 +171,14 @@ const Box = forwardRef(function Box2({
   })));
   const key = useMemo(() => v4(), [boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration]);
   const observerRef = useRef(null);
+  const hasIntersected = useRef(false);
   const elementCallback = useCallback((element) => {
     var _a, _b;
     if (element) {
       const observer = (_a = observerRef.current) != null ? _a : new IntersectionObserver(function intersectionCallback([entry]) {
         if (entry.isIntersecting) {
           entry.target.classList.add("show");
+          hasIntersected.current = true;
         }
       }, {
         root: null,
@@ -192,6 +194,8 @@ const Box = forwardRef(function Box2({
     setBoxElement(element);
   }, []);
   useEffect(() => {
+    if (hasIntersected.current === false)
+      return;
     boxElement == null ? void 0 : boxElement.classList.remove("show");
     const timeout = setTimeout(() => boxElement == null ? void 0 : boxElement.classList.add("show"), 100);
     return () => clearTimeout(timeout);

package/dist/Box.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.es.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  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\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 { v4 } from 'uuid'\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 key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const elementCallback = useCallback((element: HTMLDivElement | null) => {\n    if (element) {\n      const observer =\n        observerRef.current ??\n        new IntersectionObserver(\n          function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add('show')\n            }\n          },\n          {\n            root: null,\n            rootMargin: `0px 0px -10% 0px`,\n            threshold: 0.2,\n          },\n        )\n      observer.observe(element)\n      observerRef.current = observer\n    } else {\n      observerRef.current?.disconnect()\n      observerRef.current = null\n    }\n\n    setBoxElement(element)\n  }, [])\n\n  useEffect(() => {\n    boxElement?.classList.remove('show')\n    const timeout = setTimeout(() => boxElement?.classList.add('show'), 100)\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  return (\n    <BackgroundsContainer\n      ref={elementCallback}\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      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      itemAnimationType={itemAnimateType}\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            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              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","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","key","useMemo","v4","observerRef","elementCallback","useCallback","element","observer","IntersectionObserver","entry","isIntersecting","target","classList","add","root","rootMargin","threshold","observe","disconnect","useEffect","remove","timeout","setTimeout","clearTimeout","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}
+{"version":3,"file":"Box.es.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  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\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 { v4 } from 'uuid'\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 key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const observerRef = useRef<IntersectionObserver | null>(null)\n  const hasIntersected = useRef(false)\n  const elementCallback = useCallback((element: HTMLDivElement | null) => {\n    if (element) {\n      const observer =\n        observerRef.current ??\n        new IntersectionObserver(\n          function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add('show')\n              hasIntersected.current = true\n            }\n          },\n          {\n            root: null,\n            rootMargin: `0px 0px -10% 0px`,\n            threshold: 0.2,\n          },\n        )\n      observer.observe(element)\n      observerRef.current = observer\n    } else {\n      observerRef.current?.disconnect()\n      observerRef.current = null\n    }\n\n    setBoxElement(element)\n  }, [])\n\n  useEffect(() => {\n    if (hasIntersected.current === false) return\n\n    boxElement?.classList.remove('show')\n    const timeout = setTimeout(() => boxElement?.classList.add('show'), 100)\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  return (\n    <BackgroundsContainer\n      ref={elementCallback}\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      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      itemAnimationType={itemAnimateType}\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            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              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","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","key","useMemo","v4","observerRef","hasIntersected","elementCallback","useCallback","element","observer","IntersectionObserver","entry","isIntersecting","target","classList","add","root","rootMargin","threshold","observe","disconnect","useEffect","remove","timeout","setTimeout","clearTimeout","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}

package/dist/index.cjs.js

@@ -1085,7 +1085,7 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.0.0-20230110212203";
+const version = "0.0.0-20230110213327";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }

package/dist/index.es.js

@@ -1050,7 +1050,7 @@ class Document$1 extends NextDocument {
     });
   }
 }
-const version = "0.0.0-20230110212203";
+const version = "0.0.0-20230110213327";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }

package/dist/types/src/components/builtin/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../../src/components/builtin/Box/Box.tsx"],"names":[],"mappings":";AAcA,OAAO,EACL,cAAc,EACd,6BAA6B,EAC7B,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAoB,MAAM,oBAAoB,CAAA;AAErE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM1C,aAAK,KAAK,GAAG;IACX,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,6BAA6B,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC1D,aAAa,CAAC,EAAE,6BAA6B,CAC3C,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,CACvD,CAAA;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAA;IACpD,kBAAkB,CAAC,EAAE,qBAAqB,CAAA;IAC1C,eAAe,CAAC,EAAE,qBAAqB,CAAA;IACvC,eAAe,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAA;IACrD,mBAAmB,CAAC,EAAE,qBAAqB,CAAA;IAC3C,gBAAgB,CAAC,EAAE,qBAAqB,CAAA;IACxC,mBAAmB,CAAC,EAAE,qBAAqB,CAAA;IAC3C,eAAe,CAAC,EAAE,aAAa,CAAA;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,GAAG,kGA4KP,CAAA;AAEF,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../../src/components/builtin/Box/Box.tsx"],"names":[],"mappings":";AAcA,OAAO,EACL,cAAc,EACd,6BAA6B,EAC7B,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAoB,MAAM,oBAAoB,CAAA;AAErE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM1C,aAAK,KAAK,GAAG;IACX,EAAE,CAAC,EAAE,cAAc,CAAA;IACnB,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,6BAA6B,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC1D,aAAa,CAAC,EAAE,6BAA6B,CAC3C,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,CACvD,CAAA;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAA;IACpD,kBAAkB,CAAC,EAAE,qBAAqB,CAAA;IAC1C,eAAe,CAAC,EAAE,qBAAqB,CAAA;IACvC,eAAe,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAA;IACrD,mBAAmB,CAAC,EAAE,qBAAqB,CAAA;IAC3C,gBAAgB,CAAC,EAAE,qBAAqB,CAAA;IACxC,mBAAmB,CAAC,EAAE,qBAAqB,CAAA;IAC3C,eAAe,CAAC,EAAE,aAAa,CAAA;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,GAAG,kGAgLP,CAAA;AAEF,eAAe,GAAG,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makeswift/runtime",
-  "version": "0.0.0-20230110212203",
+  "version": "0.0.0-20230110213327",
   "license": "MIT",
   "main": "dist/main.cjs",
   "module": "dist/main.es",