@makeswift/runtime 0.0.0-20230110213327 → 0.0.0-20230112172637

package/dist/Box.cjs.js

@@ -33,11 +33,11 @@ var __objRest = (source, exclude) => {
 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 jsxRuntime = require("react/jsx-runtime");
 var boxModels = require("./box-models.cjs.js");
 var gridItem = require("./grid-item.cjs.js");
-var uuid = require("uuid");
 require("use-sync-external-store/shim/with-selector");
 require("./react-page.cjs.js");
 require("redux");
@@ -66,8 +66,8 @@ require("uuid/v4");
 require("corporate-ipsum");
 require("css-box-model");
 require("next/image");
+require("./useIsomorphicLayoutEffect.cjs.js");
 require("react-player");
-require("./useMediaQuery.cjs.js");
 var Placeholder = React.forwardRef(function Placeholder2(_a, ref) {
   var _b = _a, {
     hide = false
@@ -202,6 +202,7 @@ const Box = React.forwardRef(function Box2({
     const timeout = setTimeout(() => boxElement == null ? void 0 : boxElement.classList.add("show"), 100);
     return () => clearTimeout(timeout);
   }, [key]);
+  const animationClassName = gridItem.useBoxAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType);
   return /* @__PURE__ */ jsxRuntime.jsx(gridItem.BackgroundsContainer, {
     ref: elementCallback,
     id,
@@ -209,11 +210,7 @@ const Box = React.forwardRef(function Box2({
       display: "flex"
     }), next.useStyle(next.responsiveStyle([height], ([alignSelf = "auto"]) => ({
       alignSelf
-    })))),
-    boxAnimateType,
-    boxAnimateDuration,
-    boxAnimateDelay,
-    itemAnimationType: itemAnimateType,
+    }))), animationClassName),
     backgrounds,
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
       ref: innerRef,

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 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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"}
+{"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'\nimport { v4 } from 'uuid'\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 { useBoxAnimation } from './animations'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const 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\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\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  const animationClassName = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\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        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            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","animationClassName","useBoxAnimation","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}

package/dist/Box.es.js

@@ -31,11 +31,11 @@ var __objRest = (source, exclude) => {
 };
 import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useCallback, useEffect } from "react";
 import { cx } from "@emotion/css";
-import { n as useStyle, r as responsiveStyle, E as Element } from "./index.es.js";
+import { v4 } from "uuid";
+import { o as useStyle, r as responsiveStyle, E as Element } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
 import { p as parse, c as createBox } from "./box-models.es.js";
-import { B as BackgroundsContainer, G as GridItem } from "./grid-item.es.js";
-import { v4 } from "uuid";
+import { a as useBoxAnimation, B as BackgroundsContainer, G as GridItem } from "./grid-item.es.js";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
 import "redux";
@@ -64,8 +64,8 @@ import "uuid/v4";
 import "corporate-ipsum";
 import "css-box-model";
 import "next/image";
+import "./useIsomorphicLayoutEffect.es.js";
 import "react-player";
-import "./useMediaQuery.es.js";
 var Placeholder = forwardRef(function Placeholder2(_a, ref) {
   var _b = _a, {
     hide = false
@@ -200,6 +200,7 @@ const Box = forwardRef(function Box2({
     const timeout = setTimeout(() => boxElement == null ? void 0 : boxElement.classList.add("show"), 100);
     return () => clearTimeout(timeout);
   }, [key]);
+  const animationClassName = useBoxAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType);
   return /* @__PURE__ */ jsx(BackgroundsContainer, {
     ref: elementCallback,
     id,
@@ -207,11 +208,7 @@ const Box = forwardRef(function Box2({
       display: "flex"
     }), useStyle(responsiveStyle([height], ([alignSelf = "auto"]) => ({
       alignSelf
-    })))),
-    boxAnimateType,
-    boxAnimateDuration,
-    boxAnimateDelay,
-    itemAnimationType: itemAnimateType,
+    }))), animationClassName),
     backgrounds,
     children: /* @__PURE__ */ jsx("div", {
       ref: innerRef,

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 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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"}
+{"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'\nimport { v4 } from 'uuid'\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 { useBoxAnimation } from './animations'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const 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\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\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  const animationClassName = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\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        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            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","animationClassName","useBoxAnimation","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}

package/dist/Button.es.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import { forwardRef } from "react";
 import ColorHelper from "color";
-import { n as useStyle, o as responsiveWidth, r as responsiveStyle, p as responsiveTextStyle, q as colorToString } from "./index.es.js";
+import { o as useStyle, p as responsiveWidth, r as responsiveStyle, q as responsiveTextStyle, s as colorToString } from "./index.es.js";
 import { L as Link } from "./index.es2.js";
 import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";

package/dist/Carousel.cjs.js

@@ -38,7 +38,6 @@ var popcorn = require("@popmotion/popcorn");
 var next = require("./index.cjs.js");
 require("use-sync-external-store/shim");
 require("./slot.cjs.js");
-var useMediaQuery = require("./useMediaQuery.cjs.js");
 var Image = require("./Image.cjs.js");
 var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
@@ -122,8 +121,8 @@ const Carousel = React.forwardRef(function Carousel2({
   const [index, setIndex] = React.useState(0);
   const swipe = React.useRef(0);
   const startIndex = popcorn.wrap(0, images.length, index);
-  const pageSize = useMediaQuery.useMediaQuery(responsivePageSize) || 1;
-  const step = useMediaQuery.useMediaQuery(responsiveStep) || 1;
+  const pageSize = next.useMediaQuery(responsivePageSize) || 1;
+  const step = next.useMediaQuery(responsiveStep) || 1;
   const endIndex = startIndex + pageSize;
   const pageCount = Math.ceil((images.length - pageSize) / step + 1);
   const pageIndex = Math.ceil(startIndex / step);

package/dist/Carousel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ElementIDValue,\n  ImagesValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { responsiveStyle } from '../../utils/responsive-style'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      responsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      responsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      responsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > .${slideClassName}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      responsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  id={key}\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"names":["LeftChevron","_jsx","RightChevron","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","pageSize","responsivePageSize","step","responsiveStep","gap","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","responsiveStyle","flexBasis","maxWidth","minWidth","alignItems","reelClassName","flexWrap","value","unit","padding","arrowClassName","borderRadius","outline","border","height","justifyContent","cursor","userSelect","background","swatch","hue","saturation","lightness","alpha","colorToString","svg","stroke","slopClassName","top","bottom","zIndex","color","leftSlopClassName","transform","rightSlopClassName","dotsClassName","marginTop","flexDirection","e","key","_jsxs","motion","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}
+{"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ElementIDValue,\n  ImagesValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { responsiveStyle } from '../../utils/responsive-style'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      responsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      responsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      responsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > .${slideClassName}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      responsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  id={key}\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"names":["LeftChevron","_jsx","RightChevron","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","pageSize","responsivePageSize","step","responsiveStep","gap","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","responsiveStyle","flexBasis","maxWidth","minWidth","alignItems","reelClassName","flexWrap","value","unit","padding","arrowClassName","borderRadius","outline","border","height","justifyContent","cursor","userSelect","background","swatch","hue","saturation","lightness","alpha","colorToString","svg","stroke","slopClassName","top","bottom","zIndex","color","leftSlopClassName","transform","rightSlopClassName","dotsClassName","marginTop","flexDirection","e","key","_jsxs","motion","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}

package/dist/Carousel.es.js

@@ -33,10 +33,9 @@ import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
 import { useAnimation, motion } from "framer-motion";
 import { useGesture } from "react-use-gesture";
 import { wrap } from "@popmotion/popcorn";
-import { n as useStyle, r as responsiveStyle, q as colorToString } from "./index.es.js";
+import { m as useMediaQuery, o as useStyle, r as responsiveStyle, s as colorToString } from "./index.es.js";
 import "use-sync-external-store/shim";
 import "./slot.es.js";
-import { u as useMediaQuery } from "./useMediaQuery.es.js";
 import ImageComponent from "./Image.es.js";
 import { cx } from "@emotion/css";
 import { jsxs, jsx } from "react/jsx-runtime";

package/dist/Carousel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.es.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ElementIDValue,\n  ImagesValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { responsiveStyle } from '../../utils/responsive-style'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      responsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      responsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      responsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > .${slideClassName}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      responsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  id={key}\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"names":["LeftChevron","_jsx","RightChevron","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","pageSize","responsivePageSize","step","responsiveStep","gap","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","responsiveStyle","flexBasis","maxWidth","minWidth","alignItems","reelClassName","flexWrap","value","unit","padding","arrowClassName","borderRadius","outline","border","height","justifyContent","cursor","userSelect","background","swatch","hue","saturation","lightness","alpha","colorToString","svg","stroke","slopClassName","top","bottom","zIndex","color","leftSlopClassName","transform","rightSlopClassName","dotsClassName","marginTop","flexDirection","e","key","_jsxs","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}
+{"version":3,"file":"Carousel.es.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n  ElementIDValue,\n  ImagesValue,\n  ResponsiveNumberValue,\n  ResponsiveIconRadioGroupValue,\n  GapXValue,\n  CheckboxValue,\n  NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { responsiveStyle } from '../../utils/responsive-style'\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: ElementIDValue\n  images?: ImagesValue\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: GapXValue\n  autoplay?: CheckboxValue\n  delay?: NumberValue\n  showArrows?: CheckboxValue\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: CheckboxValue\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, velocity)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      responsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      responsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      responsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > .${slideClassName}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      responsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n\n      [`&:hover > .${arrowClassName}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      responsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  id={key}\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"names":["LeftChevron","_jsx","RightChevron","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","pageSize","responsivePageSize","step","responsiveStep","gap","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","responsiveStyle","flexBasis","maxWidth","minWidth","alignItems","reelClassName","flexWrap","value","unit","padding","arrowClassName","borderRadius","outline","border","height","justifyContent","cursor","userSelect","background","swatch","hue","saturation","lightness","alpha","colorToString","svg","stroke","slopClassName","top","bottom","zIndex","color","leftSlopClassName","transform","rightSlopClassName","dotsClassName","marginTop","flexDirection","e","key","_jsxs","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}

package/dist/Countdown.es.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import { cx } from "@emotion/css";
 import { forwardRef, useState, useEffect } from "react";
-import { n as useStyle, r as responsiveStyle, q as colorToString } from "./index.es.js";
+import { o as useStyle, r as responsiveStyle, s as colorToString } from "./index.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";

package/dist/Divider.es.js

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { n as useStyle, r as responsiveStyle, q as colorToString } from "./index.es.js";
+import { o as useStyle, r as responsiveStyle, s as colorToString } from "./index.es.js";
 import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";

package/dist/Embed.cjs.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
+var useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs.js");
 var next = require("./index.cjs.js");
 var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
@@ -64,7 +65,7 @@ const Embed = React.forwardRef(function Embed2({
 }, ref) {
   const [container, setContainer] = React.useState(null);
   const [shouldRender, setShouldRender] = React.useState(false);
-  next.useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     setShouldRender(true);
   }, []);
   React.useImperativeHandle(ref, () => container, [container]);